@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/composer/Composer.recipe.d.ts

@@ -0,0 +1,80 @@
+/**
+ * The box you type a message into.
+ *
+ * Not a `Textarea` with a button beside it. What every chat surface rebuilds is
+ * the behaviour: send on Enter and newline on Shift+Enter without breaking IME
+ * composition, grow with the content up to a ceiling and then scroll, refuse to
+ * send whitespace or to send twice while a send is in flight, and tell whatever
+ * is scrolling above it that the box changed height.
+ *
+ * The survey found one built and tested implementation, in agencyzero, and
+ * eight repositories hand-rolling Enter handling. Usage said one site; the
+ * roadmap says every site, because support.cafe chat is going on all of them.
+ */
+export declare const composer: import("solid-layouts").Recipe<{
+    readonly component: "composer";
+    readonly element: "div";
+    readonly slots: {
+        readonly root: {
+            readonly base: "composer";
+        };
+        readonly field: {
+            readonly base: "composer__field";
+        };
+        readonly toolbar: {
+            readonly base: "composer__toolbar";
+        };
+        readonly lead: {
+            readonly base: "composer__lead";
+        };
+        readonly trail: {
+            readonly base: "composer__trail";
+        };
+        readonly submit: {
+            readonly base: "composer__submit";
+        };
+        readonly hint: {
+            readonly base: "composer__hint";
+        };
+        readonly issues: {
+            readonly base: "composer__issues";
+        };
+    };
+    readonly props: {
+        readonly size: {
+            readonly xs: "composer--xs";
+            readonly sm: "composer--sm";
+            readonly md: "composer--md";
+            readonly lg: "composer--lg";
+            readonly xl: "composer--xl";
+        };
+        readonly variant: {
+            readonly solid: "composer--solid";
+            readonly soft: "composer--soft";
+            readonly outline: "composer--outline";
+            readonly ghost: "composer--ghost";
+            readonly plain: "composer--plain";
+        };
+        readonly state: {
+            readonly default: "";
+            readonly loading: "composer--loading";
+            readonly error: "composer--error";
+            readonly invalid: "composer--invalid";
+            readonly disabled: "composer--disabled";
+            readonly hidden: "composer--hidden";
+        };
+        readonly radius: {
+            readonly none: "composer--radius-none";
+            readonly sm: "composer--radius-sm";
+            readonly md: "composer--radius-md";
+            readonly lg: "composer--radius-lg";
+            readonly full: "composer--radius-full";
+        };
+    };
+    readonly defaults: {
+        readonly size: "md";
+        readonly variant: "outline";
+        readonly state: "default";
+        readonly radius: "lg";
+    };
+}>;

package/dist/components/composer/Composer.recipe.js

@@ -0,0 +1,146 @@
+import { recipe } from "../../lib/layouts/index.js";
+const composer = recipe({
+    component: "composer",
+    element: "div",
+    slots: {
+        root: {
+            base: "composer"
+        },
+        field: {
+            base: "composer__field"
+        },
+        toolbar: {
+            base: "composer__toolbar"
+        },
+        lead: {
+            base: "composer__lead"
+        },
+        trail: {
+            base: "composer__trail"
+        },
+        submit: {
+            base: "composer__submit"
+        },
+        hint: {
+            base: "composer__hint"
+        },
+        issues: {
+            base: "composer__issues"
+        }
+    },
+    props: {
+        size: {
+            xs: "composer--xs",
+            sm: "composer--sm",
+            md: "composer--md",
+            lg: "composer--lg",
+            xl: "composer--xl"
+        },
+        variant: {
+            solid: "composer--solid",
+            soft: "composer--soft",
+            outline: "composer--outline",
+            ghost: "composer--ghost",
+            plain: "composer--plain"
+        },
+        state: {
+            default: "",
+            loading: "composer--loading",
+            error: "composer--error",
+            invalid: "composer--invalid",
+            disabled: "composer--disabled",
+            hidden: "composer--hidden"
+        },
+        radius: {
+            none: "composer--radius-none",
+            sm: "composer--radius-sm",
+            md: "composer--radius-md",
+            lg: "composer--radius-lg",
+            full: "composer--radius-full"
+        }
+    },
+    defaults: {
+        size: "md",
+        variant: "outline",
+        state: "default",
+        radius: "lg"
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "composer",
+                axes: {
+                    size: {
+                        xs: "composer--xs",
+                        sm: "composer--sm",
+                        md: "composer--md",
+                        lg: "composer--lg",
+                        xl: "composer--xl"
+                    },
+                    variant: {
+                        solid: "composer--solid",
+                        soft: "composer--soft",
+                        outline: "composer--outline",
+                        ghost: "composer--ghost",
+                        plain: "composer--plain"
+                    },
+                    state: {
+                        default: "",
+                        loading: "composer--loading",
+                        error: "composer--error",
+                        invalid: "composer--invalid",
+                        disabled: "composer--disabled",
+                        hidden: "composer--hidden"
+                    },
+                    radius: {
+                        none: "composer--radius-none",
+                        sm: "composer--radius-sm",
+                        md: "composer--radius-md",
+                        lg: "composer--radius-lg",
+                        full: "composer--radius-full"
+                    }
+                }
+            },
+            field: {
+                base: "composer__field",
+                axes: {}
+            },
+            toolbar: {
+                base: "composer__toolbar",
+                axes: {}
+            },
+            lead: {
+                base: "composer__lead",
+                axes: {}
+            },
+            trail: {
+                base: "composer__trail",
+                axes: {}
+            },
+            submit: {
+                base: "composer__submit",
+                axes: {}
+            },
+            hint: {
+                base: "composer__hint",
+                axes: {}
+            },
+            issues: {
+                base: "composer__issues",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 4,
+            field: 0,
+            toolbar: 6,
+            lead: 3,
+            trail: 7,
+            submit: 5,
+            hint: 1,
+            issues: 2
+        }
+    }
+});
+export { composer };

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

