@tonyarbor/components 0.2.0 → 0.4.0

package/dist/Tabs.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+interface TabItem {
+    /**
+     * The label text for the tab
+     */
+    label: string;
+    /**
+     * Optional icon component
+     */
+    icon?: React.ReactNode;
+    /**
+     * Value to identify this tab
+     */
+    value: string;
+}
+interface TabsProps {
+    /**
+     * Array of tab items to display
+     */
+    tabs: TabItem[];
+    /**
+     * Currently active tab value
+     */
+    activeTab?: string;
+    /**
+     * Callback when tab is clicked
+     */
+    onTabChange?: (value: string) => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * Tabs component - Arbor Design System
+ *
+ * Horizontal tabs with support for icons and various states.
+ */
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+
+export { type TabItem, Tabs, type TabsProps };

package/dist/Tabs.js

@@ -0,0 +1,187 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Tabs/index.ts
+var Tabs_exports = {};
+__export(Tabs_exports, {
+  Tabs: () => Tabs
+});
+module.exports = __toCommonJS(Tabs_exports);
+
+// src/Tabs/Tabs.tsx
+var React = __toESM(require("react"));
+var import_clsx = require("clsx");
+var import_jsx_runtime = require("react/jsx-runtime");
+var tabsContainerStyles = {
+  display: "flex",
+  alignItems: "flex-start",
+  gap: "12px",
+  borderBottom: "1px solid #f8f8f8",
+  paddingBottom: "1px",
+  width: "100%"
+};
+var tabItemWrapperStyles = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  cursor: "pointer",
+  position: "relative"
+};
+var tabItemStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "8px",
+  padding: "8px 12px",
+  borderRadius: "8px",
+  fontSize: "14px",
+  lineHeight: "1.5",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  outline: "none",
+  transition: "all 0.2s ease-in-out",
+  userSelect: "none"
+};
+var underlineStyles = {
+  width: "100%",
+  height: "2px",
+  borderTopLeftRadius: "4px",
+  borderTopRightRadius: "4px",
+  transition: "background-color 0.2s ease-in-out"
+};
+var Tabs = React.forwardRef(
+  ({
+    tabs,
+    activeTab,
+    onTabChange,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [hoveredTab, setHoveredTab] = React.useState(null);
+    const [focusedTab, setFocusedTab] = React.useState(null);
+    const currentActiveTab = activeTab || (tabs.length > 0 ? tabs[0].value : "");
+    const handleTabClick = (value) => {
+      onTabChange?.(value);
+    };
+    const handleKeyDown = (e, value) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleTabClick(value);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx.clsx)("arbor-tabs", className),
+        style: { ...tabsContainerStyles, ...style },
+        "data-testid": dataTestId,
+        role: "tablist",
+        children: tabs.map((tab) => {
+          const isActive = tab.value === currentActiveTab;
+          const isHovered = tab.value === hoveredTab;
+          const isFocused = tab.value === focusedTab;
+          const getTextColor = () => {
+            if (isActive) {
+              return "#0e8a0e";
+            }
+            if (isHovered) {
+              return "#202020";
+            }
+            return "#2f2f2f";
+          };
+          const getFontWeight = () => {
+            return isActive ? 600 : 500;
+          };
+          const getUnderlineColor = () => {
+            if (isActive) {
+              return "#0e8a0e";
+            }
+            if (isHovered) {
+              return "#d1d1d1";
+            }
+            return "transparent";
+          };
+          const getBoxShadow = () => {
+            if (isFocused) {
+              return "0px 0px 0px 3px #3cad51";
+            }
+            return void 0;
+          };
+          const tabItemStylesCombined = {
+            ...tabItemStyles,
+            color: getTextColor(),
+            fontWeight: getFontWeight(),
+            boxShadow: getBoxShadow(),
+            backgroundColor: isFocused ? "rgba(255, 255, 255, 0.01)" : "transparent"
+          };
+          const underlineStylesCombined = {
+            ...underlineStyles,
+            backgroundColor: getUnderlineColor()
+          };
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: tabItemWrapperStyles,
+              onMouseEnter: () => setHoveredTab(tab.value),
+              onMouseLeave: () => setHoveredTab(null),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    role: "tab",
+                    "aria-selected": isActive,
+                    tabIndex: isActive ? 0 : -1,
+                    onClick: () => handleTabClick(tab.value),
+                    onKeyDown: (e) => handleKeyDown(e, tab.value),
+                    onFocus: () => setFocusedTab(tab.value),
+                    onBlur: () => setFocusedTab(null),
+                    style: tabItemStylesCombined,
+                    children: [
+                      tab.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: tab.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: tab.label })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: underlineStylesCombined })
+              ]
+            },
+            tab.value
+          );
+        })
+      }
+    );
+  }
+);
+Tabs.displayName = "Tabs";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tabs
+});
+//# sourceMappingURL=Tabs.js.map

