silver-ui 0.1.0

package/dist/chunk-3DE4GOZU.js

@@ -0,0 +1,207 @@
+import { Skeleton } from './chunk-U35V3GVC.js';
+import { Button } from './chunk-VLIQPSPM.js';
+import { Spinner } from './chunk-RGPL6EDK.js';
+import { Tooltip } from './chunk-EB5EHX6I.js';
+import { Icon } from './chunk-4W7L63LH.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { X, ImageIcon } from 'lucide-react';
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var styles = {
+  root: css({
+    position: "relative",
+    display: "inline-flex",
+    flexDirection: "column",
+    w: "16",
+    flexShrink: 0,
+    isolation: "isolate"
+  }),
+  disabled: css({
+    opacity: 0.5,
+    pointerEvents: "none"
+  }),
+  imageContainer: css({
+    position: "relative",
+    w: "full",
+    aspectRatio: "1",
+    borderRadius: "md",
+    overflow: "hidden",
+    bg: "surface.gray"
+  }),
+  interactive: css({
+    cursor: "pointer",
+    transitionProperty: "opacity, box-shadow",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default",
+    _hover: {
+      boxShadow: "lg",
+      opacity: 0.9
+    },
+    _active: {
+      opacity: 0.75
+    },
+    "&:has(:focus-visible)": {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset"
+    }
+  }),
+  imageButton: css({
+    all: "unset",
+    display: "block",
+    w: "full",
+    h: "full",
+    cursor: "pointer",
+    borderRadius: "inherit",
+    overflow: "hidden"
+  }),
+  image: css({
+    display: "block",
+    w: "full",
+    h: "full",
+    objectFit: "cover"
+  }),
+  placeholder: css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    w: "full",
+    h: "full",
+    color: "fg.muted"
+  }),
+  insetBorder: css({
+    position: "absolute",
+    inset: 0,
+    borderRadius: "inherit",
+    boxShadow: "inset 0 0 0 1px token(colors.border.emphasized)",
+    pointerEvents: "none"
+  }),
+  remove: css({
+    position: "absolute",
+    top: "1",
+    right: "1",
+    zIndex: 1,
+    color: "fg.onPrimary"
+  }),
+  overlay: css({
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    bg: "overlay.scrim.subtle",
+    borderRadius: "inherit",
+    zIndex: 1
+  })
+};
+function ThumbnailImageArea({
+  accessibleName,
+  alt,
+  isDisabled,
+  isLoading = false,
+  onClick,
+  onRemove,
+  src
+}) {
+  const [hasImageError, setHasImageError] = useState(false);
+  const hasImage = src != null && !hasImageError;
+  const isInteractive = onClick != null && !isDisabled && !isLoading;
+  const imageContent = isLoading && !hasImage ? /* @__PURE__ */ jsx(Skeleton, { radius: 2 }) : hasImage ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      alt: alt ?? "",
+      className: styles.image,
+      onError: () => setHasImageError(true),
+      src
+    }
+  ) : /* @__PURE__ */ jsx("div", { className: styles.placeholder, children: /* @__PURE__ */ jsx(Icon, { icon: ImageIcon, size: "lg" }) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        styles.imageContainer,
+        isInteractive ? styles.interactive : void 0
+      ),
+      children: [
+        isInteractive ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": `Open ${accessibleName}`,
+            className: styles.imageButton,
+            onClick,
+            type: "button",
+            children: imageContent
+          }
+        ) : imageContent,
+        hasImage ? /* @__PURE__ */ jsx("div", { className: styles.insetBorder }) : null,
+        isLoading && hasImage ? /* @__PURE__ */ jsx("div", { className: styles.overlay, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "onMedia" }) }) : null,
+        onRemove != null && !isDisabled ? /* @__PURE__ */ jsx("div", { className: styles.remove, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: X,
+            isIconOnly: true,
+            label: `Remove ${accessibleName}`,
+            onClick: (event) => {
+              event.stopPropagation();
+              onRemove(event);
+            },
+            size: "sm",
+            variant: "onSolid"
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+function Thumbnail({
+  alt,
+  className,
+  "data-testid": dataTestId,
+  isDisabled = false,
+  isLoading = false,
+  label,
+  onClick,
+  onRemove,
+  ref,
+  src,
+  style
+}) {
+  const accessibleName = label ?? alt ?? "thumbnail";
+  const thumbnail = /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-busy": isLoading || void 0,
+      "aria-label": accessibleName,
+      className: cx(
+        styles.root,
+        isDisabled ? styles.disabled : void 0,
+        className
+      ),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: /* @__PURE__ */ jsx(
+        ThumbnailImageArea,
+        {
+          accessibleName,
+          alt,
+          isDisabled,
+          isLoading,
+          onClick,
+          onRemove,
+          src
+        },
+        src ?? "empty"
+      )
+    }
+  );
+  return label != null ? /* @__PURE__ */ jsx(Tooltip, { content: label, children: thumbnail }) : thumbnail;
+}
+Thumbnail.displayName = "Thumbnail";
+
+export { Thumbnail };
+//# sourceMappingURL=chunk-3DE4GOZU.js.map
+//# sourceMappingURL=chunk-3DE4GOZU.js.map

