@shipfox/react-ui 0.0.1 → 0.1.0

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.0.1 build /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.1.0 build /runnertmp/_work/tooling/tooling/libs/react/ui
 > swc
 
-Successfully compiled: 43 files with swc (174.16ms)
+Successfully compiled: 45 files with swc (307.49ms)

package/.turbo/turbo-check.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.0.1 check /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.1.0 check /runnertmp/_work/tooling/tooling/libs/react/ui
 > biome --fix
 
-Checked 59 files in 269ms. No fixes applied.
+Checked 61 files in 482ms. No fixes applied.

package/.turbo/turbo-type.log

@@ -1,5 +1,5 @@
  WARN  Issue while reading "/runnertmp/_work/tooling/tooling/.npmrc". Failed to replace env in config: ${NPM_ACCESS_TOKEN}
 
-> @shipfox/react-ui@0.0.1 type /runnertmp/_work/tooling/tooling/libs/react/ui
+> @shipfox/react-ui@0.1.0 type /runnertmp/_work/tooling/tooling/libs/react/ui
 > tsc-emit
 

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @shipfox/react-ui
 
+## 0.1.0
+
+### Minor Changes
+
+- cd386f2: Add Input component
+
+### Patch Changes
+
+- 674ecbb: Add README for all packages
+
 ## 0.0.1
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,21 @@
+# Shipfox Design System
+
+The Shipfox Design System is the core of the [Shipfox](https://www.shipfox.io/) UI grammar. It contains all the React components which are the building blocks of our front-end projects.
+
+## Installation
+
+### Installation
+
+```bash
+pnpm add @shipfox/react-ui
+# or
+yarn add @shipfox/react-ui
+# or
+npm install @shipfox/react-ui
+```
+
+## Storybook
+
+The storybook is [publicly accessible online](react-ui.shipfox.vercel.app).
+
+You can also launch it locally by running `pnpm storybook` from within this package's directory.

package/dist/components/input.d.ts

@@ -0,0 +1,10 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+export declare const inputVariants: (props?: ({
+    variant?: "base" | "component" | null | undefined;
+    size?: "base" | "small" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type InputProps = Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants>;
+export declare function Input({ className, type, variant, size, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../utils/cn.js';
+export const inputVariants = cva('', {
+    variants: {
+        variant: {
+            base: 'bg-background-field-base',
+            component: 'bg-background-field-component'
+        },
+        size: {
+            base: 'py-6',
+            small: 'py-4'
+        }
+    },
+    defaultVariants: {
+        variant: 'base',
+        size: 'base'
+    }
+});
+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({
+            variant,
+            size
+        }), className),
+        ...props
+    });
+}
+
+//# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/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-border-base 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,yLACA,mCACA,6FACA,uEACA,mKACA,uDACA,oCACAC,cAAc;YAACE;YAASG;QAAI,IAC5BI;QAED,GAAGE,KAAK;;AAGf"}

package/dist/components/input.stories.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Code, Header } from '../components/typography/index.js';
+import { Input } from './input.js';
+const typeOptions = [
+    'text',
+    'email',
+    'password',
+    'number',
+    'search',
+    'url',
+    'tel',
+    'date',
+    'time',
+    'datetime-local',
+    'month',
+    'week',
+    'color',
+    'file'
+];
+const meta = {
+    title: 'Components/Input',
+    component: Input,
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        type: {
+            control: 'select',
+            options: typeOptions
+        },
+        placeholder: {
+            control: 'text'
+        },
+        disabled: {
+            control: 'boolean'
+        },
+        'aria-invalid': {
+            control: 'boolean'
+        }
+    },
+    args: {
+        type: 'text',
+        placeholder: 'Type something…',
+        disabled: false,
+        'aria-invalid': false
+    }
+};
+export default meta;
+export const Default = {};
+const variants = [
+    'base',
+    'component'
+];
+const sizes = [
+    'base',
+    'small'
+];
+export const States = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "flex flex-col gap-32",
+            children: variants.map((variant)=>sizes.map((size)=>/*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col gap-16",
+                        children: [
+                            /*#__PURE__*/ _jsxs(Header, {
+                                variant: "h3",
+                                children: [
+                                    variant,
+                                    " ",
+                                    size
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Code, {
+                                        variant: "label",
+                                        className: "text-foreground-neutral-subtle",
+                                        children: "Default"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Input, {
+                                        ...args,
+                                        variant: variant,
+                                        size: size
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Code, {
+                                        variant: "label",
+                                        className: "text-foreground-neutral-subtle",
+                                        children: "Hover"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Input, {
+                                        ...args,
+                                        className: "hover",
+                                        variant: variant,
+                                        size: size
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Code, {
+                                        variant: "label",
+                                        className: "text-foreground-neutral-subtle",
+                                        children: "Active"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Input, {
+                                        ...args,
+                                        className: "active",
+                                        defaultValue: "The quick brown fox jumps over the lazy dog",
+                                        variant: variant,
+                                        size: size
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Code, {
+                                        variant: "label",
+                                        className: "text-foreground-neutral-subtle",
+                                        children: "Focus"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Input, {
+                                        ...args,
+                                        className: "focus",
+                                        variant: variant,
+                                        size: size
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Code, {
+                                        variant: "label",
+                                        className: "text-foreground-neutral-subtle",
+                                        children: "Disabled"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Input, {
+                                        ...args,
+                                        disabled: true,
+                                        variant: variant,
+                                        size: size
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Code, {
+                                        variant: "label",
+                                        className: "text-foreground-neutral-subtle",
+                                        children: "Invalid"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Input, {
+                                        ...args,
+                                        "aria-invalid": true,
+                                        variant: variant,
+                                        size: size
+                                    })
+                                ]
+                            })
+                        ]
+                    }, variant + size)))
+        })
+};
+States.parameters = {
+    pseudo: {
+        hover: '.hover',
+        active: '.active',
+        focusVisible: '.focus'
+    }
+};
+export const Types = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "flex flex-col gap-32",
+            children: typeOptions.map((t)=>/*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: t
+                        }),
+                        /*#__PURE__*/ _jsx(Input, {
+                            ...args,
+                            type: t
+                        })
+                    ]
+                }, t))
+        })
+};
+
+//# sourceMappingURL=input.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/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/index.css

