@jiwambe/components 0.2.0

package/dist/components/Stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import React from 'react';\nimport type { SpacingProps, SpacingToken, GapProps } from '../../types/spacing';\nimport type { DimensionProps } from '../../utils/responsive-props';\nimport type {\n  StackLayoutProps,\n  AlignItemsValue,\n  JustifyContentValue,\n} from '../../types/layout';\nimport {\n  resolveSpacing,\n  gapMap,\n  alignMap,\n  justifyMap,\n} from '../../utils/spacing';\nimport { alignItemsMap, justifyContentMap } from '../../utils/layoutClasses';\nimport type { StackAlign, StackJustify } from '../../utils/spacing';\n\nexport type { StackAlign, StackJustify } from '../../utils/spacing';\n\n/** Flex direction for Stack: column (vertical) or row (horizontal). */\nexport type StackDirection = 'column' | 'row';\n\n/**\n * Tailwind display utility class values accepted by Stack's `display` prop.\n * When provided, this replaces the default hardcoded `flex` base class so\n * that responsive visibility utilities (e.g. `className=\"hidden lg:flex\"`)\n * can work correctly without specificity conflicts.\n *\n * @example\n * // Visible only at lg+ (940px)\n * <Stack display=\"hidden\" className=\"lg:flex\" direction=\"row\">…</Stack>\n *\n * @example\n * // Always flex (default, no prop needed)\n * <Stack direction=\"row\">…</Stack>\n */\nexport type StackDisplay =\n  | 'flex'\n  | 'hidden'\n  | 'block'\n  | 'inline-flex'\n  | 'inline-block'\n  | 'inline'\n  | 'grid'\n  | 'inline-grid'\n  | 'contents';\n\n/**\n * Props for the Stack component. Extends SpacingProps, StackLayoutProps\n * (alignItems, justifyContent), and div attributes.\n */\nexport interface StackProps\n  extends SpacingProps,\n  GapProps,\n  DimensionProps,\n  StackLayoutProps,\n  Omit<React.HTMLAttributes<HTMLDivElement>, 'display'> {\n  /**\n   * Flex direction. Controls whether children are stacked vertically\n   * or arranged horizontally.\n   * @default 'column'\n   */\n  direction?: StackDirection;\n  /**\n   * Gap between direct children using CSS gap — not margin. Accepts any\n   * SpacingToken string. Spacing is consistent regardless of child\n   * visibility, since gap behaves differently from margin with hidden children.\n   * @default undefined\n   */\n  spacing?: SpacingToken;\n  /**\n   * Shorthand for aligning children on the cross axis. Accepts Jiwambe\n   * shorthand values ('start', 'center', 'end', 'stretch'). When both\n   * align and alignItems are provided, alignItems takes precedence.\n   * @see alignItems\n   */\n  align?: StackAlign;\n  /**\n   * CSS-value alias for the align prop. Cross-axis alignment. Takes\n   * precedence over align when both are provided. Prefer for clarity.\n   * @default undefined\n   * @see align\n   */\n  alignItems?: AlignItemsValue;\n  /**\n   * Shorthand for distributing children along the main axis. Accepts\n   * Jiwambe shorthand ('start', 'center', 'end', 'between', 'around').\n   * When both justify and justifyContent are provided, justifyContent\n   * takes precedence.\n   * @see justifyContent\n   */\n  justify?: StackJustify;\n  /**\n   * CSS-value alias for the justify prop. Main-axis distribution. Takes\n   * precedence over justify when both are provided.\n   * @default undefined\n   * @see justify\n   */\n  justifyContent?: JustifyContentValue;\n  /**\n   * When true, children wrap to the next line when the Stack overflows\n   * its container. Sets flex-wrap: wrap. Only meaningful when\n   * direction=\"row\".\n   * @default false\n   */\n  wrap?: boolean;\n  /**\n   * The HTML element to render as the root. Use for semantic correctness\n   * (e.g. as=\"nav\", as=\"section\").\n   * @default 'div'\n   */\n  as?: React.ElementType;\n  /** Forwarded ref for the root element. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n  /** Child content. @default undefined */\n  children?: React.ReactNode;\n  /**\n   * Controls the CSS display value of the root element via a Tailwind utility\n   * class. When provided, replaces the default `flex` base class so that\n   * responsive overrides in `className` work without CSS specificity conflicts.\n   *\n   * Use this together with a responsive class in `className` to implement\n   * responsive show/hide:\n   *\n   * @example\n   * // Hidden by default, shown as flex at lg (940px+)\n   * <Stack display=\"hidden\" className=\"lg:flex\" direction=\"row\" align=\"center\">…</Stack>\n   *\n   * @example\n   * // Shown as flex from sm (600px), hidden again at lg (940px+)\n   * <Stack display=\"hidden\" className=\"sm:flex lg:hidden\" direction=\"row\">…</Stack>\n   *\n   * @default undefined — falls back to the hardcoded 'flex' base class\n   */\n  display?: StackDisplay;\n}\n\n/**\n * One-dimensional flex layout component. Stacks children vertically\n * (default) or horizontally with consistent spacing between them.\n *\n * Stack is specifically for linear sequences of children. For\n * two-dimensional or multi-column layouts, use Grid. For a\n * general-purpose wrapper, use Box.\n *\n * Spacing between children is controlled by the spacing prop (CSS gap),\n * not by margin on children. This means spacing is consistent regardless\n * of which children are visible.\n *\n * @example\n * // Vertical stack — form fields, card content\n * <Stack spacing=\"space-4\">\n *   <Input label=\"Name\" />\n *   <Input label=\"Email\" />\n *   <Button>Submit</Button>\n * </Stack>\n *\n * @example\n * // Horizontal stack — toolbar, inline actions\n * <Stack direction=\"row\" spacing=\"space-3\" alignItems=\"center\">\n *   <Icon />\n *   <Text>Label</Text>\n * </Stack>\n *\n * @example\n * // Responsive visibility — hidden on mobile, flex at lg+\n * <Stack display=\"hidden\" className=\"lg:flex\" direction=\"row\" align=\"center\">\n *   …desktop nav…\n * </Stack>\n */\nexport function Stack({\n  direction = 'column',\n  spacing,\n  align,\n  justify,\n  alignItems,\n  justifyContent,\n  wrap = false,\n  as: Tag = 'div',\n  children,\n  className = '',\n  ref,\n  display,\n  ...rest\n}: StackProps) {\n  const directionClass = direction === 'row' ? 'flex-row' : 'flex-col';\n  const spacingClass = spacing !== undefined ? gapMap[spacing] : '';\n  const alignClass = align ? alignMap[align] : '';\n  const justifyClass = justify ? justifyMap[justify] : '';\n  const alignItemsClass = alignItems !== undefined ? alignItemsMap[alignItems] : '';\n  const justifyContentClass =\n    justifyContent !== undefined ? justifyContentMap[justifyContent] : '';\n  const wrapClass = wrap ? 'flex-wrap' : '';\n  const spacingPropsClasses = resolveSpacing(rest);\n\n  // When `display` is explicitly set, use that Tailwind class instead of the\n  // hardcoded 'flex'. This allows responsive visibility patterns such as\n  // display=\"hidden\" className=\"lg:flex\" to work without specificity conflicts.\n  const displayClass = display !== undefined ? display : 'flex';\n\n  const classes = [\n    displayClass,\n    directionClass,\n    spacingClass,\n    alignClass,\n    justifyClass,\n    alignItemsClass,\n    justifyContentClass,\n    wrapClass,\n    spacingPropsClasses,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const { p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr,\n    width, height, minWidth, minHeight, maxWidth, maxHeight,\n    gap, rowGap, columnGap,\n    ...domRest } = rest;\n\n  // Build inline style for any dimension props that were provided.\n  // resolveToken converts 'space-*' tokens to var(--space-*) CSS variables.\n  const dimensionStyle: React.CSSProperties = {};\n  if (width !== undefined) dimensionStyle.width = typeof width === 'string' ? width : undefined;\n  if (height !== undefined) dimensionStyle.height = typeof height === 'string' ? height : undefined;\n  if (minWidth !== undefined) dimensionStyle.minWidth = typeof minWidth === 'string' ? minWidth : undefined;\n  if (minHeight !== undefined) dimensionStyle.minHeight = typeof minHeight === 'string' ? minHeight : undefined;\n  if (maxWidth !== undefined) dimensionStyle.maxWidth = typeof maxWidth === 'string' ? maxWidth : undefined;\n  if (maxHeight !== undefined) dimensionStyle.maxHeight = typeof maxHeight === 'string' ? maxHeight : undefined;\n\n  const inlineStyle = Object.keys(dimensionStyle).length > 0 ? dimensionStyle : undefined;\n\n  return (\n    <Tag ref={ref} className={classes} style={inlineStyle} {...domRest}>\n      {children}\n    </Tag>\n  );\n}\n\nStack.displayName = 'Stack';\n"],"names":[],"mappings":";;;AA0KO,SAAS,MAAM;AAAA,EACpB,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,IAAI,MAAM;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,iBAAiB,cAAc,QAAQ,aAAa;AAC1D,QAAM,eAAe,YAAY,SAAY,OAAO,OAAO,IAAI;AAC/D,QAAM,aAAa,QAAQ,SAAS,KAAK,IAAI;AAC7C,QAAM,eAAe,UAAU,WAAW,OAAO,IAAI;AACrD,QAAM,kBAAkB,eAAe,SAAY,cAAc,UAAU,IAAI;AAC/E,QAAM,sBACJ,mBAAmB,SAAY,kBAAkB,cAAc,IAAI;AACrE,QAAM,YAAY,OAAO,cAAc;AACvC,QAAM,sBAAsB,eAAe,IAAI;AAK/C,QAAM,eAAe,YAAY,SAAY,UAAU;AAEvD,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM;AAAA,IAAE;AAAA,IAAG;AAAA,IAAI;AAAA,IAAI;AAAA,IAAI;AAAA,IAAI;AAAA,IAAI;AAAA,IAAI;AAAA,IAAG;AAAA,IAAI;AAAA,IAAI;AAAA,IAAI;AAAA,IAAI;AAAA,IAAI;AAAA,IACxD;AAAA,IAAO;AAAA,IAAQ;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,IAC9C;AAAA,IAAK;AAAA,IAAQ;AAAA,IACb,GAAG;AAAA,EAAA,IAAY;AAIjB,QAAM,iBAAsC,CAAA;AAC5C,MAAI,UAAU,OAAW,gBAAe,QAAQ,OAAO,UAAU,WAAW,QAAQ;AACpF,MAAI,WAAW,OAAW,gBAAe,SAAS,OAAO,WAAW,WAAW,SAAS;AACxF,MAAI,aAAa,OAAW,gBAAe,WAAW,OAAO,aAAa,WAAW,WAAW;AAChG,MAAI,cAAc,OAAW,gBAAe,YAAY,OAAO,cAAc,WAAW,YAAY;AACpG,MAAI,aAAa,OAAW,gBAAe,WAAW,OAAO,aAAa,WAAW,WAAW;AAChG,MAAI,cAAc,OAAW,gBAAe,YAAY,OAAO,cAAc,WAAW,YAAY;AAEpG,QAAM,cAAc,OAAO,KAAK,cAAc,EAAE,SAAS,IAAI,iBAAiB;AAE9E,SACE,oBAAC,OAAI,KAAU,WAAW,SAAS,OAAO,aAAc,GAAG,SACxD,SAAA,CACH;AAEJ;AAEA,MAAM,cAAc;"}

package/dist/components/Tab/Tab.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+import { TabItem } from '../../types';
+/**
+ * Tab button size. Affects padding and typography (btn-small vs btn-reg).
+ */
+export type TabSize = 'small' | 'large';
+/**
+ * Props for the Tab component. Each tab uses TabItem: label, content, disabled?.
+ * Control which tab is active with activeIndex/onTabChange (controlled) or defaultActiveIndex (uncontrolled).
+ * @see TabItem
+ */
+export interface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Array of tab items. Each: label (string), content (ReactNode), disabled? (boolean). */
+    tabs: TabItem[];
+    /** Tab button size. @default 'small' */
+    size?: TabSize;
+    /** Index of the tab active by default (uncontrolled). @default 0 */
+    defaultActiveIndex?: number;
+    /** Currently active index (controlled). Use with onTabChange. @default undefined */
+    activeIndex?: number;
+    /** Called when the user selects a different tab. @default undefined */
+    onTabChange?: (index: number) => void;
+    /** Forwarded ref for the root div. @default undefined */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Tabbed interface: a row of tab buttons and a single visible panel. Each tab has label
+ * and content; only one panel is shown at a time. Supports controlled (activeIndex/onTabChange)
+ * or uncontrolled (defaultActiveIndex) usage. Keyboard: Arrow Left/Right, Home, End.
+ *
+ * @example
+ * <Tab tabs={[{ label: 'Overview', content: <p>Overview</p> }, { label: 'Details', content: <p>Details</p> }]} />
+ *
+ * @example
+ * <Tab tabs={tabItems} activeIndex={active} onTabChange={setActive} size="large" />
+ */
+export declare function Tab({ tabs, size, defaultActiveIndex, activeIndex, onTabChange, className, style, ref, ...rest }: TabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tab.d.ts.map

package/dist/components/Tab/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tab/Tab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAExC;;;;GAIG;AACH,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACtF,0FAA0F;IAC1F,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,wCAAwC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,yDAAyD;IACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAmCD;;;;;;;;;;GAUG;AACH,wBAAgB,GAAG,CAAC,EAClB,IAAI,EACJ,IAAc,EACd,kBAAsB,EACtB,WAAW,EACX,WAAW,EACX,SAAc,EACd,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,QAAQ,2CAwHV"}

package/dist/components/Tab/Tab.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useState, useEffect, useRef, useCallback } from "react";
+function tabButtonClasses(size, active, disabled) {
+  const base = [
+    "inline-flex items-center justify-center rounded-rad-sm transition-all duration-150 outline-none whitespace-nowrap select-none",
+    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1"
+  ];
+  const sizeClasses = size === "small" ? "px-space-4 py-space-2 text-btn-small" : "px-space-5 py-space-3 text-btn-reg";
+  if (disabled) {
+    return [...base, sizeClasses, "bg-fill-bg-primary text-text-disabled border border-transparent cursor-not-allowed"].join(" ");
+  }
+  if (active) {
+    return [...base, sizeClasses, "bg-fill-action-primary text-text-action-primary border border-transparent cursor-default"].join(" ");
+  }
+  return [
+    ...base,
+    sizeClasses,
+    "bg-fill-bg-primary text-text-primary border border-border-light",
+    "hover:bg-fill-action-secondary-hover hover:border-border-heavy",
+    "active:bg-fill-action-secondary-active active:border-border-heavy",
+    "cursor-pointer"
+  ].join(" ");
+}
+function Tab({
+  tabs,
+  size = "small",
+  defaultActiveIndex = 0,
+  activeIndex,
+  onTabChange,
+  className = "",
+  style,
+  ref,
+  ...rest
+}) {
+  const baseId = useId();
+  const isControlled = activeIndex !== void 0;
+  const [internalActive, setInternalActive] = useState(defaultActiveIndex);
+  const currentIndex = isControlled ? activeIndex : internalActive;
+  useEffect(() => {
+    if (!isControlled && defaultActiveIndex !== void 0) {
+      setInternalActive(defaultActiveIndex);
+    }
+  }, [defaultActiveIndex, isControlled]);
+  const tabRefs = useRef([]);
+  const select = useCallback(
+    (index) => {
+      var _a;
+      if ((_a = tabs[index]) == null ? void 0 : _a.disabled) return;
+      if (isControlled) {
+        onTabChange == null ? void 0 : onTabChange(index);
+      } else {
+        setInternalActive(index);
+      }
+    },
+    [isControlled, onTabChange, tabs]
+  );
+  const focusTab = (index) => {
+    var _a;
+    (_a = tabRefs.current[index]) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (e, index) => {
+    const enabledIndices = tabs.map((tab, i) => tab.disabled ? -1 : i).filter((i) => i !== -1);
+    const currentPos = enabledIndices.indexOf(index);
+    switch (e.key) {
+      case "ArrowRight": {
+        e.preventDefault();
+        const next = enabledIndices[(currentPos + 1) % enabledIndices.length];
+        focusTab(next);
+        select(next);
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        const prev = enabledIndices[(currentPos - 1 + enabledIndices.length) % enabledIndices.length];
+        focusTab(prev);
+        select(prev);
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        const first = enabledIndices[0];
+        focusTab(first);
+        select(first);
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        const last = enabledIndices[enabledIndices.length - 1];
+        focusTab(last);
+        select(last);
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref, className: `w-full ${className}`, style, ...rest, children: [
+    /* @__PURE__ */ jsx("div", { role: "tablist", "aria-orientation": "horizontal", className: "flex gap-space-2 flex-wrap", children: tabs.map((tab, index) => {
+      const isActive = currentIndex === index;
+      const tabId = `${baseId}-tab-${index}`;
+      const panelId = `${baseId}-panel-${index}`;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: (el) => {
+            tabRefs.current[index] = el;
+          },
+          id: tabId,
+          role: "tab",
+          type: "button",
+          "aria-selected": isActive,
+          "aria-controls": panelId,
+          "aria-disabled": tab.disabled || void 0,
+          tabIndex: isActive ? 0 : -1,
+          disabled: tab.disabled,
+          className: tabButtonClasses(size, isActive, !!tab.disabled),
+          onClick: () => select(index),
+          onKeyDown: (e) => handleKeyDown(e, index),
+          children: tab.label
+        },
+        index
+      );
+    }) }),
+    tabs.map((tab, index) => {
+      const isActive = currentIndex === index;
+      const tabId = `${baseId}-tab-${index}`;
+      const panelId = `${baseId}-panel-${index}`;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: panelId,
+          role: "tabpanel",
+          "aria-labelledby": tabId,
+          tabIndex: 0,
+          hidden: !isActive,
+          className: "pt-space-4 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+          children: isActive && tab.content
+        },
+        index
+      );
+    })
+  ] });
+}
+export {
+  Tab
+};
+//# sourceMappingURL=Tab.js.map

