@altimateai/ui-components 0.0.1-beta.3 → 0.0.1-beta.5

package/dist/storybook/Accordion.stories.tsx

@@ -1,10 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../shadcn";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../shadcn";
 
 const meta: Meta<typeof Accordion> = {
   title: "Shadcn/Components/Accordion",
@@ -19,22 +14,18 @@ export const Default: Story = {
     <Accordion type="single" collapsible className="al-w-full">
       <AccordionItem value="item-1">
         <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It adheres to the WAI-ARIA design pattern.
-        </AccordionContent>
+        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-2">
         <AccordionTrigger>Is it styled?</AccordionTrigger>
         <AccordionContent>
-          Yes. It comes with default styles that matches the other
-          components&apos; aesthetic.
+          Yes. It comes with default styles that matches the other components&apos; aesthetic.
         </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-3">
         <AccordionTrigger>Is it animated?</AccordionTrigger>
         <AccordionContent>
-          Yes. It&apos;s animated by default, but you can disable it if you
-          prefer.
+          Yes. It&apos;s animated by default, but you can disable it if you prefer.
         </AccordionContent>
       </AccordionItem>
     </Accordion>
@@ -47,7 +38,7 @@ export const Multiple: Story = {
       <AccordionItem value="item-1">
         <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
         <AccordionContent>
-          Yes. Just set the type prop to "multiple" on the Accordion component.
+          Yes. Just set the type prop to &quot;multiple&quot; on the Accordion component.
         </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-2">

package/dist/storybook/Alert.stories.tsx

@@ -13,7 +13,7 @@ export default {
   },
 } as Meta;
 
-const Template: StoryFn = (args) => (
+const Template: StoryFn = args => (
   <Alert {...args}>
     <AlertTitle>Heads up!</AlertTitle>
     <AlertDescription>
@@ -36,9 +36,7 @@ export const WithIcon: StoryFn = () => (
   <Alert>
     <InfoCircleIcon className="al-h-4 al-w-4" />
     <AlertTitle>Info Alert</AlertTitle>
-    <AlertDescription>
-      This is an informational alert with an icon.
-    </AlertDescription>
+    <AlertDescription>This is an informational alert with an icon.</AlertDescription>
   </Alert>
 );
 
@@ -46,9 +44,7 @@ export const DestructiveWithIcon: StoryFn = () => (
   <Alert variant="destructive">
     <InfoCircleIcon className="al-h-4 al-w-4" />
     <AlertTitle>Error Alert</AlertTitle>
-    <AlertDescription>
-      Something went wrong! Please try again later.
-    </AlertDescription>
+    <AlertDescription>Something went wrong! Please try again later.</AlertDescription>
   </Alert>
 );
 

package/dist/storybook/AlertDialog.stories.tsx

@@ -23,8 +23,8 @@ const Template: StoryFn = () => (
       <AlertDialogHeader>
         <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
         <AlertDialogDescription>
-          This action cannot be undone. This will permanently delete your
-          account and remove your data from our servers.
+          This action cannot be undone. This will permanently delete your account and remove your
+          data from our servers.
         </AlertDialogDescription>
       </AlertDialogHeader>
       <AlertDialogFooter>
@@ -46,8 +46,8 @@ export const DestructiveAction: StoryFn = () => (
       <AlertDialogHeader>
         <AlertDialogTitle>Delete Account</AlertDialogTitle>
         <AlertDialogDescription>
-          This will permanently delete your account and remove all your data.
-          This action cannot be undone.
+          This will permanently delete your account and remove all your data. This action cannot be
+          undone.
         </AlertDialogDescription>
       </AlertDialogHeader>
       <AlertDialogFooter>
@@ -84,9 +84,7 @@ export const WithCustomTrigger: StoryFn = () => (
     <AlertDialogContent>
       <AlertDialogHeader>
         <AlertDialogTitle>Delete Item</AlertDialogTitle>
-        <AlertDialogDescription>
-          Are you sure you want to delete this item?
-        </AlertDialogDescription>
+        <AlertDialogDescription>Are you sure you want to delete this item?</AlertDialogDescription>
       </AlertDialogHeader>
       <AlertDialogFooter>
         <AlertDialogCancel>Cancel</AlertDialogCancel>
@@ -103,15 +101,12 @@ export const WithForm: StoryFn = () => (
       <AlertDialogHeader>
         <AlertDialogTitle>Unsubscribe from Newsletter</AlertDialogTitle>
         <AlertDialogDescription>
-          Please tell us why you're unsubscribing:
+          Please tell us why you&apos;re unsubscribing:
         </AlertDialogDescription>
       </AlertDialogHeader>
       <div className="al-grid al-gap-4 al-py-4">
         <div className="al-grid al-gap-2">
-          <label
-            htmlFor="reason"
-            className="al-text-sm al-font-medium al-leading-none"
-          >
+          <label htmlFor="reason" className="al-text-sm al-font-medium al-leading-none">
             Reason
           </label>
           <select

package/dist/storybook/Button.stories.tsx

@@ -8,14 +8,7 @@ export default {
   argTypes: {
     variant: {
       control: "select",
-      options: [
-        "default",
-        "destructive",
-        "outline",
-        "secondary",
-        "ghost",
-        "link",
-      ],
+      options: ["default", "destructive", "outline", "secondary", "ghost", "link"],
     },
     size: {
       control: "select",
@@ -24,7 +17,7 @@ export default {
   },
 } as Meta;
 
-const Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;
+const Template: StoryFn<ButtonProps> = args => <Button {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -67,24 +60,14 @@ Icon.args = {
   children: "🔍",
 };
 
-const buttonVariants = [
-  "Default",
-  "Secondary",
-  "Destructive",
-  "Success",
-  "Ghost",
-  "Link",
-];
+const buttonVariants = ["Default", "Secondary", "Destructive", "Success", "Ghost", "Link"];
 
 export const Buttons = {
   render: () => (
     <div className="al-space-y-4">
-      {buttonVariants.map((v) => (
-        <div className="al-space-x-4">
-          <Button
-            variant={v.toLowerCase() as ButtonProps["variant"]}
-            className="al-align-bottom"
-          >
+      {buttonVariants.map(v => (
+        <div className="al-space-x-4" key={v}>
+          <Button variant={v.toLowerCase() as ButtonProps["variant"]} className="al-align-bottom">
             {v}
           </Button>
           <Button
@@ -101,10 +84,7 @@ export const Buttons = {
           >
             {v} disabled
           </Button>
-          <Button
-            variant={v.toLowerCase() as ButtonProps["variant"]}
-            className="al-align-bottom"
-          >
+          <Button variant={v.toLowerCase() as ButtonProps["variant"]} className="al-align-bottom">
             <CloseIcon />
             {v} with icon
           </Button>

package/dist/storybook/Card.stories.tsx

@@ -1,13 +1,6 @@
 import { Meta, StoryFn } from "@storybook/react";
 import { Button } from "../shadcn";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-} from "../shadcn";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "../shadcn";
 
 export default {
   title: "Shadcn/Components/Card",

package/dist/storybook/Checkbox.stories.tsx

@@ -13,7 +13,7 @@ export default meta;
 type Story = StoryObj<typeof Checkbox>;
 
 export const Default: Story = {
-  render: (args) => (
+  render: args => (
     <div className="al-flex al-items-center al-space-x-2">
       <Checkbox {...args} id="terms" />
       <label
@@ -27,13 +27,10 @@ export const Default: Story = {
 };
 
 export const Checked: Story = {
-  render: (args) => (
+  render: args => (
     <div className="al-flex al-items-center al-space-x-2">
       <Checkbox {...args} id="checked" defaultChecked />
-      <label
-        htmlFor="checked"
-        className="al-text-sm al-font-medium al-leading-none"
-      >
+      <label htmlFor="checked" className="al-text-sm al-font-medium al-leading-none">
         Checked by default
       </label>
     </div>
@@ -41,13 +38,10 @@ export const Checked: Story = {
 };
 
 export const Disabled: Story = {
-  render: (args) => (
+  render: args => (
     <div className="al-flex al-items-center al-space-x-2">
       <Checkbox {...args} id="disabled" disabled />
-      <label
-        htmlFor="disabled"
-        className="al-text-sm al-font-medium al-leading-none al-opacity-70"
-      >
+      <label htmlFor="disabled" className="al-text-sm al-font-medium al-leading-none al-opacity-70">
         Disabled checkbox
       </label>
     </div>
@@ -55,14 +49,11 @@ export const Disabled: Story = {
 };
 
 export const WithDescription: Story = {
-  render: (args) => (
+  render: args => (
     <div className="al-items-top al-flex al-space-x-2">
       <Checkbox {...args} id="description" />
       <div className="al-grid al-gap-1.5 al-leading-none">
-        <label
-          htmlFor="description"
-          className="al-text-sm al-font-medium al-leading-none"
-        >
+        <label htmlFor="description" className="al-text-sm al-font-medium al-leading-none">
           Accept terms
         </label>
         <p className="al-text-sm al-text-muted-foreground">

package/dist/storybook/Form.stories.tsx

@@ -37,9 +37,7 @@ const Template: StoryFn = () => {
                   className="al-flex al-h-10 al-w-full al-rounded-md al-border al-border-input al-bg-background al-px-3 al-py-2 al-text-sm"
                 />
               </FormControl>
-              <FormDescription>
-                This is your public display name.
-              </FormDescription>
+              <FormDescription>This is your public display name.</FormDescription>
               <FormMessage />
             </FormItem>
           )}
@@ -73,9 +71,7 @@ export const WithValidation: StoryFn = () => {
                   className="al-flex al-h-10 al-w-full al-rounded-md al-border al-border-input al-bg-background al-px-3 al-py-2 al-text-sm"
                 />
               </FormControl>
-              <FormDescription>
-                Username must be at least 2 characters.
-              </FormDescription>
+              <FormDescription>Username must be at least 2 characters.</FormDescription>
               <FormMessage />
             </FormItem>
           )}
@@ -107,9 +103,7 @@ export const WithError: StoryFn = () => {
                   className="al-flex al-h-10 al-w-full al-rounded-md al-border al-border-destructive al-bg-background al-px-3 al-py-2 al-text-sm"
                 />
               </FormControl>
-              <FormDescription>
-                Username must be at least 2 characters.
-              </FormDescription>
+              <FormDescription>Username must be at least 2 characters.</FormDescription>
               <FormMessage>Username is too short</FormMessage>
             </FormItem>
           )}

package/dist/storybook/HoverCard.stories.tsx

@@ -31,14 +31,10 @@ const Template: StoryFn = () => (
         </Avatar>
         <div className="al-space-y-1">
           <h4 className="al-text-sm al-font-semibold">@nextjs</h4>
-          <p className="al-text-sm">
-            The React Framework – created and maintained by @vercel.
-          </p>
+          <p className="al-text-sm">The React Framework – created and maintained by @vercel.</p>
           <div className="al-flex al-items-center al-pt-2">
             <CloseIcon className="al-mr-2 al-h-4 al-w-4 al-opacity-70" />{" "}
-            <span className="al-text-xs al-text-muted-foreground">
-              Joined December 2021
-            </span>
+            <span className="al-text-xs al-text-muted-foreground">Joined December 2021</span>
           </div>
         </div>
       </div>
@@ -57,8 +53,8 @@ export const WithCustomAlignment: StoryFn = () => (
       <div className="al-space-y-2">
         <h4 className="al-text-sm al-font-semibold">Right Aligned Content</h4>
         <p className="al-text-sm">
-          This hover card's content is aligned to the end (right) of the trigger
-          element. It also has a custom width of 80 units.
+          This hover card&apos;s content is aligned to the end (right) of the trigger element. It
+          also has a custom width of 80 units.
         </p>
       </div>
     </HoverCardContent>
@@ -74,8 +70,8 @@ export const WithCustomOffset: StoryFn = () => (
       <div className="al-space-y-2">
         <h4 className="al-text-sm al-font-semibold">Custom Offset Content</h4>
         <p className="al-text-sm">
-          This hover card has a larger offset from the trigger element (10 units
-          instead of the default 4).
+          This hover card has a larger offset from the trigger element (10 units instead of the
+          default 4).
         </p>
       </div>
     </HoverCardContent>
@@ -93,9 +89,7 @@ export const WithRichContent: StoryFn = () => (
           <h4 className="al-text-sm al-font-semibold">@johndoe</h4>
           <p className="al-text-sm">Staff Engineer at Acme Corp</p>
           <div className="al-flex al-items-center al-pt-2">
-            <span className="al-text-xs al-text-muted-foreground">
-              Joined December 2021
-            </span>
+            <span className="al-text-xs al-text-muted-foreground">Joined December 2021</span>
           </div>
         </div>
         <div className="al-w-12 al-h-12 al-rounded-full al-bg-secondary" />

package/dist/storybook/Label.stories.tsx

@@ -11,7 +11,7 @@ export default {
   },
 } as Meta;
 
-const Template: StoryFn = (args) => <Label {...args} />;
+const Template: StoryFn = args => <Label {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/dist/storybook/Pagination.stories.tsx

@@ -96,10 +96,7 @@ export const WithDisabledControls: StoryFn = () => (
   <Pagination>
     <PaginationContent>
       <PaginationItem>
-        <PaginationPrevious
-          href="#"
-          className="pointer-events-none opacity-50"
-        />
+        <PaginationPrevious href="#" className="pointer-events-none opacity-50" />
       </PaginationItem>
       <PaginationItem>
         <PaginationLink href="#" isActive>

package/dist/storybook/Popover.stories.tsx

@@ -14,9 +14,7 @@ const Template: StoryFn = () => (
     <PopoverContent>
       <div className="al-space-y-2">
         <h4 className="al-font-medium al-leading-none">Popover Content</h4>
-        <p className="al-text-sm al-text-muted-foreground">
-          This is the popover content.
-        </p>
+        <p className="al-text-sm al-text-muted-foreground">This is the popover content.</p>
       </div>
     </PopoverContent>
   </Popover>

package/dist/storybook/Progress.stories.tsx

@@ -12,7 +12,7 @@ export default {
   },
 } as Meta;
 
-const Template: StoryFn = (args) => <Progress {...args} />;
+const Template: StoryFn = args => <Progress {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -52,7 +52,7 @@ export const Animated: StoryFn = () => {
 
   useEffect(() => {
     const timer = setInterval(() => {
-      setProgress((prevProgress) => {
+      setProgress(prevProgress => {
         if (prevProgress === 100) {
           return 0;
         }

package/dist/storybook/RadioGroup.stories.tsx

@@ -6,9 +6,9 @@ export default {
   component: RadioGroup,
 } as Meta;
 
-const Template: StoryFn = (args) => (
+const Template: StoryFn = args => (
   <RadioGroup defaultValue="option-1" {...args}>
-    {["option-1", "option-2", "option-3"].map((option) => (
+    {["option-1", "option-2", "option-3"].map(option => (
       <div key={option} className="al-flex al-items-center al-space-x-2">
         <RadioGroupItem value={option} id={option} />
         <label htmlFor={option} className="al-text-sm al-font-medium">
@@ -31,10 +31,7 @@ export const WithDisabledOption = () => (
     </div>
     <div className="flex items-center space-x-2">
       <RadioGroupItem value="option-2" id="option-2" disabled />
-      <label
-        htmlFor="option-2"
-        className="text-sm font-medium text-muted-foreground"
-      >
+      <label htmlFor="option-2" className="text-sm font-medium text-muted-foreground">
         Option 2 (Disabled)
       </label>
     </div>
@@ -49,7 +46,7 @@ export const WithDisabledOption = () => (
 
 export const Horizontal = () => (
   <RadioGroup defaultValue="option-1" className="al-flex al-space-x-4">
-    {["option-1", "option-2", "option-3"].map((option) => (
+    {["option-1", "option-2", "option-3"].map(option => (
       <div key={option} className="al-flex al-items-center al-space-x-2">
         <RadioGroupItem value={option} id={`h-${option}`} />
         <label htmlFor={`h-${option}`} className="al-text-sm al-font-medium">

package/dist/storybook/ScrollArea.stories.tsx

@@ -6,17 +6,13 @@ export default {
   component: ScrollArea,
 } as Meta;
 
-const tags = Array.from({ length: 50 }).map(
-  (_, i, a) => `v1.2.0-beta.${a.length - i}`
-);
+const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
 
 export const Default: StoryFn = () => (
   <ScrollArea className="al-h-72 al-w-48 al-rounded-md al-border">
     <div className="al-p-4">
-      <h4 className="al-mb-4 al-text-sm al-font-medium al-leading-none">
-        Tags
-      </h4>
-      {tags.map((tag) => (
+      <h4 className="al-mb-4 al-text-sm al-font-medium al-leading-none">Tags</h4>
+      {tags.map(tag => (
         <div key={tag} className="al-text-sm">
           {tag}
         </div>
@@ -29,10 +25,7 @@ export const HorizontalScroll: StoryFn = () => (
   <ScrollArea className="al-w-96 al-whitespace-nowrap al-rounded-md al-border">
     <div className="al-flex al-w-max al-space-x-4 al-p-4">
       {Array.from({ length: 50 }, (_, i) => (
-        <div
-          key={i}
-          className="al-w-40 al-shrink-0 al-rounded-md al-border al-p-4"
-        >
+        <div key={i} className="al-w-40 al-shrink-0 al-rounded-md al-border al-p-4">
           <div className="al-text-sm">Item {i + 1}</div>
         </div>
       ))}
@@ -43,15 +36,13 @@ export const HorizontalScroll: StoryFn = () => (
 export const WithContent: StoryFn = () => (
   <ScrollArea className="al-h-[300px] al-w-[350px] al-rounded-md al-border al-p-4">
     <div className="al-space-y-4">
-      <h4 className="al-text-sm al-font-medium al-leading-none">
-        Documentation
-      </h4>
+      <h4 className="al-text-sm al-font-medium al-leading-none">Documentation</h4>
       {Array.from({ length: 20 }, (_, i) => (
         <div key={i} className="al-text-sm">
           <h5 className="al-mb-1 al-font-medium">Section {i + 1}</h5>
           <p className="al-text-muted-foreground">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua.
           </p>
         </div>
       ))}
@@ -64,15 +55,10 @@ export const WithCard: StoryFn = () => (
     <div className="al-p-6">
       <h4 className="al-mb-4 al-text-xl al-font-bold">Recent Activity</h4>
       {Array.from({ length: 20 }, (_, i) => (
-        <div
-          key={i}
-          className="al-mb-4 al-rounded-lg al-border al-p-4 last:al-mb-0"
-        >
+        <div key={i} className="al-mb-4 al-rounded-lg al-border al-p-4 last:al-mb-0">
           <div className="al-flex al-items-center al-justify-between">
             <div className="al-space-y-1">
-              <p className="al-text-sm al-font-medium al-leading-none">
-                Activity {i + 1}
-              </p>
+              <p className="al-text-sm al-font-medium al-leading-none">Activity {i + 1}</p>
               <p className="al-text-sm al-text-muted-foreground">
                 This is a description of the activity that occurred.
               </p>
@@ -90,9 +76,7 @@ export const WithCard: StoryFn = () => (
 export const WithNestedContent: StoryFn = () => (
   <ScrollArea className="al-h-[400px] al-w-[600px] al-rounded-lg al-border">
     <div className="al-p-6">
-      <h4 className="al-mb-4 al-text-xl al-font-bold">
-        Nested Content Example
-      </h4>
+      <h4 className="al-mb-4 al-text-xl al-font-bold">Nested Content Example</h4>
       <div className="al-grid al-gap-4">
         {Array.from({ length: 5 }, (_, i) => (
           <div key={i} className="al-space-y-2">
@@ -100,10 +84,7 @@ export const WithNestedContent: StoryFn = () => (
             <ScrollArea className="al-h-[150px] al-w-full al-rounded-md al-border">
               <div className="al-p-4">
                 {Array.from({ length: 10 }, (_, j) => (
-                  <div
-                    key={j}
-                    className="al-mb-2 al-rounded al-border al-p-2 last:al-mb-0"
-                  >
+                  <div key={j} className="al-mb-2 al-rounded al-border al-p-2 last:al-mb-0">
                     <p className="al-text-sm">Subsection {j + 1}</p>
                     <p className="al-text-xs al-text-muted-foreground">
                       Nested scrollable content example.

package/dist/storybook/Select.stories.tsx

@@ -15,7 +15,7 @@ export default {
   component: Select,
 } as Meta;
 
-const Template: StoryFn = (args) => (
+const Template: StoryFn = args => (
   <Select {...args}>
     <SelectTrigger>
       <SelectValue placeholder="Select an option" />

package/dist/storybook/Sheet.stories.tsx

@@ -1,12 +1,6 @@
 import { Meta, StoryFn } from "@storybook/react";
 import { Button } from "../shadcn";
-import {
-  Sheet,
-  SheetTrigger,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from "../shadcn";
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle } from "../shadcn";
 
 export default {
   title: "Shadcn/Components/Sheet",

package/dist/storybook/Sidebar.stories.tsx

@@ -5,7 +5,7 @@ export default {
   title: "Shadcn/Components/Sidebar",
   component: Sidebar,
   decorators: [
-    (Story) => (
+    Story => (
       <SidebarProvider>
         <Story />
       </SidebarProvider>
@@ -16,7 +16,7 @@ export default {
   },
 } as Meta<typeof Sidebar>;
 
-const Template: StoryFn<typeof Sidebar> = (args) => (
+const Template: StoryFn<typeof Sidebar> = args => (
   <div className="al-h-screen">
     <Sidebar {...args}>
       <div className="al-p-4">
@@ -67,7 +67,7 @@ CustomStyling.args = {
 };
 
 // Example with controlled state
-export const ControlledState: StoryFn<typeof Sidebar> = (args) => {
+export const ControlledState: StoryFn<typeof Sidebar> = args => {
   return (
     <div className="al-h-screen">
       <SidebarProvider defaultOpen={false}>
@@ -83,7 +83,7 @@ export const ControlledState: StoryFn<typeof Sidebar> = (args) => {
 };
 
 // Example with mobile view
-export const MobileView: StoryFn<typeof Sidebar> = (args) => {
+export const MobileView: StoryFn<typeof Sidebar> = args => {
   return (
     <div className="al-h-screen al-w-screen md:al-hidden">
       <Sidebar {...args}>

package/dist/storybook/Slider.stories.tsx

@@ -23,7 +23,7 @@ export default {
   },
 } as Meta<typeof Slider>;
 
-const Template: StoryFn = (args) => (
+const Template: StoryFn = args => (
   <div className="al-w-[60%] al-space-y-4">
     <Slider {...args} />
   </div>
@@ -71,9 +71,7 @@ export const WithLabels: StoryFn = () => (
     <div className="al-grid al-gap-4 al-pt-4">
       <div className="al-flex al-items-center al-justify-between">
         <label className="al-text-sm al-font-medium">Volume</label>
-        <span className="al-w-12 al-rounded-md al-text-right al-text-sm">
-          50%
-        </span>
+        <span className="al-w-12 al-rounded-md al-text-right al-text-sm">50%</span>
       </div>
       <Slider defaultValue={[50]} max={100} step={1} />
     </div>

package/dist/storybook/Switch.stories.tsx

@@ -18,7 +18,7 @@ export default {
   },
 } as Meta;
 
-const Template: StoryFn = (args) => <Switch {...args} />;
+const Template: StoryFn = args => <Switch {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -60,10 +60,7 @@ export const WithDescription: StoryFn = () => (
   <div className="al-flex al-flex-col al-space-y-2">
     <div className="al-flex al-items-center al-space-x-2">
       <Switch id="notifications" />
-      <label
-        htmlFor="notifications"
-        className="al-text-sm al-font-medium al-leading-none"
-      >
+      <label htmlFor="notifications" className="al-text-sm al-font-medium al-leading-none">
         Enable Notifications
       </label>
     </div>
@@ -77,19 +74,13 @@ export const InForm: StoryFn = () => (
   <form className="al-w-full al-max-w-sm">
     <div className="al-flex al-flex-col al-space-y-4">
       <div className="al-flex al-items-center al-justify-between">
-        <label
-          htmlFor="marketing"
-          className="al-text-sm al-font-medium al-leading-none"
-        >
+        <label htmlFor="marketing" className="al-text-sm al-font-medium al-leading-none">
           Marketing emails
         </label>
         <Switch id="marketing" />
       </div>
       <div className="al-flex al-items-center al-justify-between">
-        <label
-          htmlFor="newsletter"
-          className="al-text-sm al-font-medium al-leading-none"
-        >
+        <label htmlFor="newsletter" className="al-text-sm al-font-medium al-leading-none">
           Weekly newsletter
         </label>
         <Switch id="newsletter" defaultChecked />