@pathscale/ui 2.8.0 → 2.9.1

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.generated.d.ts

@@ -0,0 +1,21 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./ColorWheel.css";
+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">;
+export declare const ColorWheelLayout: __LayoutComponent<ColorWheelProps>;
+export {};

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

@@ -0,0 +1,54 @@
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import "./ColorWheel.css";
+import { createMemo, omit } from "solid-js";
+import { ColorPickerContext, ColorWheelFlower } from "../color-wheel-flower/index.js";
+import { parseColor } from "../color-wheel-flower/ColorUtils.js";
+import { colorWheel } from "./ColorWheel.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<fieldset>");
+const FALLBACK = parseColor("#ffffff");
+const __solidLayoutColorWheelLayout = (_stable, p)=>{
+    const others = omit(p, "value", "onChange", "mode", "palette", "isDisabled", "class", "wheelClass", "aria-label");
+    const color = createMemo(()=>parseColor(p.value) ?? FALLBACK);
+    const context = ()=>({
+            color,
+            format: ()=>"hex",
+            disabled: ()=>Boolean(p.isDisabled),
+            onChange: (next)=>p.onChange(next.hex),
+            onFormatChange: ()=>{}
+        });
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(others, ()=>_stable.slot.root, {
+        get ["aria-label"] () {
+            return p["aria-label"] ?? "Colour";
+        },
+        get ["data-disabled"] () {
+            return p.isDisabled ? "" : void 0;
+        }
+    }), true);
+    insert(_el$, createComponent(ColorPickerContext, {
+        get value () {
+            return context();
+        },
+        get children () {
+            return createComponent(ColorWheelFlower, {
+                get ["class"] () {
+                    return p.wheelClass;
+                },
+                get mode () {
+                    return p.mode;
+                },
+                get palette () {
+                    return p.palette;
+                }
+            });
+        }
+    }));
+    return _el$;
+};
+const ColorWheelLayout = defineComponent({
+    recipe: colorWheel,
+    layout: __solidLayoutColorWheelLayout,
+    embedded: true
+});
+export { ColorWheelLayout };

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

@@ -0,0 +1,9 @@
+export declare const colorWheel: import("solid-layouts/solid-2").Recipe<{
+    readonly component: "color-wheel";
+    readonly element: "fieldset";
+    readonly slots: {
+        readonly root: {
+            readonly base: "color-wheel";
+        };
+    };
+}>;

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