package/dist/components/Tab/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sources":["../../../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useRef, useCallback, useId, useEffect } from 'react';\nimport type { TabItem } from '../../types';\n\n/**\n * Tab button size. Affects padding and typography (btn-small vs btn-reg).\n */\nexport type TabSize = 'small' | 'large';\n\n/**\n * Props for the Tab component. Each tab uses TabItem: label, content, disabled?.\n * Control which tab is active with activeIndex/onTabChange (controlled) or defaultActiveIndex (uncontrolled).\n * @see TabItem\n */\nexport interface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Array of tab items. Each: label (string), content (ReactNode), disabled? (boolean). */\n  tabs: TabItem[];\n  /** Tab button size. @default 'small' */\n  size?: TabSize;\n  /** Index of the tab active by default (uncontrolled). @default 0 */\n  defaultActiveIndex?: number;\n  /** Currently active index (controlled). Use with onTabChange. @default undefined */\n  activeIndex?: number;\n  /** Called when the user selects a different tab. @default undefined */\n  onTabChange?: (index: number) => void;\n  /** Forwarded ref for the root div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction tabButtonClasses(\n  size: TabSize,\n  active: boolean,\n  disabled: boolean,\n) {\n  const base = [\n    'inline-flex items-center justify-center rounded-rad-sm transition-all duration-150 outline-none whitespace-nowrap select-none',\n    'focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1',\n  ];\n\n  const sizeClasses =\n    size === 'small'\n      ? 'px-space-4 py-space-2 text-btn-small'\n      : 'px-space-5 py-space-3 text-btn-reg';\n\n  if (disabled) {\n    return [...base, sizeClasses, 'bg-fill-bg-primary text-text-disabled border border-transparent cursor-not-allowed'].join(' ');\n  }\n\n  if (active) {\n    return [...base, sizeClasses, 'bg-fill-action-primary text-text-action-primary border border-transparent cursor-default'].join(' ');\n  }\n\n  return [\n    ...base,\n    sizeClasses,\n    'bg-fill-bg-primary text-text-primary border border-border-light',\n    'hover:bg-fill-action-secondary-hover hover:border-border-heavy',\n    'active:bg-fill-action-secondary-active active:border-border-heavy',\n    'cursor-pointer',\n  ].join(' ');\n}\n\n/**\n * Tabbed interface: a row of tab buttons and a single visible panel. Each tab has label\n * and content; only one panel is shown at a time. Supports controlled (activeIndex/onTabChange)\n * or uncontrolled (defaultActiveIndex) usage. Keyboard: Arrow Left/Right, Home, End.\n *\n * @example\n * <Tab tabs={[{ label: 'Overview', content: <p>Overview</p> }, { label: 'Details', content: <p>Details</p> }]} />\n *\n * @example\n * <Tab tabs={tabItems} activeIndex={active} onTabChange={setActive} size=\"large\" />\n */\nexport function Tab({\n  tabs,\n  size = 'small',\n  defaultActiveIndex = 0,\n  activeIndex,\n  onTabChange,\n  className = '',\n  style,\n  ref,\n  ...rest\n}: TabProps) {\n    const baseId = useId();\n    const isControlled = activeIndex !== undefined;\n\n    const [internalActive, setInternalActive] = useState<number>(defaultActiveIndex);\n    const currentIndex = isControlled ? activeIndex : internalActive;\n\n    useEffect(() => {\n      if (!isControlled && defaultActiveIndex !== undefined) {\n        setInternalActive(defaultActiveIndex);\n      }\n    }, [defaultActiveIndex, isControlled]);\n\n    const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    const select = useCallback(\n      (index: number) => {\n        if (tabs[index]?.disabled) return;\n        if (isControlled) {\n          onTabChange?.(index);\n        } else {\n          setInternalActive(index);\n        }\n      },\n      [isControlled, onTabChange, tabs],\n    );\n\n    const focusTab = (index: number) => {\n      tabRefs.current[index]?.focus();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const enabledIndices = tabs\n        .map((tab, i) => (tab.disabled ? -1 : i))\n        .filter((i) => i !== -1);\n      const currentPos = enabledIndices.indexOf(index);\n\n      switch (e.key) {\n        case 'ArrowRight': {\n          e.preventDefault();\n          const next = enabledIndices[(currentPos + 1) % enabledIndices.length];\n          focusTab(next);\n          select(next);\n          break;\n        }\n        case 'ArrowLeft': {\n          e.preventDefault();\n          const prev = enabledIndices[(currentPos - 1 + enabledIndices.length) % enabledIndices.length];\n          focusTab(prev);\n          select(prev);\n          break;\n        }\n        case 'Home': {\n          e.preventDefault();\n          const first = enabledIndices[0];\n          focusTab(first);\n          select(first);\n          break;\n        }\n        case 'End': {\n          e.preventDefault();\n          const last = enabledIndices[enabledIndices.length - 1];\n          focusTab(last);\n          select(last);\n          break;\n        }\n      }\n    };\n\n    return (\n      <div ref={ref} className={`w-full ${className}`} style={style} {...rest}>\n        <div role=\"tablist\" aria-orientation=\"horizontal\" className=\"flex gap-space-2 flex-wrap\">\n          {tabs.map((tab, index) => {\n            const isActive = currentIndex === index;\n            const tabId = `${baseId}-tab-${index}`;\n            const panelId = `${baseId}-panel-${index}`;\n\n            return (\n              <button\n                key={index}\n                ref={(el) => { tabRefs.current[index] = el; }}\n                id={tabId}\n                role=\"tab\"\n                type=\"button\"\n                aria-selected={isActive}\n                aria-controls={panelId}\n                aria-disabled={tab.disabled || undefined}\n                tabIndex={isActive ? 0 : -1}\n                disabled={tab.disabled}\n                className={tabButtonClasses(size, isActive, !!tab.disabled)}\n                onClick={() => select(index)}\n                onKeyDown={(e) => handleKeyDown(e, index)}\n              >\n                {tab.label}\n              </button>\n            );\n          })}\n        </div>\n\n        {tabs.map((tab, index) => {\n          const isActive = currentIndex === index;\n          const tabId = `${baseId}-tab-${index}`;\n          const panelId = `${baseId}-panel-${index}`;\n\n          return (\n            <div\n              key={index}\n              id={panelId}\n              role=\"tabpanel\"\n              aria-labelledby={tabId}\n              tabIndex={0}\n              hidden={!isActive}\n              className=\"pt-space-4 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus\"\n            >\n              {isActive && tab.content}\n            </div>\n          );\n        })}\n      </div>\n    );\n}\n"],"names":[],"mappings":";;;AA8BA;AAKE;AAAa;AACX;AACA;AAGF;AAKA;AACE;AAA4H;AAG9H;AACE;AAAkI;AAGpI;AAAO;AACF;AACH;AACA;AACA;AACA;AACA;AAEJ;AAaO;AAAa;AAClB;AACO;AACc;AACrB;AACA;AACY;AACZ;AACA;AAEF;AACI;AACA;AAEA;AACA;AAEA;AACE;AACE;AAAoC;AACtC;AAGF;AAEA;AAAe;;AAEX;AACA;AACE;AAAc;AAEd;AAAuB;AACzB;AACF;AACgC;AAGlC;;AACE;AAAwB;AAG1B;AACE;AAGA;AAEA;AAAU;AAEN;AACA;AACA;AACA;AACA;AAAA;AACF;AAEE;AACA;AACA;AACA;AACA;AAAA;AACF;AAEE;AACA;AACA;AACA;AACA;AAAA;AACF;AAEE;AACA;AACA;AACA;AACA;AAAA;AACF;AAAA;AAIJ;AAEI;AAEI;AACA;AACA;AAEA;AACE;AAAC;AAAA;AAEgB;AAAyB;AAAI;AACxC;AACC;AACA;AACU;AACA;AACgB;AACN;AACX;AAC4C;AAC/B;AACa;AAEnC;AAAA;AAdA;AAAA;AAkBb;AAGE;AACA;AACA;AAEA;AACE;AAAC;AAAA;AAEK;AACC;AACY;AACP;AACD;AACC;AAEO;AAAA;AARZ;AAAA;AAWV;AAGT;;;;"}

