brd-ui-kit 0.0.1

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/components/ui/badge/badge.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import { badgeVariants } from './badge.styles';
+import * as React from "react";
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof badgeVariants> {
+    dotPosition?: "left" | "right";
+    classNames?: {
+        dotClassName?: string;
+        labelClassName?: string;
+        className?: string;
+    };
+}
+declare function Badge({ variant, kind, dotPosition, classNames, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge };

package/dist/components/ui/badge/badge.stories.d.ts

@@ -0,0 +1,29 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Badge } from '.';
+declare const meta: {
+    title: string;
+    component: typeof Badge;
+    args: {
+        children: string;
+        variant: "in_progress";
+        kind: "status";
+    };
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        kind: {
+            control: "inline-radio";
+            options: string[];
+        };
+        dotPosition: {
+            control: "inline-radio";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Overview: Story;
+export declare const Playground: Story;

package/dist/components/ui/badge/badge.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const badgeVariants: (props?: ({
+    variant?: "invalid" | "waiting" | "in_progress" | "negotiation" | "documents" | "new" | "followup" | "interested" | "proposal" | "action_required" | "contract" | "completed" | null | undefined;
+    kind?: "status" | "priority" | null | undefined;
+    dotPosition?: "left" | "right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const badgeLabelVariants: (props?: ({
+    kind?: "status" | "priority" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/ui/badge/index.d.ts

@@ -0,0 +1,3 @@
+export { Badge } from './badge';
+export { badgeVariants } from './badge.styles';
+export type { BadgeProps } from './badge';

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

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import { buttonVariants } from './button.styles';
+import * as React from "react";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
+}
+declare const Button: {
+    ({ className, variant, size, asChild, ref, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Button };

package/dist/components/ui/button/button.stories.d.ts

@@ -0,0 +1,29 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ButtonProps } from '.';
+declare const meta: {
+    title: string;
+    component: {
+        ({ className, variant, size, asChild, ref, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    args: {
+        children: string;
+        variant: "primary";
+        size: "md";
+        disabled: false;
+    };
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Overview: Story;
+export declare const Playground: Story;

package/dist/components/ui/button/button.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "secondary" | "secondaryBorder" | "ghost" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,3 @@
+export { Button } from './button';
+export { buttonVariants } from './button.styles';
+export type { ButtonProps } from './button';

package/dist/components/ui/card/card.d.ts

@@ -0,0 +1,43 @@
+import { VariantProps } from 'class-variance-authority';
+import { cardVariants } from './card.styles';
+import * as React from "react";
+declare const Card: {
+    ({ ref, className, variant, disabled, active, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+        ref?: React.RefObject<HTMLDivElement | null>;
+        variant?: VariantProps<typeof cardVariants>["variant"];
+        disabled?: boolean;
+        active?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const CardHeader: {
+    ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+        ref?: React.RefObject<HTMLDivElement | null>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const CardTitle: {
+    ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+        ref?: React.RefObject<HTMLDivElement | null>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const CardDescription: {
+    ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+        ref?: React.RefObject<HTMLDivElement | null>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const CardContent: {
+    ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+        ref?: React.RefObject<HTMLDivElement | null>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const CardFooter: {
+    ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+        ref?: React.RefObject<HTMLDivElement | null>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/components/ui/card/card.stories.d.ts

@@ -0,0 +1,38 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: {
+        ({ ref, className, variant, disabled, active, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+            ref?: React.RefObject<HTMLDivElement | null>;
+            variant?: import('class-variance-authority').VariantProps<typeof import('./card.styles').cardVariants>["variant"];
+            disabled?: boolean;
+            active?: boolean;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    args: {
+        variant: "dark";
+        active: false;
+    };
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        active: {
+            control: "boolean";
+        };
+        disabled: {
+            control: "boolean";
+        };
+    };
+    render: (args: import('react').HTMLAttributes<HTMLDivElement> & {
+        ref?: React.RefObject<HTMLDivElement | null>;
+        variant?: import('class-variance-authority').VariantProps<typeof import('./card.styles').cardVariants>["variant"];
+        disabled?: boolean;
+        active?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;

package/dist/components/ui/card/card.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const cardVariants: (props?: ({
+    variant?: "light" | "dark" | null | undefined;
+    active?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const cardHeaderVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const cardTitleVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const cardDescriptionVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const cardContentVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const cardFooterVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/ui/card/index.d.ts

@@ -0,0 +1 @@
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card';

package/dist/components/ui/checkbox/checkbox.d.ts

@@ -0,0 +1,11 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import * as React from "react";
+type CheckboxRef = React.ComponentRef<typeof CheckboxPrimitive.Root>;
+type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+    ref?: React.Ref<CheckboxRef>;
+};
+declare const Checkbox: {
+    ({ className, ref, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+export { Checkbox };

package/dist/components/ui/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,29 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: {
+        ({ className, ref, ...props }: Omit<import('@radix-ui/react-checkbox').CheckboxProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
+            ref?: React.Ref<HTMLButtonElement>;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string | undefined;
+    };
+    args: {
+        disabled: false;
+        checked: false;
+    };
+    argTypes: {
+        checked: {
+            control: "boolean";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        onCheckedChange: {
+            action: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Overview: Story;
+export declare const Playground: Story;

package/dist/components/ui/checkbox/checkbox.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const checkboxRootClassName: string;
+export declare const checkboxIndicatorClassName = "grid place-content-center text-current";

package/dist/components/ui/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox } from './checkbox';

package/dist/components/ui/combobox/combobox.d.ts

@@ -0,0 +1,31 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { Field } from '../field';
+import * as React from "react";
+declare function Combobox<Value, Multiple extends boolean | undefined = false>({ children, ...props }: ComboboxPrimitive.Root.Props<Value, Multiple>): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxField({ className, label, description, error, children, ...props }: React.ComponentProps<typeof Field> & {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: ComboboxPrimitive.Input.Props & {
+    showTrigger?: boolean;
+    showClear?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxChips({ className, disabled, ...props }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props & {
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxChip({ className, children, showRemove, ...props }: ComboboxPrimitive.Chip.Props & {
+    showRemove?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): import("react/jsx-runtime").JSX.Element;
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxField, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue };

package/dist/components/ui/combobox/combobox.stories.d.ts

@@ -0,0 +1,10 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Combobox } from '.';
+declare const meta: {
+    title: string;
+    component: typeof Combobox;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Overview: Story;

package/dist/components/ui/combobox/combobox.styles.d.ts

@@ -0,0 +1,21 @@
+export declare const comboboxTriggerStyles = "absolute top-1/2 right-3 z-10 -translate-y-1/2\ncursor-pointer focus-visible:border-0 focus-visible:ring-0 focus-visible:outline-none";
+export declare const comboboxTriggerIconVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const comboboxClearButtonStyles = "h-full rounded-none border-0 bg-transparent p-0\npr-1.5 shadow-none hover:bg-transparent hover:shadow-none focus:bg-transparent\nfocus:shadow-none";
+export declare const comboboxClearIconStyles = "pointer-events-none";
+export declare const comboboxInputGroupStyles = "has-[[data-slot=input-group-control]:focus-visible]:border-inp-focus-border\nhas-[[data-slot=combobox-trigger]:focus-visible]:border-inp-focus-border px-0\nhas-[[data-slot=combobox-trigger]:focus-visible]:ring-0\nhas-[[data-slot=combobox-trigger]:focus-visible]:outline-none\nhas-[[data-slot=input-group-control]:focus-visible]:ring-0\nhas-[[data-slot=input-group-control]:focus-visible]:outline-none";
+export declare const comboboxInputAddonStyles = "cursor-pointer";
+export declare const comboboxPositionerStyles = "isolate z-50";
+export declare const comboboxContentStyles = "bg-primary-bg text-primary-text data-open:animate-in\ndata-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0\ndata-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2\ndata-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\ndata-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2\ndata-[side=inline-end]:slide-in-from-left-2 group/combobox-content\nborder-inp-focus-border absolute max-h-63 w-(--anchor-width) min-w-(--anchor-width)\norigin-(--transform-origin) overflow-auto rounded-xl border pl-0\nshadow-[0px_4px_12px_0px_rgba(0,0,0,0.1)] duration-100 *:data-[slot=input-group]:m-1\n*:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8\n*:data-[slot=input-group]:shadow-none";
+export declare const comboboxItemStyles = "text-primary-text data-disabled:text-disabled-text\ndata-highlighted:bg-tertiary-bg relative flex w-full cursor-pointer items-center gap-2\npx-4 py-2 text-sm outline-none select-none data-disabled:pointer-events-none\n[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+export declare const comboboxLabelStyles = "text-secondary-text px-4 py-2 text-xs";
+export declare const comboboxEmptyStyles = "text-secondary-text hidden w-full justify-center py-2\ntext-center text-sm group-data-empty/combobox-content:flex";
+export declare const comboboxSeparatorStyles = "bg-delicate-border -mx-1 my-1 h-px";
+export declare const comboboxChipsVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const comboboxChipStyles = "text-primary-text flex items-center justify-center\npx-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none\nhas-disabled:cursor-not-allowed has-disabled:opacity-50\nhas-data-[slot=combobox-chip-remove]:pr-0";
+export declare const comboboxChipsInputVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/ui/combobox/index.d.ts

@@ -0,0 +1 @@
+export { Combobox, ComboboxField, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, } from './combobox';

package/dist/components/ui/dialog/dialog.d.ts

@@ -0,0 +1,37 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+type DialogOverlayProps = React.ComponentPropsWithRef<typeof DialogPrimitive.Overlay>;
+type DialogContentProps = React.ComponentPropsWithRef<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+};
+type DialogTitleProps = React.ComponentPropsWithRef<typeof DialogPrimitive.Title>;
+type DialogDescriptionProps = React.ComponentPropsWithRef<typeof DialogPrimitive.Description>;
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: {
+    ({ className, ...props }: DialogOverlayProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+declare const DialogContent: {
+    ({ className, children, showCloseButton, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: {
+    ({ className, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+declare const DialogDescription: {
+    ({ className, ...props }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/ui/dialog/dialog.stories.d.ts

@@ -0,0 +1,46 @@
+import { StoryObj } from '@storybook/react-vite';
+type DialogPreviewProps = {
+    title: string;
+    description: string;
+    showCloseButton: boolean;
+    confirmLabel: string;
+    cancelLabel: string;
+    defaultOpen?: boolean;
+};
+declare function DialogPreview({ title, description, showCloseButton, defaultOpen, }: DialogPreviewProps): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof DialogPreview;
+    args: {
+        title: string;
+        description: string;
+        showCloseButton: true;
+        confirmLabel: string;
+        cancelLabel: string;
+        defaultOpen: false;
+    };
+    argTypes: {
+        title: {
+            control: "text";
+        };
+        description: {
+            control: "text";
+        };
+        showCloseButton: {
+            control: "boolean";
+        };
+        confirmLabel: {
+            control: "text";
+        };
+        cancelLabel: {
+            control: "text";
+        };
+        defaultOpen: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Overview: Story;
+export declare const Playground: Story;

package/dist/components/ui/dialog/dialog.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const dialogOverlayClassNames: readonly ["data-open:animate-in data-closed:animate-out data-closed:fade-out-0", "data-open:fade-in-0 bg-primary-inverse-bg/20 duration-100", "fixed inset-0 isolate z-50"];
+export declare const dialogContentClassNames: readonly ["fixed left-[50%] top-[50%] z-50 grid w-full max-w-[45.125rem] translate-x-[-50%]", "translate-y-[-50%] gap-8 bg-primary-bg p-6 shadow-[0px_10px_40px_0px_rgba(0,0,0,0.15)] duration-200", "rounded-[8px]", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0", "data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]"];
+export declare const dialogCloseClassNames: readonly ["absolute cursor-pointer right-6 top-7 inline-flex size-5 items-center justify-center rounded-sm text-secondary-text", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inp-focus-border", "disabled:pointer-events-none"];
+export declare const dialogHeaderClassNames: readonly ["flex flex-col gap-1.5 pr-10 text-left"];
+export declare const dialogFooterClassNames: readonly ["flex flex-col-reverse sm:flex-row sm:justify-end gap-4 [&>*]:flex-1"];
+export declare const dialogTitleClassNames: readonly ["relative pb-3 tracking-normal text-lg font-medium text-primary-text", "after:pointer-events-none after:absolute after:bottom-0  after:h-px after:-left-6 after:-right-16 after:bg-delicate-border"];
+export declare const dialogDescriptionClassNames: readonly ["tracking-normal text-sm font-normal text-secondary-text"];

package/dist/components/ui/dialog/index.d.ts

@@ -0,0 +1 @@
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from './dialog';

package/dist/components/ui/field/field.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from 'class-variance-authority';
+import { Label } from '../label';
+import { fieldVariants } from './field.styles';
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react/jsx-runtime").JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): import("react/jsx-runtime").JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react/jsx-runtime").JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): import("react/jsx-runtime").JSX.Element | null;
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/components/ui/field/field.stories.d.ts

@@ -0,0 +1,45 @@
+import { StoryObj } from '@storybook/react-vite';
+type FieldPreviewState = "default" | "hover" | "focus" | "filled" | "disabled" | "error" | "success";
+type FieldStoryPreviewProps = {
+    label: string;
+    description: string;
+    placeholder: string;
+    value: string;
+    state: FieldPreviewState;
+    interactive?: boolean;
+    onValueChange?: (value: string) => void;
+};
+declare function FieldStoryPreview({ label, description, placeholder, value, state, interactive, onValueChange, }: FieldStoryPreviewProps): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof FieldStoryPreview;
+    args: {
+        label: string;
+        description: string;
+        placeholder: string;
+        value: string;
+        state: "default";
+    };
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        description: {
+            control: "text";
+        };
+        placeholder: {
+            control: "text";
+        };
+        value: {
+            control: "text";
+        };
+        state: {
+            control: "select";
+            options: ("error" | "focus" | "default" | "disabled" | "hover" | "filled" | "success")[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Overview: Story;
+export declare const Playground: Story;

package/dist/components/ui/field/field.styles.d.ts

@@ -0,0 +1,15 @@
+export declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const fieldSetClassName = "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3";
+export declare const fieldLegendClassName = "mb-3 font-medium data-[variant=legend]:text-base data-[variant=label]:text-sm";
+export declare const fieldGroupClassName = "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4";
+export declare const fieldContentClassName = "group/field-content flex flex-1 flex-col gap-2";
+export declare const fieldLabelClassName: string;
+export declare const fieldTitleClassName: string;
+export declare const fieldDescriptionClassName: string;
+export declare const fieldSeparatorClassName = "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2";
+export declare const fieldSeparatorLineClassName = "absolute inset-0 top-1/2";
+export declare const fieldSeparatorContentClassName = "bg-background text-muted-foreground relative mx-auto block w-fit px-2";
+export declare const fieldErrorsListClassName = "ml-4 flex list-disc flex-col gap-1";
+export declare const fieldErrorClassName = "text-error-text text-xs leading-[140%] font-normal tracking-normal";

package/dist/components/ui/field/index.d.ts

@@ -0,0 +1 @@
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from './field';