@12-apps/ui 5.0.0 → 5.1.0

package/dist/form/Form.js

@@ -0,0 +1,16 @@
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormLabel,
+  FormMessage
+} from "../chunk-FD4W36WR.js";
+import "../chunk-PZ5AY32C.js";
+export {
+  Form,
+  FormControl,
+  FormField,
+  FormLabel,
+  FormMessage
+};
+//# sourceMappingURL=Form.js.map

package/dist/form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/form/HeaderButton.js

@@ -0,0 +1,8 @@
+import {
+  HeaderButton
+} from "../chunk-U7CIYYA7.js";
+import "../chunk-PZ5AY32C.js";
+export {
+  HeaderButton
+};
+//# sourceMappingURL=HeaderButton.js.map

package/dist/form/HeaderButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/form/Input.js

@@ -0,0 +1,8 @@
+import {
+  Input
+} from "../chunk-OOKQ2LMM.js";
+import "../chunk-PZ5AY32C.js";
+export {
+  Input
+};
+//# sourceMappingURL=Input.js.map

package/dist/form/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/form/InputOTP.js

@@ -0,0 +1,225 @@
+import {
+  withDefaults
+} from "../chunk-Y2JYDXL7.js";
+import "../chunk-PZ5AY32C.js";
+
+// src/components/form/InputOTP/InputOTP.tsx
+import { Box, TextField } from "@mui/material";
+import { styled } from "@mui/material";
+import { forwardRef } from "react";
+
+// src/components/form/InputOTP/InputOTP.hooks.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var PATTERNS = {
+  numeric: /^\d*$/,
+  alphanumeric: /^[a-zA-Z0-9]*$/
+};
+var isAllowed = (variant, text) => (PATTERNS[variant] ?? /.*/).test(text);
+var padTo = (digits, length) => Array.from({ length }, (_, i) => digits[i] ?? "");
+var useOtpDigits = ({ variant, length, value, onChange, onComplete }) => {
+  const [digits, setDigits] = useState(() => padTo([], length));
+  const inputRefs = useRef([]);
+  useEffect(() => {
+    setDigits(padTo(value.split("").slice(0, length), length));
+  }, [value, length]);
+  const focusSlot = useCallback((index) => {
+    inputRefs.current[index]?.focus();
+  }, []);
+  const publish = useCallback(
+    (next) => {
+      onChange?.(next);
+      if (next.length === length) {
+        onComplete?.(next);
+      }
+    },
+    [length, onChange, onComplete]
+  );
+  const handleInputChange = useCallback(
+    (index, inputValue) => {
+      if (!isAllowed(variant, inputValue)) return;
+      const next = [...digits];
+      next[index] = inputValue.slice(-1);
+      setDigits(next);
+      publish(next.join(""));
+      if (inputValue && index < length - 1) {
+        focusSlot(index + 1);
+      }
+    },
+    [variant, digits, length, publish, focusSlot]
+  );
+  const handleKeyDown = useCallback(
+    (index, e) => {
+      const back = e.key === "Backspace" && !digits[index] || e.key === "ArrowLeft";
+      if (back && index > 0) {
+        focusSlot(index - 1);
+      } else if (e.key === "ArrowRight" && index < length - 1) {
+        focusSlot(index + 1);
+      }
+    },
+    [digits, length, focusSlot]
+  );
+  const handlePaste = useCallback(
+    (e) => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData("text").slice(0, length);
+      if (!pasted || !isAllowed(variant, pasted)) return;
+      setDigits(padTo(pasted.split(""), length));
+      publish(pasted);
+    },
+    [variant, length, publish]
+  );
+  return { digits, inputRefs, handleInputChange, handleKeyDown, handlePaste };
+};
+
+// src/components/form/InputOTP/InputOTP.styles.ts
+import { alpha } from "@mui/material";
+var neutralPalette = (theme) => ({
+  main: theme.palette.grey[700],
+  dark: theme.palette.grey[800],
+  light: theme.palette.grey[500],
+  contrastText: "#fff"
+});
+var namedPalette = (theme, color) => {
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return neutralPalette(theme);
+  }
+  const palette = namedPalette(theme, color);
+  const { primary } = theme.palette;
+  return {
+    main: palette.main || primary.main,
+    dark: palette.dark || palette.main || primary.dark,
+    light: palette.light || palette.main || primary.light,
+    contrastText: palette.contrastText || "#fff"
+  };
+};
+var SIZES = {
+  xs: { side: "32px", fontSize: "0.75rem" },
+  sm: { side: "40px", fontSize: "0.875rem" },
+  md: { side: "48px", fontSize: "1rem" },
+  lg: { side: "56px", fontSize: "1.125rem" },
+  xl: { side: "64px", fontSize: "1.25rem" }
+};
+var otpSlotSx = (theme, flags) => {
+  const { customColor = "primary", customSize = "md", glass, gradient } = flags;
+  const palette = getColorFromTheme(theme, customColor);
+  const { side, fontSize } = SIZES[customSize] ?? SIZES.md;
+  return {
+    width: side,
+    height: side,
+    "& .MuiOutlinedInput-root": {
+      width: side,
+      height: side,
+      fontSize,
+      fontWeight: 600,
+      textAlign: "center",
+      borderRadius: theme.spacing(1),
+      ...glass && {
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: "blur(20px)",
+        "& fieldset": { border: `1px solid ${alpha(theme.palette.divider, 0.2)}` }
+      },
+      ...gradient && {
+        "&.Mui-focused fieldset": {
+          background: `linear-gradient(135deg, ${palette.main}, ${palette.light})`,
+          borderWidth: "2px"
+        }
+      },
+      "& input": { textAlign: "center", padding: 0, fontWeight: "inherit" },
+      "&:hover fieldset": { borderColor: palette.main },
+      "&.Mui-focused fieldset": { borderColor: palette.main, borderWidth: "2px" }
+    }
+  };
+};
+
+// src/components/form/InputOTP/InputOTP.tsx
+import { jsx } from "react/jsx-runtime";
+var StyledOTPInput = styled(TextField, {
+  shouldForwardProp: (prop) => !["customColor", "customSize", "glass", "gradient"].includes(prop)
+})(({ theme, ...flags }) => ({ ...otpSlotSx(theme, flags) }));
+var DEFAULTS = {
+  variant: "numeric",
+  color: "primary",
+  size: "md",
+  length: 6,
+  value: "",
+  glass: false,
+  gradient: false,
+  autoFocus: false,
+  error: false,
+  disabled: false
+};
+var InputOTP = forwardRef((props, ref) => {
+  const {
+    variant,
+    color,
+    size,
+    length,
+    value,
+    onChange,
+    onComplete,
+    glass,
+    gradient,
+    autoFocus,
+    error,
+    disabled,
+    dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS);
+  const { digits, inputRefs, handleInputChange, handleKeyDown, handlePaste } = useOtpDigits({
+    variant,
+    length,
+    value,
+    onChange,
+    onComplete
+  });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      "data-testid": dataTestId,
+      sx: { display: "flex", gap: 1, justifyContent: "center", alignItems: "center" },
+      ...rest,
+      children: digits.map((digit, index) => /* @__PURE__ */ jsx(
+        StyledOTPInput,
+        {
+          ref: (el) => {
+            inputRefs.current[index] = el?.querySelector("input") || null;
+          },
+          customColor: color,
+          customSize: size,
+          glass,
+          gradient,
+          value: variant === "masked" ? digit ? "\u2022" : "" : digit,
+          onChange: (e) => handleInputChange(index, e.target.value),
+          onKeyDown: (e) => handleKeyDown(index, e),
+          onPaste: index === 0 ? handlePaste : void 0,
+          autoFocus: autoFocus && index === 0,
+          error,
+          disabled,
+          inputProps: {
+            maxLength: 1,
+            style: { textAlign: "center" },
+            "data-testid": dataTestId ? `${dataTestId}-slot-${index}` : void 0
+          }
+        },
+        index
+      ))
+    }
+  );
+});
+InputOTP.displayName = "InputOTP";
+export {
+  InputOTP
+};
+//# sourceMappingURL=InputOTP.js.map

