@tonyarbor/components 0.2.0 → 0.4.0

package/dist/chunk-YV4OXFIM.mjs

@@ -0,0 +1,151 @@
+// src/Tabs/Tabs.tsx
+import * as React from "react";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "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__ */ jsx(
+      "div",
+      {
+        ref,
+        className: 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__ */ jsxs(
+            "div",
+            {
+              style: tabItemWrapperStyles,
+              onMouseEnter: () => setHoveredTab(tab.value),
+              onMouseLeave: () => setHoveredTab(null),
+              children: [
+                /* @__PURE__ */ 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__ */ jsx("span", { style: { display: "flex", alignItems: "center" }, children: tab.icon }),
+                      /* @__PURE__ */ jsx("span", { children: tab.label })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { style: underlineStylesCombined })
+              ]
+            },
+            tab.value
+          );
+        })
+      }
+    );
+  }
+);
+Tabs.displayName = "Tabs";
+
+export {
+  Tabs
+};
+//# sourceMappingURL=chunk-YV4OXFIM.mjs.map

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":"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","names":[]}

package/dist/index.d.mts

@@ -6,6 +6,21 @@ 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';
+export { Avatar, AvatarProps, AvatarSize } from './Avatar.mjs';
+export { SearchGlobal, SearchGlobalProps } from './SearchGlobal.mjs';
+export { SearchOnPage, SearchOnPageProps } from './SearchOnPage.mjs';
+export { BreadcrumbItem, Breadcrumbs, BreadcrumbsProps } from './Breadcrumbs.mjs';
 import 'react';
 
 /**

package/dist/index.d.ts

@@ -6,6 +6,21 @@ 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';
+export { Avatar, AvatarProps, AvatarSize } from './Avatar.js';
+export { SearchGlobal, SearchGlobalProps } from './SearchGlobal.js';
+export { SearchOnPage, SearchOnPageProps } from './SearchOnPage.js';
+export { BreadcrumbItem, Breadcrumbs, BreadcrumbsProps } from './Breadcrumbs.js';
 import 'react';
 
 /**