@moduix/solid-tailwind 1.0.0

package/dist/components/command-palette/CommandPalette.jsx

@@ -0,0 +1,324 @@
+import { Combobox } from "@ark-ui/solid/combobox";
+import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
+import { ark } from "@ark-ui/solid/factory";
+import { isHotKey } from "@zag-js/hotkeys";
+import { children, createEffect, onCleanup, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { CheckIcon, CloseIcon } from "../../internal/icons/ui/Icons.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { Kbd } from "../kbd/index.jsx";
+import { ScrollArea } from "../scroll-area/index.jsx";
+const DEFAULT_CLEAR_TRIGGER_LABEL = 'Clear search';
+const DEFAULT_SEARCH_INPUT_LABEL = 'Search commands';
+function CommandPaletteRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'shortcut',
+        'lazyMount',
+        'onExitComplete',
+        'portalled',
+        'present',
+        'portalRef',
+        'skipAnimationOnMount',
+        'unmountOnExit'
+    ]);
+    const dialog = useDialog(others);
+    createEffect(()=>{
+        const shortcut = local.shortcut;
+        if (!shortcut) return;
+        const handleKeyDown = (event)=>{
+            const currentDialog = dialog();
+            if (event.defaultPrevented || event.repeat || event.isComposing || !isHotKey(shortcut, event, {
+                enableOnContentEditable: currentDialog.open,
+                enableOnFormTags: currentDialog.open
+            })) return;
+            event.preventDefault();
+            currentDialog.setOpen(!currentDialog.open);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        onCleanup(()=>document.removeEventListener('keydown', handleKeyDown));
+    });
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Dialog.RootProvider value={dialog} lazyMount={local.lazyMount ?? true} onExitComplete={local.onExitComplete} present={local.present} skipAnimationOnMount={local.skipAnimationOnMount} unmountOnExit={local.unmountOnExit ?? true}>
+        {local.children}
+      </Dialog.RootProvider>
+    </OverlayPortalProvider>;
+}
+function CommandPaletteRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Dialog.RootProvider lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Dialog.RootProvider>
+    </OverlayPortalProvider>;
+}
+function CommandPaletteTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Dialog.Trigger asChild={local.asChild} data-slot="command-palette-trigger" class={cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}/>;
+}
+function CommandPaletteBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Dialog.Backdrop data-slot="command-palette-backdrop" class={cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] bg-overlay backdrop-blur-[4px] data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:animate-none', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function CommandPalettePositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Dialog.Positioner data-slot="command-palette-positioner" class={cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] grid items-start justify-items-center overflow-hidden overscroll-contain px-4 pt-[10dvh] pb-4', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function CommandPaletteContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Content data-slot="command-palette-content" class={cn('flex max-h-[min(34rem,calc(100dvh-5rem))] w-[min(37.5rem,calc(100vw-2rem))] origin-top flex-col overflow-hidden rounded-lg border border-border/84 bg-popover bg-linear-to-b from-white/4 to-transparent text-popover-foreground shadow-lg outline-0 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class)} {...others}/>;
+}
+function CommandPalettePanel(props) {
+    const [local, others] = splitProps(props, [
+        'children'
+    ]);
+    return <>
+      <CommandPaletteBackdrop/>
+      <CommandPalettePositioner>
+        <CommandPaletteContent {...others}>
+          <CommandPaletteBody>{local.children}</CommandPaletteBody>
+        </CommandPaletteContent>
+      </CommandPalettePositioner>
+    </>;
+}
+function CommandPaletteTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Title data-slot="command-palette-title" class={cn('text-md leading-6 font-semibold text-popover-foreground', local.class)} {...others}/>;
+}
+function CommandPaletteDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Dialog.Description data-slot="command-palette-description" class={cn('text-sm leading-5 text-muted-foreground', local.class)} {...others}/>;
+}
+function CommandPaletteHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="command-palette-header" class={cn('grid gap-1 px-4 pt-4', local.class)} {...others}/>;
+}
+function CommandPaletteBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="command-palette-body" class={cn('flex min-h-0 flex-1 flex-col', local.class)} {...others}/>;
+}
+const CommandPalette_CommandPaletteCombobox = function(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'open',
+        'inputBehavior',
+        'selectionBehavior',
+        'closeOnSelect',
+        'disableLayer',
+        'onSelect'
+    ]);
+    const dialog = useDialogContext();
+    const handleSelect = (details)=>{
+        local.onSelect?.(details);
+        if (local.closeOnSelect ?? true) dialog().setOpen(false);
+    };
+    return <Combobox.Root data-slot="command-palette-combobox" class={cn('flex min-h-0 flex-1 flex-col overflow-hidden', local.class)} open={local.open ?? true} inputBehavior={local.inputBehavior ?? 'autohighlight'} selectionBehavior={local.selectionBehavior ?? 'preserve'} closeOnSelect={local.closeOnSelect ?? true} disableLayer={local.disableLayer ?? true} onSelect={handleSelect} {...others}>
+      {local.children}
+    </Combobox.Root>;
+};
+function CommandPaletteControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.Control data-slot="command-palette-control" class={cn('relative mx-3 mt-3 flex min-h-control-md flex-none items-center gap-2 rounded-md border border-border bg-background px-3 py-1 text-foreground transition-[background-color,border-color] duration-200 ease-in-out has-[[aria-invalid=true]]:border-destructive has-[[data-invalid]]:border-destructive', local.class)} {...others}/>;
+}
+function CommandPaletteInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.Input data-slot="command-palette-input" class={cn('h-auto w-full min-w-0 flex-1 bg-transparent text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground data-invalid:text-destructive', local.class)} {...others}/>;
+}
+function CommandPaletteSearch(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby'
+    ]);
+    return <CommandPaletteControl>
+      <CommandPaletteInput aria-label={local['aria-label'] ?? (null == local['aria-labelledby'] ? DEFAULT_SEARCH_INPUT_LABEL : void 0)} aria-labelledby={local['aria-labelledby']} {...others}/>
+      <CommandPaletteClearTrigger/>
+    </CommandPaletteControl>;
+}
+function CommandPaletteClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'children',
+        'onClick',
+        'onPointerDown',
+        'aria-label',
+        'aria-labelledby'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Combobox.Context>
+      {(combobox)=><Combobox.ClearTrigger asChild={local.asChild} data-slot="command-palette-clear-trigger" hidden={0 === combobox().inputValue.length} aria-label={local['aria-label'] ?? (!local.asChild && null == local.children && null == local['aria-labelledby'] ? DEFAULT_CLEAR_TRIGGER_LABEL : void 0)} aria-labelledby={local['aria-labelledby']} class={cn('inline-flex size-6 shrink-0 cursor-pointer appearance-none items-center justify-center rounded-md bg-transparent text-muted-foreground transition-[background-color,color,opacity,translate,scale] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-3 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-popover-foreground', local.class)} onClick={(event)=>{
+            local.onClick?.(event);
+            if (!event.defaultPrevented) combobox().setInputValue('');
+        }} onPointerDown={(event)=>{
+            local.onPointerDown?.(event);
+            if (0 === event.button) {
+                event.preventDefault();
+                combobox().setInputValue('');
+            }
+        }} {...others}>
+          {resolvedChildren() ?? <CloseIcon/>}
+        </Combobox.ClearTrigger>}
+    </Combobox.Context>;
+}
+function CommandPaletteList(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'children'
+    ]);
+    return <Combobox.Content data-slot="command-palette-list" class={cn('group/list flex min-h-0 flex-1 overflow-hidden outline-0', local.class)} {...others}>
+      <ScrollArea data-slot="command-palette-scroll-area" class="h-auto min-h-0 flex-1">
+        <ScrollArea.Viewport data-slot="command-palette-scroll-viewport" class="scroll-py-2">
+          <ScrollArea.Content data-slot="command-palette-scroll-content" class="min-h-full px-3 py-3 group-data-[empty]/list:p-0">
+            {local.children}
+          </ScrollArea.Content>
+        </ScrollArea.Viewport>
+      </ScrollArea>
+    </Combobox.Content>;
+}
+function CommandPaletteEmpty(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.Empty data-slot="command-palette-empty" class={cn('[&:not(:empty)]:px-4 [&:not(:empty)]:py-3 [&:not(:empty)]:text-sm [&:not(:empty)]:leading-5 [&:not(:empty)]:text-muted-foreground', local.class)} {...others}/>;
+}
+function CommandPaletteItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.ItemGroup data-slot="command-palette-item-group" class={cn('grid gap-1 [&:not(:last-child)]:pb-2', local.class)} {...others}/>;
+}
+function CommandPaletteItemGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.ItemGroupLabel data-slot="command-palette-item-group-label" class={cn('sticky top-0 z-1 block bg-popover px-3 py-1 text-xs leading-4 font-normal text-muted-foreground', local.class)} {...others}/>;
+}
+function CommandPaletteItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.Item data-slot="command-palette-item" class={cn('relative z-0 grid min-h-control-sm cursor-default grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-3 rounded-md px-3 py-1 text-sm leading-5 text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-foreground data-[state=checked]:text-foreground', local.class)} {...others}/>;
+}
+function CommandPaletteItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Combobox.ItemText data-slot="command-palette-item-text" class={cn('grid min-w-0 gap-1', local.class)} {...others}/>;
+}
+function CommandPaletteItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'children'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Combobox.ItemIndicator data-slot="command-palette-item-indicator" class={cn('inline-flex size-8 items-center justify-center justify-self-end rounded-md border border-transparent bg-transparent text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0', local.class)} {...others}>
+      {resolvedChildren() ?? <CheckIcon/>}
+    </Combobox.ItemIndicator>;
+}
+function CommandPaletteItemIcon(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="command-palette-item-icon" class={cn('inline-flex size-8 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0', local.class)} {...others}/>;
+}
+function CommandPaletteItemLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="command-palette-item-label" class={cn('min-w-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+}
+function CommandPaletteItemDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="command-palette-item-description" class={cn('min-w-0 overflow-hidden text-xs leading-4 text-ellipsis whitespace-nowrap text-muted-foreground', local.class)} {...others}/>;
+}
+function CommandPaletteItemMeta(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-slot="command-palette-item-meta" class={cn('justify-self-end text-xs leading-4 whitespace-nowrap text-muted-foreground', local.class)} {...others}/>;
+}
+function CommandPaletteSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div role="separator" data-slot="command-palette-separator" class={cn('mx-2 my-2 h-px bg-border', local.class)} {...others}/>;
+}
+function CommandPaletteFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="command-palette-footer" class={cn('flex flex-none items-center justify-between gap-3 border-t border-border px-4 py-2 text-xs leading-4 text-muted-foreground', local.class)} {...others}/>;
+}
+function CommandPaletteKbd(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Kbd.Root data-slot="command-palette-kbd" class={cn('min-h-5 min-w-5 rounded-sm px-1 text-xs leading-4 text-muted-foreground', local.class)} {...others}/>;
+}
+const CommandPalette = Object.assign(CommandPaletteRoot, {
+    Root: CommandPaletteRoot,
+    RootProvider: CommandPaletteRootProvider,
+    Trigger: CommandPaletteTrigger,
+    Backdrop: CommandPaletteBackdrop,
+    Positioner: CommandPalettePositioner,
+    Content: CommandPaletteContent,
+    Panel: CommandPalettePanel,
+    Title: CommandPaletteTitle,
+    Description: CommandPaletteDescription,
+    Header: CommandPaletteHeader,
+    Body: CommandPaletteBody,
+    Combobox: CommandPalette_CommandPaletteCombobox,
+    Control: CommandPaletteControl,
+    Input: CommandPaletteInput,
+    Search: CommandPaletteSearch,
+    ClearTrigger: CommandPaletteClearTrigger,
+    List: CommandPaletteList,
+    Empty: CommandPaletteEmpty,
+    ItemGroup: CommandPaletteItemGroup,
+    ItemGroupLabel: CommandPaletteItemGroupLabel,
+    Item: CommandPaletteItem,
+    ItemText: CommandPaletteItemText,
+    ItemIndicator: CommandPaletteItemIndicator,
+    ItemIcon: CommandPaletteItemIcon,
+    ItemLabel: CommandPaletteItemLabel,
+    ItemDescription: CommandPaletteItemDescription,
+    ItemMeta: CommandPaletteItemMeta,
+    Separator: CommandPaletteSeparator,
+    Footer: CommandPaletteFooter,
+    Kbd: CommandPaletteKbd
+});
+export { CommandPalette };