@@ -421,6 +421,12 @@
   --alpha-400: var(--color-alpha-white-24);
 
   /* Shadow */
+  --shadow-border-base:
+    0 -1px 0 0 var(--color-alpha-white-6), 0 0 0 1px var(--color-alpha-white-6), 0 0 0 1px
+    var(--color-neutral-800), 0 0 1px 1.5px var(--color-alpha-black-24), 0 2px 2px 0
+    var(--color-alpha-black-24);
+  --shadow-border-interactive-with-active: 0 0 0 1px #ff8b16, 0 0 0 4px rgba(255, 49, 0, 0.25);
+  --shadow-border-error: 0 0 0 1px #ff1f5a, 0 0 0 3px rgba(246, 0, 67, 0.25);
   --shadow-button-inverted:
     0 -1px 0 0 var(--color-alpha-white-12), 0 0 0 1px var(--color-alpha-white-10), 0 0 0 1px
     var(--color-neutral-600), 0 0 1px 1.5px var(--color-alpha-black-24), 0 2px 2px 0
@@ -756,6 +762,9 @@
   --font-display: "Inter", sans-serif;
 
   /* Shadow */
+  --shadow-border-base: var(--shadow-border-base);
+  --shadow-border-interactive-with-active: var(--shadow-border-interactive-with-active);
+  --shadow-border-error: var(--shadow-border-error);
   --shadow-button-inverted: var(--shadow-button-inverted);
   --shadow-button-inverted-focus: var(--shadow-button-inverted-focus);
   --shadow-button-neutral: var(--shadow-button-neutral);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/react-ui",
   "license": "MIT",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -56,12 +56,12 @@
     "storybook-addon-pseudo-states": "^9.1.8",
     "tailwindcss": "^4.1.13",
     "tw-animate-css": "^1.4.0",
