@tonyarbor/components 0.1.0 → 0.2.1

package/dist/chunk-YV4OXFIM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Tabs/Tabs.tsx"],"sourcesContent":["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,YAAY,WAAW;AACvB,SAAS,YAAY;AA0LP,SAWI,KAXJ;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,WAAW,KAAK,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,oBAAC,UAAK,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD,cAAI,MACP;AAAA,sBAEF,oBAAC,UAAM,cAAI,OAAM;AAAA;AAAA;AAAA,gBACnB;AAAA,gBACA,oBAAC,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/index.d.mts

@@ -2,6 +2,21 @@ export { Button, ButtonProps } from './Button.mjs';
 export { Card, CardProps } from './Card.mjs';
 export { Input, InputProps } from './Input.mjs';
 export { Tag, TagProps } from './Tag.mjs';
+export { Combobox, ComboboxProps } from './Combobox.mjs';
+export { NumericInput, NumericInputProps } from './NumericInput.mjs';
+export { Checkbox, CheckboxProps } from './Checkbox.mjs';
+export { Radio, RadioProps } from './Radio.mjs';
+export { DatePicker, DatePickerProps } from './DatePicker.mjs';
+export { Toast, ToastProps } from './Toast.mjs';
+export { Tooltip, TooltipProps } from './Tooltip.mjs';
+export { Toggle, ToggleProps } from './Toggle.mjs';
+export { TextArea, TextAreaProps } from './TextArea.mjs';
+export { TabItem, Tabs, TabsProps } from './Tabs.mjs';
+export { Banner, BannerProps, BannerVariant } from './Banner.mjs';
+export { Pagination, PaginationProps } from './Pagination.mjs';
+export { TableFooterPagination, TableFooterPaginationProps } from './TableFooterPagination.mjs';
+export { TableControls, TableControlsProps } from './TableControls.mjs';
+export { Table, TableColumn, TableProps, TableRow } from './Table.mjs';
 import 'react';
 
 /**
@@ -13,5 +28,11 @@ type InputSize = 'small' | 'medium';
 type ValidationState = 'default' | 'error' | 'success';
 type CardPadding = 'none' | 'small' | 'medium' | 'large';
 type TagVariant = 'default' | 'success' | 'error' | 'info' | 'neutral';
+type ComboboxState = 'default' | 'error' | 'success';
+type ComboboxOption = {
+    value: string;
+    label: string;
+};
+type NumericInputState = 'default' | 'error' | 'success';
 
-export type { ButtonSize, ButtonVariant, CardPadding, InputSize, TagVariant, ValidationState };
+export type { ButtonSize, ButtonVariant, CardPadding, ComboboxOption, ComboboxState, InputSize, NumericInputState, TagVariant, ValidationState };

package/dist/index.d.ts

@@ -2,6 +2,21 @@ export { Button, ButtonProps } from './Button.js';
 export { Card, CardProps } from './Card.js';
 export { Input, InputProps } from './Input.js';
 export { Tag, TagProps } from './Tag.js';
+export { Combobox, ComboboxProps } from './Combobox.js';
+export { NumericInput, NumericInputProps } from './NumericInput.js';
+export { Checkbox, CheckboxProps } from './Checkbox.js';
+export { Radio, RadioProps } from './Radio.js';
+export { DatePicker, DatePickerProps } from './DatePicker.js';
+export { Toast, ToastProps } from './Toast.js';
+export { Tooltip, TooltipProps } from './Tooltip.js';
+export { Toggle, ToggleProps } from './Toggle.js';
+export { TextArea, TextAreaProps } from './TextArea.js';
+export { TabItem, Tabs, TabsProps } from './Tabs.js';
+export { Banner, BannerProps, BannerVariant } from './Banner.js';
+export { Pagination, PaginationProps } from './Pagination.js';
+export { TableFooterPagination, TableFooterPaginationProps } from './TableFooterPagination.js';
+export { TableControls, TableControlsProps } from './TableControls.js';
+export { Table, TableColumn, TableProps, TableRow } from './Table.js';
 import 'react';
 
 /**
@@ -13,5 +28,11 @@ type InputSize = 'small' | 'medium';
 type ValidationState = 'default' | 'error' | 'success';
 type CardPadding = 'none' | 'small' | 'medium' | 'large';
 type TagVariant = 'default' | 'success' | 'error' | 'info' | 'neutral';
+type ComboboxState = 'default' | 'error' | 'success';
+type ComboboxOption = {
+    value: string;
+    label: string;
+};
+type NumericInputState = 'default' | 'error' | 'success';
 
-export type { ButtonSize, ButtonVariant, CardPadding, InputSize, TagVariant, ValidationState };
+export type { ButtonSize, ButtonVariant, CardPadding, ComboboxOption, ComboboxState, InputSize, NumericInputState, TagVariant, ValidationState };