@mirror-physics/fractal-ui 0.2.0-next.78 → 0.2.0-next.80

package/dist/index.cjs

@@ -163,9 +163,9 @@ var colorPalette = {
   }
 };
 function getButtonStyles(buttonType, isHovered, isActive, disabled, color, hasIconOnly) {
-  const palette = colorPalette[color];
+  const palette = color ? colorPalette[color] : void 0;
   const base = {
-    borderRadius: hasIconOnly ? "var(--radius-lg, 8px)" : "var(--radius-full, 9999px)",
+    borderRadius: "var(--radius-sm, 4px)",
     cursor: disabled ? "not-allowed" : "pointer",
     transition: "background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease"
   };
@@ -179,22 +179,17 @@ function getButtonStyles(buttonType, isHovered, isActive, disabled, color, hasIc
     return { ...base, backgroundColor: "transparent", border: "1px solid var(--fg-disabled)", color: "var(--fg-disabled)" };
   }
   switch (buttonType) {
-    // Primary with text: dark pill. Icon-only: color palette (Synapse style).
+    // Text and icon-only primary actions inherit the same scoped theme.
     case "primary":
-      if (hasIconOnly) {
-        return {
-          ...base,
-          backgroundColor: isActive ? palette[700] : isHovered ? palette[500] : palette[600],
-          border: "1px solid transparent",
-          color: "var(--fg-inverse)"
-        };
-      }
       return {
         ...base,
-        backgroundColor: "var(--fg-primary)",
-        border: "1px solid var(--fg-primary)",
-        color: "var(--fg-inverse)",
-        ...isHovered || isActive ? { opacity: 0.85 } : {}
+        border: "1px solid transparent",
+        ...palette ? {
+          "--button-primary-bg": palette[600],
+          "--button-primary-hover": palette[500],
+          "--button-primary-active": palette[700],
+          "--button-primary-fg": "var(--grey-0)"
+        } : {}
       };
     // Secondary: neutral. Rest=canvas, hover=surface-1 (darken), pressed=surface-2. Subtle border, dark text.
     case "secondary":
@@ -225,7 +220,7 @@ function getButtonStyles(buttonType, isHovered, isActive, disabled, color, hasIc
   }
 }
 var Button = React.forwardRef(
-  ({ className, buttonType = "primary", buttonSize = "md", controlSize, color = "blue", icon, hasIconOnly, iconPosition = "left", style, disabled, children, ...props }, ref) => {
+  ({ className, buttonType = "primary", buttonSize = "lg", controlSize, color, icon, hasIconOnly, iconPosition = "left", style, disabled, children, ...props }, ref) => {
     const [isHovered, setIsHovered] = React.useState(false);
     const [isActive, setIsActive] = React.useState(false);
     const typeStyles = getButtonStyles(buttonType, isHovered, isActive, !!disabled, color, hasIconOnly);
@@ -770,16 +765,37 @@ PromptGrid.displayName = "PromptGrid";
 var React4 = __toESM(require("react"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var Input = React4.forwardRef(
-  ({ className, type, controlSize = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "input",
-    {
-      type,
-      ref,
-      "data-control-size": controlSize,
-      className: cn("fractal-control", "fractal-input", className),
-      ...props
-    }
-  )
+  ({ className, type, controlSize = "lg", fieldLabel, id, placeholder, ...props }, ref) => {
+    const generatedId = React4.useId();
+    const fieldId = id ?? generatedId;
+    const floatingLabel = type === "search" ? void 0 : fieldLabel;
+    const input = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "input",
+      {
+        type,
+        ref,
+        id: floatingLabel ? fieldId : id,
+        placeholder: floatingLabel ? placeholder || " " : placeholder,
+        "data-control-size": controlSize,
+        className: cn("fractal-control", "fractal-input", className),
+        ...props,
+        "aria-label": props["aria-label"] ?? (type === "search" && !props["aria-labelledby"] ? fieldLabel ?? "Search" : void 0)
+      }
+    );
+    if (!floatingLabel) return input;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        className: "fractal-floating-field",
+        "data-control-size": controlSize,
+        "data-always-float": ["date", "datetime-local", "time", "month", "week", "color", "file", "range"].includes(type ?? "") || void 0,
+        children: [
+          input,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
+        ]
+      }
+    );
+  }
 );
 Input.displayName = "Input";
 
@@ -790,7 +806,7 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 var TableSearch = React5.forwardRef(
   ({
     searchType = "text",
-    controlSize = "md",
+    controlSize = "lg",
     className,
     inputClassName,
     placeholder,
@@ -832,7 +848,7 @@ var import_fractal_icons5 = require("@mirror-physics/fractal-icons");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function NumberInput({
   unit,
-  controlSize = "md",
+  controlSize = "lg",
   className,
   value,
   defaultValue,
@@ -845,7 +861,7 @@ function NumberInput({
   const inputRef = React6.useRef(null);
   const numericValue = Number(value ?? defaultValue);
   const characterCount = Math.max(String(value ?? defaultValue ?? "").length, 1);
-  const controlLabel = typeof props["aria-label"] === "string" ? props["aria-label"] : "value";
+  const controlLabel = typeof props["aria-label"] === "string" ? props["aria-label"] : props.fieldLabel ?? "value";
   const decrementDisabled = disabled || readOnly || Number.isFinite(numericValue) && min !== void 0 && numericValue <= Number(min);
   const incrementDisabled = disabled || readOnly || Number.isFinite(numericValue) && max !== void 0 && numericValue >= Number(max);
   const changeByStep = (direction) => {
@@ -1041,7 +1057,7 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var PasswordInput = React7.forwardRef(
   ({
     className,
-    controlSize = "md",
+    controlSize = "lg",
     disabled,
     showPasswordLabel = "Show password",
     hidePasswordLabel = "Hide password",
@@ -1091,7 +1107,7 @@ PasswordInput.displayName = "PasswordInput";
 var React8 = __toESM(require("react"), 1);
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Label = React8.forwardRef(
-  ({ className, controlSize = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  ({ className, controlSize = "lg", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "label",
     {
       ref,
@@ -1704,9 +1720,16 @@ function positionDropdown(trigger, panel, bounds, direction, align) {
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function Dropdown({
   items,
-  selectedValue,
+  selectedValue = "",
   onSelect,
-  triggerLabel = "Options",
+  multiple = false,
+  selectedValues = [],
+  onSelectionChange,
+  searchable = false,
+  searchPlaceholder = "Find an option",
+  emptyMessage = "No matching options.",
+  triggerLabel,
+  fieldLabel,
   direction = "down",
   align = "left",
   maxHeight = 320,
@@ -1716,7 +1739,7 @@ function Dropdown({
   label,
   iconOnly = false,
   noChevron = false,
-  size: sizeAlias = "md",
+  size: sizeAlias = "lg",
   controlSize,
   triggerId,
   triggerVariant = "outline",
@@ -1726,17 +1749,37 @@ function Dropdown({
   closeOnSelect = true,
   disabled = false
 }) {
+  const [query, setQuery] = React12.useState("");
+  const searchRef = React12.useRef(null);
+  const accessibleLabel = triggerLabel ?? fieldLabel ?? "Options";
   const size = controlSize ?? sizeAlias;
   const [open, setOpen] = React12.useState(false);
+  React12.useEffect(() => {
+    if (!open) setQuery("");
+  }, [open]);
   const rootRef = React12.useRef(null);
   const menuId = React12.useId();
   const focusOnOpen = React12.useRef(false);
   const triggerRef = React12.useRef(null);
   const panelRef = React12.useRef(null);
   const [panelStyle, setPanelStyle] = React12.useState({});
-  const visibleItems = items.filter(
+  const renderableItems = items.filter(
     (item) => item.icon != null || item.description != null && (typeof item.description === "string" ? item.description !== "" : true)
   );
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  let groupTitle = "";
+  const matching = new Set(renderableItems.filter((item) => {
+    if (item.kind === "header") {
+      groupTitle = String(item.description ?? "");
+      return false;
+    }
+    return `${groupTitle} ${typeof item.description === "string" ? item.description : item.value}`.toLocaleLowerCase().includes(normalizedQuery);
+  }).map((item) => item.value));
+  const visibleItems = renderableItems.filter((item, index) => {
+    if (item.kind !== "header") return matching.has(item.value);
+    const nextHeader = renderableItems.findIndex((next, i) => i > index && next.kind === "header");
+    return renderableItems.slice(index + 1, nextHeader < 0 ? void 0 : nextHeader).some((next) => matching.has(next.value));
+  });
   const selectableItems = visibleItems.filter((i) => i.kind !== "header");
   const selected = items.find((i) => i.value === selectedValue && i.kind !== "header") ?? selectableItems[0] ?? visibleItems[0];
   const ChevronIcon = direction === "up" ? import_fractal_icons10.ChevronUp : direction === "left" ? import_fractal_icons10.ChevronLeft : direction === "right" ? import_fractal_icons10.ChevronRight : import_fractal_icons10.ChevronDown;
@@ -1796,6 +1839,7 @@ function Dropdown({
       setPanelStyle((previous) => Object.entries(nextStyle).every(([key, value]) => previous[key] === value) ? previous : nextStyle);
     };
     updatePosition();
+    if (searchable && !panel.contains(document.activeElement)) searchRef.current?.focus({ preventScroll: true });
     if (focusOnOpen.current) {
       focusOnOpen.current = false;
       const option = panel.querySelector('[aria-selected="true"]') ?? panel.querySelector('[role="option"]');
@@ -1819,7 +1863,7 @@ function Dropdown({
       window.visualViewport?.removeEventListener("resize", updatePosition);
       window.visualViewport?.removeEventListener("scroll", updatePosition);
     };
-  }, [open, direction, align, maxHeight, collisionPadding, items, label]);
+  }, [open, direction, align, maxHeight, collisionPadding, items, label, query, searchable]);
   React12.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
@@ -1830,19 +1874,19 @@ function Dropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
-  if (visibleItems.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: rootRef, "data-control-size": size, className: cn("fractal-dropdown", className), children: [
+  if (renderableItems.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: rootRef, "data-control-size": size, "data-filled": multiple ? selectedValues.length > 0 : Boolean(selectedValue), "data-open": open, className: cn("fractal-dropdown", fieldLabel && "fractal-floating-field fractal-floating-field--dropdown", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "button",
       {
         ref: triggerRef,
-        id: triggerId,
+        id: triggerId ?? `${menuId}-trigger`,
         "data-control-size": size,
         type: "button",
         disabled,
-        "aria-haspopup": "listbox",
+        "aria-haspopup": searchable ? "dialog" : "listbox",
         "aria-expanded": open,
-        "aria-controls": open ? menuId : void 0,
+        "aria-controls": open ? searchable ? menuId : `${menuId}-options` : void 0,
         onKeyDown: (event) => {
           if (event.key === "ArrowDown" || event.key === "ArrowUp") {
             event.preventDefault();
@@ -1856,7 +1900,7 @@ function Dropdown({
             }
           }
         },
-        "aria-label": triggerLabel,
+        "aria-label": accessibleLabel,
         onClick: () => setOpen((o) => !o),
         className: cn(
           "fractal-control",
@@ -1868,20 +1912,22 @@ function Dropdown({
           triggerClassName
         ),
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-            selected.icon != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
-            selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-selected-text", children: selected.description })
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: fieldLabel ? "fractal-dropdown-field-value" : void 0, style: fieldLabel ? void 0 : { display: "contents" }, children: triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+            selected?.icon != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected?.icon }),
+            selected?.description != null && (typeof selected?.description !== "string" || selected?.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-selected-text", children: selected?.description })
+          ] }) }),
           !noChevron && !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
         ]
       }
     ),
+    fieldLabel ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "fractal-floating-field__label", htmlFor: triggerId ?? `${menuId}-trigger`, children: fieldLabel }) : null,
     open && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         ref: panelRef,
         id: menuId,
         onKeyDown: (event) => {
+          if (event.target === searchRef.current && event.key !== "ArrowDown") return;
           if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
           event.preventDefault();
           const options = Array.from(panelRef.current?.querySelectorAll('[role="option"]') ?? []);
@@ -1890,49 +1936,58 @@ function Dropdown({
           options[index]?.focus({ preventScroll: true });
           options[index]?.scrollIntoView({ block: "nearest" });
         },
-        role: "listbox",
-        "aria-label": triggerLabel,
+        role: searchable ? "dialog" : void 0,
+        "aria-label": accessibleLabel,
         className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
         style: panelStyle,
         children: [
-          label != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-label", children: label }),
-          visibleItems.map((item, index) => {
-            const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
-            const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
-            if (item.kind === "header") {
+          searchable && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fractal-dropdown-search", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.MagnifyingGlass, { "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { ref: searchRef, type: "search", "aria-label": searchPlaceholder, placeholder: searchPlaceholder, value: query, onChange: (event) => setQuery(event.target.value) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { role: "listbox", id: `${menuId}-options`, "aria-label": accessibleLabel, "aria-multiselectable": multiple || void 0, children: [
+            label != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-label", children: label }),
+            visibleItems.map((item, index) => {
+              const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
+              const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
+              if (item.kind === "header") {
+                return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(React12.Fragment, { children: [
+                  topDivider,
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
+                  bottomDivider
+                ] }, `header-${index}`);
+              }
+              const isSelected = multiple ? selectedValues.includes(item.value) : item.value === selectedValue;
               return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(React12.Fragment, { children: [
                 topDivider,
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": isSelected,
+                    onClick: () => {
+                      if (multiple) onSelectionChange?.(isSelected ? selectedValues.filter((value) => value !== item.value) : [...selectedValues, item.value]);
+                      else onSelect?.(item.value);
+                      if (!multiple && closeOnSelect) {
+                        setOpen(false);
+                        triggerRef.current?.focus();
+                      }
+                    },
+                    className: "fractal-dropdown-option",
+                    children: [
+                      multiple && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-checkbox", "data-checked": isSelected, "aria-hidden": "true", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.Check, {}) }),
+                      item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-icon", children: item.icon }),
+                      item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-option-text", children: item.description }),
+                      item.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-trailing", children: item.trailing })
+                    ]
+                  }
+                ),
                 bottomDivider
-              ] }, `header-${index}`);
-            }
-            const isSelected = item.value === selectedValue;
-            return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(React12.Fragment, { children: [
-              topDivider,
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-                "button",
-                {
-                  type: "button",
-                  role: "option",
-                  "aria-selected": isSelected,
-                  onClick: () => {
-                    onSelect(item.value);
-                    if (closeOnSelect) {
-                      setOpen(false);
-                      triggerRef.current?.focus();
-                    }
-                  },
-                  className: "fractal-dropdown-option",
-                  children: [
-                    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-icon", children: item.icon }),
-                    item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-option-text", children: item.description }),
-                    item.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-trailing", children: item.trailing })
-                  ]
-                }
-              ),
-              bottomDivider
-            ] }, item.value);
-          })
+              ] }, item.value);
+            })
+          ] }),
+          !selectableItems.length && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { role: "status", className: "fractal-dropdown-label", children: emptyMessage })
         ]
       }
     )
@@ -2663,7 +2718,7 @@ function Ghost({ className, width, height, radius, style, ...props }) {
 function GhostLine({ className, size = "md", width = "100%", ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
 }
-function ButtonGhost({ className, size = "md", controlSize, iconOnly = false, width, ...props }) {
+function ButtonGhost({ className, size = "lg", controlSize, iconOnly = false, width, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { "data-control-size": controlSize ?? size, className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
 }
 function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
@@ -2697,7 +2752,7 @@ function TextareaGhost({ className, labelWidth = "26%", ...props }) {
 function LabelGhost({ className, width = "26%", ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
 }
-function FormFieldGhost({ className, labelWidth = "26%", multiline = false, controlSize = "md", ...props }) {
+function FormFieldGhost({ className, labelWidth = "26%", multiline = false, controlSize = "lg", ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LabelGhost, { width: labelWidth }),
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
@@ -2723,7 +2778,7 @@ function LinkGhost({ className, width = 96, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
 }
 var TextButtonGhost = LinkGhost;
-function DropdownGhost({ className, controlSize = "md", ...props }) {
+function DropdownGhost({ className, controlSize = "lg", ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "38%" }),
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-dropdown__chevron" })
@@ -2961,7 +3016,25 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
 var React18 = __toESM(require("react"), 1);
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var Textarea = React18.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
+  ({ className, fieldLabel, textStyle = "source", id, placeholder, ...props }, ref) => {
+    const generatedId = React18.useId();
+    const fieldId = id ?? generatedId;
+    const input = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      "textarea",
+      {
+        ref,
+        id: fieldLabel ? fieldId : id,
+        placeholder: fieldLabel ? placeholder || " " : placeholder,
+        className: cn("fractal-textarea", className),
+        "data-text-style": textStyle,
+        ...props
+      }
+    );
+    return fieldLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "fractal-floating-field fractal-floating-field--textarea", "data-control-size": "md", children: [
+      input,
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
+    ] }) : input;
+  }
 );
 Textarea.displayName = "Textarea";