package/dist/components/TextArea/TextArea.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+/**
+ * Props for the TextArea component. Extends native textarea attributes (rows, maxLength,
+ * placeholder, etc.). Resize is vertical only (resize-y) by default.
+ */
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Label text displayed above the textarea. @default undefined */
+    label?: string;
+    /** Secondary label shown lighter beside the main label. @default undefined */
+    secondaryLabel?: string;
+    /** Supportive text rendered below the label. @default undefined */
+    supportText?: string;
+    /** Places the textarea in an error state. @default false */
+    error?: boolean;
+    /** Error message shown in the alert below the textarea when error is true. @default undefined */
+    errorMessage?: string;
+    /** Forwarded ref for the textarea element. @default undefined */
+    ref?: React.Ref<HTMLTextAreaElement>;
+}
+/**
+ * Multi-line text input with label, support text, and error alert. Renders a textarea
+ * with min-height 96px and vertical resize only (resize-y). Supports rows, maxLength,
+ * and other native textarea attributes. For single-line input use TextInput.
+ *
+ * @example
+ * <TextArea label="Bio" placeholder="Tell us about yourself..." />
+ *
+ * @example
+ * <TextArea label="Notes" rows={4} error errorMessage="Notes are required" />
+ */
+export declare function TextArea({ label, secondaryLabel, supportText, error, errorMessage, required, disabled, className, id: idProp, ref, ...rest }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TextArea.d.ts.map

package/dist/components/TextArea/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC;;;GAGG;AACH,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACzD,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iGAAiG;IACjG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iEAAiE;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;CACtC;AA2BD;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,cAAc,EACd,WAAW,EACX,KAAa,EACb,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,MAAM,EACV,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,2CAuGf"}

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,118 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+function ErrorIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+function TextArea({
+  label,
+  secondaryLabel,
+  supportText,
+  error = false,
+  errorMessage,
+  required,
+  disabled,
+  className,
+  id: idProp,
+  ref,
+  ...rest
+}) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const textareaClasses = [
+    // Layout – 96px min-height is the only difference from TextInput
+    "w-full min-h-[96px] pl-space-4 pr-space-3 py-space-3 resize-y",
+    "rounded-rad-md text-form-text text-text-primary outline-none",
+    "transition-all duration-150",
+    "placeholder:text-text-disabled",
+    // Default border & background
+    !disabled && !error && "border-border-sm border-border-form-primary bg-fill-form-primary",
+    !disabled && error && "border-border-sm border-border-err bg-fill-bg-primary",
+    // Hover
+    !disabled && "hover:border-border-md hover:border-border-form-primary-hover",
+    // Focus (click → "Selected" state)
+    !disabled && "focus:border-border-md focus:border-border-form-primary-active",
+    // Focus-visible (keyboard → "Focus" state + ring)
+    !disabled && [
+      "focus-visible:border-border-sm focus-visible:border-border-form-primary-focus",
+      "focus-visible:ring-[1.5px] focus-visible:ring-border-focus focus-visible:ring-offset-[3px]"
+    ].join(" "),
+    // Disabled
+    disabled && "border-border-sm border-border-form-primary-disabled bg-fill-bg-secondary text-text-disabled cursor-not-allowed",
+    className
+  ].filter(Boolean).join(" ");
+  const showErrorAlert = error && errorMessage;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-2 w-full", children: [
+    (label || supportText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-1", children: [
+      label && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: id,
+          className: `text-form-label ${disabled ? "text-text-disabled" : "text-text-primary"}`,
+          children: [
+            label,
+            secondaryLabel && /* @__PURE__ */ jsx("span", { className: "text-text-secondary font-normal ml-1", children: secondaryLabel }),
+            required && /* @__PURE__ */ jsx("span", { className: "text-text-err ml-0.5", children: "*" })
+          ]
+        }
+      ),
+      supportText && /* @__PURE__ */ jsx("p", { className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-secondary"}`, children: supportText })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        id,
+        disabled,
+        required,
+        "aria-invalid": error || void 0,
+        "aria-describedby": showErrorAlert ? `${id}-error` : void 0,
+        className: textareaClasses,
+        ...rest
+      }
+    ),
+    showErrorAlert && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: `${id}-error`,
+        role: "alert",
+        className: `flex items-start gap-space-4 p-space-4 rounded-rad-md ${disabled ? "bg-fill-bg-secondary" : "bg-fill-bg-err"}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            ErrorIcon,
+            {
+              className: `w-5 h-5 shrink-0 ${disabled ? "text-icon-primary-disabled" : "text-icon-err"}`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-err"}`,
+              children: errorMessage
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  TextArea
+};
+//# sourceMappingURL=TextArea.js.map