package/dist/form/InputOTP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/form/InputOTP/InputOTP.tsx","../../src/components/form/InputOTP/InputOTP.hooks.ts","../../src/components/form/InputOTP/InputOTP.styles.ts"],"sourcesContent":["import { Box, TextField } from '@mui/material';\nimport { styled } from '@mui/material';\nimport React, { forwardRef } from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { useOtpDigits } from './InputOTP.hooks';\nimport { otpSlotSx } from './InputOTP.styles';\nimport type { OtpSlotFlags } from './InputOTP.styles';\nimport type { InputOTPProps } from './InputOTP.types';\n\nconst StyledOTPInput = styled(TextField, {\n  shouldForwardProp: (prop) =>\n    !['customColor', 'customSize', 'glass', 'gradient'].includes(prop as string),\n})<OtpSlotFlags>(({ theme, ...flags }) => ({ ...otpSlotSx(theme, flags) }));\n\nconst DEFAULTS = {\n  variant: 'numeric',\n  color: 'primary',\n  size: 'md',\n  length: 6,\n  value: '',\n  glass: false,\n  gradient: false,\n  autoFocus: false,\n  error: false,\n  disabled: false,\n} satisfies Partial<InputOTPProps>;\n\ntype ResolvedProps = InputOTPProps & Required<Pick<InputOTPProps, keyof typeof DEFAULTS>>;\n\nexport const InputOTP = forwardRef<HTMLDivElement, InputOTPProps>((props, ref) => {\n  const {\n    variant, color, size, length, value, onChange, onComplete,\n    glass, gradient, autoFocus, error, disabled, dataTestId,\n    ...rest\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const { digits, inputRefs, handleInputChange, handleKeyDown, handlePaste } = useOtpDigits({\n    variant,\n    length,\n    value,\n    onChange,\n    onComplete,\n  });\n\n  return (\n    <Box\n      ref={ref}\n      data-testid={dataTestId}\n      sx={{ display: 'flex', gap: 1, justifyContent: 'center', alignItems: 'center' }}\n      {...rest}\n    >\n      {digits.map((digit, index) => (\n        <StyledOTPInput\n          key={index}\n          ref={(el: HTMLDivElement | null) => {\n            inputRefs.current[index] = el?.querySelector('input') || null;\n          }}\n          customColor={color}\n          customSize={size}\n          glass={glass}\n          gradient={gradient}\n          // `masked` keeps the digit in state and shows a bullet in its place.\n          value={variant === 'masked' ? (digit ? '•' : '') : digit}\n          onChange={(e) => handleInputChange(index, e.target.value)}\n          onKeyDown={(e) => handleKeyDown(index, e)}\n          // Only the first slot takes a paste; it fills the rest itself.\n          onPaste={index === 0 ? handlePaste : undefined}\n          autoFocus={autoFocus && index === 0}\n          error={error}\n          disabled={disabled}\n          inputProps={{\n            maxLength: 1,\n            style: { textAlign: 'center' },\n            'data-testid': dataTestId ? `${dataTestId}-slot-${index}` : undefined,\n          }}\n        />\n      ))}\n    </Box>\n  );\n});\n\nInputOTP.displayName = 'InputOTP';\n","import { useCallback, useEffect, useRef, useState } from 'react';\n\n\n/**\n * What each variant accepts. `masked` constrains nothing — it only changes what\n * is drawn — so it has no pattern here.\n */\nconst PATTERNS: Record<string, RegExp> = {\n  numeric: /^\\d*$/,\n  alphanumeric: /^[a-zA-Z0-9]*$/,\n};\n\n/** Whether `text` is something this variant will take. */\nconst isAllowed = (variant: string, text: string) => (PATTERNS[variant] ?? /.*/).test(text);\n\n/** The digit array is always `length` long, blank-padded on the right. */\nconst padTo = (digits: string[], length: number) =>\n  Array.from({ length }, (_, i) => digits[i] ?? '');\n\ninterface OtpInput {\n  variant: string;\n  length: number;\n  value: string;\n  onChange?: (value: string) => void;\n  onComplete?: (value: string) => void;\n}\n\n/**\n * The digits, and the three ways they change: typing, the keys that move\n * between slots, and a paste into the first one.\n *\n * Focus moves as a consequence of entry, so the input refs live here with the\n * state that drives them.\n */\nexport const useOtpDigits = ({ variant, length, value, onChange, onComplete }: OtpInput) => {\n  const [digits, setDigits] = useState<string[]>(() => padTo([], length));\n  const inputRefs = useRef<(globalThis.HTMLInputElement | null)[]>([]);\n\n  useEffect(() => {\n    setDigits(padTo(value.split('').slice(0, length), length));\n  }, [value, length]);\n\n  const focusSlot = useCallback((index: number) => {\n    inputRefs.current[index]?.focus();\n  }, []);\n\n  /** Publishes the joined value, and reports completion when every slot is full. */\n  const publish = useCallback(\n    (next: string) => {\n      onChange?.(next);\n      if (next.length === length) {\n        onComplete?.(next);\n      }\n    },\n    [length, onChange, onComplete],\n  );\n\n  const handleInputChange = useCallback(\n    (index: number, inputValue: string) => {\n      if (!isAllowed(variant, inputValue)) return;\n\n      const next = [...digits];\n      next[index] = inputValue.slice(-1); // one character per slot\n      setDigits(next);\n      publish(next.join(''));\n\n      if (inputValue && index < length - 1) {\n        focusSlot(index + 1);\n      }\n    },\n    [variant, digits, length, publish, focusSlot],\n  );\n\n  const handleKeyDown = useCallback(\n    (index: number, e: React.KeyboardEvent) => {\n      // Backspace in an already-empty slot steps back rather than deleting.\n      const back =\n        (e.key === 'Backspace' && !digits[index]) || e.key === 'ArrowLeft';\n\n      if (back && index > 0) {\n        focusSlot(index - 1);\n      } else if (e.key === 'ArrowRight' && index < length - 1) {\n        focusSlot(index + 1);\n      }\n    },\n    [digits, length, focusSlot],\n  );\n\n  const handlePaste = useCallback(\n    (e: React.ClipboardEvent) => {\n      e.preventDefault();\n      const pasted = e.clipboardData.getData('text').slice(0, length);\n\n      // An empty paste is not a rejection, but it is nothing to apply either.\n      if (!pasted || !isAllowed(variant, pasted)) return;\n\n      setDigits(padTo(pasted.split(''), length));\n      publish(pasted);\n    },\n    [variant, length, publish],\n  );\n\n  return { digits, inputRefs, handleInputChange, handleKeyDown, handlePaste };\n};\n","import { alpha } from '@mui/material';\nimport type { CSSObject, Theme } from '@mui/material';\n\ninterface ColorPalette {\n  main: string;\n  dark?: string;\n  light?: string;\n  contrastText?: string;\n}\n\n/** `neutral` is not a MUI palette entry, so it is built from the grey ramp. */\nconst neutralPalette = (theme: Theme): ColorPalette => ({\n  main: theme.palette.grey[700],\n  dark: theme.palette.grey[800],\n  light: theme.palette.grey[500],\n  contrastText: '#fff',\n});\n\n/** `danger` is this component's name for the error palette. */\nconst namedPalette = (theme: Theme, color: string): ColorPalette => {\n  const colorMap: Record<string, ColorPalette> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\nconst getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n  if (color === 'neutral') {\n    return neutralPalette(theme);\n  }\n\n  const palette = namedPalette(theme, color);\n  const { primary } = theme.palette;\n\n  return {\n    main: palette.main || primary.main,\n    dark: palette.dark || palette.main || primary.dark,\n    light: palette.light || palette.main || primary.light,\n    contrastText: palette.contrastText || '#fff',\n  };\n};\n\ntype SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Each slot is a square, so width and height always match. */\nconst SIZES: Record<SizeKey, { side: string; fontSize: string }> = {\n  xs: { side: '32px', fontSize: '0.75rem' },\n  sm: { side: '40px', fontSize: '0.875rem' },\n  md: { side: '48px', fontSize: '1rem' },\n  lg: { side: '56px', fontSize: '1.125rem' },\n  xl: { side: '64px', fontSize: '1.25rem' },\n};\n\nexport interface OtpSlotFlags {\n  customColor?: string;\n  customSize?: string;\n  glass?: boolean;\n  gradient?: boolean;\n}\n\nexport const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {\n  const { customColor = 'primary', customSize = 'md', glass, gradient } = flags;\n  const palette = getColorFromTheme(theme, customColor);\n  const { side, fontSize } = SIZES[customSize as SizeKey] ?? SIZES.md;\n\n  return {\n    width: side,\n    height: side,\n    '& .MuiOutlinedInput-root': {\n      width: side,\n      height: side,\n      fontSize,\n      fontWeight: 600,\n      textAlign: 'center',\n      borderRadius: theme.spacing(1),\n      ...(glass && {\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: 'blur(20px)',\n        '& fieldset': { border: `1px solid ${alpha(theme.palette.divider, 0.2)}` },\n      }),\n      ...(gradient && {\n        '&.Mui-focused fieldset': {\n          background: `linear-gradient(135deg, ${palette.main}, ${palette.light})`,\n          borderWidth: '2px',\n        },\n      }),\n      '& input': { textAlign: 'center', padding: 0, fontWeight: 'inherit' },\n      '&:hover fieldset': { borderColor: palette.main },\n      '&.Mui-focused fieldset': { borderColor: palette.main, borderWidth: '2px' },\n    },\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/form/Label.js

@@ -0,0 +1,319 @@
+import {
+  withDefaults
+} from "../chunk-Y2JYDXL7.js";
+import {
+  accentFor
+} from "../chunk-OZCEKQIX.js";
+import "../chunk-PZ5AY32C.js";
+
+// src/components/form/Label/Label.tsx
+import { Box as Box2, Tooltip, Typography, useTheme as useTheme2 } from "@mui/material";
+import { forwardRef } from "react";
+
+// src/components/form/Label/Label.parts.tsx
+import { Box, CircularProgress, useTheme } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Asterisk = ({
+  placement
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      sx: {
+        color: theme.palette.error.main,
+        marginLeft: placement === "end" ? theme.spacing(0.5) : 0,
+        marginRight: placement === "start" ? theme.spacing(0.5) : 0
+      },
+      children: "*"
+    }
+  );
+};
+var LabelIcon = ({ icon }) => /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "inline-flex", alignItems: "center", fontSize: "inherit" }, children: icon });
+var LabelSpinner = ({
+  fontSize,
+  color
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(CircularProgress, { size: fontSize, sx: { color, marginLeft: theme.spacing(0.5) } });
+};
+var LabelBody = ({
+  children,
+  required,
+  asteriskPlacement,
+  icon,
+  iconPosition,
+  loading,
+  fontSize,
+  color
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  required && asteriskPlacement === "start" && /* @__PURE__ */ jsx(Asterisk, { placement: asteriskPlacement }),
+  icon && iconPosition === "start" && /* @__PURE__ */ jsx(LabelIcon, { icon }),
+  children,
+  icon && iconPosition === "end" && /* @__PURE__ */ jsx(LabelIcon, { icon }),
+  required && asteriskPlacement === "end" && /* @__PURE__ */ jsx(Asterisk, { placement: asteriskPlacement }),
+  loading && /* @__PURE__ */ jsx(LabelSpinner, { fontSize, color })
+] });
+
+// src/components/form/Label/Label.styles.ts
+import { alpha } from "@mui/material";
+var SIZES = {
+  xs: (theme) => ({ fontSize: "0.75rem", lineHeight: 1.2, padding: theme.spacing(0.25, 0.5) }),
+  sm: (theme) => ({ fontSize: "0.875rem", lineHeight: 1.3, padding: theme.spacing(0.5, 0.75) }),
+  md: (theme) => ({ fontSize: "1rem", lineHeight: 1.5, padding: theme.spacing(0.75, 1) }),
+  lg: (theme) => ({ fontSize: "1.125rem", lineHeight: 1.6, padding: theme.spacing(1, 1.25) }),
+  xl: (theme) => ({ fontSize: "1.25rem", lineHeight: 1.7, padding: theme.spacing(1.25, 1.5) })
+};
+var sizeStyles = (theme, size) => (SIZES[size] ?? SIZES.md)(theme);
+var WEIGHTS = {
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+var fontWeight = (weight) => WEIGHTS[weight] ?? WEIGHTS.regular;
+var textColor = (theme, flags) => {
+  if (flags.error) return theme.palette.error.main;
+  if (flags.disabled) return theme.palette.text.disabled;
+  if (flags.color === "neutral") return theme.palette.text.primary;
+  return accentFor(theme, flags.color).main;
+};
+var rippleStyles = (theme) => ({
+  overflow: "hidden",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: 0,
+    height: 0,
+    borderRadius: "50%",
+    backgroundColor: alpha(theme.palette.primary.main, 0.3),
+    transform: "translate(-50%, -50%)",
+    transition: "width 0.6s, height 0.6s"
+  },
+  "&:active::after": { width: "300%", height: "300%" }
+});
+var SURFACES = {
+  filled: ({ theme, flags, accent }) => ({
+    backgroundColor: alpha(accent, 0.1),
+    borderRadius: theme.spacing(0.5),
+    "&:hover": flags.clickable ? { backgroundColor: alpha(accent, 0.15) } : {}
+  }),
+  outlined: ({ theme, flags, accent }) => ({
+    border: `1px solid ${alpha(accent, 0.5)}`,
+    borderRadius: theme.spacing(0.5),
+    "&:hover": flags.clickable ? { borderColor: accent, backgroundColor: alpha(accent, 0.05) } : {}
+  }),
+  glass: ({ theme, flags }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: "blur(10px)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    borderRadius: theme.spacing(0.5),
+    "&:hover": flags.clickable ? {
+      backgroundColor: alpha(theme.palette.background.paper, 0.15),
+      borderColor: alpha(theme.palette.primary.main, 0.3)
+    } : {}
+  }),
+  gradient: ({ theme, flags }) => {
+    const accent = accentFor(theme, flags.color === "neutral" ? "primary" : flags.color);
+    const clip = {
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      backgroundClip: "text"
+    };
+    return {
+      background: `linear-gradient(135deg, ${accent.light}, ${accent.main})`,
+      ...clip,
+      "&:hover": flags.clickable ? {
+        background: `linear-gradient(135deg, ${accent.main}, ${accent.dark})`,
+        ...clip
+      } : {}
+    };
+  },
+  minimal: ({ theme, flags }) => ({
+    padding: 0,
+    "&:hover": flags.clickable ? { color: theme.palette.primary.main } : {}
+  }),
+  default: () => ({})
+};
+var textLayout = (theme, flags) => {
+  const { srOnly, clickable, align, weight, transform, nowrap, truncate } = flags;
+  return {
+    display: srOnly ? "none" : "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    transition: theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard
+    }),
+    cursor: clickable ? "pointer" : "default",
+    textAlign: align,
+    fontWeight: fontWeight(weight),
+    textTransform: transform,
+    whiteSpace: nowrap ? "nowrap" : "normal",
+    overflow: truncate ? "hidden" : "visible",
+    textOverflow: truncate ? "ellipsis" : "clip",
+    position: "relative"
+  };
+};
+var labelStyles = (theme, flags) => {
+  const { variant, size, clickable } = flags;
+  const color = textColor(theme, flags);
+  const accent = color || theme.palette.primary.main;
+  return {
+    ...textLayout(theme, flags),
+    ...sizeStyles(theme, size),
+    color,
+    ...flags.glow && { textShadow: `0 0 10px ${alpha(accent, 0.5)}` },
+    ...flags.pulse && {
+      animation: "pulse 2s infinite",
+      "@keyframes pulse": {
+        "0%": { opacity: 1 },
+        "50%": { opacity: 0.6 },
+        "100%": { opacity: 1 }
+      }
+    },
+    ...flags.ripple && clickable && rippleStyles(theme),
+    ...(SURFACES[variant] ?? SURFACES.default)({ theme, flags, accent })
+  };
+};
+var SR_ONLY_SX = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+
+// src/components/form/Label/Label.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULTS = {
+  required: false,
+  disabled: false,
+  error: false,
+  variant: "default",
+  size: "md",
+  color: "neutral",
+  glow: false,
+  pulse: false,
+  ripple: false,
+  loading: false,
+  asteriskPlacement: "end",
+  iconPosition: "start",
+  srOnly: false,
+  weight: "regular",
+  transform: "none",
+  align: "left",
+  nowrap: false,
+  truncate: false
+};
+var Label = forwardRef((props, ref) => {
+  const {
+    children,
+    htmlFor,
+    required,
+    disabled,
+    error,
+    variant,
+    size,
+    color,
+    glow,
+    pulse,
+    ripple,
+    loading,
+    className,
+    style,
+    tooltip,
+    helperText,
+    asteriskPlacement,
+    icon,
+    iconPosition,
+    onClick,
+    onFocus,
+    onBlur,
+    srOnly,
+    weight,
+    transform,
+    align,
+    nowrap,
+    truncate,
+    dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS);
+  const theme = useTheme2();
+  const flags = {
+    variant,
+    size,
+    color,
+    weight,
+    transform,
+    align,
+    error,
+    disabled,
+    glow,
+    pulse,
+    ripple,
+    srOnly,
+    nowrap,
+    truncate,
+    clickable: Boolean(onClick)
+  };
+  const labelContent = /* @__PURE__ */ jsx2(
+    Box2,
+    {
+      component: "label",
+      ref,
+      htmlFor,
+      onClick,
+      onFocus,
+      onBlur,
+      className,
+      "data-testid": dataTestId,
+      sx: { ...labelStyles(theme, flags), ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsx2(
+        LabelBody,
+        {
+          required,
+          asteriskPlacement,
+          icon,
+          iconPosition,
+          loading,
+          fontSize: sizeStyles(theme, size).fontSize,
+          color: textColor(theme, flags),
+          children
+        }
+      )
+    }
+  );
+  if (srOnly) {
+    return /* @__PURE__ */ jsx2(Box2, { component: "label", htmlFor, "data-testid": dataTestId, sx: SR_ONLY_SX, children });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    tooltip ? /* @__PURE__ */ jsx2(Tooltip, { title: tooltip, arrow: true, children: labelContent }) : labelContent,
+    helperText && /* @__PURE__ */ jsx2(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          display: "block",
+          color: error ? theme.palette.error.main : theme.palette.text.secondary,
+          marginTop: theme.spacing(0.5),
+          fontSize: "0.75rem"
+        },
+        children: helperText
+      }
+    )
+  ] });
+});
+Label.displayName = "Label";
+export {
+  Label
+};
+//# sourceMappingURL=Label.js.map

