@moduix/solid 1.0.0

package/dist/components/date-input/DateInput.js

@@ -0,0 +1,137 @@
+import { createComponent, mergeProps, spread, template } from "solid-js/web";
+import { DateInput, useDateInput, useDateInputContext } from "@ark-ui/solid/date-input";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import DateInput_module from "./DateInput.module.js";
+var _tmpl$ = /*#__PURE__*/ template("<span data-slot=date-input-separator>");
+function DateInputRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(DateInput.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "date-input-root",
+        get ["class"] () {
+            return clsx(DateInput_module.root, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function DateInputRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(DateInput.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "date-input-root-provider",
+        get ["class"] () {
+            return clsx(DateInput_module.root, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function DateInputLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DateInput.Label, mergeProps({
+        "data-slot": "date-input-label",
+        get ["class"] () {
+            return clsx(DateInput_module.label, local.class);
+        }
+    }, others));
+}
+function DateInputControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DateInput.Control, mergeProps({
+        "data-slot": "date-input-control",
+        get ["class"] () {
+            return clsx(DateInput_module.control, local.class);
+        }
+    }, others));
+}
+function DateInputSegmentGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DateInput.SegmentGroup, mergeProps({
+        "data-slot": "date-input-segment-group",
+        get ["class"] () {
+            return clsx(DateInput_module.segmentGroup, local.class);
+        }
+    }, others));
+}
+function DateInputSegment(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(DateInput.Segment, mergeProps({
+        "data-slot": "date-input-segment",
+        get ["class"] () {
+            return clsx(DateInput_module.segment, local.class);
+        }
+    }, others));
+}
+function DateInputSegments(props) {
+    return createComponent(DateInputSegmentGroup, mergeProps(props, {
+        get children () {
+            return createComponent(DateInput.SegmentContext, {
+                children: (segment)=>createComponent(DateInputSegment, {
+                        segment: segment
+                    })
+            });
+        }
+    }));
+}
+function DateInputSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'aria-hidden',
+        'class',
+        'role'
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps({
+            get ["aria-hidden"] () {
+                return local['aria-hidden'] ?? true;
+            },
+            get role () {
+                return local.role ?? 'presentation';
+            },
+            get ["class"] () {
+                return clsx(DateInput_module.separator, local.class);
+            }
+        }, others), false, false);
+        return _el$;
+    })();
+}
+const DateInput_DateInput = Object.assign(DateInputRoot, {
+    Root: DateInputRoot,
+    RootProvider: DateInputRootProvider,
+    HiddenInput: DateInput.HiddenInput,
+    Label: DateInputLabel,
+    Control: DateInputControl,
+    SegmentGroup: DateInputSegmentGroup,
+    Segment: DateInputSegment,
+    Segments: DateInputSegments,
+    Separator: DateInputSeparator,
+    Context: DateInput.Context,
+    SegmentContext: DateInput.SegmentContext
+});
+export { DateInput_DateInput as DateInput, useDateInput, useDateInputContext };

package/dist/components/date-input/DateInput.jsx

