@pathscale/ui 0.0.161 → 0.0.163

package/dist/components/radio-group/radio.css

@@ -0,0 +1,152 @@
+@layer components {
+  .radio {
+      position: relative;
+      display: inline-block;
+      flex-shrink: 0;
+      cursor: pointer;
+      appearance: none;
+      border-radius: calc(infinity * 1px);
+      padding: calc(0.25rem * 1);
+      vertical-align: middle;
+      border: var(--border) solid var(--input-color, currentColor);
+      box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset;
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+      width: var(--size);
+      height: var(--size);
+      color: var(--input-color, currentColor);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .radio {
+      border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000));
+    }
+    }
+
+  .radio:before {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: calc(infinity * 1px);
+      --tw-content: "";
+      content: var(--tw-content);
+      background-size: auto, calc(var(--noise) * 100%);
+      background-image: none, var(--fx-noise);
+    }
+
+  .radio:focus-visible {
+      outline: 2px solid currentColor;
+    }
+
+  .radio:checked,
+    .radio[aria-checked="true"] {
+      border-color: currentcolor;
+      background-color: var(--color-base-100);
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .radio:checked,
+    .radio[aria-checked="true"] {
+      animation: radio 0.2s ease-out;
+    }
+    }
+
+  .radio:checked:before,
+    .radio[aria-checked="true"]:before {
+      background-color: currentcolor;
+      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 oklch(0% 0 0 / calc(var(--depth) * 0.1));
+    }
+
+  @media (forced-colors: active) {
+    .radio:checked:before,
+    .radio[aria-checked="true"]:before {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-offset: calc(1px * -1);
+    }
+    }
+
+  @media print {
+    .radio:checked:before,
+    .radio[aria-checked="true"]:before {
+      outline: 0.25rem solid;
+      outline-offset: -1rem;
+    }
+    }
+
+  .radio:disabled {
+      cursor: not-allowed;
+      opacity: 20%;
+    }
+
+  .radio-lg {
+      padding: 0.3125rem;
+    }
+
+  .radio-lg:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 7);
+    }
+
+  .radio-md {
+      padding: 0.25rem;
+    }
+
+  .radio-md:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+    }
+
+  .radio-sm {
+      padding: 0.1875rem;
+    }
+
+  .radio-sm:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 5);
+    }
+
+  .radio-xl {
+      padding: 0.375rem;
+    }
+
+  .radio-xl:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 8);
+    }
+
+  .radio-xs {
+      padding: 0.125rem;
+    }
+
+  .radio-xs:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 4);
+    }
+
+  .radio-accent {
+      --input-color: var(--color-accent);
+    }
+
+  .radio-error {
+      --input-color: var(--color-error);
+    }
+
+  .radio-info {
+      --input-color: var(--color-info);
+    }
+
+  .radio-neutral {
+      --input-color: var(--color-neutral);
+    }
+
+  .radio-primary {
+      --input-color: var(--color-primary);
+    }
+
+  .radio-secondary {
+      --input-color: var(--color-secondary);
+    }
+
+  .radio-success {
+      --input-color: var(--color-success);
+    }
+
+  .radio-warning {
+      --input-color: var(--color-warning);
+    }
+}

package/dist/components/range/Range.d.ts

@@ -1,3 +1,4 @@
+import "./range.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type ComponentColor = "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";

package/dist/components/range/Range.js

