@moduix/solid 1.0.0

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

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

package/dist/components/text/index.js

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

package/dist/components/text/index.jsx

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

package/dist/components/textarea/Textarea.d.ts

@@ -0,0 +1,9 @@
+import type { FieldTextareaProps } from '@ark-ui/solid/field';
+type TextareaProps = FieldTextareaProps & {
+    defaultValue?: string | number | readonly string[];
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+};
+declare function Textarea(props: TextareaProps): import("solid-js").JSX.Element;
+export { Textarea };

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,46 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Field } from "@ark-ui/solid/field";
+import { clsx } from "clsx";
+import { createEffect, splitProps } from "solid-js";
+import Textarea_module from "./Textarea.module.js";
+function Textarea(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'autoresize',
+        'class',
+        'defaultValue',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'ref'
+    ]);
+    let textareaRef;
+    createEffect(()=>{
+        if (textareaRef) textareaRef.defaultValue = String(local.defaultValue ?? '');
+    });
+    return createComponent(Field.Textarea, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, ()=>local.asChild ? {
+            'prop:defaultValue': local.defaultValue
+        } : {}, {
+        "data-scope": "field",
+        "data-part": "textarea",
+        "data-slot": "textarea-root",
+        get ["data-autoresize"] () {
+            return local.autoresize ? '' : void 0;
+        },
+        get ["class"] () {
+            return clsx(Textarea_module.root, local.class);
+        },
+        get autoresize () {
+            return local.autoresize;
+        },
+        ref: (element)=>{
+            textareaRef = element;
+            if ('function' == typeof local.ref) local.ref(element);
+        }
+    }));
+}
+export { Textarea };

package/dist/components/textarea/Textarea.jsx

@@ -0,0 +1,27 @@
+import { Field } from "@ark-ui/solid/field";
+import { clsx } from "clsx";
+import { createEffect, splitProps } from "solid-js";
+import Textarea_module from "./Textarea.module.jsx";
+function Textarea(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'autoresize',
+        'class',
+        'defaultValue',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'ref'
+    ]);
+    let textareaRef;
+    createEffect(()=>{
+        if (textareaRef) textareaRef.defaultValue = String(local.defaultValue ?? '');
+    });
+    return <Field.Textarea asChild={local.asChild} {...others} {...local.asChild ? {
+        'prop:defaultValue': local.defaultValue
+    } : {}} data-scope="field" data-part="textarea" data-slot="textarea-root" data-autoresize={local.autoresize ? '' : void 0} class={clsx(Textarea_module.root, local.class)} autoresize={local.autoresize} ref={(element)=>{
+        textareaRef = element;
+        if ('function' == typeof local.ref) local.ref(element);
+    }}/>;
+}
+export { Textarea };

package/dist/components/textarea/Textarea.module.js

@@ -0,0 +1,5 @@
+import "./Textarea_module.css";
+const Textarea_module = {
+    root: "root-WNlBd3"
+};
+export default Textarea_module;

package/dist/components/textarea/Textarea.module.jsx

@@ -0,0 +1,5 @@
+import "./Textarea_module.css";
+const Textarea_module = {
+    root: "root-WNlBd3"
+};
+export default Textarea_module;

package/dist/components/textarea/Textarea_module.css

