silver-ui 0.1.0

package/dist/chunk-JCYPM27J.js

@@ -0,0 +1,153 @@
+import { TimeInput } from './chunk-NOZ6U6ZJ.js';
+import { DateInput } from './chunk-IWSS5745.js';
+import { plainDateIsEqual } from './chunk-QSEDH7T2.js';
+import { Field } from './chunk-NGWNIMMX.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { Temporal } from '@js-temporal/polyfill';
+import { useId, useMemo, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var styles = {
+  row: css({
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr) minmax(0, 0.75fr)",
+    gap: "2"
+  })
+};
+function splitDateTime(value) {
+  if (value == null) {
+    return { date: void 0, time: void 0 };
+  }
+  return {
+    date: value.toPlainDate(),
+    time: value.toPlainTime()
+  };
+}
+function combineDateTime(date, time) {
+  if (date == null && time == null) {
+    return void 0;
+  }
+  const resolvedDate = date ?? Temporal.Now.plainDateISO();
+  const resolvedTime = time ?? Temporal.Now.plainTimeISO();
+  return resolvedDate.toPlainDateTime(resolvedTime);
+}
+function clampTime(time, min, max) {
+  if (min != null && Temporal.PlainTime.compare(time, min) < 0) {
+    return min;
+  }
+  if (max != null && Temporal.PlainTime.compare(time, max) > 0) {
+    return max;
+  }
+  return time;
+}
+function DateTimeInput({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  getIsDateDisabled,
+  hasSeconds = false,
+  size = "md",
+  description,
+  isLabelHidden = false,
+  isOptional,
+  isRequired,
+  isDisabled = false,
+  isLoading = false,
+  status,
+  labelIcon,
+  labelTooltip,
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref
+}) {
+  const fieldId = useId();
+  const { date, time } = useMemo(() => splitDateTime(value), [value]);
+  const minParts = useMemo(() => splitDateTime(min), [min]);
+  const maxParts = useMemo(() => splitDateTime(max), [max]);
+  const handleDateChange = useCallback(
+    (nextDate) => {
+      if (nextDate == null || time == null) {
+        onChange(combineDateTime(nextDate, time));
+        return;
+      }
+      const effectiveTimeMin = min != null && nextDate.equals(min.toPlainDate()) ? min.toPlainTime() : void 0;
+      const effectiveTimeMax = max != null && nextDate.equals(max.toPlainDate()) ? max.toPlainTime() : void 0;
+      onChange(
+        combineDateTime(
+          nextDate,
+          clampTime(time, effectiveTimeMin, effectiveTimeMax)
+        )
+      );
+    },
+    [onChange, time, min, max]
+  );
+  const handleTimeChange = useCallback(
+    (nextTime) => onChange(combineDateTime(date, nextTime)),
+    [onChange, date]
+  );
+  const necessity = { isOptional, isRequired };
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      description,
+      inputId: fieldId,
+      isDisabled,
+      isLabelHidden,
+      ...necessity,
+      label,
+      labelIcon,
+      labelTooltip,
+      status,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cx(styles.row, className),
+          "data-testid": dataTestId,
+          style,
+          children: [
+            /* @__PURE__ */ jsx(
+              DateInput,
+              {
+                getIsDateDisabled,
+                isDisabled,
+                isLabelHidden: true,
+                isLoading,
+                label: `${label} date`,
+                max: maxParts.date,
+                min: minParts.date,
+                onChange: handleDateChange,
+                ref,
+                size,
+                value: date
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TimeInput,
+              {
+                hasSeconds,
+                isDisabled,
+                isLabelHidden: true,
+                isLoading,
+                label: `${label} time`,
+                max: date != null && maxParts.date != null && plainDateIsEqual(date, maxParts.date) ? maxParts.time : void 0,
+                min: date != null && minParts.date != null && plainDateIsEqual(date, minParts.date) ? minParts.time : void 0,
+                onChange: handleTimeChange,
+                size,
+                value: time
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+DateTimeInput.displayName = "DateTimeInput";
+
+export { DateTimeInput };
+//# sourceMappingURL=chunk-JCYPM27J.js.map
+//# sourceMappingURL=chunk-JCYPM27J.js.map

package/dist/chunk-JCYPM27J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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","file":"chunk-JCYPM27J.js","sourcesContent":["import {Temporal} from '@js-temporal/polyfill';\nimport {\n  useCallback,\n  useId,\n  useMemo,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {plainDateIsEqual, type PlainDate} from '../../internal/plainDate';\nimport {DateInput} from '../DateInput';\nimport {\n  Field,\n  type FieldNecessity,\n  type InputSize,\n  type InputStatus,\n} from '../Field';\nimport type {IconComponent} from '../Icon';\nimport {TimeInput, type PlainTime} from '../TimeInput';\n\nexport type PlainDateTime = Temporal.PlainDateTime;\n\nexport type DateTimeInputProps = {\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Returns true for dates that should be disabled.\n   */\n  getIsDateDisabled?: (date: PlainDate) => boolean;\n  /**\n   * Supporting text rendered below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Whether to show the seconds field in the time input.\n   * @default false\n   */\n  hasSeconds?: boolean;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the input is in a loading state.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Field label text.\n   */\n  label: string;\n  /**\n   * Icon shown before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Maximum selectable date-time.\n   */\n  max?: PlainDateTime;\n  /**\n   * Minimum selectable date-time.\n   */\n  min?: PlainDateTime;\n  /**\n   * Called when the selected date-time changes.\n   */\n  onChange: (value: PlainDateTime | undefined) => void;\n  /**\n   * Ref forwarded to the date input element.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Visual size of the inputs.\n   * @default 'md'\n   */\n  size?: InputSize;\n  /**\n   * Validation status displayed below the input.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Currently selected date-time.\n   */\n  value: PlainDateTime | undefined;\n} & FieldNecessity;\n\nconst styles = {\n  row: css({\n    display: 'grid',\n    gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 0.75fr)',\n    gap: '2',\n  }),\n} as const;\n\nfunction splitDateTime(value: PlainDateTime | undefined): {\n  date: PlainDate | undefined;\n  time: PlainTime | undefined;\n} {\n  if (value == null) {\n    return {date: undefined, time: undefined};\n  }\n  return {\n    date: value.toPlainDate(),\n    time: value.toPlainTime(),\n  };\n}\n\nfunction combineDateTime(\n  date: PlainDate | undefined,\n  time: PlainTime | undefined,\n): PlainDateTime | undefined {\n  if (date == null && time == null) {\n    return undefined;\n  }\n  const resolvedDate = date ?? Temporal.Now.plainDateISO();\n  const resolvedTime = time ?? Temporal.Now.plainTimeISO();\n  return resolvedDate.toPlainDateTime(resolvedTime);\n}\n\nfunction clampTime(\n  time: PlainTime,\n  min: PlainTime | undefined,\n  max: PlainTime | undefined,\n): PlainTime {\n  if (min != null && Temporal.PlainTime.compare(time, min) < 0) {\n    return min;\n  }\n  if (max != null && Temporal.PlainTime.compare(time, max) > 0) {\n    return max;\n  }\n  return time;\n}\n\n/**\n * A combined date and time input with calendar popover and time fields.\n */\nexport function DateTimeInput({\n  label,\n  value,\n  onChange,\n  min,\n  max,\n  getIsDateDisabled,\n  hasSeconds = false,\n  size = 'md',\n  description,\n  isLabelHidden = false,\n  isOptional,\n  isRequired,\n  isDisabled = false,\n  isLoading = false,\n  status,\n  labelIcon,\n  labelTooltip,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: DateTimeInputProps): React.JSX.Element {\n  const fieldId = useId();\n  const {date, time} = useMemo(() => splitDateTime(value), [value]);\n  const minParts = useMemo(() => splitDateTime(min), [min]);\n  const maxParts = useMemo(() => splitDateTime(max), [max]);\n\n  const handleDateChange = useCallback(\n    (nextDate: PlainDate | undefined) => {\n      if (nextDate == null || time == null) {\n        onChange(combineDateTime(nextDate, time));\n        return;\n      }\n      const effectiveTimeMin =\n        min != null && nextDate.equals(min.toPlainDate())\n          ? min.toPlainTime()\n          : undefined;\n      const effectiveTimeMax =\n        max != null && nextDate.equals(max.toPlainDate())\n          ? max.toPlainTime()\n          : undefined;\n      onChange(\n        combineDateTime(\n          nextDate,\n          clampTime(time, effectiveTimeMin, effectiveTimeMax),\n        ),\n      );\n    },\n    [onChange, time, min, max],\n  );\n  const handleTimeChange = useCallback(\n    (nextTime: PlainTime | undefined) =>\n      onChange(combineDateTime(date, nextTime)),\n    [onChange, date],\n  );\n\n  const necessity: FieldNecessity = {isOptional, isRequired};\n\n  return (\n    <Field\n      description={description}\n      inputId={fieldId}\n      isDisabled={isDisabled}\n      isLabelHidden={isLabelHidden}\n      {...necessity}\n      label={label}\n      labelIcon={labelIcon}\n      labelTooltip={labelTooltip}\n      status={status}>\n      <div\n        className={cx(styles.row, className)}\n        data-testid={dataTestId}\n        style={style}>\n        <DateInput\n          getIsDateDisabled={getIsDateDisabled}\n          isDisabled={isDisabled}\n          isLabelHidden\n          isLoading={isLoading}\n          label={`${label} date`}\n          max={maxParts.date}\n          min={minParts.date}\n          onChange={handleDateChange}\n          ref={ref}\n          size={size}\n          value={date}\n        />\n        <TimeInput\n          hasSeconds={hasSeconds}\n          isDisabled={isDisabled}\n          isLabelHidden\n          isLoading={isLoading}\n          label={`${label} time`}\n          max={\n            date != null &&\n            maxParts.date != null &&\n            plainDateIsEqual(date, maxParts.date)\n              ? maxParts.time\n              : undefined\n          }\n          min={\n            date != null &&\n            minParts.date != null &&\n            plainDateIsEqual(date, minParts.date)\n              ? minParts.time\n              : undefined\n          }\n          onChange={handleTimeChange}\n          size={size}\n          value={time}\n        />\n      </div>\n    </Field>\n  );\n}\n\nDateTimeInput.displayName = 'DateTimeInput';\n"]}

package/dist/chunk-K574UTWP.cjs

@@ -0,0 +1,182 @@
+'use strict';
+
+var chunk2QM5XBX4_cjs = require('./chunk-2QM5XBX4.cjs');
+var chunkJAX62FUE_cjs = require('./chunk-JAX62FUE.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Progress/Progress.recipe.ts
+var progressFillRecipe = chunkJAX62FUE_cjs.cva({
+  base: {
+    h: "full",
+    borderRadius: "full",
+    transitionProperty: "width",
+    transitionDuration: "normal",
+    transitionTimingFunction: "default",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0s"
+    }
+  },
+  variants: {
+    variant: {
+      error: { bg: "status.error.solid" },
+      info: { bg: "status.info.solid" },
+      neutral: { bg: "status.neutral.solid" },
+      success: { bg: "status.success.solid" },
+      warning: { bg: "status.warning.solid" }
+    },
+    isDisabled: {
+      true: { bg: "status.disabled.solid" },
+      false: {}
+    },
+    isIndeterminate: {
+      true: {
+        w: "40%",
+        animation: "pulse 1.5s ease-in-out infinite",
+        transitionProperty: "none",
+        transitionDuration: "0s",
+        "@media (prefers-reduced-motion: reduce)": {
+          animation: "pulse 3s ease-in-out infinite"
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    variant: "info",
+    isDisabled: false,
+    isIndeterminate: false
+  }
+});
+var styles = {
+  container: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "1",
+    w: "full",
+    minW: "12"
+  }),
+  header: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    alignItems: "baseline",
+    justifyContent: "space-between",
+    gap: "2"
+  }),
+  label: chunkAZDWQGAX_cjs.css({
+    color: "fg",
+    fontFamily: "body",
+    fontSize: "sm",
+    fontWeight: "medium",
+    lineHeight: "normal"
+  }),
+  disabledText: chunkAZDWQGAX_cjs.css({
+    color: "fg.disabled"
+  }),
+  valueLabel: chunkAZDWQGAX_cjs.css({
+    color: "fg.muted",
+    fontFamily: "body",
+    fontSize: "sm",
+    lineHeight: "normal",
+    whiteSpace: "nowrap"
+  }),
+  track: chunkAZDWQGAX_cjs.css({
+    w: "full",
+    h: "2",
+    overflow: "hidden",
+    borderRadius: "full",
+    bg: "bg.hover"
+  })
+};
+function defaultFormatValueLabel(value, max) {
+  if (max <= 0) {
+    return "0%";
+  }
+  return `${Math.round(value / max * 100)}%`;
+}
+function Progress({
+  className,
+  "data-testid": dataTestId,
+  formatValueLabel = defaultFormatValueLabel,
+  hasValueLabel = false,
+  isDisabled = false,
+  isIndeterminate = false,
+  isLabelHidden = false,
+  label,
+  max = 100,
+  ref,
+  role: roleProp = "progressbar",
+  style,
+  value = 0,
+  variant = "info"
+}) {
+  const labelId = react.useId();
+  if (process.env.NODE_ENV !== "production" && max <= 0) {
+    console.warn("Progress: `max` must be greater than 0.");
+  }
+  const clampedValue = Math.min(Math.max(0, value), max);
+  const percentage = max > 0 ? clampedValue / max * 100 : 0;
+  const valueText = formatValueLabel(clampedValue, max);
+  const showValueLabel = hasValueLabel && !isIndeterminate;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkSPDVNY2Z_cjs.cx(styles.container, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: [
+        !isLabelHidden || showValueLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
+          isLabelHidden ? /* @__PURE__ */ jsxRuntime.jsx(chunk2QM5XBX4_cjs.VisuallyHidden, { id: labelId, children: label }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chunkSPDVNY2Z_cjs.cx(
+                styles.label,
+                isDisabled ? styles.disabledText : void 0
+              ),
+              id: labelId,
+              children: label
+            }
+          ),
+          showValueLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chunkSPDVNY2Z_cjs.cx(
+                styles.valueLabel,
+                isDisabled ? styles.disabledText : void 0
+              ),
+              children: valueText
+            }
+          ) : null
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(chunk2QM5XBX4_cjs.VisuallyHidden, { id: labelId, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-disabled": isDisabled || void 0,
+            "aria-labelledby": labelId,
+            "aria-valuemax": isIndeterminate ? void 0 : max,
+            "aria-valuemin": isIndeterminate ? void 0 : 0,
+            "aria-valuenow": isIndeterminate ? void 0 : clampedValue,
+            "aria-valuetext": isIndeterminate ? void 0 : valueText,
+            className: styles.track,
+            role: isIndeterminate ? "progressbar" : roleProp,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: progressFillRecipe({ variant, isDisabled, isIndeterminate }),
+                style: isIndeterminate ? void 0 : { width: `${percentage}%` }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+Progress.displayName = "Progress";
+
+exports.Progress = Progress;
+exports.progressFillRecipe = progressFillRecipe;
+//# sourceMappingURL=chunk-K574UTWP.cjs.map
+//# sourceMappingURL=chunk-K574UTWP.cjs.map

package/dist/chunk-K574UTWP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Progress/Progress.recipe.ts","../src/components/Progress/Progress.tsx"],"names":["cva","css","useId","jsxs","cx","jsx","VisuallyHidden"],"mappings":";;;;;;;;;;AAEO,IAAM,qBAAqBA,qBAAA,CAAI;AAAA,EACpC,IAAA,EAAM;AAAA,IACJ,CAAA,EAAG,MAAA;AAAA,IACH,YAAA,EAAc,MAAA;AAAA,IACd,kBAAA,EAAoB,OAAA;AAAA,IACpB,kBAAA,EAAoB,QAAA;AAAA,IACpB,wBAAA,EAA0B,SAAA;AAAA,IAC1B,yCAAA,EAA2C;AAAA,MACzC,kBAAA,EAAoB;AAAA;AACtB,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,EAAC,EAAA,EAAI,oBAAA,EAAoB;AAAA,MAChC,IAAA,EAAM,EAAC,EAAA,EAAI,mBAAA,EAAmB;AAAA,MAC9B,OAAA,EAAS,EAAC,EAAA,EAAI,sBAAA,EAAsB;AAAA,MACpC,OAAA,EAAS,EAAC,EAAA,EAAI,sBAAA,EAAsB;AAAA,MACpC,OAAA,EAAS,EAAC,EAAA,EAAI,sBAAA;AAAsB,KACtC;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,EAAC,EAAA,EAAI,uBAAA,EAAuB;AAAA,MAClC,OAAO;AAAC,KACV;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA,QACJ,CAAA,EAAG,KAAA;AAAA,QACH,SAAA,EAAW,iCAAA;AAAA,QACX,kBAAA,EAAoB,MAAA;AAAA,QACpB,kBAAA,EAAoB,IAAA;AAAA,QACpB,yCAAA,EAA2C;AAAA,UACzC,SAAA,EAAW;AAAA;AACb,OACF;AAAA,MACA,OAAO;AAAC;AACV,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,KAAA;AAAA,IACZ,eAAA,EAAiB;AAAA;AAErB,CAAC;ACsCD,IAAM,MAAA,GAAS;AAAA,EACb,WAAWC,qBAAA,CAAI;AAAA,IACb,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,QAAA;AAAA,IACf,GAAA,EAAK,GAAA;AAAA,IACL,CAAA,EAAG,MAAA;AAAA,IACH,IAAA,EAAM;AAAA,GACP,CAAA;AAAA,EACD,QAAQA,qBAAA,CAAI;AAAA,IACV,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,UAAA;AAAA,IACZ,cAAA,EAAgB,eAAA;AAAA,IAChB,GAAA,EAAK;AAAA,GACN,CAAA;AAAA,EACD,OAAOA,qBAAA,CAAI;AAAA,IACT,KAAA,EAAO,IAAA;AAAA,IACP,UAAA,EAAY,MAAA;AAAA,IACZ,QAAA,EAAU,IAAA;AAAA,IACV,UAAA,EAAY,QAAA;AAAA,IACZ,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,cAAcA,qBAAA,CAAI;AAAA,IAChB,KAAA,EAAO;AAAA,GACR,CAAA;AAAA,EACD,YAAYA,qBAAA,CAAI;AAAA,IACd,KAAA,EAAO,UAAA;AAAA,IACP,UAAA,EAAY,MAAA;AAAA,IACZ,QAAA,EAAU,IAAA;AAAA,IACV,UAAA,EAAY,QAAA;AAAA,IACZ,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,OAAOA,qBAAA,CAAI;AAAA,IACT,CAAA,EAAG,MAAA;AAAA,IACH,CAAA,EAAG,GAAA;AAAA,IACH,QAAA,EAAU,QAAA;AAAA,IACV,YAAA,EAAc,MAAA;AAAA,IACd,EAAA,EAAI;AAAA,GACL;AACH,CAAA;AAEA,SAAS,uBAAA,CAAwB,OAAe,GAAA,EAAqB;AACnE,EAAA,IAAI,OAAO,CAAA,EAAG;AACZ,IAAA,OAAO,IAAA;AAAA,EACT;AACA,EAAA,OAAO,GAAG,IAAA,CAAK,KAAA,CAAO,KAAA,GAAQ,GAAA,GAAO,GAAG,CAAC,CAAA,CAAA,CAAA;AAC3C;AAKO,SAAS,QAAA,CAAS;AAAA,EACvB,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,gBAAA,GAAmB,uBAAA;AAAA,EACnB,aAAA,GAAgB,KAAA;AAAA,EAChB,UAAA,GAAa,KAAA;AAAA,EACb,eAAA,GAAkB,KAAA;AAAA,EAClB,aAAA,GAAgB,KAAA;AAAA,EAChB,KAAA;AAAA,EACA,GAAA,GAAM,GAAA;AAAA,EACN,GAAA;AAAA,EACA,MAAM,QAAA,GAAW,aAAA;AAAA,EACjB,KAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,OAAA,GAAU;AACZ,CAAA,EAAqC;AACnC,EAAA,MAAM,UAAUC,WAAA,EAAM;AAEtB,EAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,IAAgB,OAAO,CAAA,EAAG;AACrD,IAAA,OAAA,CAAQ,KAAK,yCAAyC,CAAA;AAAA,EACxD;AAEA,EAAA,MAAM,YAAA,GAAe,KAAK,GAAA,CAAI,IAAA,CAAK,IAAI,CAAA,EAAG,KAAK,GAAG,GAAG,CAAA;AACrD,EAAA,MAAM,UAAA,GAAa,GAAA,GAAM,CAAA,GAAK,YAAA,GAAe,MAAO,GAAA,GAAM,CAAA;AAC1D,EAAA,MAAM,SAAA,GAAY,gBAAA,CAAiB,YAAA,EAAc,GAAG,CAAA;AACpD,EAAA,MAAM,cAAA,GAAiB,iBAAiB,CAAC,eAAA;AAEzC,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,oBAAA,CAAG,MAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAAA,MACzC,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,KAAA;AAAA,MACC,QAAA,EAAA;AAAA,QAAA,CAAC,iBAAiB,cAAA,mBACjBD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,MAAA,EACpB,QAAA,EAAA;AAAA,UAAA,aAAA,mBACCE,cAAA,CAACC,gCAAA,EAAA,EAAe,EAAA,EAAI,OAAA,EAAU,iBAAM,CAAA,mBAEpCD,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWD,oBAAA;AAAA,gBACT,MAAA,CAAO,KAAA;AAAA,gBACP,UAAA,GAAa,OAAO,YAAA,GAAe;AAAA,eACrC;AAAA,cACA,EAAA,EAAI,OAAA;AAAA,cACH,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED,cAAA,mBACCC,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWD,oBAAA;AAAA,gBACT,MAAA,CAAO,UAAA;AAAA,gBACP,UAAA,GAAa,OAAO,YAAA,GAAe;AAAA,eACrC;AAAA,cACC,QAAA,EAAA;AAAA;AAAA,WACH,GACE;AAAA,SAAA,EACN,CAAA,mBAEAC,cAAA,CAACC,gCAAA,EAAA,EAAe,EAAA,EAAI,SAAU,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBAGtCD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,iBAAe,UAAA,IAAc,MAAA;AAAA,YAC7B,iBAAA,EAAiB,OAAA;AAAA,YACjB,eAAA,EAAe,kBAAkB,MAAA,GAAY,GAAA;AAAA,YAC7C,eAAA,EAAe,kBAAkB,MAAA,GAAY,CAAA;AAAA,YAC7C,eAAA,EAAe,kBAAkB,MAAA,GAAY,YAAA;AAAA,YAC7C,gBAAA,EAAgB,kBAAkB,MAAA,GAAY,SAAA;AAAA,YAC9C,WAAW,MAAA,CAAO,KAAA;AAAA,YAClB,IAAA,EAAM,kBAAkB,aAAA,GAAgB,QAAA;AAAA,YACxC,QAAA,kBAAAA,cAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,WAAW,kBAAA,CAAmB,EAAC,OAAA,EAAS,UAAA,EAAY,iBAAgB,CAAA;AAAA,gBACpE,OAAO,eAAA,GAAkB,MAAA,GAAY,EAAC,KAAA,EAAO,CAAA,EAAG,UAAU,CAAA,CAAA,CAAA;AAAG;AAAA;AAC/D;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-K574UTWP.cjs","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const progressFillRecipe = cva({\n  base: {\n    h: 'full',\n    borderRadius: 'full',\n    transitionProperty: 'width',\n    transitionDuration: 'normal',\n    transitionTimingFunction: 'default',\n    '@media (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0s',\n    },\n  },\n  variants: {\n    variant: {\n      error: {bg: 'status.error.solid'},\n      info: {bg: 'status.info.solid'},\n      neutral: {bg: 'status.neutral.solid'},\n      success: {bg: 'status.success.solid'},\n      warning: {bg: 'status.warning.solid'},\n    },\n    isDisabled: {\n      true: {bg: 'status.disabled.solid'},\n      false: {},\n    },\n    isIndeterminate: {\n      true: {\n        w: '40%',\n        animation: 'pulse 1.5s ease-in-out infinite',\n        transitionProperty: 'none',\n        transitionDuration: '0s',\n        '@media (prefers-reduced-motion: reduce)': {\n          animation: 'pulse 3s ease-in-out infinite',\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    variant: 'info',\n    isDisabled: false,\n    isIndeterminate: false,\n  },\n});\n\nexport type ProgressFillVariants = RecipeVariantProps<\n  typeof progressFillRecipe\n>;\n","import {useId, type CSSProperties, type Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {VisuallyHidden} from '../../internal/VisuallyHidden';\nimport {cx} from '../../internal/cx';\nimport {progressFillRecipe} from './Progress.recipe';\n\nexport type ProgressVariant =\n  | 'error'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'warning';\n\nexport interface ProgressProps {\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Custom formatter for the value label and aria-valuetext.\n   */\n  formatValueLabel?: (value: number, max: number) => string;\n  /**\n   * Whether to display the formatted value beside the label.\n   * @default false\n   */\n  hasValueLabel?: boolean;\n  /**\n   * Whether the progress bar is visually disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to render an indeterminate loading indicator.\n   * @default false\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Accessible label for the progress bar.\n   */\n  label: string;\n  /**\n   * Maximum progress value.\n   * @default 100\n   */\n  max?: number;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * ARIA role for the progress indicator. Use 'progressbar' for task\n   * completion and 'meter' for static gauges.\n   * @default 'progressbar'\n   */\n  role?: 'meter' | 'progressbar';\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Current progress value.\n   * @default 0\n   */\n  value?: number;\n  /**\n   * Semantic color variant.\n   * @default 'info'\n   */\n  variant?: ProgressVariant;\n}\n\nconst styles = {\n  container: css({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '1',\n    w: 'full',\n    minW: '12',\n  }),\n  header: css({\n    display: 'flex',\n    alignItems: 'baseline',\n    justifyContent: 'space-between',\n    gap: '2',\n  }),\n  label: css({\n    color: 'fg',\n    fontFamily: 'body',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    lineHeight: 'normal',\n  }),\n  disabledText: css({\n    color: 'fg.disabled',\n  }),\n  valueLabel: css({\n    color: 'fg.muted',\n    fontFamily: 'body',\n    fontSize: 'sm',\n    lineHeight: 'normal',\n    whiteSpace: 'nowrap',\n  }),\n  track: css({\n    w: 'full',\n    h: '2',\n    overflow: 'hidden',\n    borderRadius: 'full',\n    bg: 'bg.hover',\n  }),\n} as const;\n\nfunction defaultFormatValueLabel(value: number, max: number): string {\n  if (max <= 0) {\n    return '0%';\n  }\n  return `${Math.round((value / max) * 100)}%`;\n}\n\n/**\n * A progress bar that communicates determinate or indeterminate loading state.\n */\nexport function Progress({\n  className,\n  'data-testid': dataTestId,\n  formatValueLabel = defaultFormatValueLabel,\n  hasValueLabel = false,\n  isDisabled = false,\n  isIndeterminate = false,\n  isLabelHidden = false,\n  label,\n  max = 100,\n  ref,\n  role: roleProp = 'progressbar',\n  style,\n  value = 0,\n  variant = 'info',\n}: ProgressProps): React.JSX.Element {\n  const labelId = useId();\n\n  if (process.env.NODE_ENV !== 'production' && max <= 0) {\n    console.warn('Progress: `max` must be greater than 0.');\n  }\n\n  const clampedValue = Math.min(Math.max(0, value), max);\n  const percentage = max > 0 ? (clampedValue / max) * 100 : 0;\n  const valueText = formatValueLabel(clampedValue, max);\n  const showValueLabel = hasValueLabel && !isIndeterminate;\n\n  return (\n    <div\n      className={cx(styles.container, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      {!isLabelHidden || showValueLabel ? (\n        <div className={styles.header}>\n          {isLabelHidden ? (\n            <VisuallyHidden id={labelId}>{label}</VisuallyHidden>\n          ) : (\n            <span\n              className={cx(\n                styles.label,\n                isDisabled ? styles.disabledText : undefined,\n              )}\n              id={labelId}>\n              {label}\n            </span>\n          )}\n          {showValueLabel ? (\n            <span\n              className={cx(\n                styles.valueLabel,\n                isDisabled ? styles.disabledText : undefined,\n              )}>\n              {valueText}\n            </span>\n          ) : null}\n        </div>\n      ) : (\n        <VisuallyHidden id={labelId}>{label}</VisuallyHidden>\n      )}\n\n      <div\n        aria-disabled={isDisabled || undefined}\n        aria-labelledby={labelId}\n        aria-valuemax={isIndeterminate ? undefined : max}\n        aria-valuemin={isIndeterminate ? undefined : 0}\n        aria-valuenow={isIndeterminate ? undefined : clampedValue}\n        aria-valuetext={isIndeterminate ? undefined : valueText}\n        className={styles.track}\n        role={isIndeterminate ? 'progressbar' : roleProp}>\n        <div\n          className={progressFillRecipe({variant, isDisabled, isIndeterminate})}\n          style={isIndeterminate ? undefined : {width: `${percentage}%`}}\n        />\n      </div>\n    </div>\n  );\n}\n\nProgress.displayName = 'Progress';\n"]}

package/dist/chunk-KLMODPEE.js

@@ -0,0 +1,8 @@
+// src/internal/toPixelSize.ts
+function toPixelSize(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+
+export { toPixelSize };
+//# sourceMappingURL=chunk-KLMODPEE.js.map
+//# sourceMappingURL=chunk-KLMODPEE.js.map

package/dist/chunk-KLMODPEE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/toPixelSize.ts"],"names":[],"mappings":";AAEO,SAAS,YACd,KAAA,EAC6B;AAC7B,EAAA,OAAO,OAAO,KAAA,KAAU,QAAA,GAAW,CAAA,EAAG,KAAK,CAAA,EAAA,CAAA,GAAO,KAAA;AACpD","file":"chunk-KLMODPEE.js","sourcesContent":["export type SizeValue = number | string;\n\nexport function toPixelSize(\n  value: SizeValue | undefined,\n): string | number | undefined {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n"]}