package/dist/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Tabs/index.ts","../src/Tabs/Tabs.tsx"],"sourcesContent":["export { Tabs } from './Tabs';\nexport type { TabsProps, TabItem } from './Tabs';\n","import * as React from 'react';\nimport { clsx } from 'clsx';\n\nexport interface TabItem {\n  /**\n   * The label text for the tab\n   */\n  label: string;\n  /**\n   * Optional icon component\n   */\n  icon?: React.ReactNode;\n  /**\n   * Value to identify this tab\n   */\n  value: string;\n}\n\nexport interface TabsProps {\n  /**\n   * Array of tab items to display\n   */\n  tabs: TabItem[];\n  /**\n   * Currently active tab value\n   */\n  activeTab?: string;\n  /**\n   * Callback when tab is clicked\n   */\n  onTabChange?: (value: string) => void;\n  /**\n   * Custom className\n   */\n  className?: string;\n  /**\n   * Custom style\n   */\n  style?: React.CSSProperties;\n  /**\n   * Test ID for testing\n   */\n  'data-testid'?: string;\n}\n\nconst tabsContainerStyles: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'flex-start',\n  gap: '12px',\n  borderBottom: '1px solid #f8f8f8',\n  paddingBottom: '1px',\n  width: '100%',\n};\n\nconst tabItemWrapperStyles: React.CSSProperties = {\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  cursor: 'pointer',\n  position: 'relative',\n};\n\nconst tabItemStyles: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: '8px',\n  padding: '8px 12px',\n  borderRadius: '8px',\n  fontSize: '14px',\n  lineHeight: '1.5',\n  fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n  outline: 'none',\n  transition: 'all 0.2s ease-in-out',\n  userSelect: 'none' as const,\n};\n\nconst underlineStyles: React.CSSProperties = {\n  width: '100%',\n  height: '2px',\n  borderTopLeftRadius: '4px',\n  borderTopRightRadius: '4px',\n  transition: 'background-color 0.2s ease-in-out',\n};\n\n/**\n * Tabs component - Arbor Design System\n *\n * Horizontal tabs with support for icons and various states.\n */\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n  (\n    {\n      tabs,\n      activeTab,\n      onTabChange,\n      className,\n      style,\n      'data-testid': dataTestId,\n    },\n    ref\n  ) => {\n    const [hoveredTab, setHoveredTab] = React.useState<string | null>(null);\n    const [focusedTab, setFocusedTab] = React.useState<string | null>(null);\n\n    // Determine the active tab (first tab by default)\n    const currentActiveTab = activeTab || (tabs.length > 0 ? tabs[0].value : '');\n\n    const handleTabClick = (value: string) => {\n      onTabChange?.(value);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, value: string) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        handleTabClick(value);\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-tabs', className)}\n        style={{ ...tabsContainerStyles, ...style }}\n        data-testid={dataTestId}\n        role=\"tablist\"\n      >\n        {tabs.map((tab) => {\n          const isActive = tab.value === currentActiveTab;\n          const isHovered = tab.value === hoveredTab;\n          const isFocused = tab.value === focusedTab;\n\n          // Determine text color\n          const getTextColor = (): string => {\n            if (isActive) {\n              return '#0e8a0e'; // Active green\n            }\n            if (isHovered) {\n              return '#202020'; // Hover darker grey\n            }\n            return '#2f2f2f'; // Default grey\n          };\n\n          // Determine font weight\n          const getFontWeight = (): number => {\n            return isActive ? 600 : 500; // Semibold for active, medium for inactive\n          };\n\n          // Determine underline color\n          const getUnderlineColor = (): string => {\n            if (isActive) {\n              return '#0e8a0e'; // Active green\n            }\n            if (isHovered) {\n              return '#d1d1d1'; // Hover grey\n            }\n            return 'transparent'; // Default transparent\n          };\n\n          // Get box shadow for focus ring\n          const getBoxShadow = (): string | undefined => {\n            if (isFocused) {\n              return '0px 0px 0px 3px #3cad51';\n            }\n            return undefined;\n          };\n\n          const tabItemStylesCombined: React.CSSProperties = {\n            ...tabItemStyles,\n            color: getTextColor(),\n            fontWeight: getFontWeight(),\n            boxShadow: getBoxShadow(),\n            backgroundColor: isFocused ? 'rgba(255, 255, 255, 0.01)' : 'transparent',\n          };\n\n          const underlineStylesCombined: React.CSSProperties = {\n            ...underlineStyles,\n            backgroundColor: getUnderlineColor(),\n          };\n\n          return (\n            <div\n              key={tab.value}\n              style={tabItemWrapperStyles}\n              onMouseEnter={() => setHoveredTab(tab.value)}\n              onMouseLeave={() => setHoveredTab(null)}\n            >\n              <div\n                role=\"tab\"\n                aria-selected={isActive}\n                tabIndex={isActive ? 0 : -1}\n                onClick={() => handleTabClick(tab.value)}\n                onKeyDown={(e) => handleKeyDown(e, tab.value)}\n                onFocus={() => setFocusedTab(tab.value)}\n                onBlur={() => setFocusedTab(null)}\n                style={tabItemStylesCombined}\n              >\n                {tab.icon && (\n                  <span style={{ display: 'flex', alignItems: 'center' }}>\n                    {tab.icon}\n                  </span>\n                )}\n                <span>{tab.label}</span>\n              </div>\n              <div style={underlineStylesCombined} />\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nTabs.displayName = 'Tabs';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,kBAAqB;AA0LP;AA9Id,IAAM,sBAA2C;AAAA,EAC/C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,cAAc;AAAA,EACd,eAAe;AAAA,EACf,OAAO;AACT;AAEA,IAAM,uBAA4C;AAAA,EAChD,SAAS;AAAA,EACT,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,IAAM,gBAAqC;AAAA,EACzC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,KAAK;AAAA,EACL,SAAS;AAAA,EACT,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AACd;AAEA,IAAM,kBAAuC;AAAA,EAC3C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,YAAY;AACd;AAOO,IAAM,OAAa;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB,GACA,QACG;AACH,UAAM,CAAC,YAAY,aAAa,IAAU,eAAwB,IAAI;AACtE,UAAM,CAAC,YAAY,aAAa,IAAU,eAAwB,IAAI;AAGtE,UAAM,mBAAmB,cAAc,KAAK,SAAS,IAAI,KAAK,CAAC,EAAE,QAAQ;AAEzE,UAAM,iBAAiB,CAAC,UAAkB;AACxC,oBAAc,KAAK;AAAA,IACrB;AAEA,UAAM,gBAAgB,CAAC,GAAwB,UAAkB;AAC/D,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,UAAE,eAAe;AACjB,uBAAe,KAAK;AAAA,MACtB;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAK,cAAc,SAAS;AAAA,QACvC,OAAO,EAAE,GAAG,qBAAqB,GAAG,MAAM;AAAA,QAC1C,eAAa;AAAA,QACb,MAAK;AAAA,QAEJ,eAAK,IAAI,CAAC,QAAQ;AACjB,gBAAM,WAAW,IAAI,UAAU;AAC/B,gBAAM,YAAY,IAAI,UAAU;AAChC,gBAAM,YAAY,IAAI,UAAU;AAGhC,gBAAM,eAAe,MAAc;AACjC,gBAAI,UAAU;AACZ,qBAAO;AAAA,YACT;AACA,gBAAI,WAAW;AACb,qBAAO;AAAA,YACT;AACA,mBAAO;AAAA,UACT;AAGA,gBAAM,gBAAgB,MAAc;AAClC,mBAAO,WAAW,MAAM;AAAA,UAC1B;AAGA,gBAAM,oBAAoB,MAAc;AACtC,gBAAI,UAAU;AACZ,qBAAO;AAAA,YACT;AACA,gBAAI,WAAW;AACb,qBAAO;AAAA,YACT;AACA,mBAAO;AAAA,UACT;AAGA,gBAAM,eAAe,MAA0B;AAC7C,gBAAI,WAAW;AACb,qBAAO;AAAA,YACT;AACA,mBAAO;AAAA,UACT;AAEA,gBAAM,wBAA6C;AAAA,YACjD,GAAG;AAAA,YACH,OAAO,aAAa;AAAA,YACpB,YAAY,cAAc;AAAA,YAC1B,WAAW,aAAa;AAAA,YACxB,iBAAiB,YAAY,8BAA8B;AAAA,UAC7D;AAEA,gBAAM,0BAA+C;AAAA,YACnD,GAAG;AAAA,YACH,iBAAiB,kBAAkB;AAAA,UACrC;AAEA,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO;AAAA,cACP,cAAc,MAAM,cAAc,IAAI,KAAK;AAAA,cAC3C,cAAc,MAAM,cAAc,IAAI;AAAA,cAEtC;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,iBAAe;AAAA,oBACf,UAAU,WAAW,IAAI;AAAA,oBACzB,SAAS,MAAM,eAAe,IAAI,KAAK;AAAA,oBACvC,WAAW,CAAC,MAAM,cAAc,GAAG,IAAI,KAAK;AAAA,oBAC5C,SAAS,MAAM,cAAc,IAAI,KAAK;AAAA,oBACtC,QAAQ,MAAM,cAAc,IAAI;AAAA,oBAChC,OAAO;AAAA,oBAEN;AAAA,0BAAI,QACH,4CAAC,UAAK,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD,cAAI,MACP;AAAA,sBAEF,4CAAC,UAAM,cAAI,OAAM;AAAA;AAAA;AAAA,gBACnB;AAAA,gBACA,4CAAC,SAAI,OAAO,yBAAyB;AAAA;AAAA;AAAA,YAtBhC,IAAI;AAAA,UAuBX;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;","names":[]}

package/dist/Tabs.mjs

@@ -0,0 +1,7 @@
+import {
+  Tabs
+} from "./chunk-YV4OXFIM.mjs";
+export {
+  Tabs
+};
+//# sourceMappingURL=Tabs.mjs.map

package/dist/Tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/TextArea.d.mts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+interface TextAreaProps {
+    /**
+     * The label for the textarea
+     */
+    label?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Current value
+     */
+    value?: string;
+    /**
+     * Change handler
+     */
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Validation state - affects border color
+     */
+    state?: 'default' | 'success' | 'error';
+    /**
+     * Error message (implies error state)
+     */
+    error?: string;
+    /**
+     * Helper text shown below input
+     */
+    helperText?: string;
+    /**
+     * Whether the textarea is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Number of rows (affects height)
+     */
+    rows?: number;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+    /**
+     * Name attribute for form submission
+     */
+    name?: string;
+}
+/**
+ * TextArea component - Arbor Design System
+ *
+ * A multi-line text input with label, helper text, and validation states.
+ */
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+export { TextArea, type TextAreaProps };

package/dist/TextArea.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+interface TextAreaProps {
+    /**
+     * The label for the textarea
+     */
+    label?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Current value
+     */
+    value?: string;
+    /**
+     * Change handler
+     */
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Validation state - affects border color
+     */
+    state?: 'default' | 'success' | 'error';
+    /**
+     * Error message (implies error state)
+     */
+    error?: string;
+    /**
+     * Helper text shown below input
+     */
+    helperText?: string;
+    /**
+     * Whether the textarea is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Number of rows (affects height)
+     */
+    rows?: number;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+    /**
+     * Name attribute for form submission
+     */
+    name?: string;
+}
+/**
+ * TextArea component - Arbor Design System
+ *
+ * A multi-line text input with label, helper text, and validation states.
+ */
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+export { TextArea, type TextAreaProps };

package/dist/TextArea.js

@@ -0,0 +1,171 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/TextArea/index.ts
+var TextArea_exports = {};
+__export(TextArea_exports, {
+  TextArea: () => TextArea
+});
+module.exports = __toCommonJS(TextArea_exports);
+
+// src/TextArea/TextArea.tsx
+var React = __toESM(require("react"));
+var import_clsx = require("clsx");
+var import_jsx_runtime = require("react/jsx-runtime");
+var labelStyles = {
+  fontSize: "13px",
+  fontWeight: 600,
+  color: "#2f2f2f",
+  marginBottom: "0px",
+  display: "block",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var textareaWrapperStyles = {
+  position: "relative",
+  width: "100%"
+};
+var textareaStyles = {
+  width: "100%",
+  minHeight: "72px",
+  padding: "8px",
+  fontSize: "13px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  border: "1px solid",
+  borderRadius: "8px",
+  outline: "none",
+  resize: "vertical",
+  transition: "all 0.2s ease-in-out",
+  lineHeight: "1.5"
+};
+var helperTextStyles = {
+  fontSize: "13px",
+  marginTop: "4px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var TextArea = React.forwardRef(
+  ({
+    label,
+    placeholder,
+    value,
+    onChange,
+    state = "default",
+    error,
+    helperText,
+    disabled = false,
+    rows = 3,
+    className,
+    style,
+    "data-testid": dataTestId,
+    name
+  }, ref) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const textareaId = React.useId();
+    const actualState = error ? "error" : state;
+    const getBorderColor = () => {
+      if (disabled) {
+        return "#dfdfdf";
+      }
+      if (actualState === "error") {
+        return "#c93232";
+      }
+      if (actualState === "success") {
+        return "#0e8a0e";
+      }
+      if (isFocused) {
+        return "#0e8a0e";
+      }
+      if (isHovered) {
+        return "#7e7e7e";
+      }
+      return "#dfdfdf";
+    };
+    const getBackgroundColor = () => {
+      if (disabled) {
+        return "#efefef";
+      }
+      return "#ffffff";
+    };
+    const getBoxShadow = () => {
+      if (isFocused && !disabled) {
+        if (actualState === "error") {
+          return "0px 0px 0px 3px rgba(201, 50, 50, 0.2)";
+        }
+        return "0px 0px 0px 3px #3cad51";
+      }
+      return void 0;
+    };
+    const textareaStylesCombined = {
+      ...textareaStyles,
+      borderColor: getBorderColor(),
+      backgroundColor: getBackgroundColor(),
+      boxShadow: getBoxShadow(),
+      color: disabled ? "#7e7e7e" : "#2f2f2f",
+      cursor: disabled ? "not-allowed" : "text"
+    };
+    const helperColor = error ? "#c93232" : actualState === "success" ? "#0e8a0e" : "#595959";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx.clsx)("arbor-textarea-wrapper", className),
+        style,
+        "data-testid": dataTestId,
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: textareaId, style: labelStyles, children: label }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "8px" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textareaWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "textarea",
+            {
+              ref,
+              id: textareaId,
+              name,
+              placeholder,
+              value,
+              onChange,
+              disabled,
+              rows,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              onMouseEnter: () => setIsHovered(true),
+              onMouseLeave: () => setIsHovered(false),
+              style: textareaStylesCombined
+            }
+          ) }),
+          (error || helperText) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...helperTextStyles, color: helperColor }, role: error ? "alert" : void 0, children: error || helperText })
+        ]
+      }
+    );
+  }
+);
+TextArea.displayName = "TextArea";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextArea
+});
+//# sourceMappingURL=TextArea.js.map

