@moduix/solid-tailwind 1.0.0

package/dist/components/pin-input/PinInput.js

@@ -0,0 +1,144 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { PinInput, usePinInput, usePinInputContext } from "@ark-ui/solid/pin-input";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { SeparatorMarkIcon } from "../../internal/icons/ui/Icons.js";
+var _tmpl$ = /*#__PURE__*/ template("<span data-slot=pin-input-separator>");
+function PinInputRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'count',
+        'placeholder'
+    ]);
+    return createComponent(PinInput.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        get count () {
+            return local.count;
+        },
+        get placeholder () {
+            return local.placeholder ?? '';
+        },
+        "data-slot": "pin-input-root",
+        get ["class"] () {
+            return cn('inline-flex w-auto max-w-none flex-col items-start gap-2 data-disabled:opacity-50', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function PinInputRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(PinInput.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "pin-input-root-provider",
+        get ["class"] () {
+            return cn('inline-flex w-auto max-w-none flex-col items-start gap-2 data-disabled:opacity-50', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function PinInputLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(PinInput.Label, mergeProps({
+        "data-slot": "pin-input-label",
+        get ["class"] () {
+            return cn('text-sm leading-5 font-medium text-foreground', local.class);
+        }
+    }, others));
+}
+function PinInputControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(PinInput.Control, mergeProps({
+        "data-slot": "pin-input-control",
+        get ["class"] () {
+            return cn('inline-flex items-center gap-2', local.class);
+        }
+    }, others));
+}
+function PinInputInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(PinInput.Input, mergeProps({
+        "data-slot": "pin-input-input",
+        get ["class"] () {
+            return cn('size-control-md flex-none rounded-md border border-border bg-background px-0 py-0 text-center text-lg leading-7 font-medium text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none data-disabled:pointer-events-none data-invalid:border-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', local.class);
+        }
+    }, others));
+}
+function PinInputInputs(props) {
+    const pinInput = usePinInputContext();
+    return createComponent(For, {
+        get each () {
+            return pinInput().items;
+        },
+        children: (index)=>createComponent(PinInputInput, {
+                index: index,
+                get ["class"] () {
+                    return props.class;
+                }
+            })
+    });
+}
+function PinInputSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'aria-hidden',
+        'children',
+        'class',
+        'role'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps({
+            get ["aria-hidden"] () {
+                return local['aria-hidden'] ?? true;
+            },
+            get role () {
+                return local.role ?? 'presentation';
+            },
+            get ["class"] () {
+                return cn('pointer-events-none inline-flex size-4 flex-none items-center justify-center leading-none text-muted-foreground [&>svg]:size-full [&>svg]:flex-none', local.class);
+            }
+        }, others), false, true);
+        insert(_el$, ()=>resolvedChildren() ?? createComponent(SeparatorMarkIcon, {}));
+        return _el$;
+    })();
+}
+function PinInput_usePinInput(props = {}) {
+    return usePinInput(()=>({
+            placeholder: '',
+            ...'function' == typeof props ? props() : props
+        }));
+}
+const PinInput_PinInput = Object.assign(PinInputRoot, {
+    Root: PinInputRoot,
+    RootProvider: PinInputRootProvider,
+    Context: PinInput.Context,
+    HiddenInput: PinInput.HiddenInput,
+    Label: PinInputLabel,
+    Control: PinInputControl,
+    Input: PinInputInput,
+    Inputs: PinInputInputs,
+    Separator: PinInputSeparator
+});
+export { PinInput_PinInput as PinInput, PinInput_usePinInput as usePinInput, usePinInputContext };

package/dist/components/pin-input/PinInput.jsx

