@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/popover/Popover.generated.js

@@ -16,10 +16,9 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
-        "isOpen",
+        "open",
         "defaultOpen",
         "onOpenChange",
         "placement",
@@ -35,8 +34,8 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
     const [triggerId] = createSignal(`popover-trigger-${Math.random().toString(36).slice(2, 8)}`);
     const [contentId] = createSignal(`popover-content-${Math.random().toString(36).slice(2, 8)}`);
     const [resolvedPlacement, setResolvedPlacement] = createSignal(local.placement ?? "bottom");
-    const isControlled = createMemo(()=>void 0 !== local.isOpen);
-    const isOpen = createMemo(()=>isControlled() ? Boolean(local.isOpen) : internalOpen());
+    const isControlled = createMemo(()=>void 0 !== local.open);
+    const isOpen = createMemo(()=>isControlled() ? Boolean(local.open) : internalOpen());
     const setIsOpen = (next, options)=>{
         if (!isControlled()) setInternalOpen(next);
         if (isOpen() !== next) local.onOpenChange?.(next);
@@ -96,7 +95,7 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.slot.root, local.class, local.className)
+                    class: twMerge(CLASSES.slot.root, local.class)
                 }), {
                 "data-slot": "popover-root",
                 get ["data-theme"] () {
@@ -120,7 +119,6 @@ const __solidLayoutPopoverTrigger = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "onClick",
@@ -156,7 +154,7 @@ const __solidLayoutPopoverTrigger = (_stable, p)=>{
             role: "button",
             tabIndex: 0
         }, ()=>({
-                class: twMerge(CLASSES.slot.trigger, local.class, local.className)
+                class: twMerge(CLASSES.slot.trigger, local.class)
             }), {
             "data-slot": "popover-trigger",
             get ["data-theme"] () {
@@ -188,7 +186,6 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "sideOffset"
@@ -232,7 +229,7 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
                         },
                         role: "dialog"
                     }, ()=>({
-                            class: twMerge(CLASSES.base, local.class, local.className)
+                            class: twMerge(CLASSES.base, local.class)
                         }), {
                         "data-slot": "popover-content",
                         get ["data-open"] () {
@@ -270,14 +267,13 @@ const __solidLayoutPopoverDialog = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$4 = _tmpl$();
         spread(_el$4, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.dialog, local.class, local.className)
+                class: twMerge(CLASSES.slot.dialog, local.class)
             }), {
             "data-slot": "popover-dialog",
             get ["data-theme"] () {
@@ -300,7 +296,6 @@ const __solidLayoutPopoverArrow = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
@@ -309,7 +304,7 @@ const __solidLayoutPopoverArrow = (_stable, p)=>{
     return (()=>{
         var _el$6 = _tmpl$3();
         spread(_el$6, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.arrow, local.class, local.className)
+                class: twMerge(CLASSES.slot.arrow, local.class)
             }), {
             "data-slot": "popover-arrow",
             get ["data-placement"] () {
@@ -336,14 +331,13 @@ const __solidLayoutPopoverHeading = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$7 = _tmpl$4();
         spread(_el$7, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.heading, local.class, local.className)
+                class: twMerge(CLASSES.slot.heading, local.class)
             }), {
             "data-slot": "popover-heading",
             get ["data-theme"] () {

package/dist/components/progress/Progress.css

@@ -0,0 +1,121 @@
+@layer components {
+  .progress {
+    display: grid;
+    width: 100%;
+    gap: 0.25rem;
+    grid-template-areas:
+      "label output"
+      "track track";
+    grid-template-columns: 1fr auto;
+
+    --progress-fill: var(--color-accent);
+  }
+
+  .progress__label {
+    grid-area: label;
+    width: fit-content;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .progress__output {
+    grid-area: output;
+    font-size: 0.875rem;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .progress__track {
+    grid-area: track;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--radius-pill, 9999px);
+    background: var(--color-base-200);
+    height: 0.5rem;
+  }
+
+  .progress__indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: var(--radius-pill, 9999px);
+    background-color: var(--progress-fill);
+    transition: width 300ms var(--ease-out);
+  }
+
+  .progress--indeterminate .progress__indicator {
+    width: 40%;
+    animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+  }
+
+  .progress--disabled,
+  .progress[aria-disabled="true"],
+  .progress[data-disabled="true"] {
+    opacity: 0.6;
+  }
+
+  .progress--sm .progress__track {
+    height: 0.25rem;
+  }
+
+  .progress--lg .progress__track {
+    height: 0.75rem;
+  }
+
+
+
+
+
+
+  @keyframes progress-indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(350%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress__indicator {
+      transition: none;
+    }
+
+    .progress--indeterminate .progress__indicator {
+      animation: none;
+    }
+  }
+
+  .progress--flavor-neutral {
+    --progress-fill: var(--color-base-content);
+  }
+
+  .progress--flavor-primary {
+    --progress-fill: var(--color-primary);
+  }
+
+  .progress--flavor-secondary {
+    --progress-fill: var(--color-secondary);
+  }
+
+  .progress--flavor-accent {
+    --progress-fill: var(--color-accent);
+  }
+
+  .progress--flavor-destructive {
+    --progress-fill: var(--color-danger);
+  }
+
+  .progress--flavor-success {
+    --progress-fill: var(--color-success);
+  }
+
+  .progress--flavor-warning {
+    --progress-fill: var(--color-warning);
+  }
+
+  .progress--flavor-info {
+    --progress-fill: var(--color-info);
+  }
+}

package/dist/components/progress/Progress.generated.d.ts

@@ -0,0 +1,20 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Progress.css";
+import { type JSX } from "solid-js";
+import type { UIBaseProps, Flavor, State } from "../vocabulary";
+export type ProgressSize = "sm" | "md" | "lg";
+export type ProgressColor = "default" | "accent" | "success" | "warning" | "danger";
+export type ProgressProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+    value?: number;
+    minValue?: number;
+    maxValue?: number;
+    isIndeterminate?: boolean;
+    label?: string;
+    size?: ProgressSize;
+    flavor?: Flavor;
+    state?: State;
+    formatValue?: (value: number) => string;
+    showValue?: boolean;
+};
+declare const Progress: __LayoutComponent<ProgressProps>;
+export default Progress;

package/dist/components/{progress-bar/ProgressBar.generated.js → progress/Progress.generated.js}

@@ -1,11 +1,11 @@
 import { insert, memo, mergeProps, spread, template } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
-import "./ProgressBar.css";
+import "./Progress.css";
 import { createMemo, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
-import { CLASSES, componentRecipe } from "./ProgressBar.recipe.js";
+import { CLASSES, componentRecipe } from "./Progress.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div><div><div>"), _tmpl$2 = /*#__PURE__*/ template("<span>");
-const __solidLayoutProgressBar = (_stable, p)=>{
+const __solidLayoutProgress = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "value",
         "minValue",
@@ -13,12 +13,11 @@ const __solidLayoutProgressBar = (_stable, p)=>{
         "isIndeterminate",
         "label",
         "size",
-        "color",
-        "isDisabled",
+        "flavor",
+        "state",
         "formatValue",
         "showValue",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
@@ -36,7 +35,7 @@ const __solidLayoutProgressBar = (_stable, p)=>{
         return `${Math.round(percentage())}%`;
     });
     const shouldShowValue = ()=>Boolean(local.showValue);
-    const classes = createMemo(()=>twMerge(CLASSES.base, CLASSES.size[local.size ?? "md"], CLASSES.color[local.color ?? "accent"], isIndeterminate() && CLASSES.state.indeterminate, local.isDisabled && CLASSES.state.disabled, local.class, local.className));
+    const classes = createMemo(()=>twMerge(CLASSES.base, CLASSES.size[local.size ?? "md"], CLASSES.flavor[local.flavor ?? "accent"] ?? `progress--flavor-${local.flavor ?? "accent"}`, isIndeterminate() && CLASSES.state.indeterminate, "disabled" === local.state && CLASSES.state.disabled, local.class));
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
         spread(_el$, mergeProps(others, {
@@ -66,10 +65,10 @@ const __solidLayoutProgressBar = (_stable, p)=>{
                 return local.label;
             },
             get ["aria-disabled"] () {
-                return local.isDisabled ? "true" : void 0;
+                return "disabled" === local.state ? "true" : void 0;
             },
             get ["data-disabled"] () {
-                return local.isDisabled ? "true" : void 0;
+                return "disabled" === local.state ? "true" : void 0;
             }
         }), false, true);
         insert(_el$, (()=>{
@@ -109,10 +108,10 @@ const __solidLayoutProgressBar = (_stable, p)=>{
         return _el$;
     })();
 };
-const ProgressBar = defineComponent({
+const Progress = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutProgressBar,
+    layout: __solidLayoutProgress,
     embedded: true
 });
-const ProgressBar_generated = ProgressBar;
-export default ProgressBar_generated;
+const Progress_generated = Progress;
+export default Progress_generated;

package/dist/components/progress/Progress.recipe.d.ts

@@ -0,0 +1,32 @@
+export declare const CLASSES: {
+    readonly base: "progress";
+    readonly label: "progress__label";
+    readonly output: "progress__output";
+    readonly track: "progress__track";
+    readonly indicator: "progress__indicator";
+    readonly size: {
+        readonly sm: "progress--sm";
+        readonly md: "progress--md";
+        readonly lg: "progress--lg";
+    };
+    readonly flavor: {
+        readonly neutral: "progress--flavor-neutral";
+        readonly primary: "progress--flavor-primary";
+        readonly secondary: "progress--flavor-secondary";
+        readonly accent: "progress--flavor-accent";
+        readonly destructive: "progress--flavor-destructive";
+        readonly success: "progress--flavor-success";
+        readonly warning: "progress--flavor-warning";
+        readonly info: "progress--flavor-info";
+    };
+    readonly state: {
+        readonly indeterminate: "progress--indeterminate";
+        readonly disabled: "progress--disabled";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "progress";
+    readonly slots: {
+        readonly root: {};
+    };
+}>;

package/dist/components/progress/Progress.recipe.js

@@ -0,0 +1,46 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "progress",
+    label: "progress__label",
+    output: "progress__output",
+    track: "progress__track",
+    indicator: "progress__indicator",
+    size: {
+        sm: "progress--sm",
+        md: "progress--md",
+        lg: "progress--lg"
+    },
+    flavor: {
+        neutral: "progress--flavor-neutral",
+        primary: "progress--flavor-primary",
+        secondary: "progress--flavor-secondary",
+        accent: "progress--flavor-accent",
+        destructive: "progress--flavor-destructive",
+        success: "progress--flavor-success",
+        warning: "progress--flavor-warning",
+        info: "progress--flavor-info"
+    },
+    state: {
+        indeterminate: "progress--indeterminate",
+        disabled: "progress--disabled"
+    }
+};
+const componentRecipe = recipe({
+    component: "progress",
+    slots: {
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/progress/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Progress.generated";
+export type { ProgressProps, ProgressSize, ProgressColor } from "./Progress.generated";

package/dist/components/progress/index.js

@@ -0,0 +1 @@
+export { default } from "./Progress.generated.js";

package/dist/components/radial-progress/RadialProgress.css

@@ -0,0 +1,99 @@
+@layer components {
+  .radial-progress {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    --radial-progress-stroke: var(--color-accent);
+    --radial-progress-track-stroke: var(--color-base-200);
+  }
+
+  .radial-progress__track {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .radial-progress__track-circle {
+    stroke: var(--radial-progress-track-stroke);
+  }
+
+  .radial-progress__indicator {
+    stroke: var(--radial-progress-stroke);
+    transition: stroke-dashoffset 300ms var(--ease-out);
+  }
+
+  .radial-progress--indeterminate .radial-progress__track {
+    animation: radial-progress-spin 1s linear infinite;
+  }
+
+  .radial-progress--disabled,
+  .radial-progress[aria-disabled="true"],
+  .radial-progress[data-disabled="true"] {
+    opacity: 0.6;
+  }
+
+  .radial-progress--sm .radial-progress__track {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .radial-progress--lg .radial-progress__track {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+
+
+
+
+
+
+  @keyframes radial-progress-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .radial-progress__indicator {
+      transition: none;
+    }
+
+    .radial-progress--indeterminate .radial-progress__track {
+      animation: none;
+    }
+  }
+
+  .radial-progress--flavor-neutral {
+    --radial-progress-stroke: var(--color-base-content);
+  }
+
+  .radial-progress--flavor-primary {
+    --radial-progress-stroke: var(--color-primary);
+  }
+
+  .radial-progress--flavor-secondary {
+    --radial-progress-stroke: var(--color-secondary);
+  }
+
+  .radial-progress--flavor-accent {
+    --radial-progress-stroke: var(--color-accent);
+  }
+
+  .radial-progress--flavor-destructive {
+    --radial-progress-stroke: var(--color-danger);
+  }
+
+  .radial-progress--flavor-success {
+    --radial-progress-stroke: var(--color-success);
+  }
+
+  .radial-progress--flavor-warning {
+    --radial-progress-stroke: var(--color-warning);
+  }
+
+  .radial-progress--flavor-info {
+    --radial-progress-stroke: var(--color-info);
+  }
+}

package/dist/components/radial-progress/RadialProgress.generated.d.ts

@@ -0,0 +1,19 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./RadialProgress.css";
+import { type JSX } from "solid-js";
+import type { UIBaseProps, Flavor, State } from "../vocabulary";
+export type RadialProgressSize = "sm" | "md" | "lg";
+export type RadialProgressColor = "default" | "accent" | "success" | "warning" | "danger";
+export type RadialProgressProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    value?: number;
+    minValue?: number;
+    maxValue?: number;
+    isIndeterminate?: boolean;
+    size?: RadialProgressSize;
+    flavor?: Flavor;
+    state?: State;
+    formatValue?: (value: number) => string;
+    label?: string;
+};
+declare const RadialProgress: __LayoutComponent<RadialProgressProps>;
+export default RadialProgress;

package/dist/components/{progress-circle/ProgressCircle.generated.js → radial-progress/RadialProgress.generated.js}

@@ -1,27 +1,26 @@
 import { memo, mergeProps, spread, template } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
-import "./ProgressCircle.css";
+import "./RadialProgress.css";
 import { createMemo, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
-import { CLASSES, componentRecipe } from "./ProgressCircle.recipe.js";
+import { CLASSES, componentRecipe } from "./RadialProgress.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<span><svg><circle></circle><circle>");
 const STROKE_WIDTH = 4;
 const CENTER = 18;
 const RADIUS = CENTER - STROKE_WIDTH / 2;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
-const __solidLayoutProgressCircle = (_stable, p)=>{
+const __solidLayoutRadialProgress = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "value",
         "minValue",
         "maxValue",
         "isIndeterminate",
         "size",
-        "color",
-        "isDisabled",
+        "flavor",
+        "state",
         "formatValue",
         "label",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
@@ -39,7 +38,7 @@ const __solidLayoutProgressCircle = (_stable, p)=>{
         return `${Math.round(percentage())}%`;
     });
     const strokeDashoffset = createMemo(()=>CIRCUMFERENCE - percentage() / 100 * CIRCUMFERENCE);
-    const classes = createMemo(()=>twMerge(CLASSES.base, CLASSES.size[local.size ?? "md"], CLASSES.color[local.color ?? "accent"], isIndeterminate() && CLASSES.state.indeterminate, local.isDisabled && CLASSES.state.disabled, local.class, local.className));
+    const classes = createMemo(()=>twMerge(CLASSES.base, CLASSES.size[local.size ?? "md"], CLASSES.flavor[local.flavor ?? "accent"] ?? `radial-progress--flavor-${local.flavor ?? "accent"}`, isIndeterminate() && CLASSES.state.indeterminate, "disabled" === local.state && CLASSES.state.disabled, local.class));
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
         spread(_el$, mergeProps(others, {
@@ -69,10 +68,10 @@ const __solidLayoutProgressCircle = (_stable, p)=>{
                 return local.label;
             },
             get ["aria-disabled"] () {
-                return local.isDisabled ? "true" : void 0;
+                return "disabled" === local.state ? "true" : void 0;
             },
             get ["data-disabled"] () {
-                return local.isDisabled ? "true" : void 0;
+                return "disabled" === local.state ? "true" : void 0;
             }
         }), false, true);
         spread(_el$2, mergeProps(()=>({
@@ -106,10 +105,10 @@ const __solidLayoutProgressCircle = (_stable, p)=>{
         return _el$;
     })();
 };
-const ProgressCircle = defineComponent({
+const RadialProgress = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutProgressCircle,
+    layout: __solidLayoutRadialProgress,
     embedded: true
 });
-const ProgressCircle_generated = ProgressCircle;
-export default ProgressCircle_generated;
+const RadialProgress_generated = RadialProgress;
+export default RadialProgress_generated;

package/dist/components/radial-progress/RadialProgress.recipe.d.ts

@@ -0,0 +1,31 @@
+export declare const CLASSES: {
+    readonly base: "radial-progress";
+    readonly svg: "radial-progress__track";
+    readonly trackCircle: "radial-progress__track-circle";
+    readonly indicator: "radial-progress__indicator";
+    readonly size: {
+        readonly sm: "radial-progress--sm";
+        readonly md: "radial-progress--md";
+        readonly lg: "radial-progress--lg";
+    };
+    readonly flavor: {
+        readonly neutral: "radial-progress--flavor-neutral";
+        readonly primary: "radial-progress--flavor-primary";
+        readonly secondary: "radial-progress--flavor-secondary";
+        readonly accent: "radial-progress--flavor-accent";
+        readonly destructive: "radial-progress--flavor-destructive";
+        readonly success: "radial-progress--flavor-success";
+        readonly warning: "radial-progress--flavor-warning";
+        readonly info: "radial-progress--flavor-info";
+    };
+    readonly state: {
+        readonly indeterminate: "radial-progress--indeterminate";
+        readonly disabled: "radial-progress--disabled";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "radial-progress";
+    readonly slots: {
+        readonly root: {};
+    };
+}>;

package/dist/components/radial-progress/RadialProgress.recipe.js

@@ -0,0 +1,45 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "radial-progress",
+    svg: "radial-progress__track",
+    trackCircle: "radial-progress__track-circle",
+    indicator: "radial-progress__indicator",
+    size: {
+        sm: "radial-progress--sm",
+        md: "radial-progress--md",
+        lg: "radial-progress--lg"
+    },
+    flavor: {
+        neutral: "radial-progress--flavor-neutral",
+        primary: "radial-progress--flavor-primary",
+        secondary: "radial-progress--flavor-secondary",
+        accent: "radial-progress--flavor-accent",
+        destructive: "radial-progress--flavor-destructive",
+        success: "radial-progress--flavor-success",
+        warning: "radial-progress--flavor-warning",
+        info: "radial-progress--flavor-info"
+    },
+    state: {
+        indeterminate: "radial-progress--indeterminate",
+        disabled: "radial-progress--disabled"
+    }
+};
+const componentRecipe = recipe({
+    component: "radial-progress",
+    slots: {
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/radial-progress/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./RadialProgress.generated";
+export type { RadialProgressProps, RadialProgressSize, RadialProgressColor, } from "./RadialProgress.generated";

package/dist/components/radial-progress/index.js

@@ -0,0 +1 @@
+export { default } from "./RadialProgress.generated.js";