@0xsequence/design-system - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

dist/types/components/Button/Button.d.ts

@@ -1,2 +0,2 @@
-import { ComponentType } from 'react';
+import { ComponentType, ReactNode } from 'react';
 import { PolymorphicComponent } from '../../components/Box';
@@ -8,3 +8,3 @@ import { IconProps } from '../../icons/types';
     pending?: boolean;
-    label?: string;
+    label?: ReactNode;
     width?: 'full' | 'normal';
@@ -11,0 +11,0 @@ LeftIcon?: ComponentType<IconProps>;

dist/types/components/Button/styles.css.d.ts

 import { RecipeVariants } from '@vanilla-extract/recipes';
 export declare const buttonVariants: import("@vanilla-extract/recipes").RuntimeFn<{
     variant: {
+        base: {};
         primary: any;
-        solid: any;
         glass: any;
         emphasis: any;
         text: any[];
-        active: any[];
-        inactive: any[];
     };
+    clickable: {
+        true: any;
+    };
+    disabled: {
+        true: any;
+    };
     iconOnly: {
@@ -16,11 +20,6 @@ true: {};
     size: {
-        tiny: any[];
+        xs: any[];
         sm: any[];
         md: any[];
         lg: any[];
-        tabTiny: any[];
-        tab: (string | {
-            height: "32px";
-            padding: "0.375rem 1.25rem";
-        })[];
     };
@@ -35,3 +34,3 @@ width: {
     size: {
-        tiny: {
+        xs: {
             height: any;
@@ -43,11 +42,3 @@ width: any;
         lg: {};
-        tabTiny: {
-            height: any;
-            width: any;
-        };
-        tab: {
-            height: any;
-            width: any;
-        };
     };
 }>;

dist/types/components/Collapsible/styles.css.d.ts

@@ -5,9 +5,2 @@ export declare const COLLAPSED_HEIGHT = "65px";
 export declare const content: string;
-export declare const label: string;
-export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{
-    expanded: {
-        true: {
-            transform: "rotate(-90deg)";
-        };
-    };
-}>;
+export declare const icon: string;

dist/types/components/Group/styles.css.d.ts

 export declare const root: string;
-export declare const header: string;
 export declare const items: import("@vanilla-extract/recipes").RuntimeFn<{
     layout: {
-        rows: {};
+        rows: any;
         grid: {
             display: "grid";
-            gridColumnGap: "12px";
-            gridRowGap: "12px";
+            gridColumnGap: any;
+            gridRowGap: any;
             gridAutoRows: "1fr";
             gridTemplateColumns: "repeat(2, minmax(0, 1fr))";
-            '@media': {
-                'screen and (min-width: 1024px)': {
-                    gridTemplateColumns: "repeat(3, minmax(0, 1fr))";
-                };
-            };
+            '@media': any;
         };
     };
 }>;

dist/types/components/IconButton/IconButton.d.ts

@@ -6,3 +6,3 @@ import { ComponentType } from 'react';
 declare type IconButtonProps = Omit<ButtonVariants, 'width' | 'label' | 'LeftIcon' | 'RightIcon' | 'size'> & {
-    size?: 'tiny' | 'sm' | 'md';
+    size?: 'xs' | 'sm' | 'md';
     Icon: ComponentType<IconProps>;
@@ -9,0 +9,0 @@ };

dist/types/components/index.d.ts

@@ -0,14 +1,21 @@
+export { Avatar } from './Avatar';
 export { Box } from './Box';
 export type { BoxProps, PolymorphicComponent, PolymorphicProps, PolymorphicRef, } from './Box';
+export { Button } from './Button';
+export { Collapsible } from './Collapsible';
 export { Group } from './Group';
-export { Collapsible } from './Collapsible';
+export { IconButton } from './IconButton';
+export { InfoBubble } from './InfoBubble';
+export { LabelledField } from './LabelledField';
+export { Modal } from './Modal';
+export { Spinner } from './Spinner';
 export { Stack } from './Stack';
+export { Switch } from './Switch';
+export { Tabs } from './Tabs';
+export { TabSelect } from './TabSelect';
+export { Tag } from './Tag';
+export { Text } from './Text';
+export { TextInput } from './TextInput';
 export { ThemeProvider } from './ThemeProvider';
-export { Text } from './Text';
-export { Tabs } from './Tabs';
-export { Switch } from './Switch';
+export { TokenImage } from './TokenImage';
 export { Tooltip } from './Tooltip';
-export { Button } from './Button';
-export { IconButton } from './IconButton';
-export { Avatar } from './Avatar';
-export { TokenImage } from './TokenImage';

dist/types/css/atoms.css.d.ts

@@ -0,10 +1,25 @@
+export declare const dimension: {
+    none: string;
+    auto: string;
+    full: string;
+    half: string;
+    fit: string;
+    max: string;
+    min: string;
+    vw: string;
+    vh: string;
+};
 export declare const atoms: ((props: {
-    borderBottomWidth?: any;
-    borderLeftWidth?: any;
-    borderRightWidth?: any;
-    borderTopWidth?: any;
-    borderBottomLeftRadius?: any;
-    borderBottomRightRadius?: any;
-    borderTopLeftRadius?: any;
-    borderTopRightRadius?: any;
+    width?: ("auto" | "none" | "full" | "half" | "fit" | "max" | "min" | "vw" | "vh" | {
+        sm?: "auto" | "none" | "full" | "half" | "fit" | "max" | "min" | "vw" | "vh" | undefined;
+        md?: "auto" | "none" | "full" | "half" | "fit" | "max" | "min" | "vw" | "vh" | undefined;
+        lg?: "auto" | "none" | "full" | "half" | "fit" | "max" | "min" | "vw" | "vh" | undefined;
+        xl?: "auto" | "none" | "full" | "half" | "fit" | "max" | "min" | "vw" | "vh" | undefined;
+    }) | undefined;
+    height?: ("auto" | "none" | "full" | "half" | "fit" | "max" | "min" | "vw" | "vh" | {
+        sm?: "auto" | "none" | "full" | "half" | "fit" | "max" | "min" | "vw" | "vh" | undefined;
+        md?: "auto" | "none" | "full" | "half" | "fit" | "max" | "min" | "vw" | "vh" | undefined;
+        lg?: "auto" | "none" | "full" | "half" | "fit" | "max" | "min" | "vw" | "vh" | undefined;
+        xl?: "auto" | "none" | "full" | "half" | "fit" | "max" | "min" | "vw" | "vh" | undefined;
+    }) | undefined;
     top?: any;
@@ -23,2 +38,10 @@ bottom?: any;
     gap?: any;
+    borderBottomWidth?: any;
+    borderLeftWidth?: any;
+    borderRightWidth?: any;
+    borderTopWidth?: any;
+    borderBottomLeftRadius?: any;
+    borderBottomRightRadius?: any;
+    borderTopLeftRadius?: any;
+    borderTopRightRadius?: any;
     fontSize?: any;
@@ -114,3 +137,4 @@ fontWeight?: any;
     wordWrap?: "inherit" | "initial" | "normal" | "break-word" | undefined;
-    zIndex?: "auto" | "0" | "10" | "20" | undefined;
+    zIndex?: "0" | "auto" | "10" | "20" | undefined;
+    userSelect?: "none" | undefined;
 } & {
@@ -127,6 +151,13 @@ background?: any;
     }) | undefined;
+    pointerEvents?: ("auto" | "none" | {
+        base?: "auto" | "none" | undefined;
+        active?: "auto" | "none" | undefined;
+        disabled?: "auto" | "none" | undefined;
+        focus?: "auto" | "none" | undefined;
+        hover?: "auto" | "none" | undefined;
+    }) | undefined;
     opacity?: any;
 }) => string) & {
-    properties: Set<"alignItems" | "alignSelf" | "backdropFilter" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopWidth" | "bottom" | "color" | "cursor" | "display" | "flexDirection" | "fontFamily" | "fontSize" | "fontWeight" | "justifyContent" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textTransform" | "top" | "visibility" | "whiteSpace" | "wordBreak" | "wordWrap" | "zIndex" | "background" | "borderColor" | "borderRadius" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "placeItems" | "borderLeftRadius" | "borderRightRadius" | "borderTopRadius" | "borderBottomRadius" | "marginX" | "marginY" | "paddingX" | "paddingY">;
+    properties: Set<"alignItems" | "alignSelf" | "backdropFilter" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopWidth" | "bottom" | "color" | "cursor" | "display" | "flexDirection" | "fontFamily" | "fontSize" | "fontWeight" | "height" | "justifyContent" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "textTransform" | "top" | "userSelect" | "visibility" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "zIndex" | "background" | "borderColor" | "borderRadius" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "placeItems" | "borderLeftRadius" | "borderRightRadius" | "borderTopRadius" | "borderBottomRadius" | "marginX" | "marginY" | "paddingX" | "paddingY">;
 };
 export declare type Atoms = Parameters<typeof atoms>[0];

dist/types/css/index.d.ts

 export { breakpoints } from './breakpoints';
 export type { Breakpoint } from './breakpoints';
+export { vars } from './vars.css';
+export type { ThemeVars } from './vars.css';
 export { atoms } from './atoms.css';
 export type { Atoms } from './atoms.css';
-export { vars } from './vars.css';
-export type { ThemeVars } from './vars.css';
+export { responsiveStyle } from './utils';

dist/types/css/utils.d.ts

@@ -1,2 +0,10 @@
-export declare const getVarName: (_value: string | null, path: string[]) => string;
+import { breakpoints } from './breakpoints';
+export declare const kebabize: (str: string) => string;
 export declare const capitalize: (s: string) => string;
+export declare const mapVarName: (_value: string | null, path: string[]) => string;
+export declare const responsiveStyle: (rules: {
+    sm?: Record<string, string> | undefined;
+    md?: Record<string, string> | undefined;
+    lg?: Record<string, string> | undefined;
+    xl?: Record<string, string> | undefined;
+}) => {};

dist/types/index.d.ts

@@ -0,4 +1,4 @@
+export { atoms, breakpoints, vars, responsiveStyle } from './css';
+export type { Atoms, Breakpoint, ThemeVars } from './css';
 export * from './components';
 export * from './icons';
-export { atoms, breakpoints, vars } from './css';
-export type { Atoms, Breakpoint, ThemeVars } from './css';

package.json

 {
   "name": "@0xsequence/design-system",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "license": "Apache-2.0",
@@ -9,2 +9,3 @@ "type": "module",
   "types": "dist/types/index.d.ts",
+  "homepage": "https://0xsequence.github.io/design-system/",
   "exports": {
@@ -28,3 +29,3 @@ ".": {
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "build-storybook": "build-storybook --no-manager-cache -o ./docs",
     "test": "jest",
@@ -57,2 +58,3 @@ "lint": "eslint -c .eslintrc './src/**/*.{ts,tsx}'",
     "@storybook/react": "^6.5.12",
+    "@storybook/theming": "^6.5.13",
     "@svgr/cli": "^6.5.1",
@@ -59,0 +61,0 @@ "@testing-library/dom": "^8.19.0",

README.md

@@ -1,1 +0,53 @@
-# design-system
+[Live Storybook](https://0xsequence.github.io/design-system/)
+
+# Sequence Design System
+
+Sequence Design System is a reusable component library uses across the Sequence product suite.
+
+Components are written in [React](https://reactjs.org/) with [Vanilla Extract](https://vanilla-extract.style/), and its stories are written in [Component Story Format](https://medium.com/storybookjs/component-story-format-66f4c32366df).
+
+### Install
+
+```
+yarn add @0xsequence/design-system
+```
+
+### Use
+
+Import components you want into your UI
+
+`import { Box, Text, Button } from '@0xsequence/design-system'`
+
+and use them like so
+
+```
+const example = () => (
+  <Box display="flex" gap="1">
+    <Text variant="normal">Hello, World!</Text>
+    <Button variant="primary" label="Click me" onClick={() => 0}/>
+  </Box>
+)
+
+```
+
+### Run and Develop Locally
+
+Clone the [Sequence Design System GitHub Project](https://github.com/0xsequence/design-system) then start Storybook.
+
+```
+yarn && yarn storybook
+```
+
+### Used by
+
+- [Sequence Wallet](https://sequence.app/)
+- [Sequence Console](https://sequence.dev/)
+- [Sequence Status](https://status.sequence.info/)
+- [Sequence Demo Dapp Github Project](https://github.com/0xsequence/demo-dapp)
+
+Note: this package is not used in Storybook's UI, but the visual design is identical.
+
+### **Resources**
+
+- [Storybook Documentation](https://storybook.js.org/docs/react/get-started/introduction)
+- [GitHub Repository](https://github.com/0xsequence/design-system)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 40 instances in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Lines of code

23734

increased by23.42%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

54

increased by5300%

Number of medium supply chain risk alerts

20

decreased by-66.67%

Worsened metrics

Total package byte prevSize

1770407

decreased by-66.59%

Dev dependency count

48

increased by2.13%

Number of package files

158

decreased by-11.73%

No dependency changes