package/dist/components/command-palette/index.d.ts

@@ -0,0 +1 @@
+export * from './CommandPalette.js';

package/dist/components/command-palette/index.js

@@ -0,0 +1 @@
+export * from "./CommandPalette.js";

package/dist/components/command-palette/index.jsx

@@ -0,0 +1 @@
+export * from "./CommandPalette.jsx";

package/dist/components/container/Container.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type ContainerGutter = 'none' | 'sm' | 'md' | 'lg';
+type ContainerRootProps = HTMLArkProps<'div'> & {
+    size?: ContainerSize;
+    gutter?: ContainerGutter;
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+    'data-size'?: string;
+    'data-gutter'?: string;
+};
+declare function ContainerRoot(props: ContainerRootProps): import("solid-js").JSX.Element;
+declare const Container: typeof ContainerRoot & {
+    Root: typeof ContainerRoot;
+};
+export { Container };

package/dist/components/container/Container.js

@@ -0,0 +1,140 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+const containerVariants = cva('w-full min-w-0 mx-auto', {
+    variants: {
+        size: {
+            xs: 'max-w-[calc(40rem_+_(clamp(1rem,4vw,2rem)*2))]',
+            sm: 'max-w-[calc(48rem_+_(clamp(1rem,4vw,2rem)*2))]',
+            md: 'max-w-[calc(64rem_+_(clamp(1rem,4vw,2rem)*2))]',
+            lg: 'max-w-[calc(72rem_+_(clamp(1rem,4vw,2rem)*2))]',
+            xl: 'max-w-[calc(90rem_+_(clamp(1rem,4vw,2rem)*2))]',
+            full: 'max-w-none'
+        },
+        gutter: {
+            none: 'px-0',
+            sm: 'px-[clamp(0.75rem,3vw,1.5rem)]',
+            md: 'px-[clamp(1rem,4vw,2rem)]',
+            lg: 'px-[clamp(1.5rem,5vw,3rem)]'
+        }
+    },
+    compoundVariants: [
+        {
+            size: 'xs',
+            gutter: 'none',
+            class: 'max-w-none'
+        },
+        {
+            size: 'xs',
+            gutter: 'sm',
+            class: 'max-w-[calc(40rem_+_(clamp(0.75rem,3vw,1.5rem)*2))]'
+        },
+        {
+            size: 'xs',
+            gutter: 'lg',
+            class: 'max-w-[calc(40rem_+_(clamp(1.5rem,5vw,3rem)*2))]'
+        },
+        {
+            size: 'sm',
+            gutter: 'none',
+            class: 'max-w-none'
+        },
+        {
+            size: 'sm',
+            gutter: 'sm',
+            class: 'max-w-[calc(48rem_+_(clamp(0.75rem,3vw,1.5rem)*2))]'
+        },
+        {
+            size: 'sm',
+            gutter: 'lg',
+            class: 'max-w-[calc(48rem_+_(clamp(1.5rem,5vw,3rem)*2))]'
+        },
+        {
+            size: 'md',
+            gutter: 'none',
+            class: 'max-w-none'
+        },
+        {
+            size: 'md',
+            gutter: 'sm',
+            class: 'max-w-[calc(64rem_+_(clamp(0.75rem,3vw,1.5rem)*2))]'
+        },
+        {
+            size: 'md',
+            gutter: 'lg',
+            class: 'max-w-[calc(64rem_+_(clamp(1.5rem,5vw,3rem)*2))]'
+        },
+        {
+            size: 'lg',
+            gutter: 'none',
+            class: 'max-w-none'
+        },
+        {
+            size: 'lg',
+            gutter: 'sm',
+            class: 'max-w-[calc(72rem_+_(clamp(0.75rem,3vw,1.5rem)*2))]'
+        },
+        {
+            size: 'lg',
+            gutter: 'lg',
+            class: 'max-w-[calc(72rem_+_(clamp(1.5rem,5vw,3rem)*2))]'
+        },
+        {
+            size: 'xl',
+            gutter: 'none',
+            class: 'max-w-none'
+        },
+        {
+            size: 'xl',
+            gutter: 'sm',
+            class: 'max-w-[calc(90rem_+_(clamp(0.75rem,3vw,1.5rem)*2))]'
+        },
+        {
+            size: 'xl',
+            gutter: 'lg',
+            class: 'max-w-[calc(90rem_+_(clamp(1.5rem,5vw,3rem)*2))]'
+        }
+    ],
+    defaultVariants: {
+        size: 'lg',
+        gutter: 'md'
+    }
+});
+function ContainerRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'gutter',
+        'size',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-size',
+        'data-gutter'
+    ]);
+    const size = local.size ?? 'lg';
+    const gutter = local.gutter ?? 'md';
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "container",
+        "data-part": "root",
+        "data-slot": "container-root",
+        "data-size": size,
+        "data-gutter": gutter,
+        get ["class"] () {
+            return cn(containerVariants({
+                size,
+                gutter
+            }), local.class);
+        }
+    }));
+}
+const Container = Object.assign(ContainerRoot, {
+    Root: ContainerRoot
+});
+export { Container };