package/dist/chunk-3DE4GOZU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"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","file":"chunk-3DE4GOZU.js","sourcesContent":["import {ImageIcon, X} from 'lucide-react';\nimport {useState, type CSSProperties, type MouseEvent, type Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {Button} from '../Button';\nimport {Icon} from '../Icon';\nimport {Skeleton} from '../Skeleton';\nimport {Spinner} from '../Spinner';\nimport {Tooltip} from '../Tooltip';\n\nexport interface ThumbnailProps {\n  /**\n   * Alt text describing the image content. Use `label` for a file name or\n   * action label shown in the tooltip and button accessible names.\n   */\n  alt?: string;\n  /**\n   * Additional CSS class names applied to the root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether the thumbnail is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the thumbnail is loading.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * File name or short item label used for the root accessible name, tooltip,\n   * and open/remove button labels. When omitted, `alt` is used as a fallback.\n   */\n  label?: string;\n  /**\n   * Called when the thumbnail image area is clicked.\n   */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Called when the remove button is clicked.\n   */\n  onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Image source.\n   */\n  src?: string;\n  /**\n   * Inline styles applied to the root.\n   */\n  style?: CSSProperties;\n}\n\nconst styles = {\n  root: css({\n    position: 'relative',\n    display: 'inline-flex',\n    flexDirection: 'column',\n    w: '16',\n    flexShrink: 0,\n    isolation: 'isolate',\n  }),\n  disabled: css({\n    opacity: 0.5,\n    pointerEvents: 'none',\n  }),\n  imageContainer: css({\n    position: 'relative',\n    w: 'full',\n    aspectRatio: '1',\n    borderRadius: 'md',\n    overflow: 'hidden',\n    bg: 'surface.gray',\n  }),\n  interactive: css({\n    cursor: 'pointer',\n    transitionProperty: 'opacity, box-shadow',\n    transitionDuration: 'fast',\n    transitionTimingFunction: 'default',\n    _hover: {\n      boxShadow: 'lg',\n      opacity: 0.9,\n    },\n    _active: {\n      opacity: 0.75,\n    },\n    '&:has(:focus-visible)': {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffset',\n    },\n  }),\n  imageButton: css({\n    all: 'unset',\n    display: 'block',\n    w: 'full',\n    h: 'full',\n    cursor: 'pointer',\n    borderRadius: 'inherit',\n    overflow: 'hidden',\n  }),\n  image: css({\n    display: 'block',\n    w: 'full',\n    h: 'full',\n    objectFit: 'cover',\n  }),\n  placeholder: css({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    w: 'full',\n    h: 'full',\n    color: 'fg.muted',\n  }),\n  insetBorder: css({\n    position: 'absolute',\n    inset: 0,\n    borderRadius: 'inherit',\n    boxShadow: 'inset 0 0 0 1px token(colors.border.emphasized)',\n    pointerEvents: 'none',\n  }),\n  remove: css({\n    position: 'absolute',\n    top: '1',\n    right: '1',\n    zIndex: 1,\n    color: 'fg.onPrimary',\n  }),\n  overlay: css({\n    position: 'absolute',\n    inset: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    bg: 'overlay.scrim.subtle',\n    borderRadius: 'inherit',\n    zIndex: 1,\n  }),\n} as const;\n\ntype ThumbnailImageAreaProps = Pick<\n  ThumbnailProps,\n  'alt' | 'isLoading' | 'onClick' | 'onRemove' | 'src'\n> & {\n  accessibleName: string;\n  isDisabled: boolean;\n};\n\nfunction ThumbnailImageArea({\n  accessibleName,\n  alt,\n  isDisabled,\n  isLoading = false,\n  onClick,\n  onRemove,\n  src,\n}: ThumbnailImageAreaProps): React.JSX.Element {\n  const [hasImageError, setHasImageError] = useState(false);\n  const hasImage = src != null && !hasImageError;\n  const isInteractive = onClick != null && !isDisabled && !isLoading;\n  const imageContent =\n    isLoading && !hasImage ? (\n      <Skeleton radius={2} />\n    ) : hasImage ? (\n      <img\n        alt={alt ?? ''}\n        className={styles.image}\n        onError={() => setHasImageError(true)}\n        src={src}\n      />\n    ) : (\n      <div className={styles.placeholder}>\n        <Icon icon={ImageIcon} size=\"lg\" />\n      </div>\n    );\n\n  return (\n    <div\n      className={cx(\n        styles.imageContainer,\n        isInteractive ? styles.interactive : undefined,\n      )}>\n      {isInteractive ? (\n        <button\n          aria-label={`Open ${accessibleName}`}\n          className={styles.imageButton}\n          onClick={onClick}\n          type=\"button\">\n          {imageContent}\n        </button>\n      ) : (\n        imageContent\n      )}\n      {hasImage ? <div className={styles.insetBorder} /> : null}\n      {isLoading && hasImage ? (\n        <div className={styles.overlay}>\n          <Spinner size=\"sm\" variant=\"onMedia\" />\n        </div>\n      ) : null}\n      {onRemove != null && !isDisabled ? (\n        <div className={styles.remove}>\n          <Button\n            icon={X}\n            isIconOnly\n            label={`Remove ${accessibleName}`}\n            onClick={event => {\n              event.stopPropagation();\n              onRemove(event as MouseEvent<HTMLButtonElement>);\n            }}\n            size=\"sm\"\n            variant=\"onSolid\"\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Square image preview for attachments and media.\n */\nexport function Thumbnail({\n  alt,\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  isLoading = false,\n  label,\n  onClick,\n  onRemove,\n  ref,\n  src,\n  style,\n}: ThumbnailProps): React.JSX.Element {\n  const accessibleName = label ?? alt ?? 'thumbnail';\n\n  const thumbnail = (\n    <div\n      aria-busy={isLoading || undefined}\n      aria-label={accessibleName}\n      className={cx(\n        styles.root,\n        isDisabled ? styles.disabled : undefined,\n        className,\n      )}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      <ThumbnailImageArea\n        accessibleName={accessibleName}\n        alt={alt}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        key={src ?? 'empty'}\n        onClick={onClick}\n        onRemove={onRemove}\n        src={src}\n      />\n    </div>\n  );\n\n  return label != null ? (\n    <Tooltip content={label}>{thumbnail}</Tooltip>\n  ) : (\n    thumbnail\n  );\n}\n\nThumbnail.displayName = 'Thumbnail';\n"]}

