@stubber/ui 1.0.0

package/dist/components/radio-group/radio-group-item.svelte

@@ -0,0 +1,22 @@
+<script>import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+import { cn } from "../../utils/shadcn-utils.js";
+let className = void 0;
+export let value;
+export { className as class };
+</script>
+
+<RadioGroupPrimitive.Item
+  {value}
+  class={cn(
+    "border-input text-primary ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-100 ease-in-out hover:border-primary data-[state=checked]:bg-white  data-[state=checked]:border-primary",
+    className
+  )}
+  {...$$restProps}
+  on:click
+>
+  <div class="flex items-center justify-center">
+    <RadioGroupPrimitive.ItemIndicator>
+      <div class="h-1.5 w-1.5 rounded-full bg-primary" />
+    </RadioGroupPrimitive.ItemIndicator>
+  </div>
+</RadioGroupPrimitive.Item>

package/dist/components/radio-group/radio-group-item.svelte.d.ts

@@ -0,0 +1,13 @@
+import { SvelteComponent } from "svelte";
+import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+declare const __propDef: {
+    props: RadioGroupPrimitive.ItemProps;
+    slots: {};
+    events: RadioGroupPrimitive.ItemEvents;
+};
+export type RadioGroupItemProps = typeof __propDef.props;
+export type RadioGroupItemEvents = typeof __propDef.events;
+export type RadioGroupItemSlots = typeof __propDef.slots;
+export default class RadioGroupItem extends SvelteComponent<RadioGroupItemProps, RadioGroupItemEvents, RadioGroupItemSlots> {
+}
+export {};

package/dist/components/radio-group/radio-group.svelte

@@ -0,0 +1,10 @@
+<script>import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+import { cn } from "../../utils/shadcn-utils.js";
+let className = void 0;
+export let value = void 0;
+export { className as class };
+</script>
+
+<RadioGroupPrimitive.Root bind:value class={cn("grid gap-2", className)} {...$$restProps}>
+  <slot />
+</RadioGroupPrimitive.Root>