@@ -0,0 +1,80 @@
+import { PinInput, usePinInput, usePinInputContext } from "@ark-ui/solid/pin-input";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { SeparatorMarkIcon } from "../../internal/icons/ui/Icons.jsx";
+function PinInputRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'count',
+        'placeholder'
+    ]);
+    return <PinInput.Root asChild={local.asChild} count={local.count} placeholder={local.placeholder ?? ''} data-slot="pin-input-root" class={cn('inline-flex w-auto max-w-none flex-col items-start gap-2 data-disabled:opacity-50', local.class)} {...others}>
+      {local.children}
+    </PinInput.Root>;
+}
+function PinInputRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <PinInput.RootProvider asChild={local.asChild} data-slot="pin-input-root-provider" class={cn('inline-flex w-auto max-w-none flex-col items-start gap-2 data-disabled:opacity-50', local.class)} {...others}>
+      {local.children}
+    </PinInput.RootProvider>;
+}
+function PinInputLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <PinInput.Label data-slot="pin-input-label" class={cn('text-sm leading-5 font-medium text-foreground', local.class)} {...others}/>;
+}
+function PinInputControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <PinInput.Control data-slot="pin-input-control" class={cn('inline-flex items-center gap-2', local.class)} {...others}/>;
+}
+function PinInputInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <PinInput.Input data-slot="pin-input-input" class={cn('size-control-md flex-none rounded-md border border-border bg-background px-0 py-0 text-center text-lg leading-7 font-medium text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none data-disabled:pointer-events-none data-invalid:border-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', local.class)} {...others}/>;
+}
+function PinInputInputs(props) {
+    const pinInput = usePinInputContext();
+    return <For each={pinInput().items}>
+      {(index)=><PinInputInput index={index} class={props.class}/>}
+    </For>;
+}
+function PinInputSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'aria-hidden',
+        'children',
+        'class',
+        'role'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <span data-slot="pin-input-separator" aria-hidden={local['aria-hidden'] ?? true} role={local.role ?? 'presentation'} class={cn('pointer-events-none inline-flex size-4 flex-none items-center justify-center leading-none text-muted-foreground [&>svg]:size-full [&>svg]:flex-none', local.class)} {...others}>
+      {resolvedChildren() ?? <SeparatorMarkIcon/>}
+    </span>;
+}
+function PinInput_usePinInput(props = {}) {
+    return usePinInput(()=>({
+            placeholder: '',
+            ...'function' == typeof props ? props() : props
+        }));
+}
+const PinInput_PinInput = Object.assign(PinInputRoot, {
+    Root: PinInputRoot,
+    RootProvider: PinInputRootProvider,
+    Context: PinInput.Context,
+    HiddenInput: PinInput.HiddenInput,
+    Label: PinInputLabel,
+    Control: PinInputControl,
+    Input: PinInputInput,
+    Inputs: PinInputInputs,
+    Separator: PinInputSeparator
+});
+export { PinInput_PinInput as PinInput, PinInput_usePinInput as usePinInput, usePinInputContext };

package/dist/components/pin-input/index.d.ts

@@ -0,0 +1 @@
+export { PinInput, usePinInput, usePinInputContext } from './PinInput.js';

package/dist/components/pin-input/index.js

@@ -0,0 +1 @@
+export { PinInput, usePinInput, usePinInputContext } from "./PinInput.js";

package/dist/components/pin-input/index.jsx

