@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/forms/date-picker/date-picker.js

@@ -0,0 +1,173 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import Calendar from "../calendar/calendar.js";
+import { Icon } from "../../system/icon/icon.js";
+import { interactiveSizes, getIconPixels } from "../../../theme/size-tokens.js";
+function DatePicker({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  placeholder = "Select date",
+  disabled = false,
+  dateFormat = "MM/DD/YYYY",
+  clearable = true,
+  className = "",
+  size = "md"
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedDate, setSelectedDate] = useState(value);
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    setSelectedDate(value);
+  }, [value]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return void 0;
+  }, [isOpen]);
+  useEffect(() => {
+    const handleEscape = (event) => {
+      if (event.key === "Escape" && isOpen) {
+        setIsOpen(false);
+        inputRef.current?.focus();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }
+    return void 0;
+  }, [isOpen]);
+  const formatDate = (date) => {
+    if (!date) return "";
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const year = date.getFullYear();
+    return dateFormat.replace("MM", month).replace("DD", day).replace("YYYY", String(year)).replace("YY", String(year).slice(-2));
+  };
+  const handleDateSelect = (date) => {
+    setSelectedDate(date);
+    onChange?.(date);
+    setIsOpen(false);
+    inputRef.current?.focus();
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    setSelectedDate(void 0);
+    onChange?.(void 0);
+    inputRef.current?.focus();
+  };
+  const handleInputClick = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setIsOpen(!isOpen);
+    }
+  };
+  function getBaseHeightClass(heightClasses) {
+    const classes = heightClasses.split(" ");
+    const base = classes.find((cls) => /^h-\d+/.test(cls));
+    return base || classes[0] || "";
+  }
+  const sizeConfig = interactiveSizes[size] || interactiveSizes.md;
+  const containerClasses = `${getBaseHeightClass(sizeConfig.height)} ${sizeConfig.padding}`;
+  const textClasses = sizeConfig.text;
+  const iconSize = getIconPixels(size, "desktop");
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `relative w-full ${className}`, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `
+          w-full flex items-center justify-between gap-2
+          border border-input rounded-md
+          bg-background text-foreground
+          cursor-pointer
+          transition-all duration-200
+          ${containerClasses}
+          ${textClasses}
+          ${isOpen ? "ring-2 ring-ring ring-offset-2" : "hover:border-ring"}
+          ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+        `.trim(),
+        onClick: handleInputClick,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: handleKeyDown,
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        "aria-label": "Date picker",
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: formatDate(selectedDate),
+              placeholder,
+              readOnly: true,
+              disabled,
+              className: `flex-1 min-w-0 bg-transparent outline-none cursor-pointer placeholder:text-muted-foreground ${textClasses}`,
+              "aria-label": "Selected date"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+            clearable && selectedDate && !disabled ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClear,
+                className: "p-1 hover:bg-muted rounded transition-colors shrink-0",
+                "aria-label": "Clear date",
+                children: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: iconSize - 2,
+                    height: iconSize - 2,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    ]
+                  }
+                )
+              }
+            ) : clearable ? /* @__PURE__ */ jsx("div", { className: "w-6 h-6 shrink-0" }) : null,
+            /* @__PURE__ */ jsx(Icon, { name: "calendar", size, className: "text-muted-foreground shrink-0" })
+          ] })
+        ]
+      }
+    ),
+    isOpen && !disabled && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute left-0 top-full mt-2 z-50 animate-scaleIn origin-top",
+        role: "dialog",
+        "aria-label": "Calendar",
+        children: /* @__PURE__ */ jsx(Calendar, { value: selectedDate, onChange: handleDateSelect, minDate, maxDate })
+      }
+    )
+  ] });
+}
+DatePicker.displayName = "DatePicker";
+export {
+  DatePicker as default
+};
+//# sourceMappingURL=date-picker.js.map

