@pathscale/ui 2.1.1 → 2.2.0

package/dist/components/collapsible/Collapsible.generated.d.ts

@@ -0,0 +1,46 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Collapsible.css";
+import { type JSX } from "solid-js";
+import type { UIBaseProps, State } from "../vocabulary";
+export type CollapsibleRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    children?: JSX.Element;
+    id?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    state?: State;
+    disabled?: boolean;
+};
+export type CollapsibleHeadingProps = Omit<JSX.HTMLAttributes<HTMLHeadingElement>, "children"> & UIBaseProps & {
+    children?: JSX.Element;
+};
+export type CollapsibleTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled"> & UIBaseProps & {
+    children?: JSX.Element;
+};
+export type CollapsibleContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    children?: JSX.Element;
+    keepMounted?: boolean;
+};
+export type CollapsibleBodyProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    children?: JSX.Element;
+};
+export type CollapsibleIndicatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & UIBaseProps & {
+    children?: JSX.Element;
+};
+declare const CollapsibleRoot: __LayoutComponent<CollapsibleRootProps>;
+declare const CollapsibleHeading: __LayoutComponent<CollapsibleHeadingProps>;
+declare const CollapsibleTrigger: __LayoutComponent<CollapsibleTriggerProps>;
+declare const CollapsibleContent: __LayoutComponent<CollapsibleContentProps>;
+declare const CollapsibleBody: __LayoutComponent<CollapsibleBodyProps>;
+declare const CollapsibleIndicator: __LayoutComponent<CollapsibleIndicatorProps>;
+declare const Collapsible: __LayoutComponent<CollapsibleRootProps> & {
+    Root: __LayoutComponent<CollapsibleRootProps>;
+    Heading: __LayoutComponent<CollapsibleHeadingProps>;
+    Trigger: __LayoutComponent<CollapsibleTriggerProps>;
+    Content: __LayoutComponent<CollapsibleContentProps>;
+    Body: __LayoutComponent<CollapsibleBodyProps>;
+    Indicator: __LayoutComponent<CollapsibleIndicatorProps>;
+};
+export default Collapsible;
+export { CollapsibleRoot, CollapsibleHeading, CollapsibleTrigger, CollapsibleContent, CollapsibleBody, CollapsibleIndicator, };
+export type { CollapsibleRootProps as CollapsibleProps };

package/dist/components/{disclosure/Disclosure.generated.js → collapsible/Collapsible.generated.js}

@@ -1,63 +1,41 @@
 import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
-import "./Disclosure.css";
+import "./Collapsible.css";
 import { createContext, createMemo, createSignal, createUniqueId, splitProps, useContext } from "solid-js";
 import { twMerge } from "tailwind-merge";
-import { CLASSES, componentRecipe } from "./Disclosure.recipe.js";
-import { DisclosureGroupContext } from "../disclosure-group/DisclosureGroup.generated.js";
+import { CLASSES, componentRecipe } from "./Collapsible.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<h3>"), _tmpl$3 = /*#__PURE__*/ template("<button>"), _tmpl$4 = /*#__PURE__*/ template("<div><div>"), _tmpl$5 = /*#__PURE__*/ template("<span>"), _tmpl$6 = /*#__PURE__*/ template('<svg fill=none role=presentation viewBox="0 0 24 24"width=100% height=100%><path d="M6 9L12 15L18 9"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');
-const DisclosureContext = createContext();
-const useDisclosureContext = ()=>{
-    const ctx = useContext(DisclosureContext);
-    if (!ctx) throw new Error("Disclosure compound components must be used within <Disclosure>");
+const CollapsibleContext = createContext();
+const useCollapsibleContext = ()=>{
+    const ctx = useContext(CollapsibleContext);
+    if (!ctx) throw new Error("Collapsible compound components must be used within <Collapsible>");
     return ctx;
 };
 const normalizeKey = (value)=>String(value);
-const getGroupExpanded = (group, id)=>{
-    if (!group) return false;
-    return group.expandedKeys().has(id);
-};
-const updateGroupExpanded = (group, id, nextOpen)=>{
-    if (!group) return;
-    if (group.isDisabled()) return;
-    if (group.allowsMultipleExpanded()) {
-        const next = new Set(group.expandedKeys());
-        if (nextOpen) next.add(id);
-        else next.delete(id);
-        group.setExpandedKeys(next);
-        return;
-    }
-    group.setExpandedKeys(nextOpen ? new Set([
-        id
-    ]) : new Set());
-};
-const __solidLayoutDisclosureRoot = (_stable, p)=>{
-    const group = useContext(DisclosureGroupContext);
+const __solidLayoutCollapsibleRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "id",
-        "isOpen",
+        "open",
         "defaultOpen",
         "onOpenChange",
-        "isDisabled",
+        "state",
         "disabled"
     ]);
     const uniqueId = createUniqueId();
     const itemId = ()=>normalizeKey(local.id ?? uniqueId);