package/dist/components/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport React, { useId } from 'react';\n\n/**\n * Props for the TextArea component. Extends native textarea attributes (rows, maxLength,\n * placeholder, etc.). Resize is vertical only (resize-y) by default.\n */\nexport interface TextAreaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Label text displayed above the textarea. @default undefined */\n  label?: string;\n  /** Secondary label shown lighter beside the main label. @default undefined */\n  secondaryLabel?: string;\n  /** Supportive text rendered below the label. @default undefined */\n  supportText?: string;\n  /** Places the textarea in an error state. @default false */\n  error?: boolean;\n  /** Error message shown in the alert below the textarea when error is true. @default undefined */\n  errorMessage?: string;\n  /** Forwarded ref for the textarea element. @default undefined */\n  ref?: React.Ref<HTMLTextAreaElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction ErrorIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Multi-line text input with label, support text, and error alert. Renders a textarea\n * with min-height 96px and vertical resize only (resize-y). Supports rows, maxLength,\n * and other native textarea attributes. For single-line input use TextInput.\n *\n * @example\n * <TextArea label=\"Bio\" placeholder=\"Tell us about yourself...\" />\n *\n * @example\n * <TextArea label=\"Notes\" rows={4} error errorMessage=\"Notes are required\" />\n */\nexport function TextArea({\n  label,\n  secondaryLabel,\n  supportText,\n  error = false,\n  errorMessage,\n  required,\n  disabled,\n  className,\n  id: idProp,\n  ref,\n  ...rest\n}: TextAreaProps) {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n\n  const textareaClasses = [\n    // Layout – 96px min-height is the only difference from TextInput\n    'w-full min-h-[96px] pl-space-4 pr-space-3 py-space-3 resize-y',\n    'rounded-rad-md text-form-text text-text-primary outline-none',\n    'transition-all duration-150',\n    'placeholder:text-text-disabled',\n\n    // Default border & background\n    !disabled && !error && 'border-border-sm border-border-form-primary bg-fill-form-primary',\n    !disabled && error && 'border-border-sm border-border-err bg-fill-bg-primary',\n\n    // Hover\n    !disabled && 'hover:border-border-md hover:border-border-form-primary-hover',\n\n    // Focus (click → \"Selected\" state)\n    !disabled && 'focus:border-border-md focus:border-border-form-primary-active',\n\n    // Focus-visible (keyboard → \"Focus\" state + ring)\n    !disabled && [\n      'focus-visible:border-border-sm focus-visible:border-border-form-primary-focus',\n      'focus-visible:ring-[1.5px] focus-visible:ring-border-focus focus-visible:ring-offset-[3px]',\n    ].join(' '),\n\n    // Disabled\n    disabled && 'border-border-sm border-border-form-primary-disabled bg-fill-bg-secondary text-text-disabled cursor-not-allowed',\n\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showErrorAlert = error && errorMessage;\n\n  return (\n    <div className=\"flex flex-col gap-space-2 w-full\">\n      {/* Label + support text */}\n      {(label || supportText) && (\n        <div className=\"flex flex-col gap-space-1\">\n          {label && (\n            <label\n              htmlFor={id}\n              className={`text-form-label ${disabled ? 'text-text-disabled' : 'text-text-primary'}`}\n            >\n              {label}\n              {secondaryLabel && (\n                <span className=\"text-text-secondary font-normal ml-1\">\n                  {secondaryLabel}\n                </span>\n              )}\n              {required && (\n                <span className=\"text-text-err ml-0.5\">*</span>\n              )}\n            </label>\n          )}\n          {supportText && (\n            <p className={`text-text-xs ${disabled ? 'text-text-disabled' : 'text-text-secondary'}`}>\n              {supportText}\n            </p>\n          )}\n        </div>\n      )}\n\n      {/* Textarea */}\n      <textarea\n        ref={ref}\n        id={id}\n        disabled={disabled}\n        required={required}\n        aria-invalid={error || undefined}\n        aria-describedby={showErrorAlert ? `${id}-error` : undefined}\n        className={textareaClasses}\n        {...rest}\n      />\n\n      {/* Error alert */}\n      {showErrorAlert && (\n        <div\n          id={`${id}-error`}\n          role=\"alert\"\n          className={`flex items-start gap-space-4 p-space-4 rounded-rad-md ${\n            disabled ? 'bg-fill-bg-secondary' : 'bg-fill-bg-err'\n          }`}\n        >\n          <ErrorIcon\n            className={`w-5 h-5 shrink-0 ${\n              disabled ? 'text-icon-primary-disabled' : 'text-icon-err'\n            }`}\n          />\n          <span\n            className={`text-text-xs ${\n              disabled ? 'text-text-disabled' : 'text-text-err'\n            }`}\n          >\n            {errorMessage}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AA4BA;AACE;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACO;AAEZ;AAAC;AAAA;AACU;AACP;AACO;AAAA;AAAA;AACX;AAGN;AAiBO;AAAkB;AACvB;AACA;AACA;AACQ;AACR;AACA;AACA;AACA;AACI;AACJ;AAEF;AACE;AACA;AAEA;AAAwB;AAAA;AAEtB;AACA;AACA;AACA;AAAA;AAGuB;AACD;AAAA;AAGT;AAAA;AAGA;AAAA;AAGA;AACX;AACA;AACQ;AAAA;AAGE;AAEZ;AAKF;AAEA;AAGM;AAEG;AACC;AAAC;AAAA;AACU;AAC0E;AAElF;AAAA;AAIC;AAGwC;AAAA;AAAA;AAAA;AAO5C;AAEJ;AAIF;AAAC;AAAA;AACC;AACA;AACA;AACA;AACuB;AAC4B;AACxC;AACP;AAAA;AAAA;AAKJ;AAAC;AAAA;AACU;AACJ;AAGL;AAEA;AAAA;AAAC;AAAA;AAGC;AAAA;AAAA;AAEF;AAAC;AAAA;AAGC;AAEC;AAAA;AAAA;AACH;AAAA;AAAA;AAKV;;;;"}

