@shipfox/react-ui 0.1.0 → 0.3.0

package/dist/components/textarea/textarea.stories.js

@@ -0,0 +1,333 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Code, Header } from '../../components/typography/index.js';
+import { Textarea } from './textarea.js';
+const meta = {
+    title: 'Components/Textarea',
+    component: Textarea,
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        placeholder: {
+            control: 'text'
+        },
+        disabled: {
+            control: 'boolean'
+        },
+        'aria-invalid': {
+            control: 'boolean'
+        },
+        rows: {
+            control: 'number'
+        },
+        cols: {
+            control: 'number'
+        }
+    },
+    args: {
+        placeholder: 'Type something…',
+        disabled: false,
+        'aria-invalid': false,
+        rows: 4
+    }
+};
+export default meta;
+export const Default = {};
+const variants = [
+    'base',
+    'component'
+];
+const sizes = [
+    'base',
+    'small'
+];
+export const States = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "flex flex-col gap-32",
+            children: variants.map((variant)=>sizes.map((size)=>/*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col gap-16",
+                        children: [
+                            /*#__PURE__*/ _jsxs(Header, {
+                                variant: "h3",
+                                children: [
+                                    variant,
+                                    " ",
+                                    size
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Code, {
+                                        variant: "label",
+                                        className: "text-foreground-neutral-subtle",
+                                        children: "Default"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Textarea, {
+                                        ...args,
+                                        variant: variant,
+                                        size: size
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Code, {
+                                        variant: "label",
+                                        className: "text-foreground-neutral-subtle",
+                                        children: "Hover"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Textarea, {
+                                        ...args,
+                                        className: "hover",
+                                        variant: variant,
+                                        size: size
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Code, {
+                                        variant: "label",
+                                        className: "text-foreground-neutral-subtle",
+                                        children: "Active"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Textarea, {
+                                        ...args,
+                                        className: "active",
+                                        defaultValue: "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.",
+                                        variant: variant,
+                                        size: size
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Code, {
+                                        variant: "label",
+                                        className: "text-foreground-neutral-subtle",
+                                        children: "Focus"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Textarea, {
+                                        ...args,
+                                        className: "focus",
+                                        variant: variant,
+                                        size: size
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Code, {
+                                        variant: "label",
+                                        className: "text-foreground-neutral-subtle",
+                                        children: "Disabled"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Textarea, {
+                                        ...args,
+                                        disabled: true,
+                                        variant: variant,
+                                        size: size
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Code, {
+                                        variant: "label",
+                                        className: "text-foreground-neutral-subtle",
+                                        children: "Invalid"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Textarea, {
+                                        ...args,
+                                        "aria-invalid": true,
+                                        variant: variant,
+                                        size: size
+                                    })
+                                ]
+                            })
+                        ]
+                    }, variant + size)))
+        })
+};
+States.parameters = {
+    pseudo: {
+        hover: '.hover',
+        active: '.active',
+        focusVisible: '.focus'
+    }
+};
+export const Sizes = {
+    render: (args)=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Rows: 2"
+                        }),
+                        /*#__PURE__*/ _jsx(Textarea, {
+                            ...args,
+                            rows: 2
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Rows: 4 (default)"
+                        }),
+                        /*#__PURE__*/ _jsx(Textarea, {
+                            ...args,
+                            rows: 4
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Rows: 6"
+                        }),
+                        /*#__PURE__*/ _jsx(Textarea, {
+                            ...args,
+                            rows: 6
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Rows: 10"
+                        }),
+                        /*#__PURE__*/ _jsx(Textarea, {
+                            ...args,
+                            rows: 10
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const DesignMock = {
+    render: ()=>{
+        const variants = [
+            {
+                key: 'base',
+                label: 'Primary'
+            },
+            {
+                key: 'component',
+                label: 'Secondary'
+            }
+        ];
+        const states = [
+            {
+                name: 'Default',
+                props: {}
+            },
+            {
+                name: 'Hover',
+                props: {
+                    className: 'hover'
+                }
+            },
+            {
+                name: 'Focus',
+                props: {
+                    className: 'focus'
+                }
+            },
+            {
+                name: 'Filled',
+                props: {
+                    defaultValue: 'Placeholder'
+                }
+            },
+            {
+                name: 'Filled Hover',
+                props: {
+                    defaultValue: 'Placeholder',
+                    className: 'hover'
+                }
+            },
+            {
+                name: 'Disabled',
+                props: {
+                    disabled: true
+                }
+            },
+            {
+                name: 'Error',
+                props: {
+                    'aria-invalid': true
+                }
+            }
+        ];
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32 pb-64 pt-32 px-32",
+            children: [
+                /*#__PURE__*/ _jsx(Header, {
+                    variant: "h3",
+                    className: "text-foreground-neutral-subtle",
+                    children: "TEXT AREA"
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "flex flex-row gap-32",
+                    children: variants.map((variant)=>/*#__PURE__*/ _jsx("div", {
+                            className: "flex flex-col gap-32",
+                            children: states.map((state)=>/*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Code, {
+                                            variant: "label",
+                                            className: "text-foreground-neutral-subtle",
+                                            children: [
+                                                "Size=Base (32), State=",
+                                                state.name,
+                                                ", Color=",
+                                                variant.label
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: "w-[280px]",
+                                            children: /*#__PURE__*/ _jsx(Textarea, {
+                                                placeholder: "Placeholder",
+                                                variant: variant.key,
+                                                size: "base",
+                                                rows: 2,
+                                                ...state.props
+                                            })
+                                        })
+                                    ]
+                                }, state.name))
+                        }, variant.key))
+                })
+            ]
+        });
+    }
+};
+DesignMock.parameters = {
+    pseudo: {
+        hover: '.hover',
+        focusVisible: '.focus'
+    }
+};
+
+//# sourceMappingURL=textarea.stories.js.map