@@ -0,0 +1,77 @@
+import { DateInput, useDateInput, useDateInputContext } from "@ark-ui/solid/date-input";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import DateInput_module from "./DateInput.module.jsx";
+function DateInputRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <DateInput.Root asChild={local.asChild} data-slot="date-input-root" class={clsx(DateInput_module.root, local.class)} {...others}>
+      {local.children}
+    </DateInput.Root>;
+}
+function DateInputRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <DateInput.RootProvider asChild={local.asChild} data-slot="date-input-root-provider" class={clsx(DateInput_module.root, local.class)} {...others}>
+      {local.children}
+    </DateInput.RootProvider>;
+}
+function DateInputLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DateInput.Label data-slot="date-input-label" class={clsx(DateInput_module.label, local.class)} {...others}/>;
+}
+function DateInputControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DateInput.Control data-slot="date-input-control" class={clsx(DateInput_module.control, local.class)} {...others}/>;
+}
+function DateInputSegmentGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DateInput.SegmentGroup data-slot="date-input-segment-group" class={clsx(DateInput_module.segmentGroup, local.class)} {...others}/>;
+}
+function DateInputSegment(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <DateInput.Segment data-slot="date-input-segment" class={clsx(DateInput_module.segment, local.class)} {...others}/>;
+}
+function DateInputSegments(props) {
+    return <DateInputSegmentGroup {...props}>
+      <DateInput.SegmentContext>
+        {(segment)=><DateInputSegment segment={segment}/>}
+      </DateInput.SegmentContext>
+    </DateInputSegmentGroup>;
+}
+function DateInputSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'aria-hidden',
+        'class',
+        'role'
+    ]);
+    return <span data-slot="date-input-separator" aria-hidden={local['aria-hidden'] ?? true} role={local.role ?? 'presentation'} class={clsx(DateInput_module.separator, local.class)} {...others}/>;
+}
+const DateInput_DateInput = Object.assign(DateInputRoot, {
+    Root: DateInputRoot,
+    RootProvider: DateInputRootProvider,
+    HiddenInput: DateInput.HiddenInput,
+    Label: DateInputLabel,
+    Control: DateInputControl,
+    SegmentGroup: DateInputSegmentGroup,
+    Segment: DateInputSegment,
+    Segments: DateInputSegments,
+    Separator: DateInputSeparator,
+    Context: DateInput.Context,
+    SegmentContext: DateInput.SegmentContext
+});
+export { DateInput_DateInput as DateInput, useDateInput, useDateInputContext };

package/dist/components/date-input/DateInput.module.js

@@ -0,0 +1,10 @@
+import "./DateInput_module.css";
+const DateInput_module = {
+    root: "root-VBGo79",
+    label: "label-Ue9mjP",
+    control: "control-FLNidn",
+    segmentGroup: "segmentGroup-u0LZjm",
+    segment: "segment-AyTFWd",
+    separator: "separator-fhVfZG"
+};
+export default DateInput_module;

package/dist/components/date-input/DateInput.module.jsx

@@ -0,0 +1,10 @@
+import "./DateInput_module.css";
+const DateInput_module = {
+    root: "root-VBGo79",
+    label: "label-Ue9mjP",
+    control: "control-FLNidn",
+    segmentGroup: "segmentGroup-u0LZjm",
+    segment: "segment-AyTFWd",
+    separator: "separator-fhVfZG"
+};
+export default DateInput_module;

package/dist/components/date-input/DateInput_module.css

