@kimdw-rtk/ui 0.0.20 → 0.0.21

package/dist/components/Table/TableHead.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.css.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHead.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAMpB,CAAC"}

package/dist/components/Table/TableHead.css.js

@@ -0,0 +1,11 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+
+const tableHead = styleWithLayer({
+    padding: '0.5em 0.625em',
+    color: `rgb(${theme.color['accent-foreground']})`,
+    fontSize: '0.9375em',
+    fontWeight: '500',
+});
+
+export { tableHead };

package/dist/components/Table/TableHead.d.ts

@@ -0,0 +1,9 @@
+import { type CSSProperties } from 'react';
+import type { UIComponent } from '@/types';
+interface TableHeadProps extends UIComponent<'th'> {
+    width?: CSSProperties['width'];
+    textAlign?: CSSProperties['textAlign'];
+}
+export declare const TableHead: ({ width, textAlign, style, className, sx: propSx, ...props }: TableHeadProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TableHead.d.ts.map

package/dist/components/Table/TableHead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHead.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,UAAU,cAAe,SAAQ,WAAW,CAAC,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,SAAS,GAAI,8DAOvB,cAAc,4CAQhB,CAAC"}

package/dist/components/Table/TableHead.js

@@ -0,0 +1,10 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { tableHead } from './TableHead.css.js';
+import { sx } from '../../styles/sx.js';
+
+const TableHead = ({ width, textAlign, style, className, sx: propSx, ...props }) => {
+    return (jsxRuntimeExports.jsx("th", { style: { ...style, width, textAlign }, className: clsx(tableHead, className, sx(propSx)), ...props }));
+};
+
+export { TableHead };

package/dist/components/Table/TableHeader.d.ts

@@ -0,0 +1,5 @@
+import type { UIComponent } from '@/types';
+type TableHeaderProps = UIComponent<'thead'>;
+export declare const TableHeader: ({ className, sx: propSx, ...props }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TableHeader.d.ts.map

package/dist/components/Table/TableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,KAAK,gBAAgB,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE7C,eAAO,MAAM,WAAW,GAAI,qCAIzB,gBAAgB,4CAElB,CAAC"}

package/dist/components/Table/TableHeader.js

@@ -0,0 +1,9 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { sx } from '../../styles/sx.js';
+
+const TableHeader = ({ className, sx: propSx, ...props }) => {
+    return jsxRuntimeExports.jsx("thead", { className: clsx(className, sx(propSx)), ...props });
+};
+
+export { TableHeader };

package/dist/components/Table/TableRow.css.d.ts

@@ -0,0 +1,2 @@
+export declare const interactive: string;
+//# sourceMappingURL=TableRow.css.d.ts.map

package/dist/components/Table/TableRow.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.css.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableRow.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,QAAqB,CAAC"}

package/dist/components/Table/TableRow.css.js

@@ -0,0 +1,5 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+
+const interactive = styleWithLayer({});
+
+export { interactive };

package/dist/components/Table/TableRow.d.ts

@@ -0,0 +1,7 @@
+import type { UIComponent } from '@/types';
+interface TableRowProps extends UIComponent<'tr'> {
+    isInteractive?: boolean;
+}
+export declare const TableRow: ({ isInteractive, className, sx: propSx, ...props }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TableRow.d.ts.map

package/dist/components/Table/TableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableRow.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,UAAU,aAAc,SAAQ,WAAW,CAAC,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,GAAI,oDAKtB,aAAa,4CAOf,CAAC"}

package/dist/components/Table/TableRow.js

@@ -0,0 +1,10 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { interactive } from './TableRow.css.js';
+import { sx } from '../../styles/sx.js';
+
+const TableRow = ({ isInteractive = false, className, sx: propSx, ...props }) => {
+    return (jsxRuntimeExports.jsx("tr", { className: clsx(isInteractive && interactive, className, sx(propSx)), ...props }));
+};
+
+export { TableRow };

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

@@ -0,0 +1,7 @@
+export * from './Table';
+export * from './TableBody';
+export * from './TableCell';
+export * from './TableHead';
+export * from './TableHeader';
+export * from './TableRow';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC"}

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,7 @@
+import type { UIComponent } from '@/types';
+interface TabsProps extends UIComponent<'div'> {
+    defaultValue?: number | string;
+}
+export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,UAAU,SAAU,SAAQ,WAAW,CAAC,KAAK,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,IAAI,mHAiBhB,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,13 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef, useReducer } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { tabsReducer, TabsContext } from './TabsProvider.js';
+import { sx } from '../../styles/sx.js';
+
+const Tabs = forwardRef(({ children, defaultValue, className, sx: propSx, ...props }, ref) => {
+    const [value, setValue] = useReducer(tabsReducer, defaultValue);
+    return (jsxRuntimeExports.jsx(TabsContext.Provider, { value: { value, setValue }, children: jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(className, sx(propSx)), style: { width: '100%' }, ...props, children: children }) }));
+});
+Tabs.displayName = 'Tabs';
+
+export { Tabs };