package/dist/components/textarea/textarea.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/textarea/textarea.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code, Header} from 'components/typography';\nimport {Textarea} from './textarea';\n\nconst meta = {\n  title: 'Components/Textarea',\n  component: Textarea,\n  tags: ['autodocs'],\n  argTypes: {\n    placeholder: {control: 'text'},\n    disabled: {control: 'boolean'},\n    'aria-invalid': {control: 'boolean'},\n    rows: {control: 'number'},\n    cols: {control: 'number'},\n  },\n  args: {\n    placeholder: 'Type something…',\n    disabled: false,\n    'aria-invalid': false,\n    rows: 4,\n  },\n} satisfies Meta<typeof Textarea>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nconst variants = ['base', 'component'] as const;\nconst sizes = ['base', 'small'] as const;\n\nexport const States: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {variants.map((variant) =>\n        sizes.map((size) => (\n          <div key={variant + size} className=\"flex flex-col gap-16\">\n            <Header variant=\"h3\">\n              {variant} {size}\n            </Header>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Default\n              </Code>\n\n              <Textarea {...args} variant={variant} size={size} />\n            </div>\n\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Hover\n              </Code>\n\n              <Textarea {...args} className=\"hover\" variant={variant} size={size} />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Active\n              </Code>\n\n              <Textarea\n                {...args}\n                className=\"active\"\n                defaultValue=\"The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.\"\n                variant={variant}\n                size={size}\n              />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Focus\n              </Code>\n\n              <Textarea {...args} className=\"focus\" variant={variant} size={size} />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Disabled\n              </Code>\n\n              <Textarea {...args} disabled variant={variant} size={size} />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                Invalid\n              </Code>\n\n              <Textarea {...args} aria-invalid variant={variant} size={size} />\n            </div>\n          </div>\n        )),\n      )}\n    </div>\n  ),\n};\n\nStates.parameters = {\n  pseudo: {\n    hover: '.hover',\n    active: '.active',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Sizes: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      <div className=\"flex flex-col gap-8\">\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Rows: 2\n        </Code>\n        <Textarea {...args} rows={2} />\n      </div>\n      <div className=\"flex flex-col gap-8\">\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Rows: 4 (default)\n        </Code>\n        <Textarea {...args} rows={4} />\n      </div>\n      <div className=\"flex flex-col gap-8\">\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Rows: 6\n        </Code>\n        <Textarea {...args} rows={6} />\n      </div>\n      <div className=\"flex flex-col gap-8\">\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Rows: 10\n        </Code>\n        <Textarea {...args} rows={10} />\n      </div>\n    </div>\n  ),\n};\n\nexport const DesignMock: Story = {\n  render: () => {\n    const variants = [\n      {key: 'base', label: 'Primary'},\n      {key: 'component', label: 'Secondary'},\n    ] as const;\n    const states = [\n      {name: 'Default', props: {}},\n      {name: 'Hover', props: {className: 'hover'}},\n      {name: 'Focus', props: {className: 'focus'}},\n      {name: 'Filled', props: {defaultValue: 'Placeholder'}},\n      {name: 'Filled Hover', props: {defaultValue: 'Placeholder', className: 'hover'}},\n      {name: 'Disabled', props: {disabled: true}},\n      {name: 'Error', props: {'aria-invalid': true}},\n    ] as const;\n\n    return (\n      <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32\">\n        <Header variant=\"h3\" className=\"text-foreground-neutral-subtle\">\n          TEXT AREA\n        </Header>\n        <div className=\"flex flex-row gap-32\">\n          {variants.map((variant) => (\n            <div key={variant.key} className=\"flex flex-col gap-32\">\n              {states.map((state) => (\n                <div key={state.name} className=\"flex flex-col gap-8\">\n                  <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                    Size=Base (32), State={state.name}, Color={variant.label}\n                  </Code>\n                  <div className=\"w-[280px]\">\n                    <Textarea\n                      placeholder=\"Placeholder\"\n                      variant={variant.key}\n                      size=\"base\"\n                      rows={2}\n                      {...state.props}\n                    />\n                  </div>\n                </div>\n              ))}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  },\n};\n\nDesignMock.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n"],"names":["Code","Header","Textarea","meta","title","component","tags","argTypes","placeholder","control","disabled","rows","cols","args","Default","variants","sizes","States","render","div","className","map","variant","size","defaultValue","aria-invalid","parameters","pseudo","hover","active","focusVisible","Sizes","DesignMock","key","label","states","name","props","state"],"mappings":"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"}

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAG5D,iBAAS,eAAe,CAAC,EACvB,aAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,2CAQxD;AAED,iBAAS,OAAO,CAAC,EAAC,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAM9E;AAED,iBAAS,cAAc,CAAC,EAAC,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAExF;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,UAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAgBvD;AAED,OAAO,EAAC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAC,CAAC"}

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '../../utils/cn.js';
+function TooltipProvider({ delayDuration = 0, ...props }) {
+    return /*#__PURE__*/ _jsx(TooltipPrimitive.Provider, {
+        "data-slot": "tooltip-provider",
+        delayDuration: delayDuration,
+        ...props
+    });
+}
+function Tooltip({ ...props }) {
+    return /*#__PURE__*/ _jsx(TooltipProvider, {
+        children: /*#__PURE__*/ _jsx(TooltipPrimitive.Root, {
+            "data-slot": "tooltip",
+            ...props
+        })
+    });
+}
+function TooltipTrigger({ ...props }) {
+    return /*#__PURE__*/ _jsx(TooltipPrimitive.Trigger, {
+        "data-slot": "tooltip-trigger",
+        ...props
+    });
+}
+function TooltipContent({ className, sideOffset = 0, children, ...props }) {
+    return /*#__PURE__*/ _jsx(TooltipPrimitive.Portal, {
+        children: /*#__PURE__*/ _jsx(TooltipPrimitive.Content, {
+            "data-slot": "tooltip-content",
+            sideOffset: sideOffset,
+            className: cn('rounded-8 bg-background-components-base text-foreground-neutral-base px-8 py-4 text-xs font-medium leading-20 shadow-button-neutral animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md text-balance', className),
+            ...props,
+            children: children
+        })
+    });
+}
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport {cn} from 'utils/cn';\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({...props}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({...props}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          'rounded-8 bg-background-components-base text-foreground-neutral-base px-8 py-4 text-xs font-medium leading-20 shadow-button-neutral animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md text-balance',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport {Tooltip, TooltipTrigger, TooltipContent, TooltipProvider};\n"],"names":["TooltipPrimitive","cn","TooltipProvider","delayDuration","props","Provider","data-slot","Tooltip","Root","TooltipTrigger","Trigger","TooltipContent","className","sideOffset","children","Portal","Content"],"mappings":";AAAA,YAAYA,sBAAsB,0BAA0B;AAC5D,SAAQC,EAAE,QAAO,WAAW;AAE5B,SAASC,gBAAgB,EACvBC,gBAAgB,CAAC,EACjB,GAAGC,OACoD;IACvD,qBACE,KAACJ,iBAAiBK,QAAQ;QACxBC,aAAU;QACVH,eAAeA;QACd,GAAGC,KAAK;;AAGf;AAEA,SAASG,QAAQ,EAAC,GAAGH,OAA0D;IAC7E,qBACE,KAACF;kBACC,cAAA,KAACF,iBAAiBQ,IAAI;YAACF,aAAU;YAAW,GAAGF,KAAK;;;AAG1D;AAEA,SAASK,eAAe,EAAC,GAAGL,OAA6D;IACvF,qBAAO,KAACJ,iBAAiBU,OAAO;QAACJ,aAAU;QAAmB,GAAGF,KAAK;;AACxE;AAEA,SAASO,eAAe,EACtBC,SAAS,EACTC,aAAa,CAAC,EACdC,QAAQ,EACR,GAAGV,OACmD;IACtD,qBACE,KAACJ,iBAAiBe,MAAM;kBACtB,cAAA,KAACf,iBAAiBgB,OAAO;YACvBV,aAAU;YACVO,YAAYA;YACZD,WAAWX,GACT,ufACAW;YAED,GAAGR,KAAK;sBAERU;;;AAIT;AAEA,SAAQP,OAAO,EAAEE,cAAc,EAAEE,cAAc,EAAET,eAAe,GAAE"}

package/dist/utils/avatar.d.ts

@@ -0,0 +1,3 @@
+export declare const getPlaceholderImageUrl: (name?: string) => string;
+export declare const getInitial: (name?: string) => string;
+//# sourceMappingURL=avatar.d.ts.map

package/dist/utils/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/utils/avatar.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,sBAAsB,GAAI,OAAO,MAAM,KAAG,MAStD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,KAAG,MAK1C,CAAC"}

package/dist/utils/avatar.js

@@ -0,0 +1,32 @@
+const hashString = (str)=>{
+    let hash = 0;
+    for(let i = 0; i < str.length; i++){
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash;
+    }
+    return Math.abs(hash);
+};
+export const getPlaceholderImageUrl = (name)=>{
+    const backgroundColors = [
+        'BFDFFF',
+        'BFEAFF',
+        'CFBFFF',
+        'FFBFC3',
+        'FFEABF',
+        'E3E6EA',
+        'EAEAEA'
+    ];
+    const seed = name?.trim() || 'avatar';
+    const colorIndex = hashString(seed) % backgroundColors.length;
+    const backgroundColor = backgroundColors[colorIndex];
+    return `https://api.dicebear.com/9.x/micah/svg?backgroundColor=${backgroundColor}&seed=${encodeURIComponent(seed)}`;
+};
+export const getInitial = (name)=>{
+    if (name) {
+        return name.trim()[0]?.toUpperCase() ?? 'L';
+    }
+    return 'L';
+};
+
+//# sourceMappingURL=avatar.js.map

package/dist/utils/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/avatar.ts"],"sourcesContent":["const hashString = (str: string): number => {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    const char = str.charCodeAt(i);\n    hash = (hash << 5) - hash + char;\n    hash = hash & hash;\n  }\n  return Math.abs(hash);\n};\n\nexport const getPlaceholderImageUrl = (name?: string): string => {\n  const backgroundColors = ['BFDFFF', 'BFEAFF', 'CFBFFF', 'FFBFC3', 'FFEABF', 'E3E6EA', 'EAEAEA'];\n\n  const seed = name?.trim() || 'avatar';\n\n  const colorIndex = hashString(seed) % backgroundColors.length;\n  const backgroundColor = backgroundColors[colorIndex];\n\n  return `https://api.dicebear.com/9.x/micah/svg?backgroundColor=${backgroundColor}&seed=${encodeURIComponent(seed)}`;\n};\n\nexport const getInitial = (name?: string): string => {\n  if (name) {\n    return name.trim()[0]?.toUpperCase() ?? 'L';\n  }\n  return 'L';\n};\n"],"names":["hashString","str","hash","i","length","char","charCodeAt","Math","abs","getPlaceholderImageUrl","name","backgroundColors","seed","trim","colorIndex","backgroundColor","encodeURIComponent","getInitial","toUpperCase"],"mappings":"AAAA,MAAMA,aAAa,CAACC;IAClB,IAAIC,OAAO;IACX,IAAK,IAAIC,IAAI,GAAGA,IAAIF,IAAIG,MAAM,EAAED,IAAK;QACnC,MAAME,OAAOJ,IAAIK,UAAU,CAACH;QAC5BD,OAAO,AAACA,CAAAA,QAAQ,CAAA,IAAKA,OAAOG;QAC5BH,OAAOA,OAAOA;IAChB;IACA,OAAOK,KAAKC,GAAG,CAACN;AAClB;AAEA,OAAO,MAAMO,yBAAyB,CAACC;IACrC,MAAMC,mBAAmB;QAAC;QAAU;QAAU;QAAU;QAAU;QAAU;QAAU;KAAS;IAE/F,MAAMC,OAAOF,MAAMG,UAAU;IAE7B,MAAMC,aAAad,WAAWY,QAAQD,iBAAiBP,MAAM;IAC7D,MAAMW,kBAAkBJ,gBAAgB,CAACG,WAAW;IAEpD,OAAO,CAAC,uDAAuD,EAAEC,gBAAgB,MAAM,EAAEC,mBAAmBJ,OAAO;AACrH,EAAE;AAEF,OAAO,MAAMK,aAAa,CAACP;IACzB,IAAIA,MAAM;QACR,OAAOA,KAAKG,IAAI,EAAE,CAAC,EAAE,EAAEK,iBAAiB;IAC1C;IACA,OAAO;AACT,EAAE"}

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from './avatar';
 export * from './clipboard';
 export * from './cn';
 export * from './date';

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC"}

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+export * from './avatar.js';
 export * from './clipboard.js';
 export * from './cn.js';
 export * from './date.js';

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["export * from './clipboard';\nexport * from './cn';\nexport * from './date';\nexport * from './format';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,OAAO;AACrB,cAAc,SAAS;AACvB,cAAc,WAAW"}
+{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["export * from './avatar';\nexport * from './clipboard';\nexport * from './cn';\nexport * from './date';\nexport * from './format';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,OAAO;AACrB,cAAc,SAAS;AACvB,cAAc,WAAW"}

package/index.css

@@ -290,6 +290,37 @@
   /* Alpha */
   --alpha-250: var(--color-alpha-black-10);
   --alpha-400: var(--color-alpha-black-24);
+
+  /* Shadow */
+  --shadow-border-base:
+    0 -1px 0 0 var(--color-alpha-white-6), 0 0 0 1px var(--color-alpha-white-6), 0 0 0 1px
+    var(--color-neutral-800), 0 0 1px 1.5px var(--color-alpha-black-24), 0 2px 2px 0
+    var(--color-alpha-black-24);
+  --shadow-border-interactive-with-active: 0 0 0 1px #ff8b16, 0 0 0 4px rgba(255, 49, 0, 0.25);
+  --shadow-border-error: 0 0 0 1px #ff1f5a, 0 0 0 3px rgba(246, 0, 67, 0.25);
+  --shadow-button-inverted:
+    0 -1px 0 0 var(--color-alpha-white-12), 0 0 0 1px var(--color-alpha-white-10), 0 0 0 1px
+    var(--color-neutral-600), 0 0 1px 1.5px var(--color-alpha-black-24), 0 2px 2px 0
+    var(--color-alpha-black-24);
+  --shadow-button-inverted-focus:
+    0 -1px 0 0 var(--color-alpha-white-12), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
+    var(--color-neutral-600), 0 0 0 2px var(--color-alpha-white-88), 0 0 0 4px
+    var(--color-primary-500);
+  --shadow-button-neutral:
+    0 -1px 0 0 var(--color-alpha-white-6), 0 0 0 1px var(--color-alpha-white-6), 0 0 0 1px
+    var(--color-neutral-800), 0 0 1px 1.5px var(--color-alpha-black-24), 0 2px 2px 0
+    var(--color-alpha-black-24);
+  --shadow-button-neutral-focus:
+    0 -1px 0 0 var(--color-alpha-white-6), 0 0 0 1px var(--color-alpha-white-6), 0 0 0 1px
+    var(--color-neutral-800), 0 0 0 2px var(--color-alpha-white-88), 0 0 0 4px
+    var(--color-primary-500);
+  --shadow-button-danger:
+    0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
+    var(--color-red-700), 0 0 1px 1.5px var(--color-alpha-black-24), 0 2px 2px 0
+    var(--color-alpha-black-24);
+  --shadow-button-danger-focus:
+    0 -1px 0 0 var(--color-alpha-white-16), 0 0 0 1px var(--color-alpha-white-12), 0 0 0 1px
+    var(--color-red-700), 0 0 0 2px var(--color-alpha-white-88), 0 0 0 4px var(--color-primary-500);
 }
 
 .dark {
@@ -307,7 +338,7 @@
   --background-highlight-base: var(--color-primary-950);
   --background-neutral-hover: var(--color-neutral-800);
   --background-neutral-overlay: var(--color-neutral-800);
-  --background-components-base: var(--color-neutral-900);
+  --background-components-base: var(--color-neutral-800);
   --background-field-component: var(--color-neutral-900);
   --background-switch-off-hover: var(--color-neutral-600);
   --background-field-component-hover: var(--color-neutral-800);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/react-ui",
   "license": "MIT",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -56,16 +56,16 @@
     "storybook-addon-pseudo-states": "^9.1.8",
     "tailwindcss": "^4.1.13",
     "tw-animate-css": "^1.4.0",
-    "@shipfox/biome": "1.2.2",
+    "@shipfox/biome": "1.3.0",
     "@shipfox/swc": "1.2.1",
     "@shipfox/ts-config": "1.3.5",
     "@shipfox/typescript": "1.1.2",
-    "@shipfox/vite": "1.2.1",
-    "@shipfox/vitest": "1.1.2"
+    "@shipfox/vite": "1.2.2",
+    "@shipfox/vitest": "1.1.3"
   },
   "scripts": {
     "build": "swc",
-    "check": "biome",
+    "check": "biome-check",
     "storybook": "storybook dev",
     "storybook:build": "storybook build -o storybook-static",
     "test": "vitest-run",

package/src/components/alert/alert.stories.tsx

@@ -0,0 +1,77 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Header} from 'components/typography';
+import {
+  Alert,
+  AlertAction,
+  AlertActions,
+  AlertClose,
+  AlertContent,
+  AlertDescription,
+  AlertTitle,
+} from './alert';
+
+const meta = {
+  title: 'Components/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'info', 'success', 'warning', 'destructive'],
+    },
+  },
+  args: {
+    variant: 'default',
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const variants = ['default', 'info', 'success', 'warning', 'destructive'] as const;
+
+export const Default: Story = {
+  render: (args) => {
+    return (
+      <Alert {...args}>
+        <AlertContent>
+          <AlertTitle>Title</AlertTitle>
+          <AlertDescription>Description</AlertDescription>
+          <AlertActions>
+            <AlertAction>Download</AlertAction>
+            <AlertAction>View</AlertAction>
+          </AlertActions>
+        </AlertContent>
+        <AlertClose variant={args.variant} />
+      </Alert>
+    );
+  },
+};
+
+export const DesignMock: Story = {
+  render: () => {
+    return (
+      <div className="flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base">
+        <Header variant="h3" className="text-foreground-neutral-subtle">
+          ALERTS
+        </Header>
+        <div className="flex flex-col gap-16">
+          {variants.map((variant) => (
+            <Alert key={variant} variant={variant}>
+              <AlertContent>
+                <AlertTitle>Title</AlertTitle>
+                <AlertDescription>Description</AlertDescription>
+                <AlertActions>
+                  <AlertAction>Download</AlertAction>
+                  <AlertAction>View</AlertAction>
+                </AlertActions>
+              </AlertContent>
+              <AlertClose variant={variant} />
+            </Alert>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};