@spark-ui/components 13.1.4 → 13.2.0

package/dist/segmented-gauge/index.mjs

@@ -1,63 +1,44 @@
-// 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) {
+import { jsx as d, jsxs as I, Fragment as P } from "react/jsx-runtime";
+import { cx as p } from "class-variance-authority";
+import { createContext as V, useContext as _, useMemo as h, useId as z } from "react";
+const k = V(null), w = () => {
+  const e = _(k);
+  if (!e)
     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
+  return e;
+}, G = ({
+  className: e,
+  children: a,
+  ref: t,
+  id: r,
+  ...o
 }) => {
-  const { labelId } = useSegmentedGaugeContext();
-  return /* @__PURE__ */ jsx(
+  const { labelId: n } = w();
+  return /* @__PURE__ */ d(
     "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
+      ref: t,
+      id: r || n,
+      className: p("default:text-on-surface default:text-body-2", e),
+      ...o,
+      children: a
     }
   );
 };
-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
+G.displayName = "SegmentedGauge.Label";
+const x = ({
+  index: e = 0,
+  className: a,
+  children: t,
+  ref: r,
+  ...o
 }) => {
-  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) {
+  const { size: n, intent: u, customColor: s, currentIndex: g } = w(), m = g !== -1 && e <= g, b = g !== -1 && e === g, f = h(() => {
+    if (s)
+      return s;
+    switch (u) {
       case "main":
         return "var(--color-main)";
       case "support":
@@ -79,169 +60,142 @@ var SegmentedGaugeSegment = ({
       default:
         return "var(--color-neutral)";
     }
-  }, [intent, customColor]);
-  const segmentClasses = cx2(
+  }, [u, s]), N = p(
     "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
+      "h-sz-8 w-sz-24": n === "sm",
+      "h-sz-12 w-sz-36": n === "md",
+      "default:bg-[var(--gauge-color)]": m,
+      "border-sm bg-surface": !m
     },
-    className
-  );
-  const indicatorClasses = cx2(
+    a
+  ), l = p(
     "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"
+      "size-sz-12 border-md": n === "sm",
+      "size-sz-20 border-lg": n === "md"
     }
   );
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ I(
     "div",
     {
       "data-spark-component": "segmented-gauge-segment",
       "data-testid": "segmented-gauge-segment",
-      "data-active": isActive,
-      "data-current": isCurrent,
-      ref,
+      "data-active": m,
+      "data-current": b,
+      ref: r,
       style: {
-        "--gauge-color": gaugeColor
+        "--gauge-color": f
       },
-      className: segmentClasses,
-      ...props,
+      className: N,
+      ...o,
       children: [
-        children,
-        isCurrent && /* @__PURE__ */ jsx2("div", { className: indicatorClasses, "aria-hidden": "true" })
+        t,
+        b && /* @__PURE__ */ d("div", { className: l, "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 { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var calculateCurrentIndex = (value, min, max, segments) => {
-  if (value == null) {
-    return -1;
+x.displayName = "SegmentedGauge.Segment";
+const y = ({
+  className: e,
+  children: a,
+  ref: t,
+  ...r
+}) => /* @__PURE__ */ d(
+  "div",
+  {
+    "data-spark-component": "segmented-gauge-track",
+    ref: t,
+    className: p("gap-sm relative flex rounded-full", e),
+    ...r,
+    children: a
   }
-  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
+);
+y.displayName = "SegmentedGauge.Track";
+const $ = (e, a, t, r) => {
+  if (e == null)
+    return -1;
+  const o = Math.max(a, Math.min(t, e)), u = (t - a) / (r - 1), s = (o - a) / u;
+  return Math.max(0, Math.min(r - 1, Math.round(s)));
+}, M = ({
+  value: e,
+  min: a,
+  max: t,
+  description: r,
+  size: o = "md",
+  intent: n = "neutral",
+  customColor: u,
+  id: s,
+  "aria-label": g,
+  className: m,
+  ref: b,
+  children: f,
+  ...N
 }) => {
-  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(
+  const l = t - a + 1, c = h(
+    () => $(e, a, t, l),
+    [e, a, t, l]
+  ), v = z(), L = z(), S = s || L, C = h(() => Array.from({ length: l }, (A, i) => ({
+    isActive: c !== -1 && i <= c,
+    isCurrent: c !== -1 && i === c
+  })), [l, c]), T = h(
     () => ({
-      value,
-      min,
-      max,
-      segments,
-      currentIndex,
-      size,
-      intent,
-      customColor,
-      labelId: internalLabelId,
-      gaugeId
+      value: e,
+      min: a,
+      max: t,
+      segments: l,
+      currentIndex: c,
+      size: o,
+      intent: n,
+      customColor: u,
+      labelId: v,
+      gaugeId: S
     }),
-    [value, min, max, segments, currentIndex, size, intent, customColor, internalLabelId, gaugeId]
-  );
-  const roleProps = value != null ? {
+    [e, a, t, l, c, o, n, u, v, S]
+  ), j = e != null ? {
     role: "meter",
-    "aria-valuenow": value,
-    "aria-valuemin": min,
-    "aria-valuemax": max
+    "aria-valuenow": e,
+    "aria-valuemin": a,
+    "aria-valuemax": t
   } : {
     role: "status"
   };
-  return /* @__PURE__ */ jsx4(SegmentedGaugeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ d(k.Provider, { value: T, children: /* @__PURE__ */ d(
     "div",
     {
-      id: gaugeId,
+      id: S,
       "data-spark-component": "segmented-gauge",
-      ref,
-      className: cx4("gap-md flex flex-wrap items-center", className),
-      ...roleProps,
-      "aria-labelledby": id ? `${gaugeId}-label` : void 0,
-      "aria-label": !id ? ariaLabel : void 0,
-      "aria-describedby": internalLabelId,
-      ...props,
-      children: children ? children({
-        segments: segmentsData,
-        currentIndex
-      }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-        /* @__PURE__ */ jsx4(SegmentedGaugeTrack, { children: segmentsData.map((_, index) => /* @__PURE__ */ jsx4(SegmentedGaugeSegment, { index }, index)) }),
-        description && /* @__PURE__ */ jsx4(SegmentedGaugeLabel, { id: internalLabelId, children: description })
+      ref: b,
+      className: p("gap-md flex flex-wrap items-center", m),
+      ...j,
+      "aria-labelledby": s ? `${S}-label` : void 0,
+      "aria-label": s ? void 0 : g,
+      "aria-describedby": v,
+      ...N,
+      children: f ? f({
+        segments: C,
+        currentIndex: c
+      }) : /* @__PURE__ */ I(P, { children: [
+        /* @__PURE__ */ d(y, { children: C.map((A, i) => /* @__PURE__ */ d(x, { index: i }, i)) }),
+        r && /* @__PURE__ */ d(G, { id: v, children: r })
       ] })
     }
   ) });
 };
-SegmentedGauge.displayName = "SegmentedGauge";
-
-// src/segmented-gauge/index.ts
-var SegmentedGauge2 = Object.assign(SegmentedGauge, {
-  Track: SegmentedGaugeTrack,
-  Segment: SegmentedGaugeSegment,
-  Label: SegmentedGaugeLabel
+M.displayName = "SegmentedGauge";
+const D = Object.assign(M, {
+  Track: y,
+  Segment: x,
+  Label: G
 });
-SegmentedGauge2.displayName = "SegmentedGauge";
-SegmentedGaugeTrack.displayName = "SegmentedGauge.Track";
-SegmentedGaugeSegment.displayName = "SegmentedGauge.Segment";
-SegmentedGaugeLabel.displayName = "SegmentedGauge.Label";
+D.displayName = "SegmentedGauge";
+y.displayName = "SegmentedGauge.Track";
+x.displayName = "SegmentedGauge.Segment";
+G.displayName = "SegmentedGauge.Label";
 export {
-  SegmentedGauge2 as SegmentedGauge
+  D as SegmentedGauge
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

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

@@ -1 +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   * Textual representation of the current value (aria-valuetext)\n   * By default, percentage is used (e.g. \"33%\")\n   */\n  'aria-valuetext'?: 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  /**\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  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 flex-wrap 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        {children ? (\n          children({\n            segments: segmentsData,\n            currentIndex,\n          })\n        ) : (\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          </>\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"]}
+{"version":3,"file":"index.mjs","sources":["../../src/segmented-gauge/SegmentedGaugeContext.tsx","../../src/segmented-gauge/SegmentedGaugeLabel.tsx","../../src/segmented-gauge/SegmentedGaugeSegment.tsx","../../src/segmented-gauge/SegmentedGaugeTrack.tsx","../../src/segmented-gauge/SegmentedGauge.tsx","../../src/segmented-gauge/index.ts"],"sourcesContent":["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 { 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   * Textual representation of the current value (aria-valuetext)\n   * By default, percentage is used (e.g. \"33%\")\n   */\n  'aria-valuetext'?: 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  /**\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  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 flex-wrap 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        {children ? (\n          children({\n            segments: segmentsData,\n            currentIndex,\n          })\n        ) : (\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          </>\n        )}\n      </div>\n    </SegmentedGaugeContext.Provider>\n  )\n}\n\nSegmentedGauge.displayName = 'SegmentedGauge'\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"],"names":["SegmentedGaugeContext","createContext","useSegmentedGaugeContext","context","useContext","SegmentedGaugeLabel","className","children","ref","id","props","labelId","jsx","cx","SegmentedGaugeSegment","index","size","intent","customColor","currentIndex","isActive","isCurrent","gaugeColor","useMemo","segmentClasses","indicatorClasses","jsxs","SegmentedGaugeTrack","calculateCurrentIndex","value","min","max","segments","normalizedValue","segmentSize","rawIndex","SegmentedGauge","description","ariaLabel","internalLabelId","useId","generatedId","gaugeId","segmentsData","_","contextValue","roleProps","Fragment","Root"],"mappings":"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"}

package/dist/select/Select.d.ts

@@ -0,0 +1,6 @@
+import { SelectContextProps } from './SelectContext';
+export type SelectProps = Omit<SelectContextProps, 'itemsComponent'>;
+export declare const Select: {
+    ({ children, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/select/SelectContext.d.ts

@@ -0,0 +1,59 @@
+import { Dispatch, PropsWithChildren, ReactElement, SetStateAction } from 'react';
+import { ItemsMap, SelectItem } from './types';
+export interface SelectContextState {
+    itemsMap: ItemsMap;
+    disabled: boolean;
+    readOnly: boolean;
+    state?: 'error' | 'alert' | 'success';
+    itemsComponent: ReactElement | undefined;
+    selectedItem: SelectItem | undefined;
+    setValue: (value: string) => void;
+    isControlled: boolean;
+    onValueChange?: (value: string) => void;
+    ariaLabel: string | undefined;
+    setAriaLabel: Dispatch<SetStateAction<string | undefined>>;
+    fieldId: string;
+    fieldLabelId: string | undefined;
+    name: string | undefined;
+    required: boolean;
+    placeholder: string | undefined;
+    setPlaceholder: Dispatch<SetStateAction<string | undefined>>;
+}
+export type SelectContextProps = PropsWithChildren<{
+    /**
+     * Use `state` prop to assign a specific state to the select, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.
+     */
+    state?: 'error' | 'alert' | 'success';
+    /**
+     * When true, prevents the user from interacting with the select.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the select as interactive or not.
+     */
+    readOnly?: boolean;
+    /**
+     * The value of the select when initially rendered. Use when you do not need to control the state of the select.
+     */
+    defaultValue?: string;
+    /**
+     * The controlled value of the select. Should be used in conjunction with `onValueChange`.
+     */
+    value?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    itemsComponent: ReactElement | undefined;
+    /**
+     * This attribute is used to specify the name of the control.
+     * If wrapped with a FormField with a name, will be inherited from it.
+     */
+    name?: string;
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+     */
+    required?: boolean;
+}>;
+export declare const SelectProvider: ({ children, defaultValue, value: valueProp, onValueChange, disabled: disabledProp, readOnly: readOnlyProp, state: stateProp, itemsComponent, name: nameProp, required: requiredProp, }: SelectContextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useSelectContext: () => SelectContextState;

package/dist/select/SelectGroup.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode, Ref } from 'react';
+interface GroupProps {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLOptGroupElement>;
+}
+export declare const Group: {
+    ({ children, ref: forwardedRef, ...props }: GroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/select/SelectItem.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'react';
+export interface ItemProps {
+    disabled?: boolean;
+    value: string;
+    children: string;
+    ref?: Ref<HTMLOptionElement>;
+}
+export declare const Item: {
+    ({ disabled, value, children, ref: forwardedRef }: ItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/select/SelectItems.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef, PropsWithChildren } from 'react';
+export declare const styles: (props?: ({
+    state?: "undefined" | "alert" | "error" | "success" | null | undefined;
+    disabled?: boolean | null | undefined;
+    readOnly?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const Items: {
+    ({ children, className, ref, ...rest }: PropsWithChildren<ComponentPropsWithRef<"select">>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/select/SelectItemsGroupContext.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+export interface SelectContextState {
+    groupLabel: string;
+    setGroupLabel: (label: string) => void;
+}
+type SelectContextProps = PropsWithChildren;
+export declare const SelectGroupProvider: ({ children }: SelectContextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useSelectGroupContext: () => SelectContextState;
+export {};

package/dist/select/SelectLabel.d.ts

@@ -0,0 +1,8 @@
+interface LabelProps {
+    children: string;
+}
+export declare const Label: {
+    ({ children }: LabelProps): null;
+    displayName: string;
+};
+export {};

package/dist/select/SelectLeadingIcon.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+export declare const LeadingIcon: {
+    ({ children }: {
+        children: ReactElement;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/select/SelectPlaceholder.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'react';
+export interface PlaceholderProps {
+    disabled?: boolean;
+    children: string;
+    ref?: Ref<HTMLOptionElement>;
+}
+export declare const Placeholder: {
+    ({ disabled, children, ref: forwardedRef, }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/select/SelectTrigger.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode, Ref } from 'react';
+interface TriggerProps {
+    'aria-label'?: string;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * This trigger acts as a fake button for the `select` tag.
+ * It is not interactive.
+ */
+export declare const Trigger: {
+    ({ "aria-label": ariaLabel, children, className, ref: forwardedRef, }: TriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/select/SelectTrigger.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const styles: (props?: ({
+    state?: "undefined" | "alert" | "error" | "success" | null | undefined;
+    disabled?: boolean | null | undefined;
+    readOnly?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/select/SelectValue.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, Ref } from 'react';
+export interface ValueProps {
+    children?: ReactNode;
+    className?: string;
+    /**
+     * Optional placeholder value for the trigger.
+     * If not specified, the value inside `Select.Placeholder` item will be used.
+     */
+    placeholder?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare const Value: {
+    ({ children, className, placeholder: customPlaceholder, ref: forwardedRef, }: ValueProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};