@efolusi/meridian 1.5.0

package/forms/Input.js

@@ -0,0 +1,75 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { injectEfCss } from "./Button.js";
+import { useFieldProps } from "./FormField.js";
+const CSS = `
+.ef-field{display:flex;flex-direction:column;gap:6px}
+.ef-field__label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}
+.ef-field__hint{font-size:var(--text-xs);color:var(--text-muted)}
+.ef-field__error{font-size:var(--text-xs);color:var(--danger-600);display:flex;align-items:center;gap:4px}
+.ef-input{position:relative;display:flex;align-items:center}
+.ef-input__el{width:100%;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-primary);font-family:var(--font-sans);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
+.ef-input__el::placeholder{color:var(--text-muted)}
+.ef-input__el:hover:not(:disabled){border-color:var(--sand-400)}
+.ef-input__el:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
+.ef-input__el:disabled{background:var(--surface-sunken);color:var(--text-muted);cursor:not-allowed}
+.ef-input--sm .ef-input__el{height:var(--control-h-sm);padding:0 10px;font-size:var(--text-sm)}
+.ef-input--md .ef-input__el{height:var(--control-h-md);padding:0 12px;font-size:var(--text-md)}
+.ef-input--lg .ef-input__el{height:var(--control-h-lg);padding:0 14px;font-size:var(--text-lg)}
+.ef-input--icon.ef-input--sm .ef-input__el{padding-left:32px}
+.ef-input--icon.ef-input--md .ef-input__el{padding-left:36px}
+.ef-input--icon.ef-input--lg .ef-input__el{padding-left:40px}
+.ef-input__icon{position:absolute;left:11px;color:var(--text-muted);display:inline-flex;pointer-events:none}
+.ef-input--invalid .ef-input__el{border-color:var(--danger-600)}
+.ef-input--invalid .ef-input__el:focus{box-shadow:var(--focus-ring-danger)}
+`;
+export function Input({
+  label,
+  hint,
+  error,
+  iconLeft,
+  size = 'md',
+  invalid,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-input', CSS);
+  // Picks up id / aria wiring when nested in a FormField; standalone this is a no-op.
+  const field = useFieldProps({
+    invalid,
+    error,
+    id: rest.id,
+    'aria-describedby': rest['aria-describedby']
+  });
+  const bad = field.invalid;
+  const control = /*#__PURE__*/React.createElement("span", {
+    className: `ef-input ef-input--${size}${iconLeft ? ' ef-input--icon' : ''}${bad ? ' ef-input--invalid' : ''}`
+  }, iconLeft ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-input__icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: iconLeft,
+    size: size === 'lg' ? 18 : 16
+  })) : null, /*#__PURE__*/React.createElement("input", _extends({
+    className: "ef-input__el",
+    "aria-invalid": bad || undefined
+  }, rest, field.controlProps)));
+  if (!label && !hint && !error) return /*#__PURE__*/React.cloneElement(control, {
+    style,
+    className: control.props.className + (className ? ' ' + className : '')
+  });
+  return /*#__PURE__*/React.createElement("label", {
+    className: `ef-field${className ? ' ' + className : ''}`,
+    style: style
+  }, label ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-field__label"
+  }, label) : null, control, error ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-field__error"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "circle-alert",
+    size: 12
+  }), error) : hint ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-field__hint"
+  }, hint) : null);
+}

package/forms/InputGroup.d.ts

@@ -0,0 +1,15 @@
+export interface InputGroupProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+  /** Field label rendered above */
+  label?: string;
+  /** Muted helper text below */
+  hint?: string;
+  /** Error message below — also sets invalid styling */
+  error?: string;
+  /** Leading addon: string renders a tinted cell, a node renders bare */
+  prefix?: React.ReactNode;
+  /** Trailing addon: string renders a tinted cell, a node renders bare */
+  suffix?: React.ReactNode;
+  /** @default 'md' */
+  size?: 'sm' | 'md' | 'lg';
+}
+export declare function InputGroup(props: InputGroupProps): React.JSX.Element;