@@ -0,0 +1,23 @@
+import { recipe } from "../../lib/layouts/index.js";
+const colorWheel = recipe({
+    component: "color-wheel",
+    element: "fieldset",
+    slots: {
+        root: {
+            base: "color-wheel"
+        }
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "color-wheel",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { colorWheel };

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

@@ -0,0 +1,98 @@
+.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.generated.d.ts

@@ -0,0 +1,31 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./ComplexColorWheel.css";
+import type { JSX } from "@solidjs/web";
+import { type CardMaterial } from "../card";
+import { type ColorWheelProps } from "./ColorWheel.generated";
+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 {
+    /** Standard value axes rendered beside the wheel. */
+    adjustments: readonly ColorWheelAdjustment[];
+    material?: CardMaterial;
+    action?: JSX.Element;
+    adjustmentsClass?: string;
+}
+export declare const ComplexColorWheelLayout: __LayoutComponent<ComplexColorWheelProps>;

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

@@ -0,0 +1,201 @@
+import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import "./ComplexColorWheel.css";
+import { For, Show } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
+import button_0 from "../button/index.js";
+import card from "../card/index.js";
+import slider from "../slider/index.js";
+import { ColorWheelLayout } from "./ColorWheel.generated.js";
+import { complexColorWheel } from "./ComplexColorWheel.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><!><!>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<div><div><span></span><span></span></div><div>");
+const __solidLayoutComplexColorWheelLayout = (_stable, p)=>createComponent(card, mergeProps(()=>_stable.slot.root, {
+        get material () {
+            return p.material ?? "glass";
+        },
+        get children () {
+            return [
+                createComponent(ColorWheelLayout, {
+                    get value () {
+                        return p.value;
+                    },
+                    get onChange () {
+                        return p.onChange;
+                    },
+                    get mode () {
+                        return p.mode;
+                    },
+                    get palette () {
+                        return p.palette;
+                    },
+                    get isDisabled () {
+                        return p.isDisabled;
+                    },
+                    get ["class"] () {
+                        return p.class;
+                    },
+                    get wheelClass () {
+                        return p.wheelClass;
+                    },
+                    get ["aria-label"] () {
+                        return p["aria-label"];
+                    }
+                }),
+                (()=>{
+                    var _el$ = _tmpl$2(), _el$3 = _el$.firstChild, _el$4 = _el$3.nextSibling;
+                    spread(_el$, mergeProps(()=>_stable.slot.adjustments, {
+                        get ["class"] () {
+                            return twMerge(_stable.slot.adjustments.class, p.adjustmentsClass);
+                        }
+                    }), true);
+                    insert(_el$, createComponent(Show, {
+                        get when () {
+                            return p.action;
+                        },
+                        get children () {
+                            var _el$2 = _tmpl$();
+                            spread(_el$2, mergeProps(()=>_stable.slot.action), true);
+                            insert(_el$2, ()=>p.action);
+                            return _el$2;
+                        }
+                    }), _el$3);
+                    insert(_el$, createComponent(For, {
+                        get each () {
+                            return p.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;
+                                spread(_el$5, mergeProps(()=>_stable.slot.axis, {
+                                    get ["data-axis"] () {
+                                        return adjustment.id;
+                                    }
+                                }), true);
+                                spread(_el$6, mergeProps(()=>_stable.slot.axisHeading), true);
+                                insert(_el$7, ()=>adjustment.label);
+                                insert(_el$8, ()=>adjustment.formatValue?.(adjustment.value) ?? adjustment.value);
+                                spread(_el$9, mergeProps(()=>_stable.slot.axisControl), true);
+                                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$3();
+                                                    spread(_el$1, mergeProps(()=>_stable.slot.preview, {
+                                                        "aria-hidden": "true",
+                                                        get style () {
+                                                            return {
+                                                                "background-color": adjustment.preview?.(adjustment.value, p.value)
+                                                            };
+                                                        }
+                                                    }), false);
+                                                    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 p.isDisabled;
+                                                },
+                                                get onChange () {
+                                                    return adjustment.onChange;
+                                                },
+                                                get onChangeEnd () {
+                                                    return adjustment.onChangeEnd;
+                                                },
+                                                get formatValue () {
+                                                    return adjustment.formatValue;
+                                                },
+                                                size: "sm"
+                                            })
+                                        ];
+                                    },
+                                    children: (stops)=>(()=>{
+                                            var _el$10 = _tmpl$();
+                                            spread(_el$10, mergeProps(()=>_stable.slot.stops), true);
+                                            insert(_el$10, createComponent(For, {
+                                                get each () {
+                                                    return stops();
+                                                },
+                                                children: (stop)=>createComponent(button_0, mergeProps(()=>_stable.slot.stop, {
+                                                        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 p.isDisabled;
+                                                        },
+                                                        onClick: ()=>adjustment.onChange(stop),
+                                                        get children () {
+                                                            var _el$11 = _tmpl$3();
+                                                            spread(_el$11, mergeProps(()=>_stable.slot.stopPreview, {
+                                                                "aria-hidden": "true",
+                                                                get style () {
+                                                                    return {
+                                                                        "background-color": adjustment.preview?.(stop, p.value),
+                                                                        color: adjustment.ink?.(stop, p.value)
+                                                                    };
+                                                                }
+                                                            }), true);
+                                                            insert(_el$11, createComponent(Show, {
+                                                                get when () {
+                                                                    return adjustment.ink;
+                                                                },
+                                                                children: "A"
+                                                            }));
+                                                            return _el$11;
+                                                        }
+                                                    }))
+                                            }));
+                                            return _el$10;
+                                        })()
+                                }));
+                                insert(_el$5, createComponent(Show, {
+                                    get when () {
+                                        return adjustment.hint;
+                                    },
+                                    get children () {
+                                        var _el$0 = _tmpl$3();
+                                        spread(_el$0, mergeProps(()=>_stable.slot.hint), true);
+                                        insert(_el$0, ()=>adjustment.hint);
+                                        return _el$0;
+                                    }
+                                }), null);
+                                return _el$5;
+                            })()
+                    }), _el$4);
+                    return _el$;
+                })()
+            ];
+        }
+    }));
+const ComplexColorWheelLayout = defineComponent({
+    recipe: complexColorWheel,
+    layout: __solidLayoutComplexColorWheelLayout,
+    embedded: true
+});
+export { ComplexColorWheelLayout };

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