package/dist/components/Tabs/Tabs.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tabs.spec.d.ts.map

package/dist/components/Tabs/Tabs.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.spec.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.spec.tsx"],"names":[],"mappings":""}

package/dist/components/Tabs/TabsContent.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { UIComponent } from '@/types';
+interface TabsContentProps extends UIComponent<'div'> {
+    children: ReactNode;
+    value: string | number;
+}
+export declare const TabsContent: import("react").ForwardRefExoticComponent<Omit<TabsContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=TabsContent.d.ts.map

package/dist/components/Tabs/TabsContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContent.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,UAAU,gBAAiB,SAAQ,WAAW,CAAC,KAAK,CAAC;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,0HAcvB,CAAC"}

package/dist/components/Tabs/TabsContent.js

@@ -0,0 +1,19 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef, useContext } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { TabsContext } from './TabsProvider.js';
+import { sx } from '../../styles/sx.js';
+
+const TabsContent = forwardRef(({ value, className, sx: propSx, ...props }, ref) => {
+    const tabsContext = useContext(TabsContext);
+    if (tabsContext === undefined) {
+        throw new Error('TabsContext must be used within a Tabs.');
+    }
+    if (tabsContext.value !== value) {
+        return null;
+    }
+    return jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(className, sx(propSx)), ...props });
+});
+TabsContent.displayName = 'TabsContent';
+
+export { TabsContent };

package/dist/components/Tabs/TabsList.css.d.ts

@@ -0,0 +1,2 @@
+export declare const container: string;
+//# sourceMappingURL=TabsList.css.d.ts.map

package/dist/components/Tabs/TabsList.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsList.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAOpB,CAAC"}

package/dist/components/Tabs/TabsList.css.js

@@ -0,0 +1,11 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+
+const container = styleWithLayer({
+    display: 'flex',
+    height: '2.5em',
+    boxShadow: `inset 0 -0.125em 0 rgb(${theme.color.muted})`,
+    backgroundColor: `rgb(${theme.color.background})`,
+});
+
+export { container };

package/dist/components/Tabs/TabsList.d.ts

@@ -0,0 +1,5 @@
+import type { UIComponent } from '@/types';
+type TabsListProps = UIComponent<'div'>;
+export declare const TabsList: import("react").ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=TabsList.d.ts.map

package/dist/components/Tabs/TabsList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsList.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,KAAK,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAExC,eAAO,MAAM,QAAQ,uHAYpB,CAAC"}

package/dist/components/Tabs/TabsList.js

@@ -0,0 +1,12 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { container } from './TabsList.css.js';
+import { sx } from '../../styles/sx.js';
+
+const TabsList = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(className, container, sx(propSx)), ...props, children: children }));
+});
+TabsList.displayName = 'TabsList';
+
+export { TabsList };

package/dist/components/Tabs/TabsProvider.d.ts