-    const triggerId = ()=>`disclosure-trigger-${itemId()}`;
-    const contentId = ()=>`disclosure-content-${itemId()}`;
+    const triggerId = ()=>`collapsible-trigger-${itemId()}`;
+    const contentId = ()=>`collapsible-content-${itemId()}`;
     const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
-    const isControlled = createMemo(()=>void 0 !== local.isOpen);
-    const standaloneOpen = createMemo(()=>isControlled() ? Boolean(local.isOpen) : internalOpen());
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(group?.isDisabled());
-    const isExpanded = ()=>group ? getGroupExpanded(group, itemId()) : standaloneOpen();
+    const isControlled = createMemo(()=>void 0 !== local.open);
+    const standaloneOpen = createMemo(()=>isControlled() ? Boolean(local.open) : internalOpen());
+    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
+    const isExpanded = ()=>standaloneOpen();
     const setOpen = (next)=>{
         if (isDisabled()) return;
-        if (group) return void updateGroupExpanded(group, itemId(), next);
         if (!isControlled()) setInternalOpen(next);
         if (standaloneOpen() !== next) local.onOpenChange?.(next);
     };
@@ -69,14 +47,14 @@ const __solidLayoutDisclosureRoot = (_stable, p)=>{
         contentId,
         toggle
     };
-    return createComponent(DisclosureContext.Provider, {
+    return createComponent(CollapsibleContext.Provider, {
         value: ctx,
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.base, isExpanded() && CLASSES.flag.expanded, isDisabled() && CLASSES.flag.disabled, local.class, local.className)
+                    class: twMerge(CLASSES.base, isExpanded() && CLASSES.flag.expanded, isDisabled() && CLASSES.flag.disabled, local.class)
                 }), {
-                "data-slot": "disclosure",
+                "data-slot": "collapsible",
                 get ["data-expanded"] () {
                     return isExpanded() ? "true" : "false";
                 },
@@ -95,25 +73,24 @@ const __solidLayoutDisclosureRoot = (_stable, p)=>{
         }
     });
 };
-const DisclosureRoot = defineComponent({
+const CollapsibleRoot = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutDisclosureRoot,
+    layout: __solidLayoutCollapsibleRoot,
     embedded: true
 });
-const __solidLayoutDisclosureHeading = (_stable, p)=>{
+const __solidLayoutCollapsibleHeading = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$2 = _tmpl$2();
         spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.heading, local.class, local.className)
+                class: twMerge(CLASSES.slot.heading, local.class)
             }), {
-            "data-slot": "disclosure-heading",
+            "data-slot": "collapsible-heading",
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -125,17 +102,16 @@ const __solidLayoutDisclosureHeading = (_stable, p)=>{
         return _el$2;
     })();
 };
-const DisclosureHeading = defineComponent({
+const CollapsibleHeading = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutDisclosureHeading,
+    layout: __solidLayoutCollapsibleHeading,
     embedded: true
 });
