@moduix/solid 1.0.0

package/dist/components/toast/Toast.js

@@ -0,0 +1,185 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { Toast, Toaster, createToaster, useToastContext } from "@ark-ui/solid/toast";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+import Toast_module from "./Toast.module.js";
+const DEFAULT_CLOSE_TRIGGER_LABEL = 'Close toast';
+function Toast_Toaster(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'portalRef',
+        'portalled'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled ?? true;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(OverlayPortal, {
+                get children () {
+                    return createComponent(Toaster, mergeProps({
+                        "data-slot": "toast-toaster",
+                        get ["class"] () {
+                            return clsx(Toast_module.toaster, local.class);
+                        }
+                    }, others, {
+                        get children () {
+                            return local.children ?? ((toast)=>createComponent(DefaultToast, {
+                                    toast: toast
+                                }));
+                        }
+                    }));
+                }
+            });
+        }
+    });
+}
+function DefaultToast(props) {
+    const hasAction = ()=>null != props.toast().action;
+    const actionLabel = ()=>props.toast().action?.label;
+    return createComponent(ToastRoot, {
+        get children () {
+            return [
+                memo(()=>memo(()=>null != props.toast().title)() ? createComponent(ToastTitle, {}) : null),
+                memo(()=>memo(()=>null != props.toast().description)() ? createComponent(ToastDescription, {}) : null),
+                memo(()=>memo(()=>!!hasAction())() ? createComponent(ToastActionTrigger, {
+                        get children () {
+                            return actionLabel();
+                        }
+                    }) : null),
+                memo(()=>memo(()=>false !== props.toast().closable)() ? createComponent(ToastCloseTrigger, {}) : null)
+            ];
+        }
+    });
+}
+function ToastRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Toast.Root, mergeProps({
+        "data-slot": "toast-root",
+        get ["class"] () {
+            return clsx(Toast_module.root, local.class);
+        }
+    }, others));
+}
+function ToastTitle(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const toast = useToastContext();
+    return createComponent(Toast.Title, mergeProps({
+        "data-slot": "toast-title",
+        get ["class"] () {
+            return clsx(Toast_module.title, local.class);
+        }
+    }, others, {
+        get children () {
+            return memo(()=>void 0 === resolvedChildren())() ? toast().title : resolvedChildren();
+        }
+    }));
+}
+function ToastDescription(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const toast = useToastContext();
+    return createComponent(Toast.Description, mergeProps({
+        "data-slot": "toast-description",
+        get ["class"] () {
+            return clsx(Toast_module.description, local.class);
+        }
+    }, others, {
+        get children () {
+            return memo(()=>void 0 === resolvedChildren())() ? toast().description : resolvedChildren();
+        }
+    }));
+}
+function ToastActionTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(Toast.ActionTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "toast-action-trigger",
+        get ["class"] () {
+            return clsx(!local.asChild && Toast_module.actionTrigger, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function ToastCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const ariaLabel = void 0 === local['aria-label'] ? DEFAULT_CLOSE_TRIGGER_LABEL : local['aria-label'];
+    if (local.asChild) return createComponent(Toast.CloseTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "toast-close-trigger",
+        "aria-label": ariaLabel,
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        },
+        get ["class"] () {
+            return local.class;
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+    return createComponent(Toast.CloseTrigger, mergeProps({
+        asChild: (triggerProps)=>createComponent(CloseButton.Root, mergeProps(triggerProps, {
+                "data-slot": "toast-close-trigger",
+                "aria-label": ariaLabel,
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get ["class"] () {
+                    return clsx(Toast_module.closeTrigger, local.class);
+                },
+                get children () {
+                    return resolvedChildren();
+                }
+            })),
+        "data-slot": "toast-close-trigger",
+        "aria-label": ariaLabel,
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        }
+    }, others));
+}
+const Toast_Toast = Object.assign(ToastRoot, {
+    Root: ToastRoot,
+    Context: Toast.Context,
+    Title: ToastTitle,
+    Description: ToastDescription,
+    ActionTrigger: ToastActionTrigger,
+    CloseTrigger: ToastCloseTrigger,
+    Toaster: Toast_Toaster
+});
+export { Toast_Toast as Toast, Toast_Toaster as Toaster, createToaster, useToastContext };

package/dist/components/toast/Toast.jsx

@@ -0,0 +1,95 @@
+import { Toast, Toaster, createToaster, useToastContext } from "@ark-ui/solid/toast";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+import Toast_module from "./Toast.module.jsx";
+const DEFAULT_CLOSE_TRIGGER_LABEL = 'Close toast';
+function Toast_Toaster(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'portalRef',
+        'portalled'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled ?? true} portalRef={local.portalRef}>
+      <OverlayPortal>
+        <Toaster data-slot="toast-toaster" class={clsx(Toast_module.toaster, local.class)} {...others} children={local.children ?? ((toast)=><DefaultToast toast={toast}/>)}/>
+      </OverlayPortal>
+    </OverlayPortalProvider>;
+}
+function DefaultToast(props) {
+    const hasAction = ()=>null != props.toast().action;
+    const actionLabel = ()=>props.toast().action?.label;
+    return <ToastRoot>
+      {null != props.toast().title ? <ToastTitle/> : null}
+      {null != props.toast().description ? <ToastDescription/> : null}
+      {hasAction() ? <ToastActionTrigger>{actionLabel()}</ToastActionTrigger> : null}
+      {false !== props.toast().closable ? <ToastCloseTrigger/> : null}
+    </ToastRoot>;
+}
+function ToastRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Toast.Root data-slot="toast-root" class={clsx(Toast_module.root, local.class)} {...others}/>;
+}
+function ToastTitle(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const toast = useToastContext();
+    return <Toast.Title data-slot="toast-title" class={clsx(Toast_module.title, local.class)} {...others}>
+      {void 0 === resolvedChildren() ? toast().title : resolvedChildren()}
+    </Toast.Title>;
+}
+function ToastDescription(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const toast = useToastContext();
+    return <Toast.Description data-slot="toast-description" class={clsx(Toast_module.description, local.class)} {...others}>
+      {void 0 === resolvedChildren() ? toast().description : resolvedChildren()}
+    </Toast.Description>;
+}
+function ToastActionTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <Toast.ActionTrigger asChild={local.asChild} data-slot="toast-action-trigger" class={clsx(!local.asChild && Toast_module.actionTrigger, local.class)} {...others}>
+      {local.children}
+    </Toast.ActionTrigger>;
+}
+function ToastCloseTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const ariaLabel = void 0 === local['aria-label'] ? DEFAULT_CLOSE_TRIGGER_LABEL : local['aria-label'];
+    if (local.asChild) return <Toast.CloseTrigger asChild={local.asChild} data-slot="toast-close-trigger" aria-label={ariaLabel} aria-labelledby={local['aria-labelledby']} class={local.class} {...others}>
+        {local.children}
+      </Toast.CloseTrigger>;
+    return <Toast.CloseTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} data-slot="toast-close-trigger" aria-label={ariaLabel} aria-labelledby={local['aria-labelledby']} class={clsx(Toast_module.closeTrigger, local.class)}>
+          {resolvedChildren()}
+        </CloseButton.Root>} data-slot="toast-close-trigger" aria-label={ariaLabel} aria-labelledby={local['aria-labelledby']} {...others}/>;
+}
+const Toast_Toast = Object.assign(ToastRoot, {
+    Root: ToastRoot,
+    Context: Toast.Context,
+    Title: ToastTitle,
+    Description: ToastDescription,
+    ActionTrigger: ToastActionTrigger,
+    CloseTrigger: ToastCloseTrigger,
+    Toaster: Toast_Toaster
+});
+export { Toast_Toast as Toast, Toast_Toaster as Toaster, createToaster, useToastContext };