package/dist/form/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/form/Label/Label.tsx","../../src/components/form/Label/Label.parts.tsx","../../src/components/form/Label/Label.styles.ts"],"sourcesContent":["import { Box, Tooltip, Typography, useTheme } from '@mui/material';\nimport React, { forwardRef } from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { LabelBody } from './Label.parts';\nimport { labelStyles, sizeStyles, SR_ONLY_SX, textColor } from './Label.styles';\nimport type { LabelStyleFlags } from './Label.styles';\nimport type { LabelProps } from './Label.types';\n\nconst DEFAULTS = {\n  required: false,\n  disabled: false,\n  error: false,\n  variant: 'default',\n  size: 'md',\n  color: 'neutral',\n  glow: false,\n  pulse: false,\n  ripple: false,\n  loading: false,\n  asteriskPlacement: 'end',\n  iconPosition: 'start',\n  srOnly: false,\n  weight: 'regular',\n  transform: 'none',\n  align: 'left',\n  nowrap: false,\n  truncate: false,\n} satisfies Partial<LabelProps>;\n\ntype ResolvedProps = LabelProps & Required<Pick<LabelProps, keyof typeof DEFAULTS>>;\n\nexport const Label = forwardRef<globalThis.HTMLLabelElement, LabelProps>((props, ref) => {\n  const {\n    children, htmlFor, required, disabled, error, variant, size, color,\n    glow, pulse, ripple, loading, className, style, tooltip, helperText,\n    asteriskPlacement, icon, iconPosition, onClick, onFocus, onBlur,\n    srOnly, weight, transform, align, nowrap, truncate, dataTestId,\n    ...rest\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const theme = useTheme();\n\n  const flags: LabelStyleFlags = {\n    variant, size, color, weight, transform, align,\n    error, disabled, glow, pulse, ripple, srOnly, nowrap, truncate,\n    clickable: Boolean(onClick),\n  };\n\n  const labelContent = (\n    <Box\n      component=\"label\"\n      ref={ref}\n      htmlFor={htmlFor}\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      className={className}\n      data-testid={dataTestId}\n      sx={{ ...labelStyles(theme, flags), ...style }}\n      {...rest}\n    >\n      <LabelBody\n        required={required}\n        asteriskPlacement={asteriskPlacement}\n        icon={icon}\n        iconPosition={iconPosition}\n        loading={loading}\n        fontSize={sizeStyles(theme, size).fontSize as string}\n        color={textColor(theme, flags)}\n      >\n        {children}\n      </LabelBody>\n    </Box>\n  );\n\n  // A screen-reader-only label is rendered on its own: the tooltip, the styling\n  // and the helper text all describe something nothing can see.\n  if (srOnly) {\n    return (\n      <Box component=\"label\" htmlFor={htmlFor} data-testid={dataTestId} sx={SR_ONLY_SX}>\n        {children}\n      </Box>\n    );\n  }\n\n  return (\n    <>\n      {tooltip ? (\n        <Tooltip title={tooltip} arrow>\n          {labelContent}\n        </Tooltip>\n      ) : (\n        labelContent\n      )}\n\n      {helperText && (\n        <Typography\n          variant=\"caption\"\n          sx={{\n            display: 'block',\n            color: error ? theme.palette.error.main : theme.palette.text.secondary,\n            marginTop: theme.spacing(0.5),\n            fontSize: '0.75rem',\n          }}\n        >\n          {helperText}\n        </Typography>\n      )}\n    </>\n  );\n});\n\nLabel.displayName = 'Label';\n","import { Box, CircularProgress, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport type { LabelProps } from './Label.types';\n\n/** The required marker, on whichever side the caller asked for. */\nexport const Asterisk: React.FC<{ placement: NonNullable<LabelProps['asteriskPlacement']> }> = ({\n  placement,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      component=\"span\"\n      sx={{\n        color: theme.palette.error.main,\n        marginLeft: placement === 'end' ? theme.spacing(0.5) : 0,\n        marginRight: placement === 'start' ? theme.spacing(0.5) : 0,\n      }}\n    >\n      *\n    </Box>\n  );\n};\n\nexport const LabelIcon: React.FC<{ icon: React.ReactNode }> = ({ icon }) => (\n  <Box component=\"span\" sx={{ display: 'inline-flex', alignItems: 'center', fontSize: 'inherit' }}>\n    {icon}\n  </Box>\n);\n\n/** Sized to the label's own font so it sits on the text baseline. */\nexport const LabelSpinner: React.FC<{ fontSize?: CSSStyleDeclaration['fontSize']; color: string }> = ({\n  fontSize,\n  color,\n}) => {\n  const theme = useTheme();\n\n  return <CircularProgress size={fontSize} sx={{ color, marginLeft: theme.spacing(0.5) }} />;\n};\n\nexport interface LabelBodyProps {\n  children: React.ReactNode;\n  required: boolean;\n  asteriskPlacement: NonNullable<LabelProps['asteriskPlacement']>;\n  icon?: React.ReactNode;\n  iconPosition: NonNullable<LabelProps['iconPosition']>;\n  loading: boolean;\n  fontSize?: string;\n  color: string;\n}\n\n/**\n * The run inside the label: the required marker and the icon on whichever side\n * each was asked for, the text, and the spinner after it all.\n */\nexport const LabelBody: React.FC<LabelBodyProps> = ({\n  children,\n  required,\n  asteriskPlacement,\n  icon,\n  iconPosition,\n  loading,\n  fontSize,\n  color,\n}) => (\n  <>\n    {required && asteriskPlacement === 'start' && <Asterisk placement={asteriskPlacement} />}\n    {icon && iconPosition === 'start' && <LabelIcon icon={icon} />}\n    {children}\n    {icon && iconPosition === 'end' && <LabelIcon icon={icon} />}\n    {required && asteriskPlacement === 'end' && <Asterisk placement={asteriskPlacement} />}\n    {loading && <LabelSpinner fontSize={fontSize} color={color} />}\n  </>\n);\n","import { alpha } from '@mui/material';\nimport type { CSSObject, Theme } from '@mui/material';\n\nimport type { LabelProps } from './Label.types';\nimport { accentFor} from '../../../tokens/scales';\n\ntype Size = NonNullable<LabelProps['size']>;\ntype Variant = NonNullable<LabelProps['variant']>;\ntype Weight = NonNullable<LabelProps['weight']>;\n\nconst SIZES: Record<Size, (theme: Theme) => CSSObject> = {\n  xs: (theme) => ({ fontSize: '0.75rem', lineHeight: 1.2, padding: theme.spacing(0.25, 0.5) }),\n  sm: (theme) => ({ fontSize: '0.875rem', lineHeight: 1.3, padding: theme.spacing(0.5, 0.75) }),\n  md: (theme) => ({ fontSize: '1rem', lineHeight: 1.5, padding: theme.spacing(0.75, 1) }),\n  lg: (theme) => ({ fontSize: '1.125rem', lineHeight: 1.6, padding: theme.spacing(1, 1.25) }),\n  xl: (theme) => ({ fontSize: '1.25rem', lineHeight: 1.7, padding: theme.spacing(1.25, 1.5) }),\n};\n\nexport const sizeStyles = (theme: Theme, size: Size): CSSObject => (SIZES[size] ?? SIZES.md)(theme);\n\nconst WEIGHTS: Record<Weight, number> = {\n  light: 300,\n  regular: 400,\n  medium: 500,\n  semibold: 600,\n  bold: 700,\n};\n\nconst fontWeight = (weight: Weight) => WEIGHTS[weight] ?? WEIGHTS.regular;\n\nexport interface LabelStyleFlags {\n  variant: Variant;\n  size: Size;\n  color: NonNullable<LabelProps['color']>;\n  weight: Weight;\n  transform: NonNullable<LabelProps['transform']>;\n  align: NonNullable<LabelProps['align']>;\n  error: boolean;\n  disabled: boolean;\n  glow: boolean;\n  pulse: boolean;\n  ripple: boolean;\n  srOnly: boolean;\n  nowrap: boolean;\n  truncate: boolean;\n  clickable: boolean;\n}\n\n/**\n * The text colour, which error and disabled override before the palette is\n * consulted at all. Resolved once and threaded through — the variant styles\n * read it up to four times each.\n */\nexport const textColor = (theme: Theme, flags: LabelStyleFlags): string => {\n  if (flags.error) return theme.palette.error.main;\n  if (flags.disabled) return theme.palette.text.disabled;\n  if (flags.color === 'neutral') return theme.palette.text.primary;\n  return accentFor(theme, flags.color).main;\n};\n\n/** The ripple that expands from the centre on press, for clickable labels. */\nconst rippleStyles = (theme: Theme): CSSObject => ({\n  overflow: 'hidden',\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    width: 0,\n    height: 0,\n    borderRadius: '50%',\n    backgroundColor: alpha(theme.palette.primary.main, 0.3),\n    transform: 'translate(-50%, -50%)',\n    transition: 'width 0.6s, height 0.6s',\n  },\n  '&:active::after': { width: '300%', height: '300%' },\n});\n\ninterface SurfaceInput {\n  theme: Theme;\n  flags: LabelStyleFlags;\n  /** The resolved text colour, or the primary accent when it resolves to none. */\n  accent: string;\n}\n\n/**\n * Each variant's own additions. Every arm previously re-spread the same base,\n * glow, pulse and ripple objects and re-derived the colour for each use; the\n * shared prefix is applied once by `labelStyles`.\n *\n * The hover rules are only attached when the label is clickable, which is what\n * the `onClick ? {…} : {}` in every arm was saying.\n */\nconst SURFACES: Record<Variant, (input: SurfaceInput) => CSSObject> = {\n  filled: ({ theme, flags, accent }) => ({\n    backgroundColor: alpha(accent, 0.1),\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable ? { backgroundColor: alpha(accent, 0.15) } : {},\n  }),\n\n  outlined: ({ theme, flags, accent }) => ({\n    border: `1px solid ${alpha(accent, 0.5)}`,\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable\n      ? { borderColor: accent, backgroundColor: alpha(accent, 0.05) }\n      : {},\n  }),\n\n  glass: ({ theme, flags }) => ({\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: 'blur(10px)',\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable\n      ? {\n          backgroundColor: alpha(theme.palette.background.paper, 0.15),\n          borderColor: alpha(theme.palette.primary.main, 0.3),\n        }\n      : {},\n  }),\n\n  gradient: ({ theme, flags }) => {\n    // `neutral` has no accent of its own in the gradient; it borrows primary,\n    // which is what this branch already did before the vocabulary was named.\n    const accent = accentFor(theme, flags.color === 'neutral' ? 'primary' : flags.color);\n    // The gradient paints the glyphs themselves rather than the box behind them.\n    const clip = {\n      WebkitBackgroundClip: 'text',\n      WebkitTextFillColor: 'transparent',\n      backgroundClip: 'text',\n    };\n\n    return {\n      background: `linear-gradient(135deg, ${accent.light}, ${accent.main})`,\n      ...clip,\n      '&:hover': flags.clickable\n        ? {\n            background: `linear-gradient(135deg, ${accent.main}, ${accent.dark})`,\n            ...clip,\n          }\n        : {},\n    };\n  },\n\n  minimal: ({ theme, flags }) => ({\n    padding: 0,\n    '&:hover': flags.clickable ? { color: theme.palette.primary.main } : {},\n  }),\n\n  default: () => ({}),\n};\n\n/** How the text sits: its alignment, weight, casing and overflow behaviour. */\nconst textLayout = (theme: Theme, flags: LabelStyleFlags): CSSObject => {\n  const { srOnly, clickable, align, weight, transform, nowrap, truncate } = flags;\n\n  return {\n    display: srOnly ? 'none' : 'inline-flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    transition: theme.transitions.create(['all'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    cursor: clickable ? 'pointer' : 'default',\n    textAlign: align,\n    fontWeight: fontWeight(weight),\n    textTransform: transform,\n    whiteSpace: nowrap ? 'nowrap' : 'normal',\n    overflow: truncate ? 'hidden' : 'visible',\n    textOverflow: truncate ? 'ellipsis' : 'clip',\n    position: 'relative' as const,\n  };\n};\n\nexport const labelStyles = (theme: Theme, flags: LabelStyleFlags): CSSObject => {\n  const { variant, size, clickable } = flags;\n  const color = textColor(theme, flags);\n  const accent = color || theme.palette.primary.main;\n\n  return {\n    ...textLayout(theme, flags),\n    ...sizeStyles(theme, size),\n    color,\n    ...(flags.glow && { textShadow: `0 0 10px ${alpha(accent, 0.5)}` }),\n    ...(flags.pulse && {\n      animation: 'pulse 2s infinite',\n      '@keyframes pulse': {\n        '0%': { opacity: 1 },\n        '50%': { opacity: 0.6 },\n        '100%': { opacity: 1 },\n      },\n    }),\n    ...(flags.ripple && clickable && rippleStyles(theme)),\n    ...(SURFACES[variant] ?? SURFACES.default)({ theme, flags, accent }),\n  };\n};\n\n/** Visually hidden but still read aloud, for the `srOnly` label. */\nexport const SR_ONLY_SX: CSSObject = {\n  position: 'absolute',\n  width: '1px',\n  height: '1px',\n  padding: 0,\n  margin: '-1px',\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n};\n"],"mappings":"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","names":["Box","useTheme","Fragment","jsx","jsxs","useTheme","Box"]}