@pathscale/ui 0.1.0 → 1.2.0

package/dist/components/range/range.css

@@ -0,0 +1,174 @@
+@layer components {
+  .range {
+      appearance: none;
+      webkit-appearance: none;
+      --range-thumb: var(--color-base-100);
+      --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
+      --range-progress: currentColor;
+      --range-fill: 1;
+      --range-p: 0.25rem;
+      --range-bg: currentColor;
+      cursor: pointer;
+      overflow: hidden;
+      background-color: transparent;
+      vertical-align: middle;
+      width: clamp(3rem, 20rem, 100%);
+      --radius-selector-max: calc(
+        var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
+        );
+      border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+      border: none;
+      height: var(--range-thumb-size);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .range {
+      --range-bg: color-mix(in oklab, currentColor 10%, #0000);
+    }
+    }
+
+  [dir="rtl"] .range {
+      --range-dir: -1;
+    }
+
+  .range:focus {
+      outline: none;
+    }
+
+  .range:focus-visible {
+      outline: 2px solid;
+      outline-offset: 2px;
+    }
+
+  .range::-webkit-slider-runnable-track {
+      width: 100%;
+      background-color: var(--range-bg);
+      border-radius: var(--radius-selector);
+      height: calc(var(--range-thumb-size) * 0.5);
+    }
+
+  @media (forced-colors: active) {
+    .range::-webkit-slider-runnable-track {
+      border: 1px solid;
+    }
+    }
+
+  @media (forced-colors: active) {
+    .range::-moz-range-track {
+      border: 1px solid;
+    }
+    }
+
+  .range::-webkit-slider-thumb {
+      position: relative;
+      box-sizing: border-box;
+      border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+      background-color: var(--range-thumb);
+      height: var(--range-thumb-size);
+      width: var(--range-thumb-size);
+      border: var(--range-p) solid;
+      appearance: none;
+      webkit-appearance: none;
+      top: 50%;
+      color: var(--range-progress);
+      transform: translateY(-50%);
+      box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .range::-webkit-slider-thumb {
+      box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
+    }
+    }
+
+  .range::-moz-range-track {
+      width: 100%;
+      background-color: var(--range-bg);
+      border-radius: var(--radius-selector);
+      height: calc(var(--range-thumb-size) * 0.5);
+    }
+
+  .range::-moz-range-thumb {
+      position: relative;
+      box-sizing: border-box;
+      border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+      background-color: currentColor;
+      height: var(--range-thumb-size);
+      width: var(--range-thumb-size);
+      border: var(--range-p) solid;
+      top: 50%;
+      color: var(--range-progress);
+      box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .range::-moz-range-thumb {
+      box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
+    }
+    }
+
+  .range:disabled {
+      cursor: not-allowed;
+      opacity: 30%;
+    }
+
+  .range-accent {
+      color: var(--color-accent);
+      --range-thumb: var(--color-accent-content);
+    }
+
+  .range-error {
+      color: var(--color-error);
+      --range-thumb: var(--color-error-content);
+    }
+
+  .range-info {
+      color: var(--color-info);
+      --range-thumb: var(--color-info-content);
+    }
+
+  .range-neutral {
+      color: var(--color-neutral);
+      --range-thumb: var(--color-neutral-content);
+    }
+
+  .range-primary {
+      color: var(--color-primary);
+      --range-thumb: var(--color-primary-content);
+    }
+
+  .range-secondary {
+      color: var(--color-secondary);
+      --range-thumb: var(--color-secondary-content);
+    }
+
+  .range-success {
+      color: var(--color-success);
+      --range-thumb: var(--color-success-content);
+    }
+
+  .range-warning {
+      color: var(--color-warning);
+      --range-thumb: var(--color-warning-content);
+    }
+
+  .range-lg {
+      --range-thumb-size: calc(var(--size-selector, 0.25rem) * 7);
+    }
+
+  .range-md {
+      --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
+    }
+
+  .range-sm {
+      --range-thumb-size: calc(var(--size-selector, 0.25rem) * 5);
+    }
+
+  .range-xl {
+      --range-thumb-size: calc(var(--size-selector, 0.25rem) * 8);
+    }
+
+  .range-xs {
+      --range-thumb-size: calc(var(--size-selector, 0.25rem) * 4);
+    }
+}

package/dist/components/range-slider/RangeSlider.d.ts

@@ -0,0 +1,22 @@
+import "./range.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type SliderSize = "sm" | "md" | "lg";
+type SliderFieldBaseProps = {
+    label?: string;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    formatValue?: (value: number) => string;
+    size?: SliderSize;
+    dataTheme?: string;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+};
+export type SliderFieldProps = SliderFieldBaseProps & IComponentBaseProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, keyof SliderFieldBaseProps>;
+declare const SliderField: Component<SliderFieldProps>;
+export default SliderField;

package/dist/components/range-slider/RangeSlider.js

@@ -0,0 +1,191 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./range.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=label>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=slider__output data-slot=slider-output aria-live=polite>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div data-slot=slider><div class=slider__track data-slot=slider-track><div class=slider__fill data-slot=slider-fill></div><div class=slider__thumb data-slot=slider-thumb role=slider>");
+const SLIDER_SIZE_CLASS = {
+    sm: "slider--sm",
+    md: "slider--md",
+    lg: "slider--lg"
+};
+function clamp(val, min, max) {
+    return Math.min(Math.max(val, min), max);
+}
+function snapToStep(val, min, max, step) {
+    const snapped = Math.round((val - min) / step) * step + min;
+    return clamp(snapped, min, max);
+}
+const SliderField = (props)=>{
+    let trackRef;
+    const [local] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "label",
+        "value",
+        "onChange",
+        "min",
+        "max",
+        "step",
+        "disabled",
+        "formatValue",
+        "size",
+        "dataTheme",
+        "class",
+        "className",
+        "style"
+    ]);
+    const min = ()=>local.min ?? 0;
+    const max = ()=>local.max ?? 100;
+    const step = ()=>local.step ?? 1;
+    const size = ()=>local.size ?? "md";
+    const isDisabled = ()=>Boolean(local.disabled);
+    const labelId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const [dragging, setDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [focusVisible, setFocusVisible] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const fraction = ()=>{
+        const range = max() - min();
+        if (range <= 0) return 0;
+        return (local.value - min()) / range;
+    };
+    const formattedValue = ()=>local.formatValue ? local.formatValue(local.value) : String(local.value);
+    const thumbLeft = ()=>{
+        const f = fraction();
+        return `calc(${f} * 100% + (0.5 - ${f}) * var(--slider-thumb-w) + ${1 - 2 * f} * var(--slider-pad))`;
+    };
+    const fillWidth = ()=>{
+        const f = fraction();
+        return `calc(${f} * 100% + ${1 - f} * var(--slider-thumb-w) + ${2 - 2 * f} * var(--slider-pad))`;
+    };
+    const getValueFromPosition = (clientX)=>{
+        if (!trackRef) return local.value;
+        const rect = trackRef.getBoundingClientRect();
+        const frac = clamp((clientX - rect.left) / rect.width, 0, 1);
+        const raw = min() + frac * (max() - min());
+        return snapToStep(raw, min(), max(), step());
+    };
+    const handlePointerDown = (e)=>{
+        if (isDisabled()) return;
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        setDragging(true);
+        const val = getValueFromPosition(e.clientX);
+        if (val !== local.value) local.onChange(val);
+    };
+    const handlePointerMove = (e)=>{
+        if (!dragging()) return;
+        const val = getValueFromPosition(e.clientX);
+        if (val !== local.value) local.onChange(val);
+    };
+    const handlePointerUp = ()=>{
+        setDragging(false);
+    };
+    const handleKeyDown = (e)=>{
+        if (isDisabled()) return;
+        let newVal = local.value;
+        const s = step();
+        const bigStep = (max() - min()) / 10;
+        switch(e.key){
+            case "ArrowRight":
+            case "ArrowUp":
+                newVal = clamp(local.value + s, min(), max());
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                newVal = clamp(local.value - s, min(), max());
+                break;
+            case "PageUp":
+                newVal = clamp(local.value + bigStep, min(), max());
+                break;
+            case "PageDown":
+                newVal = clamp(local.value - bigStep, min(), max());
+                break;
+            case "Home":
+                newVal = min();
+                break;
+            case "End":
+                newVal = max();
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        if (newVal !== local.value) local.onChange(snapToStep(newVal, min(), max(), s));
+    };
+    const handleFocus = ()=>setFocusVisible(true);
+    const handleBlur = ()=>setFocusVisible(false);
+    return (()=>{
+        var _el$ = _tmpl$3(), _el$4 = _el$.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.label;
+            },
+            get children () {
+                return [
+                    (()=>{
+                        var _el$2 = _tmpl$();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "id", labelId);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.label);
+                        return _el$2;
+                    })(),
+                    (()=>{
+                        var _el$3 = _tmpl$2();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, formattedValue);
+                        return _el$3;
+                    })()
+                ];
+            }
+        }), _el$4);
+        _el$4.$$pointerup = handlePointerUp;
+        _el$4.$$pointermove = handlePointerMove;
+        _el$4.$$pointerdown = handlePointerDown;
+        var _ref$ = trackRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$4) : trackRef = _el$4;
+        _el$6.addEventListener("blur", handleBlur);
+        _el$6.addEventListener("focus", handleFocus);
+        _el$6.$$keydown = handleKeyDown;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("slider", SLIDER_SIZE_CLASS[size()], local.class, local.className), _v$2 = local.dataTheme, _v$3 = isDisabled() ? "true" : "false", _v$4 = local.style, _v$5 = fillWidth(), _v$6 = dragging() ? "true" : "false", _v$7 = isDisabled() ? "true" : "false", _v$8 = focusVisible() ? "true" : "false", _v$9 = thumbLeft(), _v$0 = isDisabled() ? -1 : 0, _v$1 = min(), _v$10 = max(), _v$11 = local.value, _v$12 = formattedValue(), _v$13 = local.label ? labelId : void 0, _v$14 = isDisabled() ? "true" : void 0;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-theme", _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-disabled", _p$.a = _v$3);
+            _p$.o = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$, _v$4, _p$.o);
+            _v$5 !== _p$.i && (null != (_p$.i = _v$5) ? _el$5.style.setProperty("width", _v$5) : _el$5.style.removeProperty("width"));
+            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "data-dragging", _p$.n = _v$6);
+            _v$7 !== _p$.s && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "data-disabled", _p$.s = _v$7);
+            _v$8 !== _p$.h && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "data-focus-visible", _p$.h = _v$8);
+            _v$9 !== _p$.r && (null != (_p$.r = _v$9) ? _el$6.style.setProperty("left", _v$9) : _el$6.style.removeProperty("left"));
+            _v$0 !== _p$.d && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "tabindex", _p$.d = _v$0);
+            _v$1 !== _p$.l && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "aria-valuemin", _p$.l = _v$1);
+            _v$10 !== _p$.u && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "aria-valuemax", _p$.u = _v$10);
+            _v$11 !== _p$.c && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "aria-valuenow", _p$.c = _v$11);
+            _v$12 !== _p$.w && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "aria-valuetext", _p$.w = _v$12);
+            _v$13 !== _p$.m && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "aria-labelledby", _p$.m = _v$13);
+            _v$14 !== _p$.f && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "aria-disabled", _p$.f = _v$14);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0,
+            s: void 0,
+            h: void 0,
+            r: void 0,
+            d: void 0,
+            l: void 0,
+            u: void 0,
+            c: void 0,
+            w: void 0,
+            m: void 0,
+            f: void 0
+        });
+        return _el$;
+    })();
+};
+const RangeSlider = SliderField;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "pointerdown",
+    "pointermove",
+    "pointerup",
+    "keydown"
+]);
+export { RangeSlider as default };