package/forms/InputGroup.js

@@ -0,0 +1,59 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "./Button.js";
+import { useFieldProps } from "./FormField.js";
+const CSS = `
+.ef-igroup{display:flex;flex-direction:column;gap:6px;width:100%}
+.ef-igroup__label{font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}
+.ef-igroup__row{display:flex;align-items:stretch;width:100%;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-card);transition:box-shadow var(--dur-fast) var(--ease-out)}
+.ef-igroup__row:focus-within{box-shadow:var(--focus-ring)}
+.ef-igroup--invalid .ef-igroup__row{border-color:var(--danger-600)}
+.ef-igroup__addon{display:flex;align-items:center;gap:6px;padding:0 11px;background:var(--surface-sunken);color:var(--text-muted);font-size:var(--text-sm);white-space:nowrap;flex:none}
+.ef-igroup__addon--lead{border-right:1px solid var(--border-default);border-radius:calc(var(--radius-sm) - 1px) 0 0 calc(var(--radius-sm) - 1px)}
+.ef-igroup__addon--trail{border-left:1px solid var(--border-default);border-radius:0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0}
+.ef-igroup__addon--bare{background:none;border:none;padding:0 4px}
+.ef-igroup__input{flex:1;min-width:0;height:34px;padding:0 11px;border:none;background:transparent;font-family:var(--font-sans);font-size:var(--text-md);color:var(--text-primary)}
+.ef-igroup__input:focus{outline:none}
+.ef-igroup__input::placeholder{color:var(--text-muted)}
+.ef-igroup--sm .ef-igroup__input{height:26px;font-size:var(--text-sm)}
+.ef-igroup--lg .ef-igroup__input{height:42px}
+.ef-igroup__note{font-size:12.5px;color:var(--text-muted)}
+.ef-igroup__note--error{color:var(--danger-600)}
+`;
+export function InputGroup({
+  label,
+  hint,
+  error,
+  prefix,
+  suffix,
+  size = 'md',
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-igroup', CSS);
+  // Picks up id / aria wiring when nested in a FormField; standalone this is a no-op.
+  const field = useFieldProps({
+    error,
+    id: rest.id,
+    'aria-describedby': rest['aria-describedby']
+  });
+  const addon = (node, where) => node == null ? null : /*#__PURE__*/React.createElement("span", {
+    className: `ef-igroup__addon ef-igroup__addon--${where}${typeof node !== 'string' ? ' ef-igroup__addon--bare' : ''}`
+  }, node);
+  return /*#__PURE__*/React.createElement("label", {
+    className: `ef-igroup ef-igroup--${size}${error ? ' ef-igroup--invalid' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }, label ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-igroup__label"
+  }, label) : null, /*#__PURE__*/React.createElement("span", {
+    className: "ef-igroup__row"
+  }, addon(prefix, 'lead'), /*#__PURE__*/React.createElement("input", _extends({
+    className: "ef-igroup__input",
+    "aria-invalid": field.invalid || undefined
+  }, rest, field.controlProps)), addon(suffix, 'trail')), error ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-igroup__note ef-igroup__note--error"
+  }, error) : hint ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-igroup__note"
+  }, hint) : null);
+}

package/forms/Label.d.ts

@@ -0,0 +1,11 @@
+export interface LabelProps {
+  htmlFor?: string;
+  /** Red asterisk */
+  required?: boolean;
+  /** Muted inline hint after the text */
+  hint?: React.ReactNode;
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Label(props: LabelProps): React.JSX.Element;

package/forms/Label.js

@@ -0,0 +1,29 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "./Button.js";
+const CSS = `
+.ef-label{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}
+.ef-label__req{color:var(--danger-600);font-weight:600}
+.ef-label__hint{font-weight:400;color:var(--text-muted);font-size:12.5px}
+`;
+export function Label({
+  htmlFor,
+  required,
+  hint,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-label', CSS);
+  return /*#__PURE__*/React.createElement("label", _extends({}, rest, {
+    htmlFor: htmlFor,
+    className: `ef-label${className ? ' ' + className : ''}`,
+    style: style
+  }), children, required ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-label__req",
+    "aria-hidden": "true"
+  }, "*") : null, hint ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-label__hint"
+  }, hint) : null);
+}

package/forms/Radio.d.ts

@@ -0,0 +1,6 @@
+export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: React.ReactNode;
+  /** Muted second line under the label */
+  description?: string;
+}
+export declare function Radio(props: RadioProps): React.JSX.Element;

package/forms/Radio.js

@@ -0,0 +1,46 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "./Button.js";
+import { useFieldProps } from "./FormField.js";
+const CSS = `
+.ef-radio{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;user-select:none}
+.ef-radio--disabled{opacity:.45;cursor:not-allowed}
+.ef-radio__input{position:absolute;opacity:0;width:0;height:0}
+.ef-radio__dot{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;margin-top:1px;border:1.5px solid var(--border-strong);border-radius:var(--radius-full);background:var(--surface-card);transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-med) var(--ease-spring)}
+.ef-radio__dot::after{content:'';width:8px;height:8px;border-radius:var(--radius-full);background:var(--accent);opacity:0;transform:scale(.4);transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-med) var(--ease-spring)}
+.ef-radio__input:checked+.ef-radio__dot{border-color:var(--accent)}
+.ef-radio__input:checked+.ef-radio__dot::after{opacity:1;transform:scale(1)}
+.ef-radio:active .ef-radio__dot{transform:scale(.95)}
+.ef-radio__input:focus-visible+.ef-radio__dot{box-shadow:var(--focus-ring)}
+.ef-radio__label{font-size:var(--text-md);color:var(--text-primary);line-height:1.4}
+.ef-radio__desc{display:block;font-size:var(--text-sm);color:var(--text-muted)}
+`;
+export function Radio({
+  label,
+  description,
+  disabled,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-radio', CSS);
+  // Picks up id / aria wiring when nested in a FormField; standalone this is a no-op.
+  const field = useFieldProps({
+    id: rest.id,
+    'aria-describedby': rest['aria-describedby']
+  });
+  return /*#__PURE__*/React.createElement("label", {
+    className: `ef-radio${disabled ? ' ef-radio--disabled' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: "radio",
+    className: "ef-radio__input",
+    disabled: disabled
+  }, rest, field.controlProps)), /*#__PURE__*/React.createElement("span", {
+    className: "ef-radio__dot"
+  }), label ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-radio__label"
+  }, label, description ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-radio__desc"
+  }, description) : null) : null);
+}

