@eml-payments/ui-kit 0.1.7 → 0.1.8

package/README.md

@@ -1,3 +1,149 @@
-# apprepo.template
-
-Template for new app repos
+
+# @eml-payments/ui-kit
+
+A fully-typed, design token-driven React UI Kit for modern web apps, powered by TailwindCSS, HeadlessUI, and Tanstack Table.  
+Built for fast integration, deep customization, and a great developer experience.
+
+---
+
+## ✨ Features
+
+- **Full TypeScript support** — all types exported
+- **Design token based theming** (via context provider)
+- **Easy theme override** (colors, radius, fonts, etc)
+- **Composable, accessible components** (Button, Input, Table, etc)
+- **Powered by TailwindCSS, HeadlessUI, Tanstack Table**
+- **Ready-to-use Storybook with live playground**
+- **Clean API, tree-shakable, zero CSS conflicts**
+
+---
+
+## 🚀 Installation
+
+```sh
+npm install @eml-payments/ui-kit
+```
+
+> **Note:**  
+> You must also have `react` and `react-dom` (v18+), and TailwindCSS set up in your app.
+
+---
+
+## 🎨 Usage
+
+1. **Import the CSS for styles and tokens:**
+
+```tsx
+import "@eml-payments/ui-kit/style.css";
+```
+
+2. **Wrap your app in the `UIKitProvider` (optional: pass your design tokens):**
+
+```tsx
+import React from "react";
+import { UIKitProvider } from "@eml-payments/ui-kit";
+
+const theme = {
+  colors: {
+    primary: "#0A5FFF",
+    success: "#16c784",
+    error: "#d7263d",
+    // ...override any design token here
+  },
+  radius: "10px",
+  fontFamily: "Inter, sans-serif"
+};
+
+export default function App() {
+  return (
+    <UIKitProvider config={theme}>
+      {/* Your app code */}
+    </UIKitProvider>
+  );
+}
+```
+
+3. **Use components anywhere under the provider:**
+
+```tsx
+import { Button, Input, Table } from "@eml-payments/ui-kit";
+
+<Button variant="primary">Primary Button</Button>
+<Input label="Email" placeholder="user@email.com" />
+```
+
+---
+
+## 🛠️ Theming & Configuration
+
+You can fully override the theme tokens using the `config` prop:
+
+```ts
+type UIKitConfig = {
+  colors?: {
+    primary?: string;
+    secondary?: string;
+    accent?: string;
+    success?: string;
+    warning?: string;
+    error?: string;
+    [key: string]: string | undefined;
+  };
+  radius?: string; // e.g. "8px"
+  fontFamily?: string;
+  // ...extend as needed
+};
+```
+
+Any value not set falls back to a sensible default.
+
+---
+
+## 📚 Documentation & Storybook
+
+- **Interactive Docs & Playground:**   
+  run locally: `npm run storybook`
+
+---
+
+## 📦 Components
+
+- `Button` — variants: primary, secondary, ghost, destructive, loading
+- `Input` — label, error state
+- `Table` — full Tanstack Table v8 support, any data shape
+
+(…and more coming soon!)
+
+---
+
+## 🧩 Example: Table
+
+```tsx
+import { Table } from "@eml-payments/ui-kit";
+
+const columns = [
+  { header: "Name", accessorKey: "name" },
+  { header: "Email", accessorKey: "email" },
+];
+const data = [
+  { name: "Alice", email: "alice@email.com" },
+  { name: "Bob", email: "bob@email.com" },
+];
+
+<Table columns={columns} data={data} />
+```
+
+---
+
+## 🤝 Contributing
+
+We welcome PRs and issues!  
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for details.
+
+---
+
+## 📝 License
+
+MIT &copy; EML Payments
+
+---