package/dist/components/forms/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sources":["../../../../src/components/forms/date-picker/date-picker.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react';\nimport Calendar from '../calendar/calendar';\nimport Icon from '../../system/icon/icon';\nimport { interactiveSizes, getIconPixels, type InteractiveSize } from '../../../theme/size-tokens';\n\nexport type DatePickerProps = {\n  /**\n   * The currently selected date\n   */\n  value?: Date;\n  /**\n   * Callback when a date is selected\n   */\n  onChange?: (date: Date | undefined) => void;\n  /**\n   * Minimum selectable date\n   */\n  minDate?: Date;\n  /**\n   * Maximum selectable date\n   */\n  maxDate?: Date;\n  /**\n   * Placeholder text when no date is selected\n   */\n  placeholder?: string;\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Date format string (default: 'MM/DD/YYYY')\n   */\n  dateFormat?: string;\n  /**\n   * Show clear button\n   */\n  clearable?: boolean;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n  /**\n   * Input size - uses unified size system\n   */\n  size?: InteractiveSize;\n};\n\n/**\n * DatePicker - Input field with calendar popup for date selection\n *\n * Features:\n * - Calendar popup on click\n * - Keyboard navigation (Arrow keys, Enter, Escape)\n * - Date formatting\n * - Min/max date constraints\n * - Clearable option\n * - Accessible with proper ARIA labels\n *\n * @example\n * ```tsx\n * const [date, setDate] = useState<Date>();\n *\n * <DatePicker\n *   value={date}\n *   onChange={setDate}\n *   placeholder=\"Select a date\"\n *   clearable\n * />\n * ```\n */\nfunction DatePicker({\n  value,\n  onChange,\n  minDate,\n  maxDate,\n  placeholder = 'Select date',\n  disabled = false,\n  dateFormat = 'MM/DD/YYYY',\n  clearable = true,\n  className = '',\n  size = 'md'\n}: Readonly<DatePickerProps>) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(value);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  // Update internal state when value prop changes\n  useEffect(() => {\n    setSelectedDate(value);\n  }, [value]);\n\n  // Close calendar on click outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => document.removeEventListener('mousedown', handleClickOutside);\n    }\n    return undefined;\n  }, [isOpen]);\n\n  // Close on Escape key\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen) {\n        setIsOpen(false);\n        inputRef.current?.focus();\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener('keydown', handleEscape);\n      return () => document.removeEventListener('keydown', handleEscape);\n    }\n    return undefined;\n  }, [isOpen]);\n\n  const formatDate = (date: Date | undefined): string => {\n    if (!date) return '';\n\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const day = String(date.getDate()).padStart(2, '0');\n    const year = date.getFullYear();\n\n    // Simple format replacement\n    return dateFormat\n      .replace('MM', month)\n      .replace('DD', day)\n      .replace('YYYY', String(year))\n      .replace('YY', String(year).slice(-2));\n  };\n\n  const handleDateSelect = (date: Date) => {\n    setSelectedDate(date);\n    onChange?.(date);\n    setIsOpen(false);\n    inputRef.current?.focus();\n  };\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setSelectedDate(undefined);\n    onChange?.(undefined);\n    inputRef.current?.focus();\n  };\n\n  const handleInputClick = () => {\n    if (!disabled) {\n      setIsOpen(!isOpen);\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      setIsOpen(!isOpen);\n    }\n  };\n\n  // Utility to extract the base (non-responsive) height class\n  function getBaseHeightClass(heightClasses: string): string {\n    // Match 'h-...' not prefixed by a colon (responsive variant)\n    const classes = heightClasses.split(' ');\n    const base = classes.find((cls) => /^h-\\d+/.test(cls));\n    return base || classes[0] || '';\n  }\n\n  // Use unified interactive sizes\n  const sizeConfig = interactiveSizes[size] || interactiveSizes.md;\n  const containerClasses = `${getBaseHeightClass(sizeConfig.height)} ${sizeConfig.padding}`;\n  const textClasses = sizeConfig.text;\n  const iconSize = getIconPixels(size, 'desktop');\n\n  return (\n    <div ref={containerRef} className={`relative w-full ${className}`}>\n      {/* Input field */}\n      <div\n        className={`\n          w-full flex items-center justify-between gap-2\n          border border-input rounded-md\n          bg-background text-foreground\n          cursor-pointer\n          transition-all duration-200\n          ${containerClasses}\n          ${textClasses}\n          ${isOpen ? 'ring-2 ring-ring ring-offset-2' : 'hover:border-ring'}\n          ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n        `.trim()}\n        onClick={handleInputClick}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={handleKeyDown}\n        aria-haspopup=\"dialog\"\n        aria-expanded={isOpen}\n        aria-label=\"Date picker\"\n      >\n        <input\n          ref={inputRef}\n          type=\"text\"\n          value={formatDate(selectedDate)}\n          placeholder={placeholder}\n          readOnly\n          disabled={disabled}\n          className={`flex-1 min-w-0 bg-transparent outline-none cursor-pointer placeholder:text-muted-foreground ${textClasses}`}\n          aria-label=\"Selected date\"\n        />\n\n        <div className=\"flex items-center gap-1 shrink-0\">\n          {clearable && selectedDate && !disabled ? (\n            <button\n              type=\"button\"\n              onClick={handleClear}\n              className=\"p-1 hover:bg-muted rounded transition-colors shrink-0\"\n              aria-label=\"Clear date\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width={iconSize - 2}\n                height={iconSize - 2}\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              >\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n              </svg>\n            </button>\n          ) : clearable ? (\n            <div className=\"w-6 h-6 shrink-0\" />\n          ) : null}\n          <Icon name=\"calendar\" size={size} className=\"text-muted-foreground shrink-0\" />\n        </div>\n      </div>\n\n      {/* Calendar popup */}\n      {isOpen && !disabled && (\n        <div\n          className=\"absolute left-0 top-full mt-2 z-50 animate-scaleIn origin-top\"\n          role=\"dialog\"\n          aria-label=\"Calendar\"\n        >\n          <Calendar value={selectedDate} onChange={handleDateSelect} minDate={minDate} maxDate={maxDate} />\n        </div>\n      )}\n    </div>\n  );\n}\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"names":[],"mappings":"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"}

package/dist/components/forms/date-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './date-picker';
+export type { DatePickerProps } from './date-picker';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/date-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/forms/editable-text/editable-text.d.ts