package/dist/chunk-3L3M7SJ3.js

@@ -0,0 +1,24 @@
+import { Icon } from './chunk-4W7L63LH.js';
+import { CheckCircle2, CircleAlert, CircleX } from 'lucide-react';
+import { jsx } from 'react/jsx-runtime';
+
+function getDescribedBy(...ids) {
+  const filtered = ids.filter(Boolean);
+  return filtered.length > 0 ? filtered.join(" ") : void 0;
+}
+function getStatusMessageID(inputId, status) {
+  return status?.message != null ? `${inputId}-status` : void 0;
+}
+function getStatusIcon(type) {
+  if (type === "success") {
+    return /* @__PURE__ */ jsx(Icon, { color: "success", icon: CheckCircle2, size: "sm" });
+  }
+  if (type === "warning") {
+    return /* @__PURE__ */ jsx(Icon, { color: "warning", icon: CircleAlert, size: "sm" });
+  }
+  return /* @__PURE__ */ jsx(Icon, { color: "error", icon: CircleX, size: "sm" });
+}
+
+export { getDescribedBy, getStatusIcon, getStatusMessageID };
+//# sourceMappingURL=chunk-3L3M7SJ3.js.map
+//# sourceMappingURL=chunk-3L3M7SJ3.js.map

package/dist/chunk-3L3M7SJ3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Field/inputUtils.tsx"],"names":[],"mappings":";;;;AAKO,SAAS,kBACX,GAAA,EACiB;AACpB,EAAA,MAAM,QAAA,GAAW,GAAA,CAAI,MAAA,CAAO,OAAO,CAAA;AACnC,EAAA,OAAO,SAAS,MAAA,GAAS,CAAA,GAAI,QAAA,CAAS,IAAA,CAAK,GAAG,CAAA,GAAI,MAAA;AACpD;AAEO,SAAS,kBAAA,CACd,SACA,MAAA,EACoB;AACpB,EAAA,OAAO,MAAA,EAAQ,OAAA,IAAW,IAAA,GAAO,CAAA,EAAG,OAAO,CAAA,OAAA,CAAA,GAAY,MAAA;AACzD;AAEO,SAAS,cAAc,IAAA,EAAkC;AAC9D,EAAA,IAAI,SAAS,SAAA,EAAW;AACtB,IAAA,2BAAQ,IAAA,EAAA,EAAK,KAAA,EAAM,WAAU,IAAA,EAAM,YAAA,EAAc,MAAK,IAAA,EAAK,CAAA;AAAA,EAC7D;AAEA,EAAA,IAAI,SAAS,SAAA,EAAW;AACtB,IAAA,2BAAQ,IAAA,EAAA,EAAK,KAAA,EAAM,WAAU,IAAA,EAAM,WAAA,EAAa,MAAK,IAAA,EAAK,CAAA;AAAA,EAC5D;AAEA,EAAA,2BAAQ,IAAA,EAAA,EAAK,KAAA,EAAM,SAAQ,IAAA,EAAM,OAAA,EAAS,MAAK,IAAA,EAAK,CAAA;AACtD","file":"chunk-3L3M7SJ3.js","sourcesContent":["import {CheckCircle2, CircleAlert, CircleX} from 'lucide-react';\nimport type {ReactNode} from 'react';\nimport {Icon} from '../Icon';\nimport type {InputStatus, InputStatusType} from './types';\n\nexport function getDescribedBy(\n  ...ids: (string | null | undefined | false)[]\n): string | undefined {\n  const filtered = ids.filter(Boolean);\n  return filtered.length > 0 ? filtered.join(' ') : undefined;\n}\n\nexport function getStatusMessageID(\n  inputId: string,\n  status: InputStatus | undefined,\n): string | undefined {\n  return status?.message != null ? `${inputId}-status` : undefined;\n}\n\nexport function getStatusIcon(type: InputStatusType): ReactNode {\n  if (type === 'success') {\n    return <Icon color=\"success\" icon={CheckCircle2} size=\"sm\" />;\n  }\n\n  if (type === 'warning') {\n    return <Icon color=\"warning\" icon={CircleAlert} size=\"sm\" />;\n  }\n\n  return <Icon color=\"error\" icon={CircleX} size=\"sm\" />;\n}\n"]}