package/forms/Select.d.ts

@@ -0,0 +1,10 @@
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  label?: string;
+  hint?: string;
+  /** Options as strings or {value, label}; alternatively pass <option> children */
+  options?: Array<string | { value: string; label: string }>;
+  /** @default 'md' */
+  size?: 'sm' | 'md' | 'lg';
+  invalid?: boolean;
+}
+export declare function Select(props: SelectProps): React.JSX.Element;

package/forms/Select.js

@@ -0,0 +1,68 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { injectEfCss } from "./Button.js";
+import { useFieldProps } from "./FormField.js";
+const CSS = `
+.ef-field{display:flex;flex-direction:column;gap:6px}
+.ef-field__label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}
+.ef-field__hint{font-size:var(--text-xs);color:var(--text-muted)}
+.ef-select{position:relative;display:flex;align-items:center}
+.ef-select__el{width:100%;appearance:none;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-primary);font-family:var(--font-sans);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
+.ef-select__el:hover:not(:disabled){border-color:var(--sand-400)}
+.ef-select__el:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
+.ef-select__el:disabled{background:var(--surface-sunken);color:var(--text-muted);cursor:not-allowed}
+.ef-select--sm .ef-select__el{height:var(--control-h-sm);padding:0 28px 0 10px;font-size:var(--text-sm)}
+.ef-select--md .ef-select__el{height:var(--control-h-md);padding:0 32px 0 12px;font-size:var(--text-md)}
+.ef-select--lg .ef-select__el{height:var(--control-h-lg);padding:0 36px 0 14px;font-size:var(--text-lg)}
+.ef-select__chevron{position:absolute;right:10px;color:var(--text-muted);pointer-events:none;display:inline-flex}
+.ef-select--invalid .ef-select__el{border-color:var(--danger-600)}
+`;
+export function Select({
+  label,
+  hint,
+  options,
+  size = 'md',
+  invalid,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-select', CSS);
+  // Picks up id / aria wiring when nested in a FormField; standalone this is a no-op.
+  const field = useFieldProps({
+    invalid,
+    id: rest.id,
+    'aria-describedby': rest['aria-describedby']
+  });
+  const control = /*#__PURE__*/React.createElement("span", {
+    className: `ef-select ef-select--${size}${field.invalid ? ' ef-select--invalid' : ''}`
+  }, /*#__PURE__*/React.createElement("select", _extends({
+    className: "ef-select__el",
+    "aria-invalid": field.invalid || undefined
+  }, rest, field.controlProps), options ? options.map(o => typeof o === 'string' ? /*#__PURE__*/React.createElement("option", {
+    key: o,
+    value: o
+  }, o) : /*#__PURE__*/React.createElement("option", {
+    key: o.value,
+    value: o.value
+  }, o.label)) : children), /*#__PURE__*/React.createElement("span", {
+    className: "ef-select__chevron"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-down",
+    size: 16
+  })));
+  if (!label && !hint) return /*#__PURE__*/React.cloneElement(control, {
+    style,
+    className: control.props.className + (className ? ' ' + className : '')
+  });
+  return /*#__PURE__*/React.createElement("label", {
+    className: `ef-field${className ? ' ' + className : ''}`,
+    style: style
+  }, label ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-field__label"
+  }, label) : null, control, hint ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-field__hint"
+  }, hint) : null);
+}