@@ -0,0 +1,5 @@
+export { ComposerLayout as default, ComposerLayout as Composer } from "./Composer.generated";
+export type { ComposerProps } from "./Composer.generated";
+export { composer } from "./Composer.recipe";
+export { autosize, boundsFromRows, isSubmittable, newAutosizeMemo, shouldSubmit, viewportHeight, ROW_HEIGHT, } from "./Composer.interactions";
+export type { AutosizeBounds, AutosizeField, AutosizeMemo, SubmitKey, } from "./Composer.interactions";

package/dist/components/composer/index.js

@@ -0,0 +1,3 @@
+export { ComposerLayout as Composer, ComposerLayout as default } from "./Composer.generated.js";
+export { composer } from "./Composer.recipe.js";
+export { ROW_HEIGHT, autosize, boundsFromRows, isSubmittable, newAutosizeMemo, shouldSubmit, viewportHeight } from "./Composer.interactions.js";

package/dist/components/date-field/DateField.generated.d.ts

@@ -1,7 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./DateField.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State, Issue } from "../vocabulary";
 export type DateFieldVariant = "primary" | "secondary";
 export type DateFieldRenderProps = {
     value: string;
@@ -9,7 +9,7 @@ export type DateFieldRenderProps = {
     isDisabled: boolean;
     isRequired: boolean;
 };
-export type DateFieldRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "onBlur"> & IComponentBaseProps & {
+export type DateFieldRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "onBlur"> & UIBaseProps & {
     children?: JSX.Element | ((props: DateFieldRenderProps) => JSX.Element);
     name?: string;
     value?: string;
@@ -18,32 +18,31 @@ export type DateFieldRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "child
     onBlur?: JSX.EventHandlerUnion<HTMLInputElement, FocusEvent>;
     fullWidth?: boolean;
     variant?: DateFieldVariant;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
-    isInvalid?: boolean;
-    isRequired?: boolean;
+    issues?: Issue[];
     required?: boolean;
 };
-export type DateFieldGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type DateFieldGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children?: JSX.Element | ((props: DateFieldRenderProps) => JSX.Element);
 };
-export type DateFieldInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "onInput" | "type"> & IComponentBaseProps & {
+export type DateFieldInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "onInput" | "type"> & UIBaseProps & {
     onInput?: JSX.EventHandlerUnion<HTMLInputElement, InputEvent>;
 };
-export type DateFieldInputContainerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type DateFieldInputContainerProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
 export type DateFieldSegmentValue = {
     type?: string;
     text?: string;
     isPlaceholder?: boolean;
     isFocused?: boolean;
-    isInvalid?: boolean;
-    isDisabled?: boolean;
+    issues?: Issue[];
+    state?: State;
 };
-export type DateFieldSegmentProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps & {
+export type DateFieldSegmentProps = JSX.HTMLAttributes<HTMLSpanElement> & UIBaseProps & {
     segment?: DateFieldSegmentValue;
 };
-export type DateFieldPrefixProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
-export type DateFieldSuffixProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type DateFieldPrefixProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
+export type DateFieldSuffixProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
 declare const DateFieldRoot: __LayoutComponent<DateFieldRootProps>;
 declare const DateFieldGroup: __LayoutComponent<DateFieldGroupProps>;
 declare const DateFieldInput: __LayoutComponent<DateFieldInputProps>;

package/dist/components/date-field/DateField.generated.js

@@ -4,6 +4,7 @@ import "./DateField.css";
 import { createContext, createSignal, splitProps, useContext } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { CLASSES, componentRecipe } from "./DateField.recipe.js";
+import { resolveState } from "../vocabulary.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<input>"), _tmpl$3 = /*#__PURE__*/ template("<span>");
 const DateFieldContext = createContext();
 const invokeEventHandler = (handler, event)=>{
@@ -14,7 +15,6 @@ const __solidLayoutDateFieldRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "name",
@@ -24,10 +24,9 @@ const __solidLayoutDateFieldRoot = (_stable, p)=>{
         "onBlur",
         "fullWidth",
         "variant",
-        "isDisabled",
+        "state",
         "disabled",
-        "isInvalid",
-        "isRequired",
+        "issues",
         "required"
     ]);
     const [internalValue, setInternalValue] = createSignal(local.defaultValue ?? "");
@@ -35,9 +34,9 @@ const __solidLayoutDateFieldRoot = (_stable, p)=>{
     const value = ()=>isControlled() ? local.value ?? "" : internalValue();
     const variant = ()=>local.variant ?? "primary";
     const fullWidth = ()=>Boolean(local.fullWidth);
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
-    const isInvalid = ()=>Boolean(local.isInvalid);
-    const isRequired = ()=>Boolean(local.isRequired) || Boolean(local.required);
+    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
+    const isInvalid = ()=>Boolean("invalid" === resolveState(local.state, local.issues));
+    const isRequired = ()=>Boolean(local.required) || Boolean(local.required);
     const setValue = (nextValue)=>{
         if (!isControlled()) setInternalValue(nextValue);
         local.onChange?.(nextValue);
@@ -64,7 +63,7 @@ const __solidLayoutDateFieldRoot = (_stable, p)=>{
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], fullWidth() && CLASSES.Root.flag.fullWidth, local.class, local.className)
+                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], fullWidth() && CLASSES.Root.flag.fullWidth, local.class)
                 }), {
                 "data-slot": "date-field",
                 get ["data-invalid"] () {
@@ -111,7 +110,6 @@ const __solidLayoutDateFieldGroup = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
@@ -124,7 +122,7 @@ const __solidLayoutDateFieldGroup = (_stable, p)=>{
     return (()=>{
         var _el$2 = _tmpl$();
         spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Group.base, CLASSES.Group.variant[context?.variant() ?? "primary"], context?.fullWidth() && CLASSES.Group.flag.fullWidth, local.class, local.className)
+                class: twMerge(CLASSES.Group.base, CLASSES.Group.variant[context?.variant() ?? "primary"], context?.fullWidth() && CLASSES.Group.flag.fullWidth, local.class)
             }), {
             "data-slot": "date-input-group",
             get ["data-invalid"] () {
@@ -156,7 +154,6 @@ const __solidLayoutDateFieldInput = (_stable, p)=>{
     const context = useContext(DateFieldContext);
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "style",
         "onInput",
@@ -177,7 +174,7 @@ const __solidLayoutDateFieldInput = (_stable, p)=>{
         spread(_el$3, mergeProps(others, {
             type: "date"
         }, ()=>({
-                class: twMerge(CLASSES.Input.base, local.class, local.className)
+                class: twMerge(CLASSES.Input.base, local.class)
             }), {
             "data-slot": "date-input-group-input",
             get ["data-theme"] () {
@@ -219,14 +216,13 @@ const __solidLayoutDateFieldInputContainer = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$4 = _tmpl$();
         spread(_el$4, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.InputContainer.base, local.class, local.className)
+                class: twMerge(CLASSES.InputContainer.base, local.class)
             }), {
             "data-slot": "date-input-group-input-container",
             get ["data-theme"] () {
@@ -249,7 +245,6 @@ const __solidLayoutDateFieldSegment = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "segment"
@@ -257,7 +252,7 @@ const __solidLayoutDateFieldSegment = (_stable, p)=>{
     return (()=>{
         var _el$5 = _tmpl$3();
         spread(_el$5, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Segment.base, local.class, local.className)
+                class: twMerge(CLASSES.Segment.base, local.class)
             }), {
             "data-slot": "date-input-group-segment",
             get ["data-type"] () {
@@ -267,13 +262,13 @@ const __solidLayoutDateFieldSegment = (_stable, p)=>{
                 return local.segment?.isPlaceholder ? "true" : void 0;
             },
             get ["data-invalid"] () {
-                return local.segment?.isInvalid ? "true" : void 0;
+                return local.segment?.issues?.length ? "true" : void 0;
             },
             get ["data-focused"] () {
                 return local.segment?.isFocused ? "true" : void 0;
             },
             get ["data-disabled"] () {
-                return local.segment?.isDisabled ? "true" : void 0;
+                return local.segment?.state === "disabled" ? "true" : void 0;
             },
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -295,14 +290,13 @@ const __solidLayoutDateFieldPrefix = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$6 = _tmpl$();
         spread(_el$6, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Prefix.base, local.class, local.className)
+                class: twMerge(CLASSES.Prefix.base, local.class)
             }), {
             "data-slot": "date-input-group-prefix",
             get ["data-theme"] () {
@@ -325,14 +319,13 @@ const __solidLayoutDateFieldSuffix = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$7 = _tmpl$();
         spread(_el$7, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Suffix.base, local.class, local.className)
+                class: twMerge(CLASSES.Suffix.base, local.class)
             }), {
             "data-slot": "date-input-group-suffix",
             get ["data-theme"] () {

package/dist/components/date-picker/DatePicker.css

@@ -104,7 +104,7 @@
     overflow: hidden auto;
     border-radius: calc(var(--radius, 0.75rem) * 1.75);
     background-color: var(--color-overlay, var(--color-base-100));
-    box-shadow: var(--shadow-overlay, 0 24px 48px color-mix(in oklab, black 20%, transparent));
+    box-shadow: var(--shadow-overlay, 0 24px 48px color-mix(in oklab, rgb(var(--shadow-color, 0 0 0)) 20%, transparent));
     padding: 0.75rem;
     opacity: 0;
     transform: translateY(-0.25rem) scale(0.98);

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

@@ -2,12 +2,12 @@ import type { Component as __LayoutComponent } from "solid-js";
 import "./DatePicker.css";
 import { type JSX } from "solid-js";
 import { type CalendarWeekdayFormat } from "../calendar";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 type DatePickerBaseProps = {
     value?: Date;
     defaultValue?: Date;
     onChange?: (value: Date) => void;
-    isOpen?: boolean;
+    open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     name?: string;
@@ -17,9 +17,9 @@ type DatePickerBaseProps = {
     minValue?: Date;
     maxValue?: Date;
     isDateUnavailable?: (date: Date) => boolean;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
 };
-export type DatePickerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> & IComponentBaseProps & DatePickerBaseProps;
+export type DatePickerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> & UIBaseProps & DatePickerBaseProps;
 declare const DatePicker: __LayoutComponent<DatePickerProps>;
 export default DatePicker;

package/dist/components/date-picker/DatePicker.generated.js

@@ -10,14 +10,13 @@ var _tmpl$ = /*#__PURE__*/ template("<input type=hidden>"), _tmpl$2 = /*#__PURE_
 const __solidLayoutDatePicker = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "style",
         "ref",
         "value",
         "defaultValue",
         "onChange",
-        "isOpen",
+        "open",
         "defaultOpen",
         "onOpenChange",
         "name",
@@ -27,17 +26,17 @@ const __solidLayoutDatePicker = (_stable, p)=>{
         "minValue",
         "maxValue",
         "isDateUnavailable",
-        "isDisabled",
+        "state",
         "disabled"
     ]);
-    const isDisabled = createMemo(()=>Boolean(local.isDisabled) || Boolean(local.disabled));
+    const isDisabled = createMemo(()=>Boolean("disabled" === local.state) || Boolean(local.disabled));
     const selection = useDateSelection({
         value: ()=>local.value,
         defaultValue: ()=>local.defaultValue,
         onChange: ()=>local.onChange
     });
     const openState = usePickerOpenState({
-        isOpen: ()=>local.isOpen,
+        isOpen: ()=>local.open,
         defaultOpen: ()=>local.defaultOpen,
         onOpenChange: ()=>local.onOpenChange,
         isDisabled
@@ -61,7 +60,7 @@ const __solidLayoutDatePicker = (_stable, p)=>{
             if ("function" == typeof local.ref) local.ref(node);
         }, _el$);
         spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Root.base, openState.isOpen() && CLASSES.Root.flag.open, isDisabled() && CLASSES.Root.flag.disabled, local.class, local.className)
+                class: twMerge(CLASSES.Root.base, openState.isOpen() && CLASSES.Root.flag.open, isDisabled() && CLASSES.Root.flag.disabled, local.class)
             }), {
             "data-slot": "date-picker",
             get ["data-open"] () {
@@ -188,8 +187,8 @@ const __solidLayoutDatePicker = (_stable, p)=>{
                     get isDateUnavailable () {
                         return local.isDateUnavailable;
                     },
-                    get isDisabled () {
-                        return isDisabled();
+                    get state () {
+                        return isDisabled() ? "disabled" : void 0;
                     }
                 })));
                 return _el$7;

package/dist/components/date-range-picker/DateRangePicker.css

@@ -110,7 +110,7 @@
     overflow: hidden auto;
     border-radius: calc(var(--radius, 0.75rem) * 1.75);
     background-color: var(--color-overlay, var(--color-base-100));
-    box-shadow: var(--shadow-overlay, 0 24px 48px color-mix(in oklab, black 20%, transparent));
+    box-shadow: var(--shadow-overlay, 0 24px 48px color-mix(in oklab, rgb(var(--shadow-color, 0 0 0)) 20%, transparent));
     padding: 0.75rem;
     opacity: 0;
     transform: translateY(-0.25rem) scale(0.98);

package/dist/components/date-range-picker/DateRangePicker.generated.d.ts

@@ -3,13 +3,13 @@ import "./DateRangePicker.css";
 import { type JSX } from "solid-js";
 import { type ControlledDateRangeValue } from "../../hooks/date";
 import { type CalendarWeekdayFormat } from "../calendar";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 export type DateRangeValue = ControlledDateRangeValue;
 type DateRangePickerBaseProps = {
     value?: DateRangeValue;
     defaultValue?: DateRangeValue;
     onChange?: (value: DateRangeValue) => void;
-    isOpen?: boolean;
+    open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     startName?: string;
@@ -21,9 +21,9 @@ type DateRangePickerBaseProps = {
     minValue?: Date;
     maxValue?: Date;
     isDateUnavailable?: (date: Date) => boolean;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
 };
-export type DateRangePickerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> & IComponentBaseProps & DateRangePickerBaseProps;
+export type DateRangePickerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> & UIBaseProps & DateRangePickerBaseProps;
 declare const DateRangePicker: __LayoutComponent<DateRangePickerProps>;
 export default DateRangePicker;

package/dist/components/date-range-picker/DateRangePicker.generated.js

@@ -10,14 +10,13 @@ var _tmpl$ = /*#__PURE__*/ template("<input type=hidden>"), _tmpl$2 = /*#__PURE_
 const __solidLayoutDateRangePicker = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "style",
         "ref",
         "value",
         "defaultValue",
         "onChange",
-        "isOpen",
+        "open",
         "defaultOpen",
         "onOpenChange",
         "startName",
@@ -29,17 +28,17 @@ const __solidLayoutDateRangePicker = (_stable, p)=>{
         "minValue",
         "maxValue",
         "isDateUnavailable",
-        "isDisabled",
+        "state",
         "disabled"
     ]);
-    const isDisabled = createMemo(()=>Boolean(local.isDisabled) || Boolean(local.disabled));
+    const isDisabled = createMemo(()=>Boolean("disabled" === local.state) || Boolean(local.disabled));
     const rangeSelection = useRangeSelection({
         value: ()=>local.value,
         defaultValue: ()=>local.defaultValue,
         onChange: ()=>local.onChange
     });
     const openState = usePickerOpenState({
-        isOpen: ()=>local.isOpen,
+        isOpen: ()=>local.open,
         defaultOpen: ()=>local.defaultOpen,
         onOpenChange: ()=>local.onOpenChange,
         isDisabled
@@ -74,7 +73,7 @@ const __solidLayoutDateRangePicker = (_stable, p)=>{
             if ("function" == typeof local.ref) local.ref(node);
         }, _el$);
         spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Root.base, openState.isOpen() && CLASSES.Root.flag.open, isDisabled() && CLASSES.Root.flag.disabled, local.class, local.className)
+                class: twMerge(CLASSES.Root.base, openState.isOpen() && CLASSES.Root.flag.open, isDisabled() && CLASSES.Root.flag.disabled, local.class)
             }), {
             "data-slot": "date-range-picker",
             get ["data-open"] () {
@@ -245,8 +244,8 @@ const __solidLayoutDateRangePicker = (_stable, p)=>{
                     get isDateUnavailable () {
                         return local.isDateUnavailable;
                     },
-                    get isDisabled () {
-                        return isDisabled();
+                    get state () {
+                        return isDisabled() ? "disabled" : void 0;
                     }
                 })));
                 return _el$0;