package/dist/components/container/Container.jsx

@@ -0,0 +1,126 @@
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+const containerVariants = cva('w-full min-w-0 mx-auto', {
+    variants: {
+        size: {
+            xs: 'max-w-[calc(40rem_+_(clamp(1rem,4vw,2rem)*2))]',
+            sm: 'max-w-[calc(48rem_+_(clamp(1rem,4vw,2rem)*2))]',
+            md: 'max-w-[calc(64rem_+_(clamp(1rem,4vw,2rem)*2))]',
+            lg: 'max-w-[calc(72rem_+_(clamp(1rem,4vw,2rem)*2))]',
+            xl: 'max-w-[calc(90rem_+_(clamp(1rem,4vw,2rem)*2))]',
+            full: 'max-w-none'
+        },
+        gutter: {
+            none: 'px-0',
+            sm: 'px-[clamp(0.75rem,3vw,1.5rem)]',
+            md: 'px-[clamp(1rem,4vw,2rem)]',
+            lg: 'px-[clamp(1.5rem,5vw,3rem)]'
+        }
+    },
+    compoundVariants: [
+        {
+            size: 'xs',
+            gutter: 'none',
+            class: 'max-w-none'
+        },
+        {
+            size: 'xs',
+            gutter: 'sm',
+            class: 'max-w-[calc(40rem_+_(clamp(0.75rem,3vw,1.5rem)*2))]'
+        },
+        {
+            size: 'xs',
+            gutter: 'lg',
+            class: 'max-w-[calc(40rem_+_(clamp(1.5rem,5vw,3rem)*2))]'
+        },
+        {
+            size: 'sm',
+            gutter: 'none',
+            class: 'max-w-none'
+        },
+        {
+            size: 'sm',
+            gutter: 'sm',
+            class: 'max-w-[calc(48rem_+_(clamp(0.75rem,3vw,1.5rem)*2))]'
+        },
+        {
+            size: 'sm',
+            gutter: 'lg',
+            class: 'max-w-[calc(48rem_+_(clamp(1.5rem,5vw,3rem)*2))]'
+        },
+        {
+            size: 'md',
+            gutter: 'none',
+            class: 'max-w-none'
+        },
+        {
+            size: 'md',
+            gutter: 'sm',
+            class: 'max-w-[calc(64rem_+_(clamp(0.75rem,3vw,1.5rem)*2))]'
+        },
+        {
+            size: 'md',
+            gutter: 'lg',
+            class: 'max-w-[calc(64rem_+_(clamp(1.5rem,5vw,3rem)*2))]'
+        },
+        {
+            size: 'lg',
+            gutter: 'none',
+            class: 'max-w-none'
+        },
+        {
+            size: 'lg',
+            gutter: 'sm',
+            class: 'max-w-[calc(72rem_+_(clamp(0.75rem,3vw,1.5rem)*2))]'
+        },
+        {
+            size: 'lg',
+            gutter: 'lg',
+            class: 'max-w-[calc(72rem_+_(clamp(1.5rem,5vw,3rem)*2))]'
+        },
+        {
+            size: 'xl',
+            gutter: 'none',
+            class: 'max-w-none'
+        },
+        {
+            size: 'xl',
+            gutter: 'sm',
+            class: 'max-w-[calc(90rem_+_(clamp(0.75rem,3vw,1.5rem)*2))]'
+        },
+        {
+            size: 'xl',
+            gutter: 'lg',
+            class: 'max-w-[calc(90rem_+_(clamp(1.5rem,5vw,3rem)*2))]'
+        }
+    ],
+    defaultVariants: {
+        size: 'lg',
+        gutter: 'md'
+    }
+});
+function ContainerRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'gutter',
+        'size',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-size',
+        'data-gutter'
+    ]);
+    const size = local.size ?? 'lg';
+    const gutter = local.gutter ?? 'md';
+    return <ark.div asChild={local.asChild} {...others} data-scope="container" data-part="root" data-slot="container-root" data-size={size} data-gutter={gutter} class={cn(containerVariants({
+        size,
+        gutter
+    }), local.class)}/>;
+}
+const Container = Object.assign(ContainerRoot, {
+    Root: ContainerRoot
+});
+export { Container };

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