@@ -0,0 +1,85 @@
+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_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="relative mt-2 h-4 w-full max-w-xs"><div class="absolute inset-0 flex items-center justify-between px-2">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="absolute text-xs">|');
+const Range = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "color",
+        "size",
+        "step",
+        "displayTicks",
+        "ticksStep",
+        "min",
+        "max",
+        "dataTheme"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("range", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+            "range-xs": "xs" === local.size,
+            "range-sm": "sm" === local.size,
+            "range-md": "md" === local.size,
+            "range-lg": "lg" === local.size,
+            "range-xl": "xl" === local.size,
+            "range-primary": "primary" === local.color,
+            "range-secondary": "secondary" === local.color,
+            "range-accent": "accent" === local.color,
+            "range-info": "info" === local.color,
+            "range-success": "success" === local.color,
+            "range-warning": "warning" === local.color,
+            "range-error": "error" === local.color
+        })));
+    const ticks = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const showTicks = local.displayTicks ?? (void 0 !== local.step && null !== local.step);
+        if (!showTicks) return [];
+        const min = Number(local.min ?? 0);
+        const max = Number(local.max ?? 100);
+        const step = Number(local.ticksStep ?? local.step ?? 1);
+        const count = Math.max(Math.ceil((max - min) / step), 1) + 1;
+        return Array.from({
+            length: count
+        });
+    });
+    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: "range",
+                get step () {
+                    return local.step;
+                },
+                get ["class"] () {
+                    return classes();
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                }
+            }), false, false);
+            return _el$;
+        })(),
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return ticks().length > 0;
+            },
+            get children () {
+                var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                    get each () {
+                        return ticks();
+                    },
+                    children: (_, i)=>(()=>{
+                            var _el$4 = _tmpl$3();
+                            _el$4.style.setProperty("transform", "translateX(-50%)");
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_$p)=>(_$p = `${i() / (ticks().length - 1) * 100}%`, _el$4.style.setProperty("left", _$p)));
+                            return _el$4;
+                        })()
+                }));
+                return _el$2;
+            }
+        })
+    ];
+};
+const range_Range = Range;
+export { range_Range as default };

package/dist/components/range/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Range_js_952b933d__ from "./Range.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Range_js_952b933d__["default"];
+export { __webpack_exports__default as default };

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

@@ -1,3 +1,4 @@
+import "./range.css";
 import { type JSX } from "solid-js";
 import type { ComponentColor, ComponentSize, IComponentBaseProps } from "../types";
 type SliderFieldBaseProps = {

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

@@ -0,0 +1,112 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./range.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";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center justify-between"><label class="text-sm font-medium"></label><span class=text-sm aria-live=polite>'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><input>");
+const SliderField = (props)=>{
+    const [local, inputRest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "label",
+        "value",
+        "onChange",
+        "min",
+        "max",
+        "step",
+        "disabled",
+        "formatValue",
+        "color",
+        "size",
+        "dataTheme",
+        "class",
+        "className",
+        "style"
+    ]);
+    const min = ()=>local.min ?? 0;
+    const max = ()=>local.max ?? 100;
+    const step = ()=>local.step ?? 1;
+    const formattedValue = ()=>local.formatValue ? local.formatValue(local.value) : String(local.value);
+    const rangeClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("range", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "range-xl": "xl" === local.size,
+            "range-lg": "lg" === local.size,
+            "range-md": "md" === local.size,
+            "range-sm": "sm" === local.size,
+            "range-xs": "xs" === local.size,
+            "range-neutral": "neutral" === local.color,
+            "range-primary": "primary" === local.color,
+            "range-secondary": "secondary" === local.color,
+            "range-accent": "accent" === local.color,
+            "range-info": "info" === local.color,
+            "range-success": "success" === local.color,
+            "range-warning": "warning" === local.color,
+            "range-error": "error" === local.color
+        }));
+    const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("flex flex-col gap-1", local.class, local.className);
+    const inputId = `range-slider-${(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)()}`;
+    const handleInput = (e)=>{
+        local.onChange(Number(e.currentTarget.value));
+    };
+    return (()=>{
+        var _el$ = _tmpl$2(), _el$5 = _el$.firstChild;
+        (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 () {
+                var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "for", inputId);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.label);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, formattedValue);
+                return _el$2;
+            }
+        }), _el$5);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(inputRest, {
+            id: inputId,
+            type: "range",
+            get ["class"] () {
+                return rangeClasses();
+            },
+            get min () {
+                return min();
+            },
+            get max () {
+                return max();
+            },
+            get step () {
+                return step();
+            },
+            get disabled () {
+                return local.disabled;
+            },
+            get value () {
+                return local.value;
+            },
+            onInput: handleInput,
+            get ["aria-valuemin"] () {
+                return min();
+            },
+            get ["aria-valuemax"] () {
+                return max();
+            },
+            get ["aria-valuenow"] () {
+                return local.value;
+            },
+            get ["aria-valuetext"] () {
+                return formattedValue();
+            }
+        }), false, false);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = local.dataTheme, _v$2 = containerClasses(), _v$3 = local.style;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-theme", _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.t = _v$2);
+            _p$.a = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$, _v$3, _p$.a);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+        });
+        return _el$;
+    })();
+};
+const RangeSlider = SliderField;
+export { RangeSlider as default };

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 };