package/dist/components/TextInput/TextInput.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+/**
+ * Props for the TextInput component. Extends native input attributes (type, placeholder,
+ * maxLength, etc.). Use type="text" | "email" | "password" | "number" | "tel" | "url" as needed.
+ * trailingIcon is a slot at the right edge (e.g. search icon, clear button).
+ */
+export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Label text displayed above the input. @default undefined */
+    label?: string;
+    /** Secondary label shown lighter beside the main label. @default undefined */
+    secondaryLabel?: string;
+    /** Supportive text rendered below the label. @default undefined */
+    supportText?: string;
+    /** Places the input in an error state. @default false */
+    error?: boolean;
+    /** Error message shown in the alert below the input when error is true. @default undefined */
+    errorMessage?: string;
+    /** Optional node (e.g. Icon) rendered at the trailing edge of the input. @default undefined */
+    trailingIcon?: React.ReactNode;
+    /** Forwarded ref for the input element. @default undefined */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/**
+ * Single-line text input with label, support text, optional trailing icon, and error alert.
+ * Supports standard input types (text, email, password, number, tel, url, etc.). For
+ * multi-line input use TextArea.
+ *
+ * @example
+ * <TextInput label="Email" type="email" placeholder="you@example.com" />
+ *
+ * @example
+ * <TextInput label="Name" error errorMessage="Name is required" trailingIcon={<Icon name="search" />} />
+ */
+export declare function TextInput({ label, secondaryLabel, supportText, error, errorMessage, required, disabled, trailingIcon, className, id: idProp, ref, ...rest }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/components/TextInput/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjE,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8FAA8F;IAC9F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+FAA+F;IAC/F,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,8DAA8D;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AA2BD;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,cAAc,EACd,WAAW,EACX,KAAa,EACb,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,EAAE,EAAE,MAAM,EACV,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,2CAkHhB"}

package/dist/components/TextInput/TextInput.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+function ErrorIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+function TextInput({
+  label,
+  secondaryLabel,
+  supportText,
+  error = false,
+  errorMessage,
+  required,
+  disabled,
+  trailingIcon,
+  className,
+  id: idProp,
+  ref,
+  ...rest
+}) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const inputClasses = [
+    // Layout
+    "w-full min-h-[48px] pl-space-4 pr-space-3 py-space-3",
+    "rounded-rad-md text-form-text text-text-primary outline-none",
+    "transition-all duration-150",
+    "placeholder:text-text-disabled",
+    // Default border & background
+    !disabled && !error && "border-border-sm border-border-form-primary bg-fill-bg-primary",
+    !disabled && error && "border-border-sm border-border-err bg-fill-bg-primary",
+    // Hover
+    !disabled && "hover:border-border-md hover:border-border-form-primary-hover",
+    // Focus (click → "Selected" state)
+    !disabled && "focus:border-border-md focus:border-border-form-primary-active",
+    // Focus-visible (keyboard → "Focus" state + ring)
+    !disabled && [
+      "focus-visible:border-border-sm focus-visible:border-border-form-primary-focus",
+      "focus-visible:ring-[1.5px] focus-visible:ring-border-focus focus-visible:ring-offset-[3px]"
+    ].join(" "),
+    // Disabled
+    disabled && "border-border-sm border-border-form-primary-disabled bg-fill-bg-secondary text-text-disabled cursor-not-allowed",
+    className
+  ].filter(Boolean).join(" ");
+  const showErrorAlert = error && errorMessage;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-2 w-full", children: [
+    (label || supportText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-1", children: [
+      label && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: id,
+          className: `text-form-label ${disabled ? "text-text-disabled" : "text-text-primary"}`,
+          children: [
+            label,
+            secondaryLabel && /* @__PURE__ */ jsx("span", { className: "text-text-secondary font-normal ml-1", children: secondaryLabel }),
+            required && /* @__PURE__ */ jsx("span", { className: "text-text-err ml-0.5", children: "*" })
+          ]
+        }
+      ),
+      supportText && /* @__PURE__ */ jsx("p", { className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-secondary"}`, children: supportText })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id,
+          disabled,
+          required,
+          "aria-invalid": error || void 0,
+          "aria-describedby": showErrorAlert ? `${id}-error` : void 0,
+          className: inputClasses,
+          ...rest
+        }
+      ),
+      trailingIcon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `absolute right-3 top-1/2 -translate-y-1/2 flex items-center ${disabled ? "text-icon-primary-disabled" : "text-icon-primary"}`,
+          children: trailingIcon
+        }
+      )
+    ] }),
+    showErrorAlert && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: `${id}-error`,
+        role: "alert",
+        className: `flex items-start gap-space-4 p-space-4 rounded-rad-md ${disabled ? "bg-fill-bg-secondary" : "bg-fill-bg-err"}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            ErrorIcon,
+            {
+              className: `w-5 h-5 shrink-0 ${disabled ? "text-icon-primary-disabled" : "text-icon-err"}`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-err"}`,
+              children: errorMessage
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  TextInput
+};
+//# sourceMappingURL=TextInput.js.map