package/dist/components/toast/Toast.module.js

@@ -0,0 +1,10 @@
+import "./Toast_module.css";
+const Toast_module = {
+    toaster: "toaster-m5bxJd",
+    root: "root-p_jC2T",
+    title: "title-MTy3zi",
+    description: "description-AIx4K_",
+    actionTrigger: "actionTrigger-ftU5e1",
+    closeTrigger: "closeTrigger-IYs7Wg"
+};
+export default Toast_module;

package/dist/components/toast/Toast.module.jsx

@@ -0,0 +1,10 @@
+import "./Toast_module.css";
+const Toast_module = {
+    toaster: "toaster-m5bxJd",
+    root: "root-p_jC2T",
+    title: "title-MTy3zi",
+    description: "description-AIx4K_",
+    actionTrigger: "actionTrigger-ftU5e1",
+    closeTrigger: "closeTrigger-IYs7Wg"
+};
+export default Toast_module;

package/dist/components/toast/Toast_module.css

@@ -0,0 +1,164 @@
+@layer moduix.components {
+  .toaster-m5bxJd {
+    z-index: var(--moduix-toast-z-index, var(--moduix-z-toast));
+  }
+
+  .root-p_jC2T {
+    --_toast-trigger-bg-default: transparent;
+    --_toast-trigger-bg-hover-default: var(--moduix-color-accent);
+    --_toast-trigger-border-color-default: var(--moduix-color-border);
+    --_toast-trigger-color-default: var(--moduix-color-foreground);
+    --_toast-trigger-focus-ring-color-default: var(--moduix-color-ring);
+    --_toast-bg-default: var(--moduix-toast-info-bg, var(--moduix-color-card));
+    --_toast-border-color-default: var(--moduix-toast-info-border-color, var(--moduix-color-border));
+    --_toast-color-default: var(--moduix-toast-info-color, var(--moduix-color-card-foreground));
+    box-sizing: border-box;
+    width: var(--moduix-toast-width, 20rem);
+    max-width: calc(100vw - (var(--moduix-toast-viewport-inset, var(--moduix-spacing-4)) * 2));
+    min-height: var(--moduix-toast-min-height, 0);
+    align-items: start;
+    gap: var(--moduix-toast-content-gap, var(--moduix-spacing-1));
+    border: var(--moduix-toast-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-toast-border-color, var(--_toast-border-color-default, var(--moduix-color-border)));
+    border-radius: var(--moduix-toast-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-toast-bg, var(--_toast-bg-default, var(--moduix-color-popover)));
+    min-width: 0;
+    color: var(--moduix-toast-color, var(--_toast-color-default, var(--moduix-color-popover-foreground)));
+    box-shadow: var(--moduix-toast-shadow, var(--moduix-shadow-lg));
+    padding: var(--moduix-toast-padding, var(--moduix-spacing-4));
+    pointer-events: auto;
+    translate: var(--x) var(--y);
+    scale: var(--scale);
+    z-index: var(--z-index);
+    height: var(--height);
+    opacity: var(--opacity);
+    will-change: translate, opacity, scale;
+    transition: translate var(--moduix-toast-transition, var(--moduix-duration-slow)),
+      scale var(--moduix-toast-transition, var(--moduix-duration-slow)),
+      opacity var(--moduix-toast-transition, var(--moduix-duration-slow)),
+      height var(--moduix-toast-transition, var(--moduix-duration-slow)),
+      box-shadow var(--moduix-transition-fast);
+    background-clip: padding-box;
+    padding-inline-end: calc(var(--moduix-toast-padding, var(--moduix-spacing-4)) +
+        var(--moduix-toast-close-size, var(--moduix-spacing-7)));
+    transition-timing-function: cubic-bezier(.21, 1.02, .73, 1);
+    display: grid;
+  }
+
+  .root-p_jC2T[data-state="closed"] {
+    transition: translate var(--moduix-toast-transition-out, var(--moduix-duration-slow)),
+        scale var(--moduix-toast-transition-out, var(--moduix-duration-slow)),
+        opacity var(--moduix-toast-opacity-transition-out, var(--moduix-duration-normal));
+    transition-timing-function: cubic-bezier(.06, .71, .55, 1);
+  }
+
+  .root-p_jC2T[data-type="success"] {
+    --_toast-bg-default: var(--moduix-toast-success-bg, color-mix(in oklab, var(--moduix-color-success) 10%, var(--moduix-color-background)));
+    --_toast-border-color-default: var(--moduix-toast-success-border-color, color-mix(in oklab, var(--moduix-color-success) 34%, transparent));
+    --_toast-color-default: var(--moduix-toast-success-color, var(--moduix-color-foreground));
+  }
+
+  .root-p_jC2T[data-type="warning"] {
+    --_toast-bg-default: var(--moduix-toast-warning-bg, color-mix(in oklab, var(--moduix-color-warning) 13%, var(--moduix-color-background)));
+    --_toast-border-color-default: var(--moduix-toast-warning-border-color, color-mix(in oklab, var(--moduix-color-warning) 38%, transparent));
+    --_toast-color-default: var(--moduix-toast-warning-color, var(--moduix-color-foreground));
+  }
+
+  .root-p_jC2T[data-type="error"] {
+    --_toast-bg-default: var(--moduix-toast-error-bg, color-mix(in oklab, var(--moduix-color-destructive) 9%, var(--moduix-color-background)));
+    --_toast-border-color-default: var(--moduix-toast-error-border-color, color-mix(in oklab, var(--moduix-color-destructive) 35%, transparent));
+    --_toast-color-default: var(--moduix-toast-error-color, var(--moduix-color-foreground));
+  }
+
+  .title-MTy3zi {
+    align-items: center;
+    gap: var(--moduix-toast-title-gap, var(--moduix-spacing-2));
+    min-width: 0;
+    color: inherit;
+    font-size: var(--moduix-toast-title-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-toast-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-toast-title-line-height, var(--moduix-line-height-text-sm));
+    overflow-wrap: anywhere;
+    margin: 0;
+    display: flex;
+  }
+
+  .description-AIx4K_ {
+    min-width: 0;
+    color: var(--moduix-toast-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-toast-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-toast-description-line-height, var(--moduix-line-height-text-sm));
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .actionTrigger-ftU5e1 {
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-toast-action-gap, var(--moduix-spacing-2));
+    width: max-content;
+    min-width: 0;
+    max-width: 100%;
+    min-height: var(--moduix-toast-action-min-height, var(--moduix-size-xs));
+    border: var(--moduix-toast-action-border-width, var(--moduix-toast-border-width, var(--moduix-border-width-sm)))
+      solid var(--moduix-toast-action-border-color, var(--_toast-trigger-border-color-default));
+    border-radius: var(--moduix-toast-action-radius, var(--moduix-radius-sm));
+    background: var(--moduix-toast-action-bg, var(--_toast-trigger-bg-default));
+    color: var(--moduix-toast-action-color, var(--_toast-trigger-color-default));
+    padding: var(--moduix-toast-action-padding-y, var(--moduix-spacing-1))
+      var(--moduix-toast-action-padding-x, var(--moduix-spacing-2));
+    font: inherit;
+    font-size: var(--moduix-toast-action-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-toast-action-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-toast-action-line-height, var(--moduix-line-height-text-xs));
+    cursor: pointer;
+    text-align: start;
+    -webkit-user-select: none;
+    user-select: none;
+    overflow-wrap: anywhere;
+    transition: background var(--moduix-transition-fast),
+      border-color var(--moduix-transition-fast),
+      color var(--moduix-transition-fast);
+    margin-block-start: var(--moduix-toast-action-margin-top, var(--moduix-spacing-2));
+    display: inline-flex;
+  }
+
+  .actionTrigger-ftU5e1:hover {
+    background: var(--moduix-toast-action-bg-hover, var(--_toast-trigger-bg-hover-default));
+  }
+
+  .actionTrigger-ftU5e1:focus-visible {
+    outline: var(--moduix-toast-focus-ring-width, var(--moduix-toast-action-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
+        solid var(--moduix-toast-focus-ring-color, var(--_toast-trigger-focus-ring-color-default));
+    outline-offset: var(--moduix-toast-focus-ring-offset, 0);
+  }
+
+  .closeTrigger-IYs7Wg {
+    --moduix-close-button-size: var(--moduix-toast-close-size, var(--moduix-spacing-7));
+    --moduix-close-button-icon-size: var(--moduix-toast-close-icon-size, var(--moduix-spacing-3));
+    --moduix-close-button-radius: var(--moduix-toast-close-radius, var(--moduix-radius-sm));
+    --moduix-close-button-bg: var(--moduix-toast-close-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-toast-close-bg-hover, var(--moduix-color-muted));
+    --moduix-close-button-color: var(--moduix-toast-close-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-toast-close-color-hover, var(--moduix-color-foreground));
+    --moduix-close-button-focus-ring-color: var(--moduix-toast-focus-ring-color, var(--moduix-color-ring));
+    --moduix-close-button-focus-ring-offset: var(--moduix-toast-close-focus-ring-offset, var(--moduix-focus-ring-offset));
+    --moduix-close-button-focus-ring-width: var(--moduix-toast-close-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)));
+    position: absolute;
+    inset-block-start: var(--moduix-toast-close-offset-top, var(--moduix-spacing-2));
+    inset-inline-end: var(--moduix-toast-close-offset-right, var(--moduix-spacing-2));
+  }
+
+  @media (width <= 40rem) {
+    .toaster-m5bxJd {
+      width: 100%;
+    }
+
+    .root-p_jC2T {
+      width: calc(100% - (var(--gap) * 2));
+      max-width: none;
+      inset-inline: 0;
+    }
+  }
+}
+

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

