@pathscale/ui 2.8.0 → 2.9.0

package/dist/components/color-wheel/ColorWheel.css

@@ -0,0 +1,6 @@
+.color-wheel {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}

package/dist/components/color-wheel/ColorWheel.d.ts

@@ -0,0 +1,27 @@
+import type { JSX } from "@solidjs/web";
+import { type ColorWheelFlowerMode } from "../color-wheel-flower";
+interface ColorWheelBaseProps {
+    /** The literal selected colour. */
+    value: string;
+    /** Receives the normalized literal hex displayed by the selected petal. */
+    onChange: (value: string) => void;
+    /** Explicit mode. Omit to follow the root `data-theme`. */
+    mode?: ColorWheelFlowerMode;
+    /** Exactly 31 literal colours: outer ring, middle ring, inner ring, centre. */
+    palette?: readonly string[];
+    isDisabled?: boolean;
+    class?: string;
+    wheelClass?: string;
+    "aria-label"?: string;
+}
+export type ColorWheelProps = ColorWheelBaseProps & Omit<JSX.FieldsetHTMLAttributes<HTMLFieldSetElement>, keyof ColorWheelBaseProps | "onChange">;
+/**
+ * A controlled literal colour wheel.
+ *
+ * `ColorWheelFlower` remains the low-level context consumer. This is the
+ * ordinary application surface: value in, normalized value out, no private
+ * picker context for every consumer to recreate.
+ */
+export declare function ColorWheel(props: ColorWheelProps): JSX.Element;
+import "./ColorWheel.css";
+export {};

package/dist/components/color-wheel/ColorWheel.js

@@ -0,0 +1,53 @@
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { createMemo, omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
+import { ColorPickerContext, ColorWheelFlower } from "../color-wheel-flower/index.js";
+import { parseColor } from "../color-wheel-flower/ColorUtils.js";
+import "./ColorWheel.css";
+var _tmpl$ = /*#__PURE__*/ template("<fieldset>");
+const FALLBACK = parseColor("#ffffff");
+function ColorWheel(props) {
+    const local = props;
+    const others = omit(props, "value", "onChange", "mode", "palette", "isDisabled", "class", "wheelClass", "aria-label");
+    const color = createMemo(()=>parseColor(local.value) ?? FALLBACK);
+    const context = ()=>({
+            color,
+            format: ()=>"hex",
+            disabled: ()=>Boolean(local.isDisabled),
+            onChange: (next)=>local.onChange(next.hex),
+            onFormatChange: ()=>{}
+        });
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(others, {
+        get ["class"] () {
+            return twMerge("color-wheel", local.class);
+        },
+        get ["aria-label"] () {
+            return local["aria-label"] ?? "Colour";
+        },
+        "data-slot": "color-wheel",
+        get ["data-disabled"] () {
+            return local.isDisabled ? "" : void 0;
+        }
+    }), true);
+    insert(_el$, createComponent(ColorPickerContext, {
+        get value () {
+            return context();
+        },
+        get children () {
+            return createComponent(ColorWheelFlower, {
+                get ["class"] () {
+                    return local.wheelClass;
+                },
+                get mode () {
+                    return local.mode;
+                },
+                get palette () {
+                    return local.palette;
+                }
+            });
+        }
+    }));
+    return _el$;
+}
+export { ColorWheel };

package/dist/components/color-wheel/ComplexColorWheel.css

