@spark-ui/components 10.20.10 → 10.21.0

package/dist/docgen.json

@@ -37433,6 +37433,409 @@
     "methods": [],
     "props": {}
   },
+  "SegmentedGauge": {
+    "tags": {},
+    "description": "",
+    "displayName": "SegmentedGauge",
+    "methods": [],
+    "props": {
+      "value": {
+        "defaultValue": null,
+        "description": "The current value of the gauge",
+        "name": "value",
+        "parent": {
+          "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+          "name": "SegmentedGaugeProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+            "name": "SegmentedGaugeProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "min": {
+        "defaultValue": null,
+        "description": "Minimum value of the gauge (aria-valuemin)",
+        "name": "min",
+        "parent": {
+          "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+          "name": "SegmentedGaugeProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+            "name": "SegmentedGaugeProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "number"
+        }
+      },
+      "max": {
+        "defaultValue": null,
+        "description": "Maximum value of the gauge (aria-valuemax)",
+        "name": "max",
+        "parent": {
+          "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+          "name": "SegmentedGaugeProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+            "name": "SegmentedGaugeProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "number"
+        }
+      },
+      "description": {
+        "defaultValue": null,
+        "description": "Description text for the gauge (aria-describedby)",
+        "name": "description",
+        "parent": {
+          "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+          "name": "SegmentedGaugeProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+            "name": "SegmentedGaugeProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "size": {
+        "defaultValue": null,
+        "description": "Size of the gauge",
+        "name": "size",
+        "parent": {
+          "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+          "name": "SegmentedGaugeProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+            "name": "SegmentedGaugeProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"sm\" | \"md\"",
+          "value": [
+            {
+              "value": "\"sm\""
+            },
+            {
+              "value": "\"md\""
+            }
+          ]
+        }
+      },
+      "intent": {
+        "defaultValue": null,
+        "description": "Intent of the gauge - predefined color intent",
+        "name": "intent",
+        "parent": {
+          "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+          "name": "SegmentedGaugeProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+            "name": "SegmentedGaugeProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"main\" | \"alert\" | \"support\" | \"accent\" | \"success\" | \"danger\" | \"info\" | \"neutral\" | \"basic\"",
+          "value": [
+            {
+              "value": "\"main\""
+            },
+            {
+              "value": "\"alert\""
+            },
+            {
+              "value": "\"support\""
+            },
+            {
+              "value": "\"accent\""
+            },
+            {
+              "value": "\"success\""
+            },
+            {
+              "value": "\"danger\""
+            },
+            {
+              "value": "\"info\""
+            },
+            {
+              "value": "\"neutral\""
+            },
+            {
+              "value": "\"basic\""
+            }
+          ]
+        }
+      },
+      "customColor": {
+        "defaultValue": null,
+        "description": "Custom color for the gauge (hex, CSS variable, etc.)",
+        "name": "customColor",
+        "parent": {
+          "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+          "name": "SegmentedGaugeProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+            "name": "SegmentedGaugeProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "id": {
+        "defaultValue": null,
+        "description": "ID of the gauge element",
+        "name": "id",
+        "parent": {
+          "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+          "name": "SegmentedGaugeProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+            "name": "SegmentedGaugeProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "aria-label": {
+        "defaultValue": null,
+        "description": "Accessible label for the gauge (required if no id is provided)",
+        "name": "aria-label",
+        "parent": {
+          "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+          "name": "SegmentedGaugeProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+            "name": "SegmentedGaugeProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "Additional CSS classes",
+        "name": "className",
+        "parent": {
+          "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+          "name": "SegmentedGaugeProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+            "name": "SegmentedGaugeProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "Ref to the root element",
+        "name": "ref",
+        "parent": {
+          "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+          "name": "SegmentedGaugeProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+            "name": "SegmentedGaugeProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      },
+      "children": {
+        "defaultValue": null,
+        "description": "Children render prop for custom rendering",
+        "name": "children",
+        "parent": {
+          "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+          "name": "SegmentedGaugeProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/segmented-gauge/SegmentedGauge.tsx",
+            "name": "SegmentedGaugeProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "(props: { segments: { isActive: boolean; isCurrent: boolean; }[]; currentIndex: number; }) => ReactNode"
+        }
+      }
+    }
+  },
+  "SegmentedGaugeContext": {
+    "tags": {},
+    "description": "",
+    "displayName": "SegmentedGaugeContext",
+    "methods": [],
+    "props": {}
+  },
+  "SegmentedGauge.Label": {
+    "tags": {},
+    "description": "",
+    "displayName": "SegmentedGauge.Label",
+    "methods": [],
+    "props": {
+      "ref": {
+        "defaultValue": null,
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).",
+        "name": "ref",
+        "parent": {
+          "fileName": "components/src/segmented-gauge/SegmentedGaugeLabel.tsx",
+          "name": "SegmentedGaugeLabelProps"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/segmented-gauge/SegmentedGaugeLabel.tsx",
+            "name": "SegmentedGaugeLabelProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLSpanElement>"
+        }
+      },
+      "id": {
+        "defaultValue": null,
+        "description": "",
+        "name": "id",
+        "parent": {
+          "fileName": "components/src/segmented-gauge/SegmentedGaugeLabel.tsx",
+          "name": "SegmentedGaugeLabelProps"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/segmented-gauge/SegmentedGaugeLabel.tsx",
+            "name": "SegmentedGaugeLabelProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    }
+  },
+  "SegmentedGauge.Segment": {
+    "tags": {},
+    "description": "",
+    "displayName": "SegmentedGauge.Segment",
+    "methods": [],
+    "props": {
+      "index": {
+        "defaultValue": {
+          "value": 0
+        },
+        "description": "Index of this segment (0-based)",
+        "name": "index",
+        "parent": {
+          "fileName": "components/src/segmented-gauge/SegmentedGaugeSegment.tsx",
+          "name": "SegmentedGaugeSegmentProps"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/segmented-gauge/SegmentedGaugeSegment.tsx",
+            "name": "SegmentedGaugeSegmentProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).",
+        "name": "ref",
+        "parent": {
+          "fileName": "components/src/segmented-gauge/SegmentedGaugeSegment.tsx",
+          "name": "SegmentedGaugeSegmentProps"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/segmented-gauge/SegmentedGaugeSegment.tsx",
+            "name": "SegmentedGaugeSegmentProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      }
+    }
+  },
+  "SegmentedGauge.Track": {
+    "tags": {},
+    "description": "",
+    "displayName": "SegmentedGauge.Track",
+    "methods": [],
+    "props": {
+      "ref": {
+        "defaultValue": null,
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).",
+        "name": "ref",
+        "parent": {
+          "fileName": "components/src/segmented-gauge/SegmentedGaugeTrack.tsx",
+          "name": "SegmentedGaugeTrackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/segmented-gauge/SegmentedGaugeTrack.tsx",
+            "name": "SegmentedGaugeTrackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      }
+    }
+  },
   "Select": {
     "tags": {},
     "description": "",

package/dist/segmented-gauge/index.d.mts

@@ -0,0 +1,100 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Ref, ComponentProps } from 'react';
+
+interface SegmentedGaugeProps {
+    /**
+     * The current value of the gauge
+     */
+    value?: number;
+    /**
+     * Minimum value of the gauge (aria-valuemin)
+     */
+    min: number;
+    /**
+     * Maximum value of the gauge (aria-valuemax)
+     */
+    max: number;
+    /**
+     * Description text for the gauge (aria-describedby)
+     */
+    description?: string;
+    /**
+     * Size of the gauge
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Intent of the gauge - predefined color intent
+     */
+    intent?: 'main' | 'support' | 'basic' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral';
+    /**
+     * Custom color for the gauge (hex, CSS variable, etc.)
+     */
+    customColor?: string;
+    /**
+     * ID of the gauge element
+     */
+    id?: string;
+    /**
+     * Accessible label for the gauge (required if no id is provided)
+     */
+    'aria-label'?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Ref to the root element
+     */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Children render prop for custom rendering
+     */
+    children?: (props: {
+        segments: {
+            isActive: boolean;
+            isCurrent: boolean;
+        }[];
+        currentIndex: number;
+    }) => React.ReactNode;
+}
+declare const SegmentedGauge$1: {
+    ({ value, min, max, description, size, intent, customColor, id, "aria-label": ariaLabel, className, ref, children, ...props }: SegmentedGaugeProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface SegmentedGaugeLabelProps extends ComponentProps<'span'> {
+    ref?: Ref<HTMLSpanElement>;
+    id?: string;
+}
+declare const SegmentedGaugeLabel: {
+    ({ className, children, ref, id, ...props }: SegmentedGaugeLabelProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface SegmentedGaugeSegmentProps extends ComponentProps<'div'> {
+    /**
+     * Index of this segment (0-based)
+     */
+    index?: number;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const SegmentedGaugeSegment: {
+    ({ index, className, children, ref, ...props }: SegmentedGaugeSegmentProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface SegmentedGaugeTrackProps extends ComponentProps<'div'> {
+    ref?: Ref<HTMLDivElement>;
+}
+declare const SegmentedGaugeTrack: {
+    ({ className, children, ref, ...props }: SegmentedGaugeTrackProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const SegmentedGauge: typeof SegmentedGauge$1 & {
+    Track: typeof SegmentedGaugeTrack;
+    Segment: typeof SegmentedGaugeSegment;
+    Label: typeof SegmentedGaugeLabel;
+};
+
+export { SegmentedGauge, type SegmentedGaugeLabelProps, type SegmentedGaugeProps, type SegmentedGaugeSegmentProps, type SegmentedGaugeTrackProps };

package/dist/segmented-gauge/index.d.ts

@@ -0,0 +1,100 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Ref, ComponentProps } from 'react';
+
+interface SegmentedGaugeProps {
+    /**
+     * The current value of the gauge
+     */
+    value?: number;
+    /**
+     * Minimum value of the gauge (aria-valuemin)
+     */
+    min: number;
+    /**
+     * Maximum value of the gauge (aria-valuemax)
+     */
+    max: number;
+    /**
+     * Description text for the gauge (aria-describedby)
+     */
+    description?: string;
+    /**
+     * Size of the gauge
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Intent of the gauge - predefined color intent
+     */
+    intent?: 'main' | 'support' | 'basic' | 'accent' | 'success' | 'alert' | 'danger' | 'info' | 'neutral';
+    /**
+     * Custom color for the gauge (hex, CSS variable, etc.)
+     */
+    customColor?: string;
+    /**
+     * ID of the gauge element
+     */
+    id?: string;
+    /**
+     * Accessible label for the gauge (required if no id is provided)
+     */
+    'aria-label'?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Ref to the root element
+     */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Children render prop for custom rendering
+     */
+    children?: (props: {
+        segments: {
+            isActive: boolean;
+            isCurrent: boolean;
+        }[];
+        currentIndex: number;
+    }) => React.ReactNode;
+}
+declare const SegmentedGauge$1: {
+    ({ value, min, max, description, size, intent, customColor, id, "aria-label": ariaLabel, className, ref, children, ...props }: SegmentedGaugeProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface SegmentedGaugeLabelProps extends ComponentProps<'span'> {
+    ref?: Ref<HTMLSpanElement>;
+    id?: string;
+}
+declare const SegmentedGaugeLabel: {
+    ({ className, children, ref, id, ...props }: SegmentedGaugeLabelProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface SegmentedGaugeSegmentProps extends ComponentProps<'div'> {
+    /**
+     * Index of this segment (0-based)
+     */
+    index?: number;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const SegmentedGaugeSegment: {
+    ({ index, className, children, ref, ...props }: SegmentedGaugeSegmentProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface SegmentedGaugeTrackProps extends ComponentProps<'div'> {
+    ref?: Ref<HTMLDivElement>;
+}
+declare const SegmentedGaugeTrack: {
+    ({ className, children, ref, ...props }: SegmentedGaugeTrackProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const SegmentedGauge: typeof SegmentedGauge$1 & {
+    Track: typeof SegmentedGaugeTrack;
+    Segment: typeof SegmentedGaugeSegment;
+    Label: typeof SegmentedGaugeLabel;
+};
+
+export { SegmentedGauge, type SegmentedGaugeLabelProps, type SegmentedGaugeProps, type SegmentedGaugeSegmentProps, type SegmentedGaugeTrackProps };

package/dist/segmented-gauge/index.js

@@ -0,0 +1,277 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/segmented-gauge/index.ts
+var segmented_gauge_exports = {};
+__export(segmented_gauge_exports, {
+  SegmentedGauge: () => SegmentedGauge2
+});
+module.exports = __toCommonJS(segmented_gauge_exports);
+
+// src/segmented-gauge/SegmentedGauge.tsx
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_react3 = require("react");
+
+// src/segmented-gauge/SegmentedGaugeContext.tsx
+var import_react = require("react");
+var SegmentedGaugeContext = (0, import_react.createContext)(null);
+var useSegmentedGaugeContext = () => {
+  const context = (0, import_react.useContext)(SegmentedGaugeContext);
+  if (!context) {
+    throw new Error("useSegmentedGaugeContext must be used within a SegmentedGauge provider");
+  }
+  return context;
+};
+
+// src/segmented-gauge/SegmentedGaugeLabel.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SegmentedGaugeLabel = ({
+  className,
+  children,
+  ref,
+  id,
+  ...props
+}) => {
+  const { labelId } = useSegmentedGaugeContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      "data-spark-component": "segmented-gauge-label",
+      "data-testid": "segmented-gauge-label",
+      ref,
+      id: id || labelId,
+      className: (0, import_class_variance_authority.cx)("default:text-on-surface default:text-body-2", className),
+      ...props,
+      children
+    }
+  );
+};
+SegmentedGaugeLabel.displayName = "SegmentedGauge.Label";
+
+// src/segmented-gauge/SegmentedGaugeSegment.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SegmentedGaugeSegment = ({
+  index = 0,
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  const { size, intent, customColor, currentIndex } = useSegmentedGaugeContext();
+  const isActive = currentIndex !== -1 && index <= currentIndex;
+  const isCurrent = currentIndex !== -1 && index === currentIndex;
+  const gaugeColor = (0, import_react2.useMemo)(() => {
+    if (customColor) {
+      return customColor;
+    }
+    switch (intent) {
+      case "main":
+        return "var(--color-main)";
+      case "support":
+        return "var(--color-support)";
+      case "basic":
+        return "var(--color-basic)";
+      case "accent":
+        return "var(--color-accent)";
+      case "success":
+        return "var(--color-success)";
+      case "alert":
+        return "var(--color-alert)";
+      case "danger":
+        return "var(--color-error)";
+      case "info":
+        return "var(--color-info)";
+      case "neutral":
+        return "var(--color-neutral)";
+      default:
+        return "var(--color-neutral)";
+    }
+  }, [intent, customColor]);
+  const segmentClasses = (0, import_class_variance_authority2.cx)(
+    "border-outline relative rounded-full",
+    {
+      "h-sz-8 w-sz-24": size === "sm",
+      "h-sz-12 w-sz-36": size === "md",
+      "default:bg-[var(--gauge-color)]": isActive,
+      "border-sm bg-surface": !isActive
+    },
+    className
+  );
+  const indicatorClasses = (0, import_class_variance_authority2.cx)(
+    "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+    "default:bg-surface default:rounded-full",
+    "border-[var(--gauge-color)]",
+    {
+      "size-sz-12 border-md": size === "sm",
+      "size-sz-20 border-lg": size === "md"
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      "data-spark-component": "segmented-gauge-segment",
+      "data-testid": "segmented-gauge-segment",
+      "data-active": isActive,
+      "data-current": isCurrent,
+      ref,
+      style: {
+        "--gauge-color": gaugeColor
+      },
+      className: segmentClasses,
+      ...props,
+      children: [
+        children,
+        isCurrent && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: indicatorClasses, "aria-hidden": "true" })
+      ]
+    }
+  );
+};
+SegmentedGaugeSegment.displayName = "SegmentedGauge.Segment";
+
+// src/segmented-gauge/SegmentedGaugeTrack.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SegmentedGaugeTrack = ({
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-spark-component": "segmented-gauge-track",
+      ref,
+      className: (0, import_class_variance_authority3.cx)("gap-sm relative flex rounded-full", className),
+      ...props,
+      children
+    }
+  );
+};
+SegmentedGaugeTrack.displayName = "SegmentedGauge.Track";
+
+// src/segmented-gauge/SegmentedGauge.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var calculateCurrentIndex = (value, min, max, segments) => {
+  if (value == null) {
+    return -1;
+  }
+  const normalizedValue = Math.max(min, Math.min(max, value));
+  const range = max - min;
+  const segmentSize = range / (segments - 1);
+  const rawIndex = (normalizedValue - min) / segmentSize;
+  return Math.max(0, Math.min(segments - 1, Math.round(rawIndex)));
+};
+var SegmentedGauge = ({
+  value,
+  min,
+  max,
+  description,
+  size = "md",
+  intent = "neutral",
+  customColor,
+  id,
+  "aria-label": ariaLabel,
+  className,
+  ref,
+  children,
+  ...props
+}) => {
+  const segments = max - min + 1;
+  const currentIndex = (0, import_react3.useMemo)(
+    () => calculateCurrentIndex(value, min, max, segments),
+    [value, min, max, segments]
+  );
+  const internalLabelId = (0, import_react3.useId)();
+  const generatedId = (0, import_react3.useId)();
+  const gaugeId = id || generatedId;
+  const segmentsData = (0, import_react3.useMemo)(() => {
+    return Array.from({ length: segments }, (_, index) => ({
+      isActive: currentIndex !== -1 && index <= currentIndex,
+      isCurrent: currentIndex !== -1 && index === currentIndex
+    }));
+  }, [segments, currentIndex]);
+  const contextValue = (0, import_react3.useMemo)(
+    () => ({
+      value,
+      min,
+      max,
+      segments,
+      currentIndex,
+      size,
+      intent,
+      customColor,
+      labelId: internalLabelId,
+      gaugeId
+    }),
+    [value, min, max, segments, currentIndex, size, intent, customColor, internalLabelId, gaugeId]
+  );
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SegmentedGaugeContext.Provider, { value: contextValue, children: children({
+      segments: segmentsData,
+      currentIndex
+    }) });
+  }
+  const roleProps = value != null ? {
+    role: "meter",
+    "aria-valuenow": value,
+    "aria-valuemin": min,
+    "aria-valuemax": max
+  } : {
+    role: "status"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SegmentedGaugeContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      id: gaugeId,
+      "data-spark-component": "segmented-gauge",
+      ref,
+      className: (0, import_class_variance_authority4.cx)("gap-md flex items-center", className),
+      ...roleProps,
+      "aria-labelledby": id ? `${gaugeId}-label` : void 0,
+      "aria-label": !id ? ariaLabel : void 0,
+      "aria-describedby": internalLabelId,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SegmentedGaugeTrack, { children: segmentsData.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SegmentedGaugeSegment, { index }, index)) }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SegmentedGaugeLabel, { id: internalLabelId, children: description })
+      ]
+    }
+  ) });
+};
+SegmentedGauge.displayName = "SegmentedGauge";
+
+// src/segmented-gauge/index.ts
+var SegmentedGauge2 = Object.assign(SegmentedGauge, {
+  Track: SegmentedGaugeTrack,
+  Segment: SegmentedGaugeSegment,
+  Label: SegmentedGaugeLabel
+});
+SegmentedGauge2.displayName = "SegmentedGauge";
+SegmentedGaugeTrack.displayName = "SegmentedGauge.Track";
+SegmentedGaugeSegment.displayName = "SegmentedGauge.Segment";
+SegmentedGaugeLabel.displayName = "SegmentedGauge.Label";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SegmentedGauge
+});
+//# sourceMappingURL=index.js.map

package/dist/segmented-gauge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/segmented-gauge/index.ts","../../src/segmented-gauge/SegmentedGauge.tsx","../../src/segmented-gauge/SegmentedGaugeContext.tsx","../../src/segmented-gauge/SegmentedGaugeLabel.tsx","../../src/segmented-gauge/SegmentedGaugeSegment.tsx","../../src/segmented-gauge/SegmentedGaugeTrack.tsx"],"sourcesContent":["import { SegmentedGauge as Root } from './SegmentedGauge'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nexport const SegmentedGauge: typeof Root & {\n  Track: typeof SegmentedGaugeTrack\n  Segment: typeof SegmentedGaugeSegment\n  Label: typeof SegmentedGaugeLabel\n} = Object.assign(Root, {\n  Track: SegmentedGaugeTrack,\n  Segment: SegmentedGaugeSegment,\n  Label: SegmentedGaugeLabel,\n})\n\nSegmentedGauge.displayName = 'SegmentedGauge'\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n\nexport { type SegmentedGaugeProps } from './SegmentedGauge'\nexport { type SegmentedGaugeTrackProps } from './SegmentedGaugeTrack'\nexport { type SegmentedGaugeSegmentProps } from './SegmentedGaugeSegment'\nexport { type SegmentedGaugeLabelProps } from './SegmentedGaugeLabel'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo } from 'react'\n\nimport { SegmentedGaugeContext } from './SegmentedGaugeContext'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nconst calculateCurrentIndex = (\n  value: number | undefined,\n  min: number,\n  max: number,\n  segments: number\n) => {\n  // If value is undefined or null, no segment is active\n  if (value == null) {\n    return -1\n  }\n  const normalizedValue = Math.max(min, Math.min(max, value))\n  const range = max - min\n  const segmentSize = range / (segments - 1)\n  const rawIndex = (normalizedValue - min) / segmentSize\n\n  // Clamp the index to valid range\n  return Math.max(0, Math.min(segments - 1, Math.round(rawIndex)))\n}\n\nexport interface SegmentedGaugeProps {\n  /**\n   * The current value of the gauge\n   */\n  value?: number\n  /**\n   * Minimum value of the gauge (aria-valuemin)\n   */\n  min: number\n  /**\n   * Maximum value of the gauge (aria-valuemax)\n   */\n  max: number\n  /**\n   * Description text for the gauge (aria-describedby)\n   */\n  description?: string\n  /**\n   * Size of the gauge\n   */\n  size?: 'sm' | 'md'\n  /**\n   * Intent of the gauge - predefined color intent\n   */\n  intent?:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | 'neutral'\n  /**\n   * Custom color for the gauge (hex, CSS variable, etc.)\n   */\n  customColor?: string\n  /**\n   * ID of the gauge element\n   */\n  id?: string\n  /**\n   * Accessible label for the gauge (required if no id is provided)\n   */\n  'aria-label'?: string\n  /**\n   * Additional CSS classes\n   */\n  className?: string\n  /**\n   * Ref to the root element\n   */\n  ref?: Ref<HTMLDivElement>\n  /**\n   * Children render prop for custom rendering\n   */\n  children?: (props: {\n    segments: {\n      isActive: boolean\n      isCurrent: boolean\n    }[]\n    currentIndex: number\n  }) => React.ReactNode\n}\n\nexport const SegmentedGauge = ({\n  value,\n  min,\n  max,\n  description,\n  size = 'md',\n  intent = 'neutral',\n  customColor,\n  id,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  children,\n  ...props\n}: SegmentedGaugeProps) => {\n  // Calculate segments from min and max\n  const segments = max - min + 1\n  const currentIndex = useMemo(\n    () => calculateCurrentIndex(value, min, max, segments),\n    [value, min, max, segments]\n  )\n\n  // Generate unique IDs\n  const internalLabelId = useId()\n  const generatedId = useId()\n  // Use provided id or generated one for the gauge element\n  const gaugeId = id || generatedId\n\n  const segmentsData = useMemo(() => {\n    return Array.from({ length: segments }, (_, index) => ({\n      isActive: currentIndex !== -1 && index <= currentIndex,\n      isCurrent: currentIndex !== -1 && index === currentIndex,\n    }))\n  }, [segments, currentIndex])\n\n  const contextValue = useMemo(\n    () => ({\n      value,\n      min,\n      max,\n      segments,\n      currentIndex,\n      size,\n      intent,\n      customColor,\n      labelId: internalLabelId,\n      gaugeId,\n    }),\n    [value, min, max, segments, currentIndex, size, intent, customColor, internalLabelId, gaugeId]\n  )\n\n  // If children is provided, use render prop pattern\n  if (children) {\n    return (\n      <SegmentedGaugeContext.Provider value={contextValue}>\n        {children({\n          segments: segmentsData,\n          currentIndex,\n        })}\n      </SegmentedGaugeContext.Provider>\n    )\n  }\n\n  /**\n   * A `meter` role MUST have a value. If the value is not available, the component uses a `status` role instead.\n   */\n  const roleProps =\n    value != null\n      ? {\n          role: 'meter',\n          'aria-valuenow': value,\n          'aria-valuemin': min,\n          'aria-valuemax': max,\n        }\n      : {\n          role: 'status',\n        }\n\n  // Default rendering\n  return (\n    <SegmentedGaugeContext.Provider value={contextValue}>\n      <div\n        id={gaugeId}\n        data-spark-component=\"segmented-gauge\"\n        ref={ref}\n        className={cx('gap-md flex items-center', className)}\n        {...roleProps}\n        aria-labelledby={id ? `${gaugeId}-label` : undefined}\n        aria-label={!id ? ariaLabel : undefined}\n        aria-describedby={internalLabelId}\n        {...props}\n      >\n        <SegmentedGaugeTrack>\n          {segmentsData.map((_, index) => (\n            <SegmentedGaugeSegment key={index} index={index} />\n          ))}\n        </SegmentedGaugeTrack>\n\n        {description && (\n          <SegmentedGaugeLabel id={internalLabelId}>{description}</SegmentedGaugeLabel>\n        )}\n      </div>\n    </SegmentedGaugeContext.Provider>\n  )\n}\n\nSegmentedGauge.displayName = 'SegmentedGauge'\n","import { createContext, useContext } from 'react'\n\nexport interface SegmentedGaugeContextValue {\n  value?: number\n  min: number\n  max: number\n  segments: number\n  currentIndex: number\n  size: 'sm' | 'md'\n  intent:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | 'neutral'\n  customColor?: string\n  labelId: string\n  gaugeId: string\n}\n\nexport const SegmentedGaugeContext = createContext<SegmentedGaugeContextValue | null>(null)\n\nexport const useSegmentedGaugeContext = () => {\n  const context = useContext(SegmentedGaugeContext)\n\n  if (!context) {\n    throw new Error('useSegmentedGaugeContext must be used within a SegmentedGauge provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeLabelProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n  id?: string\n}\n\nexport const SegmentedGaugeLabel = ({\n  className,\n  children,\n  ref,\n  id,\n  ...props\n}: SegmentedGaugeLabelProps) => {\n  const { labelId } = useSegmentedGaugeContext()\n\n  return (\n    <span\n      data-spark-component=\"segmented-gauge-label\"\n      data-testid=\"segmented-gauge-label\"\n      ref={ref}\n      id={id || labelId}\n      className={cx('default:text-on-surface default:text-body-2', className)}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useMemo } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeSegmentProps extends ComponentProps<'div'> {\n  /**\n   * Index of this segment (0-based)\n   */\n  index?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeSegment = ({\n  index = 0,\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeSegmentProps) => {\n  const { size, intent, customColor, currentIndex } = useSegmentedGaugeContext()\n\n  // Calculate isActive and isCurrent from context and index\n  const isActive = currentIndex !== -1 && index <= currentIndex\n  const isCurrent = currentIndex !== -1 && index === currentIndex\n\n  const gaugeColor = useMemo(() => {\n    // If customColor is provided, use it\n    if (customColor) {\n      return customColor\n    }\n\n    // Handle predefined intents\n    switch (intent) {\n      case 'main':\n        return 'var(--color-main)'\n      case 'support':\n        return 'var(--color-support)'\n      case 'basic':\n        return 'var(--color-basic)'\n      case 'accent':\n        return 'var(--color-accent)'\n      case 'success':\n        return 'var(--color-success)'\n      case 'alert':\n        return 'var(--color-alert)'\n      case 'danger':\n        return 'var(--color-error)'\n      case 'info':\n        return 'var(--color-info)'\n      case 'neutral':\n        return 'var(--color-neutral)'\n      default:\n        return 'var(--color-neutral)'\n    }\n  }, [intent, customColor])\n\n  const segmentClasses = cx(\n    'border-outline relative rounded-full',\n    {\n      'h-sz-8 w-sz-24': size === 'sm',\n      'h-sz-12 w-sz-36': size === 'md',\n      'default:bg-[var(--gauge-color)]': isActive,\n      'border-sm bg-surface': !isActive,\n    },\n    className\n  )\n\n  const indicatorClasses = cx(\n    'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n    'default:bg-surface default:rounded-full',\n    'border-[var(--gauge-color)]',\n    {\n      'size-sz-12 border-md': size === 'sm',\n      'size-sz-20 border-lg': size === 'md',\n    }\n  )\n\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-segment\"\n      data-testid=\"segmented-gauge-segment\"\n      data-active={isActive}\n      data-current={isCurrent}\n      ref={ref}\n      style={\n        {\n          '--gauge-color': gaugeColor,\n        } as React.CSSProperties\n      }\n      className={segmentClasses}\n      {...props}\n    >\n      {children}\n      {isCurrent && <div className={indicatorClasses} aria-hidden=\"true\" />}\n    </div>\n  )\n}\n\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface SegmentedGaugeTrackProps extends ComponentProps<'div'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeTrack = ({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeTrackProps) => {\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-track\"\n      ref={ref}\n      className={cx('gap-sm relative flex rounded-full', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAAA;AAAA;AAAA;;;ACAA,IAAAC,mCAAmB;AACnB,IAAAC,gBAAoC;;;ACDpC,mBAA0C;AAwBnC,IAAM,4BAAwB,4BAAiD,IAAI;AAEnF,IAAM,2BAA2B,MAAM;AAC5C,QAAM,cAAU,yBAAW,qBAAqB;AAEhD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,wEAAwE;AAAA,EAC1F;AAEA,SAAO;AACT;;;AClCA,sCAAmB;AAoBf;AAVG,IAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,QAAM,EAAE,QAAQ,IAAI,yBAAyB;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,eAAY;AAAA,MACZ;AAAA,MACA,IAAI,MAAM;AAAA,MACV,eAAW,oCAAG,+CAA+C,SAAS;AAAA,MACrE,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,oBAAoB,cAAc;;;ACjClC,IAAAC,mCAAmB;AACnB,IAAAC,gBAA6C;AA8EzC,IAAAC,sBAAA;AAlEG,IAAM,wBAAwB,CAAC;AAAA,EACpC,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkC;AAChC,QAAM,EAAE,MAAM,QAAQ,aAAa,aAAa,IAAI,yBAAyB;AAG7E,QAAM,WAAW,iBAAiB,MAAM,SAAS;AACjD,QAAM,YAAY,iBAAiB,MAAM,UAAU;AAEnD,QAAM,iBAAa,uBAAQ,MAAM;AAE/B,QAAI,aAAa;AACf,aAAO;AAAA,IACT;AAGA,YAAQ,QAAQ;AAAA,MACd,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IACX;AAAA,EACF,GAAG,CAAC,QAAQ,WAAW,CAAC;AAExB,QAAM,qBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,MACE,kBAAkB,SAAS;AAAA,MAC3B,mBAAmB,SAAS;AAAA,MAC5B,mCAAmC;AAAA,MACnC,wBAAwB,CAAC;AAAA,IAC3B;AAAA,IACA;AAAA,EACF;AAEA,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,wBAAwB,SAAS;AAAA,MACjC,wBAAwB,SAAS;AAAA,IACnC;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,eAAY;AAAA,MACZ,eAAa;AAAA,MACb,gBAAc;AAAA,MACd;AAAA,MACA,OACE;AAAA,QACE,iBAAiB;AAAA,MACnB;AAAA,MAEF,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aAAa,6CAAC,SAAI,WAAW,kBAAkB,eAAY,QAAO;AAAA;AAAA;AAAA,EACrE;AAEJ;AAEA,sBAAsB,cAAc;;;ACnGpC,IAAAC,mCAAmB;AAcf,IAAAC,sBAAA;AAPG,IAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB;AAAA,MACA,eAAW,qCAAG,qCAAqC,SAAS;AAAA,MAC3D,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,oBAAoB,cAAc;;;AJ0H5B,IAAAC,sBAAA;AA3IN,IAAM,wBAAwB,CAC5B,OACA,KACA,KACA,aACG;AAEH,MAAI,SAAS,MAAM;AACjB,WAAO;AAAA,EACT;AACA,QAAM,kBAAkB,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC1D,QAAM,QAAQ,MAAM;AACpB,QAAM,cAAc,SAAS,WAAW;AACxC,QAAM,YAAY,kBAAkB,OAAO;AAG3C,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,WAAW,GAAG,KAAK,MAAM,QAAQ,CAAC,CAAC;AACjE;AAoEO,IAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AAEzB,QAAM,WAAW,MAAM,MAAM;AAC7B,QAAM,mBAAe;AAAA,IACnB,MAAM,sBAAsB,OAAO,KAAK,KAAK,QAAQ;AAAA,IACrD,CAAC,OAAO,KAAK,KAAK,QAAQ;AAAA,EAC5B;AAGA,QAAM,sBAAkB,qBAAM;AAC9B,QAAM,kBAAc,qBAAM;AAE1B,QAAM,UAAU,MAAM;AAEtB,QAAM,mBAAe,uBAAQ,MAAM;AACjC,WAAO,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,WAAW;AAAA,MACrD,UAAU,iBAAiB,MAAM,SAAS;AAAA,MAC1C,WAAW,iBAAiB,MAAM,UAAU;AAAA,IAC9C,EAAE;AAAA,EACJ,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,QAAM,mBAAe;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,IACF;AAAA,IACA,CAAC,OAAO,KAAK,KAAK,UAAU,cAAc,MAAM,QAAQ,aAAa,iBAAiB,OAAO;AAAA,EAC/F;AAGA,MAAI,UAAU;AACZ,WACE,6CAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACpC,mBAAS;AAAA,MACR,UAAU;AAAA,MACV;AAAA,IACF,CAAC,GACH;AAAA,EAEJ;AAKA,QAAM,YACJ,SAAS,OACL;AAAA,IACE,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,EACnB,IACA;AAAA,IACE,MAAM;AAAA,EACR;AAGN,SACE,6CAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACrC;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,wBAAqB;AAAA,MACrB;AAAA,MACA,eAAW,qCAAG,4BAA4B,SAAS;AAAA,MAClD,GAAG;AAAA,MACJ,mBAAiB,KAAK,GAAG,OAAO,WAAW;AAAA,MAC3C,cAAY,CAAC,KAAK,YAAY;AAAA,MAC9B,oBAAkB;AAAA,MACjB,GAAG;AAAA,MAEJ;AAAA,qDAAC,uBACE,uBAAa,IAAI,CAAC,GAAG,UACpB,6CAAC,yBAAkC,SAAP,KAAqB,CAClD,GACH;AAAA,QAEC,eACC,6CAAC,uBAAoB,IAAI,iBAAkB,uBAAY;AAAA;AAAA;AAAA,EAE3D,GACF;AAEJ;AAEA,eAAe,cAAc;;;ADlMtB,IAAMC,kBAIT,OAAO,OAAO,gBAAM;AAAA,EACtB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT,CAAC;AAEDA,gBAAe,cAAc;AAC7B,oBAAoB,cAAc;AAClC,sBAAsB,cAAc;AACpC,oBAAoB,cAAc;","names":["SegmentedGauge","import_class_variance_authority","import_react","import_class_variance_authority","import_react","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_jsx_runtime","SegmentedGauge"]}

package/dist/segmented-gauge/index.mjs

@@ -0,0 +1,250 @@
+// src/segmented-gauge/SegmentedGauge.tsx
+import { cx as cx4 } from "class-variance-authority";
+import { useId, useMemo as useMemo2 } from "react";
+
+// src/segmented-gauge/SegmentedGaugeContext.tsx
+import { createContext, useContext } from "react";
+var SegmentedGaugeContext = createContext(null);
+var useSegmentedGaugeContext = () => {
+  const context = useContext(SegmentedGaugeContext);
+  if (!context) {
+    throw new Error("useSegmentedGaugeContext must be used within a SegmentedGauge provider");
+  }
+  return context;
+};
+
+// src/segmented-gauge/SegmentedGaugeLabel.tsx
+import { cx } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var SegmentedGaugeLabel = ({
+  className,
+  children,
+  ref,
+  id,
+  ...props
+}) => {
+  const { labelId } = useSegmentedGaugeContext();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-spark-component": "segmented-gauge-label",
+      "data-testid": "segmented-gauge-label",
+      ref,
+      id: id || labelId,
+      className: cx("default:text-on-surface default:text-body-2", className),
+      ...props,
+      children
+    }
+  );
+};
+SegmentedGaugeLabel.displayName = "SegmentedGauge.Label";
+
+// src/segmented-gauge/SegmentedGaugeSegment.tsx
+import { cx as cx2 } from "class-variance-authority";
+import { useMemo } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SegmentedGaugeSegment = ({
+  index = 0,
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  const { size, intent, customColor, currentIndex } = useSegmentedGaugeContext();
+  const isActive = currentIndex !== -1 && index <= currentIndex;
+  const isCurrent = currentIndex !== -1 && index === currentIndex;
+  const gaugeColor = useMemo(() => {
+    if (customColor) {
+      return customColor;
+    }
+    switch (intent) {
+      case "main":
+        return "var(--color-main)";
+      case "support":
+        return "var(--color-support)";
+      case "basic":
+        return "var(--color-basic)";
+      case "accent":
+        return "var(--color-accent)";
+      case "success":
+        return "var(--color-success)";
+      case "alert":
+        return "var(--color-alert)";
+      case "danger":
+        return "var(--color-error)";
+      case "info":
+        return "var(--color-info)";
+      case "neutral":
+        return "var(--color-neutral)";
+      default:
+        return "var(--color-neutral)";
+    }
+  }, [intent, customColor]);
+  const segmentClasses = cx2(
+    "border-outline relative rounded-full",
+    {
+      "h-sz-8 w-sz-24": size === "sm",
+      "h-sz-12 w-sz-36": size === "md",
+      "default:bg-[var(--gauge-color)]": isActive,
+      "border-sm bg-surface": !isActive
+    },
+    className
+  );
+  const indicatorClasses = cx2(
+    "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+    "default:bg-surface default:rounded-full",
+    "border-[var(--gauge-color)]",
+    {
+      "size-sz-12 border-md": size === "sm",
+      "size-sz-20 border-lg": size === "md"
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-spark-component": "segmented-gauge-segment",
+      "data-testid": "segmented-gauge-segment",
+      "data-active": isActive,
+      "data-current": isCurrent,
+      ref,
+      style: {
+        "--gauge-color": gaugeColor
+      },
+      className: segmentClasses,
+      ...props,
+      children: [
+        children,
+        isCurrent && /* @__PURE__ */ jsx2("div", { className: indicatorClasses, "aria-hidden": "true" })
+      ]
+    }
+  );
+};
+SegmentedGaugeSegment.displayName = "SegmentedGauge.Segment";
+
+// src/segmented-gauge/SegmentedGaugeTrack.tsx
+import { cx as cx3 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SegmentedGaugeTrack = ({
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-spark-component": "segmented-gauge-track",
+      ref,
+      className: cx3("gap-sm relative flex rounded-full", className),
+      ...props,
+      children
+    }
+  );
+};
+SegmentedGaugeTrack.displayName = "SegmentedGauge.Track";
+
+// src/segmented-gauge/SegmentedGauge.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var calculateCurrentIndex = (value, min, max, segments) => {
+  if (value == null) {
+    return -1;
+  }
+  const normalizedValue = Math.max(min, Math.min(max, value));
+  const range = max - min;
+  const segmentSize = range / (segments - 1);
+  const rawIndex = (normalizedValue - min) / segmentSize;
+  return Math.max(0, Math.min(segments - 1, Math.round(rawIndex)));
+};
+var SegmentedGauge = ({
+  value,
+  min,
+  max,
+  description,
+  size = "md",
+  intent = "neutral",
+  customColor,
+  id,
+  "aria-label": ariaLabel,
+  className,
+  ref,
+  children,
+  ...props
+}) => {
+  const segments = max - min + 1;
+  const currentIndex = useMemo2(
+    () => calculateCurrentIndex(value, min, max, segments),
+    [value, min, max, segments]
+  );
+  const internalLabelId = useId();
+  const generatedId = useId();
+  const gaugeId = id || generatedId;
+  const segmentsData = useMemo2(() => {
+    return Array.from({ length: segments }, (_, index) => ({
+      isActive: currentIndex !== -1 && index <= currentIndex,
+      isCurrent: currentIndex !== -1 && index === currentIndex
+    }));
+  }, [segments, currentIndex]);
+  const contextValue = useMemo2(
+    () => ({
+      value,
+      min,
+      max,
+      segments,
+      currentIndex,
+      size,
+      intent,
+      customColor,
+      labelId: internalLabelId,
+      gaugeId
+    }),
+    [value, min, max, segments, currentIndex, size, intent, customColor, internalLabelId, gaugeId]
+  );
+  if (children) {
+    return /* @__PURE__ */ jsx4(SegmentedGaugeContext.Provider, { value: contextValue, children: children({
+      segments: segmentsData,
+      currentIndex
+    }) });
+  }
+  const roleProps = value != null ? {
+    role: "meter",
+    "aria-valuenow": value,
+    "aria-valuemin": min,
+    "aria-valuemax": max
+  } : {
+    role: "status"
+  };
+  return /* @__PURE__ */ jsx4(SegmentedGaugeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      id: gaugeId,
+      "data-spark-component": "segmented-gauge",
+      ref,
+      className: cx4("gap-md flex items-center", className),
+      ...roleProps,
+      "aria-labelledby": id ? `${gaugeId}-label` : void 0,
+      "aria-label": !id ? ariaLabel : void 0,
+      "aria-describedby": internalLabelId,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx4(SegmentedGaugeTrack, { children: segmentsData.map((_, index) => /* @__PURE__ */ jsx4(SegmentedGaugeSegment, { index }, index)) }),
+        description && /* @__PURE__ */ jsx4(SegmentedGaugeLabel, { id: internalLabelId, children: description })
+      ]
+    }
+  ) });
+};
+SegmentedGauge.displayName = "SegmentedGauge";
+
+// src/segmented-gauge/index.ts
+var SegmentedGauge2 = Object.assign(SegmentedGauge, {
+  Track: SegmentedGaugeTrack,
+  Segment: SegmentedGaugeSegment,
+  Label: SegmentedGaugeLabel
+});
+SegmentedGauge2.displayName = "SegmentedGauge";
+SegmentedGaugeTrack.displayName = "SegmentedGauge.Track";
+SegmentedGaugeSegment.displayName = "SegmentedGauge.Segment";
+SegmentedGaugeLabel.displayName = "SegmentedGauge.Label";
+export {
+  SegmentedGauge2 as SegmentedGauge
+};
+//# sourceMappingURL=index.mjs.map

package/dist/segmented-gauge/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/segmented-gauge/SegmentedGauge.tsx","../../src/segmented-gauge/SegmentedGaugeContext.tsx","../../src/segmented-gauge/SegmentedGaugeLabel.tsx","../../src/segmented-gauge/SegmentedGaugeSegment.tsx","../../src/segmented-gauge/SegmentedGaugeTrack.tsx","../../src/segmented-gauge/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo } from 'react'\n\nimport { SegmentedGaugeContext } from './SegmentedGaugeContext'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nconst calculateCurrentIndex = (\n  value: number | undefined,\n  min: number,\n  max: number,\n  segments: number\n) => {\n  // If value is undefined or null, no segment is active\n  if (value == null) {\n    return -1\n  }\n  const normalizedValue = Math.max(min, Math.min(max, value))\n  const range = max - min\n  const segmentSize = range / (segments - 1)\n  const rawIndex = (normalizedValue - min) / segmentSize\n\n  // Clamp the index to valid range\n  return Math.max(0, Math.min(segments - 1, Math.round(rawIndex)))\n}\n\nexport interface SegmentedGaugeProps {\n  /**\n   * The current value of the gauge\n   */\n  value?: number\n  /**\n   * Minimum value of the gauge (aria-valuemin)\n   */\n  min: number\n  /**\n   * Maximum value of the gauge (aria-valuemax)\n   */\n  max: number\n  /**\n   * Description text for the gauge (aria-describedby)\n   */\n  description?: string\n  /**\n   * Size of the gauge\n   */\n  size?: 'sm' | 'md'\n  /**\n   * Intent of the gauge - predefined color intent\n   */\n  intent?:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | 'neutral'\n  /**\n   * Custom color for the gauge (hex, CSS variable, etc.)\n   */\n  customColor?: string\n  /**\n   * ID of the gauge element\n   */\n  id?: string\n  /**\n   * Accessible label for the gauge (required if no id is provided)\n   */\n  'aria-label'?: string\n  /**\n   * Additional CSS classes\n   */\n  className?: string\n  /**\n   * Ref to the root element\n   */\n  ref?: Ref<HTMLDivElement>\n  /**\n   * Children render prop for custom rendering\n   */\n  children?: (props: {\n    segments: {\n      isActive: boolean\n      isCurrent: boolean\n    }[]\n    currentIndex: number\n  }) => React.ReactNode\n}\n\nexport const SegmentedGauge = ({\n  value,\n  min,\n  max,\n  description,\n  size = 'md',\n  intent = 'neutral',\n  customColor,\n  id,\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  children,\n  ...props\n}: SegmentedGaugeProps) => {\n  // Calculate segments from min and max\n  const segments = max - min + 1\n  const currentIndex = useMemo(\n    () => calculateCurrentIndex(value, min, max, segments),\n    [value, min, max, segments]\n  )\n\n  // Generate unique IDs\n  const internalLabelId = useId()\n  const generatedId = useId()\n  // Use provided id or generated one for the gauge element\n  const gaugeId = id || generatedId\n\n  const segmentsData = useMemo(() => {\n    return Array.from({ length: segments }, (_, index) => ({\n      isActive: currentIndex !== -1 && index <= currentIndex,\n      isCurrent: currentIndex !== -1 && index === currentIndex,\n    }))\n  }, [segments, currentIndex])\n\n  const contextValue = useMemo(\n    () => ({\n      value,\n      min,\n      max,\n      segments,\n      currentIndex,\n      size,\n      intent,\n      customColor,\n      labelId: internalLabelId,\n      gaugeId,\n    }),\n    [value, min, max, segments, currentIndex, size, intent, customColor, internalLabelId, gaugeId]\n  )\n\n  // If children is provided, use render prop pattern\n  if (children) {\n    return (\n      <SegmentedGaugeContext.Provider value={contextValue}>\n        {children({\n          segments: segmentsData,\n          currentIndex,\n        })}\n      </SegmentedGaugeContext.Provider>\n    )\n  }\n\n  /**\n   * A `meter` role MUST have a value. If the value is not available, the component uses a `status` role instead.\n   */\n  const roleProps =\n    value != null\n      ? {\n          role: 'meter',\n          'aria-valuenow': value,\n          'aria-valuemin': min,\n          'aria-valuemax': max,\n        }\n      : {\n          role: 'status',\n        }\n\n  // Default rendering\n  return (\n    <SegmentedGaugeContext.Provider value={contextValue}>\n      <div\n        id={gaugeId}\n        data-spark-component=\"segmented-gauge\"\n        ref={ref}\n        className={cx('gap-md flex items-center', className)}\n        {...roleProps}\n        aria-labelledby={id ? `${gaugeId}-label` : undefined}\n        aria-label={!id ? ariaLabel : undefined}\n        aria-describedby={internalLabelId}\n        {...props}\n      >\n        <SegmentedGaugeTrack>\n          {segmentsData.map((_, index) => (\n            <SegmentedGaugeSegment key={index} index={index} />\n          ))}\n        </SegmentedGaugeTrack>\n\n        {description && (\n          <SegmentedGaugeLabel id={internalLabelId}>{description}</SegmentedGaugeLabel>\n        )}\n      </div>\n    </SegmentedGaugeContext.Provider>\n  )\n}\n\nSegmentedGauge.displayName = 'SegmentedGauge'\n","import { createContext, useContext } from 'react'\n\nexport interface SegmentedGaugeContextValue {\n  value?: number\n  min: number\n  max: number\n  segments: number\n  currentIndex: number\n  size: 'sm' | 'md'\n  intent:\n    | 'main'\n    | 'support'\n    | 'basic'\n    | 'accent'\n    | 'success'\n    | 'alert'\n    | 'danger'\n    | 'info'\n    | 'neutral'\n  customColor?: string\n  labelId: string\n  gaugeId: string\n}\n\nexport const SegmentedGaugeContext = createContext<SegmentedGaugeContextValue | null>(null)\n\nexport const useSegmentedGaugeContext = () => {\n  const context = useContext(SegmentedGaugeContext)\n\n  if (!context) {\n    throw new Error('useSegmentedGaugeContext must be used within a SegmentedGauge provider')\n  }\n\n  return context\n}\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeLabelProps extends ComponentProps<'span'> {\n  ref?: Ref<HTMLSpanElement>\n  id?: string\n}\n\nexport const SegmentedGaugeLabel = ({\n  className,\n  children,\n  ref,\n  id,\n  ...props\n}: SegmentedGaugeLabelProps) => {\n  const { labelId } = useSegmentedGaugeContext()\n\n  return (\n    <span\n      data-spark-component=\"segmented-gauge-label\"\n      data-testid=\"segmented-gauge-label\"\n      ref={ref}\n      id={id || labelId}\n      className={cx('default:text-on-surface default:text-body-2', className)}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useMemo } from 'react'\n\nimport { useSegmentedGaugeContext } from './SegmentedGaugeContext'\n\nexport interface SegmentedGaugeSegmentProps extends ComponentProps<'div'> {\n  /**\n   * Index of this segment (0-based)\n   */\n  index?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeSegment = ({\n  index = 0,\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeSegmentProps) => {\n  const { size, intent, customColor, currentIndex } = useSegmentedGaugeContext()\n\n  // Calculate isActive and isCurrent from context and index\n  const isActive = currentIndex !== -1 && index <= currentIndex\n  const isCurrent = currentIndex !== -1 && index === currentIndex\n\n  const gaugeColor = useMemo(() => {\n    // If customColor is provided, use it\n    if (customColor) {\n      return customColor\n    }\n\n    // Handle predefined intents\n    switch (intent) {\n      case 'main':\n        return 'var(--color-main)'\n      case 'support':\n        return 'var(--color-support)'\n      case 'basic':\n        return 'var(--color-basic)'\n      case 'accent':\n        return 'var(--color-accent)'\n      case 'success':\n        return 'var(--color-success)'\n      case 'alert':\n        return 'var(--color-alert)'\n      case 'danger':\n        return 'var(--color-error)'\n      case 'info':\n        return 'var(--color-info)'\n      case 'neutral':\n        return 'var(--color-neutral)'\n      default:\n        return 'var(--color-neutral)'\n    }\n  }, [intent, customColor])\n\n  const segmentClasses = cx(\n    'border-outline relative rounded-full',\n    {\n      'h-sz-8 w-sz-24': size === 'sm',\n      'h-sz-12 w-sz-36': size === 'md',\n      'default:bg-[var(--gauge-color)]': isActive,\n      'border-sm bg-surface': !isActive,\n    },\n    className\n  )\n\n  const indicatorClasses = cx(\n    'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n    'default:bg-surface default:rounded-full',\n    'border-[var(--gauge-color)]',\n    {\n      'size-sz-12 border-md': size === 'sm',\n      'size-sz-20 border-lg': size === 'md',\n    }\n  )\n\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-segment\"\n      data-testid=\"segmented-gauge-segment\"\n      data-active={isActive}\n      data-current={isCurrent}\n      ref={ref}\n      style={\n        {\n          '--gauge-color': gaugeColor,\n        } as React.CSSProperties\n      }\n      className={segmentClasses}\n      {...props}\n    >\n      {children}\n      {isCurrent && <div className={indicatorClasses} aria-hidden=\"true\" />}\n    </div>\n  )\n}\n\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface SegmentedGaugeTrackProps extends ComponentProps<'div'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const SegmentedGaugeTrack = ({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedGaugeTrackProps) => {\n  return (\n    <div\n      data-spark-component=\"segmented-gauge-track\"\n      ref={ref}\n      className={cx('gap-sm relative flex rounded-full', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\n","import { SegmentedGauge as Root } from './SegmentedGauge'\nimport { SegmentedGaugeLabel } from './SegmentedGaugeLabel'\nimport { SegmentedGaugeSegment } from './SegmentedGaugeSegment'\nimport { SegmentedGaugeTrack } from './SegmentedGaugeTrack'\n\nexport const SegmentedGauge: typeof Root & {\n  Track: typeof SegmentedGaugeTrack\n  Segment: typeof SegmentedGaugeSegment\n  Label: typeof SegmentedGaugeLabel\n} = Object.assign(Root, {\n  Track: SegmentedGaugeTrack,\n  Segment: SegmentedGaugeSegment,\n  Label: SegmentedGaugeLabel,\n})\n\nSegmentedGauge.displayName = 'SegmentedGauge'\nSegmentedGaugeTrack.displayName = 'SegmentedGauge.Track'\nSegmentedGaugeSegment.displayName = 'SegmentedGauge.Segment'\nSegmentedGaugeLabel.displayName = 'SegmentedGauge.Label'\n\nexport { type SegmentedGaugeProps } from './SegmentedGauge'\nexport { type SegmentedGaugeTrackProps } from './SegmentedGaugeTrack'\nexport { type SegmentedGaugeSegmentProps } from './SegmentedGaugeSegment'\nexport { type SegmentedGaugeLabelProps } from './SegmentedGaugeLabel'\n"],"mappings":"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","names":["cx","useMemo","cx","jsx","cx","cx","jsx","jsx","jsxs","useMemo","cx","SegmentedGauge"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "10.20.10",
+  "version": "10.21.0",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -53,9 +53,9 @@
     "@react-aria/toast": "^3.0.0-beta.18",
     "@react-stately/numberfield": "3.9.11",
     "@react-stately/toast": "^3.0.0-beta.7",
-    "@spark-ui/hooks": "^10.20.10",
-    "@spark-ui/icons": "^10.20.10",
-    "@spark-ui/internal-utils": "^10.20.10",
+    "@spark-ui/hooks": "^10.21.0",
+    "@spark-ui/icons": "^10.21.0",
+    "@spark-ui/internal-utils": "^10.21.0",
     "@zag-js/pagination": "1.25.0",
     "@zag-js/react": "1.25.0",
     "class-variance-authority": "0.7.1",
@@ -82,5 +82,5 @@
     "url": "https://github.com/leboncoin/spark-web/issues?q=is%3Aopen+label%3A%22Component%3A+button%22"
   },
   "homepage": "https://sparkui.vercel.app",
-  "gitHead": "d0b9e7231a300670138114559b056274c0a2ddcb"
+  "gitHead": "f3ddd8a96745c292fc3a234936e2fc3cb945ffc7"
 }