@altimateai/ui-components 0.0.41 → 0.0.43

package/dist/assets/icons/index.js

@@ -1,4 +1,4 @@
-import { A as a, L as s, G as c, g as I, i as e, B as r, q as t, n as i, b as l, V as C, d as h, p as d, a as m, e as p, S as b, C as f, h as v, T as D, U as g, f as S, x as U, J as k, k as u, D as w, w as A, E as R, F as G, z as L, Q as F, K as T, P as B, O as H, s as M, H as P, I as x, $ as y, M as z, r as E, W as N, R as O, N as V, Z as W, c as q, Y as J, o as K, l as Q, m as X, y as Y, v as Z, u as _, t as $, _ as j, X as oo } from "../../index2.js";
+import { A as a, N as s, J as c, g as I, i as e, B as r, q as t, n as i, b as l, W as C, d as h, p as d, a as m, e as p, S as b, C as f, h as v, U as D, V as g, f as S, y as U, K as k, k as u, D as w, w as A, E as R, F as G, G as L, T as F, L as T, Q as B, P as H, s as M, H as P, I as x, $ as y, M as z, r as E, X as N, R as O, O as V, Z as W, c as q, x as J, o as K, l as Q, m as X, z as Y, v as Z, u as _, t as $, _ as j, Y as oo } from "../../index2.js";
 export {
   a as AddIcon,
   s as ArrowLeftIcon,

package/dist/chatbotV2/index.d.ts

@@ -34,6 +34,8 @@ declare const ContextPanel: React.FC<ContextPanelProps>;
 
 interface FeedbackButtonsProps {
     messageId: string;
+    messageContent?: string;
+    sessionId?: string;
 }
 declare const FeedbackButtons: FC<FeedbackButtonsProps>;
 

package/dist/index2.js

@@ -639,25 +639,25 @@ export {
   H0 as D,
   s1 as E,
   u1 as F,
-  O0 as G,
+  b0 as G,
   E0 as H,
   o1 as I,
-  A0 as J,
-  T0 as K,
-  P0 as L,
+  O0 as J,
+  A0 as K,
+  T0 as L,
   a1 as M,
-  G0 as N,
-  W0 as O,
-  $0 as P,
-  Y0 as Q,
+  P0 as N,
+  G0 as O,
+  W0 as P,
+  $0 as Q,
   Q0 as R,
   S0 as S,
-  N0 as T,
-  J0 as U,
-  z0 as V,
-  X0 as W,
-  f1 as X,
-  p1 as Y,
+  Y0 as T,
+  N0 as U,
+  J0 as V,
+  z0 as W,
+  X0 as X,
+  f1 as Y,
   v0 as Z,
   g0 as _,
   n1 as a,
@@ -683,7 +683,7 @@ export {
   y0 as u,
   L0 as v,
   Z0 as w,
-  M0 as x,
-  k0 as y,
-  b0 as z
+  p1 as x,
+  M0 as y,
+  k0 as z
 };

package/dist/main.js

@@ -6,7 +6,7 @@ import { j as h, A as dn, f as sr, g as ar, b as ur, C as lr, D as cr, E as dr,
 import * as te from "react";
 import Z, { createContext as _e, useReducer as fn, useCallback as we, useMemo as fe, useContext as be, useLayoutEffect as gr, useEffect as le, useRef as Se, useId as pn, useInsertionEffect as hr, Children as De, isValidElement as vr, useState as re, lazy as mr } from "react";
 import Er, { createPortal as bt } from "react-dom";
-import { u as yr, F as Mt, a as br, A as gn, N as Lt, B as Cr } from "./Form.js";
+import { u as yr, F as Mt, a as br, A as gn, N as Lt, B as Cr } from "./TagsInput.js";
 import { S as Sr } from "./Switch.js";
 import './main.css';var Ct = /* @__PURE__ */ ((e) => (e.DBT_DOCS = "dbt-docs", e.DOCUMENTATION_EDITOR = "documentation-editor", e.SAAS = "saas", e))(Ct || {});
 const _r = () => {

package/dist/shadcn/index.d.ts

@@ -33,6 +33,7 @@ import * as MenubarPrimitive from '@radix-ui/react-menubar';
 import * as ResizablePrimitive from 'react-resizable-panels';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as TagsInputPrimitive from '@diceui/tags-input';
 
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: ComponentProps<typeof DayPicker> & {
     buttonVariant?: ComponentProps<typeof Button>["variant"];
@@ -640,4 +641,11 @@ interface DragAndDropFileUploadProps {
 }
 declare function DragAndDropFileUpload({ onFilesSelected, acceptedFileTypes, maxFiles, className, }: DragAndDropFileUploadProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, type AutosizeTextAreaRef, AutosizeTextarea, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonProps, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DebouncedInput, type DebouncedInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DragAndDropFileUpload, type DragAndDropFileUploadProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, type InputProps, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, type Option, PREDEFINED_RANGES, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, TZDateRange, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, Textarea, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipCore, TooltipProvider, TooltipTrigger, Typography, badgeVariants, reducer, tabsVariants, toast, useAutosizeTextArea, useFormField, useSidebar, useToast };
+declare const TagsInput: React$1.ForwardRefExoticComponent<Omit<TagsInputPrimitive.TagsInputRootProps<string> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const TagsInputLabel: React$1.ForwardRefExoticComponent<Omit<TagsInputPrimitive.TagsInputLabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & React$1.RefAttributes<HTMLLabelElement>>;
+declare const TagsInputList: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const TagsInputInput: React$1.ForwardRefExoticComponent<Omit<TagsInputPrimitive.TagsInputInputProps & React$1.RefAttributes<HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const TagsInputItem: React$1.ForwardRefExoticComponent<Omit<TagsInputPrimitive.TagsInputItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const TagsInputClear: React$1.ForwardRefExoticComponent<Omit<TagsInputPrimitive.TagsInputClearProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, type AutosizeTextAreaRef, AutosizeTextarea, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonProps, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DebouncedInput, type DebouncedInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DragAndDropFileUpload, type DragAndDropFileUploadProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, type InputProps, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, type Option, PREDEFINED_RANGES, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, TZDateRange, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, TagsInputClear, TagsInputInput, TagsInputItem, TagsInputLabel, TagsInputList, Textarea, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipCore, TooltipProvider, TooltipTrigger, Typography, badgeVariants, reducer, tabsVariants, toast, useAutosizeTextArea, useFormField, useSidebar, useToast };

package/dist/shadcn/index.js

@@ -1,11 +1,11 @@
-import { b as oi, S as si, c as ii, d as Fn, e as li, f as ci, C as ui, G as di, L as fi, I as mi, g as hi, R as pi, h as gi, i as bi, j as vi, k as wi, l as yi, m as xi, n as Si, P as Mi, o as Ci } from "../Form.js";
-import { a8 as fp, ab as mp, a9 as hp, aa as pp, A as gp, af as bp, ag as vp, ap as wp, aq as yp, ak as xp, ao as Sp, am as Mp, al as Cp, ai as Np, ah as Dp, an as Pp, aj as Ep, ae as Tp, z as kp, B as Op, aB as Rp, _ as _p, $ as Ap, a2 as Ip, a3 as jp, a0 as Wp, a4 as zp, a1 as Lp, a6 as Fp, a5 as Hp, D as $p, K as Bp, H as Yp, U as Vp, J as Gp, O as Kp, V as qp, Z as Up, M as Xp, Q as Zp, T as Qp, W as Jp, X as eg, Y as tg, E as ng, aI as ag, aK as rg, aL as og, aM as sg, F as ig, aJ as lg, a as cg, N as ug, ar as dg, av as fg, as as mg, ax as hg, aw as pg, aA as gg, az as bg, ay as vg, au as wg, at as yg, s as xg, x as Sg, v as Mg, t as Cg, q as Ng, p as Dg, w as Pg, r as Eg, aC as Tg, aF as kg, aD as Og, aE as Rg, a7 as _g, ac as Ag, aG as Ig, ad as jg, y as Wg, aH as zg } from "../Form.js";
+import { b as oi, S as si, c as ii, d as Fn, e as li, f as ci, C as ui, G as di, L as fi, I as mi, g as hi, R as pi, h as gi, i as bi, j as vi, k as wi, l as yi, m as xi, n as Si, P as Mi, o as Ci } from "../TagsInput.js";
+import { a8 as fp, ab as mp, a9 as hp, aa as pp, A as gp, af as bp, ag as vp, ap as wp, aq as yp, ak as xp, ao as Sp, am as Mp, al as Cp, ai as Np, ah as Dp, an as Pp, aj as Ep, ae as Tp, z as kp, B as Op, aB as Rp, _ as _p, $ as Ap, a2 as Ip, a3 as jp, a0 as Wp, a4 as zp, a1 as Lp, a6 as Fp, a5 as Hp, D as $p, K as Bp, H as Yp, U as Vp, J as Gp, O as Kp, V as qp, Z as Up, M as Xp, Q as Zp, T as Qp, W as Jp, X as eg, Y as tg, E as ng, aI as ag, aK as rg, aL as og, aM as sg, F as ig, aJ as lg, a as cg, N as ug, ar as dg, av as fg, as as mg, ax as hg, aw as pg, aA as gg, az as bg, ay as vg, au as wg, at as yg, s as xg, x as Sg, v as Mg, t as Cg, q as Ng, p as Dg, w as Pg, r as Eg, aC as Tg, aF as kg, aD as Og, aE as Rg, aN as _g, aS as Ag, aQ as Ig, aR as jg, aO as Wg, aP as zg, a7 as Lg, ac as Fg, aG as Hg, ad as $g, y as Bg, aH as Yg } from "../TagsInput.js";
 import { c as N, M as Dn, U as Ke, Q as Ni, S as Di, a2 as Wt, X as Pi, Y as Ei, a6 as Ya, a as Ze, P as ne, v as Se, K as qt, l as Hn, u as he, aa as Ti, V as Va, b as Ot, o as ut, d as L, ab as ki, E as Oi, y as Ri, j as $n, ac as _i, ad as Ai, ae as Ii, af as ji, _ as dt, z as Bn, f as Wi, e as zi, n as Ga, s as Li, I as Fi, G as pn, m as Ka, A as Hi, r as $i, t as Bi, w as Yi, B as Vi, $ as Gi, a0 as Ki } from "../Stack.js";
-import { aj as Fg, ai as Hg, a3 as $g, a1 as Bg, a7 as Yg, H as Vg, al as Gg, J as Kg, aq as qg, ao as Ug, an as Xg, a9 as Zg, a8 as Qg, ap as Jg, am as eb, Z as tb, ak as nb, ag as ab, ah as rb, a4 as ob, a5 as sb } from "../Stack.js";
+import { aj as Gg, ai as Kg, a3 as qg, a1 as Ug, a7 as Xg, H as Zg, al as Qg, J as Jg, aq as eb, ao as tb, an as nb, a9 as ab, a8 as rb, ap as ob, am as sb, Z as ib, ak as lb, ag as cb, ah as ub, a4 as db, a5 as fb } from "../Stack.js";
 import { j as c, p as qa, a as Ut, d as qi, q as Ui, C as Ua, r as Xi, M as Xa, b as Zi, S as Qi, s as Ji, t as el, F as tl } from "../index2.js";
 import * as m from "react";
 import E, { createContext as nl, useContext as al, useCallback as ie, useRef as rt, useLayoutEffect as rl, useState as Te, useEffect as Ft, useMemo as Ct, forwardRef as Xt } from "react";
-import { S as lb } from "../Switch.js";
+import { S as hb } from "../Switch.js";
 import * as ol from "react-dom";
 import '../index2.css';const gn = {}, yt = {};
 function Nt(e, t) {
@@ -7753,11 +7753,11 @@ export {
   sd as CalendarDayButton,
   Gi as Card,
   Ki as CardContent,
-  Fg as CardDescription,
-  Hg as CardFooter,
-  $g as CardHeader,
-  Bg as CardTitle,
-  Yg as Checkbox,
+  Gg as CardDescription,
+  Kg as CardFooter,
+  qg as CardHeader,
+  Ug as CardTitle,
+  Xg as Checkbox,
   Rp as Combobox,
   _p as Command,
   Ap as CommandDialog,
@@ -7769,16 +7769,16 @@ export {
   Fp as CommandSeparator,
   Hp as CommandShortcut,
   ld as DebouncedInput,
-  Vg as Dialog,
-  Gg as DialogClose,
-  Kg as DialogContent,
-  qg as DialogDescription,
-  Ug as DialogFooter,
-  Xg as DialogHeader,
-  Zg as DialogOverlay,
-  Qg as DialogPortal,
-  Jg as DialogTitle,
-  eb as DialogTrigger,
+  Zg as Dialog,
+  Qg as DialogClose,
+  Jg as DialogContent,
+  eb as DialogDescription,
+  tb as DialogFooter,
+  nb as DialogHeader,
+  ab as DialogOverlay,
+  rb as DialogPortal,
+  ob as DialogTitle,
+  sb as DialogTrigger,
   cp as DragAndDropFileUpload,
   $p as DropdownMenu,
   Bp as DropdownMenuCheckboxItem,
@@ -7806,7 +7806,7 @@ export {
   Wh as HoverCardContent,
   lp as HoverCardTrigger,
   Ya as Input,
-  tb as Label,
+  ib as Label,
   xm as Menubar,
   Pm as MenubarCheckboxItem,
   Nm as MenubarContent,
@@ -7833,12 +7833,12 @@ export {
   jm as PaginationNext,
   Im as PaginationPrevious,
   Ni as Popover,
-  nb as PopoverClose,
+  lb as PopoverClose,
   Pi as PopoverContent,
   Di as PopoverTrigger,
   Bd as Progress,
-  ab as RadioGroup,
-  rb as RadioGroupItem,
+  cb as RadioGroup,
+  ub as RadioGroupItem,
   ap as ResizableHandle,
   np as ResizablePanel,
   tp as ResizablePanelGroup,
@@ -7890,13 +7890,19 @@ export {
   nf as SidebarTrigger,
   _a as Skeleton,
   Xf as Slider,
-  lb as Switch,
+  hb as Switch,
   $h as TZDateRange,
   Tg as Tabs,
   kg as TabsContent,
   Og as TabsList,
   Rg as TabsTrigger,
-  ob as Textarea,
+  _g as TagsInput,
+  Ag as TagsInputClear,
+  Ig as TagsInputInput,
+  jg as TagsInputItem,
+  Wg as TagsInputLabel,
+  zg as TagsInputList,
+  db as Textarea,
   Zr as Toast,
   Id as ToastAction,
   Qr as ToastClose,
@@ -7905,19 +7911,19 @@ export {
   Jr as ToastTitle,
   Xr as ToastViewport,
   Vh as Toaster,
-  sb as Tooltip,
+  fb as Tooltip,
   ji as TooltipContent,
   Ai as TooltipCore,
   _i as TooltipProvider,
   Ii as TooltipTrigger,
   Ei as Typography,
-  _g as badgeVariants,
+  Lg as badgeVariants,
   Dn as buttonVariants,
-  Ag as reducer,
-  Ig as tabsVariants,
-  jg as toast,
-  Wg as useAutosizeTextArea,
-  zg as useFormField,
+  Fg as reducer,
+  Hg as tabsVariants,
+  $g as toast,
+  Bg as useAutosizeTextArea,
+  Yg as useFormField,
   en as useSidebar,
   oi as useToast
 };

package/dist/storybook/TagsInput.stories.tsx

@@ -0,0 +1,228 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  TagsInput,
+  TagsInputLabel,
+  TagsInputList,
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputClear,
+} from "./TagsInput.tsx";
+
+const meta = {
+  title: "Shadcn/Components/TagsInput",
+  component: TagsInput,
+  argTypes: {
+    className: {
+      control: "text",
+      description: "Additional CSS classes",
+    },
+  },
+} satisfies Meta<typeof TagsInput>;
+
+export default meta;
+type Story = StoryObj<typeof TagsInput>;
+
+// Helper component for controlled stories
+const TagsInputDemo = ({
+  initialTags = [],
+  placeholder = "Add a tag...",
+  label,
+  showClear = false,
+  disabled = false,
+  maxTags,
+}: {
+  initialTags?: string[];
+  placeholder?: string;
+  label?: string;
+  showClear?: boolean;
+  disabled?: boolean;
+  maxTags?: number;
+}) => {
+  const [tags, setTags] = useState<string[]>(initialTags);
+
+  return (
+    <TagsInput value={tags} onValueChange={setTags} disabled={disabled} max={maxTags}>
+      {label && <TagsInputLabel>{label}</TagsInputLabel>}
+      <TagsInputList>
+        {tags.map(tag => (
+          <TagsInputItem key={tag} value={tag}>
+            {tag}
+          </TagsInputItem>
+        ))}
+        <TagsInputInput placeholder={placeholder} />
+        {showClear && <TagsInputClear />}
+      </TagsInputList>
+    </TagsInput>
+  );
+};
+
+export const Default: Story = {
+  render: () => <TagsInputDemo />,
+};
+
+export const WithLabel: Story = {
+  render: () => <TagsInputDemo label="Skills" placeholder="Add your skills..." />,
+};
+
+export const WithInitialTags: Story = {
+  render: () => (
+    <TagsInputDemo
+      initialTags={["React", "TypeScript", "JavaScript"]}
+      label="Technologies"
+      placeholder="Add more technologies..."
+    />
+  ),
+};
+
+export const WithClearButton: Story = {
+  render: () => (
+    <TagsInputDemo
+      initialTags={["Design", "Development", "Testing"]}
+      label="Categories"
+      placeholder="Add categories..."
+      showClear={true}
+    />
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <TagsInputDemo
+      initialTags={["Read-only", "Disabled"]}
+      label="Disabled Tags"
+      placeholder="Cannot add more..."
+      disabled={true}
+    />
+  ),
+};
+
+export const MaxTags: Story = {
+  render: () => (
+    <TagsInputDemo
+      initialTags={["Tag 1", "Tag 2"]}
+      label="Limited to 3 tags"
+      placeholder="Add up to 3 tags..."
+      maxTags={3}
+    />
+  ),
+};
+
+export const LongTags: Story = {
+  render: () => (
+    <TagsInputDemo
+      initialTags={[
+        "Very Long Tag Name That Might Overflow",
+        "Another Extremely Long Tag Name",
+        "Short",
+        "Medium Length Tag",
+      ]}
+      label="Long Tag Names"
+      placeholder="Add more tags..."
+    />
+  ),
+};
+
+export const ManyTags: Story = {
+  render: () => (
+    <TagsInputDemo
+      initialTags={[
+        "React",
+        "Vue",
+        "Angular",
+        "Svelte",
+        "TypeScript",
+        "JavaScript",
+        "Python",
+        "Java",
+        "Go",
+        "Rust",
+        "C++",
+        "C#",
+        "PHP",
+        "Ruby",
+        "Swift",
+      ]}
+      label="Programming Languages"
+      placeholder="Add more languages..."
+    />
+  ),
+};
+
+export const CustomWidth: Story = {
+  render: () => (
+    <div className="al-w-[600px]">
+      <TagsInputDemo
+        initialTags={["Wide", "Container", "Example"]}
+        label="Custom Width Container"
+        placeholder="Add tags in wide container..."
+      />
+    </div>
+  ),
+};
+
+export const FormExample: Story = {
+  render: () => (
+    <div className="al-space-y-4 al-p-4 al-border al-rounded-lg al-max-w-md">
+      <div>
+        <TagsInputDemo
+          label="Required Skills *"
+          placeholder="e.g., React, TypeScript..."
+          initialTags={["React"]}
+        />
+        <p className="al-text-sm al-text-muted-foreground al-mt-1">
+          Add the skills required for this position
+        </p>
+      </div>
+
+      <div>
+        <TagsInputDemo label="Nice to Have" placeholder="e.g., Docker, AWS..." />
+        <p className="al-text-sm al-text-muted-foreground al-mt-1">
+          Optional skills that would be beneficial
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [tags, setTags] = useState<string[]>(["Interactive", "Example"]);
+
+    return (
+      <div className="al-space-y-4">
+        <TagsInput value={tags} onValueChange={setTags}>
+          <TagsInputLabel>Interactive Demo</TagsInputLabel>
+          <TagsInputList>
+            {tags.map(tag => (
+              <TagsInputItem key={tag} value={tag}>
+                {tag}
+              </TagsInputItem>
+            ))}
+            <TagsInputInput placeholder="Type and press Enter..." />
+            <TagsInputClear />
+          </TagsInputList>
+        </TagsInput>
+
+        <div className="al-text-sm al-text-muted-foreground">
+          <strong>Current tags:</strong> {tags.length > 0 ? tags.join(", ") : "None"}
+        </div>
+
+        <div className="al-flex al-gap-2">
+          <button
+            className="al-px-3 al-py-1 al-text-xs al-bg-blue-500 al-text-white al-rounded hover:al-bg-blue-600"
+            onClick={() => setTags([...tags, `Tag ${tags.length + 1}`])}
+          >
+            Add Random Tag
+          </button>
+          <button
+            className="al-px-3 al-py-1 al-text-xs al-bg-red-500 al-text-white al-rounded hover:al-bg-red-600"
+            onClick={() => setTags([])}
+          >
+            Clear All
+          </button>
+        </div>
+      </div>
+    );
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altimateai/ui-components",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AltimateAI/altimate-components.git"