@moduix/solid-tailwind 1.0.0

package/dist/components/drawer/Drawer.jsx

@@ -0,0 +1,179 @@
+import { Drawer, useDrawer, useDrawerContext, useDrawerStackContext } from "@ark-ui/solid/drawer";
+import { ark } from "@ark-ui/solid/factory";
+import { children, createContext, splitProps, useContext } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+const DEFAULT_CLOSE_BUTTON_LABEL = 'Close drawer';
+const DrawerVariantContext = createContext();
+function DrawerRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit',
+        'variant',
+        'swipeDirection',
+        'snapPoints',
+        'defaultSnapPoint'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <DrawerVariantContext.Provider value={local.variant}>
+        <Drawer.Root lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} swipeDirection={local.swipeDirection} snapPoints={local.snapPoints ?? ('island' === local.variant ? [
+        1
+    ] : void 0)} defaultSnapPoint={void 0 !== local.defaultSnapPoint ? local.defaultSnapPoint : 'island' === local.variant ? 1 : void 0} {...others}>
+          {local.children}
+        </Drawer.Root>
+      </DrawerVariantContext.Provider>
+    </OverlayPortalProvider>;
+}
+function DrawerRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <Drawer.RootProvider lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </Drawer.RootProvider>
+    </OverlayPortalProvider>;
+}
+const DrawerStack = Drawer.Stack;
+function DrawerTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Drawer.Trigger asChild={local.asChild} data-slot="drawer-trigger" class={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 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 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 DrawerBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Drawer.Backdrop data-slot="drawer-backdrop" class={cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] min-h-dvh bg-overlay backdrop-blur-xs [transition:opacity_calc(var(--drawer-swipe-strength,1)*450ms)_ease-out,backdrop-filter_calc(var(--drawer-swipe-strength,1)*450ms)_ease-out] data-[state=closed]:animate-moduix-drawer-backdrop-out data-[state=open]:animate-moduix-drawer-backdrop-in data-[state=open]:data-swiping:[transition-duration:0s] motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms] [&[hidden]:has(~[data-slot=drawer-positioner]:not([hidden]))]:block', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function DrawerPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <Drawer.Positioner data-slot="drawer-positioner" class={cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] box-border flex items-end justify-center overflow-hidden overscroll-contain p-0 has-[>[data-slot=drawer-content][data-variant=island]]:pt-[max(1rem,env(safe-area-inset-top,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pr-[max(1rem,env(safe-area-inset-right,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pb-[max(1rem,env(safe-area-inset-bottom,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pl-[max(1rem,env(safe-area-inset-left,0px))] data-[swipe-direction=left]:items-stretch data-[swipe-direction=left]:justify-start data-[swipe-direction=right]:items-stretch data-[swipe-direction=right]:justify-end data-[swipe-direction=up]:items-start [&:not([hidden])_[data-slot=drawer-content][hidden]]:flex', local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function DrawerContent(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'draggable',
+        'variant'
+    ]);
+    const rootVariant = useContext(DrawerVariantContext);
+    return <Drawer.Content data-slot="drawer-content" data-variant={local.variant ?? rootVariant} class={cn("group/drawer relative box-border flex h-full max-h-[80dvh] w-full max-w-[100vw] origin-bottom [translate:0_0] [scale:1] flex-col overscroll-contain rounded-t-xl rounded-b-none border border-border bg-popover px-6 pt-3 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] text-popover-foreground shadow-lg outline-0 [transition:transform_calc(var(--drawer-swipe-strength,1)*450ms)_cubic-bezier(0,0,0.2,1),scale_450ms_cubic-bezier(0.32,0.72,0,1),translate_450ms_cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-control-xl after:bg-inherit after:content-[''] data-dragging:select-none data-nested-drawer-swiping:[transition-duration:0s] data-[nested-drawer-open]:[scale:calc(1-0.05*var(--nested-drawers,0))] data-[state=closed]:animate-moduix-drawer-content-out-down data-[state=open]:animate-moduix-drawer-content-in-down data-[state=open]:data-swiping:[transition-duration:0s] data-[swipe-direction=down]:data-[nested-drawer-open]:[translate:0_calc(-1*40px*var(--nested-drawers,0))] data-[swipe-direction=left]:h-full data-[swipe-direction=left]:max-h-none data-[swipe-direction=left]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:rounded-s-none data-[swipe-direction=left]:rounded-e-xl data-[swipe-direction=left]:p-6 data-[swipe-direction=left]:after:inset-x-auto data-[swipe-direction=left]:after:inset-y-0 data-[swipe-direction=left]:after:top-0 data-[swipe-direction=left]:after:right-full data-[swipe-direction=left]:after:h-auto data-[swipe-direction=left]:after:w-control-xl data-[swipe-direction=left]:data-[nested-drawer-open]:[translate:calc(40px*var(--nested-drawers,0))_0] data-[swipe-direction=left]:data-[state=closed]:animate-moduix-drawer-content-out-left data-[swipe-direction=left]:data-[state=open]:animate-moduix-drawer-content-in-left data-[swipe-direction=right]:h-full data-[swipe-direction=right]:max-h-none data-[swipe-direction=right]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:rounded-s-xl data-[swipe-direction=right]:rounded-e-none data-[swipe-direction=right]:p-6 data-[swipe-direction=right]:after:inset-x-auto data-[swipe-direction=right]:after:inset-y-0 data-[swipe-direction=right]:after:top-0 data-[swipe-direction=right]:after:left-full data-[swipe-direction=right]:after:h-auto data-[swipe-direction=right]:after:w-control-xl data-[swipe-direction=right]:data-[nested-drawer-open]:[translate:calc(-1*40px*var(--nested-drawers,0))_0] data-[swipe-direction=right]:data-[state=closed]:animate-moduix-drawer-content-out-right data-[swipe-direction=right]:data-[state=open]:animate-moduix-drawer-content-in-right data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:rounded-t-none data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:pt-[calc(1rem+env(safe-area-inset-top,0px))] data-[swipe-direction=up]:pb-4 data-[swipe-direction=up]:after:top-auto data-[swipe-direction=up]:after:bottom-full data-[swipe-direction=up]:data-[nested-drawer-open]:[translate:0_calc(40px*var(--nested-drawers,0))] data-[swipe-direction=up]:data-[state=closed]:animate-moduix-drawer-content-out-up data-[swipe-direction=up]:data-[state=open]:animate-moduix-drawer-content-in-up data-[variant=island]:rounded-xl data-[variant=island]:after:hidden motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]", local.class)} draggable={local.draggable ?? true} {...others}/>;
+}
+function DrawerGrabber(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Drawer.Grabber data-slot="drawer-grabber" class={cn('group/grabber flex w-full shrink-0 cursor-grab items-center justify-center pb-1 select-none group-data-[swipe-direction=left]/drawer:hidden group-data-[swipe-direction=right]/drawer:hidden active:cursor-grabbing', local.class)} {...others}/>;
+}
+function DrawerGrabberIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Drawer.GrabberIndicator data-slot="drawer-grabber-indicator" class={cn('h-1 w-12 rounded-full bg-muted-foreground opacity-[0.45] transition-[background-color,opacity] duration-200 ease-in-out motion-reduce:transition-none [@media(hover:hover)]:group-hover/grabber:opacity-70', local.class)} {...others}/>;
+}
+function DrawerTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Drawer.Title data-slot="drawer-title" class={cn('text-lg font-semibold text-popover-foreground', local.class)} {...others}/>;
+}
+function DrawerDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Drawer.Description data-slot="drawer-description" class={cn('text-md leading-6 text-muted-foreground', local.class)} {...others}/>;
+}
+function DrawerCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <Drawer.CloseTrigger asChild={local.asChild} data-slot="drawer-close-trigger" class={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 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 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 DrawerCloseIcon(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Drawer.CloseTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} data-slot="drawer-close-icon" aria-label={local['aria-label'] ?? (null == local['aria-labelledby'] ? DEFAULT_CLOSE_BUTTON_LABEL : void 0)} aria-labelledby={local['aria-labelledby']} class={cn('absolute end-4 top-4 z-2 size-7 rounded-md 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 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-popover-foreground', local.class)}>
+          {resolvedChildren()}
+        </CloseButton.Root>} {...others}/>;
+}
+function DrawerSwipeArea(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Drawer.SwipeArea data-slot="drawer-swipe-area" class={cn('fixed z-50 touch-none data-disabled:pointer-events-none data-[swipe-direction=down]:start-0 data-[swipe-direction=down]:end-0 data-[swipe-direction=down]:top-0 data-[swipe-direction=down]:h-10 data-[swipe-direction=left]:end-0 data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:bottom-0 data-[swipe-direction=left]:w-10 data-[swipe-direction=right]:start-0 data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:bottom-0 data-[swipe-direction=right]:w-10 data-[swipe-direction=up]:start-0 data-[swipe-direction=up]:end-0 data-[swipe-direction=up]:bottom-0 data-[swipe-direction=up]:h-10', local.class)} {...others}/>;
+}
+function DrawerIndent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Drawer.Indent data-slot="drawer-indent" class={cn('relative origin-top [translate:0_0] [scale:1] transition-[transform,border-radius] duration-[450ms] ease-spring data-active:[translate:0_calc(8px*(1-var(--drawer-swipe-progress,0)))] data-active:[scale:calc(0.97+(1-0.97)*var(--drawer-swipe-progress,0))] data-active:rounded-t-lg data-active:rounded-b-none motion-reduce:[transition-duration:1ms]', local.class)} {...others}/>;
+}
+function DrawerIndentBackground(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Drawer.IndentBackground data-slot="drawer-indent-background" class={cn('pointer-events-none absolute inset-0 bg-foreground opacity-0 transition-opacity duration-[450ms] ease-spring data-active:opacity-[calc(1-var(--drawer-swipe-progress,0))] motion-reduce:[transition-duration:1ms]', local.class)} {...others}/>;
+}
+function DrawerHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="drawer-header" class={cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-1 [&>[data-slot='drawer-close-icon']]:col-start-2 [&>[data-slot='drawer-close-icon']]:justify-self-end [&>[data-slot='drawer-close-trigger']]:col-start-2 [&>[data-slot='drawer-close-trigger']]:justify-self-end [&>[data-slot='drawer-description']]:col-span-2 [&>[data-slot='drawer-title']]:col-start-1", local.class)} {...others}/>;
+}
+function DrawerBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="drawer-body" class={cn('mt-4 min-h-0 overflow-y-auto text-md leading-6 text-muted-foreground', local.class)} {...others}/>;
+}
+function DrawerFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-slot="drawer-footer" class={cn('mt-6 flex justify-end gap-2', local.class)} {...others}/>;
+}
+const Drawer_Drawer = Object.assign(DrawerRoot, {
+    Root: DrawerRoot,
+    RootProvider: DrawerRootProvider,
+    Context: Drawer.Context,
+    Stack: DrawerStack,
+    Trigger: DrawerTrigger,
+    Backdrop: DrawerBackdrop,
+    Positioner: DrawerPositioner,
+    Content: DrawerContent,
+    Grabber: DrawerGrabber,
+    GrabberIndicator: DrawerGrabberIndicator,
+    Title: DrawerTitle,
+    Description: DrawerDescription,
+    CloseTrigger: DrawerCloseTrigger,
+    CloseIcon: DrawerCloseIcon,
+    SwipeArea: DrawerSwipeArea,
+    Indent: DrawerIndent,
+    IndentBackground: DrawerIndentBackground,
+    Header: DrawerHeader,
+    Body: DrawerBody,
+    Footer: DrawerFooter
+});
+export { Drawer_Drawer as Drawer, useDrawer, useDrawerContext, useDrawerStackContext };

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