@@ -0,0 +1,38 @@
+export declare const complexColorWheel: import("solid-layouts/solid-2").Recipe<{
+    readonly component: "complex-color-wheel";
+    readonly slots: {
+        readonly root: {
+            readonly base: "complex-color-wheel";
+        };
+        readonly adjustments: {
+            readonly base: "complex-color-wheel__adjustments";
+        };
+        readonly action: {
+            readonly base: "complex-color-wheel__action";
+        };
+        readonly axis: {
+            readonly base: "complex-color-wheel__axis";
+        };
+        readonly axisHeading: {
+            readonly base: "complex-color-wheel__axis-heading";
+        };
+        readonly axisControl: {
+            readonly base: "complex-color-wheel__axis-control";
+        };
+        readonly stops: {
+            readonly base: "complex-color-wheel__stops";
+        };
+        readonly stop: {
+            readonly base: "complex-color-wheel__stop";
+        };
+        readonly stopPreview: {
+            readonly base: "complex-color-wheel__stop-preview";
+        };
+        readonly preview: {
+            readonly base: "complex-color-wheel__preview";
+        };
+        readonly hint: {
+            readonly base: "complex-color-wheel__hint";
+        };
+    };
+}>;

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

@@ -0,0 +1,102 @@
+import { recipe } from "../../lib/layouts/index.js";
+const complexColorWheel = recipe({
+    component: "complex-color-wheel",
+    slots: {
+        root: {
+            base: "complex-color-wheel"
+        },
+        adjustments: {
+            base: "complex-color-wheel__adjustments"
+        },
+        action: {
+            base: "complex-color-wheel__action"
+        },
+        axis: {
+            base: "complex-color-wheel__axis"
+        },
+        axisHeading: {
+            base: "complex-color-wheel__axis-heading"
+        },
+        axisControl: {
+            base: "complex-color-wheel__axis-control"
+        },
+        stops: {
+            base: "complex-color-wheel__stops"
+        },
+        stop: {
+            base: "complex-color-wheel__stop"
+        },
+        stopPreview: {
+            base: "complex-color-wheel__stop-preview"
+        },
+        preview: {
+            base: "complex-color-wheel__preview"
+        },
+        hint: {
+            base: "complex-color-wheel__hint"
+        }
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "complex-color-wheel",
+                axes: {}
+            },
+            adjustments: {
+                base: "complex-color-wheel__adjustments",
+                axes: {}
+            },
+            action: {
+                base: "complex-color-wheel__action",
+                axes: {}
+            },
+            axis: {
+                base: "complex-color-wheel__axis",
+                axes: {}
+            },
+            axisHeading: {
+                base: "complex-color-wheel__axis-heading",
+                axes: {}
+            },
+            axisControl: {
+                base: "complex-color-wheel__axis-control",
+                axes: {}
+            },
+            stops: {
+                base: "complex-color-wheel__stops",
+                axes: {}
+            },
+            stop: {
+                base: "complex-color-wheel__stop",
+                axes: {}
+            },
+            stopPreview: {
+                base: "complex-color-wheel__stop-preview",
+                axes: {}
+            },
+            preview: {
+                base: "complex-color-wheel__preview",
+                axes: {}
+            },
+            hint: {
+                base: "complex-color-wheel__hint",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 7,
+            adjustments: 1,
+            action: 0,
+            axis: 2,
+            axisHeading: 4,
+            axisControl: 3,
+            stops: 10,
+            stop: 8,
+            stopPreview: 9,
+            preview: 6,
+            hint: 5
+        }
+    }
+});
+export { complexColorWheel };

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

@@ -0,0 +1,6 @@
+export type { ColorWheelProps } from "./ColorWheel.generated";
+export { ColorWheelLayout as ColorWheel } from "./ColorWheel.generated";
+export { colorWheel } from "./ColorWheel.recipe";
+export type { ColorWheelAdjustment, ComplexColorWheelProps, } from "./ComplexColorWheel.generated";
+export { ComplexColorWheelLayout as ComplexColorWheel } from "./ComplexColorWheel.generated";
+export { complexColorWheel } from "./ComplexColorWheel.recipe";

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

@@ -0,0 +1,4 @@
+export { ColorWheelLayout as ColorWheel } from "./ColorWheel.generated.js";
+export { colorWheel } from "./ColorWheel.recipe.js";
+export { ComplexColorWheelLayout as ComplexColorWheel } from "./ComplexColorWheel.generated.js";
+export { complexColorWheel } from "./ComplexColorWheel.recipe.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.1",
   "components": {
     "Accordion": {
       "kind": "embedded"
@@ -123,6 +123,9 @@
     "ColorSwatchPicker": {
       "kind": "embedded"
     },
+    "ColorWheel": {
+      "kind": "embedded"
+    },
     "ColorWheelFlower": {
       "kind": "embedded"
     },
@@ -144,6 +147,9 @@
     "ComboBoxTrigger": {
       "kind": "embedded"
     },
+    "ComplexColorWheel": {
+      "kind": "embedded"
+    },
     "Composer": {
       "kind": "embedded"
     },

package/package.json

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