@@ -0,0 +1,58 @@
+@layer moduix.components {
+  .root-WNlBd3 {
+    box-sizing: border-box;
+    width: var(--moduix-textarea-width, 100%);
+    max-width: var(--moduix-textarea-max-width, none);
+    min-height: var(--moduix-textarea-min-height, 6rem);
+    border: var(--moduix-textarea-border-width, var(--moduix-border-width-sm))
+      var(--moduix-textarea-border-style, solid)
+      var(--moduix-textarea-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-textarea-radius, var(--moduix-radius-md));
+    padding: var(--moduix-textarea-padding-y, var(--moduix-spacing-2))
+      var(--moduix-textarea-padding-x, var(--moduix-spacing-3-5));
+    background-color: var(--moduix-textarea-bg, var(--moduix-color-background));
+    color: var(--moduix-textarea-color, var(--moduix-color-foreground));
+    font: inherit;
+    font-size: var(--moduix-textarea-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-textarea-line-height, var(--moduix-line-height-text-md));
+    outline: var(--moduix-textarea-focus-ring-width, var(--moduix-textarea-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
+      solid transparent;
+    outline-offset: var(--moduix-textarea-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+    resize: var(--moduix-textarea-resize, vertical);
+    transition: border-color var(--moduix-textarea-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-textarea-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-textarea-transition, var(--moduix-transition-default));
+    margin: 0;
+  }
+
+  .root-WNlBd3::placeholder {
+    color: var(--moduix-textarea-placeholder-color, var(--moduix-color-muted-foreground));
+  }
+
+  .root-WNlBd3:focus-visible {
+    outline-color: var(--moduix-textarea-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .root-WNlBd3:is([data-invalid], [aria-invalid="true"]) {
+    border-color: var(--moduix-textarea-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .root-WNlBd3:is([data-invalid], [aria-invalid="true"]):focus-visible {
+    outline-color: var(--moduix-textarea-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .root-WNlBd3:is([disabled], [data-disabled]) {
+    pointer-events: none;
+    opacity: var(--moduix-textarea-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .root-WNlBd3:is(:read-only, [data-readonly]) {
+    background-color: var(--moduix-textarea-readonly-bg, var(--moduix-textarea-bg, var(--moduix-color-background)));
+    color: var(--moduix-textarea-readonly-color, var(--moduix-textarea-color, var(--moduix-color-foreground)));
+  }
+
+  .root-WNlBd3[data-autoresize] {
+    overflow-y: hidden;
+  }
+}
+

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

@@ -0,0 +1 @@
+export { Textarea } from './Textarea.js';

package/dist/components/textarea/index.js

@@ -0,0 +1 @@
+export { Textarea } from "./Textarea.js";

package/dist/components/textarea/index.jsx

@@ -0,0 +1 @@
+export { Textarea } from "./Textarea.jsx";

package/dist/components/timer/Timer.d.ts

@@ -0,0 +1,26 @@
+import { Timer as TimerPrimitive, useTimer, useTimerContext } from '@ark-ui/solid/timer';
+import type { ComponentProps, JSX } from 'solid-js';
+declare function TimerRoot(props: ComponentProps<typeof TimerPrimitive.Root>): JSX.Element;
+declare function TimerRootProvider(props: ComponentProps<typeof TimerPrimitive.RootProvider>): JSX.Element;
+declare function TimerArea(props: ComponentProps<typeof TimerPrimitive.Area>): JSX.Element;
+declare function TimerItem(props: ComponentProps<typeof TimerPrimitive.Item>): JSX.Element;
+declare function TimerSeparator(props: ComponentProps<typeof TimerPrimitive.Separator>): JSX.Element;
+declare function TimerControl(props: ComponentProps<typeof TimerPrimitive.Control>): JSX.Element;
+declare function TimerActionTrigger(props: ComponentProps<typeof TimerPrimitive.ActionTrigger>): JSX.Element;
+type TimerSegmentsProps = Omit<ComponentProps<typeof TimerPrimitive.Area>, 'asChild' | 'children'> & {
+    separator?: JSX.Element;
+    types?: ComponentProps<typeof TimerPrimitive.Item>['type'][];
+};
+declare function TimerSegments(props: TimerSegmentsProps): JSX.Element;
+declare const Timer: typeof TimerRoot & {
+    Root: typeof TimerRoot;
+    RootProvider: typeof TimerRootProvider;
+    Area: typeof TimerArea;
+    Item: typeof TimerItem;
+    Separator: typeof TimerSeparator;
+    Control: typeof TimerControl;
+    ActionTrigger: typeof TimerActionTrigger;
+    Context: (props: TimerPrimitive.ContextProps) => JSX.Element;
+    Segments: typeof TimerSegments;
+};
+export { Timer, type TimerSegmentsProps, useTimer, useTimerContext };

package/dist/components/timer/Timer.js

@@ -0,0 +1,127 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { Timer, useTimer, useTimerContext } from "@ark-ui/solid/timer";
+import { clsx } from "clsx";
+import { Index, splitProps } from "solid-js";
+import Timer_module from "./Timer.module.js";
+function TimerRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Timer.Root, mergeProps({
+        "data-slot": "timer-root",
+        get ["class"] () {
+            return clsx(Timer_module.root, local.class);
+        }
+    }, others));
+}
+function TimerRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Timer.RootProvider, mergeProps({
+        "data-slot": "timer-root-provider",
+        get ["class"] () {
+            return clsx(Timer_module.root, local.class);
+        }
+    }, others));
+}
+function TimerArea(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Timer.Area, mergeProps({
+        "data-slot": "timer-area",
+        get ["class"] () {
+            return clsx(Timer_module.area, local.class);
+        }
+    }, others));
+}
+function TimerItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Timer.Item, mergeProps({
+        "data-slot": "timer-item",
+        get ["class"] () {
+            return clsx(Timer_module.item, local.class);
+        }
+    }, others));
+}
+function TimerSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Timer.Separator, mergeProps({
+        "data-slot": "timer-separator",
+        get ["class"] () {
+            return clsx(Timer_module.separator, local.class);
+        }
+    }, others));
+}
+function TimerControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Timer.Control, mergeProps({
+        "data-slot": "timer-control",
+        get ["class"] () {
+            return clsx(Timer_module.control, local.class);
+        }
+    }, others));
+}
+function TimerActionTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Timer.ActionTrigger, mergeProps({
+        "data-slot": "timer-action-trigger",
+        get ["class"] () {
+            return clsx(Timer_module.actionTrigger, local.class);
+        }
+    }, others));
+}
+const defaultTimerSegmentTypes = [
+    'hours',
+    'minutes',
+    'seconds'
+];
+function TimerSegments(props) {
+    const [local, others] = splitProps(props, [
+        'separator',
+        'types'
+    ]);
+    const segmentTypes = ()=>local.types ?? defaultTimerSegmentTypes;
+    return createComponent(TimerArea, mergeProps(others, {
+        get children () {
+            return createComponent(Index, {
+                get each () {
+                    return segmentTypes();
+                },
+                children: (type, index)=>[
+                        createComponent(TimerItem, {
+                            get type () {
+                                return type();
+                            }
+                        }),
+                        memo(()=>memo(()=>index < segmentTypes().length - 1)() && createComponent(TimerSeparator, {
+                                get children () {
+                                    return local.separator ?? ':';
+                                }
+                            }))
+                    ]
+            });
+        }
+    }));
+}
+const Timer_Timer = Object.assign(TimerRoot, {
+    Root: TimerRoot,
+    RootProvider: TimerRootProvider,
+    Area: TimerArea,
+    Item: TimerItem,
+    Separator: TimerSeparator,
+    Control: TimerControl,
+    ActionTrigger: TimerActionTrigger,
+    Context: Timer.Context,
+    Segments: TimerSegments
+});
+export { Timer_Timer as Timer, useTimer, useTimerContext };