package/dist/components/range-slider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SliderField } from "./RangeSlider";
+export type { SliderFieldProps, SliderSize } from "./RangeSlider";

package/dist/components/range-slider/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__RangeSlider_js_37bc544e__ from "./RangeSlider.js";
+var __webpack_exports__SliderField = __WEBPACK_EXTERNAL_MODULE__RangeSlider_js_37bc544e__["default"];
+export { __webpack_exports__SliderField as SliderField };

package/dist/components/range-slider/range.css

@@ -0,0 +1,136 @@
+@layer components {
+  .slider {
+    display: grid;
+    width: 100%;
+    gap: 0.25rem;
+    grid-template-areas:
+      "label output"
+      "track track";
+    grid-template-columns: 1fr auto;
+
+    --slider-thumb-w: 1.5rem;
+    --slider-thumb-h: 1rem;
+    --slider-h: 1.25rem;
+    /* Inset padding = (track height - thumb height) / 2 */
+    --slider-pad: calc((var(--slider-h) - var(--slider-thumb-h)) / 2);
+    --slider-track-bg: var(--color-default);
+    --slider-fill-bg: var(--color-accent);
+    --slider-thumb-bg: var(--color-accent-foreground, white);
+  }
+
+  .slider [data-slot="label"] {
+    grid-area: label;
+    width: fit-content;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .slider__output {
+    grid-area: output;
+    font-size: 0.875rem;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ── Track ── */
+
+  .slider__track {
+    grid-area: track;
+    position: relative;
+    height: var(--slider-h);
+    border-radius: 9999px;
+    background-color: var(--slider-track-bg);
+    cursor: pointer;
+  }
+
+  /* ── Fill ── */
+
+  .slider__fill {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-radius: 9999px;
+    pointer-events: none;
+    background-color: var(--slider-fill-bg);
+  }
+
+  /* ── Thumb ── */
+
+  .slider__thumb {
+    position: absolute;
+    top: 50%;
+    z-index: 1;
+    border-radius: 9999px;
+    background-color: var(--slider-thumb-bg);
+    cursor: grab;
+    width: var(--slider-thumb-w);
+    height: var(--slider-thumb-h);
+    transform: translate(-50%, -50%);
+    box-shadow:
+      0 0 5px 0 oklch(0% 0 0 / 0.02),
+      0 2px 10px 0 oklch(0% 0 0 / 0.06),
+      0 0 1px 0 oklch(0% 0 0 / 0.3);
+    transition:
+      transform 250ms ease,
+      box-shadow 150ms ease;
+  }
+
+  .slider__thumb[data-dragging="true"] {
+    cursor: grabbing;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+
+  .slider__thumb[data-focus-visible="true"] {
+    box-shadow:
+      0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent),
+      0 0 5px 0 oklch(0% 0 0 / 0.02),
+      0 2px 10px 0 oklch(0% 0 0 / 0.06);
+  }
+
+  .slider__thumb[data-disabled="true"] {
+    cursor: default;
+  }
+
+  /* ── Disabled ── */
+
+  .slider[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .slider[data-disabled="true"] [data-slot="label"] {
+    opacity: 1;
+  }
+
+  .slider[data-disabled="true"] .slider__track {
+    cursor: not-allowed;
+  }
+
+  /* ── Size: sm ── */
+
+  .slider--sm {
+    --slider-thumb-w: 1.125rem;
+    --slider-thumb-h: 0.625rem;
+    --slider-h: 1rem;
+  }
+
+  .slider--sm [data-slot="label"],
+  .slider--sm .slider__output {
+    font-size: 0.75rem;
+  }
+
+  /* ── Size: md (default) ── */
+
+  .slider--md {
+    /* Default size */
+  }
+
+  /* ── Size: lg ── */
+
+  .slider--lg {
+    --slider-thumb-w: 1.75rem;
+    --slider-thumb-h: 1.25rem;
+    --slider-h: 1.5rem;
+  }
+}

package/dist/components/rating/Rating.d.ts

@@ -0,0 +1,24 @@
+import "./rating.css";
+import { type JSX, type ParentProps } from "solid-js";
+export type ComponentSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type RatingProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    name?: string;
+    value?: number;
+    onChange?: (value: number) => void;
+    size?: ComponentSize;
+    half?: boolean;
+    readonly?: boolean;
+};
+interface RatingContextValue {
+    name?: string;
+    value?: number;
+    onChange?: (value: number) => void;
+    half?: boolean;
+    readonly?: boolean;
+}
+export declare const useRatingContext: () => RatingContextValue;
+declare const _default: ((props: ParentProps<RatingProps>) => JSX.Element) & {
+    Item: (props: import("./RatingItem").RatingItemProps) => JSX.Element;
+    Hidden: (props: import("./RatingHidden").RatingHiddenProps) => JSX.Element;
+};
+export default _default;

package/dist/components/rating/Rating.js

@@ -0,0 +1,54 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./rating.css";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__RatingHidden_js_00e702d1__ from "./RatingHidden.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RatingItem_js_04f8998c__ from "./RatingItem.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const RatingContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)({});
+const Rating_Rating = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "children",
+        "name",
+        "value",
+        "onChange",
+        "size",
+        "half",
+        "readonly"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("rating", local.class, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+        "rating-xs": "xs" === local.size,
+        "rating-sm": "sm" === local.size,
+        "rating-md": "md" === local.size,
+        "rating-lg": "lg" === local.size,
+        "rating-xl": "xl" === local.size,
+        "rating-half": local.half
+    }));
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(RatingContext.Provider, {
+        get value () {
+            return {
+                name: local.name,
+                value: local.value,
+                onChange: local.onChange,
+                half: local.half,
+                readonly: local.readonly
+            };
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+                class: classes
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const useRatingContext = ()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(RatingContext);
+const Rating = Object.assign(Rating_Rating, {
+    Item: __WEBPACK_EXTERNAL_MODULE__RatingItem_js_04f8998c__["default"],
+    Hidden: __WEBPACK_EXTERNAL_MODULE__RatingHidden_js_00e702d1__["default"]
+});
+export { Rating as default, useRatingContext };

package/dist/components/rating/RatingHidden.d.ts

@@ -0,0 +1,4 @@
+import { type JSX } from "solid-js";
+export type RatingHiddenProps = JSX.InputHTMLAttributes<HTMLInputElement>;
+declare const RatingHidden: (props: RatingHiddenProps) => JSX.Element;
+export default RatingHidden;

package/dist/components/rating/RatingHidden.js

@@ -0,0 +1,29 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__Rating_js_1000f3ff__ from "./Rating.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>");
+const RatingHidden = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class"
+    ]);
+    const context = (0, __WEBPACK_EXTERNAL_MODULE__Rating_js_1000f3ff__.useRatingContext)();
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("rating-hidden", local.class);
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+            type: "radio",
+            get name () {
+                return context.name;
+            },
+            class: classes,
+            get checked () {
+                return 0 === context.value;
+            },
+            onChange: ()=>context.onChange?.(0)
+        }), false, false);
+        return _el$;
+    })();
+};
+const rating_RatingHidden = RatingHidden;
+export { rating_RatingHidden as default };

package/dist/components/rating/RatingItem.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from "solid-js";
+export type RatingItemProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & {
+    value: number;
+    mask?: "star" | "star-2" | "heart" | "circle" | "diamond" | "square";
+    halfPosition?: 1 | 2;
+    color?: string;
+};
+declare const RatingItem: (props: RatingItemProps) => JSX.Element;
+export default RatingItem;