@@ -0,0 +1 @@
+export { Drawer, useDrawer, useDrawerContext, useDrawerStackContext } from './Drawer.js';

package/dist/components/drawer/index.js

@@ -0,0 +1 @@
+export { Drawer, useDrawer, useDrawerContext, useDrawerStackContext } from "./Drawer.js";

package/dist/components/drawer/index.jsx

@@ -0,0 +1 @@
+export { Drawer, useDrawer, useDrawerContext, useDrawerStackContext } from "./Drawer.jsx";

package/dist/components/editable/Editable.d.ts

@@ -0,0 +1,29 @@
+import { Editable as EditablePrimitive, useEditable, useEditableContext } from '@ark-ui/solid/editable';
+import type { ComponentProps } from 'solid-js';
+declare function EditableRoot(props: ComponentProps<typeof EditablePrimitive.Root>): import("solid-js").JSX.Element;
+declare function EditableRootProvider(props: ComponentProps<typeof EditablePrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function EditableLabel(props: ComponentProps<typeof EditablePrimitive.Label>): import("solid-js").JSX.Element;
+declare function EditableArea(props: ComponentProps<typeof EditablePrimitive.Area>): import("solid-js").JSX.Element;
+declare function EditableInput(props: ComponentProps<typeof EditablePrimitive.Input>): import("solid-js").JSX.Element;
+declare function EditablePreview(props: ComponentProps<typeof EditablePrimitive.Preview>): import("solid-js").JSX.Element;
+declare function EditableControl(props: ComponentProps<typeof EditablePrimitive.Control>): import("solid-js").JSX.Element;
+declare function EditableEditTrigger(props: ComponentProps<typeof EditablePrimitive.EditTrigger>): import("solid-js").JSX.Element;
+declare function EditableSubmitTrigger(props: ComponentProps<typeof EditablePrimitive.SubmitTrigger>): import("solid-js").JSX.Element;
+declare function EditableCancelTrigger(props: ComponentProps<typeof EditablePrimitive.CancelTrigger>): import("solid-js").JSX.Element;
+type EditableControlsProps = Omit<ComponentProps<typeof EditablePrimitive.Control>, 'asChild' | 'children'>;
+declare function EditableControls(props: EditableControlsProps): import("solid-js").JSX.Element;
+declare const Editable: typeof EditableRoot & {
+    Root: typeof EditableRoot;
+    RootProvider: typeof EditableRootProvider;
+    Label: typeof EditableLabel;
+    Area: typeof EditableArea;
+    Input: typeof EditableInput;
+    Preview: typeof EditablePreview;
+    Control: typeof EditableControl;
+    EditTrigger: typeof EditableEditTrigger;
+    SubmitTrigger: typeof EditableSubmitTrigger;
+    CancelTrigger: typeof EditableCancelTrigger;
+    Controls: typeof EditableControls;
+    Context: (props: EditablePrimitive.ContextProps) => import("solid-js").JSX.Element;
+};
+export { Editable, useEditable, useEditableContext };

package/dist/components/editable/Editable.js

@@ -0,0 +1,181 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Editable, useEditable, useEditableContext } from "@ark-ui/solid/editable";
+import { Show, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, CloseIcon, PencilIcon } from "../../internal/icons/ui/Icons.js";
+function EditableRoot(props) {
+    const [local, others] = splitProps(props, [
+        'activationMode',
+        'class'
+    ]);
+    return createComponent(Editable.Root, mergeProps({
+        "data-slot": "editable-root",
+        get activationMode () {
+            return local.activationMode ?? 'dblclick';
+        },
+        get ["class"] () {
+            return cn('box-border inline-grid max-w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-1 text-foreground has-[[data-disabled]]:opacity-50', local.class);
+        }
+    }, others));
+}
+function EditableRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Editable.RootProvider, mergeProps({
+        "data-slot": "editable-root-provider",
+        get ["class"] () {
+            return cn('box-border inline-grid max-w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-1 text-foreground has-[[data-disabled]]:opacity-50', local.class);
+        }
+    }, others));
+}
+function EditableLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Editable.Label, mergeProps({
+        "data-slot": "editable-label",
+        get ["class"] () {
+            return cn('col-span-full inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground data-invalid:text-destructive', local.class);
+        }
+    }, others));
+}
+function EditableArea(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Editable.Area, mergeProps({
+        "data-slot": "editable-area",
+        get ["class"] () {
+            return cn('col-start-1 box-border inline-flex min-h-control-md w-full min-w-0 items-center rounded-md border border-border bg-background px-3.5 py-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out has-[[aria-invalid=true]]:border-destructive has-[[data-invalid]]:border-destructive data-disabled:pointer-events-none data-focus:outline-ring data-focus:has-[[aria-invalid=true]]:outline-destructive data-focus:has-[[data-invalid]]:outline-destructive motion-reduce:transition-none', local.class);
+        }
+    }, others));
+}
+function EditableInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Editable.Input, mergeProps({
+        "data-slot": "editable-input",
+        get ["class"] () {
+            return cn('box-border block w-full min-w-0 appearance-none bg-transparent text-md leading-6 text-inherit outline-0 placeholder:text-muted-foreground [&:is(textarea)]:min-h-24 [&:is(textarea)]:resize-y', local.class);
+        }
+    }, others));
+}
+function EditablePreview(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Editable.Preview, mergeProps({
+        "data-slot": "editable-preview",
+        get ["class"] () {
+            return cn('box-border block min-h-[1lh] w-full min-w-0 cursor-text bg-transparent text-md leading-6 text-inherit outline-0 aria-readonly:cursor-default data-disabled:cursor-default data-readonly:cursor-default data-[placeholder-shown]:text-muted-foreground', local.class);
+        }
+    }, others));
+}
+function EditableControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Editable.Control, mergeProps({
+        "data-slot": "editable-control",
+        get ["class"] () {
+            return cn('col-start-2 inline-flex items-center gap-1 self-center', local.class);
+        }
+    }, others));
+}
+function EditableEditTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Editable.EditTrigger, mergeProps({
+        "data-slot": "editable-edit-trigger",
+        get ["class"] () {
+            return cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(PencilIcon, {});
+        }
+    }));
+}
+function EditableSubmitTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Editable.SubmitTrigger, mergeProps({
+        "data-slot": "editable-submit-trigger",
+        get ["class"] () {
+            return cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CheckIcon, {});
+        }
+    }));
+}
+function EditableCancelTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Editable.CancelTrigger, mergeProps({
+        "data-slot": "editable-cancel-trigger",
+        get ["class"] () {
+            return cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CloseIcon, {});
+        }
+    }));
+}
+function EditableControls(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(EditableControl, mergeProps({
+        get ["class"] () {
+            return local.class;
+        }
+    }, others, {
+        get children () {
+            return createComponent(Editable.Context, {
+                children: (editable)=>createComponent(Show, {
+                        get when () {
+                            return editable().editing;
+                        },
+                        get fallback () {
+                            return createComponent(EditableEditTrigger, {});
+                        },
+                        get children () {
+                            return [
+                                createComponent(EditableSubmitTrigger, {}),
+                                createComponent(EditableCancelTrigger, {})
+                            ];
+                        }
+                    })
+            });
+        }
+    }));
+}
+const Editable_Editable = Object.assign(EditableRoot, {
+    Root: EditableRoot,
+    RootProvider: EditableRootProvider,
+    Label: EditableLabel,
+    Area: EditableArea,
+    Input: EditableInput,
+    Preview: EditablePreview,
+    Control: EditableControl,
+    EditTrigger: EditableEditTrigger,
+    SubmitTrigger: EditableSubmitTrigger,
+    CancelTrigger: EditableCancelTrigger,
+    Controls: EditableControls,
+    Context: Editable.Context
+});
+export { Editable_Editable as Editable, useEditable, useEditableContext };