package/dist/chunk-3PSQDJQH.js

@@ -0,0 +1,207 @@
+import { useInputGroup } from './chunk-YHR44PWO.js';
+import { inputStyles, inputRecipe, Field } from './chunk-NGWNIMMX.js';
+import { getStatusMessageID, getDescribedBy, getStatusIcon } from './chunk-3L3M7SJ3.js';
+import { Spinner } from './chunk-RGPL6EDK.js';
+import { Icon } from './chunk-4W7L63LH.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { X } from 'lucide-react';
+import { useId, useState, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var styles = {
+  units: css({
+    color: "fg.muted",
+    fontFamily: "body",
+    fontSize: "sm"
+  })
+};
+function parseNumberInput(input, options) {
+  const trimmed = input.trim();
+  if (trimmed === "" || trimmed === "-") {
+    return null;
+  }
+  const number = Number(trimmed);
+  if (!Number.isFinite(number)) {
+    return null;
+  }
+  if (options.isIntegerOnly && !Number.isInteger(number)) {
+    return null;
+  }
+  if (options.min != null && number < options.min) {
+    return null;
+  }
+  if (options.max != null && number > options.max) {
+    return null;
+  }
+  return number;
+}
+function NumberInput({
+  label,
+  value,
+  onChange,
+  size: sizeProp = "md",
+  description,
+  endContent,
+  isLabelHidden = false,
+  isOptional,
+  isRequired,
+  isDisabled = false,
+  isIntegerOnly = false,
+  isLoading = false,
+  hasClear,
+  hasAutoFocus = false,
+  htmlName,
+  autoComplete,
+  min,
+  max,
+  step,
+  units,
+  status,
+  labelIcon,
+  labelTooltip,
+  startIcon,
+  placeholder,
+  onFocus,
+  onBlur,
+  onEnter,
+  onKeyDown,
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref
+}) {
+  const inputId = useId();
+  const descriptionID = description != null ? `${inputId}-description` : void 0;
+  const statusMessageID = getStatusMessageID(inputId, status);
+  const describedBy = getDescribedBy(descriptionID, statusMessageID);
+  const inputGroup = useInputGroup();
+  const effectiveDisabled = isDisabled || inputGroup?.isDisabled === true;
+  const size = inputGroup?.size ?? sizeProp;
+  const effectiveStatusType = status?.type ?? inputGroup?.statusType;
+  const [pendingInput, setPendingInput] = useState(null);
+  const displayValue = useMemo(() => {
+    if (pendingInput != null) {
+      return pendingInput;
+    }
+    return value == null ? "" : String(value);
+  }, [pendingInput, value]);
+  const isInputValid = pendingInput == null || pendingInput.trim() === "" || parseNumberInput(pendingInput, { min, max, isIntegerOnly }) != null;
+  const necessity = { isOptional, isRequired };
+  const inputWrapper = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        inputRecipe({
+          size,
+          status: effectiveStatusType,
+          isDisabled: effectiveDisabled
+        }),
+        inputGroup != null ? className : void 0
+      ),
+      style: inputGroup != null ? style : void 0,
+      children: [
+        startIcon != null ? /* @__PURE__ */ jsx("span", { className: inputStyles.iconSlot, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "aria-busy": isLoading || void 0,
+            "aria-describedby": describedBy,
+            "aria-invalid": status?.type === "error" || !isInputValid || void 0,
+            "aria-label": inputGroup != null ? label : void 0,
+            "aria-required": isRequired ?? void 0,
+            autoComplete,
+            autoFocus: hasAutoFocus,
+            className: inputStyles.control,
+            "data-autofocus": hasAutoFocus || void 0,
+            "data-testid": dataTestId,
+            disabled: effectiveDisabled,
+            id: inputId,
+            max: max ?? void 0,
+            min: min ?? void 0,
+            name: htmlName,
+            onBlur: (event) => {
+              if (pendingInput != null) {
+                const parsed = parseNumberInput(pendingInput, {
+                  min,
+                  max,
+                  isIntegerOnly
+                });
+                if (parsed != null && parsed !== value) {
+                  onChange(parsed);
+                }
+                setPendingInput(null);
+              }
+              onBlur?.(event);
+            },
+            onChange: (event) => {
+              const nextValue = event.target.value;
+              setPendingInput(nextValue);
+              const parsed = parseNumberInput(nextValue, {
+                min,
+                max,
+                isIntegerOnly
+              });
+              if (parsed != null && parsed !== value) {
+                onChange(parsed);
+              }
+            },
+            onFocus,
+            onKeyDown: (event) => {
+              if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+                onEnter?.();
+              }
+              onKeyDown?.(event);
+            },
+            placeholder,
+            ref,
+            required: isRequired ?? void 0,
+            step: step ?? void 0,
+            type: "number",
+            value: displayValue
+          }
+        ),
+        units != null ? /* @__PURE__ */ jsx("span", { className: styles.units, children: units }) : null,
+        hasClear === true && value != null && !effectiveDisabled ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": `Clear ${label}`,
+            className: inputStyles.clearButton,
+            onClick: () => onChange(null),
+            type: "button",
+            children: /* @__PURE__ */ jsx(Icon, { icon: X, size: "sm" })
+          }
+        ) : null,
+        endContent,
+        isLoading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : null,
+        status != null ? /* @__PURE__ */ jsx("span", { className: inputStyles.iconSlot, children: getStatusIcon(status.type) }) : null
+      ]
+    }
+  );
+  if (inputGroup != null) {
+    return inputWrapper;
+  }
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      className,
+      description,
+      descriptionID,
+      inputId,
+      isDisabled,
+      isLabelHidden,
+      ...necessity,
+      label,
+      labelIcon,
+      labelTooltip,
+      status: status == null ? void 0 : { ...status, messageID: statusMessageID },
+      style,
+      children: inputWrapper
+    }
+  );
+}
+NumberInput.displayName = "NumberInput";
+
+export { NumberInput };
+//# sourceMappingURL=chunk-3PSQDJQH.js.map
+//# sourceMappingURL=chunk-3PSQDJQH.js.map