@@ -0,0 +1,59 @@
+import { TextSize, ValidationState } from '../../../theme/size-tokens';
+export type EditableTextProps = {
+    /** Current value (controlled) */
+    value?: string;
+    /** Default value for uncontrolled mode */
+    defaultValue?: string;
+    /** Callback when save is clicked - receives the new value */
+    onSave?: (value: string) => void;
+    /** Callback when value changes - for controlled mode */
+    onChange?: (value: string) => void;
+    /** Callback when cancel is clicked */
+    onCancel?: () => void;
+    /** Callback when edit mode is entered */
+    onEdit?: () => void;
+    /** Placeholder text shown when value is empty */
+    placeholder?: string;
+    /** Disables editing */
+    disabled?: boolean;
+    /** Size variant - uses unified size system */
+    size?: TextSize;
+    /** Validation state */
+    validationState?: ValidationState;
+    /** Custom CSS classes for the display text */
+    className?: string;
+    /** HTML id attribute */
+    id?: string;
+    /** HTML name attribute */
+    name?: string;
+    /** Required field */
+    required?: boolean;
+    /** Auto-focus input when entering edit mode */
+    autoFocus?: boolean;
+    /** Maximum length of input value */
+    maxLength?: number;
+    /** Save on Enter key (default: true, only for single-line) */
+    saveOnEnter?: boolean;
+    /** Save the current edit when the input blurs (default: true). If false, blur will cancel. */
+    saveOnBlur?: boolean;
+    /** Whether the text is editable. If false, component will not render as input field */
+    isEditable?: boolean;
+};
+/**
+ * EditableText - Click-to-edit text display with save/cancel actions
+ *
+ * Displays text that becomes editable when clicked.
+ *
+ * @example
+ * ```tsx
+ * <EditableText
+ *   value={name}
+ *   onSave={(newValue) => updateName(newValue)}
+ *   placeholder="Enter name"
+ * />
+ * ```
+ */
+export default function EditableText({ value: controlledValue, defaultValue, onSave, onChange, onCancel, onEdit, placeholder, disabled, size, validationState, className, id, name, required, autoFocus, maxLength, saveOnEnter, isEditable, 
+/** Save the current edit when the input blurs (default: true). If false, blur will cancel. */
+saveOnBlur }: EditableTextProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=editable-text.d.ts.map

package/dist/components/forms/editable-text/editable-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-text.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/editable-text/editable-text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAa,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAIlF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,uBAAuB;IACvB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8FAA8F;IAC9F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uFAAuF;IACvF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,KAAK,EAAE,eAAe,EACtB,YAAiB,EACjB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAA6B,EAC7B,QAAgB,EAChB,IAAa,EACb,eAA2B,EAC3B,SAAc,EACd,EAAE,EACF,IAAI,EACJ,QAAgB,EAChB,SAAgB,EAChB,SAAS,EACT,WAAkB,EAClB,UAAiB;AACjB,8FAA8F;AAC9F,UAAiB,EAClB,EAAE,iBAAiB,2CA0LnB"}

package/dist/components/forms/editable-text/editable-text.js

@@ -0,0 +1,188 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { textSizes } from "../../../theme/size-tokens.js";
+import IconButton from "../button/icon-button.js";
+import { Icon } from "../../system/icon/icon.js";
+function EditableText({
+  value: controlledValue,
+  defaultValue = "",
+  onSave,
+  onChange,
+  onCancel,
+  onEdit,
+  placeholder = "Click to edit",
+  disabled = false,
+  size = "base",
+  validationState = "neutral",
+  className = "",
+  id,
+  name,
+  required = false,
+  autoFocus = true,
+  maxLength,
+  saveOnEnter = true,
+  isEditable = true,
+  /** Save the current edit when the input blurs (default: true). If false, blur will cancel. */
+  saveOnBlur = true
+}) {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState("");
+  const inputRef = useRef(null);
+  const canvasRef = useRef(null);
+  const adjustInputWidth = () => {
+    const el = inputRef.current;
+    if (!el) return;
+    if (!canvasRef.current) canvasRef.current = document.createElement("canvas");
+    const ctx = canvasRef.current.getContext("2d");
+    if (!ctx) return;
+    const style = window.getComputedStyle(el);
+    ctx.font = style.font || `${style.fontSize} ${style.fontFamily}`;
+    const text = editValue || placeholder || "";
+    const measured = Math.ceil(ctx.measureText(text).width) + 16;
+    el.style.width = `${Math.max(48, measured)}px`;
+  };
+  const currentValue = isControlled ? controlledValue : internalValue;
+  useEffect(() => {
+    if (isEditing && autoFocus && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+      adjustInputWidth();
+    }
+  }, [isEditing, autoFocus]);
+  useEffect(() => {
+    if (isEditing) adjustInputWidth();
+  }, [editValue, placeholder, isEditing]);
+  const handleClick = () => {
+    if (disabled || !isEditable) return;
+    setEditValue(currentValue);
+    setIsEditing(true);
+    onEdit?.();
+  };
+  const handleSave = () => {
+    const trimmedValue = editValue.trim();
+    if (!isControlled) {
+      setInternalValue(trimmedValue);
+    }
+    onSave?.(trimmedValue);
+    onChange?.(trimmedValue);
+    setIsEditing(false);
+  };
+  const handleCancel = () => {
+    setEditValue(currentValue);
+    setIsEditing(false);
+    onCancel?.();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancel();
+    } else if (e.key === "Enter" && saveOnEnter && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+      e.preventDefault();
+      handleSave();
+    }
+  };
+  const handleBlur = (e) => {
+    setTimeout(() => {
+      const relatedTarget = e.relatedTarget;
+      const isClickingButton = relatedTarget?.closest("[data-editable-actions]");
+      if (isClickingButton) return;
+      if (saveOnBlur) {
+        handleSave();
+      } else {
+        handleCancel();
+      }
+    }, 0);
+  };
+  const handleChange = (e) => {
+    setEditValue(e.target.value);
+  };
+  const sizeConfig = textSizes[size] || textSizes["base"];
+  if (isEditing) {
+    const validationBorder = {
+      neutral: "border-b-foreground/30 focus:border-b-foreground",
+      error: "border-b-error focus:border-b-error",
+      success: "border-b-success focus:border-b-success",
+      warning: "border-b-warning focus:border-b-warning"
+    }[validationState];
+    const commonProps = {
+      ref: inputRef,
+      value: editValue,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
+      placeholder,
+      disabled,
+      id,
+      name,
+      required,
+      maxLength,
+      className: `${sizeConfig} border-0 border-b ${validationBorder} bg-transparent py-1 outline-none transition-colors placeholder:text-muted-foreground inline-block`
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("input", { ...commonProps, type: "text" }),
+      /* @__PURE__ */ jsxs("div", { "data-editable-actions": true, className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: "IconX",
+            ariaLabel: "Cancel",
+            onClick: handleCancel,
+            variant: "error",
+            size: "xs",
+            iconSize: "sm",
+            buttonStyle: "ghost"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: "IconCheck",
+            ariaLabel: "Save",
+            onClick: handleSave,
+            variant: "success",
+            size: "xs",
+            iconSize: "sm",
+            buttonStyle: "ghost"
+          }
+        )
+      ] })
+    ] });
+  }
+  const displayText = currentValue || placeholder;
+  const isPlaceholder = !currentValue;
+  if (!isEditable) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${sizeConfig} ${className} inline-flex items-center gap-2 py-1 text-left ${isPlaceholder ? "text-muted-foreground" : "text-foreground"} w-fit max-w-full`,
+        children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: displayText })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled,
+      className: `group ${sizeConfig} ${className} relative inline-flex items-center gap-2 cursor-text border-b border-transparent py-1 text-left transition-all hover:border-b-foreground/30 focus:outline-none focus:ring-2 focus:ring-ring/20 focus:rounded disabled:cursor-not-allowed disabled:opacity-50 ${isPlaceholder ? "text-muted-foreground" : "text-foreground"} w-fit max-w-full`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: displayText }),
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "IconPencil",
+            className: "shrink-0 opacity-20 transition-opacity group-hover:opacity-60 group-focus:opacity-60",
+            size: "xs"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  EditableText as default
+};
+//# sourceMappingURL=editable-text.js.map

package/dist/components/forms/editable-text/editable-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-text.js","sources":["../../../../src/components/forms/editable-text/editable-text.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport { TextSize, textSizes, ValidationState } from '../../../theme/size-tokens';\nimport IconButton from '../button/icon-button';\nimport { Icon } from '../../system/icon';\n\nexport type EditableTextProps = {\n  /** Current value (controlled) */\n  value?: string;\n  /** Default value for uncontrolled mode */\n  defaultValue?: string;\n  /** Callback when save is clicked - receives the new value */\n  onSave?: (value: string) => void;\n  /** Callback when value changes - for controlled mode */\n  onChange?: (value: string) => void;\n  /** Callback when cancel is clicked */\n  onCancel?: () => void;\n  /** Callback when edit mode is entered */\n  onEdit?: () => void;\n  /** Placeholder text shown when value is empty */\n  placeholder?: string;\n  /** Disables editing */\n  disabled?: boolean;\n  /** Size variant - uses unified size system */\n  size?: TextSize;\n  /** Validation state */\n  validationState?: ValidationState;\n  /** Custom CSS classes for the display text */\n  className?: string;\n  /** HTML id attribute */\n  id?: string;\n  /** HTML name attribute */\n  name?: string;\n  /** Required field */\n  required?: boolean;\n  /** Auto-focus input when entering edit mode */\n  autoFocus?: boolean;\n  /** Maximum length of input value */\n  maxLength?: number;\n  /** Save on Enter key (default: true, only for single-line) */\n  saveOnEnter?: boolean;\n  /** Save the current edit when the input blurs (default: true). If false, blur will cancel. */\n  saveOnBlur?: boolean;\n  /** Whether the text is editable. If false, component will not render as input field */\n  isEditable?: boolean;\n};\n\n/**\n * EditableText - Click-to-edit text display with save/cancel actions\n *\n * Displays text that becomes editable when clicked.\n *\n * @example\n * ```tsx\n * <EditableText\n *   value={name}\n *   onSave={(newValue) => updateName(newValue)}\n *   placeholder=\"Enter name\"\n * />\n * ```\n */\nexport default function EditableText({\n  value: controlledValue,\n  defaultValue = '',\n  onSave,\n  onChange,\n  onCancel,\n  onEdit,\n  placeholder = 'Click to edit',\n  disabled = false,\n  size = 'base',\n  validationState = 'neutral',\n  className = '',\n  id,\n  name,\n  required = false,\n  autoFocus = true,\n  maxLength,\n  saveOnEnter = true,\n  isEditable = true,\n  /** Save the current edit when the input blurs (default: true). If false, blur will cancel. */\n  saveOnBlur = true\n}: EditableTextProps) {\n  const isControlled = controlledValue !== undefined;\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState('');\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n  // Offscreen canvas for measuring text width without touching the DOM\n  const canvasRef = useRef<HTMLCanvasElement | null>(null);\n\n  // Adjust input width to match content so it doesn't push action icons too far.\n  const adjustInputWidth = () => {\n    const el = inputRef.current as HTMLInputElement | null;\n    if (!el) return;\n    // Use an offscreen canvas to measure text width to avoid DOM layout/paint\n    if (!canvasRef.current) canvasRef.current = document.createElement('canvas');\n    const ctx = canvasRef.current.getContext('2d');\n    if (!ctx) return;\n\n    const style = window.getComputedStyle(el);\n    // Set canvas font to match the input's computed font so measureText is comparable\n    ctx.font = style.font || `${style.fontSize} ${style.fontFamily}`;\n    const text = editValue || placeholder || '';\n    const measured = Math.ceil(ctx.measureText(text).width) + 16;\n    el.style.width = `${Math.max(48, measured)}px`;\n  };\n\n  const currentValue = isControlled ? controlledValue : internalValue;\n\n  useEffect(() => {\n    if (isEditing && autoFocus && inputRef.current) {\n      inputRef.current.focus();\n      // Select all text for easy replacement\n      inputRef.current.select();\n      // ensure width matches current content when entering edit mode\n      adjustInputWidth();\n    }\n    // We intentionally omit adjustInputWidth, editValue, and placeholder from deps here.\n    // adjustInputWidth is defined in the component scope and only reads refs/state;\n    // it's safe to omit from deps to keep this effect stable.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isEditing, autoFocus]);\n\n  useEffect(() => {\n    if (isEditing) adjustInputWidth();\n    // adjustInputWidth is stable for this effect and only depends on editValue/placeholder/inputRef,\n    // which are already captured by the dependency list.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [editValue, placeholder, isEditing]);\n\n  const handleClick = () => {\n    if (disabled || !isEditable) return;\n    setEditValue(currentValue);\n    setIsEditing(true);\n    onEdit?.();\n  };\n\n  const handleSave = () => {\n    const trimmedValue = editValue.trim();\n    if (!isControlled) {\n      setInternalValue(trimmedValue);\n    }\n    onSave?.(trimmedValue);\n    onChange?.(trimmedValue);\n    setIsEditing(false);\n  };\n\n  const handleCancel = () => {\n    setEditValue(currentValue);\n    setIsEditing(false);\n    onCancel?.();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    } else if (e.key === 'Enter' && saveOnEnter && !e.shiftKey && !e.ctrlKey && !e.metaKey) {\n      e.preventDefault();\n      handleSave();\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    // Check if the blur is due to clicking within our container (Save/Cancel buttons)\n    // Use setTimeout to let the click event complete first\n    setTimeout(() => {\n      // If we're still in editing mode and the related target isn't our container, cancel\n      const relatedTarget = e.relatedTarget as HTMLElement;\n      const isClickingButton = relatedTarget?.closest('[data-editable-actions]');\n      if (isClickingButton) return;\n\n      if (saveOnBlur) {\n        handleSave();\n      } else {\n        handleCancel();\n      }\n    }, 0);\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    setEditValue(e.target.value);\n  };\n\n  const sizeConfig = textSizes[size as TextSize] || textSizes['base'];\n\n  if (isEditing) {\n    const validationBorder = {\n      neutral: 'border-b-foreground/30 focus:border-b-foreground',\n      error: 'border-b-error focus:border-b-error',\n      success: 'border-b-success focus:border-b-success',\n      warning: 'border-b-warning focus:border-b-warning'\n    }[validationState];\n\n    const commonProps = {\n      ref: inputRef as never,\n      value: editValue,\n      onChange: handleChange,\n      onKeyDown: handleKeyDown,\n      onBlur: handleBlur,\n      placeholder,\n      disabled,\n      id,\n      name,\n      required,\n      maxLength,\n      className: `${sizeConfig} border-0 border-b ${validationBorder} bg-transparent py-1 outline-none transition-colors placeholder:text-muted-foreground inline-block`\n    };\n\n    return (\n      <div className=\"flex items-center gap-2\">\n        <input {...commonProps} type=\"text\" />\n\n        <div data-editable-actions className=\"flex items-center gap-1\">\n          <IconButton\n            icon=\"IconX\"\n            ariaLabel=\"Cancel\"\n            onClick={handleCancel}\n            variant=\"error\"\n            size=\"xs\"\n            iconSize=\"sm\"\n            buttonStyle=\"ghost\"\n          />\n          <IconButton\n            icon=\"IconCheck\"\n            ariaLabel=\"Save\"\n            onClick={handleSave}\n            variant=\"success\"\n            size=\"xs\"\n            iconSize=\"sm\"\n            buttonStyle=\"ghost\"\n          />\n        </div>\n      </div>\n    );\n  }\n\n  const displayText = currentValue || placeholder;\n  const isPlaceholder = !currentValue;\n\n  // If editing is disabled via `isEditable`, render static text only.\n  // This is useful for system-default fields that should be visible but not editable.\n  if (!isEditable) {\n    return (\n      <span\n        className={`${sizeConfig} ${className} inline-flex items-center gap-2 py-1 text-left ${isPlaceholder ? 'text-muted-foreground' : 'text-foreground'} w-fit max-w-full`}\n      >\n        <span className=\"flex-1\">{displayText}</span>\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={disabled}\n      className={`group ${sizeConfig} ${className} relative inline-flex items-center gap-2 cursor-text border-b border-transparent py-1 text-left transition-all hover:border-b-foreground/30 focus:outline-none focus:ring-2 focus:ring-ring/20 focus:rounded disabled:cursor-not-allowed disabled:opacity-50 ${isPlaceholder ? 'text-muted-foreground' : 'text-foreground'} w-fit max-w-full`}\n    >\n      <span className=\"flex-1\">{displayText}</span>\n      <Icon\n        name=\"IconPencil\"\n        className=\"shrink-0 opacity-20 transition-opacity group-hover:opacity-60 group-focus:opacity-60\"\n        size=\"xs\"\n      />\n    </button>\n  );\n}\n"],"names":[],"mappings":";;;;;AA6DA,SAAwB,aAAa;AAAA,EACnC,OAAO;AAAA,EACP,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA;AAAA,EAEb,aAAa;AACf,GAAsB;AACpB,QAAM,eAAe,oBAAoB;AACzC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,YAAY;AAC/D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,EAAE;AAC7C,QAAM,WAAW,OAA+C,IAAI;AAEpE,QAAM,YAAY,OAAiC,IAAI;AAGvD,QAAM,mBAAmB,MAAM;AAC7B,UAAM,KAAK,SAAS;AACpB,QAAI,CAAC,GAAI;AAET,QAAI,CAAC,UAAU,mBAAmB,UAAU,SAAS,cAAc,QAAQ;AAC3E,UAAM,MAAM,UAAU,QAAQ,WAAW,IAAI;AAC7C,QAAI,CAAC,IAAK;AAEV,UAAM,QAAQ,OAAO,iBAAiB,EAAE;AAExC,QAAI,OAAO,MAAM,QAAQ,GAAG,MAAM,QAAQ,IAAI,MAAM,UAAU;AAC9D,UAAM,OAAO,aAAa,eAAe;AACzC,UAAM,WAAW,KAAK,KAAK,IAAI,YAAY,IAAI,EAAE,KAAK,IAAI;AAC1D,OAAG,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,QAAQ,CAAC;AAAA,EAC5C;AAEA,QAAM,eAAe,eAAe,kBAAkB;AAEtD,YAAU,MAAM;AACd,QAAI,aAAa,aAAa,SAAS,SAAS;AAC9C,eAAS,QAAQ,MAAA;AAEjB,eAAS,QAAQ,OAAA;AAEjB,uBAAA;AAAA,IACF;AAAA,EAKF,GAAG,CAAC,WAAW,SAAS,CAAC;AAEzB,YAAU,MAAM;AACd,QAAI,UAAW,kBAAA;AAAA,EAIjB,GAAG,CAAC,WAAW,aAAa,SAAS,CAAC;AAEtC,QAAM,cAAc,MAAM;AACxB,QAAI,YAAY,CAAC,WAAY;AAC7B,iBAAa,YAAY;AACzB,iBAAa,IAAI;AACjB,aAAA;AAAA,EACF;AAEA,QAAM,aAAa,MAAM;AACvB,UAAM,eAAe,UAAU,KAAA;AAC/B,QAAI,CAAC,cAAc;AACjB,uBAAiB,YAAY;AAAA,IAC/B;AACA,aAAS,YAAY;AACrB,eAAW,YAAY;AACvB,iBAAa,KAAK;AAAA,EACpB;AAEA,QAAM,eAAe,MAAM;AACzB,iBAAa,YAAY;AACzB,iBAAa,KAAK;AAClB,eAAA;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,MAA2B;AAChD,QAAI,EAAE,QAAQ,UAAU;AACtB,QAAE,eAAA;AACF,mBAAA;AAAA,IACF,WAAW,EAAE,QAAQ,WAAW,eAAe,CAAC,EAAE,YAAY,CAAC,EAAE,WAAW,CAAC,EAAE,SAAS;AACtF,QAAE,eAAA;AACF,iBAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,aAAa,CAAC,MAAgE;AAGlF,eAAW,MAAM;AAEf,YAAM,gBAAgB,EAAE;AACxB,YAAM,mBAAmB,eAAe,QAAQ,yBAAyB;AACzE,UAAI,iBAAkB;AAEtB,UAAI,YAAY;AACd,mBAAA;AAAA,MACF,OAAO;AACL,qBAAA;AAAA,MACF;AAAA,IACF,GAAG,CAAC;AAAA,EACN;AAEA,QAAM,eAAe,CAAC,MAAiE;AACrF,iBAAa,EAAE,OAAO,KAAK;AAAA,EAC7B;AAEA,QAAM,aAAa,UAAU,IAAgB,KAAK,UAAU,MAAM;AAElE,MAAI,WAAW;AACb,UAAM,mBAAmB;AAAA,MACvB,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,IAAA,EACT,eAAe;AAEjB,UAAM,cAAc;AAAA,MAClB,KAAK;AAAA,MACL,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,UAAU,sBAAsB,gBAAgB;AAAA,IAAA;AAGhE,WACE,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAA,oBAAC,SAAA,EAAO,GAAG,aAAa,MAAK,OAAA,CAAO;AAAA,MAEpC,qBAAC,OAAA,EAAI,yBAAqB,MAAC,WAAU,2BACnC,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS;AAAA,YACT,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,UAAS;AAAA,YACT,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS;AAAA,YACT,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,UAAS;AAAA,YACT,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,EAAA,CACF;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,QAAM,cAAc,gBAAgB;AACpC,QAAM,gBAAgB,CAAC;AAIvB,MAAI,CAAC,YAAY;AACf,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,UAAU,IAAI,SAAS,kDAAkD,gBAAgB,0BAA0B,iBAAiB;AAAA,QAElJ,UAAA,oBAAC,QAAA,EAAK,WAAU,UAAU,UAAA,YAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAG5C;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,WAAW,SAAS,UAAU,IAAI,SAAS,gQAAgQ,gBAAgB,0BAA0B,iBAAiB;AAAA,MAEtW,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,UAAU,UAAA,aAAY;AAAA,QACtC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/forms/editable-text/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EditableText } from './editable-text';
+export type { EditableTextProps } from './editable-text';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/editable-text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/editable-text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/forms/fieldset/fieldset.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { FormSpacing } from '../../../theme/size-tokens';
+export type FieldsetProps = {
+    /** Form controls to group together - typically FormField components */
+    children: ReactNode;
+    /** Legend text displayed at top of fieldset */
+    legend?: string;
+    /** Disables all form controls within the fieldset */
+    disabled?: boolean;
+    /** HTML id attribute */
+    id?: string;
+    /** Layout direction for children */
+    direction?: 'horizontal' | 'vertical';
+    /** Gap spacing between children elements */
+    spacing?: FormSpacing;
+    /** Cross-axis alignment */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Main-axis alignment */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+    /** Show border around fieldset */
+    bordered?: boolean;
+};
+/**
+ * Fieldset - Semantic grouping for related form controls
+ *
+ * Groups related form fields with an optional legend.
+ * All child inputs are disabled when the fieldset is disabled.
+ *
+ * @example
+ * ```tsx
+ * <Fieldset legend="Personal Information" spacing="md">
+ *   <FormField label="First Name">
+ *     <Input placeholder="John" />
+ *   </FormField>
+ *   <FormField label="Last Name">
+ *     <Input placeholder="Doe" />
+ *   </FormField>
+ * </Fieldset>
+ * ```
+ */
+declare function Fieldset({ children, legend, disabled, id, direction, spacing, align, justify, bordered }: Readonly<FieldsetProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Fieldset {
+    var displayName: string;
+}
+export default Fieldset;
+//# sourceMappingURL=fieldset.d.ts.map

package/dist/components/forms/fieldset/fieldset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/fieldset/fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE3E,MAAM,MAAM,aAAa,GAAG;IAC1B,uEAAuE;IACvE,QAAQ,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oCAAoC;IACpC,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC5D,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAiBF;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,MAAM,EACN,QAAgB,EAChB,EAAE,EACF,SAAsB,EACtB,OAAc,EACd,KAAiB,EACjB,OAAO,EACP,QAAe,EAChB,EAAE,QAAQ,CAAC,aAAa,CAAC,2CAczB;kBAxBQ,QAAQ;;;AA4BjB,eAAe,QAAQ,CAAC"}

package/dist/components/forms/fieldset/fieldset.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { formSpacing } from "../../../theme/size-tokens.js";
+const alignClasses = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+const justifyClasses = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around"
+};
+function Fieldset({
+  children,
+  legend,
+  disabled = false,
+  id,
+  direction = "vertical",
+  spacing = "md",
+  align = "stretch",
+  justify,
+  bordered = true
+}) {
+  const directionClass = direction === "horizontal" ? "flex-row flex-wrap" : "flex-col";
+  const justifyClass = justify ? justifyClasses[justify] : "";
+  const borderClass = bordered ? "border border-border rounded-lg p-4" : "";
+  const disabledClass = disabled ? "opacity-50" : "";
+  return /* @__PURE__ */ jsxs("fieldset", { disabled, id, className: `${borderClass} ${disabledClass}`.trim(), children: [
+    legend && /* @__PURE__ */ jsx("legend", { className: "px-2 text-sm font-semibold text-foreground", children: legend }),
+    /* @__PURE__ */ jsx("div", { className: `flex ${directionClass} ${formSpacing[spacing]} ${alignClasses[align]} ${justifyClass}`.trim(), children })
+  ] });
+}
+Fieldset.displayName = "Fieldset";
+export {
+  Fieldset as default
+};
+//# sourceMappingURL=fieldset.js.map

