@pathscale/ui 0.0.162 → 0.0.163

package/dist/components/range-slider/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/rating/Rating.d.ts

@@ -1,3 +1,4 @@
+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"> & {

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.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.js

@@ -0,0 +1,62 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+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__Rating_js_1000f3ff__ from "./Rating.js";
+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>");
+const RatingItem = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "value",
+        "mask",
+        "halfPosition",
+        "color",
+        "aria-label"
+    ]);
+    const context = (0, __WEBPACK_EXTERNAL_MODULE__Rating_js_1000f3ff__.useRatingContext)();
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("mask", local.class, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+        [`mask-${local.mask || "star"}`]: true,
+        [`mask-half-${local.halfPosition}`]: context.half && local.halfPosition
+    }), local.color);
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return !context.readonly;
+        },
+        get fallback () {
+            return (()=>{
+                var _el$2 = _tmpl$2();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, classes);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                    var _v$ = local["aria-label"], _v$2 = void 0 !== context.value && local.value <= context.value ? 1 : 0.2;
+                    _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-label", _p$.e = _v$);
+                    _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$2.style.setProperty("opacity", _v$2) : _el$2.style.removeProperty("opacity"));
+                    return _p$;
+                }, {
+                    e: void 0,
+                    t: void 0
+                });
+                return _el$2;
+            })();
+        },
+        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, {
+                type: "radio",
+                get name () {
+                    return context.name;
+                },
+                class: classes,
+                get checked () {
+                    return context.value === local.value;
+                },
+                onChange: ()=>context.onChange?.(local.value),
+                get ["aria-label"] () {
+                    return local["aria-label"];
+                }
+            }), false, false);
+            return _el$;
+        }
+    });
+};
+const rating_RatingItem = RatingItem;
+export { rating_RatingItem as default };

package/dist/components/rating/index.js

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

package/dist/components/rating/rating.css

@@ -0,0 +1,106 @@
+@layer components {
+  .rating {
+      position: relative;
+      display: inline-flex;
+      vertical-align: middle;
+    }
+
+  .rating input {
+      border: none;
+      appearance: none;
+    }
+
+  .rating :where(*) {
+      height: calc(0.25rem * 6);
+      width: calc(0.25rem * 6);
+      border-radius: 0;
+      background-color: var(--color-base-content);
+      opacity: 20%;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .rating :where(*) {
+      animation: rating 0.25s ease-out;
+    }
+    }
+
+  .rating :where(*):is(input) {
+      cursor: pointer;
+    }
+
+  .rating .rating-hidden {
+      width: calc(0.25rem * 2);
+      background-color: transparent;
+    }
+
+  .rating input[type="radio"]:checked {
+      background-image: none;
+    }
+
+  .rating *:checked,
+    .rating *[aria-checked="true"],
+    .rating *[aria-current="true"],
+    .rating *:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) {
+      opacity: 100%;
+    }
+
+  .rating *:focus-visible {
+      scale: 1.1;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .rating *:focus-visible {
+      transition: scale 0.2s ease-out;
+    }
+    }
+
+  .rating *:active:focus {
+      animation: none;
+      scale: 1.1;
+    }
+
+  .rating.rating-xs :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 4);
+      height: calc(0.25rem * 4);
+    }
+
+  .rating.rating-sm :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 5);
+      height: calc(0.25rem * 5);
+    }
+
+  .rating.rating-md :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 6);
+      height: calc(0.25rem * 6);
+    }
+
+  .rating.rating-lg :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 7);
+      height: calc(0.25rem * 7);
+    }
+
+  .rating.rating-xl :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 8);
+      height: calc(0.25rem * 8);
+    }
+
+  .rating-half.rating-xs *:not(.rating-hidden) {
+      width: calc(0.25rem * 2);
+    }
+
+  .rating-half.rating-sm *:not(.rating-hidden) {
+      width: calc(0.25rem * 2.5);
+    }
+
+  .rating-half.rating-md *:not(.rating-hidden) {
+      width: calc(0.25rem * 3);
+    }
+
+  .rating-half.rating-lg *:not(.rating-hidden) {
+      width: .875rem;
+    }
+
+  .rating-half.rating-xl *:not(.rating-hidden) {
+      width: calc(0.25rem * 4);
+    }
+}

package/dist/components/select/Select.d.ts

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

package/dist/components/select/Select.js

@@ -0,0 +1,62 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./select.css";
+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_clsx__ from "clsx";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<select><option value disabled hidden>");
+const Select = (props)=>{
+    const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
+        value: "",
+        placeholder: "Please, select an option"
+    }, props);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(merged, [
+        "color",
+        "size",
+        "dataTheme",
+        "class",
+        "className",
+        "style",
+        "placeholder",
+        "value",
+        "children"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("select", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "select-xl": "xl" === local.size,
+            "select-lg": "lg" === local.size,
+            "select-md": "md" === local.size,
+            "select-sm": "sm" === local.size,
+            "select-xs": "xs" === local.size,
+            "select-primary": "primary" === local.color,
+            "select-secondary": "secondary" === local.color,
+            "select-accent": "accent" === local.color,
+            "select-ghost": "ghost" === local.color,
+            "select-info": "info" === local.color,
+            "select-success": "success" === local.color,
+            "select-warning": "warning" === local.color,
+            "select-error": "error" === local.color
+        })));
+    const hasValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>void 0 !== local.value && "" !== local.value);
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            },
+            get style () {
+                return local.style;
+            },
+            get value () {
+                return local.value;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.placeholder);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$2.selected = !hasValue());
+        return _el$;
+    })();
+};
+const select_Select = Select;
+export { select_Select as default };

package/dist/components/select/index.js

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