package/forms/Slider.d.ts

@@ -0,0 +1,18 @@
+export interface SliderProps {
+  label?: string;
+  /** Show current value right of the label */
+  showValue?: boolean;
+  /** Format the shown value, e.g. v => v + '%' */
+  format?: (v: number) => string;
+  /** @default 0 */ min?: number;
+  /** @default 100 */ max?: number;
+  /** @default 1 */ step?: number;
+  /** Controlled value */
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number, e: React.ChangeEvent) => void;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Slider(props: SliderProps): React.JSX.Element;

package/forms/Slider.js

@@ -0,0 +1,75 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "./Button.js";
+import { useFieldProps } from "./FormField.js";
+const CSS = `
+.ef-slider{display:flex;flex-direction:column;gap:8px}
+.ef-slider__row{display:flex;align-items:center;gap:12px}
+.ef-slider__label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);display:flex;justify-content:space-between}
+.ef-slider__val{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:400;color:var(--text-muted)}
+.ef-slider__input{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;cursor:pointer;margin:0}
+.ef-slider__input::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--ef-fill,50%),var(--border-strong) var(--ef-fill,50%))}
+.ef-slider__input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;border-radius:var(--radius-full);background:var(--surface-card);border:1.5px solid var(--accent);transition:transform var(--dur-fast) var(--ease-out)}
+.ef-slider__input:active::-webkit-slider-thumb{transform:scale(1.15)}
+.ef-slider__input:focus-visible{outline:none}
+.ef-slider__input:focus-visible::-webkit-slider-thumb{box-shadow:var(--focus-ring)}
+.ef-slider__input:disabled{opacity:.45;cursor:not-allowed}
+.ef-slider__input::-moz-range-track{height:2px;border-radius:2px;background:var(--border-strong)}
+.ef-slider__input::-moz-range-progress{height:2px;border-radius:2px;background:var(--accent)}
+.ef-slider__input::-moz-range-thumb{width:12px;height:12px;border-radius:var(--radius-full);background:var(--surface-card);border:1.5px solid var(--accent)}
+`;
+export function Slider({
+  label,
+  showValue,
+  format,
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-slider', CSS);
+  // Picks up id / aria wiring when nested in a FormField; standalone this is a no-op.
+  const field = useFieldProps({
+    id: rest.id,
+    'aria-describedby': rest['aria-describedby']
+  });
+  const [inner, setInner] = React.useState(defaultValue != null ? defaultValue : (min + max) / 2);
+  const v = value != null ? value : inner;
+  const pct = (v - min) / (max - min) * 100;
+  const handle = e => {
+    const n = +e.target.value;
+    if (value == null) setInner(n);
+    if (onChange) onChange(n, e);
+  };
+  const input = /*#__PURE__*/React.createElement("input", _extends({
+    type: "range",
+    className: "ef-slider__input",
+    style: {
+      '--ef-fill': pct + '%'
+    },
+    min: min,
+    max: max,
+    step: step,
+    value: v,
+    onChange: handle,
+    disabled: disabled
+  }, rest, field.controlProps));
+  if (!label && !showValue) return /*#__PURE__*/React.createElement("span", {
+    className: `ef-slider${className ? ' ' + className : ''}`,
+    style: style
+  }, input);
+  return /*#__PURE__*/React.createElement("label", {
+    className: `ef-slider${className ? ' ' + className : ''}`,
+    style: style
+  }, (label || showValue) && /*#__PURE__*/React.createElement("span", {
+    className: "ef-slider__label"
+  }, label, /*#__PURE__*/React.createElement("span", {
+    className: "ef-slider__val"
+  }, showValue ? format ? format(v) : v : '')), input);
+}

package/forms/Switch.d.ts

@@ -0,0 +1,6 @@
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  label?: React.ReactNode;
+  /** @default 'md' */
+  size?: 'sm' | 'md';
+}
+export declare function Switch(props: SwitchProps): React.JSX.Element;