@@ -0,0 +1 @@
+export * from './Container.js';

package/dist/components/container/index.js

@@ -0,0 +1 @@
+export * from "./Container.js";

package/dist/components/container/index.jsx

@@ -0,0 +1 @@
+export * from "./Container.jsx";

package/dist/components/date-input/DateInput.d.ts

@@ -0,0 +1,25 @@
+import { DateInput as DateInputPrimitive, type DateInputDateValue, useDateInput, useDateInputContext } from '@ark-ui/solid/date-input';
+import type { ComponentProps } from 'solid-js';
+declare function DateInputRoot(props: ComponentProps<typeof DateInputPrimitive.Root>): import("solid-js").JSX.Element;
+declare function DateInputRootProvider(props: ComponentProps<typeof DateInputPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function DateInputLabel(props: ComponentProps<typeof DateInputPrimitive.Label>): import("solid-js").JSX.Element;
+declare function DateInputControl(props: ComponentProps<typeof DateInputPrimitive.Control>): import("solid-js").JSX.Element;
+declare function DateInputSegmentGroup(props: ComponentProps<typeof DateInputPrimitive.SegmentGroup>): import("solid-js").JSX.Element;
+declare function DateInputSegment(props: ComponentProps<typeof DateInputPrimitive.Segment>): import("solid-js").JSX.Element;
+type DateInputSegmentsProps = Omit<ComponentProps<typeof DateInputPrimitive.SegmentGroup>, 'asChild' | 'children'>;
+declare function DateInputSegments(props: DateInputSegmentsProps): import("solid-js").JSX.Element;
+declare function DateInputSeparator(props: ComponentProps<'span'>): import("solid-js").JSX.Element;
+declare const DateInput: typeof DateInputRoot & {
+    Root: typeof DateInputRoot;
+    RootProvider: typeof DateInputRootProvider;
+    HiddenInput: (props: DateInputPrimitive.HiddenInputProps) => import("solid-js").JSX.Element;
+    Label: typeof DateInputLabel;
+    Control: typeof DateInputControl;
+    SegmentGroup: typeof DateInputSegmentGroup;
+    Segment: typeof DateInputSegment;
+    Segments: typeof DateInputSegments;
+    Separator: typeof DateInputSeparator;
+    Context: (props: DateInputPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    SegmentContext: (props: DateInputPrimitive.SegmentContextProps) => import("solid-js").JSX.Element;
+};
+export { DateInput, type DateInputDateValue, useDateInput, useDateInputContext };