package/dist/components/timer/Timer.jsx

@@ -0,0 +1,78 @@
+import { Timer, useTimer, useTimerContext } from "@ark-ui/solid/timer";
+import { clsx } from "clsx";
+import { Index, splitProps } from "solid-js";
+import Timer_module from "./Timer.module.jsx";
+function TimerRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Timer.Root data-slot="timer-root" class={clsx(Timer_module.root, local.class)} {...others}/>;
+}
+function TimerRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Timer.RootProvider data-slot="timer-root-provider" class={clsx(Timer_module.root, local.class)} {...others}/>;
+}
+function TimerArea(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Timer.Area data-slot="timer-area" class={clsx(Timer_module.area, local.class)} {...others}/>;
+}
+function TimerItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Timer.Item data-slot="timer-item" class={clsx(Timer_module.item, local.class)} {...others}/>;
+}
+function TimerSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Timer.Separator data-slot="timer-separator" class={clsx(Timer_module.separator, local.class)} {...others}/>;
+}
+function TimerControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Timer.Control data-slot="timer-control" class={clsx(Timer_module.control, local.class)} {...others}/>;
+}
+function TimerActionTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Timer.ActionTrigger data-slot="timer-action-trigger" class={clsx(Timer_module.actionTrigger, local.class)} {...others}/>;
+}
+const defaultTimerSegmentTypes = [
+    'hours',
+    'minutes',
+    'seconds'
+];
+function TimerSegments(props) {
+    const [local, others] = splitProps(props, [
+        'separator',
+        'types'
+    ]);
+    const segmentTypes = ()=>local.types ?? defaultTimerSegmentTypes;
+    return <TimerArea {...others}>
+      <Index each={segmentTypes()}>
+        {(type, index)=><>
+            <TimerItem type={type()}/>
+            {index < segmentTypes().length - 1 && <TimerSeparator>{local.separator ?? ':'}</TimerSeparator>}
+          </>}
+      </Index>
+    </TimerArea>;
+}
+const Timer_Timer = Object.assign(TimerRoot, {
+    Root: TimerRoot,
+    RootProvider: TimerRootProvider,
+    Area: TimerArea,
+    Item: TimerItem,
+    Separator: TimerSeparator,
+    Control: TimerControl,
+    ActionTrigger: TimerActionTrigger,
+    Context: Timer.Context,
+    Segments: TimerSegments
+});
+export { Timer_Timer as Timer, useTimer, useTimerContext };