@@ -0,0 +1 @@
+export { Toast, Toaster, createToaster, useToastContext } from './Toast.js';

package/dist/components/toast/index.js

@@ -0,0 +1 @@
+export { Toast, Toaster, createToaster, useToastContext } from "./Toast.js";

package/dist/components/toast/index.jsx

@@ -0,0 +1 @@
+export { Toast, Toaster, createToaster, useToastContext } from "./Toast.jsx";

package/dist/components/toc/Toc.d.ts

@@ -0,0 +1,34 @@
+import { Toc as TocPrimitive, type UseTocProps } from '@ark-ui/solid/toc';
+import type { ComponentProps, JSX } from 'solid-js';
+declare const useToc: (props: UseTocProps) => import("@ark-ui/solid").UseTocReturn;
+declare const useTocContext: () => import("@ark-ui/solid").UseTocContext;
+declare function TocRoot(props: ComponentProps<typeof TocPrimitive.Root>): JSX.Element;
+declare function TocRootProvider(props: ComponentProps<typeof TocPrimitive.RootProvider>): JSX.Element;
+declare function TocContent(props: ComponentProps<typeof TocPrimitive.Content>): JSX.Element;
+declare function TocNav(props: ComponentProps<typeof TocPrimitive.Nav>): JSX.Element;
+declare function TocTitle(props: ComponentProps<typeof TocPrimitive.Title>): JSX.Element;
+declare function TocList(props: ComponentProps<typeof TocPrimitive.List>): JSX.Element;
+declare function TocItem(props: ComponentProps<typeof TocPrimitive.Item>): JSX.Element;
+declare function TocLink(props: ComponentProps<typeof TocPrimitive.Link>): JSX.Element;
+declare function TocIndicator(props: ComponentProps<typeof TocPrimitive.Indicator>): JSX.Element;
+type TocRailProps = ComponentProps<'svg'> & {
+    depth: number;
+    previousDepth?: number;
+    nextDepth?: number;
+};
+declare function TocRail(props: TocRailProps): JSX.Element;
+type TocComponent = typeof TocRoot & {
+    Root: typeof TocRoot;
+    RootProvider: typeof TocRootProvider;
+    Context: typeof TocPrimitive.Context;
+    Content: typeof TocContent;
+    Nav: typeof TocNav;
+    Title: typeof TocTitle;
+    List: typeof TocList;
+    Item: typeof TocItem;
+    Link: typeof TocLink;
+    Indicator: typeof TocIndicator;
+    Rail: typeof TocRail;
+};
+declare const Toc: TocComponent;
+export { Toc, useToc, useTocContext };