@@ -0,0 +1,9 @@
+import { type Dispatch } from 'react';
+interface TabsContext {
+    value: number | string | undefined;
+    setValue: Dispatch<number | string>;
+}
+export declare const TabsContext: import("react").Context<TabsContext | undefined>;
+export declare const tabsReducer: (_: TabsContext["value"], value: TabsContext["value"]) => string | number | undefined;
+export {};
+//# sourceMappingURL=TabsProvider.d.ts.map

package/dist/components/Tabs/TabsProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;CACrC;AAED,eAAO,MAAM,WAAW,kDAAoD,CAAC;AAE7E,eAAO,MAAM,WAAW,GACtB,GAAG,WAAW,CAAC,OAAO,CAAC,EACvB,OAAO,WAAW,CAAC,OAAO,CAAC,gCAG5B,CAAC"}

package/dist/components/Tabs/TabsProvider.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+const TabsContext = createContext(undefined);
+const tabsReducer = (_, value) => {
+    return value;
+};
+
+export { TabsContext, tabsReducer };

package/dist/components/Tabs/TabsTrigger.css.d.ts

@@ -0,0 +1,13 @@
+export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+    isSelected: {
+        true: {
+            borderBottomColor: `rgb(var(--${string}))`;
+            color: `rgb(var(--${string}))`;
+        };
+        false: {
+            borderBottomColor: "transparent";
+            color: `rgb(var(--${string}))`;
+        };
+    };
+}>;
+//# sourceMappingURL=TabsTrigger.css.d.ts.map

package/dist/components/Tabs/TabsTrigger.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsTrigger.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsTrigger.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;EAkCpB,CAAC"}

package/dist/components/Tabs/TabsTrigger.css.js

@@ -0,0 +1,32 @@
+import { recipeWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+
+const container = recipeWithLayer({
+    base: {
+        overflow: 'hidden',
+        height: '100%',
+        padding: '0 0.75em',
+        border: '0',
+        borderBottom: `0.125rem solid`,
+        backgroundColor: 'transparent',
+        fontSize: '1em',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        transition: 'border-bottom-color 0.15s ease, color 0.15s ease',
+        cursor: 'pointer',
+    },
+    variants: {
+        isSelected: {
+            true: {
+                borderBottomColor: `rgb(${theme.color.foreground})`,
+                color: `rgb(${theme.color.foreground})`,
+            },
+            false: {
+                borderBottomColor: 'transparent',
+                color: `rgb(${theme.color['muted-foreground']})`,
+            },
+        },
+    },
+});
+
+export { container };

package/dist/components/Tabs/TabsTrigger.d.ts

@@ -0,0 +1,7 @@
+import type { UIComponent } from '@/types';
+interface TabsTriggerProps extends UIComponent<'button'> {
+    value: number | string;
+}
+export declare const TabsTrigger: import("react").ForwardRefExoticComponent<Omit<TabsTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=TabsTrigger.d.ts.map

package/dist/components/Tabs/TabsTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAK3C,UAAU,gBAAiB,SAAQ,WAAW,CAAC,QAAQ,CAAC;IACtD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,6HAyBvB,CAAC"}

package/dist/components/Tabs/TabsTrigger.js

@@ -0,0 +1,21 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef, useContext } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { TabsContext } from './TabsProvider.js';
+import { container } from './TabsTrigger.css.js';
+import { sx } from '../../styles/sx.js';
+
+const TabsTrigger = forwardRef(({ children, value, className, sx: propSx, ...props }, ref) => {
+    const tabsContext = useContext(TabsContext);
+    if (tabsContext === undefined) {
+        throw new Error('TabsTrigger must be used within a Tabs.');
+    }
+    const isSelected = tabsContext.value === value;
+    const handleClick = () => {
+        tabsContext.setValue(value);
+    };
+    return (jsxRuntimeExports.jsx("button", { ref: ref, className: clsx(className, container({ isSelected }), sx(propSx)), onClick: handleClick, ...props, children: children }));
+});
+TabsTrigger.displayName = 'TabsTrigger';
+
+export { TabsTrigger };

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