package/dist/components/radio-group/radio-group.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+declare const __propDef: {
+    props: RadioGroupPrimitive.Props;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type RadioGroupProps = typeof __propDef.props;
+export type RadioGroupEvents = typeof __propDef.events;
+export type RadioGroupSlots = typeof __propDef.slots;
+export default class RadioGroup extends SvelteComponent<RadioGroupProps, RadioGroupEvents, RadioGroupSlots> {
+}
+export {};

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,3 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+export { Root, Scrollbar, Root as ScrollArea, Scrollbar as ScrollAreaScrollbar, };

package/dist/components/scroll-area/index.js

@@ -0,0 +1,5 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+export { Root, Scrollbar, 
+//,
+Root as ScrollArea, Scrollbar as ScrollAreaScrollbar, };

package/dist/components/scroll-area/scroll-area-scrollbar.svelte

@@ -0,0 +1,21 @@
+<script>import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+import { cn } from "../../utils/shadcn-utils.js";
+let className = void 0;
+export let orientation = "vertical";
+export { className as class };
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+  {orientation}
+  class={cn(
+    "flex touch-none select-none transition-colors",
+    orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+    orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+    className
+  )}
+>
+  <slot />
+  <ScrollAreaPrimitive.Thumb
+    class={cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1")}
+  />
+</ScrollAreaPrimitive.Scrollbar>

package/dist/components/scroll-area/scroll-area-scrollbar.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        asChild?: boolean | undefined;
+        el?: HTMLDivElement | undefined;
+    } & {
+        orientation: "vertical" | "horizontal";
+    } & import("bits-ui/dist/internal").HTMLDivAttributes & {
+        orientation?: "vertical" | "horizontal" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ScrollAreaScrollbarProps = typeof __propDef.props;
+export type ScrollAreaScrollbarEvents = typeof __propDef.events;
+export type ScrollAreaScrollbarSlots = typeof __propDef.slots;
+export default class ScrollAreaScrollbar extends SvelteComponent<ScrollAreaScrollbarProps, ScrollAreaScrollbarEvents, ScrollAreaScrollbarSlots> {
+}
+export {};

package/dist/components/scroll-area/scroll-area.svelte

@@ -0,0 +1,24 @@
+<script>import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+import { Scrollbar } from "./index.js";
+import { cn } from "../../utils/shadcn-utils.js";
+let className = void 0;
+export { className as class };
+export let orientation = "vertical";
+export let scrollbarXClasses = "";
+export let scrollbarYClasses = "";
+</script>
+
+<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
+  <ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Content>
+      <slot />
+    </ScrollAreaPrimitive.Content>
+  </ScrollAreaPrimitive.Viewport>
+  {#if orientation === "vertical" || orientation === "both"}
+    <Scrollbar orientation="vertical" class={scrollbarYClasses} />
+  {/if}
+  {#if orientation === "horizontal" || orientation === "both"}
+    <Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+  {/if}
+  <ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>

package/dist/components/scroll-area/scroll-area.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: import("@melt-ui/svelte/index.js").ScrollAreaType | undefined;
+        dir?: import("@melt-ui/svelte/internal/types").TextDirection | undefined;
+        hideDelay?: number | undefined;
+    } & {
+        asChild?: boolean | undefined;
+        el?: HTMLDivElement | undefined;
+    } & import("bits-ui/dist/internal/types.js").HTMLDivAttributes & {
+        orientation?: "vertical" | "horizontal" | "both" | undefined;
+        scrollbarXClasses?: string | undefined;
+        scrollbarYClasses?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ScrollAreaProps = typeof __propDef.props;
+export type ScrollAreaEvents = typeof __propDef.events;
+export type ScrollAreaSlots = typeof __propDef.slots;
+export default class ScrollArea extends SvelteComponent<ScrollAreaProps, ScrollAreaEvents, ScrollAreaSlots> {
+}
+export {};

package/dist/components/select/index.d.ts

@@ -0,0 +1,11 @@
+import { Select as SelectPrimitive } from "bits-ui";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+declare const Root: typeof SelectPrimitive.Root;
+declare const Group: typeof SelectPrimitive.Group;
+declare const Input: typeof SelectPrimitive.Input;
+declare const Value: typeof SelectPrimitive.Value;
+export { Root, Group, Input, Label, Item, Value, Content, Trigger, Separator, Root as Select, Group as SelectGroup, Input as SelectInput, Label as SelectLabel, Item as SelectItem, Value as SelectValue, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, };

package/dist/components/select/index.js

@@ -0,0 +1,13 @@
+import { Select as SelectPrimitive } from "bits-ui";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+const Input = SelectPrimitive.Input;
+const Value = SelectPrimitive.Value;
+export { Root, Group, Input, Label, Item, Value, Content, Trigger, Separator, 
+//
+Root as Select, Group as SelectGroup, Input as SelectInput, Label as SelectLabel, Item as SelectItem, Value as SelectValue, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, };

package/dist/components/select/select-content.svelte

@@ -0,0 +1,33 @@
+<script>import { Select as SelectPrimitive } from "bits-ui";
+import { scale } from "svelte/transition";
+import { cn, flyAndScale } from "../../utils/shadcn-utils.js";
+export let sideOffset = 4;
+export let inTransition = flyAndScale;
+export let inTransitionConfig = void 0;
+export let outTransition = scale;
+export let outTransitionConfig = {
+  start: 0.95,
+  opacity: 0,
+  duration: 50
+};
+let className = void 0;
+export { className as class };
+</script>
+
+<SelectPrimitive.Content
+  {inTransition}
+  {inTransitionConfig}
+  {outTransition}
+  {outTransitionConfig}
+  {sideOffset}
+  class={cn(
+    "bg-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded border shadow-md outline-none",
+    className
+  )}
+  {...$$restProps}
+  on:keydown
+>
+  <div class="w-full p-1">
+    <slot />
+  </div>
+</SelectPrimitive.Content>

package/dist/components/select/select-content.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import { Select as SelectPrimitive } from "bits-ui";
+declare const __propDef: {
+    props: SelectPrimitive.ContentProps;
+    slots: {
+        default: {};
+    };
+    events: SelectPrimitive.ContentEvents;
+};
+export type SelectContentProps = typeof __propDef.props;
+export type SelectContentEvents = typeof __propDef.events;
+export type SelectContentSlots = typeof __propDef.slots;
+export default class SelectContent extends SvelteComponent<SelectContentProps, SelectContentEvents, SelectContentSlots> {
+}
+export {};

package/dist/components/select/select-item.svelte

@@ -0,0 +1,34 @@
+<script>import { Select as SelectPrimitive } from "bits-ui";
+import { cn } from "../../utils/shadcn-utils.js";
+let className = void 0;
+export let value;
+export let label = void 0;
+export let disabled = void 0;
+export { className as class };
+</script>
+
+<SelectPrimitive.Item
+  {value}
+  {disabled}
+  {label}
+  class={cn(
+    "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    className
+  )}
+  {...$$restProps}
+  on:click
+  on:keydown
+  on:focusin
+  on:focusout
+  on:pointerleave
+  on:pointermove
+>
+  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <SelectPrimitive.ItemIndicator>
+      <i class="fa-regular fa-check h-4 w-4" />
+    </SelectPrimitive.ItemIndicator>
+  </span>
+  <slot>
+    {label || value}
+  </slot>
+</SelectPrimitive.Item>

package/dist/components/select/select-item.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import { Select as SelectPrimitive } from "bits-ui";
+declare const __propDef: {
+    props: SelectPrimitive.ItemProps;
+    slots: {
+        default: {};
+    };
+    events: SelectPrimitive.ItemEvents;
+};
+export type SelectItemProps = typeof __propDef.props;
+export type SelectItemEvents = typeof __propDef.events;
+export type SelectItemSlots = typeof __propDef.slots;
+export default class SelectItem extends SvelteComponent<SelectItemProps, SelectItemEvents, SelectItemSlots> {
+}
+export {};

package/dist/components/select/select-label.svelte

@@ -0,0 +1,12 @@
+<script>import { Select as SelectPrimitive } from "bits-ui";
+import { cn } from "../../utils/shadcn-utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<SelectPrimitive.Label
+  class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+  {...$$restProps}
+>
+  <slot />
+</SelectPrimitive.Label>

package/dist/components/select/select-label.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { Select as SelectPrimitive } from "bits-ui";
+declare const __propDef: {
+    props: SelectPrimitive.LabelProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SelectLabelProps = typeof __propDef.props;
+export type SelectLabelEvents = typeof __propDef.events;
+export type SelectLabelSlots = typeof __propDef.slots;
+export default class SelectLabel extends SvelteComponent<SelectLabelProps, SelectLabelEvents, SelectLabelSlots> {
+}
+export {};

package/dist/components/select/select-separator.svelte

@@ -0,0 +1,7 @@
+<script>import { Select as SelectPrimitive } from "bits-ui";
+import { cn } from "../../utils/shadcn-utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<SelectPrimitive.Separator class={cn("bg-muted -mx-1 my-1 h-px", className)} {...$$restProps} />

package/dist/components/select/select-separator.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import { Select as SelectPrimitive } from "bits-ui";
+declare const __propDef: {
+    props: SelectPrimitive.SeparatorProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SelectSeparatorProps = typeof __propDef.props;
+export type SelectSeparatorEvents = typeof __propDef.events;
+export type SelectSeparatorSlots = typeof __propDef.slots;
+export default class SelectSeparator extends SvelteComponent<SelectSeparatorProps, SelectSeparatorEvents, SelectSeparatorSlots> {
+}
+export {};

package/dist/components/select/select-trigger.svelte

@@ -0,0 +1,21 @@
+<script>import { Select as SelectPrimitive } from "bits-ui";
+import { cn } from "../../utils/shadcn-utils.js";
+let className = void 0;
+export { className as class };
+</script>
+
+<SelectPrimitive.Trigger
+  class={cn(
+    "bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-black flex h-7 w-full items-center justify-between rounded px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+    className
+  )}
+  {...$$restProps}
+  let:builder
+  on:click
+  on:keydown
+>
+  <slot {builder} />
+  <div>
+    <i class="fa-regular fa-chevron-down h-4 w-4 gap-2" />
+  </div>
+</SelectPrimitive.Trigger>

package/dist/components/select/select-trigger.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+import { Select as SelectPrimitive } from "bits-ui";
+declare const __propDef: {
+    props: SelectPrimitive.TriggerProps;
+    slots: {
+        default: {
+            builder: {
+                readonly 'aria-activedescendant': string | undefined;
+                readonly 'aria-autocomplete': "list";
+                readonly 'aria-controls': string;
+                readonly 'aria-expanded': boolean;
+                readonly 'aria-labelledby': string;
+                readonly id: string;
+                readonly role: "combobox";
+                readonly disabled: true | undefined;
+                readonly type: "button" | undefined;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "input" | "keydown">;
+            };
+        };
+    };
+    events: SelectPrimitive.TriggerEvents;
+};
+export type SelectTriggerProps = typeof __propDef.props;
+export type SelectTriggerEvents = typeof __propDef.events;
+export type SelectTriggerSlots = typeof __propDef.slots;
+export default class SelectTrigger extends SvelteComponent<SelectTriggerProps, SelectTriggerEvents, SelectTriggerSlots> {
+}
+export {};

package/dist/components/separator/index.d.ts

@@ -0,0 +1,2 @@
+import Root from "./separator.svelte";
+export { Root, Root as Separator, };

package/dist/components/separator/index.js

@@ -0,0 +1,4 @@
+import Root from "./separator.svelte";
+export { Root, 
+//
+Root as Separator, };

package/dist/components/separator/separator.svelte

@@ -0,0 +1,18 @@
+<script>import { Separator as SeparatorPrimitive } from "bits-ui";
+import { cn } from "../../utils/shadcn-utils.js";
+let className = void 0;
+export let orientation = "horizontal";
+export let decorative = void 0;
+export { className as class };
+</script>
+
+<SeparatorPrimitive.Root
+  class={cn(
+    "bg-border shrink-0",
+    orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
+    className
+  )}
+  {orientation}
+  {decorative}
+  {...$$restProps}
+/>

package/dist/components/separator/separator.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import { Separator as SeparatorPrimitive } from "bits-ui";
+declare const __propDef: {
+    props: SeparatorPrimitive.Props;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SeparatorProps = typeof __propDef.props;
+export type SeparatorEvents = typeof __propDef.events;
+export type SeparatorSlots = typeof __propDef.slots;
+export default class Separator extends SvelteComponent<SeparatorProps, SeparatorEvents, SeparatorSlots> {
+}
+export {};

package/dist/components/sheet/index.d.ts

@@ -0,0 +1,114 @@
+import { Dialog as SheetPrimitive } from "bits-ui";
+import { type VariantProps } from "tailwind-variants";
+import Portal from "./sheet-portal.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+declare const Root: typeof SheetPrimitive.Root;
+declare const Close: typeof SheetPrimitive.Close;
+declare const Trigger: typeof SheetPrimitive.Trigger;
+export { Root, Close, Trigger, Portal, Overlay, Content, Header, Footer, Title, Description, Root as Sheet, Root as SheetRoot, Close as SheetClose, Trigger as SheetTrigger, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription, };
+export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}, undefined, "bg-background fixed z-50 gap-4 p-6 shadow-lg", import("tailwind-variants/dist/config").TVConfig<{
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}, {
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}>, {
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}, undefined, "bg-background fixed z-50 gap-4 p-6 shadow-lg", import("tailwind-variants/dist/config").TVConfig<{
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}, {
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const sheetTransitions: {
+    top: {
+        in: {
+            y: string;
+            duration: number;
+            opacity: number;
+        };
+        out: {
+            y: string;
+            duration: number;
+            opacity: number;
+        };
+    };
+    bottom: {
+        in: {
+            y: string;
+            duration: number;
+            opacity: number;
+        };
+        out: {
+            y: string;
+            duration: number;
+            opacity: number;
+        };
+    };
+    left: {
+        in: {
+            x: string;
+            duration: number;
+            opacity: number;
+        };
+        out: {
+            x: string;
+            duration: number;
+            opacity: number;
+        };
+    };
+    right: {
+        in: {
+            x: string;
+            duration: number;
+            opacity: number;
+        };
+        out: {
+            x: string;
+            duration: number;
+            opacity: number;
+        };
+    };
+};
+export type Side = VariantProps<typeof sheetVariants>["side"];

package/dist/components/sheet/index.js

@@ -0,0 +1,79 @@
+import { Dialog as SheetPrimitive } from "bits-ui";
+import { tv } from "tailwind-variants";
+import Portal from "./sheet-portal.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+const Root = SheetPrimitive.Root;
+const Close = SheetPrimitive.Close;
+const Trigger = SheetPrimitive.Trigger;
+export { Root, Close, Trigger, Portal, Overlay, Content, Header, Footer, Title, Description, 
+//
+Root as Sheet, Root as SheetRoot, Close as SheetClose, Trigger as SheetTrigger, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription, };
+export const sheetVariants = tv({
+    base: "bg-background fixed z-50 gap-4 p-6 shadow-lg",
+    variants: {
+        side: {
+            top: "inset-x-0 top-0 border-b",
+            bottom: "inset-x-0 bottom-0 border-t",
+            left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+            right: "inset-y-0 right-0 h-full w-3/4  border-l sm:max-w-sm",
+        },
+    },
+    defaultVariants: {
+        side: "right",
+    },
+});
+export const sheetTransitions = {
+    top: {
+        in: {
+            y: "-100%",
+            duration: 500,
+            opacity: 1,
+        },
+        out: {
+            y: "-100%",
+            duration: 300,
+            opacity: 1,
+        },
+    },
+    bottom: {
+        in: {
+            y: "100%",
+            duration: 500,
+            opacity: 1,
+        },
+        out: {
+            y: "100%",
+            duration: 300,
+            opacity: 1,
+        },
+    },
+    left: {
+        in: {
+            x: "-100%",
+            duration: 500,
+            opacity: 1,
+        },
+        out: {
+            x: "-100%",
+            duration: 300,
+            opacity: 1,
+        },
+    },
+    right: {
+        in: {
+            x: "100%",
+            duration: 500,
+            opacity: 1,
+        },
+        out: {
+            x: "100%",
+            duration: 300,
+            opacity: 1,
+        },
+    },
+};