package/dist/src/components/Button/Button.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { ButtonProps } from './Button.types';
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/components/Button/Button.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '../../lib/utils';
+import { Loader2Icon } from 'lucide-react';
+import { buttonVariants } from '@/components/Button/ButtonVariants';
+export const Button = React.forwardRef(({ variant, size, asChild = false, loading = false, children, className, loadingText, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size }), className), ref: ref, disabled: loading || props.disabled, ...props, children: _jsxs("span", { className: "flex items-center gap-2", children: [loading && _jsx(Loader2Icon, { className: "animate-spin" }), loading ? loadingText : children] }) }));
+});
+Button.displayName = 'Button';

package/dist/{components → src/components}/Button/Button.types.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from 'class-variance-authority';
-import { buttonVariants } from './Button';
+import { type buttonVariants } from './ButtonVariants';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     children: React.ReactNode;
     asChild?: boolean;

package/dist/{components/Button/Button.d.ts → src/components/Button/ButtonVariants.d.ts}

@@ -1,7 +1,4 @@
-import * as React from 'react';
-import { ButtonProps } from './Button.types';
 export declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "outlined" | "ghost" | "destructive" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/{components/Button/Button.js → src/components/Button/ButtonVariants.js}

@@ -1,9 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../lib/utils';
-import { Loader2Icon } from 'lucide-react';
 export const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         variant: {
@@ -34,7 +29,3 @@ export const buttonVariants = cva('inline-flex items-center justify-center gap-2
         size: 'default',
     },
 });
-export const Button = React.forwardRef(({ variant, size, asChild = false, loading = false, children, className, loadingText, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size }), className), ref: ref, disabled: loading || props.disabled, ...props, children: _jsxs("span", { className: "flex items-center gap-2", children: [loading && _jsx(Loader2Icon, { className: "animate-spin" }), loading ? loadingText : children] }) }));
-});

package/dist/{components → src/components}/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { CheckboxProps } from './Checkbox.types';
+import type { CheckboxProps } from './Checkbox.types';
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Checkbox };

package/dist/{components → src/components}/Checkbox/Checkbox.js

@@ -4,18 +4,16 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { Check } from 'lucide-react';
 import { cn } from '../../lib/utils';
 const Checkbox = React.forwardRef(({ className, label, labelPosition = 'left', ...props }, ref) => {
-    // Define the position classes for label placement
     const positionClasses = {
         left: 'flex-row',
         right: 'flex-row-reverse',
         top: 'flex-col',
         bottom: 'flex-col-reverse',
     };
-    // Combine the position classes with the base classes
     const wrapperClass = cn('inline-flex items-center gap-2', positionClasses[labelPosition]);
     return (_jsxs("div", { className: wrapperClass, children: [label && (_jsx("label", { htmlFor: props.id, className: cn('text-sm font-medium cursor-pointer', {
                     'cursor-not-allowed opacity-70': props.disabled,
-                }), children: label })), _jsx(CheckboxPrimitive.Root, { ref: ref, className: cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn('flex items-center justify-center text-current'), children: _jsx(Check, { className: "h-4 w-4" }) }) })] }));
+                }), children: label })), _jsx(CheckboxPrimitive.Root, { ref: ref, className: cn('peer h-[20px] w-[20px] shrink-0 rounded-sm border-2 border-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-[var(--uikit-primary)]', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn('flex items-center justify-center text-current'), children: _jsx(Check, { className: "h-[18px] w-[18px]", strokeWidth: 3 }) }) })] }));
 });
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 export { Checkbox };