package/dist/components/timer/Timer.module.js

@@ -0,0 +1,10 @@
+import "./Timer_module.css";
+const Timer_module = {
+    root: "root-B1LvxX",
+    area: "area-d816X5",
+    item: "item-dD6s97",
+    separator: "separator-l7BCkv",
+    control: "control-KNVBXy",
+    actionTrigger: "actionTrigger-kFCEw_"
+};
+export default Timer_module;

package/dist/components/timer/Timer.module.jsx

@@ -0,0 +1,10 @@
+import "./Timer_module.css";
+const Timer_module = {
+    root: "root-B1LvxX",
+    area: "area-d816X5",
+    item: "item-dD6s97",
+    separator: "separator-l7BCkv",
+    control: "control-KNVBXy",
+    actionTrigger: "actionTrigger-kFCEw_"
+};
+export default Timer_module;

package/dist/components/timer/Timer_module.css

@@ -0,0 +1,102 @@
+@layer moduix.components {
+  .root-B1LvxX {
+    box-sizing: border-box;
+    place-items: center;
+    gap: var(--moduix-timer-gap, var(--moduix-spacing-3));
+    width: var(--moduix-timer-width, max-content);
+    max-inline-size: 100%;
+    color: var(--moduix-timer-color, var(--moduix-color-foreground));
+    display: inline-grid;
+  }
+
+  .area-d816X5 {
+    justify-content: center;
+    align-items: baseline;
+    gap: var(--moduix-timer-area-gap, var(--moduix-spacing-1));
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    font-size: var(--moduix-timer-area-font-size, var(--moduix-text-2xl));
+    font-weight: var(--moduix-timer-area-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-timer-area-line-height, var(--moduix-line-height-text-sm));
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0;
+    flex-wrap: wrap;
+    display: inline-flex;
+  }
+
+  .item-dD6s97 {
+    min-width: var(--moduix-timer-item-min-width, 2ch);
+    color: var(--moduix-timer-item-color, currentColor);
+    text-align: var(--moduix-timer-item-text-align, center);
+  }
+
+  .separator-l7BCkv {
+    color: var(--moduix-timer-separator-color, var(--moduix-color-muted-foreground));
+  }
+
+  .control-KNVBXy {
+    align-items: center;
+    gap: var(--moduix-timer-control-gap, var(--moduix-spacing-2));
+    flex-wrap: wrap;
+    display: inline-flex;
+  }
+
+  .actionTrigger-kFCEw_ {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-timer-action-trigger-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-timer-action-trigger-height, var(--moduix-size-md));
+    border: var(--moduix-timer-action-trigger-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-timer-action-trigger-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-timer-action-trigger-radius, var(--moduix-radius-md));
+    padding-block: var(--moduix-timer-action-trigger-padding-y, var(--moduix-spacing-1-5));
+    padding-inline: var(--moduix-timer-action-trigger-padding-x, var(--moduix-spacing-3));
+    background-color: var(--moduix-timer-action-trigger-bg, var(--moduix-color-background));
+    color: var(--moduix-timer-action-trigger-color, var(--moduix-color-foreground));
+    appearance: none;
+    font: inherit;
+    font-size: var(--moduix-timer-action-trigger-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-timer-action-trigger-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-timer-action-trigger-line-height, var(--moduix-line-height-text-sm));
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color
+        var(--moduix-timer-action-trigger-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-timer-action-trigger-transition, var(--moduix-transition-default)),
+      color var(--moduix-timer-action-trigger-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-timer-action-trigger-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-timer-action-trigger-transition, var(--moduix-transition-default));
+    margin: 0;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    .actionTrigger-kFCEw_:hover {
+      background-color: var(--moduix-timer-action-trigger-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .actionTrigger-kFCEw_:focus-visible {
+    outline: var(--moduix-timer-action-trigger-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-timer-action-trigger-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-timer-action-trigger-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+  }
+
+  .actionTrigger-kFCEw_:is(:disabled, [aria-disabled="true"]) {
+    opacity: var(--moduix-timer-action-trigger-disabled-opacity, var(--moduix-opacity-disabled));
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .actionTrigger-kFCEw_[hidden] {
+    display: none;
+  }
+
+  .actionTrigger-kFCEw_ :where(svg) {
+    width: var(--moduix-timer-action-trigger-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-timer-action-trigger-icon-size, var(--moduix-spacing-4));
+    flex-shrink: 0;
+  }
+}
+

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

@@ -0,0 +1,2 @@
+export { Timer, useTimer, useTimerContext } from './Timer.js';
+export type { TimerSegmentsProps } from './Timer.js';

package/dist/components/timer/index.js

@@ -0,0 +1 @@
+export { Timer, useTimer, useTimerContext } from "./Timer.js";

package/dist/components/timer/index.jsx

@@ -0,0 +1 @@
+export { Timer, useTimer, useTimerContext } from "./Timer.jsx";

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

@@ -0,0 +1,22 @@
+import { Toast as ToastPrimitive, Toaster as ToasterPrimitive, createToaster, useToastContext } from '@ark-ui/solid/toast';
+import type { ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type ToasterProps = Omit<ComponentProps<typeof ToasterPrimitive>, 'children'> & OverlayPortalProps & {
+    children?: ComponentProps<typeof ToasterPrimitive>['children'];
+};
+declare function Toaster(props: ToasterProps): import("solid-js").JSX.Element;
+declare function ToastRoot(props: ComponentProps<typeof ToastPrimitive.Root>): import("solid-js").JSX.Element;
+declare function ToastTitle(props: ComponentProps<typeof ToastPrimitive.Title>): import("solid-js").JSX.Element;
+declare function ToastDescription(props: ComponentProps<typeof ToastPrimitive.Description>): import("solid-js").JSX.Element;
+declare function ToastActionTrigger(props: ComponentProps<typeof ToastPrimitive.ActionTrigger>): import("solid-js").JSX.Element;
+declare function ToastCloseTrigger(props: ComponentProps<typeof ToastPrimitive.CloseTrigger>): import("solid-js").JSX.Element;
+declare const Toast: typeof ToastRoot & {
+    Root: typeof ToastRoot;
+    Context: (props: ToastPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Title: typeof ToastTitle;
+    Description: typeof ToastDescription;
+    ActionTrigger: typeof ToastActionTrigger;
+    CloseTrigger: typeof ToastCloseTrigger;
+    Toaster: typeof Toaster;
+};
+export { Toast, Toaster, createToaster, useToastContext };