@brycks/core-front 0.3.5 → 0.5.0

package/dist/components/form/FileInput/FileInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.cjs","sources":["../../../../src/components/form/FileInput/FileInput.tsx"],"sourcesContent":["/**\n * FileInput Component\n *\n * Accessible file upload input with drag-and-drop support.\n * Supports multiple files and file type restrictions.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type DragEvent,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FileInputSize = 'sm' | 'md' | 'lg'\nexport type FileInputVariant = 'default' | 'dropzone'\n\nexport interface FileInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'value'> {\n  /** Input size */\n  size?: FileInputSize\n  /** Input variant */\n  variant?: FileInputVariant\n  /** Accepted file types (e.g., \"image/*,.pdf\") */\n  accept?: string\n  /** Whether multiple files can be selected */\n  multiple?: boolean\n  /** Maximum file size in bytes */\n  maxSize?: number\n  /** Label text */\n  label?: ReactNode\n  /** Description text inside dropzone */\n  description?: ReactNode\n  /** Error message */\n  error?: ReactNode\n  /** Whether the input is invalid */\n  isInvalid?: boolean\n  /** Callback when files are selected */\n  onChange?: (files: File[]) => void\n  /** Icon to display in dropzone */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FileInputSize, { height: number; fontSize: number; padding: number; iconSize: number }> = {\n  sm: { height: 80, fontSize: 12, padding: 16, iconSize: 24 },\n  md: { height: 120, fontSize: 14, padding: 24, iconSize: 32 },\n  lg: { height: 160, fontSize: 16, padding: 32, iconSize: 40 },\n}\n\nfunction UploadIcon({ size }: { size: number }) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" />\n    </svg>\n  )\n}\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(function FileInput(\n  {\n    size = 'md',\n    variant = 'dropzone',\n    accept,\n    multiple = false,\n    maxSize,\n    label,\n    description,\n    error,\n    isInvalid = false,\n    onChange,\n    icon,\n    disabled = false,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [isDragOver, setIsDragOver] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const handleFiles = useCallback(\n    (fileList: FileList | null) => {\n      if (!fileList || fileList.length === 0) return\n\n      let files = Array.from(fileList)\n\n      // Filter by max size if specified\n      if (maxSize) {\n        files = files.filter((file) => file.size <= maxSize)\n      }\n\n      // If not multiple, only take first file\n      if (!multiple && files.length > 1) {\n        files = [files[0]]\n      }\n\n      onChange?.(files)\n    },\n    [maxSize, multiple, onChange]\n  )\n\n  const handleDragOver = useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    if (!disabled) {\n      setIsDragOver(true)\n    }\n  }, [disabled])\n\n  const handleDragLeave = useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDragOver(false)\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setIsDragOver(false)\n\n      if (!disabled) {\n        handleFiles(e.dataTransfer.files)\n      }\n    },\n    [disabled, handleFiles]\n  )\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      handleFiles(e.target.files)\n      // Reset input value to allow selecting the same file again\n      if (inputRef.current) {\n        inputRef.current.value = ''\n      }\n    },\n    [handleFiles]\n  )\n\n  const handleClick = useCallback(() => {\n    if (!disabled) {\n      inputRef.current?.click()\n    }\n  }, [disabled])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if ((e.key === 'Enter' || e.key === ' ') && !disabled) {\n        e.preventDefault()\n        inputRef.current?.click()\n      }\n    },\n    [disabled]\n  )\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 6,\n    ...style,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const dropzoneStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 8,\n    minHeight: config.height,\n    padding: config.padding,\n    border: `2px dashed ${\n      hasError\n        ? 'var(--brycks-error-default)'\n        : isDragOver\n        ? 'var(--brycks-primary-default)'\n        : isFocused\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }`,\n    borderRadius: 'var(--brycks-radius-lg)',\n    backgroundColor: isDragOver\n      ? 'var(--brycks-primary-50)'\n      : 'var(--brycks-background-muted)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    transition: 'all 150ms ease-out',\n    outline: 'none',\n  }\n\n  const iconContainerStyle: CSSProperties = {\n    color: isDragOver\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-foreground-muted)',\n    transition: 'color 150ms ease-out',\n  }\n\n  const textContainerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    gap: 4,\n    textAlign: 'center',\n  }\n\n  const primaryTextStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const secondaryTextStyle: CSSProperties = {\n    fontSize: config.fontSize - 2,\n    color: 'var(--brycks-foreground-muted)',\n  }\n\n  const browseStyle: CSSProperties = {\n    color: 'var(--brycks-primary-default)',\n    fontWeight: 500,\n  }\n\n  const errorStyle: CSSProperties = {\n    fontSize: config.fontSize - 2,\n    color: 'var(--brycks-error-default)',\n  }\n\n  const defaultDescription = multiple\n    ? 'Drag files here or click to browse'\n    : 'Drag a file here or click to browse'\n\n  return (\n    <div\n      className={cx('brycks-file-input', `brycks-file-input--${size}`, `brycks-file-input--${variant}`, className)}\n      style={containerStyle}\n    >\n      {label && <label style={labelStyle}>{label}</label>}\n      <div\n        style={dropzoneStyle}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        tabIndex={disabled ? -1 : 0}\n        role=\"button\"\n        aria-label={String(description) || defaultDescription}\n      >\n        <div style={iconContainerStyle}>\n          {icon || <UploadIcon size={config.iconSize} />}\n        </div>\n        <div style={textContainerStyle}>\n          <span style={primaryTextStyle}>\n            {isDragOver ? 'Drop files here' : (\n              <>\n                <span style={browseStyle}>Click to browse</span> or drag files here\n              </>\n            )}\n          </span>\n          {description && <span style={secondaryTextStyle}>{description}</span>}\n        </div>\n      </div>\n      {error && <span style={errorStyle}>{error}</span>}\n      <input\n        ref={(node) => {\n          (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n          if (typeof ref === 'function') ref(node)\n          else if (ref) ref.current = node\n        }}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        disabled={disabled}\n        onChange={handleChange}\n        style={{ display: 'none' }}\n        data-testid={testId}\n        {...props}\n      />\n    </div>\n  )\n})\n\nFileInput.displayName = 'FileInput'\n"],"names":["sizeConfig","UploadIcon","size","jsx","FileInput","forwardRef","variant","accept","multiple","maxSize","label","description","error","isInvalid","onChange","icon","disabled","className","style","testId","props","ref","isDragOver","setIsDragOver","useState","isFocused","setIsFocused","inputRef","useRef","config","hasError","handleFiles","useCallback","fileList","files","file","handleDragOver","handleDragLeave","handleDrop","handleChange","handleClick","handleKeyDown","containerStyle","labelStyle","dropzoneStyle","iconContainerStyle","textContainerStyle","primaryTextStyle","secondaryTextStyle","browseStyle","errorStyle","defaultDescription","jsxs","cx","Fragment","node"],"mappings":"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"}
+{"version":3,"file":"FileInput.cjs","sources":["../../../../src/components/form/FileInput/FileInput.tsx"],"sourcesContent":["/**\n * FileInput Component\n *\n * Accessible file upload input with drag-and-drop support.\n * Supports multiple files and file type restrictions.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type DragEvent,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FileInputSize = 'sm' | 'md' | 'lg'\nexport type FileInputVariant = 'default' | 'dropzone'\n\nexport interface FileInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'value'> {\n  /** Input size */\n  size?: FileInputSize\n  /** Input variant */\n  variant?: FileInputVariant\n  /** Accepted file types (e.g., \"image/*,.pdf\") */\n  accept?: string\n  /** Whether multiple files can be selected */\n  multiple?: boolean\n  /** Maximum file size in bytes */\n  maxSize?: number\n  /** Label text */\n  label?: ReactNode\n  /** Description text inside dropzone */\n  description?: ReactNode\n  /** Error message */\n  error?: ReactNode\n  /** Whether the input is invalid */\n  isInvalid?: boolean\n  /** Callback when files are selected */\n  onChange?: (files: File[]) => void\n  /** Icon to display in dropzone */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FileInputSize, { height: number; fontSize: number; padding: number; iconSize: number }> = {\n  sm: { height: 80, fontSize: 12, padding: 16, iconSize: 24 },\n  md: { height: 120, fontSize: 14, padding: 24, iconSize: 32 },\n  lg: { height: 160, fontSize: 16, padding: 32, iconSize: 40 },\n}\n\nfunction UploadIcon({ size }: { size: number }) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" />\n    </svg>\n  )\n}\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(function FileInput(\n  {\n    size = 'md',\n    variant = 'dropzone',\n    accept,\n    multiple = false,\n    maxSize,\n    label,\n    description,\n    error,\n    isInvalid = false,\n    onChange,\n    icon,\n    disabled = false,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [isDragOver, setIsDragOver] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const handleFiles = useCallback(\n    (fileList: FileList | null) => {\n      if (!fileList || fileList.length === 0) return\n\n      let files = Array.from(fileList)\n\n      // Filter by max size if specified\n      if (maxSize) {\n        files = files.filter((file) => file.size <= maxSize)\n      }\n\n      // If not multiple, only take first file\n      if (!multiple && files.length > 1) {\n        files = [files[0]]\n      }\n\n      onChange?.(files)\n    },\n    [maxSize, multiple, onChange]\n  )\n\n  const handleDragOver = useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    if (!disabled) {\n      setIsDragOver(true)\n    }\n  }, [disabled])\n\n  const handleDragLeave = useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDragOver(false)\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setIsDragOver(false)\n\n      if (!disabled) {\n        handleFiles(e.dataTransfer.files)\n      }\n    },\n    [disabled, handleFiles]\n  )\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      handleFiles(e.target.files)\n      // Reset input value to allow selecting the same file again\n      if (inputRef.current) {\n        inputRef.current.value = ''\n      }\n    },\n    [handleFiles]\n  )\n\n  const handleClick = useCallback(() => {\n    if (!disabled) {\n      inputRef.current?.click()\n    }\n  }, [disabled])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if ((e.key === 'Enter' || e.key === ' ') && !disabled) {\n        e.preventDefault()\n        inputRef.current?.click()\n      }\n    },\n    [disabled]\n  )\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 6,\n    ...style,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const dropzoneStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 8,\n    minHeight: config.height,\n    padding: config.padding,\n    border: `2px dashed ${\n      hasError\n        ? 'var(--brycks-error-default)'\n        : isDragOver\n        ? 'var(--brycks-primary-default)'\n        : isFocused\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }`,\n    borderRadius: 'var(--brycks-radius-lg)',\n    backgroundColor: isDragOver\n      ? 'var(--brycks-primary-muted)'\n      : 'var(--brycks-background-muted)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    transition: 'all 150ms ease-out',\n    outline: 'none',\n  }\n\n  const iconContainerStyle: CSSProperties = {\n    color: isDragOver\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-foreground-muted)',\n    transition: 'color 150ms ease-out',\n  }\n\n  const textContainerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    gap: 4,\n    textAlign: 'center',\n  }\n\n  const primaryTextStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const secondaryTextStyle: CSSProperties = {\n    fontSize: config.fontSize - 2,\n    color: 'var(--brycks-foreground-muted)',\n  }\n\n  const browseStyle: CSSProperties = {\n    color: 'var(--brycks-primary-default)',\n    fontWeight: 500,\n  }\n\n  const errorStyle: CSSProperties = {\n    fontSize: config.fontSize - 2,\n    color: 'var(--brycks-error-default)',\n  }\n\n  const defaultDescription = multiple\n    ? 'Drag files here or click to browse'\n    : 'Drag a file here or click to browse'\n\n  return (\n    <div\n      className={cx('brycks-file-input', `brycks-file-input--${size}`, `brycks-file-input--${variant}`, className)}\n      style={containerStyle}\n    >\n      {label && <label style={labelStyle}>{label}</label>}\n      <div\n        style={dropzoneStyle}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        tabIndex={disabled ? -1 : 0}\n        role=\"button\"\n        aria-label={String(description) || defaultDescription}\n      >\n        <div style={iconContainerStyle}>\n          {icon || <UploadIcon size={config.iconSize} />}\n        </div>\n        <div style={textContainerStyle}>\n          <span style={primaryTextStyle}>\n            {isDragOver ? 'Drop files here' : (\n              <>\n                <span style={browseStyle}>Click to browse</span> or drag files here\n              </>\n            )}\n          </span>\n          {description && <span style={secondaryTextStyle}>{description}</span>}\n        </div>\n      </div>\n      {error && <span style={errorStyle}>{error}</span>}\n      <input\n        ref={(node) => {\n          (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n          if (typeof ref === 'function') ref(node)\n          else if (ref) ref.current = node\n        }}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        disabled={disabled}\n        onChange={handleChange}\n        style={{ display: 'none' }}\n        data-testid={testId}\n        {...props}\n      />\n    </div>\n  )\n})\n\nFileInput.displayName = 'FileInput'\n"],"names":["sizeConfig","UploadIcon","size","jsx","FileInput","forwardRef","variant","accept","multiple","maxSize","label","description","error","isInvalid","onChange","icon","disabled","className","style","testId","props","ref","isDragOver","setIsDragOver","useState","isFocused","setIsFocused","inputRef","useRef","config","hasError","handleFiles","useCallback","fileList","files","file","handleDragOver","handleDragLeave","handleDrop","handleChange","handleClick","handleKeyDown","containerStyle","labelStyle","dropzoneStyle","iconContainerStyle","textContainerStyle","primaryTextStyle","secondaryTextStyle","browseStyle","errorStyle","defaultDescription","jsxs","cx","Fragment","node"],"mappings":"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"}

package/dist/components/form/FileInput/FileInput.js

@@ -74,7 +74,7 @@ const re = X(function({
     padding: n.padding,
     border: `2px dashed ${R ? "var(--brycks-error-default)" : c || O ? "var(--brycks-primary-default)" : "var(--brycks-border-default)"}`,
     borderRadius: "var(--brycks-radius-lg)",
-    backgroundColor: c ? "var(--brycks-primary-50)" : "var(--brycks-background-muted)",
+    backgroundColor: c ? "var(--brycks-primary-muted)" : "var(--brycks-background-muted)",
     cursor: r ? "not-allowed" : "pointer",
     opacity: r ? 0.5 : 1,
     transition: "all 150ms ease-out",

package/dist/components/form/FileInput/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","sources":["../../../../src/components/form/FileInput/FileInput.tsx"],"sourcesContent":["/**\n * FileInput Component\n *\n * Accessible file upload input with drag-and-drop support.\n * Supports multiple files and file type restrictions.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type DragEvent,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FileInputSize = 'sm' | 'md' | 'lg'\nexport type FileInputVariant = 'default' | 'dropzone'\n\nexport interface FileInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'value'> {\n  /** Input size */\n  size?: FileInputSize\n  /** Input variant */\n  variant?: FileInputVariant\n  /** Accepted file types (e.g., \"image/*,.pdf\") */\n  accept?: string\n  /** Whether multiple files can be selected */\n  multiple?: boolean\n  /** Maximum file size in bytes */\n  maxSize?: number\n  /** Label text */\n  label?: ReactNode\n  /** Description text inside dropzone */\n  description?: ReactNode\n  /** Error message */\n  error?: ReactNode\n  /** Whether the input is invalid */\n  isInvalid?: boolean\n  /** Callback when files are selected */\n  onChange?: (files: File[]) => void\n  /** Icon to display in dropzone */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FileInputSize, { height: number; fontSize: number; padding: number; iconSize: number }> = {\n  sm: { height: 80, fontSize: 12, padding: 16, iconSize: 24 },\n  md: { height: 120, fontSize: 14, padding: 24, iconSize: 32 },\n  lg: { height: 160, fontSize: 16, padding: 32, iconSize: 40 },\n}\n\nfunction UploadIcon({ size }: { size: number }) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" />\n    </svg>\n  )\n}\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(function FileInput(\n  {\n    size = 'md',\n    variant = 'dropzone',\n    accept,\n    multiple = false,\n    maxSize,\n    label,\n    description,\n    error,\n    isInvalid = false,\n    onChange,\n    icon,\n    disabled = false,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [isDragOver, setIsDragOver] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const handleFiles = useCallback(\n    (fileList: FileList | null) => {\n      if (!fileList || fileList.length === 0) return\n\n      let files = Array.from(fileList)\n\n      // Filter by max size if specified\n      if (maxSize) {\n        files = files.filter((file) => file.size <= maxSize)\n      }\n\n      // If not multiple, only take first file\n      if (!multiple && files.length > 1) {\n        files = [files[0]]\n      }\n\n      onChange?.(files)\n    },\n    [maxSize, multiple, onChange]\n  )\n\n  const handleDragOver = useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    if (!disabled) {\n      setIsDragOver(true)\n    }\n  }, [disabled])\n\n  const handleDragLeave = useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDragOver(false)\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setIsDragOver(false)\n\n      if (!disabled) {\n        handleFiles(e.dataTransfer.files)\n      }\n    },\n    [disabled, handleFiles]\n  )\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      handleFiles(e.target.files)\n      // Reset input value to allow selecting the same file again\n      if (inputRef.current) {\n        inputRef.current.value = ''\n      }\n    },\n    [handleFiles]\n  )\n\n  const handleClick = useCallback(() => {\n    if (!disabled) {\n      inputRef.current?.click()\n    }\n  }, [disabled])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if ((e.key === 'Enter' || e.key === ' ') && !disabled) {\n        e.preventDefault()\n        inputRef.current?.click()\n      }\n    },\n    [disabled]\n  )\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 6,\n    ...style,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const dropzoneStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 8,\n    minHeight: config.height,\n    padding: config.padding,\n    border: `2px dashed ${\n      hasError\n        ? 'var(--brycks-error-default)'\n        : isDragOver\n        ? 'var(--brycks-primary-default)'\n        : isFocused\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }`,\n    borderRadius: 'var(--brycks-radius-lg)',\n    backgroundColor: isDragOver\n      ? 'var(--brycks-primary-50)'\n      : 'var(--brycks-background-muted)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    transition: 'all 150ms ease-out',\n    outline: 'none',\n  }\n\n  const iconContainerStyle: CSSProperties = {\n    color: isDragOver\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-foreground-muted)',\n    transition: 'color 150ms ease-out',\n  }\n\n  const textContainerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    gap: 4,\n    textAlign: 'center',\n  }\n\n  const primaryTextStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const secondaryTextStyle: CSSProperties = {\n    fontSize: config.fontSize - 2,\n    color: 'var(--brycks-foreground-muted)',\n  }\n\n  const browseStyle: CSSProperties = {\n    color: 'var(--brycks-primary-default)',\n    fontWeight: 500,\n  }\n\n  const errorStyle: CSSProperties = {\n    fontSize: config.fontSize - 2,\n    color: 'var(--brycks-error-default)',\n  }\n\n  const defaultDescription = multiple\n    ? 'Drag files here or click to browse'\n    : 'Drag a file here or click to browse'\n\n  return (\n    <div\n      className={cx('brycks-file-input', `brycks-file-input--${size}`, `brycks-file-input--${variant}`, className)}\n      style={containerStyle}\n    >\n      {label && <label style={labelStyle}>{label}</label>}\n      <div\n        style={dropzoneStyle}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        tabIndex={disabled ? -1 : 0}\n        role=\"button\"\n        aria-label={String(description) || defaultDescription}\n      >\n        <div style={iconContainerStyle}>\n          {icon || <UploadIcon size={config.iconSize} />}\n        </div>\n        <div style={textContainerStyle}>\n          <span style={primaryTextStyle}>\n            {isDragOver ? 'Drop files here' : (\n              <>\n                <span style={browseStyle}>Click to browse</span> or drag files here\n              </>\n            )}\n          </span>\n          {description && <span style={secondaryTextStyle}>{description}</span>}\n        </div>\n      </div>\n      {error && <span style={errorStyle}>{error}</span>}\n      <input\n        ref={(node) => {\n          (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n          if (typeof ref === 'function') ref(node)\n          else if (ref) ref.current = node\n        }}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        disabled={disabled}\n        onChange={handleChange}\n        style={{ display: 'none' }}\n        data-testid={testId}\n        {...props}\n      />\n    </div>\n  )\n})\n\nFileInput.displayName = 'FileInput'\n"],"names":["sizeConfig","UploadIcon","size","jsx","FileInput","forwardRef","variant","accept","multiple","maxSize","label","description","error","isInvalid","onChange","icon","disabled","className","style","testId","props","ref","isDragOver","setIsDragOver","useState","isFocused","setIsFocused","inputRef","useRef","config","hasError","handleFiles","useCallback","fileList","files","file","handleDragOver","handleDragLeave","handleDrop","handleChange","handleClick","handleKeyDown","containerStyle","labelStyle","dropzoneStyle","iconContainerStyle","textContainerStyle","primaryTextStyle","secondaryTextStyle","browseStyle","errorStyle","defaultDescription","jsxs","cx","Fragment","node"],"mappings":"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"}
+{"version":3,"file":"FileInput.js","sources":["../../../../src/components/form/FileInput/FileInput.tsx"],"sourcesContent":["/**\n * FileInput Component\n *\n * Accessible file upload input with drag-and-drop support.\n * Supports multiple files and file type restrictions.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type DragEvent,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FileInputSize = 'sm' | 'md' | 'lg'\nexport type FileInputVariant = 'default' | 'dropzone'\n\nexport interface FileInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'value'> {\n  /** Input size */\n  size?: FileInputSize\n  /** Input variant */\n  variant?: FileInputVariant\n  /** Accepted file types (e.g., \"image/*,.pdf\") */\n  accept?: string\n  /** Whether multiple files can be selected */\n  multiple?: boolean\n  /** Maximum file size in bytes */\n  maxSize?: number\n  /** Label text */\n  label?: ReactNode\n  /** Description text inside dropzone */\n  description?: ReactNode\n  /** Error message */\n  error?: ReactNode\n  /** Whether the input is invalid */\n  isInvalid?: boolean\n  /** Callback when files are selected */\n  onChange?: (files: File[]) => void\n  /** Icon to display in dropzone */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FileInputSize, { height: number; fontSize: number; padding: number; iconSize: number }> = {\n  sm: { height: 80, fontSize: 12, padding: 16, iconSize: 24 },\n  md: { height: 120, fontSize: 14, padding: 24, iconSize: 32 },\n  lg: { height: 160, fontSize: 16, padding: 32, iconSize: 40 },\n}\n\nfunction UploadIcon({ size }: { size: number }) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" />\n    </svg>\n  )\n}\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(function FileInput(\n  {\n    size = 'md',\n    variant = 'dropzone',\n    accept,\n    multiple = false,\n    maxSize,\n    label,\n    description,\n    error,\n    isInvalid = false,\n    onChange,\n    icon,\n    disabled = false,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [isDragOver, setIsDragOver] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const handleFiles = useCallback(\n    (fileList: FileList | null) => {\n      if (!fileList || fileList.length === 0) return\n\n      let files = Array.from(fileList)\n\n      // Filter by max size if specified\n      if (maxSize) {\n        files = files.filter((file) => file.size <= maxSize)\n      }\n\n      // If not multiple, only take first file\n      if (!multiple && files.length > 1) {\n        files = [files[0]]\n      }\n\n      onChange?.(files)\n    },\n    [maxSize, multiple, onChange]\n  )\n\n  const handleDragOver = useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    if (!disabled) {\n      setIsDragOver(true)\n    }\n  }, [disabled])\n\n  const handleDragLeave = useCallback((e: DragEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDragOver(false)\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setIsDragOver(false)\n\n      if (!disabled) {\n        handleFiles(e.dataTransfer.files)\n      }\n    },\n    [disabled, handleFiles]\n  )\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      handleFiles(e.target.files)\n      // Reset input value to allow selecting the same file again\n      if (inputRef.current) {\n        inputRef.current.value = ''\n      }\n    },\n    [handleFiles]\n  )\n\n  const handleClick = useCallback(() => {\n    if (!disabled) {\n      inputRef.current?.click()\n    }\n  }, [disabled])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if ((e.key === 'Enter' || e.key === ' ') && !disabled) {\n        e.preventDefault()\n        inputRef.current?.click()\n      }\n    },\n    [disabled]\n  )\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 6,\n    ...style,\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const dropzoneStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 8,\n    minHeight: config.height,\n    padding: config.padding,\n    border: `2px dashed ${\n      hasError\n        ? 'var(--brycks-error-default)'\n        : isDragOver\n        ? 'var(--brycks-primary-default)'\n        : isFocused\n        ? 'var(--brycks-primary-default)'\n        : 'var(--brycks-border-default)'\n    }`,\n    borderRadius: 'var(--brycks-radius-lg)',\n    backgroundColor: isDragOver\n      ? 'var(--brycks-primary-muted)'\n      : 'var(--brycks-background-muted)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    transition: 'all 150ms ease-out',\n    outline: 'none',\n  }\n\n  const iconContainerStyle: CSSProperties = {\n    color: isDragOver\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-foreground-muted)',\n    transition: 'color 150ms ease-out',\n  }\n\n  const textContainerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    gap: 4,\n    textAlign: 'center',\n  }\n\n  const primaryTextStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    fontWeight: 500,\n    color: 'var(--brycks-foreground-default)',\n  }\n\n  const secondaryTextStyle: CSSProperties = {\n    fontSize: config.fontSize - 2,\n    color: 'var(--brycks-foreground-muted)',\n  }\n\n  const browseStyle: CSSProperties = {\n    color: 'var(--brycks-primary-default)',\n    fontWeight: 500,\n  }\n\n  const errorStyle: CSSProperties = {\n    fontSize: config.fontSize - 2,\n    color: 'var(--brycks-error-default)',\n  }\n\n  const defaultDescription = multiple\n    ? 'Drag files here or click to browse'\n    : 'Drag a file here or click to browse'\n\n  return (\n    <div\n      className={cx('brycks-file-input', `brycks-file-input--${size}`, `brycks-file-input--${variant}`, className)}\n      style={containerStyle}\n    >\n      {label && <label style={labelStyle}>{label}</label>}\n      <div\n        style={dropzoneStyle}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        tabIndex={disabled ? -1 : 0}\n        role=\"button\"\n        aria-label={String(description) || defaultDescription}\n      >\n        <div style={iconContainerStyle}>\n          {icon || <UploadIcon size={config.iconSize} />}\n        </div>\n        <div style={textContainerStyle}>\n          <span style={primaryTextStyle}>\n            {isDragOver ? 'Drop files here' : (\n              <>\n                <span style={browseStyle}>Click to browse</span> or drag files here\n              </>\n            )}\n          </span>\n          {description && <span style={secondaryTextStyle}>{description}</span>}\n        </div>\n      </div>\n      {error && <span style={errorStyle}>{error}</span>}\n      <input\n        ref={(node) => {\n          (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n          if (typeof ref === 'function') ref(node)\n          else if (ref) ref.current = node\n        }}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        disabled={disabled}\n        onChange={handleChange}\n        style={{ display: 'none' }}\n        data-testid={testId}\n        {...props}\n      />\n    </div>\n  )\n})\n\nFileInput.displayName = 'FileInput'\n"],"names":["sizeConfig","UploadIcon","size","jsx","FileInput","forwardRef","variant","accept","multiple","maxSize","label","description","error","isInvalid","onChange","icon","disabled","className","style","testId","props","ref","isDragOver","setIsDragOver","useState","isFocused","setIsFocused","inputRef","useRef","config","hasError","handleFiles","useCallback","fileList","files","file","handleDragOver","handleDragLeave","handleDrop","handleChange","handleClick","handleKeyDown","containerStyle","labelStyle","dropzoneStyle","iconContainerStyle","textContainerStyle","primaryTextStyle","secondaryTextStyle","browseStyle","errorStyle","defaultDescription","jsxs","cx","Fragment","node"],"mappings":"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"}

package/dist/components/form/FormCard/FormCard.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),h=require("react"),p=require("../../../utils/styles.cjs"),x={neutral:"var(--brycks-background-muted)",primary:"var(--brycks-primary-muted)",success:"var(--brycks-success-muted)",warning:"var(--brycks-warning-muted)",error:"var(--brycks-error-muted)",info:"var(--brycks-info-muted)"},t=h.forwardRef(function({title:e,icon:s,iconIntent:c="primary",headerExtra:a,children:d,className:o,style:n,testId:i,...l},y){const b={background:"var(--brycks-background-card)",borderRadius:"var(--brycks-radius-lg)",border:"1px solid var(--brycks-border-subtle)",overflow:"hidden",...n},m={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px 20px",borderBottom:"1px solid var(--brycks-border-subtle)"},u={display:"flex",alignItems:"center",gap:12},f={width:32,height:32,borderRadius:"50%",background:x[c],display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},k={fontFamily:"var(--brycks-font-sans)",fontSize:"var(--brycks-font-size-md)",fontWeight:600,color:"var(--brycks-foreground-default)",lineHeight:1.4,margin:0},v={padding:20},g=e||s||a;return r.jsxs("div",{ref:y,className:p.cx("brycks-form-card",o),style:b,"data-testid":i,...l,children:[g&&r.jsxs("div",{className:"brycks-form-card__header",style:m,children:[r.jsxs("div",{style:u,children:[s&&r.jsx("div",{className:"brycks-form-card__icon",style:f,children:s}),e&&r.jsx("h3",{className:"brycks-form-card__title",style:k,children:e})]}),a&&r.jsx("div",{className:"brycks-form-card__header-extra",children:a})]}),r.jsx("div",{className:"brycks-form-card__body",style:v,children:d})]})});t.displayName="FormCard";exports.FormCard=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),h=require("react"),p=require("../../../utils/styles.cjs"),x={neutral:"var(--brycks-background-muted)",primary:"var(--brycks-primary-muted)",success:"var(--brycks-success-muted)",warning:"var(--brycks-warning-muted)",error:"var(--brycks-error-muted)",info:"var(--brycks-info-muted)"},a=h.forwardRef(function({title:e,icon:s,iconIntent:d="primary",headerExtra:t,children:c,className:o,style:n,testId:i,...l},y){const m={background:"var(--brycks-background-elevated)",borderRadius:"var(--brycks-radius-lg)",border:"1px solid var(--brycks-border-muted)",overflow:"hidden",...n},b={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px 20px",borderBottom:"1px solid var(--brycks-border-muted)"},u={display:"flex",alignItems:"center",gap:12},f={width:32,height:32,borderRadius:"50%",background:x[d],display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},k={fontFamily:"var(--brycks-font-sans)",fontSize:"var(--brycks-font-size-md)",fontWeight:600,color:"var(--brycks-foreground-default)",lineHeight:1.4,margin:0},v={padding:20},g=e||s||t;return r.jsxs("div",{ref:y,className:p.cx("brycks-form-card",o),style:m,"data-testid":i,...l,children:[g&&r.jsxs("div",{className:"brycks-form-card__header",style:b,children:[r.jsxs("div",{style:u,children:[s&&r.jsx("div",{className:"brycks-form-card__icon",style:f,children:s}),e&&r.jsx("h3",{className:"brycks-form-card__title",style:k,children:e})]}),t&&r.jsx("div",{className:"brycks-form-card__header-extra",children:t})]}),r.jsx("div",{className:"brycks-form-card__body",style:v,children:c})]})});a.displayName="FormCard";exports.FormCard=a;
 //# sourceMappingURL=FormCard.cjs.map

package/dist/components/form/FormCard/FormCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormCard.cjs","sources":["../../../../src/components/form/FormCard/FormCard.tsx"],"sourcesContent":["/**\n * FormCard Component\n *\n * Card wrapper optimized for form sections with optional icon and title.\n * Provides consistent spacing and visual hierarchy for form layouts.\n */\n\nimport {\n  forwardRef,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FormCardIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info'\n\nexport interface FormCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card title */\n  title?: string\n  /** Icon displayed before title */\n  icon?: ReactNode\n  /** Color intent for the icon circle */\n  iconIntent?: FormCardIntent\n  /** Additional content in the header (e.g., counter, badge) */\n  headerExtra?: ReactNode\n  /** Card body content */\n  children?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst intentColors: Record<FormCardIntent, string> = {\n  neutral: 'var(--brycks-background-muted)',\n  primary: 'var(--brycks-primary-muted)',\n  success: 'var(--brycks-success-muted)',\n  warning: 'var(--brycks-warning-muted)',\n  error: 'var(--brycks-error-muted)',\n  info: 'var(--brycks-info-muted)',\n}\n\nexport const FormCard = forwardRef<HTMLDivElement, FormCardProps>(\n  function FormCard(\n    {\n      title,\n      icon,\n      iconIntent = 'primary',\n      headerExtra,\n      children,\n      className,\n      style,\n      testId,\n      ...props\n    },\n    ref\n  ) {\n    const cardStyle: CSSProperties = {\n      background: 'var(--brycks-background-card)',\n      borderRadius: 'var(--brycks-radius-lg)',\n      border: '1px solid var(--brycks-border-subtle)',\n      overflow: 'hidden',\n      ...style,\n    }\n\n    const headerStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      padding: '16px 20px',\n      borderBottom: '1px solid var(--brycks-border-subtle)',\n    }\n\n    const headerLeftStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 12,\n    }\n\n    const iconCircleStyle: CSSProperties = {\n      width: 32,\n      height: 32,\n      borderRadius: '50%',\n      background: intentColors[iconIntent],\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    }\n\n    const titleStyle: CSSProperties = {\n      fontFamily: 'var(--brycks-font-sans)',\n      fontSize: 'var(--brycks-font-size-md)',\n      fontWeight: 600,\n      color: 'var(--brycks-foreground-default)',\n      lineHeight: 1.4,\n      margin: 0,\n    }\n\n    const bodyStyle: CSSProperties = {\n      padding: 20,\n    }\n\n    const hasHeader = title || icon || headerExtra\n\n    return (\n      <div\n        ref={ref}\n        className={cx('brycks-form-card', className)}\n        style={cardStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {hasHeader && (\n          <div className=\"brycks-form-card__header\" style={headerStyle}>\n            <div style={headerLeftStyle}>\n              {icon && (\n                <div\n                  className=\"brycks-form-card__icon\"\n                  style={iconCircleStyle}\n                >\n                  {icon}\n                </div>\n              )}\n              {title && (\n                <h3 className=\"brycks-form-card__title\" style={titleStyle}>\n                  {title}\n                </h3>\n              )}\n            </div>\n            {headerExtra && (\n              <div className=\"brycks-form-card__header-extra\">\n                {headerExtra}\n              </div>\n            )}\n          </div>\n        )}\n\n        <div className=\"brycks-form-card__body\" style={bodyStyle}>\n          {children}\n        </div>\n      </div>\n    )\n  }\n)\n\nFormCard.displayName = 'FormCard'\n"],"names":["intentColors","FormCard","forwardRef","title","icon","iconIntent","headerExtra","children","className","style","testId","props","ref","cardStyle","headerStyle","headerLeftStyle","iconCircleStyle","titleStyle","bodyStyle","hasHeader","jsxs","cx","jsx"],"mappings":"+KAkCMA,EAA+C,CACnD,QAAS,iCACT,QAAS,8BACT,QAAS,8BACT,QAAS,8BACT,MAAO,4BACP,KAAM,0BACR,EAEaC,EAAWC,EAAAA,WACtB,SACE,CACE,MAAAC,EACA,KAAAC,EACA,WAAAC,EAAa,UACb,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAA2B,CAC/B,WAAY,gCACZ,aAAc,0BACd,OAAQ,wCACR,SAAU,SACV,GAAGJ,CAAA,EAGCK,EAA6B,CACjC,QAAS,OACT,WAAY,SACZ,eAAgB,gBAChB,QAAS,YACT,aAAc,uCAAA,EAGVC,EAAiC,CACrC,QAAS,OACT,WAAY,SACZ,IAAK,EAAA,EAGDC,EAAiC,CACrC,MAAO,GACP,OAAQ,GACR,aAAc,MACd,WAAYhB,EAAaK,CAAU,EACnC,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,CAAA,EAGRY,EAA4B,CAChC,WAAY,0BACZ,SAAU,6BACV,WAAY,IACZ,MAAO,mCACP,WAAY,IACZ,OAAQ,CAAA,EAGJC,EAA2B,CAC/B,QAAS,EAAA,EAGLC,EAAYhB,GAASC,GAAQE,EAEnC,OACEc,EAAAA,KAAC,MAAA,CACC,IAAAR,EACA,UAAWS,EAAAA,GAAG,mBAAoBb,CAAS,EAC3C,MAAOK,EACP,cAAaH,EACZ,GAAGC,EAEH,SAAA,CAAAQ,GACCC,EAAAA,KAAC,MAAA,CAAI,UAAU,2BAA2B,MAAON,EAC/C,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,MAAOL,EACT,SAAA,CAAAX,GACCkB,EAAAA,IAAC,MAAA,CACC,UAAU,yBACV,MAAON,EAEN,SAAAZ,CAAA,CAAA,EAGJD,GACCmB,EAAAA,IAAC,KAAA,CAAG,UAAU,0BAA0B,MAAOL,EAC5C,SAAAd,CAAA,CACH,CAAA,EAEJ,EACCG,GACCgB,EAAAA,IAAC,MAAA,CAAI,UAAU,iCACZ,SAAAhB,CAAA,CACH,CAAA,EAEJ,QAGD,MAAA,CAAI,UAAU,yBAAyB,MAAOY,EAC5C,SAAAX,CAAA,CACH,CAAA,CAAA,CAAA,CAGN,CACF,EAEAN,EAAS,YAAc"}
+{"version":3,"file":"FormCard.cjs","sources":["../../../../src/components/form/FormCard/FormCard.tsx"],"sourcesContent":["/**\n * FormCard Component\n *\n * Card wrapper optimized for form sections with optional icon and title.\n * Provides consistent spacing and visual hierarchy for form layouts.\n */\n\nimport {\n  forwardRef,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FormCardIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info'\n\nexport interface FormCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card title */\n  title?: string\n  /** Icon displayed before title */\n  icon?: ReactNode\n  /** Color intent for the icon circle */\n  iconIntent?: FormCardIntent\n  /** Additional content in the header (e.g., counter, badge) */\n  headerExtra?: ReactNode\n  /** Card body content */\n  children?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst intentColors: Record<FormCardIntent, string> = {\n  neutral: 'var(--brycks-background-muted)',\n  primary: 'var(--brycks-primary-muted)',\n  success: 'var(--brycks-success-muted)',\n  warning: 'var(--brycks-warning-muted)',\n  error: 'var(--brycks-error-muted)',\n  info: 'var(--brycks-info-muted)',\n}\n\nexport const FormCard = forwardRef<HTMLDivElement, FormCardProps>(\n  function FormCard(\n    {\n      title,\n      icon,\n      iconIntent = 'primary',\n      headerExtra,\n      children,\n      className,\n      style,\n      testId,\n      ...props\n    },\n    ref\n  ) {\n    const cardStyle: CSSProperties = {\n      background: 'var(--brycks-background-elevated)',\n      borderRadius: 'var(--brycks-radius-lg)',\n      border: '1px solid var(--brycks-border-muted)',\n      overflow: 'hidden',\n      ...style,\n    }\n\n    const headerStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      padding: '16px 20px',\n      borderBottom: '1px solid var(--brycks-border-muted)',\n    }\n\n    const headerLeftStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 12,\n    }\n\n    const iconCircleStyle: CSSProperties = {\n      width: 32,\n      height: 32,\n      borderRadius: '50%',\n      background: intentColors[iconIntent],\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    }\n\n    const titleStyle: CSSProperties = {\n      fontFamily: 'var(--brycks-font-sans)',\n      fontSize: 'var(--brycks-font-size-md)',\n      fontWeight: 600,\n      color: 'var(--brycks-foreground-default)',\n      lineHeight: 1.4,\n      margin: 0,\n    }\n\n    const bodyStyle: CSSProperties = {\n      padding: 20,\n    }\n\n    const hasHeader = title || icon || headerExtra\n\n    return (\n      <div\n        ref={ref}\n        className={cx('brycks-form-card', className)}\n        style={cardStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {hasHeader && (\n          <div className=\"brycks-form-card__header\" style={headerStyle}>\n            <div style={headerLeftStyle}>\n              {icon && (\n                <div\n                  className=\"brycks-form-card__icon\"\n                  style={iconCircleStyle}\n                >\n                  {icon}\n                </div>\n              )}\n              {title && (\n                <h3 className=\"brycks-form-card__title\" style={titleStyle}>\n                  {title}\n                </h3>\n              )}\n            </div>\n            {headerExtra && (\n              <div className=\"brycks-form-card__header-extra\">\n                {headerExtra}\n              </div>\n            )}\n          </div>\n        )}\n\n        <div className=\"brycks-form-card__body\" style={bodyStyle}>\n          {children}\n        </div>\n      </div>\n    )\n  }\n)\n\nFormCard.displayName = 'FormCard'\n"],"names":["intentColors","FormCard","forwardRef","title","icon","iconIntent","headerExtra","children","className","style","testId","props","ref","cardStyle","headerStyle","headerLeftStyle","iconCircleStyle","titleStyle","bodyStyle","hasHeader","jsxs","cx","jsx"],"mappings":"+KAkCMA,EAA+C,CACnD,QAAS,iCACT,QAAS,8BACT,QAAS,8BACT,QAAS,8BACT,MAAO,4BACP,KAAM,0BACR,EAEaC,EAAWC,EAAAA,WACtB,SACE,CACE,MAAAC,EACA,KAAAC,EACA,WAAAC,EAAa,UACb,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAA2B,CAC/B,WAAY,oCACZ,aAAc,0BACd,OAAQ,uCACR,SAAU,SACV,GAAGJ,CAAA,EAGCK,EAA6B,CACjC,QAAS,OACT,WAAY,SACZ,eAAgB,gBAChB,QAAS,YACT,aAAc,sCAAA,EAGVC,EAAiC,CACrC,QAAS,OACT,WAAY,SACZ,IAAK,EAAA,EAGDC,EAAiC,CACrC,MAAO,GACP,OAAQ,GACR,aAAc,MACd,WAAYhB,EAAaK,CAAU,EACnC,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,CAAA,EAGRY,EAA4B,CAChC,WAAY,0BACZ,SAAU,6BACV,WAAY,IACZ,MAAO,mCACP,WAAY,IACZ,OAAQ,CAAA,EAGJC,EAA2B,CAC/B,QAAS,EAAA,EAGLC,EAAYhB,GAASC,GAAQE,EAEnC,OACEc,EAAAA,KAAC,MAAA,CACC,IAAAR,EACA,UAAWS,EAAAA,GAAG,mBAAoBb,CAAS,EAC3C,MAAOK,EACP,cAAaH,EACZ,GAAGC,EAEH,SAAA,CAAAQ,GACCC,EAAAA,KAAC,MAAA,CAAI,UAAU,2BAA2B,MAAON,EAC/C,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,MAAOL,EACT,SAAA,CAAAX,GACCkB,EAAAA,IAAC,MAAA,CACC,UAAU,yBACV,MAAON,EAEN,SAAAZ,CAAA,CAAA,EAGJD,GACCmB,EAAAA,IAAC,KAAA,CAAG,UAAU,0BAA0B,MAAOL,EAC5C,SAAAd,CAAA,CACH,CAAA,EAEJ,EACCG,GACCgB,EAAAA,IAAC,MAAA,CAAI,UAAU,iCACZ,SAAAhB,CAAA,CACH,CAAA,EAEJ,QAGD,MAAA,CAAI,UAAU,yBAAyB,MAAOY,EAC5C,SAAAX,CAAA,CACH,CAAA,CAAA,CAAA,CAGN,CACF,EAEAN,EAAS,YAAc"}

package/dist/components/form/FormCard/FormCard.js

@@ -1,4 +1,4 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
 import { forwardRef as g } from "react";
 import { cx as h } from "../../../utils/styles.js";
 const x = {
@@ -12,7 +12,7 @@ const x = {
   function({
     title: e,
     icon: s,
-    iconIntent: d = "primary",
+    iconIntent: t = "primary",
     headerExtra: a,
     children: c,
     className: o,
@@ -21,9 +21,9 @@ const x = {
     ...l
   }, y) {
     const m = {
-      background: "var(--brycks-background-card)",
+      background: "var(--brycks-background-elevated)",
       borderRadius: "var(--brycks-radius-lg)",
-      border: "1px solid var(--brycks-border-subtle)",
+      border: "1px solid var(--brycks-border-muted)",
       overflow: "hidden",
       ...n
     }, b = {
@@ -31,7 +31,7 @@ const x = {
       alignItems: "center",
       justifyContent: "space-between",
       padding: "16px 20px",
-      borderBottom: "1px solid var(--brycks-border-subtle)"
+      borderBottom: "1px solid var(--brycks-border-muted)"
     }, f = {
       display: "flex",
       alignItems: "center",
@@ -40,7 +40,7 @@ const x = {
       width: 32,
       height: 32,
       borderRadius: "50%",
-      background: x[d],
+      background: x[t],
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -55,7 +55,7 @@ const x = {
     }, v = {
       padding: 20
     }, p = e || s || a;
-    return /* @__PURE__ */ t(
+    return /* @__PURE__ */ d(
       "div",
       {
         ref: y,
@@ -64,8 +64,8 @@ const x = {
         "data-testid": i,
         ...l,
         children: [
-          p && /* @__PURE__ */ t("div", { className: "brycks-form-card__header", style: b, children: [
-            /* @__PURE__ */ t("div", { style: f, children: [
+          p && /* @__PURE__ */ d("div", { className: "brycks-form-card__header", style: b, children: [
+            /* @__PURE__ */ d("div", { style: f, children: [
               s && /* @__PURE__ */ r(
                 "div",
                 {

package/dist/components/form/FormCard/FormCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormCard.js","sources":["../../../../src/components/form/FormCard/FormCard.tsx"],"sourcesContent":["/**\n * FormCard Component\n *\n * Card wrapper optimized for form sections with optional icon and title.\n * Provides consistent spacing and visual hierarchy for form layouts.\n */\n\nimport {\n  forwardRef,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FormCardIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info'\n\nexport interface FormCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card title */\n  title?: string\n  /** Icon displayed before title */\n  icon?: ReactNode\n  /** Color intent for the icon circle */\n  iconIntent?: FormCardIntent\n  /** Additional content in the header (e.g., counter, badge) */\n  headerExtra?: ReactNode\n  /** Card body content */\n  children?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst intentColors: Record<FormCardIntent, string> = {\n  neutral: 'var(--brycks-background-muted)',\n  primary: 'var(--brycks-primary-muted)',\n  success: 'var(--brycks-success-muted)',\n  warning: 'var(--brycks-warning-muted)',\n  error: 'var(--brycks-error-muted)',\n  info: 'var(--brycks-info-muted)',\n}\n\nexport const FormCard = forwardRef<HTMLDivElement, FormCardProps>(\n  function FormCard(\n    {\n      title,\n      icon,\n      iconIntent = 'primary',\n      headerExtra,\n      children,\n      className,\n      style,\n      testId,\n      ...props\n    },\n    ref\n  ) {\n    const cardStyle: CSSProperties = {\n      background: 'var(--brycks-background-card)',\n      borderRadius: 'var(--brycks-radius-lg)',\n      border: '1px solid var(--brycks-border-subtle)',\n      overflow: 'hidden',\n      ...style,\n    }\n\n    const headerStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      padding: '16px 20px',\n      borderBottom: '1px solid var(--brycks-border-subtle)',\n    }\n\n    const headerLeftStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 12,\n    }\n\n    const iconCircleStyle: CSSProperties = {\n      width: 32,\n      height: 32,\n      borderRadius: '50%',\n      background: intentColors[iconIntent],\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    }\n\n    const titleStyle: CSSProperties = {\n      fontFamily: 'var(--brycks-font-sans)',\n      fontSize: 'var(--brycks-font-size-md)',\n      fontWeight: 600,\n      color: 'var(--brycks-foreground-default)',\n      lineHeight: 1.4,\n      margin: 0,\n    }\n\n    const bodyStyle: CSSProperties = {\n      padding: 20,\n    }\n\n    const hasHeader = title || icon || headerExtra\n\n    return (\n      <div\n        ref={ref}\n        className={cx('brycks-form-card', className)}\n        style={cardStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {hasHeader && (\n          <div className=\"brycks-form-card__header\" style={headerStyle}>\n            <div style={headerLeftStyle}>\n              {icon && (\n                <div\n                  className=\"brycks-form-card__icon\"\n                  style={iconCircleStyle}\n                >\n                  {icon}\n                </div>\n              )}\n              {title && (\n                <h3 className=\"brycks-form-card__title\" style={titleStyle}>\n                  {title}\n                </h3>\n              )}\n            </div>\n            {headerExtra && (\n              <div className=\"brycks-form-card__header-extra\">\n                {headerExtra}\n              </div>\n            )}\n          </div>\n        )}\n\n        <div className=\"brycks-form-card__body\" style={bodyStyle}>\n          {children}\n        </div>\n      </div>\n    )\n  }\n)\n\nFormCard.displayName = 'FormCard'\n"],"names":["intentColors","FormCard","forwardRef","title","icon","iconIntent","headerExtra","children","className","style","testId","props","ref","cardStyle","headerStyle","headerLeftStyle","iconCircleStyle","titleStyle","bodyStyle","hasHeader","jsxs","cx","jsx"],"mappings":";;;AAkCA,MAAMA,IAA+C;AAAA,EACnD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR,GAEaC,IAAWC;AAAA,EACtB,SACE;AAAA,IACE,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAA2B;AAAA,MAC/B,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,GAAGJ;AAAA,IAAA,GAGCK,IAA6B;AAAA,MACjC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,cAAc;AAAA,IAAA,GAGVC,IAAiC;AAAA,MACrC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,KAAK;AAAA,IAAA,GAGDC,IAAiC;AAAA,MACrC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,YAAYhB,EAAaK,CAAU;AAAA,MACnC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,YAAY;AAAA,IAAA,GAGRY,IAA4B;AAAA,MAChC,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,QAAQ;AAAA,IAAA,GAGJC,IAA2B;AAAA,MAC/B,SAAS;AAAA,IAAA,GAGLC,IAAYhB,KAASC,KAAQE;AAEnC,WACE,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,WAAWS,EAAG,oBAAoBb,CAAS;AAAA,QAC3C,OAAOK;AAAA,QACP,eAAaH;AAAA,QACZ,GAAGC;AAAA,QAEH,UAAA;AAAA,UAAAQ,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BAA2B,OAAON,GAC/C,UAAA;AAAA,YAAA,gBAAAM,EAAC,OAAA,EAAI,OAAOL,GACT,UAAA;AAAA,cAAAX,KACC,gBAAAkB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAON;AAAA,kBAEN,UAAAZ;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJD,KACC,gBAAAmB,EAAC,MAAA,EAAG,WAAU,2BAA0B,OAAOL,GAC5C,UAAAd,EAAA,CACH;AAAA,YAAA,GAEJ;AAAA,YACCG,KACC,gBAAAgB,EAAC,OAAA,EAAI,WAAU,kCACZ,UAAAhB,EAAA,CACH;AAAA,UAAA,GAEJ;AAAA,4BAGD,OAAA,EAAI,WAAU,0BAAyB,OAAOY,GAC5C,UAAAX,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAN,EAAS,cAAc;"}
+{"version":3,"file":"FormCard.js","sources":["../../../../src/components/form/FormCard/FormCard.tsx"],"sourcesContent":["/**\n * FormCard Component\n *\n * Card wrapper optimized for form sections with optional icon and title.\n * Provides consistent spacing and visual hierarchy for form layouts.\n */\n\nimport {\n  forwardRef,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type FormCardIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info'\n\nexport interface FormCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card title */\n  title?: string\n  /** Icon displayed before title */\n  icon?: ReactNode\n  /** Color intent for the icon circle */\n  iconIntent?: FormCardIntent\n  /** Additional content in the header (e.g., counter, badge) */\n  headerExtra?: ReactNode\n  /** Card body content */\n  children?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst intentColors: Record<FormCardIntent, string> = {\n  neutral: 'var(--brycks-background-muted)',\n  primary: 'var(--brycks-primary-muted)',\n  success: 'var(--brycks-success-muted)',\n  warning: 'var(--brycks-warning-muted)',\n  error: 'var(--brycks-error-muted)',\n  info: 'var(--brycks-info-muted)',\n}\n\nexport const FormCard = forwardRef<HTMLDivElement, FormCardProps>(\n  function FormCard(\n    {\n      title,\n      icon,\n      iconIntent = 'primary',\n      headerExtra,\n      children,\n      className,\n      style,\n      testId,\n      ...props\n    },\n    ref\n  ) {\n    const cardStyle: CSSProperties = {\n      background: 'var(--brycks-background-elevated)',\n      borderRadius: 'var(--brycks-radius-lg)',\n      border: '1px solid var(--brycks-border-muted)',\n      overflow: 'hidden',\n      ...style,\n    }\n\n    const headerStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      padding: '16px 20px',\n      borderBottom: '1px solid var(--brycks-border-muted)',\n    }\n\n    const headerLeftStyle: CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 12,\n    }\n\n    const iconCircleStyle: CSSProperties = {\n      width: 32,\n      height: 32,\n      borderRadius: '50%',\n      background: intentColors[iconIntent],\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    }\n\n    const titleStyle: CSSProperties = {\n      fontFamily: 'var(--brycks-font-sans)',\n      fontSize: 'var(--brycks-font-size-md)',\n      fontWeight: 600,\n      color: 'var(--brycks-foreground-default)',\n      lineHeight: 1.4,\n      margin: 0,\n    }\n\n    const bodyStyle: CSSProperties = {\n      padding: 20,\n    }\n\n    const hasHeader = title || icon || headerExtra\n\n    return (\n      <div\n        ref={ref}\n        className={cx('brycks-form-card', className)}\n        style={cardStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {hasHeader && (\n          <div className=\"brycks-form-card__header\" style={headerStyle}>\n            <div style={headerLeftStyle}>\n              {icon && (\n                <div\n                  className=\"brycks-form-card__icon\"\n                  style={iconCircleStyle}\n                >\n                  {icon}\n                </div>\n              )}\n              {title && (\n                <h3 className=\"brycks-form-card__title\" style={titleStyle}>\n                  {title}\n                </h3>\n              )}\n            </div>\n            {headerExtra && (\n              <div className=\"brycks-form-card__header-extra\">\n                {headerExtra}\n              </div>\n            )}\n          </div>\n        )}\n\n        <div className=\"brycks-form-card__body\" style={bodyStyle}>\n          {children}\n        </div>\n      </div>\n    )\n  }\n)\n\nFormCard.displayName = 'FormCard'\n"],"names":["intentColors","FormCard","forwardRef","title","icon","iconIntent","headerExtra","children","className","style","testId","props","ref","cardStyle","headerStyle","headerLeftStyle","iconCircleStyle","titleStyle","bodyStyle","hasHeader","jsxs","cx","jsx"],"mappings":";;;AAkCA,MAAMA,IAA+C;AAAA,EACnD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR,GAEaC,IAAWC;AAAA,EACtB,SACE;AAAA,IACE,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAA2B;AAAA,MAC/B,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,GAAGJ;AAAA,IAAA,GAGCK,IAA6B;AAAA,MACjC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,cAAc;AAAA,IAAA,GAGVC,IAAiC;AAAA,MACrC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,KAAK;AAAA,IAAA,GAGDC,IAAiC;AAAA,MACrC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,YAAYhB,EAAaK,CAAU;AAAA,MACnC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,YAAY;AAAA,IAAA,GAGRY,IAA4B;AAAA,MAChC,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,QAAQ;AAAA,IAAA,GAGJC,IAA2B;AAAA,MAC/B,SAAS;AAAA,IAAA,GAGLC,IAAYhB,KAASC,KAAQE;AAEnC,WACE,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,WAAWS,EAAG,oBAAoBb,CAAS;AAAA,QAC3C,OAAOK;AAAA,QACP,eAAaH;AAAA,QACZ,GAAGC;AAAA,QAEH,UAAA;AAAA,UAAAQ,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BAA2B,OAAON,GAC/C,UAAA;AAAA,YAAA,gBAAAM,EAAC,OAAA,EAAI,OAAOL,GACT,UAAA;AAAA,cAAAX,KACC,gBAAAkB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAON;AAAA,kBAEN,UAAAZ;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJD,KACC,gBAAAmB,EAAC,MAAA,EAAG,WAAU,2BAA0B,OAAOL,GAC5C,UAAAd,EAAA,CACH;AAAA,YAAA,GAEJ;AAAA,YACCG,KACC,gBAAAgB,EAAC,OAAA,EAAI,WAAU,kCACZ,UAAAhB,EAAA,CACH;AAAA,UAAA,GAEJ;AAAA,4BAGD,OAAA,EAAI,WAAU,0BAAyB,OAAOY,GAC5C,UAAAX,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAN,EAAS,cAAc;"}

package/dist/components/form/FormField/FormField.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),C=require("react"),D=require("../../../utils/styles.cjs"),H=require("../../../hooks/useId.cjs"),N={sm:{labelSize:12,helperSize:11,gap:4},md:{labelSize:14,helperSize:12,gap:6},lg:{labelSize:16,helperSize:14,gap:8}},u=C.forwardRef(function({size:t="md",label:n,required:g=!1,helperText:o,error:e,isInvalid:p=!1,disabled:d=!1,fieldId:h,orientation:r="vertical",labelWidth:m=120,className:S,style:b,children:a,testId:v,...x},z){const k=H.useId("field"),i=h||k,c=`${i}-helper`,f=`${i}-error`,s=N[t],y=p||!!e,F={display:"flex",flexDirection:r==="horizontal"?"row":"column",gap:r==="horizontal"?16:s.gap,alignItems:r==="horizontal"?"flex-start":"stretch",opacity:d?.6:1,...b},j={display:"flex",alignItems:"baseline",gap:4,...r==="horizontal"&&{width:m,flexShrink:0,paddingTop:t==="lg"?14:t==="md"?10:8}},I={fontSize:s.labelSize,fontWeight:500,color:d?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",lineHeight:1.4},q={color:"var(--brycks-error-default)",marginLeft:2},$={display:"flex",flexDirection:"column",gap:s.gap,flex:1},w={fontSize:s.helperSize,color:y?"var(--brycks-error-default)":"var(--brycks-foreground-muted)",lineHeight:1.4},R={id:i,"aria-describedby":o||e?e?f:c:void 0,"aria-invalid":y?!0:void 0};return l.jsxs("div",{ref:z,className:D.cx("brycks-form-field",`brycks-form-field--${t}`,`brycks-form-field--${r}`,S),style:F,"data-testid":v,...x,children:[n&&l.jsx("div",{style:j,children:l.jsxs("label",{htmlFor:i,style:I,children:[n,g&&l.jsx("span",{style:q,"aria-hidden":"true",children:"*"})]})}),l.jsxs("div",{style:$,children:[typeof a=="function"?a(R):a,(o||e)&&l.jsx("span",{id:e?f:c,style:w,role:e?"alert":void 0,children:e||o})]})]})});u.displayName="FormField";exports.FormField=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),c=require("react"),H=require("../../../utils/styles.cjs"),N=require("../../../hooks/useId.cjs"),P={sm:{labelSize:12,helperSize:11,gap:4},md:{labelSize:14,helperSize:12,gap:6},lg:{labelSize:16,helperSize:14,gap:8}},b=c.forwardRef(function({size:t="md",label:y,required:h=!1,helperText:f,error:e,isInvalid:S=!1,disabled:p=!1,fieldId:v,orientation:r="vertical",labelWidth:x=120,className:z,style:k,children:l,testId:F,...j},I){const q=N.useId("field"),s=v||q,u=`${s}-helper`,m=`${s}-error`,a=P[t],g=S||!!e,$={display:"flex",flexDirection:r==="horizontal"?"row":"column",gap:r==="horizontal"?16:a.gap,alignItems:r==="horizontal"?"flex-start":"stretch",opacity:p?.6:1,...k},w={display:"flex",alignItems:"baseline",gap:4,...r==="horizontal"&&{width:x,flexShrink:0,paddingTop:t==="lg"?14:t==="md"?10:8}},C={fontSize:a.labelSize,fontWeight:500,color:p?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",lineHeight:1.4},E={color:"var(--brycks-error-default)",marginLeft:2},R={display:"flex",flexDirection:"column",gap:a.gap,flex:1},D={fontSize:a.helperSize,color:g?"var(--brycks-error-default)":"var(--brycks-foreground-muted)",lineHeight:1.4},o={id:s,"aria-describedby":f||e?e?m:u:void 0,"aria-invalid":g?!0:void 0};let n;if(typeof l=="function")n=l(o);else if(c.isValidElement(l)&&c.Children.count(l)===1){const d=l;n=c.cloneElement(d,{id:d.props.id??o.id,"aria-describedby":d.props["aria-describedby"]??o["aria-describedby"],"aria-invalid":d.props["aria-invalid"]??o["aria-invalid"]})}else n=l;return i.jsxs("div",{ref:I,className:H.cx("brycks-form-field",`brycks-form-field--${t}`,`brycks-form-field--${r}`,z),style:$,"data-testid":F,...j,children:[y&&i.jsx("div",{style:w,children:i.jsxs("label",{htmlFor:s,style:C,children:[y,h&&i.jsx("span",{style:E,"aria-hidden":"true",children:"*"})]})}),i.jsxs("div",{style:R,children:[n,(f||e)&&i.jsx("span",{id:e?m:u,style:D,role:e?"alert":void 0,children:e||f})]})]})});b.displayName="FormField";exports.FormField=b;
 //# sourceMappingURL=FormField.cjs.map

package/dist/components/form/FormField/FormField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.cjs","sources":["../../../../src/components/form/FormField/FormField.tsx"],"sourcesContent":["/**\n * FormField Component\n *\n * A wrapper component that provides consistent structure for form inputs.\n * Includes label, required indicator, helper text, and error message.\n */\n\nimport { forwardRef, type CSSProperties, type ReactNode, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\nimport { useId } from '../../../hooks/useId'\n\nexport type FormFieldSize = 'sm' | 'md' | 'lg'\n\nexport interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Field size */\n  size?: FormFieldSize\n  /** Field label */\n  label?: ReactNode\n  /** Whether the field is required */\n  required?: boolean\n  /** Helper text below the field */\n  helperText?: ReactNode\n  /** Error message (also sets invalid state) */\n  error?: ReactNode\n  /** Whether the field is invalid */\n  isInvalid?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Custom ID for the field (auto-generated if not provided) */\n  fieldId?: string\n  /** Field orientation */\n  orientation?: 'vertical' | 'horizontal'\n  /** Label width for horizontal orientation */\n  labelWidth?: number | string\n  /** Custom class name */\n  className?: string\n  /** Children (form input) */\n  children: ReactNode | ((props: { id: string; 'aria-describedby'?: string; 'aria-invalid'?: boolean }) => ReactNode)\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FormFieldSize, { labelSize: number; helperSize: number; gap: number }> = {\n  sm: { labelSize: 12, helperSize: 11, gap: 4 },\n  md: { labelSize: 14, helperSize: 12, gap: 6 },\n  lg: { labelSize: 16, helperSize: 14, gap: 8 },\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    size = 'md',\n    label,\n    required = false,\n    helperText,\n    error,\n    isInvalid = false,\n    disabled = false,\n    fieldId,\n    orientation = 'vertical',\n    labelWidth = 120,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const generatedId = useId('field')\n  const id = fieldId || generatedId\n  const helperId = `${id}-helper`\n  const errorId = `${id}-error`\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: orientation === 'horizontal' ? 16 : config.gap,\n    alignItems: orientation === 'horizontal' ? 'flex-start' : 'stretch',\n    opacity: disabled ? 0.6 : 1,\n    ...style,\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'baseline',\n    gap: 4,\n    ...(orientation === 'horizontal' && {\n      width: labelWidth,\n      flexShrink: 0,\n      paddingTop: size === 'lg' ? 14 : size === 'md' ? 10 : 8,\n    }),\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.labelSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const requiredStyle: CSSProperties = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: 2,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: config.gap,\n    flex: 1,\n  }\n\n  const helperStyle: CSSProperties = {\n    fontSize: config.helperSize,\n    color: hasError ? 'var(--brycks-error-default)' : 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  // Props to pass to the child input\n  const childProps = {\n    id,\n    'aria-describedby': helperText || error ? (error ? errorId : helperId) : undefined,\n    'aria-invalid': hasError ? true : undefined,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-form-field', `brycks-form-field--${size}`, `brycks-form-field--${orientation}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {label && (\n        <div style={labelContainerStyle}>\n          <label htmlFor={id} style={labelStyle}>\n            {label}\n            {required && <span style={requiredStyle} aria-hidden=\"true\">*</span>}\n          </label>\n        </div>\n      )}\n      <div style={contentStyle}>\n        {typeof children === 'function' ? children(childProps) : children}\n        {(helperText || error) && (\n          <span\n            id={error ? errorId : helperId}\n            style={helperStyle}\n            role={error ? 'alert' : undefined}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n})\n\nFormField.displayName = 'FormField'\n"],"names":["sizeConfig","FormField","forwardRef","size","label","required","helperText","error","isInvalid","disabled","fieldId","orientation","labelWidth","className","style","children","testId","props","ref","generatedId","useId","id","helperId","errorId","config","hasError","containerStyle","labelContainerStyle","labelStyle","requiredStyle","contentStyle","helperStyle","childProps","jsxs","cx","jsx"],"mappings":"qNA0CMA,EAA4F,CAChG,GAAI,CAAE,UAAW,GAAI,WAAY,GAAI,IAAK,CAAA,EAC1C,GAAI,CAAE,UAAW,GAAI,WAAY,GAAI,IAAK,CAAA,EAC1C,GAAI,CAAE,UAAW,GAAI,WAAY,GAAI,IAAK,CAAA,CAC5C,EAEaC,EAAYC,EAAAA,WAA2C,SAClE,CACE,KAAAC,EAAO,KACP,MAAAC,EACA,SAAAC,EAAW,GACX,WAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,QAAAC,EACA,YAAAC,EAAc,WACd,WAAAC,EAAa,IACb,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAM,OAAO,EAC3BC,EAAKX,GAAWS,EAChBG,EAAW,GAAGD,CAAE,UAChBE,EAAU,GAAGF,CAAE,SACfG,EAASxB,EAAWG,CAAI,EACxBsB,EAAWjB,GAAa,CAAC,CAACD,EAE1BmB,EAAgC,CACpC,QAAS,OACT,cAAef,IAAgB,aAAe,MAAQ,SACtD,IAAKA,IAAgB,aAAe,GAAKa,EAAO,IAChD,WAAYb,IAAgB,aAAe,aAAe,UAC1D,QAASF,EAAW,GAAM,EAC1B,GAAGK,CAAA,EAGCa,EAAqC,CACzC,QAAS,OACT,WAAY,WACZ,IAAK,EACL,GAAIhB,IAAgB,cAAgB,CAClC,MAAOC,EACP,WAAY,EACZ,WAAYT,IAAS,KAAO,GAAKA,IAAS,KAAO,GAAK,CAAA,CACxD,EAGIyB,EAA4B,CAChC,SAAUJ,EAAO,UACjB,WAAY,IACZ,MAAOf,EACH,iCACA,mCACJ,WAAY,GAAA,EAGRoB,EAA+B,CACnC,MAAO,8BACP,WAAY,CAAA,EAGRC,EAA8B,CAClC,QAAS,OACT,cAAe,SACf,IAAKN,EAAO,IACZ,KAAM,CAAA,EAGFO,EAA6B,CACjC,SAAUP,EAAO,WACjB,MAAOC,EAAW,8BAAgC,iCAClD,WAAY,GAAA,EAIRO,EAAa,CACjB,GAAAX,EACA,mBAAoBf,GAAcC,EAASA,EAAQgB,EAAUD,EAAY,OACzE,eAAgBG,EAAW,GAAO,MAAA,EAGpC,OACEQ,EAAAA,KAAC,MAAA,CACC,IAAAf,EACA,UAAWgB,EAAAA,GAAG,oBAAqB,sBAAsB/B,CAAI,GAAI,sBAAsBQ,CAAW,GAAIE,CAAS,EAC/G,MAAOa,EACP,cAAaV,EACZ,GAAGC,EAEH,SAAA,CAAAb,GACC+B,EAAAA,IAAC,OAAI,MAAOR,EACV,gBAAC,QAAA,CAAM,QAASN,EAAI,MAAOO,EACxB,SAAA,CAAAxB,EACAC,GAAY8B,EAAAA,IAAC,OAAA,CAAK,MAAON,EAAe,cAAY,OAAO,SAAA,GAAA,CAAC,CAAA,CAAA,CAC/D,CAAA,CACF,EAEFI,EAAAA,KAAC,MAAA,CAAI,MAAOH,EACT,SAAA,CAAA,OAAOf,GAAa,WAAaA,EAASiB,CAAU,EAAIjB,GACvDT,GAAcC,IACd4B,EAAAA,IAAC,OAAA,CACC,GAAI5B,EAAQgB,EAAUD,EACtB,MAAOS,EACP,KAAMxB,EAAQ,QAAU,OAEvB,SAAAA,GAASD,CAAA,CAAA,CACZ,CAAA,CAEJ,CAAA,CAAA,CAAA,CAGN,CAAC,EAEDL,EAAU,YAAc"}
+{"version":3,"file":"FormField.cjs","sources":["../../../../src/components/form/FormField/FormField.tsx"],"sourcesContent":["/**\n * FormField Component\n *\n * A wrapper component that provides consistent structure for form inputs.\n * Includes label, required indicator, helper text, and error message.\n */\n\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n  type ReactElement,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { useId } from '../../../hooks/useId'\n\nexport type FormFieldSize = 'sm' | 'md' | 'lg'\n\nexport interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Field size */\n  size?: FormFieldSize\n  /** Field label */\n  label?: ReactNode\n  /** Whether the field is required */\n  required?: boolean\n  /** Helper text below the field */\n  helperText?: ReactNode\n  /** Error message (also sets invalid state) */\n  error?: ReactNode\n  /** Whether the field is invalid */\n  isInvalid?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Custom ID for the field (auto-generated if not provided) */\n  fieldId?: string\n  /** Field orientation */\n  orientation?: 'vertical' | 'horizontal'\n  /** Label width for horizontal orientation */\n  labelWidth?: number | string\n  /** Custom class name */\n  className?: string\n  /** Children (form input) */\n  children: ReactNode | ((props: { id: string; 'aria-describedby'?: string; 'aria-invalid'?: boolean }) => ReactNode)\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FormFieldSize, { labelSize: number; helperSize: number; gap: number }> = {\n  sm: { labelSize: 12, helperSize: 11, gap: 4 },\n  md: { labelSize: 14, helperSize: 12, gap: 6 },\n  lg: { labelSize: 16, helperSize: 14, gap: 8 },\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    size = 'md',\n    label,\n    required = false,\n    helperText,\n    error,\n    isInvalid = false,\n    disabled = false,\n    fieldId,\n    orientation = 'vertical',\n    labelWidth = 120,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const generatedId = useId('field')\n  const id = fieldId || generatedId\n  const helperId = `${id}-helper`\n  const errorId = `${id}-error`\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: orientation === 'horizontal' ? 16 : config.gap,\n    alignItems: orientation === 'horizontal' ? 'flex-start' : 'stretch',\n    opacity: disabled ? 0.6 : 1,\n    ...style,\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'baseline',\n    gap: 4,\n    ...(orientation === 'horizontal' && {\n      width: labelWidth,\n      flexShrink: 0,\n      paddingTop: size === 'lg' ? 14 : size === 'md' ? 10 : 8,\n    }),\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.labelSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const requiredStyle: CSSProperties = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: 2,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: config.gap,\n    flex: 1,\n  }\n\n  const helperStyle: CSSProperties = {\n    fontSize: config.helperSize,\n    color: hasError ? 'var(--brycks-error-default)' : 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  // Props to pass to the child input\n  const childProps = {\n    id,\n    'aria-describedby': helperText || error ? (error ? errorId : helperId) : undefined,\n    'aria-invalid': hasError ? true : undefined,\n  }\n\n  // Wire id/aria onto the input automatically when children is a single\n  // element, so `<FormField label=\"...\"><Input /></FormField>` associates the\n  // label without the render-prop form. Explicit props on the child win.\n  let content: ReactNode\n  if (typeof children === 'function') {\n    content = children(childProps)\n  } else if (isValidElement(children) && Children.count(children) === 1) {\n    const element = children as ReactElement<Record<string, unknown>>\n    content = cloneElement(element, {\n      id: element.props.id ?? childProps.id,\n      'aria-describedby': element.props['aria-describedby'] ?? childProps['aria-describedby'],\n      'aria-invalid': element.props['aria-invalid'] ?? childProps['aria-invalid'],\n    })\n  } else {\n    content = children\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-form-field', `brycks-form-field--${size}`, `brycks-form-field--${orientation}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {label && (\n        <div style={labelContainerStyle}>\n          <label htmlFor={id} style={labelStyle}>\n            {label}\n            {required && <span style={requiredStyle} aria-hidden=\"true\">*</span>}\n          </label>\n        </div>\n      )}\n      <div style={contentStyle}>\n        {content}\n        {(helperText || error) && (\n          <span\n            id={error ? errorId : helperId}\n            style={helperStyle}\n            role={error ? 'alert' : undefined}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n})\n\nFormField.displayName = 'FormField'\n"],"names":["sizeConfig","FormField","forwardRef","size","label","required","helperText","error","isInvalid","disabled","fieldId","orientation","labelWidth","className","style","children","testId","props","ref","generatedId","useId","id","helperId","errorId","config","hasError","containerStyle","labelContainerStyle","labelStyle","requiredStyle","contentStyle","helperStyle","childProps","content","isValidElement","Children","element","cloneElement","jsxs","cx","jsx"],"mappings":"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"}

package/dist/components/form/FormField/FormField.js

@@ -1,88 +1,100 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import { forwardRef as H } from "react";
-import { cx as N } from "../../../utils/styles.js";
-import { useId as q } from "../../../hooks/useId.js";
-const E = {
+import { jsxs as c, jsx as f } from "react/jsx-runtime";
+import { forwardRef as N, isValidElement as q, Children as L, cloneElement as P } from "react";
+import { cx as R } from "../../../utils/styles.js";
+import { useId as V } from "../../../hooks/useId.js";
+const W = {
   sm: { labelSize: 12, helperSize: 11, gap: 4 },
   md: { labelSize: 14, helperSize: 12, gap: 6 },
   lg: { labelSize: 16, helperSize: 14, gap: 8 }
-}, L = H(function({
+}, A = N(function({
   size: r = "md",
-  label: d,
-  required: y = !1,
-  helperText: i,
+  label: p,
+  required: h = !1,
+  helperText: n,
   error: e,
-  isInvalid: g = !1,
-  disabled: c = !1,
-  fieldId: h,
-  orientation: l = "vertical",
-  labelWidth: u = 120,
-  className: S,
-  style: b,
-  children: a,
-  testId: v,
-  ...z
-}, x) {
-  const k = q("field"), o = h || k, f = `${o}-helper`, p = `${o}-error`, t = E[r], m = g || !!e, F = {
+  isInvalid: u = !1,
+  disabled: m = !1,
+  fieldId: S,
+  orientation: i = "vertical",
+  labelWidth: v = 120,
+  className: z,
+  style: x,
+  children: l,
+  testId: k,
+  ...F
+}, I) {
+  const $ = V("field"), o = S || $, y = `${o}-helper`, g = `${o}-error`, t = W[r], b = u || !!e, w = {
     display: "flex",
-    flexDirection: l === "horizontal" ? "row" : "column",
-    gap: l === "horizontal" ? 16 : t.gap,
-    alignItems: l === "horizontal" ? "flex-start" : "stretch",
-    opacity: c ? 0.6 : 1,
-    ...b
-  }, I = {
+    flexDirection: i === "horizontal" ? "row" : "column",
+    gap: i === "horizontal" ? 16 : t.gap,
+    alignItems: i === "horizontal" ? "flex-start" : "stretch",
+    opacity: m ? 0.6 : 1,
+    ...x
+  }, C = {
     display: "flex",
     alignItems: "baseline",
     gap: 4,
-    ...l === "horizontal" && {
-      width: u,
+    ...i === "horizontal" && {
+      width: v,
       flexShrink: 0,
       paddingTop: r === "lg" ? 14 : r === "md" ? 10 : 8
     }
-  }, $ = {
+  }, E = {
     fontSize: t.labelSize,
     fontWeight: 500,
-    color: c ? "var(--brycks-foreground-muted)" : "var(--brycks-foreground-default)",
+    color: m ? "var(--brycks-foreground-muted)" : "var(--brycks-foreground-default)",
     lineHeight: 1.4
-  }, w = {
+  }, j = {
     color: "var(--brycks-error-default)",
     marginLeft: 2
-  }, j = {
+  }, D = {
     display: "flex",
     flexDirection: "column",
     gap: t.gap,
     flex: 1
-  }, C = {
+  }, H = {
     fontSize: t.helperSize,
-    color: m ? "var(--brycks-error-default)" : "var(--brycks-foreground-muted)",
+    color: b ? "var(--brycks-error-default)" : "var(--brycks-foreground-muted)",
     lineHeight: 1.4
-  }, D = {
+  }, a = {
     id: o,
-    "aria-describedby": i || e ? e ? p : f : void 0,
-    "aria-invalid": m ? !0 : void 0
+    "aria-describedby": n || e ? e ? g : y : void 0,
+    "aria-invalid": b ? !0 : void 0
   };
-  return /* @__PURE__ */ n(
+  let d;
+  if (typeof l == "function")
+    d = l(a);
+  else if (q(l) && L.count(l) === 1) {
+    const s = l;
+    d = P(s, {
+      id: s.props.id ?? a.id,
+      "aria-describedby": s.props["aria-describedby"] ?? a["aria-describedby"],
+      "aria-invalid": s.props["aria-invalid"] ?? a["aria-invalid"]
+    });
+  } else
+    d = l;
+  return /* @__PURE__ */ c(
     "div",
     {
-      ref: x,
-      className: N("brycks-form-field", `brycks-form-field--${r}`, `brycks-form-field--${l}`, S),
-      style: F,
-      "data-testid": v,
-      ...z,
+      ref: I,
+      className: R("brycks-form-field", `brycks-form-field--${r}`, `brycks-form-field--${i}`, z),
+      style: w,
+      "data-testid": k,
+      ...F,
       children: [
-        d && /* @__PURE__ */ s("div", { style: I, children: /* @__PURE__ */ n("label", { htmlFor: o, style: $, children: [
-          d,
-          y && /* @__PURE__ */ s("span", { style: w, "aria-hidden": "true", children: "*" })
+        p && /* @__PURE__ */ f("div", { style: C, children: /* @__PURE__ */ c("label", { htmlFor: o, style: E, children: [
+          p,
+          h && /* @__PURE__ */ f("span", { style: j, "aria-hidden": "true", children: "*" })
         ] }) }),
-        /* @__PURE__ */ n("div", { style: j, children: [
-          typeof a == "function" ? a(D) : a,
-          (i || e) && /* @__PURE__ */ s(
+        /* @__PURE__ */ c("div", { style: D, children: [
+          d,
+          (n || e) && /* @__PURE__ */ f(
             "span",
             {
-              id: e ? p : f,
-              style: C,
+              id: e ? g : y,
+              style: H,
               role: e ? "alert" : void 0,
-              children: e || i
+              children: e || n
             }
           )
         ] })
@@ -90,8 +102,8 @@ const E = {
     }
   );
 });
-L.displayName = "FormField";
+A.displayName = "FormField";
 export {
-  L as FormField
+  A as FormField
 };
 //# sourceMappingURL=FormField.js.map

package/dist/components/form/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../../../../src/components/form/FormField/FormField.tsx"],"sourcesContent":["/**\n * FormField Component\n *\n * A wrapper component that provides consistent structure for form inputs.\n * Includes label, required indicator, helper text, and error message.\n */\n\nimport { forwardRef, type CSSProperties, type ReactNode, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\nimport { useId } from '../../../hooks/useId'\n\nexport type FormFieldSize = 'sm' | 'md' | 'lg'\n\nexport interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Field size */\n  size?: FormFieldSize\n  /** Field label */\n  label?: ReactNode\n  /** Whether the field is required */\n  required?: boolean\n  /** Helper text below the field */\n  helperText?: ReactNode\n  /** Error message (also sets invalid state) */\n  error?: ReactNode\n  /** Whether the field is invalid */\n  isInvalid?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Custom ID for the field (auto-generated if not provided) */\n  fieldId?: string\n  /** Field orientation */\n  orientation?: 'vertical' | 'horizontal'\n  /** Label width for horizontal orientation */\n  labelWidth?: number | string\n  /** Custom class name */\n  className?: string\n  /** Children (form input) */\n  children: ReactNode | ((props: { id: string; 'aria-describedby'?: string; 'aria-invalid'?: boolean }) => ReactNode)\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FormFieldSize, { labelSize: number; helperSize: number; gap: number }> = {\n  sm: { labelSize: 12, helperSize: 11, gap: 4 },\n  md: { labelSize: 14, helperSize: 12, gap: 6 },\n  lg: { labelSize: 16, helperSize: 14, gap: 8 },\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    size = 'md',\n    label,\n    required = false,\n    helperText,\n    error,\n    isInvalid = false,\n    disabled = false,\n    fieldId,\n    orientation = 'vertical',\n    labelWidth = 120,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const generatedId = useId('field')\n  const id = fieldId || generatedId\n  const helperId = `${id}-helper`\n  const errorId = `${id}-error`\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: orientation === 'horizontal' ? 16 : config.gap,\n    alignItems: orientation === 'horizontal' ? 'flex-start' : 'stretch',\n    opacity: disabled ? 0.6 : 1,\n    ...style,\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'baseline',\n    gap: 4,\n    ...(orientation === 'horizontal' && {\n      width: labelWidth,\n      flexShrink: 0,\n      paddingTop: size === 'lg' ? 14 : size === 'md' ? 10 : 8,\n    }),\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.labelSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const requiredStyle: CSSProperties = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: 2,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: config.gap,\n    flex: 1,\n  }\n\n  const helperStyle: CSSProperties = {\n    fontSize: config.helperSize,\n    color: hasError ? 'var(--brycks-error-default)' : 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  // Props to pass to the child input\n  const childProps = {\n    id,\n    'aria-describedby': helperText || error ? (error ? errorId : helperId) : undefined,\n    'aria-invalid': hasError ? true : undefined,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-form-field', `brycks-form-field--${size}`, `brycks-form-field--${orientation}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {label && (\n        <div style={labelContainerStyle}>\n          <label htmlFor={id} style={labelStyle}>\n            {label}\n            {required && <span style={requiredStyle} aria-hidden=\"true\">*</span>}\n          </label>\n        </div>\n      )}\n      <div style={contentStyle}>\n        {typeof children === 'function' ? children(childProps) : children}\n        {(helperText || error) && (\n          <span\n            id={error ? errorId : helperId}\n            style={helperStyle}\n            role={error ? 'alert' : undefined}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n})\n\nFormField.displayName = 'FormField'\n"],"names":["sizeConfig","FormField","forwardRef","size","label","required","helperText","error","isInvalid","disabled","fieldId","orientation","labelWidth","className","style","children","testId","props","ref","generatedId","useId","id","helperId","errorId","config","hasError","containerStyle","labelContainerStyle","labelStyle","requiredStyle","contentStyle","helperStyle","childProps","jsxs","cx","jsx"],"mappings":"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"}
+{"version":3,"file":"FormField.js","sources":["../../../../src/components/form/FormField/FormField.tsx"],"sourcesContent":["/**\n * FormField Component\n *\n * A wrapper component that provides consistent structure for form inputs.\n * Includes label, required indicator, helper text, and error message.\n */\n\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n  type ReactElement,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { useId } from '../../../hooks/useId'\n\nexport type FormFieldSize = 'sm' | 'md' | 'lg'\n\nexport interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Field size */\n  size?: FormFieldSize\n  /** Field label */\n  label?: ReactNode\n  /** Whether the field is required */\n  required?: boolean\n  /** Helper text below the field */\n  helperText?: ReactNode\n  /** Error message (also sets invalid state) */\n  error?: ReactNode\n  /** Whether the field is invalid */\n  isInvalid?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Custom ID for the field (auto-generated if not provided) */\n  fieldId?: string\n  /** Field orientation */\n  orientation?: 'vertical' | 'horizontal'\n  /** Label width for horizontal orientation */\n  labelWidth?: number | string\n  /** Custom class name */\n  className?: string\n  /** Children (form input) */\n  children: ReactNode | ((props: { id: string; 'aria-describedby'?: string; 'aria-invalid'?: boolean }) => ReactNode)\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<FormFieldSize, { labelSize: number; helperSize: number; gap: number }> = {\n  sm: { labelSize: 12, helperSize: 11, gap: 4 },\n  md: { labelSize: 14, helperSize: 12, gap: 6 },\n  lg: { labelSize: 16, helperSize: 14, gap: 8 },\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    size = 'md',\n    label,\n    required = false,\n    helperText,\n    error,\n    isInvalid = false,\n    disabled = false,\n    fieldId,\n    orientation = 'vertical',\n    labelWidth = 120,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const generatedId = useId('field')\n  const id = fieldId || generatedId\n  const helperId = `${id}-helper`\n  const errorId = `${id}-error`\n  const config = sizeConfig[size]\n  const hasError = isInvalid || !!error\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: orientation === 'horizontal' ? 16 : config.gap,\n    alignItems: orientation === 'horizontal' ? 'flex-start' : 'stretch',\n    opacity: disabled ? 0.6 : 1,\n    ...style,\n  }\n\n  const labelContainerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'baseline',\n    gap: 4,\n    ...(orientation === 'horizontal' && {\n      width: labelWidth,\n      flexShrink: 0,\n      paddingTop: size === 'lg' ? 14 : size === 'md' ? 10 : 8,\n    }),\n  }\n\n  const labelStyle: CSSProperties = {\n    fontSize: config.labelSize,\n    fontWeight: 500,\n    color: disabled\n      ? 'var(--brycks-foreground-muted)'\n      : 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const requiredStyle: CSSProperties = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: 2,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: config.gap,\n    flex: 1,\n  }\n\n  const helperStyle: CSSProperties = {\n    fontSize: config.helperSize,\n    color: hasError ? 'var(--brycks-error-default)' : 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  // Props to pass to the child input\n  const childProps = {\n    id,\n    'aria-describedby': helperText || error ? (error ? errorId : helperId) : undefined,\n    'aria-invalid': hasError ? true : undefined,\n  }\n\n  // Wire id/aria onto the input automatically when children is a single\n  // element, so `<FormField label=\"...\"><Input /></FormField>` associates the\n  // label without the render-prop form. Explicit props on the child win.\n  let content: ReactNode\n  if (typeof children === 'function') {\n    content = children(childProps)\n  } else if (isValidElement(children) && Children.count(children) === 1) {\n    const element = children as ReactElement<Record<string, unknown>>\n    content = cloneElement(element, {\n      id: element.props.id ?? childProps.id,\n      'aria-describedby': element.props['aria-describedby'] ?? childProps['aria-describedby'],\n      'aria-invalid': element.props['aria-invalid'] ?? childProps['aria-invalid'],\n    })\n  } else {\n    content = children\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-form-field', `brycks-form-field--${size}`, `brycks-form-field--${orientation}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {label && (\n        <div style={labelContainerStyle}>\n          <label htmlFor={id} style={labelStyle}>\n            {label}\n            {required && <span style={requiredStyle} aria-hidden=\"true\">*</span>}\n          </label>\n        </div>\n      )}\n      <div style={contentStyle}>\n        {content}\n        {(helperText || error) && (\n          <span\n            id={error ? errorId : helperId}\n            style={helperStyle}\n            role={error ? 'alert' : undefined}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n})\n\nFormField.displayName = 'FormField'\n"],"names":["sizeConfig","FormField","forwardRef","size","label","required","helperText","error","isInvalid","disabled","fieldId","orientation","labelWidth","className","style","children","testId","props","ref","generatedId","useId","id","helperId","errorId","config","hasError","containerStyle","labelContainerStyle","labelStyle","requiredStyle","contentStyle","helperStyle","childProps","content","isValidElement","Children","element","cloneElement","jsxs","cx","jsx"],"mappings":"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"}