@@ -0,0 +1,97 @@
+.complex-color-wheel {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 0.875rem;
+}
+
+.complex-color-wheel__adjustments {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.complex-color-wheel__action {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.complex-color-wheel__axis {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.complex-color-wheel__axis-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  color: var(--color-base-content);
+  font-size: 0.75rem;
+}
+
+.complex-color-wheel__axis-control {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.complex-color-wheel__stops {
+  display: flex;
+  grid-column: 1 / -1;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.complex-color-wheel__stop {
+  width: 1.75rem;
+  min-width: 1.75rem;
+  height: 1.75rem;
+  min-height: 1.75rem;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 9999px;
+}
+
+.complex-color-wheel__stop[aria-pressed="true"] {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.complex-color-wheel__stop-preview {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: inherit;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.complex-color-wheel__preview {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 1px solid color-mix(in srgb, var(--color-base-content) 16%, transparent);
+  border-radius: 9999px;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
+}
+
+.complex-color-wheel__hint {
+  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
+  font-size: 0.6875rem;
+  line-height: 1.35;
+}
+
+@media (max-width: 40rem) {
+  .complex-color-wheel {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}

package/dist/components/color-wheel/ComplexColorWheel.d.ts

@@ -0,0 +1,42 @@
+import "./ComplexColorWheel.css";
+import type { JSX } from "@solidjs/web";
+import { type CardMaterial } from "../card";
+import { type ColorWheelProps } from "./ColorWheel";
+export interface ColorWheelAdjustment {
+    id: string;
+    label: string;
+    hint?: string;
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Curated values rendered as semantic choices instead of a continuous slider. */
+    stops?: readonly number[];
+    onChange: (value: number) => void;
+    onChangeEnd?: (value: number) => void;
+    formatValue?: (value: number) => string;
+    /** Optional literal preview produced by this adjustment at a value. */
+    preview?: (value: number, color: string) => string;
+    /** Optional foreground preview, such as a text-brightness sample. */
+    ink?: (value: number, color: string) => string;
+}
+export interface ComplexColorWheelProps extends ColorWheelProps {
+    /**
+     * Strength, softness and glass axes, in the order the application wants.
+     * The composition owns their standard slider markup; colour mathematics
+     * remain explicit consumer policy through `preview` and `onChange`.
+     */
+    adjustments: readonly ColorWheelAdjustment[];
+    material?: CardMaterial;
+    action?: JSX.Element;
+    adjustmentsClass?: string;
+}
+/**
+ * A colour wheel with standard value axes beside it.
+ *
+ * This is deliberately a composition instead of a theme engine. Applications
+ * agree on the interaction and accessible structure while retaining control
+ * of what "strength", "softness", blur, refraction or depth mean for their
+ * own tokens.
+ */
+export declare function ComplexColorWheel(props: ComplexColorWheelProps): JSX.Element;

package/dist/components/color-wheel/ComplexColorWheel.js

@@ -0,0 +1,182 @@
+import { className, createComponent, effect, insert, memo, setAttribute, setStyleProperty, template } from "@solidjs/web";
+import "./ComplexColorWheel.css";
+import { For, Show } from "solid-js";
+import button_0 from "../button/index.js";
+import card from "../card/index.js";
+import slider from "../slider/index.js";
+import { ColorWheel } from "./ColorWheel.js";
+var _tmpl$ = /*#__PURE__*/ template("<div class=complex-color-wheel__action data-slot=complex-color-wheel-action>"), _tmpl$2 = /*#__PURE__*/ template("<div data-slot=complex-color-wheel-adjustments><!><!>"), _tmpl$3 = /*#__PURE__*/ template("<span class=complex-color-wheel__hint>"), _tmpl$4 = /*#__PURE__*/ template("<div class=complex-color-wheel__axis data-slot=complex-color-wheel-axis><div class=complex-color-wheel__axis-heading><span></span><span></span></div><div class=complex-color-wheel__axis-control>"), _tmpl$5 = /*#__PURE__*/ template("<span class=complex-color-wheel__preview aria-hidden=true>"), _tmpl$6 = /*#__PURE__*/ template("<div class=complex-color-wheel__stops>"), _tmpl$7 = /*#__PURE__*/ template("<span aria-hidden=true class=complex-color-wheel__stop-preview>");
+function ComplexColorWheel(props) {
+    return createComponent(card, {
+        get material () {
+            return props.material ?? "glass";
+        },
+        class: "complex-color-wheel",
+        "data-slot": "complex-color-wheel",
+        get children () {
+            return [
+                createComponent(ColorWheel, {
+                    get value () {
+                        return props.value;
+                    },
+                    get onChange () {
+                        return props.onChange;
+                    },
+                    get mode () {
+                        return props.mode;
+                    },
+                    get palette () {
+                        return props.palette;
+                    },
+                    get isDisabled () {
+                        return props.isDisabled;
+                    },
+                    get ["class"] () {
+                        return props.class;
+                    },
+                    get wheelClass () {
+                        return props.wheelClass;
+                    },
+                    get ["aria-label"] () {
+                        return props["aria-label"];
+                    }
+                }),
+                (()=>{
+                    var _el$ = _tmpl$2(), _el$3 = _el$.firstChild, _el$4 = _el$3.nextSibling;
+                    insert(_el$, createComponent(Show, {
+                        get when () {
+                            return props.action;
+                        },
+                        get children () {
+                            var _el$2 = _tmpl$();
+                            insert(_el$2, ()=>props.action);
+                            return _el$2;
+                        }
+                    }), _el$3);
+                    insert(_el$, createComponent(For, {
+                        get each () {
+                            return props.adjustments;
+                        },
+                        children: (adjustment)=>(()=>{
+                                var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$6.nextSibling;
+                                insert(_el$7, ()=>adjustment.label);
+                                insert(_el$8, ()=>adjustment.formatValue?.(adjustment.value) ?? adjustment.value);
+                                insert(_el$9, createComponent(Show, {
+                                    get when () {
+                                        return memo(()=>!!adjustment.stops?.length)() ? adjustment.stops : void 0;
+                                    },
+                                    get fallback () {
+                                        return [
+                                            createComponent(Show, {
+                                                get when () {
+                                                    return adjustment.preview;
+                                                },
+                                                get children () {
+                                                    var _el$1 = _tmpl$5();
+                                                    effect(()=>adjustment.preview?.(adjustment.value, props.value), (_v$)=>{
+                                                        setStyleProperty(_el$1, "background-color", _v$);
+                                                    });
+                                                    return _el$1;
+                                                }
+                                            }),
+                                            createComponent(slider, {
+                                                get label () {
+                                                    return adjustment.label;
+                                                },
+                                                get value () {
+                                                    return adjustment.value;
+                                                },
+                                                get min () {
+                                                    return adjustment.min ?? 0;
+                                                },
+                                                get max () {
+                                                    return adjustment.max ?? 100;
+                                                },
+                                                get step () {
+                                                    return adjustment.step;
+                                                },
+                                                get disabled () {
+                                                    return props.isDisabled;
+                                                },
+                                                get onChange () {
+                                                    return adjustment.onChange;
+                                                },
+                                                get onChangeEnd () {
+                                                    return adjustment.onChangeEnd;
+                                                },
+                                                get formatValue () {
+                                                    return adjustment.formatValue;
+                                                },
+                                                size: "sm"
+                                            })
+                                        ];
+                                    },
+                                    children: (stops)=>(()=>{
+                                            var _el$10 = _tmpl$6();
+                                            insert(_el$10, createComponent(For, {
+                                                get each () {
+                                                    return stops();
+                                                },
+                                                children: (stop)=>createComponent(button_0, {
+                                                        type: "button",
+                                                        size: "sm",
+                                                        variant: "ghost",
+                                                        get ["aria-label"] () {
+                                                            return `${adjustment.label} ${adjustment.formatValue?.(stop) ?? stop}`;
+                                                        },
+                                                        get ["aria-pressed"] () {
+                                                            return Math.abs(adjustment.value - stop) < 0.001 ? "true" : "false";
+                                                        },
+                                                        get disabled () {
+                                                            return props.isDisabled;
+                                                        },
+                                                        onClick: ()=>adjustment.onChange(stop),
+                                                        class: "complex-color-wheel__stop",
+                                                        get children () {
+                                                            var _el$11 = _tmpl$7();
+                                                            insert(_el$11, createComponent(Show, {
+                                                                get when () {
+                                                                    return adjustment.ink;
+                                                                },
+                                                                children: "A"
+                                                            }));
+                                                            effect(()=>({
+                                                                    e: adjustment.preview?.(stop, props.value),
+                                                                    t: adjustment.ink?.(stop, props.value)
+                                                                }), ({ e, t }, _p$)=>{
+                                                                e !== _p$?.e && setStyleProperty(_el$11, "background-color", e);
+                                                                t !== _p$?.t && setStyleProperty(_el$11, "color", t);
+                                                            });
+                                                            return _el$11;
+                                                        }
+                                                    })
+                                            }));
+                                            return _el$10;
+                                        })()
+                                }));
+                                insert(_el$5, createComponent(Show, {
+                                    get when () {
+                                        return adjustment.hint;
+                                    },
+                                    get children () {
+                                        var _el$0 = _tmpl$3();
+                                        insert(_el$0, ()=>adjustment.hint);
+                                        return _el$0;
+                                    }
+                                }), null);
+                                effect(()=>adjustment.id, (_v$)=>{
+                                    setAttribute(_el$5, "data-axis", _v$);
+                                });
+                                return _el$5;
+                            })()
+                    }), _el$4);
+                    effect(()=>`complex-color-wheel__adjustments ${props.adjustmentsClass ?? ""}`.trim(), (_v$, _$p)=>{
+                        className(_el$, _v$, _$p);
+                    });
+                    return _el$;
+                })()
+            ];
+        }
+    });
+}
+export { ComplexColorWheel };

package/dist/components/color-wheel/index.d.ts

@@ -0,0 +1,4 @@
+export { ColorWheel } from "./ColorWheel";
+export type { ColorWheelProps } from "./ColorWheel";
+export { ComplexColorWheel } from "./ComplexColorWheel";
+export type { ColorWheelAdjustment, ComplexColorWheelProps, } from "./ComplexColorWheel";

package/dist/components/color-wheel/index.js

@@ -0,0 +1,2 @@
+export { ColorWheel } from "./ColorWheel.js";
+export { ComplexColorWheel } from "./ComplexColorWheel.js";

package/dist/components/slider/Slider.generated.js

@@ -219,6 +219,9 @@ const __solidLayoutSlider = (_stable, p)=>{
         get ["aria-valuetext"] () {
             return formattedValue();
         },
+        get ["aria-label"] () {
+            return p["aria-label"] ?? p.label;
+        },
         get ["aria-labelledby"] () {
             return p.label ? labelId : void 0;
         },

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export type { CollapsibleBodyProps, CollapsibleContentProps, CollapsibleHeadingP
 export { default as Collapsible } from "./components/collapsible";
 export type { ColorSwatchProps, ColorSwatchShape, ColorSwatchSize, } from "./components/color-swatch";
 export { default as ColorSwatch } from "./components/color-swatch";
+export { ColorWheel, ComplexColorWheel, type ColorWheelAdjustment, type ColorWheelProps, type ComplexColorWheelProps, } from "./components/color-wheel";
 export type { ComposerProps } from "./components/composer";
 export { autosize, boundsFromRows, default as Composer, isSubmittable, shouldSubmit, } from "./components/composer";
 export type { CreateDataGridOptions, DataGridBorders, DataGridCellContext, DataGridColumn, DataGridColumnOptions, DataGridDataType, DataGridModel, DataGridProps, DataGridRow, DataGridSelectionMode, DataGridSort, DataGridSortDirection, DataGridSticky, DataGridStriping, } from "./components/data-grid";

package/dist/index.js

@@ -20,6 +20,7 @@ export { default as Checkbox } from "./components/checkbox/index.js";
 export { default as Chip } from "./components/chip/index.js";
 export { default as Collapsible } from "./components/collapsible/index.js";
 export { default as ColorSwatch } from "./components/color-swatch/index.js";
+export { ColorWheel, ComplexColorWheel } from "./components/color-wheel/index.js";
 export { autosize, boundsFromRows, default as Composer, isSubmittable, shouldSubmit } from "./components/composer/index.js";
 export { createDataGrid, default as DataGrid } from "./components/data-grid/index.js";
 export { DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogHeading, DialogIcon, DialogTrigger, default as Dialog } from "./components/dialog/index.js";

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "components": {
     "Accordion": {
       "kind": "embedded"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "author": "pathscale",
   "repository": {
     "type": "git",