@altimateai/ui-components 0.0.64-beta7 → 0.0.65

package/dist/index.d.ts

@@ -32,8 +32,9 @@ declare const IconButton: (props: Props$7) => JSX.Element;
 
 interface Props$6 extends ButtonProps {
     loading: boolean;
+    loadingText?: string | null;
 }
-declare const LoadingButton: ({ loading, ...rest }: Props$6) => JSX.Element;
+declare const LoadingButton: ({ loading, loadingText, ...rest }: Props$6) => JSX.Element;
 
 interface Props$5 {
     code: string;

package/dist/main.js

@@ -6,7 +6,7 @@ import { j as h, A as dn, e as sr, f as ar, a as ur, d 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 "./Carousel.js";
+import { u as yr, F as Mt, a as br, A as gn, N as Lt, B as Cr } from "./ToggleGroup.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

@@ -34,9 +34,9 @@ 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';
+import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
 
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: ComponentProps<typeof DayPicker> & {
     buttonVariant?: ComponentProps<typeof Button>["variant"];
@@ -430,6 +430,7 @@ interface NativeSelectProps extends SelectAttributes, VariantProps<typeof select
     open?: boolean;
     label?: string;
     showPlaceholder?: boolean;
+    buttonProps?: ButtonProps;
 }
 declare const NativeSelect: React$1.ForwardRefExoticComponent<NativeSelectProps & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -687,17 +688,6 @@ declare const TagsInputInput: React$1.ForwardRefExoticComponent<Omit<TagsInputPr
 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>>;
 
-declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "lg" | "default" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Toggle({ className, variant, size, ...props }: React$1.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
-
-declare function ToggleGroup({ className, variant, size, spacing, children, ...props }: React$1.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
-    spacing?: number;
-}): react_jsx_runtime.JSX.Element;
-declare function ToggleGroupItem({ className, children, variant, size, ...props }: React$1.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
-
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
@@ -714,4 +704,15 @@ declare function CarouselItem({ className, ...props }: React$1.ComponentProps<"d
 declare function CarouselPrevious({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;
 declare function CarouselNext({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;
 
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Toggle({ className, variant, size, ...props }: React$1.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
+
+declare function ToggleGroup({ className, variant, size, spacing, children, ...props }: React$1.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+}): react_jsx_runtime.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: React$1.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): 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, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Combobox, ComboboxInner, type ComboboxOption, type ComboboxRef, 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, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, 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, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipCore, TooltipProvider, TooltipTrigger, Typography, badgeVariants, reducer, tabsVariants, toast, toggleVariants, useAutosizeTextArea, useFormField, useSidebar, useToast };

package/dist/shadcn/index.js

@@ -1,5 +1,5 @@
-import { b as Bi, S as Hi, c as Yi, d as Zn, e as Vi, f as Gi, C as Ki, G as Ui, L as qi, I as Xi, g as Zi, R as Qi, h as Ji, i as el, j as tl, k as nl, l as al, m as rl, n as ol, P as sl, o as il } from "../Carousel.js";
-import { af as kg, ai as _g, ag as Og, ah as Ig, A as Ag, am as jg, an as Wg, aw as Lg, ax as zg, ar as Fg, av as $g, at as Bg, as as Hg, ap as Yg, ao as Vg, au as Gg, aq as Kg, al as Ug, O as qg, B as Xg, a_ as Zg, a$ as Qg, b0 as Jg, b2 as eb, b1 as tb, aJ as nb, aI as ab, a5 as rb, a6 as ob, a9 as sb, aa as ib, a7 as lb, ab as cb, a8 as ub, ad as db, ac as fb, D as mb, Q as hb, W as pb, U as gb, $ as bb, V as vb, Y as wb, a0 as yb, a4 as xb, X as Sb, Z as Mb, _ as Cb, a1 as Nb, a2 as Pb, a3 as Db, T as Tb, aL as Eb, aN as Rb, aO as kb, aP as _b, F as Ob, aM as Ib, a as Ab, p as jb, q as Wb, r as Lb, t as zb, s as Fb, v as $b, N as Bb, ay as Hb, aC as Yb, az as Vb, aE as Gb, aD as Kb, aH as Ub, aG as qb, aF as Xb, aB as Zb, aA as Qb, z as Jb, K as ev, H as tv, E as nv, x as av, w as rv, J as ov, y as sv, aQ as iv, aV as lv, aT as cv, aU as uv, aR as dv, aS as fv, aW as mv, aY as hv, aZ as pv, ae as gv, aj as bv, ak as vv, aX as wv, M as yv, aK as xv } from "../Carousel.js";
+import { b as Bi, S as Hi, c as Yi, d as Zn, e as Vi, f as Gi, C as Ki, G as Ui, L as qi, I as Xi, g as Zi, R as Qi, h as Ji, i as el, j as tl, k as nl, l as al, m as rl, n as ol, P as sl, o as il } from "../ToggleGroup.js";
+import { af as kg, ai as _g, ag as Og, ah as Ig, A as Ag, am as jg, an as Wg, aw as Lg, ax as zg, ar as Fg, av as $g, at as Bg, as as Hg, ap as Yg, ao as Vg, au as Gg, aq as Kg, al as Ug, O as qg, B as Xg, aW as Zg, aX as Qg, aY as Jg, a_ as eb, aZ as tb, aJ as nb, aI as ab, a5 as rb, a6 as ob, a9 as sb, aa as ib, a7 as lb, ab as cb, a8 as ub, ad as db, ac as fb, D as mb, Q as hb, W as pb, U as gb, $ as bb, V as vb, Y as wb, a0 as yb, a4 as xb, X as Sb, Z as Mb, _ as Cb, a1 as Nb, a2 as Pb, a3 as Db, T as Tb, aL as Eb, aN as Rb, aO as kb, aP as _b, F as Ob, aM as Ib, a as Ab, p as jb, q as Wb, r as Lb, t as zb, s as Fb, v as $b, N as Bb, ay as Hb, aC as Yb, az as Vb, aE as Gb, aD as Kb, aH as Ub, aG as qb, aF as Xb, aB as Zb, aA as Qb, z as Jb, K as ev, H as tv, E as nv, x as av, w as rv, J as ov, y as sv, aQ as iv, aV as lv, aT as cv, aU as uv, aR as dv, aS as fv, a$ as mv, b1 as hv, b2 as pv, ae as gv, aj as bv, ak as vv, b0 as wv, M as yv, aK as xv } from "../ToggleGroup.js";
 import { f as P, U as An, B as Ue, Z as ll, _ as cl, X as $t, $ as ul, a0 as dl, c as Qe, P as ne, y as Se, Q as tn, n as Qn, u as he, ab as fl, V as rr, a as It, q as dt, b as F, ac as ml, K as hl, G as pl, g as ft, ad as gl, I as bl, ae as vl, af as wl, ag as yl, a2 as mt, a3 as jn, H as Jn, e as xl, d as Sl, p as or, v as Ml, x as Cl, L as Mn, o as sr, A as Nl, t as Pl, w as Dl, z as Tl, J as El, a4 as Rl, a5 as kl } from "../Stack.js";
 import { ak as Mv, aj as Cv, a7 as Nv, a6 as Pv, a8 as Dv, M as Tv, am as Ev, N as Rv, ar as kv, ap as _v, ao as Ov, aa as Iv, a9 as Av, aq as jv, an as Wv, a1 as Lv, al as zv, ah as Fv, ai as $v, T as Bv, Y as Hv } from "../Stack.js";
 import { j as u, o as ir, C as nn, b as _l, p as Ol, d as lr, q as Il, M as cr, a as Al, S as jl, r as Wl, s as Ll, F as zl } from "../index2.js";

package/dist/storybook/Carousel.stories.tsx

@@ -0,0 +1,274 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../shadcn";
+import { Card, CardContent } from "../card/Card";
+
+const meta: Meta<typeof Carousel> = {
+  title: "Shadcn/Components/Carousel",
+  component: Carousel,
+};
+
+export default meta;
+type Story = StoryObj<typeof Carousel>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-xs">
+        <Carousel>
+          <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <CarouselItem key={index}>
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
+                      <span className="al-text-4xl al-font-semibold">{index + 1}</span>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};
+
+export const WithMultipleItems: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-sm">
+        <Carousel
+          opts={{
+            align: "start",
+          }}
+        >
+          <CarouselContent>
+            {Array.from({ length: 10 }).map((_, index) => (
+              <CarouselItem key={index} className="al-basis-1/3">
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
+                      <span className="al-text-2xl al-font-semibold">{index + 1}</span>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};
+
+export const WithLoop: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-xs">
+        <Carousel
+          opts={{
+            loop: true,
+          }}
+        >
+          <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <CarouselItem key={index}>
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
+                      <span className="al-text-4xl al-font-semibold">{index + 1}</span>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <Carousel orientation="vertical" className="al-w-full al-max-w-xs">
+        <CarouselContent className="al-h-[200px]">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index}>
+              <div className="al-p-1">
+                <Card>
+                  <CardContent className="al-flex al-items-center al-justify-center al-p-6">
+                    <span className="al-text-3xl al-font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  ),
+};
+
+export const WithVariableWidths: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-md">
+        <Carousel
+          opts={{
+            align: "start",
+          }}
+        >
+          <CarouselContent>
+            {Array.from({ length: 8 }).map((_, index) => (
+              <CarouselItem
+                key={index}
+                className={index % 2 === 0 ? "al-basis-1/2" : "al-basis-1/3"}
+              >
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
+                      <span className="al-text-2xl al-font-semibold">{index + 1}</span>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};
+
+export const Images: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-lg">
+        <Carousel>
+          <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <CarouselItem key={index}>
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-aspect-video al-items-center al-justify-center al-p-0">
+                      <div className="al-flex al-h-full al-w-full al-items-center al-justify-center al-bg-muted">
+                        <span className="al-text-2xl al-font-semibold al-text-muted-foreground">
+                          Image {index + 1}
+                        </span>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};
+
+export const WithContent: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-md">
+        <Carousel>
+          <CarouselContent>
+            {[
+              { title: "First Slide", description: "This is the first slide content" },
+              { title: "Second Slide", description: "This is the second slide content" },
+              { title: "Third Slide", description: "This is the third slide content" },
+              { title: "Fourth Slide", description: "This is the fourth slide content" },
+              { title: "Fifth Slide", description: "This is the fifth slide content" },
+            ].map((slide, index) => (
+              <CarouselItem key={index}>
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-flex-col al-items-center al-justify-center al-space-y-2 al-p-6">
+                      <h3 className="al-text-2xl al-font-bold">{slide.title}</h3>
+                      <p className="al-text-center al-text-muted-foreground">{slide.description}</p>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};
+
+export const CustomButtonVariant: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-xs">
+        <Carousel>
+          <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <CarouselItem key={index}>
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
+                      <span className="al-text-4xl al-font-semibold">{index + 1}</span>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious variant="default" />
+          <CarouselNext variant="default" />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};
+
+export const AutoplayExample: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-xs">
+        <Carousel
+          opts={{
+            align: "start",
+            loop: true,
+          }}
+        >
+          <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <CarouselItem key={index}>
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
+                      <span className="al-text-4xl al-font-semibold">{index + 1}</span>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};

package/dist/storybook/Toggle.stories.tsx

@@ -0,0 +1,106 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Toggle } from "../shadcn";
+import { IconBold, IconItalic, IconUnderline, IconAlignLeft } from "@tabler/icons-react";
+
+const meta: Meta<typeof Toggle> = {
+  title: "Shadcn/Components/Toggle",
+  component: Toggle,
+  args: {
+    "aria-label": "Toggle demo",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+
+export const Default: Story = {
+  render: () => (
+    <Toggle>
+      <IconBold className="al-size-4" />
+    </Toggle>
+  ),
+};
+
+export const WithText: Story = {
+  render: () => (
+    <Toggle>
+      <IconBold className="al-size-4" />
+      <span>Bold</span>
+    </Toggle>
+  ),
+};
+
+export const Outline: Story = {
+  render: () => (
+    <Toggle variant="outline">
+      <IconItalic className="al-size-4" />
+    </Toggle>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Toggle disabled>
+      <IconUnderline className="al-size-4" />
+    </Toggle>
+  ),
+};
+
+export const DisabledPressed: Story = {
+  render: () => (
+    <Toggle disabled defaultPressed>
+      <IconBold className="al-size-4" />
+    </Toggle>
+  ),
+};
+
+export const Small: Story = {
+  render: () => (
+    <Toggle size="sm">
+      <IconBold className="al-size-4" />
+    </Toggle>
+  ),
+};
+
+export const Large: Story = {
+  render: () => (
+    <Toggle size="lg">
+      <IconBold className="al-size-4" />
+    </Toggle>
+  ),
+};
+
+export const FormattingToolbar: Story = {
+  render: () => (
+    <div className="al-flex al-gap-2">
+      <Toggle aria-label="Toggle bold">
+        <IconBold className="al-size-4" />
+      </Toggle>
+      <Toggle aria-label="Toggle italic">
+        <IconItalic className="al-size-4" />
+      </Toggle>
+      <Toggle aria-label="Toggle underline">
+        <IconUnderline className="al-size-4" />
+      </Toggle>
+      <Toggle aria-label="Toggle align left">
+        <IconAlignLeft className="al-size-4" />
+      </Toggle>
+    </div>
+  ),
+};
+
+export const OutlineVariants: Story = {
+  render: () => (
+    <div className="al-flex al-gap-2">
+      <Toggle variant="outline" size="sm" aria-label="Toggle bold small">
+        <IconBold className="al-size-4" />
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle bold default">
+        <IconBold className="al-size-4" />
+      </Toggle>
+      <Toggle variant="outline" size="lg" aria-label="Toggle bold large">
+        <IconBold className="al-size-4" />
+      </Toggle>
+    </div>
+  ),
+};

package/dist/storybook/ToggleGroup.stories.tsx

@@ -0,0 +1,178 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ToggleGroup, ToggleGroupItem } from "../shadcn";
+import {
+  IconBold,
+  IconItalic,
+  IconUnderline,
+  IconAlignLeft,
+  IconAlignCenter,
+  IconAlignRight,
+} from "@tabler/icons-react";
+
+const meta: Meta<typeof ToggleGroup> = {
+  title: "Shadcn/Components/ToggleGroup",
+  component: ToggleGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof ToggleGroup>;
+
+export const Default: Story = {
+  render: () => (
+    <ToggleGroup type="single">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <IconBold className="al-size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <IconItalic className="al-size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <IconUnderline className="al-size-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <ToggleGroup type="multiple">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <IconBold className="al-size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <IconItalic className="al-size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <IconUnderline className="al-size-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const Outline: Story = {
+  render: () => (
+    <ToggleGroup type="single" variant="outline">
+      <ToggleGroupItem value="left" aria-label="Align left">
+        <IconAlignLeft className="al-size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Align center">
+        <IconAlignCenter className="al-size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Align right">
+        <IconAlignRight className="al-size-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const Small: Story = {
+  render: () => (
+    <ToggleGroup type="single" size="sm">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <IconBold className="al-size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <IconItalic className="al-size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <IconUnderline className="al-size-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const Large: Story = {
+  render: () => (
+    <ToggleGroup type="single" size="lg">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <IconBold className="al-size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <IconItalic className="al-size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <IconUnderline className="al-size-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const WithText: Story = {
+  render: () => (
+    <ToggleGroup type="single" variant="outline">
+      <ToggleGroupItem value="left" aria-label="Align left">
+        <IconAlignLeft className="al-size-4" />
+        <span>Left</span>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Align center">
+        <IconAlignCenter className="al-size-4" />
+        <span>Center</span>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Align right">
+        <IconAlignRight className="al-size-4" />
+        <span>Right</span>
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <ToggleGroup type="single">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <IconBold className="al-size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic" disabled>
+        <IconItalic className="al-size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <IconUnderline className="al-size-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const DefaultValue: Story = {
+  render: () => (
+    <ToggleGroup type="single" defaultValue="italic" variant="outline">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <IconBold className="al-size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <IconItalic className="al-size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <IconUnderline className="al-size-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const FormattingToolbar: Story = {
+  render: () => (
+    <div className="al-flex al-flex-col al-gap-4">
+      <ToggleGroup type="multiple" variant="outline">
+        <ToggleGroupItem value="bold" aria-label="Toggle bold">
+          <IconBold className="al-size-4" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic" aria-label="Toggle italic">
+          <IconItalic className="al-size-4" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="underline" aria-label="Toggle underline">
+          <IconUnderline className="al-size-4" />
+        </ToggleGroupItem>
+      </ToggleGroup>
+      <ToggleGroup type="single" variant="outline">
+        <ToggleGroupItem value="left" aria-label="Align left">
+          <IconAlignLeft className="al-size-4" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="center" aria-label="Align center">
+          <IconAlignCenter className="al-size-4" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="right" aria-label="Align right">
+          <IconAlignRight className="al-size-4" />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  ),
+};

package/package.json

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