-const __solidLayoutDisclosureTrigger = (_stable, p)=>{
-    const ctx = useDisclosureContext();
+const __solidLayoutCollapsibleTrigger = (_stable, p)=>{
+    const ctx = useCollapsibleContext();
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "onClick",
@@ -165,9 +141,9 @@ const __solidLayoutDisclosureTrigger = (_stable, p)=>{
                 return local.type ?? "button";
             }
         }, ()=>({
-                class: twMerge(CLASSES.slot.trigger, local.class, local.className)
+                class: twMerge(CLASSES.slot.trigger, local.class)
             }), {
-            "data-slot": "disclosure-trigger",
+            "data-slot": "collapsible-trigger",
             get ["data-expanded"] () {
                 return ctx.isExpanded() ? "true" : "false";
             },
@@ -196,17 +172,16 @@ const __solidLayoutDisclosureTrigger = (_stable, p)=>{
         return _el$3;
     })();
 };
-const DisclosureTrigger = defineComponent({
+const CollapsibleTrigger = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutDisclosureTrigger,
+    layout: __solidLayoutCollapsibleTrigger,
     embedded: true
 });
-const __solidLayoutDisclosureContent = (_stable, p)=>{
-    const ctx = useDisclosureContext();
+const __solidLayoutCollapsibleContent = (_stable, p)=>{
+    const ctx = useCollapsibleContext();
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "keepMounted"
@@ -222,9 +197,9 @@ const __solidLayoutDisclosureContent = (_stable, p)=>{
             },
             role: "region"
         }, ()=>({
-                class: twMerge(CLASSES.slot.content, local.class, local.className)
+                class: twMerge(CLASSES.slot.content, local.class)
             }), {
-            "data-slot": "disclosure-content",
+            "data-slot": "collapsible-content",
             get ["data-expanded"] () {
                 return expanded() ? "true" : "false";
             },
@@ -245,25 +220,24 @@ const __solidLayoutDisclosureContent = (_stable, p)=>{
         return _el$4;
     })();
 };
-const DisclosureContent = defineComponent({
+const CollapsibleContent = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutDisclosureContent,
+    layout: __solidLayoutCollapsibleContent,
     embedded: true
 });
-const __solidLayoutDisclosureBody = (_stable, p)=>{
+const __solidLayoutCollapsibleBody = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild;
         spread(_el$5, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.body, local.class, local.className)
+                class: twMerge(CLASSES.slot.body, local.class)
             }), {
-            "data-slot": "disclosure-body",
+            "data-slot": "collapsible-body",
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -274,23 +248,22 @@ const __solidLayoutDisclosureBody = (_stable, p)=>{
         spread(_el$6, mergeProps(()=>({
                 class: CLASSES.slot.bodyInner
             }), {
-            "data-slot": "disclosure-body-inner"
+            "data-slot": "collapsible-body-inner"
         }), false, true);
         insert(_el$6, ()=>local.children);
         return _el$5;
     })();
 };
-const DisclosureBody = defineComponent({
+const CollapsibleBody = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutDisclosureBody,
+    layout: __solidLayoutCollapsibleBody,
     embedded: true
 });