package/dist/{components → src/components}/Checkbox/Checkbox.types.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from 'react';
-import { Checkbox as ShadCBCheckbox } from '@radix-ui/react-checkbox';
+import type { ComponentProps } from 'react';
+import type { Checkbox as ShadCBCheckbox } from '@radix-ui/react-checkbox';
 export interface CheckboxProps extends ComponentProps<typeof ShadCBCheckbox> {
     label?: string;
     labelPosition?: 'left' | 'right' | 'top' | 'bottom';

package/dist/{components → src/components}/Divider/Divider.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import { DividerProps } from './Divider.types';
+import type { DividerProps } from './Divider.types';
 export declare const Divider: React.FC<DividerProps>;

package/dist/{components → src/components}/Ellipsis/Ellipsis.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import { EllipsisTextProps } from './Ellipsis.types';
+import type { EllipsisTextProps } from './Ellipsis.types';
 export declare const EllipsisText: React.FC<EllipsisTextProps>;

package/dist/{components → src/components}/Ellipsis/Ellipsis.functions.js

@@ -1,6 +1,7 @@
 export function middleEllipsis(text, maxLength) {
-    if (text.length <= maxLength)
+    if (text.length <= maxLength) {
         return text;
+    }
     const visibleChars = maxLength - 3;
     const start = Math.ceil(visibleChars / 2);
     const end = Math.floor(visibleChars / 2);

package/dist/{components → src/components}/Input/Input.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { InputProps } from './Input.types';
+import type { InputProps } from './Input.types';
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/{components → src/components}/Input/Input.js

@@ -4,5 +4,6 @@ import { useUIKitTheme } from '../../context/useUIKitTheme';
 import { cn } from '../../lib/utils';
 export const Input = React.forwardRef(({ type, label, error, className, helperText, icon, ...props }, ref) => {
     const theme = useUIKitTheme();
-    return (_jsxs("div", { className: cn(className), children: [label && _jsx("label", { className: cn('text-sm font-medium text-foreground'), children: label }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: type, style: { fontFamily: theme.fontFamily }, className: cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition ', { 'border-error focus-visible:ring-error': error }, className), ref: ref, onChange: props.onChange, ...props }), icon && _jsx("span", { className: "absolute inset-y-0 right-3 flex items-center pl-3", children: icon })] }), error ? (_jsx("label", { className: cn('text-sm font-medium text-error'), children: error })) : helperText ? (_jsx("label", { className: cn('text-sm font-medium text-foreground'), children: helperText })) : null] }));
+    return (_jsxs("div", { className: cn(className), children: [label && _jsx("label", { className: cn('text-sm font-medium text-foreground'), children: label }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: type, style: { fontFamily: theme.fontFamily }, className: cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition ', { 'border-error focus-visible:ring-error': error }, className), ref: ref, onChange: props.onChange, ...props }), icon && _jsx("span", { className: "absolute inset-y-0 right-3 flex items-center pl-3", children: icon })] }), error && _jsx("label", { className: cn('text-sm font-medium text-error'), children: error }), !error && helperText && (_jsx("label", { className: cn('text-sm font-medium text-foreground'), children: helperText }))] }));
 });
+Input.displayName = 'Input';

package/dist/{components → src/components}/Input/Input.types.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react';
+import type { InputHTMLAttributes } from 'react';
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     error?: string;

package/dist/{components → src/components}/Label/Label.types.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    className?: string;
 }

package/dist/src/components/Pills/Pills.d.ts

@@ -0,0 +1,2 @@
+import type { PillsProps } from './Pills.types';
+export declare const Pills: ({ label, size, variant, color, onClick, disabled, className, }: PillsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Pills/Pills.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { Label } from '../Label';
+import { IoCloseCircleSharp } from 'react-icons/io5';
+export const Pills = ({ label, size = 'default', variant = 'filled', color = 'primary', onClick, disabled = false, className = '', }) => {
+    // Define styles for the pill based on variant and color
+    const pillStyles = {
+        filled: {
+            primary: 'bg-[var(--uikit-primary)] text-white',
+            secondary: 'bg-[var(--uikit-secondary)] text-white',
+            warning: 'bg-[var(--uikit-warning)] text-white',
+            error: 'bg-[var(--uikit-error)] text-white',
+            info: 'bg-[var(--uikit-info)] text-white',
+            success: 'bg-[var(--uikit-success)] text-white',
+        },
+        outlined: {
+            primary: 'border border-[var(--uikit-primary)] text-[var(--uikit-primary)]',
+            secondary: 'border border-[var(--uikit-secondary)] text-[var(--uikit-secondary)]',
+            warning: 'border border-[var(--uikit-warning)] text-[var(--uikit-warning)]',
+            error: 'border border-[var(--uikit-error)] text-[var(--uikit-error)]',
+            info: 'border border-[var(--uikit-info)] text-[var(--uikit-info)]',
+            success: 'border border-[var(--uikit-success)] text-[var(--uikit-success)]',
+        },
+    };
+    return (_jsxs("div", { className: cn('inline-flex items-center rounded-full px-[4px] py-[3px] text-sm font-medium', {
+            'py-[4px]': size === 'default',
+            'opacity-50 cursor-not-allowed': disabled,
+        }, pillStyles[variant][color], className), children: [_jsx(Label, { className: cn('text-sm font-medium px-[6px]', {
+                    'opacity-50 cursor-not-allowed': disabled,
+                }), children: label }), _jsx(IoCloseCircleSharp, { size: 24, onClick: onClick, className: "cursor-pointer", role: "button" })] }));
+};

package/dist/src/components/Pills/Pills.stories.d.ts

@@ -0,0 +1,14 @@
+import type { PillsProps } from './Pills.types';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<PillsProps>;
+export default meta;
+type Story = StoryObj<PillsProps>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Outlined: Story;
+export declare const Disabled: Story;
+export declare const Secondary: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const Info: Story;
+export declare const Success: Story;

package/dist/src/components/Pills/Pills.stories.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pills } from './Pills';
+const meta = {
+    title: 'UIKit/Pills',
+    component: Pills,
+    tags: ['autodocs'],
+    args: {
+        label: 'Label',
+        size: 'default',
+        variant: 'filled',
+        color: 'primary',
+        onClick: () => console.log('Pill clicked'),
+        disabled: false,
+        className: '',
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => _jsx(Pills, { ...args }),
+};
+export const Small = {
+    args: {
+        size: 'small',
+        label: 'Small Pill',
+    },
+    render: (args) => _jsx(Pills, { ...args }),
+};
+export const Outlined = {
+    args: {
+        variant: 'outlined',
+        label: 'Outlined Pill',
+    },
+    render: (args) => _jsx(Pills, { ...args }),
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+        label: 'Disabled Pill',
+    },
+    render: (args) => _jsx(Pills, { ...args }),
+};
+export const Secondary = {
+    args: {
+        color: 'secondary',
+        label: 'Secondary Pill',
+    },
+    render: (args) => _jsx(Pills, { ...args }),
+};
+export const Warning = {
+    args: {
+        color: 'warning',
+        label: 'Warning Pill',
+    },
+    render: (args) => _jsx(Pills, { ...args }),
+};
+export const Error = {
+    args: {
+        color: 'error',
+        label: 'Error Pill',
+    },
+    render: (args) => _jsx(Pills, { ...args }),
+};
+export const Info = {
+    args: {
+        color: 'info',
+        label: 'Info Pill',
+    },
+    render: (args) => _jsx(Pills, { ...args }),
+};
+export const Success = {
+    args: {
+        color: 'success',
+        label: 'Success Pill',
+    },
+    render: (args) => _jsx(Pills, { ...args }),
+};

package/dist/src/components/Pills/Pills.types.d.ts

@@ -0,0 +1,9 @@
+export interface PillsProps {
+    label: string;
+    size?: 'default' | 'small';
+    variant?: 'filled' | 'outlined';
+    color?: 'primary' | 'secondary' | 'warning' | 'error' | 'info' | 'success';
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}

package/dist/src/components/Pills/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Pills';
+export * from './Pills.types';

package/dist/src/components/Pills/index.js

@@ -0,0 +1,2 @@
+export * from './Pills';
+export * from './Pills.types';

package/dist/{components → src/components}/RadioGroup/RadioGroup.js

@@ -8,7 +8,7 @@ const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
-    return (_jsx(RadioGroupPrimitive.Item, { ref: ref, className: cn('aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx(Circle, { className: "h-3.5 w-3.5 fill-primary" }) }) }));
+    return (_jsx(RadioGroupPrimitive.Item, { ref: ref, className: cn('aspect-square h-4 w-4 rounded-full border-2 border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx(Circle, { className: "h-2 w-2 fill-[var(--uikit-primary)] text-transparent" }) }) }));
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 export { RadioGroup, RadioGroupItem };

package/dist/src/components/RadioGroup/RadioGroup.types.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps } from 'react';
+import type { RadioGroup as ShadCNRadioGroup } from '@radix-ui/react-radio-group';
+export interface RadioGroupProps extends ComponentProps<typeof ShadCNRadioGroup> {
+    className?: string;
+}

package/dist/src/components/Select/Select.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import type { SelectTriggerProps } from './Select.types';
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/src/components/Select/Select.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '../../lib/utils';
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, size = 'md', error, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', { 'h-9': size === 'md', 'h-7': size === 'sm' }, { 'border-[var(--uikit-error)]': error }, className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronDown, { className: "h-4 w-4" }) })));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn('relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]', position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
+                    'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('px-2 py-1.5 text-sm font-semibold', className), ...props })));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn('-mx-1 my-1 h-px bg-muted', className), ...props })));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/src/components/Select/Select.stories.d.ts

@@ -0,0 +1,10 @@
+import type { SelectProps } from './Select.types';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<SelectProps>;
+export default meta;
+type Story = StoryObj<SelectProps>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const WithLabel: Story;
+export declare const Size: Story;
+export declare const WithError: Story;

package/dist/src/components/Select/Select.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectItem, SelectScrollUpButton, SelectScrollDownButton, } from './Select';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { Label } from '../Label';
+const meta = {
+    title: 'UIKit/Select',
+    component: Select,
+    tags: ['autodocs'],
+    args: {
+        placeholder: 'Select an option...',
+        disabled: false,
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs(Select, { ...args, children: [_jsx(SelectTrigger, { className: "w-[320px]", children: _jsx(SelectValue, { placeholder: "Select an option..." }) }), _jsxs(SelectContent, { children: [_jsx(SelectScrollUpButton, { children: _jsx(ChevronUp, { className: "h-4 w-4" }) }), _jsx(SelectScrollDownButton, { children: _jsx(ChevronDown, { className: "h-4 w-4" }) }), _jsxs(SelectGroup, { children: [_jsx(SelectItem, { value: "option1", children: "Option 1" }), _jsx(SelectItem, { value: "option2", children: "Option 2" }), _jsx(SelectItem, { value: "option3", children: "Option 3" })] })] })] })),
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+    },
+    render: (args) => (_jsxs(Select, { ...args, children: [_jsx(SelectTrigger, { className: "w-[320px]", children: _jsx(SelectValue, { placeholder: "Select an option..." }) }), _jsxs(SelectContent, { children: [_jsx(SelectScrollUpButton, { children: _jsx(ChevronUp, { className: "h-4 w-4" }) }), _jsx(SelectScrollDownButton, { children: _jsx(ChevronDown, { className: "h-4 w-4" }) }), _jsxs(SelectGroup, { children: [_jsx(SelectItem, { value: "option1", children: "Option 1" }), _jsx(SelectItem, { value: "option2", children: "Option 2" }), _jsx(SelectItem, { value: "option3", children: "Option 3" })] })] })] })),
+};
+export const WithLabel = {
+    render: (args) => (_jsx("div", { className: "w-[320px]", children: _jsxs(Select, { ...args, children: [_jsx(Label, { className: "mb-2", children: "Select an option" }), _jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select an option..." }) }), _jsxs(SelectContent, { children: [_jsx(SelectScrollUpButton, { children: _jsx(ChevronUp, { className: "h-4 w-4" }) }), _jsx(SelectScrollDownButton, { children: _jsx(ChevronDown, { className: "h-4 w-4" }) }), _jsxs(SelectGroup, { children: [_jsx(SelectItem, { value: "option1", children: "Option 1" }), _jsx(SelectItem, { value: "option2", children: "Option 2" }), _jsx(SelectItem, { value: "option3", children: "Option 3" })] })] })] }) })),
+};
+export const Size = {
+    args: {},
+    render: (args) => (_jsxs(Select, { ...args, children: [_jsx(SelectTrigger, { className: "w-[320px]", size: "md", children: _jsx(SelectValue, { placeholder: "Select an option..." }) }), _jsxs(SelectContent, { children: [_jsx(SelectScrollUpButton, { children: _jsx(ChevronUp, { className: "h-4 w-4" }) }), _jsx(SelectScrollDownButton, { children: _jsx(ChevronDown, { className: "h-4 w-4" }) }), _jsxs(SelectGroup, { children: [_jsx(SelectItem, { value: "option1", children: "Option 1" }), _jsx(SelectItem, { value: "option2", children: "Option 2" }), _jsx(SelectItem, { value: "option3", children: "Option 3" })] })] })] })),
+};
+export const WithError = {
+    render: (args) => (_jsxs(Select, { ...args, children: [_jsx(SelectTrigger, { className: "w-[320px]", error: true, children: _jsx(SelectValue, { placeholder: "Select an option..." }) }), _jsxs(SelectContent, { children: [_jsx(SelectScrollUpButton, { children: _jsx(ChevronUp, { className: "h-4 w-4" }) }), _jsx(SelectScrollDownButton, { children: _jsx(ChevronDown, { className: "h-4 w-4" }) }), _jsxs(SelectGroup, { children: [_jsx(SelectItem, { value: "option1", children: "Option 1" }), _jsx(SelectItem, { value: "option2", children: "Option 2" }), _jsx(SelectItem, { value: "option3", children: "Option 3" })] })] })] })),
+};

package/dist/src/components/Select/Select.types.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+import type { SelectTrigger as ShadCNSelectTrigger } from '@radix-ui/react-select';
+export interface SelectProps {
+    className?: string;
+    disabled?: boolean;
+    placeholder?: string;
+}
+export interface SelectTriggerProps extends ComponentProps<typeof ShadCNSelectTrigger> {
+    error?: boolean;
+    size?: 'sm' | 'md';
+}

package/dist/src/components/Select/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './Select.types';

package/dist/src/components/Select/index.js

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './Select.types';

package/dist/src/components/SelectWrapper/SelectWrapper.d.ts

@@ -0,0 +1,2 @@
+import type { SelectWrapperProps } from './SelectWrapper.types';
+export declare const SelectWrapper: ({ label, options, value, onChange, size, disabled, error, placeholder, className, }: SelectWrapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/SelectWrapper/SelectWrapper.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { Label } from '../Label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
+export const SelectWrapper = ({ label, options, value, onChange, size = 'default', disabled = false, error = false, placeholder = '', className = '', }) => {
+    // Component implementation goes here
+    return (_jsxs("div", { className: "flex flex-col gap-1 w-full", children: [label && _jsx(Label, { className: "text-sm font-medium", children: label }), _jsxs(Select, { value: value, onValueChange: onChange, disabled: disabled, children: [_jsx(SelectTrigger, { "aria-invalid": error, className: cn('w-full', error && 'border-[var(--uikit-error)] ring-1 ring-[var(--uikit-error)]', size === 'small' ? 'h-8' : 'h-10', className), children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { children: options.map((option) => (_jsx(SelectItem, { value: option.value, className: cn(size === 'small' ? 'h-8' : 'h-10'), children: _jsx("span", { children: option.label }) }, option.value))) })] }), error && _jsx("span", { className: "text-[var(--uikit-error)] text-sm", children: "This field is required." })] }));
+};

package/dist/src/components/SelectWrapper/SelectWrapper.stories.d.ts

@@ -0,0 +1,12 @@
+import type { SelectWrapperProps } from './SelectWrapper.types';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<SelectWrapperProps>;
+export default meta;
+type Story = StoryObj<SelectWrapperProps>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Disabled: Story;
+export declare const Error: Story;
+export declare const WithLabel: Story;
+export declare const WithPlaceholder: Story;
+export declare const WithSize: Story;