package/dist/components/TextInput/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["'use client';\n\nimport React, { useId } from 'react';\n\n/**\n * Props for the TextInput component. Extends native input attributes (type, placeholder,\n * maxLength, etc.). Use type=\"text\" | \"email\" | \"password\" | \"number\" | \"tel\" | \"url\" as needed.\n * trailingIcon is a slot at the right edge (e.g. search icon, clear button).\n */\nexport interface TextInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /** Label text displayed above the input. @default undefined */\n  label?: string;\n  /** Secondary label shown lighter beside the main label. @default undefined */\n  secondaryLabel?: string;\n  /** Supportive text rendered below the label. @default undefined */\n  supportText?: string;\n  /** Places the input in an error state. @default false */\n  error?: boolean;\n  /** Error message shown in the alert below the input when error is true. @default undefined */\n  errorMessage?: string;\n  /** Optional node (e.g. Icon) rendered at the trailing edge of the input. @default undefined */\n  trailingIcon?: React.ReactNode;\n  /** Forwarded ref for the input element. @default undefined */\n  ref?: React.Ref<HTMLInputElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction ErrorIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Single-line text input with label, support text, optional trailing icon, and error alert.\n * Supports standard input types (text, email, password, number, tel, url, etc.). For\n * multi-line input use TextArea.\n *\n * @example\n * <TextInput label=\"Email\" type=\"email\" placeholder=\"you@example.com\" />\n *\n * @example\n * <TextInput label=\"Name\" error errorMessage=\"Name is required\" trailingIcon={<Icon name=\"search\" />} />\n */\nexport function TextInput({\n  label,\n  secondaryLabel,\n  supportText,\n  error = false,\n  errorMessage,\n  required,\n  disabled,\n  trailingIcon,\n  className,\n  id: idProp,\n  ref,\n  ...rest\n}: TextInputProps) {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n\n  const inputClasses = [\n    // Layout\n    'w-full min-h-[48px] pl-space-4 pr-space-3 py-space-3',\n    'rounded-rad-md text-form-text text-text-primary outline-none',\n    'transition-all duration-150',\n    'placeholder:text-text-disabled',\n\n    // Default border & background\n    !disabled && !error && 'border-border-sm border-border-form-primary bg-fill-bg-primary',\n    !disabled && error && 'border-border-sm border-border-err bg-fill-bg-primary',\n\n    // Hover\n    !disabled && 'hover:border-border-md hover:border-border-form-primary-hover',\n\n    // Focus (click → \"Selected\" state)\n    !disabled && 'focus:border-border-md focus:border-border-form-primary-active',\n\n    // Focus-visible (keyboard → \"Focus\" state + ring)\n    !disabled && [\n      'focus-visible:border-border-sm focus-visible:border-border-form-primary-focus',\n      'focus-visible:ring-[1.5px] focus-visible:ring-border-focus focus-visible:ring-offset-[3px]',\n    ].join(' '),\n\n    // Disabled\n    disabled && 'border-border-sm border-border-form-primary-disabled bg-fill-bg-secondary text-text-disabled cursor-not-allowed',\n\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showErrorAlert = error && errorMessage;\n\n  return (\n    <div className=\"flex flex-col gap-space-2 w-full\">\n      {/* Label + support text */}\n      {(label || supportText) && (\n        <div className=\"flex flex-col gap-space-1\">\n          {label && (\n            <label\n              htmlFor={id}\n              className={`text-form-label ${disabled ? 'text-text-disabled' : 'text-text-primary'}`}\n            >\n              {label}\n              {secondaryLabel && (\n                <span className=\"text-text-secondary font-normal ml-1\">\n                  {secondaryLabel}\n                </span>\n              )}\n              {required && (\n                <span className=\"text-text-err ml-0.5\">*</span>\n              )}\n            </label>\n          )}\n          {supportText && (\n            <p className={`text-text-xs ${disabled ? 'text-text-disabled' : 'text-text-secondary'}`}>\n              {supportText}\n            </p>\n          )}\n        </div>\n      )}\n\n      {/* Input */}\n      <div className=\"relative w-full\">\n        <input\n          ref={ref}\n          id={id}\n          disabled={disabled}\n          required={required}\n          aria-invalid={error || undefined}\n          aria-describedby={showErrorAlert ? `${id}-error` : undefined}\n          className={inputClasses}\n          {...rest}\n        />\n        {trailingIcon && (\n          <span\n            className={`absolute right-3 top-1/2 -translate-y-1/2 flex items-center ${\n              disabled ? 'text-icon-primary-disabled' : 'text-icon-primary'\n            }`}\n          >\n            {trailingIcon}\n          </span>\n        )}\n      </div>\n\n      {/* Error alert */}\n      {showErrorAlert && (\n        <div\n          id={`${id}-error`}\n          role=\"alert\"\n          className={`flex items-start gap-space-4 p-space-4 rounded-rad-md ${\n            disabled ? 'bg-fill-bg-secondary' : 'bg-fill-bg-err'\n          }`}\n        >\n          <ErrorIcon\n            className={`w-5 h-5 shrink-0 ${\n              disabled ? 'text-icon-primary-disabled' : 'text-icon-err'\n            }`}\n          />\n          <span\n            className={`text-text-xs ${\n              disabled ? 'text-text-disabled' : 'text-text-err'\n            }`}\n          >\n            {errorMessage}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AA+BA;AACE;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACO;AAEZ;AAAC;AAAA;AACU;AACP;AACO;AAAA;AAAA;AACX;AAGN;AAiBO;AAAmB;AACxB;AACA;AACA;AACQ;AACR;AACA;AACA;AACA;AACA;AACI;AACJ;AAEF;AACE;AACA;AAEA;AAAqB;AAAA;AAEnB;AACA;AACA;AACA;AAAA;AAGuB;AACD;AAAA;AAGT;AAAA;AAGA;AAAA;AAGA;AACX;AACA;AACQ;AAAA;AAGE;AAEZ;AAKF;AAEA;AAGM;AAEG;AACC;AAAC;AAAA;AACU;AAC0E;AAElF;AAAA;AAIC;AAGwC;AAAA;AAAA;AAAA;AAO5C;AAEJ;AAKA;AAAA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACuB;AAC4B;AACxC;AACP;AAAA;AAAA;AAGJ;AAAC;AAAA;AAGC;AAEC;AAAA;AAAA;AAGP;AAIE;AAAC;AAAA;AACU;AACJ;AAGL;AAEA;AAAA;AAAC;AAAA;AAGC;AAAA;AAAA;AAEF;AAAC;AAAA;AAGC;AAEC;AAAA;AAAA;AACH;AAAA;AAAA;AAKV;;;;"}