-const __solidLayoutDisclosureIndicator = (_stable, p)=>{
-    const ctx = useDisclosureContext();
+const __solidLayoutCollapsibleIndicator = (_stable, p)=>{
+    const ctx = useCollapsibleContext();
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
@@ -299,9 +272,9 @@ const __solidLayoutDisclosureIndicator = (_stable, p)=>{
         spread(_el$7, mergeProps(others, {
             "aria-hidden": "true"
         }, ()=>({
-                class: twMerge(CLASSES.slot.indicator, local.class, local.className)
+                class: twMerge(CLASSES.slot.indicator, local.class)
             }), {
-            "data-slot": "disclosure-indicator",
+            "data-slot": "collapsible-indicator",
             get ["data-expanded"] () {
                 return ctx.isExpanded() ? "true" : "false";
             },
@@ -316,19 +289,19 @@ const __solidLayoutDisclosureIndicator = (_stable, p)=>{
         return _el$7;
     })();
 };
-const DisclosureIndicator = defineComponent({
+const CollapsibleIndicator = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutDisclosureIndicator,
+    layout: __solidLayoutCollapsibleIndicator,
     embedded: true
 });
-const Disclosure = Object.assign(DisclosureRoot, {
-    Root: DisclosureRoot,
-    Heading: DisclosureHeading,
-    Trigger: DisclosureTrigger,
-    Content: DisclosureContent,
-    Body: DisclosureBody,
-    Indicator: DisclosureIndicator
+const Collapsible = Object.assign(CollapsibleRoot, {
+    Root: CollapsibleRoot,
+    Heading: CollapsibleHeading,
+    Trigger: CollapsibleTrigger,
+    Content: CollapsibleContent,
+    Body: CollapsibleBody,
+    Indicator: CollapsibleIndicator
 });
-const Disclosure_generated = Disclosure;
-export default Disclosure_generated;
-export { DisclosureBody, DisclosureContent, DisclosureHeading, DisclosureIndicator, DisclosureRoot, DisclosureTrigger };
+const Collapsible_generated = Collapsible;
+export default Collapsible_generated;
+export { CollapsibleBody, CollapsibleContent, CollapsibleHeading, CollapsibleIndicator, CollapsibleRoot, CollapsibleTrigger };

package/dist/components/collapsible/Collapsible.recipe.d.ts

@@ -0,0 +1,28 @@
+export declare const CLASSES: {
+    readonly base: "collapsible";
+    readonly slot: {
+        readonly heading: "collapsible__heading";
+        readonly trigger: "collapsible__trigger";
+        readonly indicator: "collapsible__indicator";
+        readonly content: "collapsible__content";
+        readonly body: "collapsible__body";
+        readonly bodyInner: "collapsible__body-inner";
+    };
+    readonly flag: {
+        readonly expanded: "collapsible--expanded";
+        readonly disabled: "collapsible--disabled";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "collapsible";
+    readonly slots: {
+        readonly collapsible: {};
+        readonly "collapsible-body": {};
+        readonly "collapsible-body-inner": {};
+        readonly "collapsible-content": {};
+        readonly "collapsible-heading": {};
+        readonly "collapsible-indicator": {};
+        readonly "collapsible-trigger": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/collapsible/Collapsible.recipe.js

@@ -0,0 +1,77 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "collapsible",
+    slot: {
+        heading: "collapsible__heading",
+        trigger: "collapsible__trigger",
+        indicator: "collapsible__indicator",
+        content: "collapsible__content",
+        body: "collapsible__body",
+        bodyInner: "collapsible__body-inner"
+    },
+    flag: {
+        expanded: "collapsible--expanded",
+        disabled: "collapsible--disabled"
+    }
+};
+const componentRecipe = recipe({
+    component: "collapsible",
+    slots: {
+        collapsible: {},
+        "collapsible-body": {},
+        "collapsible-body-inner": {},
+        "collapsible-content": {},
+        "collapsible-heading": {},
+        "collapsible-indicator": {},
+        "collapsible-trigger": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            collapsible: {
+                base: "",
+                axes: {}
+            },
+            "collapsible-body": {
+                base: "",
+                axes: {}
+            },
+            "collapsible-body-inner": {
+                base: "",
+                axes: {}
+            },
+            "collapsible-content": {
+                base: "",
+                axes: {}
+            },
+            "collapsible-heading": {
+                base: "",
+                axes: {}
+            },
+            "collapsible-indicator": {
+                base: "",
+                axes: {}
+            },
+            "collapsible-trigger": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            collapsible: 0,
+            "collapsible-body": 1,
+            "collapsible-body-inner": 2,
+            "collapsible-content": 3,
+            "collapsible-heading": 4,
+            "collapsible-indicator": 5,
+            "collapsible-trigger": 6,
+            root: 7
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "solid-js";
+import Collapsible, { CollapsibleRoot, CollapsibleHeading, CollapsibleTrigger, CollapsibleContent, CollapsibleBody, CollapsibleIndicator } from "./Collapsible.generated";
+export type CollapsibleProps = ComponentProps<typeof CollapsibleRoot>;
+export type CollapsibleRootProps = ComponentProps<typeof CollapsibleRoot>;
+export type CollapsibleHeadingProps = ComponentProps<typeof CollapsibleHeading>;
+export type CollapsibleTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
+export type CollapsibleContentProps = ComponentProps<typeof CollapsibleContent>;
+export type CollapsibleBodyProps = ComponentProps<typeof CollapsibleBody>;
+export type CollapsibleIndicatorProps = ComponentProps<typeof CollapsibleIndicator>;
+export { CollapsibleRoot, CollapsibleHeading, CollapsibleTrigger, CollapsibleContent, CollapsibleBody, CollapsibleIndicator, };
+export default Collapsible;

package/dist/components/collapsible/index.js

@@ -0,0 +1,4 @@
+import Collapsible_generated, { CollapsibleBody, CollapsibleContent, CollapsibleHeading, CollapsibleIndicator, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.generated.js";
+const collapsible = Collapsible_generated;
+export default collapsible;
+export { CollapsibleBody, CollapsibleContent, CollapsibleHeading, CollapsibleIndicator, CollapsibleRoot, CollapsibleTrigger };

package/dist/components/color-area/ColorArea.css

@@ -7,7 +7,7 @@
     border-radius: 1rem;
     aspect-ratio: 1 / 1;
     background: var(--color-area-background);
-    box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.1);
+    box-shadow: inset 0 0 0 1px rgb(var(--shadow-color, 0 0 0) / 10%);
     cursor: crosshair;
     outline: none;
     user-select: none;
@@ -23,18 +23,18 @@
   .color-area[data-focus-visible="true"] {
     box-shadow:
       0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent),
-      inset 0 0 0 1px oklch(0% 0 0 / 0.1);
+      inset 0 0 0 1px rgb(var(--shadow-color, 0 0 0) / 10%);
   }
 
   .color-area__thumb {
     position: absolute;
     width: 1rem;
     height: 1rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     border: 3px solid #fff;
     box-shadow:
-      0 0 0 1px oklch(0% 0 0 / 0.1),
-      inset 0 0 0 1px oklch(0% 0 0 / 0.1);
+      0 0 0 1px rgb(var(--shadow-color, 0 0 0) / 10%),
+      inset 0 0 0 1px rgb(var(--shadow-color, 0 0 0) / 10%);
     transform: translate(-50%, -50%);
     transition:
       width 150ms ease,

package/dist/components/color-area/ColorArea.generated.d.ts

@@ -1,16 +1,16 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ColorArea.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 export type ColorAreaValue = {
     h: number;
     s: number;
     v: number;
 };
-export type ColorAreaProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
+export type ColorAreaProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & UIBaseProps & {
     value?: ColorAreaValue;
     onChange?: (value: ColorAreaValue) => void;
-    isDisabled?: boolean;
+    state?: State;
 };
 declare const ColorArea: __LayoutComponent<ColorAreaProps>;
 export default ColorArea;

package/dist/components/color-area/ColorArea.generated.js

@@ -55,10 +55,9 @@ const hsvToRgb = (h, s, v)=>{
 const __solidLayoutColorArea = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "value",
         "onChange",
-        "isDisabled",
+        "state",
         "dataTheme",
         "style",
         "aria-label"
@@ -68,7 +67,7 @@ const __solidLayoutColorArea = (_stable, p)=>{
     let areaRef;
     const isControlled = ()=>void 0 !== local.value;
     const currentValue = ()=>normalizeValue(local.value ?? internalValue());
-    const isDisabled = ()=>Boolean(local.isDisabled);
+    const isDisabled = ()=>Boolean("disabled" === local.state);
     const emitChange = (next)=>{
         const normalized = normalizeValue(next);
         if (!isControlled()) setInternalValue(normalized);
@@ -155,7 +154,7 @@ const __solidLayoutColorArea = (_stable, p)=>{
         var _ref$ = areaRef;
         "function" == typeof _ref$ ? use(_ref$, _el$) : areaRef = _el$;
         spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.base, local.class, local.className)
+                class: twMerge(CLASSES.base, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/color-field/ColorField.css

@@ -19,7 +19,7 @@
     align-items: center;
     overflow: hidden;
     border-radius: 0.75rem;
-    border: 1px solid var(--color-base-300);
+    border: var(--border, 1px) solid var(--color-base-300);
     background-color: var(--color-base-100);
     color: var(--color-base-content);
     box-shadow: 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;

package/dist/components/color-field/ColorField.generated.d.ts

@@ -2,13 +2,13 @@ import type { Component as __LayoutComponent } from "solid-js";
 import "./ColorField.css";
 import { type JSX } from "solid-js";
 import { type ColorFormat } from "../color-wheel-flower/ColorUtils";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 export type ColorFieldFormat = ColorFormat;
-export type ColorFieldProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> & IComponentBaseProps & {
+export type ColorFieldProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> & UIBaseProps & {
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
-    isDisabled?: boolean;
+    state?: State;
     format?: ColorFieldFormat;
     fullWidth?: boolean;
 };

package/dist/components/color-field/ColorField.generated.js

@@ -20,11 +20,10 @@ const normalizeColor = (value, format)=>{
 const __solidLayoutColorField = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "value",
         "defaultValue",
         "onChange",
-        "isDisabled",
+        "state",
         "disabled",
         "format",
         "fullWidth",
@@ -35,7 +34,7 @@ const __solidLayoutColorField = (_stable, p)=>{
         "onKeyDown"
     ]);
     const format = ()=>local.format ?? "hex";
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
     const initialValue = ()=>{
         const seed = local.value ?? local.defaultValue ?? FALLBACK_COLOR;
         return normalizeColor(seed, format()) ?? FALLBACK_COLOR;
@@ -118,7 +117,7 @@ const __solidLayoutColorField = (_stable, p)=>{
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
         spread(_el$, mergeProps(()=>({
-                class: twMerge(CLASSES.base, local.fullWidth && CLASSES.flag.fullWidth, isDisabled() && CLASSES.flag.disabled, local.class, local.className)
+                class: twMerge(CLASSES.base, local.fullWidth && CLASSES.flag.fullWidth, isDisabled() && CLASSES.flag.disabled, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/color-picker/ColorPicker.generated.d.ts

@@ -4,7 +4,7 @@ import { type JSX } from "solid-js";
 import { type ColorAreaProps, type ColorAreaValue } from "../color-area";
 import { type ColorFieldProps } from "../color-field";
 import { type ColorSliderProps } from "../color-slider";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 export type ColorPickerAreaProps = Omit<ColorAreaProps, "value" | "onChange" | "isDisabled"> & {
     onChange?: (value: ColorAreaValue) => void;
 };
@@ -17,12 +17,12 @@ export type ColorPickerFieldProps = Omit<ColorFieldProps, "value" | "onChange" |
     onChange?: (value: string) => void;
 };
 declare const ColorPickerField: __LayoutComponent<ColorPickerFieldProps>;
-export type ColorPickerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
+export type ColorPickerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & UIBaseProps & {
     children?: JSX.Element;
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
-    isDisabled?: boolean;
+    state?: State;
 };
 declare const ColorPickerRoot: __LayoutComponent<ColorPickerProps>;
 declare const ColorPicker: __LayoutComponent<ColorPickerProps> & {