@shipfox/react-ui 0.4.0 → 0.6.0

package/dist/components/button/icon-button.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { Icon } from '../../components/icon/index.js';
+import { cn } from '../../utils/cn.js';
+export const iconButtonVariants = cva('inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none', {
+    variants: {
+        variant: {
+            primary: 'bg-background-button-inverted-default text-tag-neutral-icon shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
+            transparent: 'bg-background-button-transparent-default text-tag-neutral-icon hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled'
+        },
+        size: {
+            '2xs': 'w-20 h-20 text-xs',
+            xs: 'w-24 h-24 text-xs',
+            sm: 'w-28 h-28 text-sm',
+            md: 'w-32 h-32 text-md',
+            lg: 'w-36 h-36 text-lg',
+            xl: 'w-40 h-40 text-xl'
+        },
+        radius: {
+            rounded: 'rounded-6',
+            full: 'rounded-full'
+        },
+        muted: {
+            true: 'opacity-60',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+        radius: 'rounded',
+        muted: false
+    }
+});
+export function IconButton({ className, variant, size, radius, muted, asChild = false, children, icon, ...props }) {
+    const Comp = asChild ? Slot : 'button';
+    return /*#__PURE__*/ _jsx(Comp, {
+        "data-slot": "icon-button",
+        className: cn(iconButtonVariants({
+            variant,
+            size,
+            radius,
+            muted
+        }), className),
+        ...props,
+        children: icon ? /*#__PURE__*/ _jsx(Icon, {
+            name: icon
+        }) : children
+    });
+}
+
+//# sourceMappingURL=icon-button.js.map

package/dist/components/button/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/icon-button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const iconButtonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-background-button-inverted-default text-tag-neutral-icon shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        transparent:\n          'bg-background-button-transparent-default text-tag-neutral-icon hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        '2xs': 'w-20 h-20 text-xs',\n        xs: 'w-24 h-24 text-xs',\n        sm: 'w-28 h-28 text-sm',\n        md: 'w-32 h-32 text-md',\n        lg: 'w-36 h-36 text-lg',\n        xl: 'w-40 h-40 text-xl',\n      },\n      radius: {\n        rounded: 'rounded-6',\n        full: 'rounded-full',\n      },\n      muted: {\n        true: 'opacity-60',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n      radius: 'rounded',\n      muted: false,\n    },\n  },\n);\n\nexport function IconButton({\n  className,\n  variant,\n  size,\n  radius,\n  muted,\n  asChild = false,\n  children,\n  icon,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof iconButtonVariants> & {\n    asChild?: boolean;\n    icon?: IconName;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"icon-button\"\n      className={cn(iconButtonVariants({variant, size, radius, muted}), className)}\n      {...props}\n    >\n      {icon ? <Icon name={icon} /> : children}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","iconButtonVariants","variants","variant","primary","transparent","size","xs","sm","md","lg","xl","radius","rounded","full","muted","true","false","defaultVariants","IconButton","className","asChild","children","icon","props","Comp","data-slot","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,qBAAqBH,IAChC,kIACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,aACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;QACAC,QAAQ;YACNC,SAAS;YACTC,MAAM;QACR;QACAC,OAAO;YACLC,MAAM;YACNC,OAAO;QACT;IACF;IACAC,iBAAiB;QACff,SAAS;QACTG,MAAM;QACNM,QAAQ;QACRG,OAAO;IACT;AACF,GACA;AAEF,OAAO,SAASI,WAAW,EACzBC,SAAS,EACTjB,OAAO,EACPG,IAAI,EACJM,MAAM,EACNG,KAAK,EACLM,UAAU,KAAK,EACfC,QAAQ,EACRC,IAAI,EACJ,GAAGC,OAKF;IACD,MAAMC,OAAOJ,UAAUxB,OAAO;IAE9B,qBACE,KAAC4B;QACCC,aAAU;QACVN,WAAWpB,GAAGC,mBAAmB;YAACE;YAASG;YAAMM;YAAQG;QAAK,IAAIK;QACjE,GAAGI,KAAK;kBAERD,qBAAO,KAACxB;YAAK4B,MAAMJ;aAAWD;;AAGrC"}

package/dist/components/button/icon-button.stories.js

@@ -0,0 +1,254 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { Code } from '../../components/typography/index.js';
+import { IconButton } from './icon-button.js';
+const variantOptions = [
+    'primary',
+    'transparent'
+];
+const sizeOptions = [
+    '2xs',
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl'
+];
+const radiusOptions = [
+    'rounded',
+    'full'
+];
+const meta = {
+    title: 'Components/Button/IconButton',
+    component: IconButton,
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: variantOptions
+        },
+        size: {
+            control: 'select',
+            options: sizeOptions
+        },
+        radius: {
+            control: 'select',
+            options: radiusOptions
+        },
+        muted: {
+            control: 'boolean'
+        },
+        asChild: {
+            control: 'boolean'
+        }
+    },
+    args: {
+        icon: 'addLine',
+        variant: 'primary',
+        size: 'md',
+        radius: 'rounded',
+        muted: false
+    }
+};
+export default meta;
+export const Default = {};
+export const Variants = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "flex flex-col gap-32",
+            children: sizeOptions.map((size)=>/*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsxs(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: [
+                                "Size: ",
+                                size
+                            ]
+                        }),
+                        radiusOptions.map((radius)=>/*#__PURE__*/ _jsxs("table", {
+                                className: "w-fit border-separate border-spacing-x-32 border-spacing-y-16",
+                                children: [
+                                    /*#__PURE__*/ _jsx("thead", {
+                                        children: /*#__PURE__*/ _jsxs("tr", {
+                                            children: [
+                                                /*#__PURE__*/ _jsx("th", {
+                                                    children: radius
+                                                }),
+                                                /*#__PURE__*/ _jsx("th", {
+                                                    children: "Default"
+                                                }),
+                                                /*#__PURE__*/ _jsx("th", {
+                                                    children: "Hover"
+                                                }),
+                                                /*#__PURE__*/ _jsx("th", {
+                                                    children: "Focus"
+                                                }),
+                                                /*#__PURE__*/ _jsx("th", {
+                                                    children: "Disabled"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("tbody", {
+                                        children: variantOptions.map((variant)=>/*#__PURE__*/ _jsxs("tr", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        children: /*#__PURE__*/ _jsx(Code, {
+                                                            variant: "label",
+                                                            className: "text-foreground-neutral-subtle",
+                                                            children: variant
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        children: /*#__PURE__*/ _jsx(IconButton, {
+                                                            ...args,
+                                                            icon: "addLine",
+                                                            "aria-label": "Add",
+                                                            variant: variant,
+                                                            size: size,
+                                                            radius: radius
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        children: /*#__PURE__*/ _jsx(IconButton, {
+                                                            ...args,
+                                                            icon: "addLine",
+                                                            "aria-label": "Add",
+                                                            variant: variant,
+                                                            className: "hover",
+                                                            size: size,
+                                                            radius: radius
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        children: /*#__PURE__*/ _jsx(IconButton, {
+                                                            ...args,
+                                                            icon: "addLine",
+                                                            "aria-label": "Add",
+                                                            variant: variant,
+                                                            className: "focus",
+                                                            size: size,
+                                                            radius: radius
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        children: /*#__PURE__*/ _jsx(IconButton, {
+                                                            ...args,
+                                                            icon: "addLine",
+                                                            "aria-label": "Add",
+                                                            variant: variant,
+                                                            disabled: true,
+                                                            size: size,
+                                                            radius: radius
+                                                        })
+                                                    })
+                                                ]
+                                            }, variant))
+                                    })
+                                ]
+                            }, radius))
+                    ]
+                }, size))
+        })
+};
+Variants.parameters = {
+    pseudo: {
+        hover: '.hover',
+        focusVisible: '.focus'
+    }
+};
+export const Muted = {
+    render: (args)=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex gap-16 items-center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            children: "Normal:"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            ...args,
+                            icon: "addLine",
+                            "aria-label": "Add"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            ...args,
+                            icon: "addLine",
+                            "aria-label": "Add",
+                            variant: "transparent"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex gap-16 items-center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            children: "Muted:"
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            ...args,
+                            icon: "addLine",
+                            "aria-label": "Add",
+                            muted: true
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            ...args,
+                            icon: "addLine",
+                            "aria-label": "Add",
+                            variant: "transparent",
+                            muted: true
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const Sizes = {
+    render: ({ children: _children, ...args })=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex gap-16 items-center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            children: "Rounded:"
+                        }),
+                        sizeOptions.map((size)=>/*#__PURE__*/ _createElement(IconButton, {
+                                ...args,
+                                key: size,
+                                icon: "addLine",
+                                "aria-label": "Add",
+                                size: size,
+                                radius: "rounded"
+                            }))
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex gap-16 items-center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            children: "Full:"
+                        }),
+                        sizeOptions.map((size)=>/*#__PURE__*/ _createElement(IconButton, {
+                                ...args,
+                                key: size,
+                                icon: "addLine",
+                                "aria-label": "Add",
+                                size: size,
+                                radius: "full"
+                            }))
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=icon-button.stories.js.map

package/dist/components/button/icon-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/icon-button.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {IconButton} from './icon-button';\n\nconst variantOptions = ['primary', 'transparent'] as const;\nconst sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\nconst radiusOptions = ['rounded', 'full'] as const;\n\nconst meta = {\n  title: 'Components/Button/IconButton',\n  component: IconButton,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: variantOptions,\n    },\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    radius: {\n      control: 'select',\n      options: radiusOptions,\n    },\n    muted: {control: 'boolean'},\n    asChild: {control: 'boolean'},\n  },\n  args: {\n    icon: 'addLine',\n    variant: 'primary',\n    size: 'md',\n    radius: 'rounded',\n    muted: false,\n  },\n} satisfies Meta<typeof IconButton>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Variants: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {sizeOptions.map((size) => (\n        <div key={size} className=\"flex flex-col gap-16\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Size: {size}\n          </Code>\n          {radiusOptions.map((radius) => (\n            <table\n              key={radius}\n              className=\"w-fit border-separate border-spacing-x-32 border-spacing-y-16\"\n            >\n              <thead>\n                <tr>\n                  <th>{radius}</th>\n                  <th>Default</th>\n                  <th>Hover</th>\n                  <th>Focus</th>\n                  <th>Disabled</th>\n                </tr>\n              </thead>\n              <tbody>\n                {variantOptions.map((variant) => (\n                  <tr key={variant}>\n                    <td>\n                      <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                        {variant}\n                      </Code>\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        className=\"hover\"\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        className=\"focus\"\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                    <td>\n                      <IconButton\n                        {...args}\n                        icon=\"addLine\"\n                        aria-label=\"Add\"\n                        variant={variant}\n                        disabled\n                        size={size}\n                        radius={radius}\n                      />\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          ))}\n        </div>\n      ))}\n    </div>\n  ),\n};\n\nVariants.parameters = {\n  pseudo: {\n    hover: '.hover',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Muted: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Normal:</Code>\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" />\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" variant=\"transparent\" />\n      </div>\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Muted:</Code>\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" muted />\n        <IconButton {...args} icon=\"addLine\" aria-label=\"Add\" variant=\"transparent\" muted />\n      </div>\n    </div>\n  ),\n};\n\nexport const Sizes: Story = {\n  render: ({children: _children, ...args}) => (\n    <div className=\"flex flex-col gap-16\">\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Rounded:</Code>\n        {sizeOptions.map((size) => (\n          <IconButton\n            {...args}\n            key={size}\n            icon=\"addLine\"\n            aria-label=\"Add\"\n            size={size}\n            radius=\"rounded\"\n          />\n        ))}\n      </div>\n      <div className=\"flex gap-16 items-center\">\n        <Code variant=\"label\">Full:</Code>\n        {sizeOptions.map((size) => (\n          <IconButton\n            {...args}\n            key={size}\n            icon=\"addLine\"\n            aria-label=\"Add\"\n            size={size}\n            radius=\"full\"\n          />\n        ))}\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","IconButton","variantOptions","sizeOptions","radiusOptions","meta","title","component","tags","argTypes","variant","control","options","size","radius","muted","asChild","args","icon","Default","Variants","render","div","className","map","table","thead","tr","th","tbody","td","aria-label","disabled","parameters","pseudo","hover","focusVisible","Muted","Sizes","children","_children","key"],"mappings":"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"}

package/dist/components/button/index.d.ts

@@ -1,2 +1,4 @@
 export * from './button';
+export * from './button-link';
+export * from './icon-button';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}