package/dist/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TextArea/index.ts","../src/TextArea/TextArea.tsx"],"sourcesContent":["export { TextArea } from './TextArea';\nexport type { TextAreaProps } from './TextArea';\n","import * as React from 'react';\nimport { clsx } from 'clsx';\n\nexport interface TextAreaProps {\n  /**\n   * The label for the textarea\n   */\n  label?: string;\n  /**\n   * Placeholder text\n   */\n  placeholder?: string;\n  /**\n   * Current value\n   */\n  value?: string;\n  /**\n   * Change handler\n   */\n  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Validation state - affects border color\n   */\n  state?: 'default' | 'success' | 'error';\n  /**\n   * Error message (implies error state)\n   */\n  error?: string;\n  /**\n   * Helper text shown below input\n   */\n  helperText?: string;\n  /**\n   * Whether the textarea is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Number of rows (affects height)\n   */\n  rows?: number;\n  /**\n   * Custom className\n   */\n  className?: string;\n  /**\n   * Custom style\n   */\n  style?: React.CSSProperties;\n  /**\n   * Test ID for testing\n   */\n  'data-testid'?: string;\n  /**\n   * Name attribute for form submission\n   */\n  name?: string;\n}\n\nconst labelStyles: React.CSSProperties = {\n  fontSize: '13px',\n  fontWeight: 600,\n  color: '#2f2f2f',\n  marginBottom: '0px',\n  display: 'block',\n  fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n};\n\nconst textareaWrapperStyles: React.CSSProperties = {\n  position: 'relative',\n  width: '100%',\n};\n\nconst textareaStyles: React.CSSProperties = {\n  width: '100%',\n  minHeight: '72px',\n  padding: '8px',\n  fontSize: '13px',\n  fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n  border: '1px solid',\n  borderRadius: '8px',\n  outline: 'none',\n  resize: 'vertical',\n  transition: 'all 0.2s ease-in-out',\n  lineHeight: '1.5',\n};\n\nconst helperTextStyles: React.CSSProperties = {\n  fontSize: '13px',\n  marginTop: '4px',\n  fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n};\n\n/**\n * TextArea component - Arbor Design System\n *\n * A multi-line text input with label, helper text, and validation states.\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      label,\n      placeholder,\n      value,\n      onChange,\n      state = 'default',\n      error,\n      helperText,\n      disabled = false,\n      rows = 3,\n      className,\n      style,\n      'data-testid': dataTestId,\n      name,\n    },\n    ref\n  ) => {\n    const [isFocused, setIsFocused] = React.useState(false);\n    const [isHovered, setIsHovered] = React.useState(false);\n    const textareaId = React.useId();\n\n    // Determine the actual state (error overrides state prop)\n    const actualState = error ? 'error' : state;\n\n    // Get border color based on state and interactions\n    const getBorderColor = (): string => {\n      if (disabled) {\n        return '#dfdfdf';\n      }\n\n      if (actualState === 'error') {\n        return '#c93232';\n      }\n\n      if (actualState === 'success') {\n        return '#0e8a0e';\n      }\n\n      if (isFocused) {\n        return '#0e8a0e';\n      }\n\n      if (isHovered) {\n        return '#7e7e7e';\n      }\n\n      return '#dfdfdf';\n    };\n\n    // Get background color\n    const getBackgroundColor = (): string => {\n      if (disabled) {\n        return '#efefef';\n      }\n      return '#ffffff';\n    };\n\n    // Get box shadow (focus ring)\n    const getBoxShadow = (): string | undefined => {\n      if (isFocused && !disabled) {\n        if (actualState === 'error') {\n          return '0px 0px 0px 3px rgba(201, 50, 50, 0.2)';\n        }\n        return '0px 0px 0px 3px #3cad51';\n      }\n      return undefined;\n    };\n\n    const textareaStylesCombined: React.CSSProperties = {\n      ...textareaStyles,\n      borderColor: getBorderColor(),\n      backgroundColor: getBackgroundColor(),\n      boxShadow: getBoxShadow(),\n      color: disabled ? '#7e7e7e' : '#2f2f2f',\n      cursor: disabled ? 'not-allowed' : 'text',\n    };\n\n    const helperColor = error ? '#c93232' : actualState === 'success' ? '#0e8a0e' : '#595959';\n\n    return (\n      <div\n        className={clsx('arbor-textarea-wrapper', className)}\n        style={style}\n        data-testid={dataTestId}\n      >\n        {label && (\n          <label htmlFor={textareaId} style={labelStyles}>\n            {label}\n          </label>\n        )}\n        {label && <div style={{ height: '8px' }} />}\n        <div style={textareaWrapperStyles}>\n          <textarea\n            ref={ref}\n            id={textareaId}\n            name={name}\n            placeholder={placeholder}\n            value={value}\n            onChange={onChange}\n            disabled={disabled}\n            rows={rows}\n            onFocus={() => setIsFocused(true)}\n            onBlur={() => setIsFocused(false)}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n            style={textareaStylesCombined}\n          />\n        </div>\n        {(error || helperText) && (\n          <div style={{ ...helperTextStyles, color: helperColor }} role={error ? 'alert' : undefined}>\n            {error || helperText}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n"],"mappings":"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","names":[]}

package/dist/TextArea.mjs

@@ -0,0 +1,7 @@
+import {
+  TextArea
+} from "./chunk-MBUMR2XJ.mjs";
+export {
+  TextArea
+};
+//# sourceMappingURL=TextArea.mjs.map

package/dist/TextArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Toast.d.mts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+interface ToastProps {
+    /**
+     * The variant of the toast
+     */
+    variant: 'information' | 'danger' | 'warning' | 'success' | 'caution';
+    /**
+     * The message to display
+     */
+    message: string;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * Toast component - Arbor Design System
+ *
+ * A notification toast with different variants for different message types.
+ *
+ * IMPORTANT: Toasts are designed to overlay content in the top-right corner.
+ * Use absolute/fixed positioning to display them above page content.
+ *
+ * For inline notifications that flow with page content, use the Banner component instead.
+ *
+ * Example usage with positioning:
+ * ```tsx
+ * <div style={{ position: 'fixed', top: '24px', right: '24px', zIndex: 1000 }}>
+ *   <Toast variant="success" message="Changes saved!" onClose={() => {}} />
+ * </div>
+ * ```
+ */
+declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Toast, type ToastProps };