package/dist/components/forms/fieldset/fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.js","sources":["../../../../src/components/forms/fieldset/fieldset.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport { formSpacing, type FormSpacing } from '../../../theme/size-tokens';\n\nexport type FieldsetProps = {\n  /** Form controls to group together - typically FormField components */\n  children: ReactNode;\n  /** Legend text displayed at top of fieldset */\n  legend?: string;\n  /** Disables all form controls within the fieldset */\n  disabled?: boolean;\n  /** HTML id attribute */\n  id?: string;\n  /** Layout direction for children */\n  direction?: 'horizontal' | 'vertical';\n  /** Gap spacing between children elements */\n  spacing?: FormSpacing;\n  /** Cross-axis alignment */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Main-axis alignment */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around';\n  /** Show border around fieldset */\n  bordered?: boolean;\n};\n\nconst alignClasses = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch'\n} as const;\n\nconst justifyClasses = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  around: 'justify-around'\n} as const;\n\n/**\n * Fieldset - Semantic grouping for related form controls\n *\n * Groups related form fields with an optional legend.\n * All child inputs are disabled when the fieldset is disabled.\n *\n * @example\n * ```tsx\n * <Fieldset legend=\"Personal Information\" spacing=\"md\">\n *   <FormField label=\"First Name\">\n *     <Input placeholder=\"John\" />\n *   </FormField>\n *   <FormField label=\"Last Name\">\n *     <Input placeholder=\"Doe\" />\n *   </FormField>\n * </Fieldset>\n * ```\n */\nfunction Fieldset({\n  children,\n  legend,\n  disabled = false,\n  id,\n  direction = 'vertical',\n  spacing = 'md',\n  align = 'stretch',\n  justify,\n  bordered = true\n}: Readonly<FieldsetProps>) {\n  const directionClass = direction === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col';\n  const justifyClass = justify ? justifyClasses[justify] : '';\n  const borderClass = bordered ? 'border border-border rounded-lg p-4' : '';\n  const disabledClass = disabled ? 'opacity-50' : '';\n\n  return (\n    <fieldset disabled={disabled} id={id} className={`${borderClass} ${disabledClass}`.trim()}>\n      {legend && <legend className=\"px-2 text-sm font-semibold text-foreground\">{legend}</legend>}\n      <div className={`flex ${directionClass} ${formSpacing[spacing]} ${alignClasses[align]} ${justifyClass}`.trim()}>\n        {children}\n      </div>\n    </fieldset>\n  );\n}\n\nFieldset.displayName = 'Fieldset';\n\nexport default Fieldset;\n"],"names":[],"mappings":";;AAyBA,MAAM,eAAe;AAAA,EACnB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AACX;AAEA,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AAAA,EACT,QAAQ;AACV;AAoBA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AACb,GAA4B;AAC1B,QAAM,iBAAiB,cAAc,eAAe,uBAAuB;AAC3E,QAAM,eAAe,UAAU,eAAe,OAAO,IAAI;AACzD,QAAM,cAAc,WAAW,wCAAwC;AACvE,QAAM,gBAAgB,WAAW,eAAe;AAEhD,SACE,qBAAC,YAAA,EAAS,UAAoB,IAAQ,WAAW,GAAG,WAAW,IAAI,aAAa,GAAG,KAAA,GAChF,UAAA;AAAA,IAAA,UAAU,oBAAC,UAAA,EAAO,WAAU,8CAA8C,UAAA,QAAO;AAAA,wBACjF,OAAA,EAAI,WAAW,QAAQ,cAAc,IAAI,YAAY,OAAO,CAAC,IAAI,aAAa,KAAK,CAAC,IAAI,YAAY,GAAG,KAAA,GACrG,SAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAEA,SAAS,cAAc;"}

package/dist/components/forms/fieldset/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './fieldset';
+export type { FieldsetProps } from './fieldset';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/fieldset/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/fieldset/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/forms/form/form-example.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Example usage of Form and Fieldset components
+ * This demonstrates how to use the idiomatic Form and Fieldset components
+ * with proper semantic HTML structure
+ */
+declare function FormExample(): import("react/jsx-runtime").JSX.Element;
+declare namespace FormExample {
+    var displayName: string;
+}
+export default FormExample;
+//# sourceMappingURL=form-example.d.ts.map

package/dist/components/forms/form/form-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-example.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form/form-example.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AACH,iBAAS,WAAW,4CA0FnB;kBA1FQ,WAAW;;;AA8FpB,eAAe,WAAW,CAAC"}