@@ -0,0 +1,5 @@
+export * from './Tabs';
+export * from './TabsContent';
+export * from './TabsList';
+export * from './TabsTrigger';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC"}

package/dist/components/TextField/TextField.css.d.ts

@@ -0,0 +1,49 @@
+export declare const textField: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        slate: string;
+        gray: string;
+        zinc: string;
+        neutral: string;
+        stone: string;
+        primary: string;
+        secondary: string;
+        muted: string;
+        accent: string;
+        card: string;
+        danger: string;
+        warning: string;
+        success: string;
+    };
+    size: {
+        sm: {
+            borderRadius: `var(--${string})`;
+            fontSize: "0.875em";
+        };
+        md: {
+            borderRadius: `var(--${string})`;
+            fontSize: "1em";
+        };
+        lg: {
+            borderRadius: `var(--${string})`;
+            fontSize: "1.125em";
+        };
+    };
+}>;
+//# sourceMappingURL=TextField.css.d.ts.map

package/dist/components/TextField/TextField.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.css.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.css.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8CpB,CAAC"}

package/dist/components/TextField/TextField.css.js

@@ -0,0 +1,62 @@
+import { createVar } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import { recipeWithLayer, styleWithLayer } from '../../utils/styleUtils.css.js';
+import { SCALE_COLOR } from '../../tokens/scale/color.js';
+import { theme } from '../../themes/theme.css.js';
+import { semanticColor } from '../../tokens/semantic/color.js';
+
+const backgroundVar = createVar();
+const semanticColors = semanticColor.reduce((prev, color) => ({
+    ...prev,
+    [color]: styleWithLayer({
+        vars: {
+            [backgroundVar]: theme.color[color],
+        },
+    }),
+}), {});
+const scaleColors = SCALE_COLOR.reduce((prev, value) => ({
+    ...prev,
+    [value]: styleWithLayer({
+        vars: {
+            [backgroundVar]: theme.color[value][500],
+        },
+    }),
+}), {});
+const textField = recipeWithLayer({
+    base: {
+        padding: '0.75em 0.5em',
+        border: `1px solid`,
+        borderColor: ` rgb(${theme.color.border})`,
+        backgroundColor: `rgb(${theme.color.background})`,
+        color: `rgb(${theme.color.foreground})`,
+        transition: 'border-color 0.15s ease, color 0.15s ease',
+        outline: 'none',
+        ':focus': {
+            borderColor: `rgb(${backgroundVar})`,
+        },
+        ':disabled': {
+            color: `rgb(${theme.color['muted-foreground']})`,
+        },
+    },
+    variants: {
+        color: {
+            ...semanticColors,
+            ...scaleColors,
+        },
+        size: {
+            sm: {
+                borderRadius: theme.borderRadius,
+                fontSize: '0.875em',
+            },
+            md: {
+                borderRadius: theme.borderRadius,
+                fontSize: '1em',
+            },
+            lg: {
+                borderRadius: theme.borderRadius,
+                fontSize: '1.125em',
+            },
+        },
+    },
+});
+
+export { textField };

package/dist/components/TextField/TextField.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TextField.spec.d.ts.map

package/dist/components/TextField/TextField.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.spec.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.spec.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,8 @@
+import type { UIComponent } from '@/types';
+import * as s from './TextField.css';
+interface TextFieldProps extends UIComponent<'input', typeof s.textField> {
+    type?: React.HTMLInputTypeAttribute;
+}
+export declare const TextField: import("react").ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { s as textFieldCss };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,iBAAiB,CAAC;AAErC,UAAU,cAAe,SAAQ,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC;IACvE,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;CACrC;AAED,eAAO,MAAM,SAAS,0HAqBrB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,YAAY,EAAE,CAAC"}

package/dist/components/TextField/index.js