@@ -0,0 +1,109 @@
+@layer moduix.components {
+  .root-VBGo79 {
+    align-items: flex-start;
+    gap: var(--moduix-date-input-gap, var(--moduix-spacing-1));
+    width: var(--moduix-date-input-width, 100%);
+    max-width: var(--moduix-date-input-max-width, none);
+    flex-direction: column;
+    display: inline-flex;
+  }
+
+  .root-VBGo79[data-disabled] {
+    opacity: var(--moduix-date-input-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .label-Ue9mjP {
+    color: var(--moduix-date-input-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-date-input-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-date-input-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-date-input-label-line-height, var(--moduix-line-height-text-sm));
+  }
+
+  .control-FLNidn {
+    box-sizing: border-box;
+    width: var(--moduix-date-input-control-width, 100%);
+    min-height: var(--moduix-date-input-control-height, var(--moduix-size-md));
+    border: var(--moduix-date-input-border-width, var(--moduix-border-width-sm))
+      var(--moduix-date-input-border-style, solid)
+      var(--moduix-date-input-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-date-input-radius, var(--moduix-radius-md));
+    padding: var(--moduix-date-input-padding-y, var(--moduix-spacing-1))
+      var(--moduix-date-input-padding-x, var(--moduix-spacing-3));
+    background-color: var(--moduix-date-input-bg, var(--moduix-color-background));
+    color: var(--moduix-date-input-color, var(--moduix-color-foreground));
+    outline: var(--moduix-date-input-focus-ring-width, var(--moduix-date-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
+      solid transparent;
+    outline-offset: var(--moduix-date-input-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+    transition: border-color var(--moduix-date-input-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-date-input-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-date-input-transition, var(--moduix-transition-default));
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .control-FLNidn:focus-within, .control-FLNidn[data-focus] {
+    outline-color: var(--moduix-date-input-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .control-FLNidn[data-invalid] {
+    border-color: var(--moduix-date-input-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .control-FLNidn[data-invalid]:focus-within, .control-FLNidn[data-invalid][data-focus] {
+    outline-color: var(--moduix-date-input-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .control-FLNidn[data-disabled] {
+    pointer-events: none;
+  }
+
+  .segmentGroup-u0LZjm {
+    align-items: center;
+    gap: var(--moduix-date-input-segment-gap, var(--moduix-border-width-md));
+    font-variant-numeric: tabular-nums;
+    display: inline-flex;
+  }
+
+  .segment-AyTFWd {
+    min-width: var(--moduix-date-input-segment-min-width, 2ch);
+    border-radius: var(--moduix-date-input-segment-radius, var(--moduix-radius-sm));
+    padding: var(--moduix-date-input-segment-padding-y, 0)
+      var(--moduix-date-input-segment-padding-x, var(--moduix-spacing-1));
+    color: var(--moduix-date-input-segment-color, currentColor);
+    font: inherit;
+    line-height: var(--moduix-date-input-segment-line-height, var(--moduix-line-height-text-md));
+    text-align: center;
+    cursor: text;
+    transition: background-color var(--moduix-date-input-transition, var(--moduix-transition-default)),
+      color var(--moduix-date-input-transition, var(--moduix-transition-default));
+    outline: 0;
+  }
+
+  .segment-AyTFWd[data-placeholder-shown] {
+    color: var(--moduix-date-input-placeholder-color, var(--moduix-color-muted-foreground));
+  }
+
+  .segment-AyTFWd:focus-visible {
+    background-color: var(--moduix-date-input-segment-bg-focus, color-mix(in oklab, var(--moduix-color-ring) 18%, transparent));
+    color: var(--moduix-date-input-segment-color-focus, var(--moduix-color-foreground));
+  }
+
+  .segment-AyTFWd:is([data-readonly], [data-disabled]) {
+    cursor: default;
+  }
+
+  .segment-AyTFWd[data-type="literal"] {
+    min-width: auto;
+    color: var(--moduix-date-input-separator-color, var(--moduix-color-muted-foreground));
+    pointer-events: none;
+    background: none;
+    padding-inline: 0;
+  }
+
+  .separator-fhVfZG {
+    color: var(--moduix-date-input-separator-color, var(--moduix-color-muted-foreground));
+    -webkit-user-select: none;
+    user-select: none;
+  }
+}
+

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

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

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

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

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

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

package/dist/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,98 @@
+import { DatePicker as DatePickerPrimitive, useDatePicker, useDatePickerContext, type UseDatePickerReturn } from '@ark-ui/solid/date-picker';
+import type { ComponentProps } from 'solid-js';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type DatePickerRootProps = ComponentProps<typeof DatePickerPrimitive.Root> & OverlayPortalProps;
+type DatePickerRootProviderProps = ComponentProps<typeof DatePickerPrimitive.RootProvider> & OverlayPortalProps;
+type DatePickerFieldProps = ComponentProps<typeof DatePickerPrimitive.Control> & {
+    clearLabel?: string;
+    clearTriggerProps?: ComponentProps<typeof DatePickerPrimitive.ClearTrigger>;
+    inputProps?: ComponentProps<typeof DatePickerPrimitive.Input>;
+    placeholder?: ComponentProps<typeof DatePickerPrimitive.Input>['placeholder'];
+    triggerLabel?: string;
+    triggerProps?: ComponentProps<typeof DatePickerPrimitive.Trigger>;
+};
+type DatePickerRangeFieldProps = ComponentProps<typeof DatePickerPrimitive.Control> & {
+    clearLabel?: string;
+    clearTriggerProps?: ComponentProps<typeof DatePickerPrimitive.ClearTrigger>;
+    endInputProps?: ComponentProps<typeof DatePickerPrimitive.Input>;
+    endPlaceholder?: ComponentProps<typeof DatePickerPrimitive.Input>['placeholder'];
+    startInputProps?: ComponentProps<typeof DatePickerPrimitive.Input>;
+    startPlaceholder?: ComponentProps<typeof DatePickerPrimitive.Input>['placeholder'];
+    triggerLabel?: string;
+    triggerProps?: ComponentProps<typeof DatePickerPrimitive.Trigger>;
+};
+type DatePickerApi = ReturnType<UseDatePickerReturn>;
+type DatePickerOffset = ReturnType<DatePickerApi['getOffset']>;
+type DatePickerDayTableProps = ComponentProps<typeof DatePickerPrimitive.Table> & {
+    offset?: DatePickerOffset;
+    showHeader?: boolean;
+    showWeekNumbers?: boolean;
+};
+declare function DatePickerRoot(props: DatePickerRootProps): import("solid-js").JSX.Element;
+declare function DatePickerRootProvider(props: DatePickerRootProviderProps): import("solid-js").JSX.Element;
+declare function DatePickerLabel(props: ComponentProps<typeof DatePickerPrimitive.Label>): import("solid-js").JSX.Element;
+declare function DatePickerControl(props: ComponentProps<typeof DatePickerPrimitive.Control>): import("solid-js").JSX.Element;
+declare function DatePickerField(props: DatePickerFieldProps): import("solid-js").JSX.Element;
+declare function DatePickerRangeField(props: DatePickerRangeFieldProps): import("solid-js").JSX.Element;
+declare function DatePickerInput(props: ComponentProps<typeof DatePickerPrimitive.Input>): import("solid-js").JSX.Element;
+declare function DatePickerTrigger(props: ComponentProps<typeof DatePickerPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function DatePickerClearTrigger(props: ComponentProps<typeof DatePickerPrimitive.ClearTrigger>): import("solid-js").JSX.Element;
+declare function DatePickerPositioner(props: ComponentProps<typeof DatePickerPrimitive.Positioner>): import("solid-js").JSX.Element;
+declare function DatePickerContent(props: ComponentProps<typeof DatePickerPrimitive.Content>): import("solid-js").JSX.Element;
+declare function DatePickerView(props: ComponentProps<typeof DatePickerPrimitive.View>): import("solid-js").JSX.Element;
+declare function DatePickerViewControl(props: ComponentProps<typeof DatePickerPrimitive.ViewControl>): import("solid-js").JSX.Element;
+declare function DatePickerPrevTrigger(props: ComponentProps<typeof DatePickerPrimitive.PrevTrigger>): import("solid-js").JSX.Element;
+declare function DatePickerNextTrigger(props: ComponentProps<typeof DatePickerPrimitive.NextTrigger>): import("solid-js").JSX.Element;
+declare function DatePickerRangeText(props: ComponentProps<typeof DatePickerPrimitive.RangeText>): import("solid-js").JSX.Element;
+declare function DatePickerViewTrigger(props: ComponentProps<typeof DatePickerPrimitive.ViewTrigger>): import("solid-js").JSX.Element;
+declare function DatePickerTable(props: ComponentProps<typeof DatePickerPrimitive.Table>): import("solid-js").JSX.Element;
+declare function DatePickerTableHead(props: ComponentProps<typeof DatePickerPrimitive.TableHead>): import("solid-js").JSX.Element;
+declare function DatePickerTableBody(props: ComponentProps<typeof DatePickerPrimitive.TableBody>): import("solid-js").JSX.Element;
+declare function DatePickerTableRow(props: ComponentProps<typeof DatePickerPrimitive.TableRow>): import("solid-js").JSX.Element;
+declare function DatePickerTableHeader(props: ComponentProps<typeof DatePickerPrimitive.TableHeader>): import("solid-js").JSX.Element;
+declare function DatePickerWeekNumberHeaderCell(props: ComponentProps<typeof DatePickerPrimitive.WeekNumberHeaderCell>): import("solid-js").JSX.Element;
+declare function DatePickerWeekNumberCell(props: ComponentProps<typeof DatePickerPrimitive.WeekNumberCell>): import("solid-js").JSX.Element;
+declare function DatePickerTableCell(props: ComponentProps<typeof DatePickerPrimitive.TableCell>): import("solid-js").JSX.Element;
+declare function DatePickerTableCellTrigger(props: ComponentProps<typeof DatePickerPrimitive.TableCellTrigger>): import("solid-js").JSX.Element;
+declare function DatePickerDayTable(props: DatePickerDayTableProps): import("solid-js").JSX.Element;
+declare function DatePickerMonthSelect(props: ComponentProps<typeof DatePickerPrimitive.MonthSelect>): import("solid-js").JSX.Element;
+declare function DatePickerYearSelect(props: ComponentProps<typeof DatePickerPrimitive.YearSelect>): import("solid-js").JSX.Element;
+declare function DatePickerPresetTrigger(props: ComponentProps<typeof DatePickerPrimitive.PresetTrigger>): import("solid-js").JSX.Element;
+declare function DatePickerValueText(props: ComponentProps<typeof DatePickerPrimitive.ValueText>): import("solid-js").JSX.Element;
+type DatePickerComponent = typeof DatePickerRoot & {
+    Root: typeof DatePickerRoot;
+    RootProvider: typeof DatePickerRootProvider;
+    Context: typeof DatePickerPrimitive.Context;
+    Label: typeof DatePickerLabel;
+    Control: typeof DatePickerControl;
+    Field: typeof DatePickerField;
+    RangeField: typeof DatePickerRangeField;
+    Input: typeof DatePickerInput;
+    Trigger: typeof DatePickerTrigger;
+    ClearTrigger: typeof DatePickerClearTrigger;
+    Positioner: typeof DatePickerPositioner;
+    Content: typeof DatePickerContent;
+    View: typeof DatePickerView;
+    ViewControl: typeof DatePickerViewControl;
+    PrevTrigger: typeof DatePickerPrevTrigger;
+    NextTrigger: typeof DatePickerNextTrigger;
+    ViewTrigger: typeof DatePickerViewTrigger;
+    RangeText: typeof DatePickerRangeText;
+    ValueText: typeof DatePickerValueText;
+    Table: typeof DatePickerTable;
+    TableHead: typeof DatePickerTableHead;
+    TableBody: typeof DatePickerTableBody;
+    TableRow: typeof DatePickerTableRow;
+    TableHeader: typeof DatePickerTableHeader;
+    TableCell: typeof DatePickerTableCell;
+    TableCellTrigger: typeof DatePickerTableCellTrigger;
+    DayTable: typeof DatePickerDayTable;
+    WeekNumberHeaderCell: typeof DatePickerWeekNumberHeaderCell;
+    WeekNumberCell: typeof DatePickerWeekNumberCell;
+    MonthSelect: typeof DatePickerMonthSelect;
+    YearSelect: typeof DatePickerYearSelect;
+    PresetTrigger: typeof DatePickerPresetTrigger;
+};
+declare const DatePicker: DatePickerComponent;
+export { DatePicker, useDatePicker, useDatePickerContext };
+export type { DatePickerDayTableProps, DatePickerFieldProps, DatePickerRangeFieldProps, DatePickerRootProps, DatePickerRootProviderProps, };