@@ -0,0 +1 @@
+export { PinInput, usePinInput, usePinInputContext } from "./PinInput.jsx";

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,46 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import { Popover as PopoverPrimitive, usePopover, usePopoverContext } from '@ark-ui/solid/popover';
+import type { ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type PopoverRootProps = ComponentProps<typeof PopoverPrimitive.Root> & OverlayPortalProps;
+type PopoverRootProviderProps = ComponentProps<typeof PopoverPrimitive.RootProvider> & {
+    portalRef?: OverlayPortalProps['portalRef'];
+};
+type PopoverCloseIconProps = Omit<ComponentProps<typeof PopoverPrimitive.CloseTrigger>, 'asChild'>;
+declare function PopoverRoot(props: PopoverRootProps): import("solid-js").JSX.Element;
+declare function PopoverRootProvider(props: PopoverRootProviderProps): import("solid-js").JSX.Element;
+declare function PopoverAnchor(props: ComponentProps<typeof PopoverPrimitive.Anchor>): import("solid-js").JSX.Element;
+declare function PopoverTrigger(props: ComponentProps<typeof PopoverPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function PopoverIndicator(props: ComponentProps<typeof PopoverPrimitive.Indicator>): import("solid-js").JSX.Element;
+declare function PopoverPositioner(props: ComponentProps<typeof PopoverPrimitive.Positioner>): import("solid-js").JSX.Element;
+declare function PopoverContent(props: ComponentProps<typeof PopoverPrimitive.Content>): import("solid-js").JSX.Element;
+declare function PopoverArrow(props: ComponentProps<typeof PopoverPrimitive.Arrow>): import("solid-js").JSX.Element;
+declare function PopoverArrowTip(props: ComponentProps<typeof PopoverPrimitive.ArrowTip>): import("solid-js").JSX.Element;
+declare function PopoverTitle(props: ComponentProps<typeof PopoverPrimitive.Title>): import("solid-js").JSX.Element;
+declare function PopoverDescription(props: ComponentProps<typeof PopoverPrimitive.Description>): import("solid-js").JSX.Element;
+declare function PopoverCloseTrigger(props: ComponentProps<typeof PopoverPrimitive.CloseTrigger>): import("solid-js").JSX.Element;
+declare function PopoverCloseIcon(props: PopoverCloseIconProps): import("solid-js").JSX.Element;
+declare function PopoverHeader(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function PopoverBody(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function PopoverFooter(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare const Popover: typeof PopoverRoot & {
+    Root: typeof PopoverRoot;
+    RootProvider: typeof PopoverRootProvider;
+    Context: (props: PopoverPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Anchor: typeof PopoverAnchor;
+    Trigger: typeof PopoverTrigger;
+    Indicator: typeof PopoverIndicator;
+    Positioner: typeof PopoverPositioner;
+    Content: typeof PopoverContent;
+    Arrow: typeof PopoverArrow;
+    ArrowTip: typeof PopoverArrowTip;
+    Title: typeof PopoverTitle;
+    Description: typeof PopoverDescription;
+    CloseTrigger: typeof PopoverCloseTrigger;
+    CloseIcon: typeof PopoverCloseIcon;
+    Header: typeof PopoverHeader;
+    Body: typeof PopoverBody;
+    Footer: typeof PopoverFooter;
+};
+export { Popover, usePopover, usePopoverContext };
+export type { PopoverRootProps, PopoverRootProviderProps };

package/dist/components/popover/Popover.js

@@ -0,0 +1,288 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { Popover, usePopover, usePopoverContext } from "@ark-ui/solid/popover";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+const DEFAULT_CLOSE_BUTTON_LABEL = 'Close popover';
+function PopoverRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'modal',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    const resolvedPortalled = ()=>local.modal || local.portalled;
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return resolvedPortalled();
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Popover.Root, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get modal () {
+                    return local.modal;
+                },
+                get portalled () {
+                    return resolvedPortalled();
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function PopoverRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalRef',
+        'unmountOnExit',
+        'value'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return props.value().portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Popover.RootProvider, mergeProps({
+                get value () {
+                    return local.value;
+                },
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function PopoverAnchor(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Popover.Anchor, mergeProps({
+        "data-slot": "popover-anchor",
+        get ["class"] () {
+            return local.class;
+        }
+    }, others));
+}
+function PopoverTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Popover.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "popover-trigger",
+        get ["class"] () {
+            return cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-0 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 active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:not-data-[value]:bg-accent data-[current]:data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
+        }
+    }, others));
+}
+function PopoverIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Popover.Indicator, mergeProps({
+        "data-slot": "popover-indicator",
+        get ["class"] () {
+            return local.class;
+        }
+    }, others));
+}
+function PopoverPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Popover.Positioner, mergeProps({
+                "data-slot": "popover-positioner",
+                get ["class"] () {
+                    return cn('z-[var(--z-index,var(--moduix-z-popup))] max-w-[var(--available-width)] outline-0', local.class);
+                }
+            }, others));
+        }
+    });
+}
+function PopoverContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Popover.Content, mergeProps({
+        "data-slot": "popover-content",
+        get ["class"] () {
+            return cn('group/popover-content relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] max-h-[min(24rem,var(--available-height,100dvh))] max-w-[min(28rem,var(--available-width))] min-w-[min(16rem,var(--available-width))] origin-[var(--transform-origin)] overflow-visible rounded-md bg-popover p-4 wrap-anywhere text-popover-foreground shadow-lg outline-1 outline-border has-[>[data-slot=popover-body]]:flex has-[>[data-slot=popover-body]]:flex-col data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none has-[>[data-slot=popover-body]]:[&>[data-slot=popover-body]]:overflow-auto', local.class);
+        }
+    }, others));
+}
+function PopoverArrow(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Popover.Arrow, mergeProps({
+        "data-slot": "popover-arrow",
+        get ["class"] () {
+            return cn('[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(PopoverArrowTip, {});
+        }
+    }));
+}
+function PopoverArrowTip(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Popover.ArrowTip, mergeProps({
+        "data-slot": "popover-arrow-tip",
+        get ["class"] () {
+            return cn('border-t border-l border-border', local.class);
+        }
+    }, others));
+}
+function PopoverTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Popover.Title, mergeProps({
+        "data-slot": "popover-title",
+        get ["class"] () {
+            return cn('text-md leading-6 font-semibold text-popover-foreground', local.class);
+        }
+    }, others));
+}
+function PopoverDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Popover.Description, mergeProps({
+        "data-slot": "popover-description",
+        get ["class"] () {
+            return cn('text-sm leading-5 text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function PopoverCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Popover.CloseTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "popover-close-trigger",
+        get ["class"] () {
+            return cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-0 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 active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
+        }
+    }, others));
+}
+function PopoverCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Popover.CloseTrigger, mergeProps({
+        asChild: (triggerProps)=>createComponent(CloseButton.Root, mergeProps(triggerProps, {
+                "data-slot": "popover-close-icon",
+                get ["aria-label"] () {
+                    return local['aria-label'] ?? DEFAULT_CLOSE_BUTTON_LABEL;
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get ["class"] () {
+                    return cn('absolute end-3 top-3 size-7 rounded-sm bg-transparent text-muted-foreground transition-[background-color,color,opacity] 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.5 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-popover-foreground', local.class);
+                },
+                get children () {
+                    return resolvedChildren();
+                }
+            }))
+    }, others));
+}
+function PopoverHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "popover-header",
+        get ["class"] () {
+            return cn('grid gap-1 group-has-[>[data-slot=popover-close-icon]]/popover-content:pe-10', local.class);
+        }
+    }, others));
+}
+function PopoverBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "popover-body",
+        get ["class"] () {
+            return cn('min-h-0', local.class);
+        }
+    }, others));
+}
+function PopoverFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "popover-footer",
+        get ["class"] () {
+            return cn('mt-3 flex items-center justify-end gap-2', local.class);
+        }
+    }, others));
+}
+const Popover_Popover = Object.assign(PopoverRoot, {
+    Root: PopoverRoot,
+    RootProvider: PopoverRootProvider,
+    Context: Popover.Context,
+    Anchor: PopoverAnchor,
+    Trigger: PopoverTrigger,
+    Indicator: PopoverIndicator,
+    Positioner: PopoverPositioner,
+    Content: PopoverContent,
+    Arrow: PopoverArrow,
+    ArrowTip: PopoverArrowTip,
+    Title: PopoverTitle,
+    Description: PopoverDescription,
+    CloseTrigger: PopoverCloseTrigger,
+    CloseIcon: PopoverCloseIcon,
+    Header: PopoverHeader,
+    Body: PopoverBody,
+    Footer: PopoverFooter
+});
+export { Popover_Popover as Popover, usePopover, usePopoverContext };