@@ -0,0 +1,14 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { textField } from './TextField.css.js';
+import * as TextField_css from './TextField.css.js';
+export { TextField_css as textFieldCss };
+import { sx } from '../../styles/sx.js';
+
+const TextField = forwardRef(({ className, type = 'text', size = 'md', color = 'primary', sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("input", { ref: ref, type: type, className: clsx(className, textField({ size, color }), sx(propSx)), ...props }));
+});
+TextField.displayName = 'TextField';
+
+export { TextField };

package/dist/components/Toast/Toast.css.d.ts

@@ -0,0 +1,26 @@
+export declare const progress: import("@vanilla-extract/recipes").RuntimeFn<{
+    animation: {
+        true: {
+            animationName: string;
+            animationTimingFunction: "linear";
+            animationIterationCount: "1";
+            animationFillMode: "forwards";
+        };
+        false: {
+            display: "none";
+        };
+    };
+}>;
+export declare const toast: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        primary: string;
+        secondary: string;
+        muted: string;
+        accent: string;
+        card: string;
+        danger: string;
+        warning: string;
+        success: string;
+    };
+}>;
+//# sourceMappingURL=Toast.css.d.ts.map

package/dist/components/Toast/Toast.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.css.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.css.ts"],"names":[],"mappings":"AA+BA,eAAO,MAAM,QAAQ;;;;;;;;;;;;EAyBnB,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;EAoBhB,CAAC"}

package/dist/components/Toast/Toast.css.js

@@ -0,0 +1,65 @@
+import { createVar, keyframes } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import { recipeWithLayer, styleWithLayer } from '../../utils/styleUtils.css.js';
+import { semanticColor } from '../../tokens/semantic/color.js';
+import { theme } from '../../themes/theme.css.js';
+
+const colorVar = createVar();
+const foregroundVar = createVar();
+const semanticColors = semanticColor.reduce((prev, color) => ({
+    ...prev,
+    [color]: styleWithLayer({
+        vars: {
+            [colorVar]: theme.color[color],
+            [foregroundVar]: theme.color[`${color}-foreground`],
+        },
+    }),
+}), {});
+const fill = keyframes({
+    '0%': {
+        transform: 'scaleX(0)',
+    },
+    '100%': {
+        transform: 'scaleX(1)',
+    },
+});
+const progress = recipeWithLayer({
+    base: {
+        position: 'absolute',
+        inset: '0',
+        width: '100%',
+        backgroundColor: `rgba(${foregroundVar}, 0.25)`,
+        transformOrigin: '0 0',
+    },
+    variants: {
+        animation: {
+            true: {
+                animationName: fill,
+                animationTimingFunction: 'linear',
+                animationIterationCount: '1',
+                animationFillMode: 'forwards',
+            },
+            false: {
+                display: 'none',
+            },
+        },
+    },
+});
+const toast = recipeWithLayer({
+    base: {
+        position: 'relative',
+        overflow: 'hidden',
+        padding: '0.875em',
+        backgroundColor: `rgb(${colorVar})`,
+        color: `rgb(${foregroundVar})`,
+        whiteSpace: 'nowrap',
+        wordBreak: 'break-all',
+        cursor: 'pointer',
+    },
+    variants: {
+        color: {
+            ...semanticColors,
+        },
+    },
+});
+
+export { progress, toast };

package/dist/components/Toast/Toast.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Toast.spec.d.ts.map

package/dist/components/Toast/Toast.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.spec.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.spec.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,8 @@
+import type { UIComponent } from '@/types';
+import * as s from './Toast.css';
+interface ToastProps extends UIComponent<'div', typeof s.toast> {
+    duration?: number;
+}
+export declare const Toast: import("react").ForwardRefExoticComponent<Omit<ToastProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { s as toastCss };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,aAAa,CAAC;AAEjC,UAAU,UAAW,SAAQ,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,oHA8BjB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,QAAQ,EAAE,CAAC"}