silver-ui 0.3.0 → 0.4.0

package/dist/chunk-BCCPNGUV.js

@@ -0,0 +1,162 @@
+import { VisuallyHidden } from './chunk-7BSFKG7N.js';
+import { sva } from './chunk-IAVZKGZS.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Progress/Progress.recipe.ts
+var progressRecipe = sva({
+  slots: ["container", "header", "label", "valueLabel", "track", "fill"],
+  base: {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1",
+      w: "full",
+      minW: "12"
+    },
+    header: {
+      display: "flex",
+      alignItems: "baseline",
+      justifyContent: "space-between",
+      gap: "2"
+    },
+    label: {
+      color: "fg",
+      fontFamily: "body",
+      fontSize: "sm",
+      fontWeight: "medium",
+      lineHeight: "normal"
+    },
+    valueLabel: {
+      color: "fg.muted",
+      fontFamily: "body",
+      fontSize: "sm",
+      lineHeight: "normal",
+      whiteSpace: "nowrap"
+    },
+    track: {
+      w: "full",
+      h: "2",
+      overflow: "hidden",
+      borderRadius: "full",
+      bg: "bg.hover"
+    },
+    fill: {
+      h: "full",
+      borderRadius: "full",
+      transitionProperty: "width",
+      transitionDuration: "normal",
+      transitionTimingFunction: "default",
+      "@media (prefers-reduced-motion: reduce)": {
+        transitionDuration: "0s"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      error: { fill: { bg: "status.error.solid" } },
+      info: { fill: { bg: "status.info.solid" } },
+      neutral: { fill: { bg: "status.neutral.solid" } },
+      success: { fill: { bg: "status.success.solid" } },
+      warning: { fill: { bg: "status.warning.solid" } }
+    },
+    isDisabled: {
+      true: {
+        fill: { bg: "status.disabled.solid" },
+        label: { color: "fg.disabled" },
+        valueLabel: { color: "fg.disabled" }
+      }
+    },
+    isIndeterminate: {
+      true: {
+        fill: {
+          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"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "info",
+    isDisabled: false,
+    isIndeterminate: false
+  }
+});
+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 = 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;
+  const classes = progressRecipe({ variant, isDisabled, isIndeterminate });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(classes.container, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: [
+        !isLabelHidden || showValueLabel ? /* @__PURE__ */ jsxs("div", { className: classes.header, children: [
+          isLabelHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }) : /* @__PURE__ */ jsx("span", { className: classes.label, id: labelId, children: label }),
+          showValueLabel ? /* @__PURE__ */ jsx("span", { className: classes.valueLabel, children: valueText }) : null
+        ] }) : /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }),
+        /* @__PURE__ */ 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: classes.track,
+            role: isIndeterminate ? "progressbar" : roleProp,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classes.fill,
+                style: isIndeterminate ? void 0 : { width: `${percentage}%` }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+Progress.displayName = "Progress";
+
+export { Progress };
+//# sourceMappingURL=chunk-BCCPNGUV.js.map
+//# sourceMappingURL=chunk-BCCPNGUV.js.map

package/dist/chunk-BCCPNGUV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Progress/Progress.recipe.ts","../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","file":"chunk-BCCPNGUV.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const progressRecipe = sva({\n  slots: ['container', 'header', 'label', 'valueLabel', 'track', 'fill'],\n  base: {\n    container: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1',\n      w: 'full',\n      minW: '12',\n    },\n    header: {\n      display: 'flex',\n      alignItems: 'baseline',\n      justifyContent: 'space-between',\n      gap: '2',\n    },\n    label: {\n      color: 'fg',\n      fontFamily: 'body',\n      fontSize: 'sm',\n      fontWeight: 'medium',\n      lineHeight: 'normal',\n    },\n    valueLabel: {\n      color: 'fg.muted',\n      fontFamily: 'body',\n      fontSize: 'sm',\n      lineHeight: 'normal',\n      whiteSpace: 'nowrap',\n    },\n    track: {\n      w: 'full',\n      h: '2',\n      overflow: 'hidden',\n      borderRadius: 'full',\n      bg: 'bg.hover',\n    },\n    fill: {\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  },\n  variants: {\n    variant: {\n      error: {fill: {bg: 'status.error.solid'}},\n      info: {fill: {bg: 'status.info.solid'}},\n      neutral: {fill: {bg: 'status.neutral.solid'}},\n      success: {fill: {bg: 'status.success.solid'}},\n      warning: {fill: {bg: 'status.warning.solid'}},\n    },\n    isDisabled: {\n      true: {\n        fill: {bg: 'status.disabled.solid'},\n        label: {color: 'fg.disabled'},\n        valueLabel: {color: 'fg.disabled'},\n      },\n    },\n    isIndeterminate: {\n      true: {\n        fill: {\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      },\n    },\n  },\n  defaultVariants: {\n    variant: 'info',\n    isDisabled: false,\n    isIndeterminate: false,\n  },\n});\n\nexport type ProgressVariants = RecipeVariantProps<typeof progressRecipe>;\n","import {useId, type CSSProperties, type Ref} from 'react';\nimport {VisuallyHidden} from '../../internal/VisuallyHidden';\nimport {cx} from '../../internal/cx';\nimport {progressRecipe} 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\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  const classes = progressRecipe({variant, isDisabled, isIndeterminate});\n\n  return (\n    <div\n      className={cx(classes.container, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      {!isLabelHidden || showValueLabel ? (\n        <div className={classes.header}>\n          {isLabelHidden ? (\n            <VisuallyHidden id={labelId}>{label}</VisuallyHidden>\n          ) : (\n            <span className={classes.label} id={labelId}>\n              {label}\n            </span>\n          )}\n          {showValueLabel ? (\n            <span className={classes.valueLabel}>{valueText}</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={classes.track}\n        role={isIndeterminate ? 'progressbar' : roleProp}>\n        <div\n          className={classes.fill}\n          style={isIndeterminate ? undefined : {width: `${percentage}%`}}\n        />\n      </div>\n    </div>\n  );\n}\n\nProgress.displayName = 'Progress';\n"]}