@shipfox/react-ui 0.2.0 → 0.4.0

package/dist/components/inline-tips/inline-tips.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/inline-tips/inline-tips.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code, Header} from 'components/typography';\nimport {\n  InlineTips,\n  InlineTipsAction,\n  InlineTipsActions,\n  InlineTipsContent,\n  InlineTipsDescription,\n  InlineTipsTitle,\n} from './inline-tips';\n\nconst meta = {\n  title: 'Components/InlineTips',\n  component: InlineTips,\n  tags: ['autodocs'],\n  argTypes: {\n    type: {\n      control: 'select',\n      options: ['default', 'info', 'success', 'error'],\n    },\n    variant: {\n      control: 'select',\n      options: ['primary', 'secondary'],\n    },\n  },\n  args: {\n    type: 'default',\n    variant: 'primary',\n  },\n} satisfies Meta<typeof InlineTips>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst types = ['default', 'info', 'success', 'error'] as const;\nconst variants = ['primary', 'secondary'] as const;\n\nexport const Default: Story = {\n  render: (args) => {\n    return (\n      <InlineTips {...args}>\n        <InlineTipsContent>\n          <InlineTipsTitle>Title</InlineTipsTitle>\n          <InlineTipsDescription>Description</InlineTipsDescription>\n        </InlineTipsContent>\n        <InlineTipsActions>\n          <InlineTipsAction variant={args.variant}>Label</InlineTipsAction>\n          <InlineTipsAction variant={args.variant}>Label</InlineTipsAction>\n        </InlineTipsActions>\n      </InlineTips>\n    );\n  },\n};\n\nexport const Variants: Story = {\n  render: () => {\n    return (\n      <div className=\"flex flex-col gap-16\">\n        {variants.map((variant) => (\n          <InlineTips key={variant} type=\"default\" variant={variant}>\n            <InlineTipsContent>\n              <InlineTipsTitle>Title</InlineTipsTitle>\n              <InlineTipsDescription>Description</InlineTipsDescription>\n            </InlineTipsContent>\n            <InlineTipsActions>\n              <InlineTipsAction variant=\"primary\">Label</InlineTipsAction>\n              <InlineTipsAction variant=\"secondary\">Label</InlineTipsAction>\n            </InlineTipsActions>\n          </InlineTips>\n        ))}\n      </div>\n    );\n  },\n};\n\nexport const DesignMock: Story = {\n  render: () => {\n    const content = {\n      default: {title: 'Title', description: 'Description'},\n      info: {title: 'Title', description: 'Description'},\n      success: {title: 'Title', description: 'Description'},\n      error: {title: 'Title', description: 'Description'},\n    };\n\n    return (\n      <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n        <Header variant=\"h3\" className=\"text-foreground-neutral-subtle\">\n          INLINE TIPS\n        </Header>\n        <div className=\"flex flex-col gap-16\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Primary\n          </Code>\n          {types.map((type) => (\n            <InlineTips key={type} type={type} variant=\"primary\">\n              <InlineTipsContent>\n                <InlineTipsTitle>{content[type].title}</InlineTipsTitle>\n                <InlineTipsDescription>{content[type].description}</InlineTipsDescription>\n              </InlineTipsContent>\n              <InlineTipsActions>\n                <InlineTipsAction variant=\"primary\">Label</InlineTipsAction>\n                <InlineTipsAction variant=\"secondary\">Label</InlineTipsAction>\n              </InlineTipsActions>\n            </InlineTips>\n          ))}\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Secondary\n          </Code>\n          {types.map((type) => (\n            <InlineTips key={type} type={type} variant=\"secondary\">\n              <InlineTipsContent>\n                <InlineTipsTitle>{content[type].title}</InlineTipsTitle>\n                <InlineTipsDescription>{content[type].description}</InlineTipsDescription>\n              </InlineTipsContent>\n              <InlineTipsActions>\n                <InlineTipsAction variant=\"primary\">Label</InlineTipsAction>\n                <InlineTipsAction variant=\"secondary\">Label</InlineTipsAction>\n              </InlineTipsActions>\n            </InlineTips>\n          ))}\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["Code","Header","InlineTips","InlineTipsAction","InlineTipsActions","InlineTipsContent","InlineTipsDescription","InlineTipsTitle","meta","title","component","tags","argTypes","type","control","options","variant","args","types","variants","Default","render","Variants","div","className","map","DesignMock","content","default","description","info","success","error"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export * from './input';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/input/index.js

@@ -0,0 +1,3 @@
+export * from './input.js';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/input/index.ts"],"sourcesContent":["export * from './input';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,aAAa;;;8EAexB,CAAC;AAEH,KAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAE7F,wBAAgB,KAAK,CAAC,EAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,UAAU,2CAmB3E"}

package/dist/components/{input.js → input/input.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
-import { cn } from '../utils/cn.js';
+import { cn } from '../../utils/cn.js';
 export const inputVariants = cva('', {
     variants: {
         variant: {
@@ -21,7 +21,7 @@ export function Input({ className, type, variant, size, ...props }) {
     return /*#__PURE__*/ _jsx("input", {
         type: type,
         "data-slot": "input",
-        className: cn('placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 px-8 text-sm leading-20 text-foreground-neutral-base shadow-border-base transition-[color,box-shadow] outline-none', 'hover:bg-background-field-hover', 'selection:bg-background-accent-neutral-soft selection:text-foreground-neutral-on-inverted', 'file:text-foreground-neutral-base file:inline-flex file:font-medium', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled', 'focus-visible:shadow-border-interactive-with-active', 'aria-invalid:shadow-border-error', inputVariants({
+        className: cn('placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 px-8 text-sm leading-20 text-foreground-neutral-base shadow-button-neutral transition-[color,box-shadow] outline-none', 'hover:bg-background-field-hover', 'selection:bg-background-accent-neutral-soft selection:text-foreground-neutral-on-inverted', 'file:text-foreground-neutral-base file:inline-flex file:font-medium', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled', 'focus-visible:shadow-border-interactive-with-active', 'aria-invalid:shadow-border-error', inputVariants({
             variant,
             size
         }), className),

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["import {cva, type VariantProps} from 'class-variance-authority';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      base: 'bg-background-field-base',\n      component: 'bg-background-field-component',\n    },\n    size: {\n      base: 'py-6',\n      small: 'py-4',\n    },\n  },\n  defaultVariants: {\n    variant: 'base',\n    size: 'base',\n  },\n});\n\ntype InputProps = Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants>;\n\nexport function Input({className, type, variant, size, ...props}: InputProps) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'placeholder:text-foreground-neutral-muted w-full min-w-0 rounded-6 px-8 text-sm leading-20 text-foreground-neutral-base shadow-button-neutral transition-[color,box-shadow] outline-none',\n        'hover:bg-background-field-hover',\n        'selection:bg-background-accent-neutral-soft selection:text-foreground-neutral-on-inverted',\n        'file:text-foreground-neutral-base file:inline-flex file:font-medium',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled',\n        'focus-visible:shadow-border-interactive-with-active',\n        'aria-invalid:shadow-border-error',\n        inputVariants({variant, size}),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"names":["cva","cn","inputVariants","variants","variant","base","component","size","small","defaultVariants","Input","className","type","props","input","data-slot"],"mappings":";AAAA,SAAQA,GAAG,QAA0B,2BAA2B;AAEhE,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,gBAAgBF,IAAI,IAAI;IACnCG,UAAU;QACRC,SAAS;YACPC,MAAM;YACNC,WAAW;QACb;QACAC,MAAM;YACJF,MAAM;YACNG,OAAO;QACT;IACF;IACAC,iBAAiB;QACfL,SAAS;QACTG,MAAM;IACR;AACF,GAAG;AAIH,OAAO,SAASG,MAAM,EAACC,SAAS,EAAEC,IAAI,EAAER,OAAO,EAAEG,IAAI,EAAE,GAAGM,OAAkB;IAC1E,qBACE,KAACC;QACCF,MAAMA;QACNG,aAAU;QACVJ,WAAWV,GACT,4LACA,mCACA,6FACA,uEACA,mKACA,uDACA,oCACAC,cAAc;YAACE;YAASG;QAAI,IAC5BI;QAED,GAAGE,KAAK;;AAGf"}

package/dist/components/{input.stories.js → input/input.stories.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Code, Header } from '../components/typography/index.js';
+import { Code, Header } from '../../components/typography/index.js';
 import { Input } from './input.js';
 const typeOptions = [
     'text',

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/input/input.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code, Header} from 'components/typography';\nimport {Input} from './input';\n\nconst typeOptions = [\n  'text',\n  'email',\n  'password',\n  'number',\n  'search',\n  'url',\n  'tel',\n  'date',\n  'time',\n  'datetime-local',\n  'month',\n  'week',\n  'color',\n  'file',\n] as const;\n\nconst meta = {\n  title: 'Components/Input',\n  component: Input,\n  tags: ['autodocs'],\n  argTypes: {\n    type: {\n      control: 'select',\n      options: typeOptions,\n    },\n    placeholder: {control: 'text'},\n    disabled: {control: 'boolean'},\n    'aria-invalid': {control: 'boolean'},\n  },\n  args: {\n    type: 'text',\n    placeholder: 'Type something…',\n    disabled: false,\n    'aria-invalid': false,\n  },\n} satisfies Meta<typeof Input>;\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              <Input {...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              <Input {...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              <Input\n                {...args}\n                className=\"active\"\n                defaultValue=\"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              <Input {...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              <Input {...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              <Input {...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 Types: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {typeOptions.map((t) => (\n        <div key={t} className=\"flex flex-col gap-8\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            {t}\n          </Code>\n          <Input {...args} type={t} />\n        </div>\n      ))}\n    </div>\n  ),\n};\n"],"names":["Code","Header","Input","typeOptions","meta","title","component","tags","argTypes","type","control","options","placeholder","disabled","args","Default","variants","sizes","States","render","div","className","map","variant","size","defaultValue","aria-invalid","parameters","pseudo","hover","active","focusVisible","Types","t"],"mappings":";AACA,SAAQA,IAAI,EAAEC,MAAM,QAAO,wBAAwB;AACnD,SAAQC,KAAK,QAAO,UAAU;AAE9B,MAAMC,cAAc;IAClB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWJ;IACXK,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,MAAM;YACJC,SAAS;YACTC,SAASR;QACX;QACAS,aAAa;YAACF,SAAS;QAAM;QAC7BG,UAAU;YAACH,SAAS;QAAS;QAC7B,gBAAgB;YAACA,SAAS;QAAS;IACrC;IACAI,MAAM;QACJL,MAAM;QACNG,aAAa;QACbC,UAAU;QACV,gBAAgB;IAClB;AACF;AAEA,eAAeT,KAAK;AAIpB,OAAO,MAAMW,UAAiB,CAAC,EAAE;AAEjC,MAAMC,WAAW;IAAC;IAAQ;CAAY;AACtC,MAAMC,QAAQ;IAAC;IAAQ;CAAQ;AAE/B,OAAO,MAAMC,SAAgB;IAC3BC,QAAQ,CAACL,qBACP,KAACM;YAAIC,WAAU;sBACZL,SAASM,GAAG,CAAC,CAACC,UACbN,MAAMK,GAAG,CAAC,CAACE,qBACT,MAACJ;wBAAyBC,WAAU;;0CAClC,MAACpB;gCAAOsB,SAAQ;;oCACbA;oCAAQ;oCAAEC;;;0CAEb,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAES,SAASA;wCAASC,MAAMA;;;;0CAG3C,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAEO,WAAU;wCAAQE,SAASA;wCAASC,MAAMA;;;;0CAE7D,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCACE,GAAGY,IAAI;wCACRO,WAAU;wCACVI,cAAa;wCACbF,SAASA;wCACTC,MAAMA;;;;0CAGV,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAEO,WAAU;wCAAQE,SAASA;wCAASC,MAAMA;;;;0CAE7D,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAED,QAAQ;wCAACU,SAASA;wCAASC,MAAMA;;;;0CAEpD,MAACJ;gCAAIC,WAAU;;kDACb,KAACrB;wCAAKuB,SAAQ;wCAAQF,WAAU;kDAAiC;;kDAIjE,KAACnB;wCAAO,GAAGY,IAAI;wCAAEY,cAAY;wCAACH,SAASA;wCAASC,MAAMA;;;;;uBAnDhDD,UAAUC;;AA0D9B,EAAE;AAEFN,OAAOS,UAAU,GAAG;IAClBC,QAAQ;QACNC,OAAO;QACPC,QAAQ;QACRC,cAAc;IAChB;AACF;AAEA,OAAO,MAAMC,QAAe;IAC1Bb,QAAQ,CAACL,qBACP,KAACM;YAAIC,WAAU;sBACZlB,YAAYmB,GAAG,CAAC,CAACW,kBAChB,MAACb;oBAAYC,WAAU;;sCACrB,KAACrB;4BAAKuB,SAAQ;4BAAQF,WAAU;sCAC7BY;;sCAEH,KAAC/B;4BAAO,GAAGY,IAAI;4BAAEL,MAAMwB;;;mBAJfA;;AASlB,EAAE"}

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

@@ -0,0 +1,2 @@
+export * from './item';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/item/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/components/item/index.js

@@ -0,0 +1,3 @@
+export * from './item.js';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/item/index.ts"],"sourcesContent":["export * from './item';\n"],"names":[],"mappings":"AAAA,cAAc,SAAS"}

package/dist/components/item/item.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+export declare const itemVariants: (props?: ({
+    variant?: "default" | "neutral" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ItemProps = ComponentProps<'div'> & VariantProps<typeof itemVariants> & {
+    asChild?: boolean;
+};
+export declare function Item({ className, variant, size, asChild, children, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
+export type ItemGroupProps = ComponentProps<'div'>;
+export declare function ItemGroup({ className, children, ...props }: ItemGroupProps): import("react/jsx-runtime").JSX.Element;
+export type ItemActionsProps = ComponentProps<'div'>;
+export declare function ItemActions({ className, children, ...props }: ItemActionsProps): import("react/jsx-runtime").JSX.Element;
+export type ItemContentProps = ComponentProps<'div'>;
+export declare function ItemContent({ className, children, ...props }: ItemContentProps): import("react/jsx-runtime").JSX.Element;
+export type ItemDescriptionProps = ComponentProps<'p'>;
+export declare function ItemDescription({ className, children, ...props }: ItemDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export type ItemFooterProps = ComponentProps<'div'>;
+export declare function ItemFooter({ className, children, ...props }: ItemFooterProps): import("react/jsx-runtime").JSX.Element;
+export type ItemHeaderProps = ComponentProps<'div'>;
+export declare function ItemHeader({ className, children, ...props }: ItemHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare const itemMediaVariants: (props?: ({
+    variant?: "image" | "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ItemMediaProps = ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>;
+export declare function ItemMedia({ className, variant, children, ...props }: ItemMediaProps): import("react/jsx-runtime").JSX.Element;
+export type ItemTitleProps = ComponentProps<'h3'>;
+export declare function ItemTitle({ className, children, ...props }: ItemTitleProps): import("react/jsx-runtime").JSX.Element;
+export type ItemSeparatorProps = ComponentProps<'div'>;
+export declare function ItemSeparator({ className, ...props }: ItemSeparatorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/item/item.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,YAAY;;;8EAiBvB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAC3C,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,wBAAgB,IAAI,CAAC,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,SAAS,2CAQ9F;AAGD,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEnD,wBAAgB,SAAS,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,2CAMxE;AAGD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAErD,wBAAgB,WAAW,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,gBAAgB,2CAU5E;AAGD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAErD,wBAAgB,WAAW,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,gBAAgB,2CAU5E;AAGD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;AAEvD,wBAAgB,eAAe,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,oBAAoB,2CAapF;AAGD,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpD,wBAAgB,UAAU,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,eAAe,2CAU1E;AAGD,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpD,wBAAgB,UAAU,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,eAAe,2CAU1E;AAGD,eAAO,MAAM,iBAAiB;;8EAW5B,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE5F,wBAAgB,SAAS,CAAC,EAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,2CAMjF;AAGD,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;AAElD,wBAAgB,SAAS,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,2CAaxE;AAGD,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEvD,wBAAgB,aAAa,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,kBAAkB,2CAQtE"}

package/dist/components/item/item.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/cn.js';
+export const itemVariants = cva('transition-all duration-150 rounded-8', {
+    variants: {
+        variant: {
+            default: 'bg-background-components-base text-foreground-neutral-base border border-border-neutral-base shadow-button-neutral',
+            neutral: 'bg-background-neutral-base text-foreground-neutral-base border border-border-neutral-base shadow-button-neutral'
+        },
+        size: {
+            default: '',
+            sm: ''
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default'
+    }
+});
+export function Item({ className, variant, size, asChild = false, children, ...props }) {
+    const Comp = asChild ? Slot : 'div';
+    return /*#__PURE__*/ _jsx(Comp, {
+        "data-slot": "item",
+        className: cn(itemVariants({
+            variant,
+            size
+        }), className),
+        ...props,
+        children: children
+    });
+}
+export function ItemGroup({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "item-group",
+        className: cn('flex flex-col', className),
+        ...props,
+        children: children
+    });
+}
+export function ItemActions({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "item-actions",
+        className: cn('flex shrink-0 items-center gap-8', className),
+        ...props,
+        children: children
+    });
+}
+export function ItemContent({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "item-content",
+        className: cn('flex min-w-0 flex-1 flex-col gap-4', className),
+        ...props,
+        children: children
+    });
+}
+export function ItemDescription({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("p", {
+        "data-slot": "item-description",
+        className: cn('text-xs leading-20 text-foreground-neutral-subtle max-w-250 sm:max-w-fit line-clamp-3', className),
+        ...props,
+        children: children
+    });
+}
+export function ItemFooter({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "item-footer",
+        className: cn('flex shrink-0 items-center gap-8 px-12 py-8', className),
+        ...props,
+        children: children
+    });
+}
+export function ItemHeader({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "item-header",
+        className: cn('flex shrink-0 items-center gap-8 px-12 py-8', className),
+        ...props,
+        children: children
+    });
+}
+// ItemMedia
+export const itemMediaVariants = cva('flex shrink-0 items-center justify-center', {
+    variants: {
+        variant: {
+            default: '',
+            icon: 'text-foreground-neutral-base',
+            image: ''
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});
+export function ItemMedia({ className, variant, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "item-media",
+        className: cn(itemMediaVariants({
+            variant
+        }), className),
+        ...props,
+        children: children
+    });
+}
+export function ItemTitle({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("h3", {
+        "data-slot": "item-title",
+        className: cn('text-sm font-medium leading-20 text-foreground-neutral-base truncate', className),
+        ...props,
+        children: children
+    });
+}
+export function ItemSeparator({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "item-separator",
+        className: cn('h-px bg-border-neutral-base', className),
+        ...props
+    });
+}
+
+//# sourceMappingURL=item.js.map

package/dist/components/item/item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/item/item.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const itemVariants = cva('transition-all duration-150 rounded-8', {\n  variants: {\n    variant: {\n      default:\n        'bg-background-components-base text-foreground-neutral-base border border-border-neutral-base shadow-button-neutral',\n      neutral:\n        'bg-background-neutral-base text-foreground-neutral-base border border-border-neutral-base shadow-button-neutral',\n    },\n    size: {\n      default: '',\n      sm: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'default',\n  },\n});\n\nexport type ItemProps = ComponentProps<'div'> &\n  VariantProps<typeof itemVariants> & {\n    asChild?: boolean;\n  };\n\nexport function Item({className, variant, size, asChild = false, children, ...props}: ItemProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp data-slot=\"item\" className={cn(itemVariants({variant, size}), className)} {...props}>\n      {children}\n    </Comp>\n  );\n}\n\n// ItemGroup\nexport type ItemGroupProps = ComponentProps<'div'>;\n\nexport function ItemGroup({className, children, ...props}: ItemGroupProps) {\n  return (\n    <div data-slot=\"item-group\" className={cn('flex flex-col', className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\n// ItemActions\nexport type ItemActionsProps = ComponentProps<'div'>;\n\nexport function ItemActions({className, children, ...props}: ItemActionsProps) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn('flex shrink-0 items-center gap-8', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ItemContent\nexport type ItemContentProps = ComponentProps<'div'>;\n\nexport function ItemContent({className, children, ...props}: ItemContentProps) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn('flex min-w-0 flex-1 flex-col gap-4', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ItemDescription\nexport type ItemDescriptionProps = ComponentProps<'p'>;\n\nexport function ItemDescription({className, children, ...props}: ItemDescriptionProps) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        'text-xs leading-20 text-foreground-neutral-subtle max-w-250 sm:max-w-fit line-clamp-3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n}\n\n// ItemFooter\nexport type ItemFooterProps = ComponentProps<'div'>;\n\nexport function ItemFooter({className, children, ...props}: ItemFooterProps) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn('flex shrink-0 items-center gap-8 px-12 py-8', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ItemHeader\nexport type ItemHeaderProps = ComponentProps<'div'>;\n\nexport function ItemHeader({className, children, ...props}: ItemHeaderProps) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn('flex shrink-0 items-center gap-8 px-12 py-8', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ItemMedia\nexport const itemMediaVariants = cva('flex shrink-0 items-center justify-center', {\n  variants: {\n    variant: {\n      default: '',\n      icon: 'text-foreground-neutral-base',\n      image: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport type ItemMediaProps = ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>;\n\nexport function ItemMedia({className, variant, children, ...props}: ItemMediaProps) {\n  return (\n    <div data-slot=\"item-media\" className={cn(itemMediaVariants({variant}), className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\n// ItemTitle\nexport type ItemTitleProps = ComponentProps<'h3'>;\n\nexport function ItemTitle({className, children, ...props}: ItemTitleProps) {\n  return (\n    <h3\n      data-slot=\"item-title\"\n      className={cn(\n        'text-sm font-medium leading-20 text-foreground-neutral-base truncate',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h3>\n  );\n}\n\n// ItemSeparator\nexport type ItemSeparatorProps = ComponentProps<'div'>;\n\nexport function ItemSeparator({className, ...props}: ItemSeparatorProps) {\n  return (\n    <div\n      data-slot=\"item-separator\"\n      className={cn('h-px bg-border-neutral-base', className)}\n      {...props}\n    />\n  );\n}\n"],"names":["Slot","cva","cn","itemVariants","variants","variant","default","neutral","size","sm","defaultVariants","Item","className","asChild","children","props","Comp","data-slot","ItemGroup","div","ItemActions","ItemContent","ItemDescription","p","ItemFooter","ItemHeader","itemMediaVariants","icon","image","ItemMedia","ItemTitle","h3","ItemSeparator"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAEhE,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,eAAeF,IAAI,yCAAyC;IACvEG,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,SACE;QACJ;QACAC,MAAM;YACJF,SAAS;YACTG,IAAI;QACN;IACF;IACAC,iBAAiB;QACfL,SAAS;QACTG,MAAM;IACR;AACF,GAAG;AAOH,OAAO,SAASG,KAAK,EAACC,SAAS,EAAEP,OAAO,EAAEG,IAAI,EAAEK,UAAU,KAAK,EAAEC,QAAQ,EAAE,GAAGC,OAAiB;IAC7F,MAAMC,OAAOH,UAAUb,OAAO;IAE9B,qBACE,KAACgB;QAAKC,aAAU;QAAOL,WAAWV,GAAGC,aAAa;YAACE;YAASG;QAAI,IAAII;QAAa,GAAGG,KAAK;kBACtFD;;AAGP;AAKA,OAAO,SAASI,UAAU,EAACN,SAAS,EAAEE,QAAQ,EAAE,GAAGC,OAAsB;IACvE,qBACE,KAACI;QAAIF,aAAU;QAAaL,WAAWV,GAAG,iBAAiBU;QAAa,GAAGG,KAAK;kBAC7ED;;AAGP;AAKA,OAAO,SAASM,YAAY,EAACR,SAAS,EAAEE,QAAQ,EAAE,GAAGC,OAAwB;IAC3E,qBACE,KAACI;QACCF,aAAU;QACVL,WAAWV,GAAG,oCAAoCU;QACjD,GAAGG,KAAK;kBAERD;;AAGP;AAKA,OAAO,SAASO,YAAY,EAACT,SAAS,EAAEE,QAAQ,EAAE,GAAGC,OAAwB;IAC3E,qBACE,KAACI;QACCF,aAAU;QACVL,WAAWV,GAAG,sCAAsCU;QACnD,GAAGG,KAAK;kBAERD;;AAGP;AAKA,OAAO,SAASQ,gBAAgB,EAACV,SAAS,EAAEE,QAAQ,EAAE,GAAGC,OAA4B;IACnF,qBACE,KAACQ;QACCN,aAAU;QACVL,WAAWV,GACT,yFACAU;QAED,GAAGG,KAAK;kBAERD;;AAGP;AAKA,OAAO,SAASU,WAAW,EAACZ,SAAS,EAAEE,QAAQ,EAAE,GAAGC,OAAuB;IACzE,qBACE,KAACI;QACCF,aAAU;QACVL,WAAWV,GAAG,+CAA+CU;QAC5D,GAAGG,KAAK;kBAERD;;AAGP;AAKA,OAAO,SAASW,WAAW,EAACb,SAAS,EAAEE,QAAQ,EAAE,GAAGC,OAAuB;IACzE,qBACE,KAACI;QACCF,aAAU;QACVL,WAAWV,GAAG,+CAA+CU;QAC5D,GAAGG,KAAK;kBAERD;;AAGP;AAEA,YAAY;AACZ,OAAO,MAAMY,oBAAoBzB,IAAI,6CAA6C;IAChFG,UAAU;QACRC,SAAS;YACPC,SAAS;YACTqB,MAAM;YACNC,OAAO;QACT;IACF;IACAlB,iBAAiB;QACfL,SAAS;IACX;AACF,GAAG;AAIH,OAAO,SAASwB,UAAU,EAACjB,SAAS,EAAEP,OAAO,EAAES,QAAQ,EAAE,GAAGC,OAAsB;IAChF,qBACE,KAACI;QAAIF,aAAU;QAAaL,WAAWV,GAAGwB,kBAAkB;YAACrB;QAAO,IAAIO;QAAa,GAAGG,KAAK;kBAC1FD;;AAGP;AAKA,OAAO,SAASgB,UAAU,EAAClB,SAAS,EAAEE,QAAQ,EAAE,GAAGC,OAAsB;IACvE,qBACE,KAACgB;QACCd,aAAU;QACVL,WAAWV,GACT,wEACAU;QAED,GAAGG,KAAK;kBAERD;;AAGP;AAKA,OAAO,SAASkB,cAAc,EAACpB,SAAS,EAAE,GAAGG,OAA0B;IACrE,qBACE,KAACI;QACCF,aAAU;QACVL,WAAWV,GAAG,+BAA+BU;QAC5C,GAAGG,KAAK;;AAGf"}

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

@@ -0,0 +1,232 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../components/button/button.js';
+import { Icon } from '../../components/icon/icon.js';
+import { Input } from '../../components/input/input.js';
+import { Label } from '../../components/label/label.js';
+import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemSeparator, ItemTitle } from './item.js';
+const meta = {
+    title: 'Components/Item',
+    component: Item,
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: [
+                'default',
+                'neutral'
+            ]
+        },
+        size: {
+            control: 'select',
+            options: [
+                'default',
+                'sm'
+            ]
+        }
+    },
+    args: {
+        variant: 'default',
+        size: 'default'
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        variant: 'default'
+    },
+    render: (args)=>/*#__PURE__*/ _jsxs(Item, {
+            ...args,
+            className: "px-12 py-12",
+            children: [
+                /*#__PURE__*/ _jsxs(ItemContent, {
+                    children: [
+                        /*#__PURE__*/ _jsx(ItemTitle, {
+                            children: "Basic Item"
+                        }),
+                        /*#__PURE__*/ _jsx(ItemDescription, {
+                            children: "A simple item with title and description."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(ItemActions, {
+                    className: "pt-8",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        variant: "secondary",
+                        size: "sm",
+                        children: "Action"
+                    })
+                })
+            ]
+        })
+};
+export const Variants = {
+    args: {},
+    render: ()=>/*#__PURE__*/ _jsxs(ItemGroup, {
+            className: "flex w-full max-w-md flex-col gap-12",
+            children: [
+                /*#__PURE__*/ _jsxs(Item, {
+                    variant: "default",
+                    className: "px-12 py-12",
+                    children: [
+                        /*#__PURE__*/ _jsxs(ItemContent, {
+                            children: [
+                                /*#__PURE__*/ _jsx(ItemTitle, {
+                                    children: "Default Variant"
+                                }),
+                                /*#__PURE__*/ _jsx(ItemDescription, {
+                                    children: "Standard styling with subtle background and borders."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(ItemActions, {
+                            className: "pt-8",
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "secondary",
+                                size: "sm",
+                                children: "Action"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Item, {
+                    variant: "neutral",
+                    className: "px-12 py-12",
+                    children: [
+                        /*#__PURE__*/ _jsxs(ItemContent, {
+                            children: [
+                                /*#__PURE__*/ _jsx(ItemTitle, {
+                                    children: "Neutral Variant"
+                                }),
+                                /*#__PURE__*/ _jsx(ItemDescription, {
+                                    children: "Neutral style with subtle background and borders."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(ItemActions, {
+                            className: "pt-8",
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "primary",
+                                size: "sm",
+                                children: "Action"
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const ImportPastJobsModal = {
+    args: {},
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "flex w-full max-w-lg flex-col",
+            children: /*#__PURE__*/ _jsxs(Item, {
+                variant: "neutral",
+                children: [
+                    /*#__PURE__*/ _jsxs(ItemHeader, {
+                        className: "justify-between px-24 py-16",
+                        children: [
+                            /*#__PURE__*/ _jsx(ItemTitle, {
+                                className: "text-lg font-medium text-foreground-neutral-base",
+                                children: "Import past jobs from Github"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx("kbd", {
+                                        className: "flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4",
+                                        children: "esc"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "transparent",
+                                        size: "xs",
+                                        className: "rounded-4 p-2 cursor-pointer bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 w-24 h-24",
+                                        children: /*#__PURE__*/ _jsx(Icon, {
+                                            name: "close"
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(ItemSeparator, {}),
+                    /*#__PURE__*/ _jsxs(ItemContent, {
+                        className: "px-24 py-16",
+                        children: [
+                            /*#__PURE__*/ _jsx(ItemDescription, {
+                                className: "mb-16 text-sm text-foreground-neutral-subtle",
+                                children: "Backfill your CI history by importing past runs from your Github repo. We'll handle the rest by creating a background task to import the data for you."
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-20",
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col gap-8",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Label, {
+                                                htmlFor: "repo-owner",
+                                                children: "Repository owner"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Input, {
+                                                id: "repo-owner",
+                                                type: "text",
+                                                defaultValue: "apache"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col gap-8",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Label, {
+                                                htmlFor: "repo-name",
+                                                children: "Repository name"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Input, {
+                                                id: "repo-name",
+                                                type: "text",
+                                                defaultValue: "kafka"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col gap-8",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Label, {
+                                                htmlFor: "start-date",
+                                                children: "Start date"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Input, {
+                                                id: "start-date",
+                                                type: "datetime-local",
+                                                defaultValue: "September 5th, 2025",
+                                                className: "pl-32"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(ItemSeparator, {}),
+                    /*#__PURE__*/ _jsxs(ItemFooter, {
+                        className: "justify-end gap-8 px-24 py-16",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "transparent",
+                                size: "sm",
+                                children: "Cancel"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "primary",
+                                size: "sm",
+                                children: "Import"
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+};
+
+//# sourceMappingURL=item.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/item/item.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Button} from 'components/button/button';\nimport {Icon} from 'components/icon/icon';\nimport {Input} from 'components/input/input';\nimport {Label} from 'components/label/label';\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemSeparator,\n  ItemTitle,\n} from './item';\n\nconst meta = {\n  title: 'Components/Item',\n  component: Item,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['default', 'neutral'],\n    },\n    size: {\n      control: 'select',\n      options: ['default', 'sm'],\n    },\n  },\n  args: {\n    variant: 'default',\n    size: 'default',\n  },\n} satisfies Meta<typeof Item>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: {\n    variant: 'default',\n  },\n  render: (args) => (\n    <Item {...args} className=\"px-12 py-12\">\n      <ItemContent>\n        <ItemTitle>Basic Item</ItemTitle>\n        <ItemDescription>A simple item with title and description.</ItemDescription>\n      </ItemContent>\n      <ItemActions className=\"pt-8\">\n        <Button variant=\"secondary\" size=\"sm\">\n          Action\n        </Button>\n      </ItemActions>\n    </Item>\n  ),\n};\n\nexport const Variants: Story = {\n  args: {},\n  render: () => (\n    <ItemGroup className=\"flex w-full max-w-md flex-col gap-12\">\n      <Item variant=\"default\" className=\"px-12 py-12\">\n        <ItemContent>\n          <ItemTitle>Default Variant</ItemTitle>\n          <ItemDescription>Standard styling with subtle background and borders.</ItemDescription>\n        </ItemContent>\n        <ItemActions className=\"pt-8\">\n          <Button variant=\"secondary\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"neutral\" className=\"px-12 py-12\">\n        <ItemContent>\n          <ItemTitle>Neutral Variant</ItemTitle>\n          <ItemDescription>Neutral style with subtle background and borders.</ItemDescription>\n        </ItemContent>\n        <ItemActions className=\"pt-8\">\n          <Button variant=\"primary\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n    </ItemGroup>\n  ),\n};\n\nexport const ImportPastJobsModal: Story = {\n  args: {},\n  render: () => (\n    <div className=\"flex w-full max-w-lg flex-col\">\n      <Item variant=\"neutral\">\n        <ItemHeader className=\"justify-between px-24 py-16\">\n          <ItemTitle className=\"text-lg font-medium text-foreground-neutral-base\">\n            Import past jobs from Github\n          </ItemTitle>\n          <div className=\"flex items-center gap-8\">\n            <kbd className=\"flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4\">\n              esc\n            </kbd>\n            <Button\n              variant=\"transparent\"\n              size=\"xs\"\n              className=\"rounded-4 p-2 cursor-pointer bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 w-24 h-24\"\n            >\n              <Icon name=\"close\" />\n            </Button>\n          </div>\n        </ItemHeader>\n        <ItemSeparator />\n        <ItemContent className=\"px-24 py-16\">\n          <ItemDescription className=\"mb-16 text-sm text-foreground-neutral-subtle\">\n            Backfill your CI history by importing past runs from your Github repo. We'll handle the\n            rest by creating a background task to import the data for you.\n          </ItemDescription>\n          <div className=\"flex flex-col gap-20\">\n            <div className=\"flex flex-col gap-8\">\n              <Label htmlFor=\"repo-owner\">Repository owner</Label>\n              <Input id=\"repo-owner\" type=\"text\" defaultValue=\"apache\" />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Label htmlFor=\"repo-name\">Repository name</Label>\n              <Input id=\"repo-name\" type=\"text\" defaultValue=\"kafka\" />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Label htmlFor=\"start-date\">Start date</Label>\n              <Input\n                id=\"start-date\"\n                type=\"datetime-local\"\n                defaultValue=\"September 5th, 2025\"\n                className=\"pl-32\"\n              />\n            </div>\n          </div>\n        </ItemContent>\n        <ItemSeparator />\n        <ItemFooter className=\"justify-end gap-8 px-24 py-16\">\n          <Button variant=\"transparent\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button variant=\"primary\" size=\"sm\">\n            Import\n          </Button>\n        </ItemFooter>\n      </Item>\n    </div>\n  ),\n};\n"],"names":["Button","Icon","Input","Label","Item","ItemActions","ItemContent","ItemDescription","ItemFooter","ItemGroup","ItemHeader","ItemSeparator","ItemTitle","meta","title","component","tags","argTypes","variant","control","options","size","args","Default","render","className","Variants","ImportPastJobsModal","div","kbd","name","htmlFor","id","type","defaultValue"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export * from './label';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/label/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/label/index.js

@@ -0,0 +1,3 @@
+export * from './label.js';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/label/index.ts"],"sourcesContent":["export * from './label';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU"}

package/dist/components/label/label.d.ts

@@ -0,0 +1,7 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+export declare const labelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type LabelProps = ComponentProps<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>;
+export declare function Label({ className, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/label/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,aAAa,oFAEzB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,GACjE,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,wBAAgB,KAAK,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,UAAU,2CAEtD"}

package/dist/components/label/label.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/cn.js';
+export const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+export function Label({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(LabelPrimitive.Root, {
+        className: cn(labelVariants(), className),
+        ...props
+    });
+}
+
+//# sourceMappingURL=label.js.map

package/dist/components/label/label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/label/label.tsx"],"sourcesContent":["import * as LabelPrimitive from '@radix-ui/react-label';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const labelVariants = cva(\n  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n);\n\nexport type LabelProps = ComponentProps<typeof LabelPrimitive.Root> &\n  VariantProps<typeof labelVariants>;\n\nexport function Label({className, ...props}: LabelProps) {\n  return <LabelPrimitive.Root className={cn(labelVariants(), className)} {...props} />;\n}\n"],"names":["LabelPrimitive","cva","cn","labelVariants","Label","className","props","Root"],"mappings":";AAAA,YAAYA,oBAAoB,wBAAwB;AACxD,SAAQC,GAAG,QAA0B,2BAA2B;AAEhE,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,gBAAgBF,IAC3B,8FACA;AAKF,OAAO,SAASG,MAAM,EAACC,SAAS,EAAE,GAAGC,OAAkB;IACrD,qBAAO,KAACN,eAAeO,IAAI;QAACF,WAAWH,GAAGC,iBAAiBE;QAAa,GAAGC,KAAK;;AAClF"}