package/dist/chunk-3PSQDJQH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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","file":"chunk-3PSQDJQH.js","sourcesContent":["import {X} from 'lucide-react';\nimport {\n  useId,\n  useMemo,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {\n  Field,\n  inputRecipe,\n  inputStyles,\n  type FieldNecessity,\n  type InputSize,\n  type InputStatus,\n} from '../Field';\nimport {\n  getDescribedBy,\n  getStatusIcon,\n  getStatusMessageID,\n} from '../Field/inputUtils';\nimport {Icon, type IconComponent} from '../Icon';\nimport {useInputGroup} from '../InputGroup';\nimport {Spinner} from '../Spinner';\n\ntype NumberInputBaseProps = {\n  /**\n   * HTML autocomplete attribute value.\n   */\n  autoComplete?: string;\n  /**\n   * Additional CSS class names applied to the input wrapper.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the input element.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text displayed below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Content rendered after the input, before the status icon.\n   */\n  endContent?: ReactNode;\n  /**\n   * Whether to focus the input on mount.\n   * @default false\n   */\n  hasAutoFocus?: boolean;\n  /**\n   * HTML name attribute.\n   */\n  htmlName?: string;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to restrict input to integer values only.\n   * @default false\n   */\n  isIntegerOnly?: 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.\n   */\n  label: string;\n  /**\n   * Icon rendered beside the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Maximum allowed value.\n   */\n  max?: number | null;\n  /**\n   * Minimum allowed value.\n   */\n  min?: number | null;\n  /**\n   * Called when the input loses focus.\n   */\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Called when Enter is pressed.\n   */\n  onEnter?: () => void;\n  /**\n   * Called when the input receives focus.\n   */\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Keyboard event handler for the input.\n   */\n  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n  /**\n   * Placeholder text.\n   */\n  placeholder?: string;\n  /**\n   * Ref forwarded to the input element.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Visual size.\n   * @default 'md'\n   */\n  size?: InputSize;\n  /**\n   * Icon shown before the input.\n   */\n  startIcon?: IconComponent;\n  /**\n   * Validation status displayed below the input.\n   */\n  status?: InputStatus;\n  /**\n   * Step increment for the number input.\n   */\n  step?: number | null;\n  /**\n   * Inline styles applied to the input wrapper.\n   */\n  style?: CSSProperties;\n  /**\n   * Unit label displayed after the input value.\n   */\n  units?: string | null;\n  /**\n   * Controlled numeric value.\n   */\n  value: number | null;\n} & FieldNecessity;\n\ntype NumberInputNonClearableProps = NumberInputBaseProps & {\n  /**\n   * Whether to show a clear button.\n   */\n  hasClear?: false;\n  /**\n   * Called when the numeric value changes.\n   */\n  onChange: (value: number) => void;\n};\n\ntype NumberInputClearableProps = NumberInputBaseProps & {\n  /**\n   * Whether to show a clear button.\n   */\n  hasClear: true;\n  /**\n   * Called when the numeric value changes or is cleared.\n   */\n  onChange: (value: number | null) => void;\n};\n\nexport type NumberInputProps =\n  | NumberInputClearableProps\n  | NumberInputNonClearableProps;\n\nconst styles = {\n  units: css({\n    color: 'fg.muted',\n    fontFamily: 'body',\n    fontSize: 'sm',\n  }),\n} as const;\n\nfunction parseNumberInput(\n  input: string,\n  options: {isIntegerOnly: boolean; max?: number | null; min?: number | null},\n): number | null {\n  const trimmed = input.trim();\n  if (trimmed === '' || trimmed === '-') {\n    return null;\n  }\n  const number = Number(trimmed);\n  if (!Number.isFinite(number)) {\n    return null;\n  }\n  if (options.isIntegerOnly && !Number.isInteger(number)) {\n    return null;\n  }\n  if (options.min != null && number < options.min) {\n    return null;\n  }\n  if (options.max != null && number > options.max) {\n    return null;\n  }\n  return number;\n}\n\n/**\n * Numeric input field with optional min/max bounds and step control.\n */\nexport function NumberInput({\n  label,\n  value,\n  onChange,\n  size: sizeProp = 'md',\n  description,\n  endContent,\n  isLabelHidden = false,\n  isOptional,\n  isRequired,\n  isDisabled = false,\n  isIntegerOnly = false,\n  isLoading = false,\n  hasClear,\n  hasAutoFocus = false,\n  htmlName,\n  autoComplete,\n  min,\n  max,\n  step,\n  units,\n  status,\n  labelIcon,\n  labelTooltip,\n  startIcon,\n  placeholder,\n  onFocus,\n  onBlur,\n  onEnter,\n  onKeyDown,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: NumberInputProps): React.JSX.Element {\n  const inputId = useId();\n  const descriptionID =\n    description != null ? `${inputId}-description` : undefined;\n  const statusMessageID = getStatusMessageID(inputId, status);\n  const describedBy = getDescribedBy(descriptionID, statusMessageID);\n  const inputGroup = useInputGroup();\n  const effectiveDisabled = isDisabled || inputGroup?.isDisabled === true;\n  const size = inputGroup?.size ?? sizeProp;\n  const effectiveStatusType = status?.type ?? inputGroup?.statusType;\n  const [pendingInput, setPendingInput] = useState<string | null>(null);\n  const displayValue = useMemo(() => {\n    if (pendingInput != null) {\n      return pendingInput;\n    }\n    return value == null ? '' : String(value);\n  }, [pendingInput, value]);\n  const isInputValid =\n    pendingInput == null ||\n    pendingInput.trim() === '' ||\n    parseNumberInput(pendingInput, {min, max, isIntegerOnly}) != null;\n\n  const necessity: FieldNecessity = {isOptional, isRequired};\n\n  const inputWrapper = (\n    <div\n      className={cx(\n        inputRecipe({\n          size,\n          status: effectiveStatusType,\n          isDisabled: effectiveDisabled,\n        }),\n        inputGroup != null ? className : undefined,\n      )}\n      style={inputGroup != null ? style : undefined}>\n      {startIcon != null ? (\n        <span className={inputStyles.iconSlot}>\n          <Icon color=\"secondary\" icon={startIcon} size=\"sm\" />\n        </span>\n      ) : null}\n      <input\n        aria-busy={isLoading || undefined}\n        aria-describedby={describedBy}\n        aria-invalid={status?.type === 'error' || !isInputValid || undefined}\n        aria-label={inputGroup != null ? label : undefined}\n        aria-required={isRequired ?? undefined}\n        autoComplete={autoComplete}\n        // eslint-disable-next-line jsx-a11y-x/no-autofocus\n        autoFocus={hasAutoFocus}\n        className={inputStyles.control}\n        data-autofocus={hasAutoFocus || undefined}\n        data-testid={dataTestId}\n        disabled={effectiveDisabled}\n        id={inputId}\n        max={max ?? undefined}\n        min={min ?? undefined}\n        name={htmlName}\n        onBlur={event => {\n          if (pendingInput != null) {\n            const parsed = parseNumberInput(pendingInput, {\n              min,\n              max,\n              isIntegerOnly,\n            });\n            if (parsed != null && parsed !== value) {\n              onChange(parsed);\n            }\n            setPendingInput(null);\n          }\n          onBlur?.(event);\n        }}\n        onChange={(event: ChangeEvent<HTMLInputElement>) => {\n          const nextValue = event.target.value;\n          setPendingInput(nextValue);\n          const parsed = parseNumberInput(nextValue, {\n            min,\n            max,\n            isIntegerOnly,\n          });\n          if (parsed != null && parsed !== value) {\n            onChange(parsed);\n          }\n        }}\n        onFocus={onFocus}\n        onKeyDown={event => {\n          if (event.key === 'Enter' && !event.nativeEvent.isComposing) {\n            onEnter?.();\n          }\n          onKeyDown?.(event);\n        }}\n        placeholder={placeholder}\n        ref={ref}\n        required={isRequired ?? undefined}\n        step={step ?? undefined}\n        type=\"number\"\n        value={displayValue}\n      />\n      {units != null ? <span className={styles.units}>{units}</span> : null}\n      {hasClear === true && value != null && !effectiveDisabled ? (\n        <button\n          aria-label={`Clear ${label}`}\n          className={inputStyles.clearButton}\n          onClick={() => onChange(null)}\n          type=\"button\">\n          <Icon icon={X} size=\"sm\" />\n        </button>\n      ) : null}\n      {endContent}\n      {isLoading ? <Spinner size=\"sm\" /> : null}\n      {status != null ? (\n        <span className={inputStyles.iconSlot}>\n          {getStatusIcon(status.type)}\n        </span>\n      ) : null}\n    </div>\n  );\n\n  if (inputGroup != null) {\n    return inputWrapper;\n  }\n\n  return (\n    <Field\n      className={className}\n      description={description}\n      descriptionID={descriptionID}\n      inputId={inputId}\n      isDisabled={isDisabled}\n      isLabelHidden={isLabelHidden}\n      {...necessity}\n      label={label}\n      labelIcon={labelIcon}\n      labelTooltip={labelTooltip}\n      status={\n        status == null ? undefined : {...status, messageID: statusMessageID}\n      }\n      style={style}>\n      {inputWrapper}\n    </Field>\n  );\n}\n\nNumberInput.displayName = 'NumberInput';\n"]}