package/dist/components/button/index.js

@@ -1,3 +1,5 @@
 export * from './button.js';
+export * from './button-link.js';
+export * from './icon-button.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/index.ts"],"sourcesContent":["export * from './button';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW"}
+{"version":3,"sources":["../../../src/components/button/index.ts"],"sourcesContent":["export * from './button';\nexport * from './button-link';\nexport * from './icon-button';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB"}

package/dist/components/code-block/code-block-footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-block-footer.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block-footer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,OAAe,EACf,KAAiB,EACjB,OAAO,EACP,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAoDtB;AAED,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAY1B;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAY7B;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAe7B;AAED,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,EACzC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,+BAA+B,2CAejC"}
+{"version":3,"file":"code-block-footer.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block-footer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,OAAe,EACf,KAAiB,EACjB,OAAO,EACP,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CA0CtB;AAED,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAY1B;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAY7B;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAuB7B;AAED,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,EACzC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,+BAA+B,2CAuBjC"}

package/dist/components/code-block/code-block-footer.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { Icon } from '../../components/icon/icon.js';
+import { Text } from '../../components/typography/index.js';
 import { cn } from '../../utils/cn.js';
 export function CodeBlockFooter({ className, asChild = false, state = 'running', message, description, icon, children, ...props }) {
     const Comp = asChild ? Slot : 'div';
@@ -26,19 +27,16 @@ export function CodeBlockFooter({ className, asChild = false, state = 'running',
         className: cn('flex w-full items-center justify-start gap-12 px-16 py-12', className),
         ...props,
         children: [
-            /*#__PURE__*/ _jsx("div", {
-                className: "flex shrink-0 items-center justify-center size-20 text-tag-success-icon",
+            /*#__PURE__*/ _jsx(CodeBlockFooterIcon, {
+                className: "text-tag-success-icon",
                 children: defaultIcon
             }),
-            (message || description) && /*#__PURE__*/ _jsxs("div", {
-                className: "flex flex-col items-start justify-center gap-0",
+            (message || description) && /*#__PURE__*/ _jsxs(CodeBlockFooterContent, {
                 children: [
-                    message && /*#__PURE__*/ _jsx("div", {
-                        className: "overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base",
+                    message && /*#__PURE__*/ _jsx(CodeBlockFooterMessage, {
                         children: message
                     }),
-                    description && /*#__PURE__*/ _jsx("div", {
-                        className: "overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle",
+                    description && /*#__PURE__*/ _jsx(CodeBlockFooterDescription, {
                         children: description
                     })
                 ]
@@ -59,25 +57,41 @@ export function CodeBlockFooterContent({ className, asChild = false, children, .
     const Comp = asChild ? Slot : 'div';
     return /*#__PURE__*/ _jsx(Comp, {
         "data-slot": "code-block-footer-content",
-        className: cn('flex flex-col items-start justify-center gap-0', className),
+        className: cn('flex flex-col items-start justify-center gap-0 min-w-0 flex-1', className),
         ...props,
         children: children
     });
 }
 export function CodeBlockFooterMessage({ className, asChild = false, children, ...props }) {
-    const Comp = asChild ? Slot : 'div';
-    return /*#__PURE__*/ _jsx(Comp, {
+    if (asChild) {
+        return /*#__PURE__*/ _jsx(Slot, {
+            "data-slot": "code-block-footer-message",
+            className: cn('overflow-hidden text-ellipsis whitespace-nowrap text-xs', className),
+            ...props,
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsx(Text, {
         "data-slot": "code-block-footer-message",
-        className: cn('overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base', className),
+        size: "xs",
+        className: cn('overflow-hidden text-ellipsis whitespace-nowrap', className),
         ...props,
         children: children
     });
 }
 export function CodeBlockFooterDescription({ className, asChild = false, children, ...props }) {
-    const Comp = asChild ? Slot : 'div';
-    return /*#__PURE__*/ _jsx(Comp, {
+    if (asChild) {
+        return /*#__PURE__*/ _jsx(Slot, {
+            "data-slot": "code-block-footer-description",
+            className: cn('text-xs text-foreground-neutral-subtle', className),
+            ...props,
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsx(Text, {
         "data-slot": "code-block-footer-description",
-        className: cn('overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle', className),
+        size: "xs",
+        className: cn('text-foreground-neutral-subtle', className),
         ...props,
         children: children
     });

package/dist/components/code-block/code-block-footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/code-block/code-block-footer.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {Icon} from 'components/icon/icon';\nimport type {ComponentProps, HTMLAttributes, ReactNode} from 'react';\nimport {cn} from 'utils/cn';\n\nexport type CodeBlockFooterProps = HTMLAttributes<HTMLDivElement> & {\n  asChild?: boolean;\n  state?: 'running' | 'done';\n  message?: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n};\n\nexport function CodeBlockFooter({\n  className,\n  asChild = false,\n  state = 'running',\n  message,\n  description,\n  icon,\n  children,\n  ...props\n}: CodeBlockFooterProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  const defaultIcon =\n    icon ??\n    (state === 'running' ? (\n      <Icon name=\"shipfox\" className=\"size-20\" aria-hidden=\"true\" />\n    ) : (\n      <Icon\n        name=\"checkCircleSolid\"\n        className=\"size-20 text-foreground-neutral-base\"\n        aria-hidden=\"true\"\n      />\n    ));\n\n  if (asChild || children) {\n    return (\n      <Comp\n        data-slot=\"code-block-footer\"\n        className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  }\n\n  return (\n    <Comp\n      data-slot=\"code-block-footer\"\n      className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}\n      {...props}\n    >\n      <div className=\"flex shrink-0 items-center justify-center size-20 text-tag-success-icon\">\n        {defaultIcon}\n      </div>\n      {(message || description) && (\n        <div className=\"flex flex-col items-start justify-center gap-0\">\n          {message && (\n            <div className=\"overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base\">\n              {message}\n            </div>\n          )}\n          {description && (\n            <div className=\"overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle\">\n              {description}\n            </div>\n          )}\n        </div>\n      )}\n    </Comp>\n  );\n}\n\nexport type CodeBlockFooterIconProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterIcon({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterIconProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"code-block-footer-icon\"\n      className={cn('flex shrink-0 items-center justify-center size-20', className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n}\n\nexport type CodeBlockFooterContentProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterContent({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterContentProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"code-block-footer-content\"\n      className={cn('flex flex-col items-start justify-center gap-0', className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n}\n\nexport type CodeBlockFooterMessageProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterMessage({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterMessageProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"code-block-footer-message\"\n      className={cn(\n        'overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n}\n\nexport type CodeBlockFooterDescriptionProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterDescription({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterDescriptionProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"code-block-footer-description\"\n      className={cn(\n        'overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n}\n"],"names":["Slot","Icon","cn","CodeBlockFooter","className","asChild","state","message","description","icon","children","props","Comp","defaultIcon","name","aria-hidden","data-slot","div","CodeBlockFooterIcon","CodeBlockFooterContent","CodeBlockFooterMessage","CodeBlockFooterDescription"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,IAAI,QAAO,uBAAuB;AAE1C,SAAQC,EAAE,QAAO,WAAW;AAU5B,OAAO,SAASC,gBAAgB,EAC9BC,SAAS,EACTC,UAAU,KAAK,EACfC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,QAAQ,EACR,GAAGC,OACkB;IACrB,MAAMC,OAAOP,UAAUL,OAAO;IAE9B,MAAMa,cACJJ,QACCH,CAAAA,UAAU,0BACT,KAACL;QAAKa,MAAK;QAAUV,WAAU;QAAUW,eAAY;uBAErD,KAACd;QACCa,MAAK;QACLV,WAAU;QACVW,eAAY;MAEhB;IAEF,IAAIV,WAAWK,UAAU;QACvB,qBACE,KAACE;YACCI,aAAU;YACVZ,WAAWF,GAAG,6DAA6DE;YAC1E,GAAGO,KAAK;sBAERD;;IAGP;IAEA,qBACE,MAACE;QACCI,aAAU;QACVZ,WAAWF,GAAG,6DAA6DE;QAC1E,GAAGO,KAAK;;0BAET,KAACM;gBAAIb,WAAU;0BACZS;;YAEDN,CAAAA,WAAWC,WAAU,mBACrB,MAACS;gBAAIb,WAAU;;oBACZG,yBACC,KAACU;wBAAIb,WAAU;kCACZG;;oBAGJC,6BACC,KAACS;wBAAIb,WAAU;kCACZI;;;;;;AAOf;AAMA,OAAO,SAASU,oBAAoB,EAClCd,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACsB;IACzB,MAAMC,OAAOP,UAAUL,OAAO;IAE9B,qBACE,KAACY;QACCI,aAAU;QACVZ,WAAWF,GAAG,qDAAqDE;QAClE,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASS,uBAAuB,EACrCf,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACyB;IAC5B,MAAMC,OAAOP,UAAUL,OAAO;IAE9B,qBACE,KAACY;QACCI,aAAU;QACVZ,WAAWF,GAAG,kDAAkDE;QAC/D,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASU,uBAAuB,EACrChB,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACyB;IAC5B,MAAMC,OAAOP,UAAUL,OAAO;IAE9B,qBACE,KAACY;QACCI,aAAU;QACVZ,WAAWF,GACT,mGACAE;QAED,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASW,2BAA2B,EACzCjB,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OAC6B;IAChC,MAAMC,OAAOP,UAAUL,OAAO;IAE9B,qBACE,KAACY;QACCI,aAAU;QACVZ,WAAWF,GACT,qGACAE;QAED,GAAGO,KAAK;kBAERD;;AAGP"}
+{"version":3,"sources":["../../../src/components/code-block/code-block-footer.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {Icon} from 'components/icon/icon';\nimport {Text} from 'components/typography';\nimport type {ComponentProps, HTMLAttributes, ReactNode} from 'react';\nimport {cn} from 'utils/cn';\n\nexport type CodeBlockFooterProps = HTMLAttributes<HTMLDivElement> & {\n  asChild?: boolean;\n  state?: 'running' | 'done';\n  message?: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n};\n\nexport function CodeBlockFooter({\n  className,\n  asChild = false,\n  state = 'running',\n  message,\n  description,\n  icon,\n  children,\n  ...props\n}: CodeBlockFooterProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  const defaultIcon =\n    icon ??\n    (state === 'running' ? (\n      <Icon name=\"shipfox\" className=\"size-20\" aria-hidden=\"true\" />\n    ) : (\n      <Icon\n        name=\"checkCircleSolid\"\n        className=\"size-20 text-foreground-neutral-base\"\n        aria-hidden=\"true\"\n      />\n    ));\n\n  if (asChild || children) {\n    return (\n      <Comp\n        data-slot=\"code-block-footer\"\n        className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  }\n\n  return (\n    <Comp\n      data-slot=\"code-block-footer\"\n      className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}\n      {...props}\n    >\n      <CodeBlockFooterIcon className=\"text-tag-success-icon\">{defaultIcon}</CodeBlockFooterIcon>\n      {(message || description) && (\n        <CodeBlockFooterContent>\n          {message && <CodeBlockFooterMessage>{message}</CodeBlockFooterMessage>}\n          {description && <CodeBlockFooterDescription>{description}</CodeBlockFooterDescription>}\n        </CodeBlockFooterContent>\n      )}\n    </Comp>\n  );\n}\n\nexport type CodeBlockFooterIconProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterIcon({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterIconProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"code-block-footer-icon\"\n      className={cn('flex shrink-0 items-center justify-center size-20', className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n}\n\nexport type CodeBlockFooterContentProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterContent({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterContentProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"code-block-footer-content\"\n      className={cn('flex flex-col items-start justify-center gap-0 min-w-0 flex-1', className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n}\n\nexport type CodeBlockFooterMessageProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterMessage({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterMessageProps) {\n  if (asChild) {\n    return (\n      <Slot\n        data-slot=\"code-block-footer-message\"\n        className={cn('overflow-hidden text-ellipsis whitespace-nowrap text-xs', className)}\n        {...props}\n      >\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <Text\n      data-slot=\"code-block-footer-message\"\n      size=\"xs\"\n      className={cn('overflow-hidden text-ellipsis whitespace-nowrap', className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n\nexport type CodeBlockFooterDescriptionProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterDescription({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterDescriptionProps) {\n  if (asChild) {\n    return (\n      <Slot\n        data-slot=\"code-block-footer-description\"\n        className={cn('text-xs text-foreground-neutral-subtle', className)}\n        {...props}\n      >\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <Text\n      data-slot=\"code-block-footer-description\"\n      size=\"xs\"\n      className={cn('text-foreground-neutral-subtle', className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["Slot","Icon","Text","cn","CodeBlockFooter","className","asChild","state","message","description","icon","children","props","Comp","defaultIcon","name","aria-hidden","data-slot","CodeBlockFooterIcon","CodeBlockFooterContent","CodeBlockFooterMessage","CodeBlockFooterDescription","size"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,IAAI,QAAO,wBAAwB;AAE3C,SAAQC,EAAE,QAAO,WAAW;AAU5B,OAAO,SAASC,gBAAgB,EAC9BC,SAAS,EACTC,UAAU,KAAK,EACfC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,QAAQ,EACR,GAAGC,OACkB;IACrB,MAAMC,OAAOP,UAAUN,OAAO;IAE9B,MAAMc,cACJJ,QACCH,CAAAA,UAAU,0BACT,KAACN;QAAKc,MAAK;QAAUV,WAAU;QAAUW,eAAY;uBAErD,KAACf;QACCc,MAAK;QACLV,WAAU;QACVW,eAAY;MAEhB;IAEF,IAAIV,WAAWK,UAAU;QACvB,qBACE,KAACE;YACCI,aAAU;YACVZ,WAAWF,GAAG,6DAA6DE;YAC1E,GAAGO,KAAK;sBAERD;;IAGP;IAEA,qBACE,MAACE;QACCI,aAAU;QACVZ,WAAWF,GAAG,6DAA6DE;QAC1E,GAAGO,KAAK;;0BAET,KAACM;gBAAoBb,WAAU;0BAAyBS;;YACtDN,CAAAA,WAAWC,WAAU,mBACrB,MAACU;;oBACEX,yBAAW,KAACY;kCAAwBZ;;oBACpCC,6BAAe,KAACY;kCAA4BZ;;;;;;AAKvD;AAMA,OAAO,SAASS,oBAAoB,EAClCb,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACsB;IACzB,MAAMC,OAAOP,UAAUN,OAAO;IAE9B,qBACE,KAACa;QACCI,aAAU;QACVZ,WAAWF,GAAG,qDAAqDE;QAClE,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASQ,uBAAuB,EACrCd,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACyB;IAC5B,MAAMC,OAAOP,UAAUN,OAAO;IAE9B,qBACE,KAACa;QACCI,aAAU;QACVZ,WAAWF,GAAG,iEAAiEE;QAC9E,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASS,uBAAuB,EACrCf,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACyB;IAC5B,IAAIN,SAAS;QACX,qBACE,KAACN;YACCiB,aAAU;YACVZ,WAAWF,GAAG,2DAA2DE;YACxE,GAAGO,KAAK;sBAERD;;IAGP;IAEA,qBACE,KAACT;QACCe,aAAU;QACVK,MAAK;QACLjB,WAAWF,GAAG,mDAAmDE;QAChE,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASU,2BAA2B,EACzChB,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OAC6B;IAChC,IAAIN,SAAS;QACX,qBACE,KAACN;YACCiB,aAAU;YACVZ,WAAWF,GAAG,0CAA0CE;YACvD,GAAGO,KAAK;sBAERD;;IAGP;IAEA,qBACE,KAACT;QACCe,aAAU;QACVK,MAAK;QACLjB,WAAWF,GAAG,kCAAkCE;QAC/C,GAAGO,KAAK;kBAERD;;AAGP"}

package/dist/components/code-block/code-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-content.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,KAAK,gBAAgB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,WAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAwClB"}
+{"version":3,"file":"code-content.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,KAAK,gBAAgB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,WAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA2ClB"}

package/dist/components/code-block/code-content.js

@@ -18,10 +18,10 @@ export function CodeContent({ code, highlightedCode, isLoading, syntaxHighlighti
         ...props,
         children: /*#__PURE__*/ _jsx("code", {
             className: cn('w-full overflow-x-auto bg-transparent font-code text-xs leading-20 text-foreground-neutral-base', 'grid', lineNumbers && '[counter-reset:line] [counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none'),
-            children: lines.map((line)=>/*#__PURE__*/ _jsx("span", {
+            children: lines.map((line, index)=>/*#__PURE__*/ _jsx("span", {
                     className: "line px-12 w-full relative font-code text-xs leading-20",
                     children: line
-                }, line))
+                }, `${index}-${line}`))
         })
     });
 }

package/dist/components/code-block/code-content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/code-block/code-content.tsx"],"sourcesContent":["import type {HTMLAttributes} from 'react';\nimport {cn} from 'utils/cn';\n\ntype CodeContentProps = HTMLAttributes<HTMLElement> & {\n  code: string;\n  highlightedCode?: string;\n  isLoading: boolean;\n  syntaxHighlighting: boolean;\n  lineNumbers?: boolean;\n};\n\nexport function CodeContent({\n  code,\n  highlightedCode,\n  isLoading,\n  syntaxHighlighting,\n  lineNumbers = false,\n  className,\n  ...props\n}: CodeContentProps) {\n  const shouldShowHighlighted = syntaxHighlighting && !isLoading && highlightedCode;\n\n  if (shouldShowHighlighted) {\n    return (\n      <div\n        className={cn(\n          'shiki-override w-full overflow-x-auto font-code [&_pre]:m-0 [&_pre]:p-0 [&_pre]:bg-transparent [&_pre]:font-code [&_code]:font-code [&_code]:bg-transparent [&_code]:text-xs [&_code]:leading-20 [&_code]:text-foreground-neutral-base [&_code]:grid',\n          lineNumbers &&\n            '[&_code]:[counter-reset:line] [&_code]:[counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',\n          '[&_.line]:block [&_.line]:px-12 [&_.line]:w-full [&_.line]:relative [&_.line]:font-code [&_.line]:text-xs [&_.line]:leading-20 [&_.line]:min-h-[1.25rem]',\n          className,\n        )}\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki outputs HTML for syntax highlighting\n        dangerouslySetInnerHTML={{__html: highlightedCode}}\n        {...props}\n      />\n    );\n  }\n\n  const lines = code.split('\\n');\n\n  return (\n    <pre className={cn('m-0 p-0 bg-transparent font-code', className)} {...props}>\n      <code\n        className={cn(\n          'w-full overflow-x-auto bg-transparent font-code text-xs leading-20 text-foreground-neutral-base',\n          'grid',\n          lineNumbers &&\n            '[counter-reset:line] [counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',\n        )}\n      >\n        {lines.map((line) => (\n          <span className=\"line px-12 w-full relative font-code text-xs leading-20\" key={line}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  );\n}\n"],"names":["cn","CodeContent","code","highlightedCode","isLoading","syntaxHighlighting","lineNumbers","className","props","shouldShowHighlighted","div","dangerouslySetInnerHTML","__html","lines","split","pre","map","line","span"],"mappings":";AACA,SAAQA,EAAE,QAAO,WAAW;AAU5B,OAAO,SAASC,YAAY,EAC1BC,IAAI,EACJC,eAAe,EACfC,SAAS,EACTC,kBAAkB,EAClBC,cAAc,KAAK,EACnBC,SAAS,EACT,GAAGC,OACc;IACjB,MAAMC,wBAAwBJ,sBAAsB,CAACD,aAAaD;IAElE,IAAIM,uBAAuB;QACzB,qBACE,KAACC;YACCH,WAAWP,GACT,wPACAM,eACE,gYACF,4JACAC;YAEF,mGAAmG;YACnGI,yBAAyB;gBAACC,QAAQT;YAAe;YAChD,GAAGK,KAAK;;IAGf;IAEA,MAAMK,QAAQX,KAAKY,KAAK,CAAC;IAEzB,qBACE,KAACC;QAAIR,WAAWP,GAAG,oCAAoCO;QAAa,GAAGC,KAAK;kBAC1E,cAAA,KAACN;YACCK,WAAWP,GACT,mGACA,QACAM,eACE;sBAGHO,MAAMG,GAAG,CAAC,CAACC,qBACV,KAACC;oBAAKX,WAAU;8BACbU;mBAD4EA;;;AAOzF"}
+{"version":3,"sources":["../../../src/components/code-block/code-content.tsx"],"sourcesContent":["import type {HTMLAttributes} from 'react';\nimport {cn} from 'utils/cn';\n\ntype CodeContentProps = HTMLAttributes<HTMLElement> & {\n  code: string;\n  highlightedCode?: string;\n  isLoading: boolean;\n  syntaxHighlighting: boolean;\n  lineNumbers?: boolean;\n};\n\nexport function CodeContent({\n  code,\n  highlightedCode,\n  isLoading,\n  syntaxHighlighting,\n  lineNumbers = false,\n  className,\n  ...props\n}: CodeContentProps) {\n  const shouldShowHighlighted = syntaxHighlighting && !isLoading && highlightedCode;\n\n  if (shouldShowHighlighted) {\n    return (\n      <div\n        className={cn(\n          'shiki-override w-full overflow-x-auto font-code [&_pre]:m-0 [&_pre]:p-0 [&_pre]:bg-transparent [&_pre]:font-code [&_code]:font-code [&_code]:bg-transparent [&_code]:text-xs [&_code]:leading-20 [&_code]:text-foreground-neutral-base [&_code]:grid',\n          lineNumbers &&\n            '[&_code]:[counter-reset:line] [&_code]:[counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',\n          '[&_.line]:block [&_.line]:px-12 [&_.line]:w-full [&_.line]:relative [&_.line]:font-code [&_.line]:text-xs [&_.line]:leading-20 [&_.line]:min-h-[1.25rem]',\n          className,\n        )}\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki outputs HTML for syntax highlighting\n        dangerouslySetInnerHTML={{__html: highlightedCode}}\n        {...props}\n      />\n    );\n  }\n\n  const lines = code.split('\\n');\n\n  return (\n    <pre className={cn('m-0 p-0 bg-transparent font-code', className)} {...props}>\n      <code\n        className={cn(\n          'w-full overflow-x-auto bg-transparent font-code text-xs leading-20 text-foreground-neutral-base',\n          'grid',\n          lineNumbers &&\n            '[counter-reset:line] [counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',\n        )}\n      >\n        {lines.map((line, index) => (\n          <span\n            className=\"line px-12 w-full relative font-code text-xs leading-20\"\n            key={`${index}-${line}`}\n          >\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  );\n}\n"],"names":["cn","CodeContent","code","highlightedCode","isLoading","syntaxHighlighting","lineNumbers","className","props","shouldShowHighlighted","div","dangerouslySetInnerHTML","__html","lines","split","pre","map","line","index","span"],"mappings":";AACA,SAAQA,EAAE,QAAO,WAAW;AAU5B,OAAO,SAASC,YAAY,EAC1BC,IAAI,EACJC,eAAe,EACfC,SAAS,EACTC,kBAAkB,EAClBC,cAAc,KAAK,EACnBC,SAAS,EACT,GAAGC,OACc;IACjB,MAAMC,wBAAwBJ,sBAAsB,CAACD,aAAaD;IAElE,IAAIM,uBAAuB;QACzB,qBACE,KAACC;YACCH,WAAWP,GACT,wPACAM,eACE,gYACF,4JACAC;YAEF,mGAAmG;YACnGI,yBAAyB;gBAACC,QAAQT;YAAe;YAChD,GAAGK,KAAK;;IAGf;IAEA,MAAMK,QAAQX,KAAKY,KAAK,CAAC;IAEzB,qBACE,KAACC;QAAIR,WAAWP,GAAG,oCAAoCO;QAAa,GAAGC,KAAK;kBAC1E,cAAA,KAACN;YACCK,WAAWP,GACT,mGACA,QACAM,eACE;sBAGHO,MAAMG,GAAG,CAAC,CAACC,MAAMC,sBAChB,KAACC;oBACCZ,WAAU;8BAGTU;mBAFI,GAAGC,MAAM,CAAC,EAAED,MAAM;;;AAQnC"}

package/dist/components/dynamic-item/dynamic-item.stories.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../components/button/button.js';
 import { ItemTitle } from '../../components/item/index.js';
+import { MovingBorder } from '../../components/moving-border/index.js';
 import { cn } from '../../utils/cn.js';
 import illustration1 from '../../assets/illustration-1.svg';
 import illustration2 from '../../assets/illustration-2.svg';
@@ -8,7 +9,6 @@ import illustrationBg from '../../assets/illustration-gradient.svg';
 import { Avatar } from '../avatar/avatar.js';
 import { AvatarGroup, AvatarGroupTooltip } from '../avatar/avatar-group.js';
 import { Icon } from '../icon/icon.js';
-import { MovingBorder } from '../moving-border/moving-border.js';
 import { DynamicItem } from './dynamic-item.js';
 const meta = {
     title: 'Components/DynamicItem',