package/forms/Switch.js

@@ -0,0 +1,46 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "./Button.js";
+import { useFieldProps } from "./FormField.js";
+const CSS = `
+.ef-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
+.ef-switch--disabled{opacity:.45;cursor:not-allowed}
+.ef-switch__input{position:absolute;opacity:0;width:0;height:0}
+.ef-switch__track{position:relative;flex:none;width:36px;height:21px;border-radius:var(--radius-full);background:var(--border-strong);transition:background var(--dur-med) var(--ease-out)}
+.ef-switch__track::after{content:'';position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:var(--radius-full);background:var(--surface-card);box-shadow:var(--shadow-sm);transition:transform var(--dur-med) var(--ease-spring)}
+.ef-switch__input:checked+.ef-switch__track{background:var(--accent)}
+.ef-switch__input:checked+.ef-switch__track::after{transform:translateX(15px)}
+.ef-switch__input:focus-visible+.ef-switch__track{box-shadow:var(--focus-ring)}
+.ef-switch--sm .ef-switch__track{width:30px;height:18px}
+.ef-switch--sm .ef-switch__track::after{width:13px;height:13px;top:2.5px}
+.ef-switch--sm .ef-switch__input:checked+.ef-switch__track::after{transform:translateX(12px)}
+.ef-switch__label{font-size:var(--text-md);color:var(--text-primary)}
+`;
+export function Switch({
+  label,
+  size = 'md',
+  disabled,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-switch', CSS);
+  // Picks up id / aria wiring when nested in a FormField; standalone this is a no-op.
+  const field = useFieldProps({
+    id: rest.id,
+    'aria-describedby': rest['aria-describedby']
+  });
+  return /*#__PURE__*/React.createElement("label", {
+    className: `ef-switch ef-switch--${size}${disabled ? ' ef-switch--disabled' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: "checkbox",
+    role: "switch",
+    className: "ef-switch__input",
+    disabled: disabled
+  }, rest, field.controlProps)), /*#__PURE__*/React.createElement("span", {
+    className: "ef-switch__track"
+  }), label ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-switch__label"
+  }, label) : null);
+}

package/forms/Textarea.d.ts

@@ -0,0 +1,8 @@
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  hint?: string;
+  /** Error message below — also sets invalid styling */
+  error?: string;
+  invalid?: boolean;
+}
+export declare function Textarea(props: TextareaProps): React.JSX.Element;

package/forms/Textarea.js

@@ -0,0 +1,58 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { injectEfCss } from "./Button.js";
+import { useFieldProps } from "./FormField.js";
+const CSS = `
+.ef-field{display:flex;flex-direction:column;gap:6px}
+.ef-field__label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}
+.ef-field__hint{font-size:var(--text-xs);color:var(--text-muted)}
+.ef-field__error{font-size:var(--text-xs);color:var(--danger-600);display:flex;align-items:center;gap:4px}
+.ef-textarea{width:100%;min-height:80px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--leading-normal);resize:vertical;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
+.ef-textarea::placeholder{color:var(--text-muted)}
+.ef-textarea:hover:not(:disabled){border-color:var(--sand-400)}
+.ef-textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
+.ef-textarea:disabled{background:var(--surface-sunken);color:var(--text-muted);cursor:not-allowed}
+.ef-textarea--invalid{border-color:var(--danger-600)}
+.ef-textarea--invalid:focus{box-shadow:var(--focus-ring-danger)}
+`;
+export function Textarea({
+  label,
+  hint,
+  error,
+  invalid,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-textarea', CSS);
+  // Picks up id / aria wiring when nested in a FormField; standalone this is a no-op.
+  const field = useFieldProps({
+    invalid,
+    error,
+    id: rest.id,
+    'aria-describedby': rest['aria-describedby']
+  });
+  const bad = field.invalid;
+  const el = /*#__PURE__*/React.createElement("textarea", _extends({
+    className: `ef-textarea${bad ? ' ef-textarea--invalid' : ''}`,
+    "aria-invalid": bad || undefined
+  }, rest, field.controlProps));
+  if (!label && !hint && !error) return /*#__PURE__*/React.cloneElement(el, {
+    style,
+    className: el.props.className + (className ? ' ' + className : '')
+  });
+  return /*#__PURE__*/React.createElement("label", {
+    className: `ef-field${className ? ' ' + className : ''}`,
+    style: style
+  }, label ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-field__label"
+  }, label) : null, el, error ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-field__error"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "circle-alert",
+    size: 12
+  }), error) : hint ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-field__hint"
+  }, hint) : null);
+}

package/forms/Toggle.d.ts

@@ -0,0 +1,26 @@
+export interface ToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Controlled pressed state */
+  pressed?: boolean;
+  defaultPressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  /** Identity when used inside a ToggleGroup */
+  value?: string;
+  /** Lucide icon name */
+  icon?: string;
+  /** @default 'md' */
+  size?: 'sm' | 'md';
+  children?: React.ReactNode;
+}
+export interface ToggleGroupProps {
+  /** @default 'single' */
+  type?: 'single' | 'multiple';
+  /** Controlled: string (single) or string[] (multiple) */
+  value?: string | string[] | null;
+  defaultValue?: string | string[] | null;
+  onChange?: (value: string | string[] | null) => void;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Toggle(props: ToggleProps): React.JSX.Element;
+export declare function ToggleGroup(props: ToggleGroupProps): React.JSX.Element;