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

Comparing version 0.1.4 to 0.1.5

dist/types/components/Avatar/Avatar.d.ts

 /// <reference types="react" />
-import { BoxLayoutProps } from '../Box';
+import { BoxProps } from '../Box';
 declare type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
-interface AvatarProps extends BoxLayoutProps {
+interface AvatarProps extends BoxProps {
     address: string;
     size?: AvatarSize;
-    className?: string;
 }
 export declare const Avatar: import("react").MemoExoticComponent<(props: AvatarProps) => JSX.Element>;
 export {};

dist/types/components/Box/Box.d.ts

@@ -1,11 +0,10 @@
-import { ClassValue } from 'clsx';
-import { ElementType, ReactElement, ComponentPropsWithRef } from 'react';
+import { ElementType, ReactElement, Ref, ComponentPropsWithRef, ComponentPropsWithoutRef } from 'react';
 import { Atoms } from '../../css';
-export declare type BoxProps<T extends ElementType = 'div'> = ComponentPropsWithRef<T> & {
+export declare type BoxProps<T extends ElementType = 'div'> = ComponentPropsWithoutRef<T> & {
     as?: T;
-    className?: ClassValue;
+    ref?: Ref<ComponentPropsWithRef<T>['ref']> | null;
 } & Atoms;
-declare type PolymorphicComponent = <T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null;
-export declare const Box: PolymorphicComponent;
-export declare type BoxLayoutProps = Pick<Atoms, 'margin' | 'marginX' | 'marginY' | 'marginBottom' | 'marginLeft' | 'marginRight' | 'marginTop'>;
-export {};
+export declare type PolymorphicProps<P, T extends ElementType> = P & BoxProps<T>;
+export declare type PolymorphicComponent<P, D extends ElementType = 'div'> = <T extends ElementType = D>(props: PolymorphicProps<P, T>) => ReactElement | null;
+export declare type PolymorphicRef<T extends ElementType = 'div'> = BoxProps<T>['ref'];
+export declare const Box: PolymorphicComponent<{}, 'div'>;

dist/types/components/Box/index.d.ts

 export { Box } from './Box';
-export type { BoxLayoutProps, BoxProps } from './Box';
+export type { BoxProps, PolymorphicComponent, PolymorphicProps, PolymorphicRef, } from './Box';

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

@@ -1,21 +0,14 @@
-import { PropsWithChildren } from 'react';
-export declare const Button: import("react").ForwardRefExoticComponent<Pick<PropsWithChildren<import("@vanilla-extract/recipes/dist/declarations/src/types").VariantSelection<{
-    variant: {
-        primary: any[];
-        solid: any[];
-        glass: any[];
-        disabled: any[];
-        pending: any[];
-    };
-    size: {
-        sm: any[];
-        md: any[];
-        lg: any[];
-    };
-    width: {
-        full: any[];
-        normal: any[];
-    };
-}> & Omit<BoxProps<T>, "display" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "width" | "background" | "size"> & {
-    width?: "normal" | "full" | undefined;
-}>, string | number | symbol> & import("react").RefAttributes<"symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "text" | "small" | "ruby" | "table" | "progress" | "pre" | "base" | "big" | "link" | "sub" | "sup" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view">>;
+import { ComponentType } from 'react';
+import { PolymorphicComponent } from '../../components/Box';
+import { IconProps } from '../../icons/types';
+import { ButtonVariants } from './styles.css';
+declare type ButtonProps = ButtonVariants & {
+    disabled?: boolean;
+    pending?: boolean;
+    label?: string;
+    width?: 'full' | 'normal';
+    LeftIcon?: ComponentType<IconProps>;
+    RightIcon?: ComponentType<IconProps>;
+};
+export declare const Button: PolymorphicComponent<ButtonProps, 'button'>;
+export {};

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

 import { RecipeVariants } from '@vanilla-extract/recipes';
-export declare const variants: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+export declare const buttonVariants: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
     variant: {
@@ -7,4 +7,6 @@ primary: any[];
         glass: any[];
-        disabled: any[];
-        pending: any[];
+        nested: any[];
+        text: any[];
+        active: any[];
+        inactive: any[];
     };
@@ -15,2 +17,3 @@ size: {
         lg: any[];
+        tab: any[];
     };
@@ -22,2 +25,22 @@ width: {
 }>;
-export declare type Variants = RecipeVariants<typeof variants>;
+export declare type ButtonVariants = RecipeVariants<typeof buttonVariants>;
+export declare const iconVariants: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    size: {
+        sm: {
+            height: any;
+            width: any;
+        };
+        md: {
+            height: any;
+            width: any;
+        };
+        lg: {
+            height: any;
+            width: any;
+        };
+        tab: {
+            height: any;
+            width: any;
+        };
+    };
+}>;

dist/types/components/index.d.ts

 export { Box } from './Box';
-export type { BoxProps, BoxLayoutProps } from './Box';
+export type { BoxProps, PolymorphicComponent, PolymorphicProps, PolymorphicRef, } from './Box';
 export { Group } from './Group';
@@ -4,0 +4,0 @@ export { Collapsible } from './Collapsible';

dist/types/components/Stack/Stack.d.ts

@@ -1,11 +0,6 @@
-import { ReactNode } from 'react';
-import { BoxLayoutProps, BoxProps } from '../../components/Box';
-interface StackProps extends BoxLayoutProps {
-    children: ReactNode;
-    style?: any;
-    className?: string;
-    flexDirection?: BoxProps['flexDirection'];
-    gap?: BoxProps['gap'];
+/// <reference types="react" />
+import { BoxProps } from '../../components/Box';
+interface StackProps extends BoxProps {
 }
 export declare const Stack: (props: StackProps) => JSX.Element;
 export {};

dist/types/components/Text/Text.d.ts

@@ -1,27 +0,5 @@
-/// <reference types="react" />
-export declare const Text: import("react").ForwardRefExoticComponent<Partial<Pick<BoxProps<T>, "alignSelf" | "color" | "fontWeight" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "textTransform" | "visibility" | "whiteSpace" | "wordBreak" | "wordWrap" | "zIndex" | "margin" | "padding" | "marginX" | "marginY" | "paddingX" | "paddingY" | "as">> & import("@vanilla-extract/recipes/dist/declarations/src/types").VariantSelection<{
-    variant: {
-        inherit: any[];
-        xlarge: any[];
-        large: any[];
-        medium: any[];
-        normal: any[];
-        small: any[];
-        xsmall: any[];
-        code: any[];
-    };
-    ellipsis: {
-        true: string;
-    };
-    hidden: {
-        true: string;
-    };
-    italic: {
-        true: string;
-    };
-    underline: {
-        true: string;
-    };
-}> & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<"symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "text" | "small" | "ruby" | "table" | "progress" | "pre" | "base" | "big" | "link" | "sub" | "sup" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view">>;
+import { PolymorphicComponent } from '../../components/Box';
+import * as styles from './styles.css';
+declare type TextProps = styles.TextVariants;
+export declare const Text: PolymorphicComponent<TextProps, 'span'>;
+export {};

dist/types/components/TokenImage/TokenImage.d.ts

 /// <reference types="react" />
-import { BoxLayoutProps } from '../Box';
+import { BoxProps } from '../Box';
 declare type TokenIconSize = 'xs' | 'sm' | 'md' | 'lg';
-interface TokenIconProps extends BoxLayoutProps {
-    className?: string;
-    style?: any;
+interface TokenIconProps extends BoxProps {
     src?: string;
@@ -8,0 +6,0 @@ symbol?: string;

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

@@ -793,15 +793,2 @@ export declare const atoms: import("@vanilla-extract/sprinkles/dist/declarations/src/createSprinkles").SprinklesFn<[{
         };
-        cursor: {
-            values: {
-                default: {
-                    defaultClass: string;
-                };
-                "not-allowed": {
-                    defaultClass: string;
-                };
-                pointer: {
-                    defaultClass: string;
-                };
-            };
-        };
         fontFamily: {
@@ -814,9 +801,2 @@ values: {
         };
-        opacity: {
-            values: {
-                [x: string]: {
-                    defaultClass: string;
-                };
-            };
-        };
         textTransform: {
@@ -904,3 +884,3 @@ values: {
         defaultCondition: "base";
-        conditionNames: ("base" | "active" | "focus" | "hover")[];
+        conditionNames: ("base" | "active" | "disabled" | "focus" | "hover")[];
     };
@@ -915,2 +895,3 @@ styles: {
                         active: string;
+                        disabled: string;
                         focus: string;
@@ -929,2 +910,3 @@ hover: string;
                         active: string;
+                        disabled: string;
                         focus: string;
@@ -943,2 +925,3 @@ hover: string;
                         active: string;
+                        disabled: string;
                         focus: string;
@@ -950,4 +933,52 @@ hover: string;
         };
+        cursor: {
+            values: {
+                default: {
+                    defaultClass: string;
+                    conditions: {
+                        base: string;
+                        active: string;
+                        disabled: string;
+                        focus: string;
+                        hover: string;
+                    };
+                };
+                "not-allowed": {
+                    defaultClass: string;
+                    conditions: {
+                        base: string;
+                        active: string;
+                        disabled: string;
+                        focus: string;
+                        hover: string;
+                    };
+                };
+                pointer: {
+                    defaultClass: string;
+                    conditions: {
+                        base: string;
+                        active: string;
+                        disabled: string;
+                        focus: string;
+                        hover: string;
+                    };
+                };
+            };
+        };
+        opacity: {
+            values: {
+                [x: string]: {
+                    defaultClass: string;
+                    conditions: {
+                        base: string;
+                        active: string;
+                        disabled: string;
+                        focus: string;
+                        hover: string;
+                    };
+                };
+            };
+        };
     };
 }]>;
 export declare type Atoms = Parameters<typeof atoms>[0];

dist/types/icons/types.d.ts

@@ -1,5 +0,5 @@
-import { BoxLayoutProps, BoxProps } from '../components/Box';
+import { BoxProps } from '../components/Box';
 export declare type IconSize = 'sm' | 'md' | 'lg';
-export interface IconProps extends BoxLayoutProps {
-    className?: BoxProps['className'];
+export interface IconProps extends BoxProps {
+    className?: string;
 }

package.json

 {
   "name": "@0xsequence/design-system",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "license": "Apache-2.0",
@@ -5,0 +5,0 @@ "type": "module",

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

Improved metrics

Total package byte prevSize

5304092

increased by0.17%

Lines of code

19961

increased by1.3%

No dependency changes