-    "@shipfox/biome": "1.2.1",
-    "@shipfox/swc": "1.2.0",
-    "@shipfox/ts-config": "1.3.4",
-    "@shipfox/typescript": "1.1.1",
-    "@shipfox/vite": "1.2.0",
-    "@shipfox/vitest": "1.1.1"
+    "@shipfox/biome": "1.2.2",
+    "@shipfox/swc": "1.2.1",
+    "@shipfox/ts-config": "1.3.5",
+    "@shipfox/typescript": "1.1.2",
+    "@shipfox/vite": "1.2.1",
+    "@shipfox/vitest": "1.1.2"
   },
   "scripts": {
     "build": "swc",

package/src/components/input.stories.tsx

@@ -0,0 +1,138 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code, Header} from 'components/typography';
+import {Input} from './input';
+
+const typeOptions = [
+  'text',
+  'email',
+  'password',
+  'number',
+  'search',
+  'url',
+  'tel',
+  'date',
+  'time',
+  'datetime-local',
+  'month',
+  'week',
+  'color',
+  'file',
+] as const;
+
+const meta = {
+  title: 'Components/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: typeOptions,
+    },
+    placeholder: {control: 'text'},
+    disabled: {control: 'boolean'},
+    'aria-invalid': {control: 'boolean'},
+  },
+  args: {
+    type: 'text',
+    placeholder: 'Type something…',
+    disabled: false,
+    'aria-invalid': false,
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+const variants = ['base', 'component'] as const;
+const sizes = ['base', 'small'] as const;
+
+export const States: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-32">
+      {variants.map((variant) =>
+        sizes.map((size) => (
+          <div key={variant + size} className="flex flex-col gap-16">
+            <Header variant="h3">
+              {variant} {size}
+            </Header>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Default
+              </Code>
+
+              <Input {...args} variant={variant} size={size} />
+            </div>
+
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Hover
+              </Code>
+
+              <Input {...args} className="hover" variant={variant} size={size} />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Active
+              </Code>
+
+              <Input
+                {...args}
+                className="active"
+                defaultValue="The quick brown fox jumps over the lazy dog"
+                variant={variant}
+                size={size}
+              />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Focus
+              </Code>
+
+              <Input {...args} className="focus" variant={variant} size={size} />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Disabled
+              </Code>
+
+              <Input {...args} disabled variant={variant} size={size} />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Invalid
+              </Code>
+
+              <Input {...args} aria-invalid variant={variant} size={size} />
+            </div>
+          </div>
+        )),
+      )}
+    </div>
+  ),
+};
+
+States.parameters = {
+  pseudo: {
+    hover: '.hover',
+    active: '.active',
+    focusVisible: '.focus',
+  },
+};
+
+export const Types: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-32">
+      {typeOptions.map((t) => (
+        <div key={t} className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            {t}
+          </Code>
+          <Input {...args} type={t} />
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/components/input.tsx

@@ -0,0 +1,43 @@
+import {cva, type VariantProps} from 'class-variance-authority';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export const inputVariants = cva('', {
+  variants: {
+    variant: {
+      base: 'bg-background-field-base',
+      component: 'bg-background-field-component',
+    },
+    size: {
+      base: 'py-6',
+      small: 'py-4',
+    },
+  },
+  defaultVariants: {
+    variant: 'base',
+    size: 'base',
+  },
+});
+
+type InputProps = Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants>;
+
+export function Input({className, type, variant, size, ...props}: InputProps) {
+  return (
+    <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({variant, size}),
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/utils/date.test.ts

@@ -1,4 +1,4 @@
-import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {afterEach, beforeEach, describe, expect, it, vi} from '@shipfox/vitest/vi';
 import {
   generateDurationShortcut,
   intervalToNowFromDuration,

package/src/utils/format/date.test.ts

@@ -1,3 +1,4 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from '@shipfox/vitest/vi';
 import {
   addDays,
   addYears,
@@ -8,7 +9,6 @@ import {
   subHours,
   subYears,
 } from 'date-fns';
-import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
 import {formatDateTimeRange} from './date';
 
 describe('Format - Date', () => {

package/src/utils/format/duration.test.ts

@@ -1,4 +1,4 @@
-import {describe, expect, it} from 'vitest';
+import {describe, expect, it} from '@shipfox/vitest/vi';
 import {formatDuration} from './duration';
 
 describe('formatDuration', () => {

package/src/utils/format/number.test.ts

@@ -1,4 +1,4 @@
-import {describe, expect, it} from 'vitest';
+import {describe, expect, it} from '@shipfox/vitest/vi';
 import {formatNumber, formatNumberCompact, formatPercent} from './number';
 
 describe('Format - Number', () => {

package/test/setup.ts

@@ -1,6 +1,6 @@
+import {afterEach, expect} from '@shipfox/vitest/vi';
 import * as extensions from '@testing-library/jest-dom/matchers';
 import {cleanup} from '@testing-library/react';
-import {afterEach, expect} from 'vitest';
 
 expect.extend(extensions);