package/dist/components/editable/Editable.jsx

@@ -0,0 +1,105 @@
+import { Editable, useEditable, useEditableContext } from "@ark-ui/solid/editable";
+import { Show, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { CheckIcon, CloseIcon, PencilIcon } from "../../internal/icons/ui/Icons.jsx";
+function EditableRoot(props) {
+    const [local, others] = splitProps(props, [
+        'activationMode',
+        'class'
+    ]);
+    return <Editable.Root data-slot="editable-root" activationMode={local.activationMode ?? 'dblclick'} class={cn('box-border inline-grid max-w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-1 text-foreground has-[[data-disabled]]:opacity-50', local.class)} {...others}/>;
+}
+function EditableRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Editable.RootProvider data-slot="editable-root-provider" class={cn('box-border inline-grid max-w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-1 text-foreground has-[[data-disabled]]:opacity-50', local.class)} {...others}/>;
+}
+function EditableLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Editable.Label data-slot="editable-label" class={cn('col-span-full inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground data-invalid:text-destructive', local.class)} {...others}/>;
+}
+function EditableArea(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Editable.Area data-slot="editable-area" class={cn('col-start-1 box-border inline-flex min-h-control-md w-full min-w-0 items-center rounded-md border border-border bg-background px-3.5 py-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out has-[[aria-invalid=true]]:border-destructive has-[[data-invalid]]:border-destructive data-disabled:pointer-events-none data-focus:outline-ring data-focus:has-[[aria-invalid=true]]:outline-destructive data-focus:has-[[data-invalid]]:outline-destructive motion-reduce:transition-none', local.class)} {...others}/>;
+}
+function EditableInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Editable.Input data-slot="editable-input" class={cn('box-border block w-full min-w-0 appearance-none bg-transparent text-md leading-6 text-inherit outline-0 placeholder:text-muted-foreground [&:is(textarea)]:min-h-24 [&:is(textarea)]:resize-y', local.class)} {...others}/>;
+}
+function EditablePreview(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Editable.Preview data-slot="editable-preview" class={cn('box-border block min-h-[1lh] w-full min-w-0 cursor-text bg-transparent text-md leading-6 text-inherit outline-0 aria-readonly:cursor-default data-disabled:cursor-default data-readonly:cursor-default data-[placeholder-shown]:text-muted-foreground', local.class)} {...others}/>;
+}
+function EditableControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Editable.Control data-slot="editable-control" class={cn('col-start-2 inline-flex items-center gap-1 self-center', local.class)} {...others}/>;
+}
+function EditableEditTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Editable.EditTrigger data-slot="editable-edit-trigger" class={cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}>
+      {resolvedChildren() ?? <PencilIcon/>}
+    </Editable.EditTrigger>;
+}
+function EditableSubmitTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Editable.SubmitTrigger data-slot="editable-submit-trigger" class={cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}>
+      {resolvedChildren() ?? <CheckIcon/>}
+    </Editable.SubmitTrigger>;
+}
+function EditableCancelTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Editable.CancelTrigger data-slot="editable-cancel-trigger" class={cn('box-border inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}>
+      {resolvedChildren() ?? <CloseIcon/>}
+    </Editable.CancelTrigger>;
+}
+function EditableControls(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <EditableControl class={local.class} {...others}>
+      <Editable.Context>
+        {(editable)=><Show when={editable().editing} fallback={<EditableEditTrigger/>}>
+            <EditableSubmitTrigger/>
+            <EditableCancelTrigger/>
+          </Show>}
+      </Editable.Context>
+    </EditableControl>;
+}
+const Editable_Editable = Object.assign(EditableRoot, {
+    Root: EditableRoot,
+    RootProvider: EditableRootProvider,
+    Label: EditableLabel,
+    Area: EditableArea,
+    Input: EditableInput,
+    Preview: EditablePreview,
+    Control: EditableControl,
+    EditTrigger: EditableEditTrigger,
+    SubmitTrigger: EditableSubmitTrigger,
+    CancelTrigger: EditableCancelTrigger,
+    Controls: EditableControls,
+    Context: Editable.Context
+});
+export { Editable_Editable as Editable, useEditable, useEditableContext };

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

@@ -0,0 +1 @@
+export { Editable, useEditable, useEditableContext } from './Editable.js';

package/dist/components/editable/index.js

@@ -0,0 +1 @@
+export { Editable, useEditable, useEditableContext } from "./Editable.js";

package/dist/components/editable/index.jsx

@@ -0,0 +1 @@
+export { Editable, useEditable, useEditableContext } from "./Editable.jsx";

package/dist/components/empty/Empty.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+declare function EmptyRoot(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function EmptyIcon(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function EmptyContent(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function EmptyTitle(props: HTMLArkProps<'h3'>): import("solid-js").JSX.Element;
+declare function EmptyDescription(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function EmptyActions(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare const Empty: typeof EmptyRoot & {
+    Root: typeof EmptyRoot;
+    Icon: typeof EmptyIcon;
+    Content: typeof EmptyContent;
+    Title: typeof EmptyTitle;
+    Description: typeof EmptyDescription;
+    Actions: typeof EmptyActions;
+};
+export { Empty };