@tonyarbor/components 0.2.0 → 0.4.0

package/dist/chunk-52TG3BFX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TableFooterPagination/TableFooterPagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clsx } from 'clsx';\nimport { ChevronDown } from 'lucide-react';\n\nexport interface TableFooterPaginationProps {\n  /**\n   * Current page number (1-indexed)\n   */\n  currentPage: number;\n  /**\n   * Total number of pages\n   */\n  totalPages: number;\n  /**\n   * Callback when page changes\n   */\n  onPageChange: (page: number) => void;\n  /**\n   * Total number of results\n   */\n  totalResults: number;\n  /**\n   * Number of results currently showing\n   */\n  currentResults: number;\n  /**\n   * Items per page\n   */\n  itemsPerPage: number;\n  /**\n   * Callback when items per page changes\n   */\n  onItemsPerPageChange?: (itemsPerPage: number) => void;\n  /**\n   * Callback when expand table is clicked\n   */\n  onExpandTable?: () => 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 containerStyles: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  backgroundColor: 'white',\n  paddingTop: '4px',\n  paddingBottom: 0,\n  paddingLeft: 0,\n  paddingRight: 0,\n  fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n};\n\nconst textStyles: React.CSSProperties = {\n  fontSize: '13px',\n  fontWeight: 400,\n  lineHeight: '1.5',\n  color: '#2f2f2f',\n  minWidth: '165px',\n};\n\nconst paginationWrapperStyles: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: '8px',\n  minWidth: '165px',\n  flexWrap: 'wrap',\n};\n\nconst paginationButtonStyles: React.CSSProperties = {\n  width: '32px',\n  height: '32px',\n  minWidth: '32px',\n  minHeight: '32px',\n  maxWidth: '32px',\n  maxHeight: '32px',\n  borderRadius: '99px',\n  border: 'none',\n  background: 'white',\n  cursor: 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: 0,\n  transition: 'background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out',\n  flexShrink: 0,\n  WebkitTapHighlightColor: 'transparent',\n  outline: 'none',\n};\n\nconst paginationButtonDisabledStyles: React.CSSProperties = {\n  cursor: 'not-allowed',\n  opacity: 0.5,\n};\n\nconst paginationLabelStyles: React.CSSProperties = {\n  fontSize: '13px',\n  fontWeight: 400,\n  lineHeight: '1.5',\n  color: '#2f2f2f',\n};\n\nconst paginationInputWrapperStyles: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: '8px',\n};\n\nconst paginationInputStyles: React.CSSProperties = {\n  width: '60px',\n  paddingTop: '12px',\n  paddingBottom: '12px',\n  paddingLeft: '16px',\n  paddingRight: '16px',\n  fontSize: '13px',\n  fontWeight: 400,\n  lineHeight: '1.5',\n  color: '#2f2f2f',\n  backgroundColor: 'white',\n  border: '1px solid #dfdfdf',\n  borderRadius: '8px',\n  fontFamily: 'inherit',\n  textAlign: 'center',\n  outline: 'none',\n};\n\nconst paginationInputFocusStyles: React.CSSProperties = {\n  boxShadow: '0px 0px 0px 3px #3cad51',\n};\n\nconst rightAlignedStyles: React.CSSProperties = {\n  display: 'flex',\n  gap: '16px',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  minWidth: '165px',\n};\n\nconst perPageButtonStyles: React.CSSProperties = {\n  height: '32px',\n  backgroundColor: 'white',\n  border: '1px solid #d1d1d1',\n  borderRadius: '8px',\n  display: 'flex',\n  alignItems: 'center',\n  gap: '8px',\n  paddingLeft: '12px',\n  paddingRight: '8px',\n  paddingTop: '8px',\n  paddingBottom: '8px',\n  cursor: 'pointer',\n  transition: 'background-color 0.2s ease-in-out',\n  outline: 'none',\n};\n\nconst perPageTextStyles: React.CSSProperties = {\n  fontSize: '13px',\n  fontWeight: 600,\n  lineHeight: '1.5',\n  color: '#2f2f2f',\n  textAlign: 'center',\n};\n\nconst expandButtonStyles: React.CSSProperties = {\n  height: '32px',\n  minHeight: '32px',\n  backgroundColor: '#efefef',\n  border: 'none',\n  borderRadius: '99px',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  paddingLeft: '16px',\n  paddingRight: '16px',\n  paddingTop: 0,\n  paddingBottom: 0,\n  gap: 0,\n  cursor: 'pointer',\n  transition: 'background-color 0.2s ease-in-out',\n  outline: 'none',\n};\n\nconst expandButtonTextStyles: React.CSSProperties = {\n  fontSize: '13px',\n  fontWeight: 600,\n  lineHeight: '1.5',\n  color: '#2f2f2f',\n  textAlign: 'center',\n};\n\n/**\n * TableFooterPagination component - Arbor Design System\n *\n * A table footer component with result count, pagination, and table controls.\n */\nexport const TableFooterPagination = React.forwardRef<\n  HTMLDivElement,\n  TableFooterPaginationProps\n>(\n  (\n    {\n      currentPage,\n      totalPages,\n      onPageChange,\n      totalResults,\n      currentResults,\n      itemsPerPage,\n      onItemsPerPageChange,\n      onExpandTable,\n      className,\n      style,\n      'data-testid': dataTestId,\n    },\n    ref\n  ) => {\n    const [inputValue, setInputValue] = React.useState(currentPage.toString());\n    const [focusedButton, setFocusedButton] = React.useState<string | null>(null);\n    const [hoveredButton, setHoveredButton] = React.useState<string | null>(null);\n    const [activeButton, setActiveButton] = React.useState<string | null>(null);\n    const [inputFocused, setInputFocused] = React.useState(false);\n    const [perPageHovered, setPerPageHovered] = React.useState(false);\n    const [expandHovered, setExpandHovered] = React.useState(false);\n\n    React.useEffect(() => {\n      setInputValue(currentPage.toString());\n    }, [currentPage]);\n\n    const handleFirstPage = () => {\n      if (currentPage !== 1) {\n        onPageChange(1);\n      }\n    };\n\n    const handlePreviousPage = () => {\n      if (currentPage > 1) {\n        onPageChange(currentPage - 1);\n      }\n    };\n\n    const handleNextPage = () => {\n      if (currentPage < totalPages) {\n        onPageChange(currentPage + 1);\n      }\n    };\n\n    const handleLastPage = () => {\n      if (currentPage !== totalPages) {\n        onPageChange(totalPages);\n      }\n    };\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value;\n      if (value === '' || /^\\d+$/.test(value)) {\n        setInputValue(value);\n      }\n    };\n\n    const handleInputBlur = () => {\n      setInputFocused(false);\n      const pageNumber = parseInt(inputValue, 10);\n      if (isNaN(pageNumber) || pageNumber < 1) {\n        setInputValue(currentPage.toString());\n      } else if (pageNumber > totalPages) {\n        setInputValue(totalPages.toString());\n        onPageChange(totalPages);\n      } else if (pageNumber !== currentPage) {\n        onPageChange(pageNumber);\n      }\n    };\n\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        handleInputBlur();\n        (e.target as HTMLInputElement).blur();\n      }\n    };\n\n    const getButtonStyle = (\n      buttonName: string,\n      disabled: boolean\n    ): React.CSSProperties => {\n      if (disabled) {\n        return { ...paginationButtonStyles, ...paginationButtonDisabledStyles };\n      }\n\n      const isHovered = hoveredButton === buttonName;\n      const isFocused = focusedButton === buttonName;\n      const isActive = activeButton === buttonName;\n\n      const style: React.CSSProperties = {\n        ...paginationButtonStyles,\n      };\n\n      if (isHovered && !isFocused && !isActive) {\n        style.backgroundColor = '#efefef';\n      }\n\n      if (isActive && !isFocused) {\n        style.backgroundColor = 'transparent';\n      }\n\n      if (isFocused) {\n        style.boxShadow = '0px 0px 0px 3px #3cad51';\n        style.backgroundColor = 'rgba(255, 255, 255, 0.01)';\n      }\n\n      return style;\n    };\n\n    const isFirstDisabled = currentPage === 1;\n    const isPreviousDisabled = currentPage === 1;\n    const isNextDisabled = currentPage === totalPages;\n    const isLastDisabled = currentPage === totalPages;\n\n    const resultText =\n      currentResults === totalResults\n        ? `Showing ${totalResults} results`\n        : `Showing ${currentResults} of ${totalResults} results`;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-table-footer-pagination', className)}\n        style={{ ...containerStyles, ...style }}\n        data-testid={dataTestId}\n      >\n        {/* Left section - Results count */}\n        <div style={textStyles}>{resultText}</div>\n\n        {/* Middle section - Pagination */}\n        <div style={paginationWrapperStyles}>\n          <button\n            type=\"button\"\n            onClick={handleFirstPage}\n            disabled={isFirstDisabled}\n            onMouseEnter={() => setHoveredButton('first')}\n            onMouseLeave={() => setHoveredButton(null)}\n            onMouseDown={() => setActiveButton('first')}\n            onMouseUp={() => setActiveButton(null)}\n            onFocus={() => setFocusedButton('first')}\n            onBlur={() => setFocusedButton(null)}\n            style={getButtonStyle('first', isFirstDisabled)}\n            aria-label=\"Go to first page\"\n          >\n            <svg\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M7 12L3 8L7 4M11 12L7 8L11 4\"\n                stroke=\"#2f2f2f\"\n                strokeWidth=\"1.5\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </button>\n\n          <button\n            type=\"button\"\n            onClick={handlePreviousPage}\n            disabled={isPreviousDisabled}\n            onMouseEnter={() => setHoveredButton('previous')}\n            onMouseLeave={() => setHoveredButton(null)}\n            onMouseDown={() => setActiveButton('previous')}\n            onMouseUp={() => setActiveButton(null)}\n            onFocus={() => setFocusedButton('previous')}\n            onBlur={() => setFocusedButton(null)}\n            style={getButtonStyle('previous', isPreviousDisabled)}\n            aria-label=\"Go to previous page\"\n          >\n            <svg\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M10 12L6 8L10 4\"\n                stroke=\"#2f2f2f\"\n                strokeWidth=\"1.5\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </button>\n\n          <div style={paginationInputWrapperStyles}>\n            <span style={paginationLabelStyles}>Page</span>\n            <input\n              type=\"text\"\n              value={inputValue}\n              onChange={handleInputChange}\n              onBlur={handleInputBlur}\n              onFocus={() => setInputFocused(true)}\n              onKeyDown={handleInputKeyDown}\n              style={{\n                ...paginationInputStyles,\n                ...(inputFocused && paginationInputFocusStyles),\n              }}\n              aria-label={`Page ${currentPage} of ${totalPages}`}\n            />\n            <span style={paginationLabelStyles}>of {totalPages}</span>\n          </div>\n\n          <button\n            type=\"button\"\n            onClick={handleNextPage}\n            disabled={isNextDisabled}\n            onMouseEnter={() => setHoveredButton('next')}\n            onMouseLeave={() => setHoveredButton(null)}\n            onMouseDown={() => setActiveButton('next')}\n            onMouseUp={() => setActiveButton(null)}\n            onFocus={() => setFocusedButton('next')}\n            onBlur={() => setFocusedButton(null)}\n            style={getButtonStyle('next', isNextDisabled)}\n            aria-label=\"Go to next page\"\n          >\n            <svg\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M6 4L10 8L6 12\"\n                stroke=\"#2f2f2f\"\n                strokeWidth=\"1.5\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </button>\n\n          <button\n            type=\"button\"\n            onClick={handleLastPage}\n            disabled={isLastDisabled}\n            onMouseEnter={() => setHoveredButton('last')}\n            onMouseLeave={() => setHoveredButton(null)}\n            onMouseDown={() => setActiveButton('last')}\n            onMouseUp={() => setActiveButton(null)}\n            onFocus={() => setFocusedButton('last')}\n            onBlur={() => setFocusedButton(null)}\n            style={getButtonStyle('last', isLastDisabled)}\n            aria-label=\"Go to last page\"\n          >\n            <svg\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M9 4L13 8L9 12M5 4L9 8L5 12\"\n                stroke=\"#2f2f2f\"\n                strokeWidth=\"1.5\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </button>\n        </div>\n\n        {/* Right section - Controls */}\n        <div style={rightAlignedStyles}>\n          {onItemsPerPageChange && (\n            <button\n              type=\"button\"\n              onClick={() => onItemsPerPageChange(itemsPerPage)}\n              onMouseEnter={() => setPerPageHovered(true)}\n              onMouseLeave={() => setPerPageHovered(false)}\n              style={{\n                ...perPageButtonStyles,\n                backgroundColor: perPageHovered ? '#f5f5f5' : 'white',\n              }}\n              aria-label=\"Items per page\"\n            >\n              <span style={perPageTextStyles}>{itemsPerPage} per page</span>\n              <ChevronDown size={16} color=\"#2f2f2f\" />\n            </button>\n          )}\n\n          {onExpandTable && (\n            <button\n              type=\"button\"\n              onClick={onExpandTable}\n              onMouseEnter={() => setExpandHovered(true)}\n              onMouseLeave={() => setExpandHovered(false)}\n              style={{\n                ...expandButtonStyles,\n                backgroundColor: expandHovered ? '#e5e5e5' : '#efefef',\n              }}\n              aria-label=\"Expand table\"\n            >\n              <span style={expandButtonTextStyles}>Expand table</span>\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nTableFooterPagination.displayName = 'TableFooterPagination';\n"],"mappings":"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","names":["style"]}

package/dist/chunk-AI2U34CF.mjs

@@ -0,0 +1,159 @@
+import {
+  Checkbox
+} from "./chunk-CUTYEIFE.mjs";
+
+// src/Table/Table.tsx
+import * as React from "react";
+import { clsx } from "clsx";
+import { MoreVertical } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var tableStyles = {
+  width: "100%",
+  borderCollapse: "separate",
+  borderSpacing: 0,
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var headerCellStyles = {
+  height: "44px",
+  paddingLeft: "16px",
+  paddingRight: "16px",
+  paddingTop: 0,
+  paddingBottom: 0,
+  backgroundColor: "#f8f8f8",
+  borderBottom: "1px solid #efefef",
+  fontSize: "13px",
+  fontWeight: 600,
+  color: "#2f2f2f",
+  textAlign: "left",
+  position: "relative"
+};
+var checkboxCellStyles = {
+  width: "48px",
+  paddingLeft: "16px",
+  paddingRight: "8px"
+};
+var bodyCellStyles = {
+  height: "41px",
+  paddingLeft: "16px",
+  paddingRight: "16px",
+  paddingTop: "8px",
+  paddingBottom: "8px",
+  borderBottom: "1px solid #efefef",
+  fontSize: "13px",
+  color: "#2f2f2f"
+};
+var menuButtonStyles = {
+  width: "24px",
+  height: "24px",
+  border: "none",
+  backgroundColor: "transparent",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  marginLeft: "8px",
+  borderRadius: "4px",
+  transition: "background-color 0.2s ease-in-out"
+};
+var rowStyles = {
+  transition: "background-color 0.1s ease-in-out"
+};
+var Table = React.forwardRef(
+  ({
+    columns,
+    rows,
+    onRowSelectionChange,
+    onSelectAllChange,
+    allSelected = false,
+    someSelected = false,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [hoveredRow, setHoveredRow] = React.useState(null);
+    const [hoveredMenuButton, setHoveredMenuButton] = React.useState(null);
+    return /* @__PURE__ */ jsxs(
+      "table",
+      {
+        ref,
+        className: clsx("arbor-table", className),
+        style: { ...tableStyles, ...style },
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { style: { ...headerCellStyles, ...checkboxCellStyles }, children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: allSelected,
+                indeterminate: someSelected && !allSelected,
+                onChange: onSelectAllChange,
+                "aria-label": "Select all rows"
+              }
+            ) }),
+            columns.map((column) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                style: {
+                  ...headerCellStyles,
+                  ...column.width ? { width: column.width } : {}
+                },
+                children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsx("span", { children: column.label }),
+                  column.showMenu !== false && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onMouseEnter: () => setHoveredMenuButton(`header-${column.key}`),
+                      onMouseLeave: () => setHoveredMenuButton(null),
+                      style: {
+                        ...menuButtonStyles,
+                        backgroundColor: hoveredMenuButton === `header-${column.key}` ? "#f5f5f5" : "transparent"
+                      },
+                      "aria-label": `${column.label} options`,
+                      children: /* @__PURE__ */ jsx(MoreVertical, { size: 16, color: "#595959" })
+                    }
+                  )
+                ] })
+              },
+              column.key
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => {
+            const isOdd = index % 2 === 0;
+            const isHovered = hoveredRow === row.id;
+            return /* @__PURE__ */ jsxs(
+              "tr",
+              {
+                onMouseEnter: () => setHoveredRow(row.id),
+                onMouseLeave: () => setHoveredRow(null),
+                style: {
+                  ...rowStyles,
+                  backgroundColor: isHovered ? "#fafafa" : isOdd ? "white" : "#f8f8f8"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("td", { style: { ...bodyCellStyles, ...checkboxCellStyles }, children: /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: row.selected || false,
+                      onChange: (checked) => onRowSelectionChange?.(row.id, checked),
+                      "aria-label": `Select row ${row.id}`
+                    }
+                  ) }),
+                  columns.map((column) => /* @__PURE__ */ jsx("td", { style: bodyCellStyles, children: row.cells[column.key] }, column.key))
+                ]
+              },
+              row.id
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+Table.displayName = "Table";
+
+export {
+  Table
+};
+//# sourceMappingURL=chunk-AI2U34CF.mjs.map

package/dist/chunk-AI2U34CF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Table/Table.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clsx } from 'clsx';\nimport { MoreVertical } from 'lucide-react';\nimport { Checkbox } from '../Checkbox';\n\nexport interface TableColumn {\n  /**\n   * Unique key for the column\n   */\n  key: string;\n  /**\n   * Column header label\n   */\n  label: string;\n  /**\n   * Whether to show the menu icon in the header\n   */\n  showMenu?: boolean;\n  /**\n   * Custom width for the column\n   */\n  width?: string;\n}\n\nexport interface TableRow {\n  /**\n   * Unique ID for the row\n   */\n  id: string;\n  /**\n   * Cell data keyed by column key\n   */\n  cells: Record<string, React.ReactNode>;\n  /**\n   * Whether the row is selected\n   */\n  selected?: boolean;\n}\n\nexport interface TableProps {\n  /**\n   * Table columns configuration\n   */\n  columns: TableColumn[];\n  /**\n   * Table rows data\n   */\n  rows: TableRow[];\n  /**\n   * Callback when row selection changes\n   */\n  onRowSelectionChange?: (rowId: string, selected: boolean) => void;\n  /**\n   * Callback when select all is toggled\n   */\n  onSelectAllChange?: (selected: boolean) => void;\n  /**\n   * Whether all rows are selected\n   */\n  allSelected?: boolean;\n  /**\n   * Whether some rows are selected (indeterminate state)\n   */\n  someSelected?: boolean;\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 tableStyles: React.CSSProperties = {\n  width: '100%',\n  borderCollapse: 'separate',\n  borderSpacing: 0,\n  fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n};\n\nconst headerCellStyles: React.CSSProperties = {\n  height: '44px',\n  paddingLeft: '16px',\n  paddingRight: '16px',\n  paddingTop: 0,\n  paddingBottom: 0,\n  backgroundColor: '#f8f8f8',\n  borderBottom: '1px solid #efefef',\n  fontSize: '13px',\n  fontWeight: 600,\n  color: '#2f2f2f',\n  textAlign: 'left',\n  position: 'relative',\n};\n\nconst checkboxCellStyles: React.CSSProperties = {\n  width: '48px',\n  paddingLeft: '16px',\n  paddingRight: '8px',\n};\n\nconst bodyCellStyles: React.CSSProperties = {\n  height: '41px',\n  paddingLeft: '16px',\n  paddingRight: '16px',\n  paddingTop: '8px',\n  paddingBottom: '8px',\n  borderBottom: '1px solid #efefef',\n  fontSize: '13px',\n  color: '#2f2f2f',\n};\n\nconst menuButtonStyles: React.CSSProperties = {\n  width: '24px',\n  height: '24px',\n  border: 'none',\n  backgroundColor: 'transparent',\n  cursor: 'pointer',\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: 0,\n  marginLeft: '8px',\n  borderRadius: '4px',\n  transition: 'background-color 0.2s ease-in-out',\n};\n\nconst rowStyles: React.CSSProperties = {\n  transition: 'background-color 0.1s ease-in-out',\n};\n\n/**\n * Table component - Arbor Design System\n *\n * A data table component with selectable rows and column headers.\n */\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n  (\n    {\n      columns,\n      rows,\n      onRowSelectionChange,\n      onSelectAllChange,\n      allSelected = false,\n      someSelected = false,\n      className,\n      style,\n      'data-testid': dataTestId,\n    },\n    ref\n  ) => {\n    const [hoveredRow, setHoveredRow] = React.useState<string | null>(null);\n    const [hoveredMenuButton, setHoveredMenuButton] = React.useState<string | null>(null);\n\n    return (\n      <table\n        ref={ref}\n        className={clsx('arbor-table', className)}\n        style={{ ...tableStyles, ...style }}\n        data-testid={dataTestId}\n      >\n        <thead>\n          <tr>\n            {/* Checkbox header cell */}\n            <th style={{ ...headerCellStyles, ...checkboxCellStyles }}>\n              <Checkbox\n                checked={allSelected}\n                indeterminate={someSelected && !allSelected}\n                onChange={onSelectAllChange}\n                aria-label=\"Select all rows\"\n              />\n            </th>\n\n            {/* Column headers */}\n            {columns.map((column) => (\n              <th\n                key={column.key}\n                style={{\n                  ...headerCellStyles,\n                  ...(column.width ? { width: column.width } : {}),\n                }}\n              >\n                <div style={{ display: 'flex', alignItems: 'center' }}>\n                  <span>{column.label}</span>\n                  {column.showMenu !== false && (\n                    <button\n                      type=\"button\"\n                      onMouseEnter={() => setHoveredMenuButton(`header-${column.key}`)}\n                      onMouseLeave={() => setHoveredMenuButton(null)}\n                      style={{\n                        ...menuButtonStyles,\n                        backgroundColor:\n                          hoveredMenuButton === `header-${column.key}` ? '#f5f5f5' : 'transparent',\n                      }}\n                      aria-label={`${column.label} options`}\n                    >\n                      <MoreVertical size={16} color=\"#595959\" />\n                    </button>\n                  )}\n                </div>\n              </th>\n            ))}\n          </tr>\n        </thead>\n\n        <tbody>\n          {rows.map((row, index) => {\n            const isOdd = index % 2 === 0;\n            const isHovered = hoveredRow === row.id;\n\n            return (\n              <tr\n                key={row.id}\n                onMouseEnter={() => setHoveredRow(row.id)}\n                onMouseLeave={() => setHoveredRow(null)}\n                style={{\n                  ...rowStyles,\n                  backgroundColor: isHovered\n                    ? '#fafafa'\n                    : isOdd\n                      ? 'white'\n                      : '#f8f8f8',\n                }}\n              >\n                {/* Checkbox cell */}\n                <td style={{ ...bodyCellStyles, ...checkboxCellStyles }}>\n                  <Checkbox\n                    checked={row.selected || false}\n                    onChange={(checked) => onRowSelectionChange?.(row.id, checked)}\n                    aria-label={`Select row ${row.id}`}\n                  />\n                </td>\n\n                {/* Data cells */}\n                {columns.map((column) => (\n                  <td key={column.key} style={bodyCellStyles}>\n                    {row.cells[column.key]}\n                  </td>\n                ))}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    );\n  }\n);\n\nTable.displayName = 'Table';\n"],"mappings":"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","names":[]}

package/dist/chunk-B7RX3TPX.mjs

@@ -0,0 +1,135 @@
+// src/SearchOnPage/SearchOnPage.tsx
+import * as React from "react";
+import { Search, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SearchOnPage = React.forwardRef(
+  ({
+    value = "",
+    onChange,
+    onSubmit,
+    onClear,
+    placeholder = "Search Reports",
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => inputRef.current);
+    const handleFocus = () => {
+      setIsFocused(true);
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
+    const handleChange = (e) => {
+      onChange?.(e.target.value);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        onSubmit?.(value);
+      }
+    };
+    const handleClear = () => {
+      onChange?.("");
+      onClear?.();
+      inputRef.current?.focus();
+    };
+    const containerStyles = {
+      position: "relative",
+      width: "200px",
+      height: "32px",
+      backgroundColor: isFocused ? "#ffffff" : isHovered ? "#efefef" : "#ffffff",
+      borderRadius: "16px",
+      padding: "8px 16px",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      cursor: "text",
+      transition: "all 0.2s ease-in-out",
+      boxSizing: "border-box",
+      border: isFocused ? "1px solid #efefef" : "none",
+      boxShadow: isFocused ? "0px 0px 0px 3px #3cad51" : "none",
+      ...style
+    };
+    const iconContainerStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      padding: "2px"
+    };
+    const inputStyles = {
+      border: "none",
+      outline: "none",
+      backgroundColor: "transparent",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      fontSize: "13px",
+      fontWeight: 400,
+      color: "#2f2f2f",
+      lineHeight: "1.5",
+      flex: 1,
+      width: "100%",
+      minWidth: 0
+    };
+    const clearButtonStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      width: "16px",
+      height: "16px",
+      cursor: "pointer",
+      border: "none",
+      background: "none",
+      padding: 0
+    };
+    const showClearButton = isFocused && value.length > 0;
+    const iconColor = isFocused || isHovered ? "#2f2f2f" : "#595959";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className,
+        style: containerStyles,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onClick: () => inputRef.current?.focus(),
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ jsx("div", { style: iconContainerStyles, children: /* @__PURE__ */ jsx(Search, { size: 12, color: iconColor, strokeWidth: 2 }) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              placeholder: isFocused ? "" : placeholder,
+              style: inputStyles
+            }
+          ),
+          showClearButton && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              style: clearButtonStyles,
+              "aria-label": "Clear search",
+              children: /* @__PURE__ */ jsx(X, { size: 13.333, color: "#2f2f2f", strokeWidth: 2 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SearchOnPage.displayName = "SearchOnPage";
+
+export {
+  SearchOnPage
+};
+//# sourceMappingURL=chunk-B7RX3TPX.mjs.map

package/dist/chunk-B7RX3TPX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SearchOnPage/SearchOnPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Search, X } from 'lucide-react';\n\nexport interface SearchOnPageProps {\n  /**\n   * Value of the search input\n   */\n  value?: string;\n  /**\n   * Callback when value changes\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Callback when search is submitted\n   */\n  onSubmit?: (value: string) => void;\n  /**\n   * Callback when clear button is clicked\n   */\n  onClear?: () => void;\n  /**\n   * Placeholder text\n   */\n  placeholder?: string;\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\n/**\n * SearchOnPage component - Arbor Design System\n *\n * A search input with fixed 200px width for filtering content on the current page.\n * Shows green focus ring when active and X button to clear.\n */\nexport const SearchOnPage = React.forwardRef<HTMLInputElement, SearchOnPageProps>(\n  (\n    {\n      value = '',\n      onChange,\n      onSubmit,\n      onClear,\n      placeholder = 'Search Reports',\n      className,\n      style,\n      'data-testid': dataTestId,\n    },\n    ref\n  ) => {\n    const [isFocused, setIsFocused] = React.useState(false);\n    const [isHovered, setIsHovered] = React.useState(false);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge refs\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const handleFocus = () => {\n      setIsFocused(true);\n    };\n\n    const handleBlur = () => {\n      setIsFocused(false);\n    };\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.value);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        onSubmit?.(value);\n      }\n    };\n\n    const handleClear = () => {\n      onChange?.('');\n      onClear?.();\n      inputRef.current?.focus();\n    };\n\n    const containerStyles: React.CSSProperties = {\n      position: 'relative',\n      width: '200px',\n      height: '32px',\n      backgroundColor: isFocused ? '#ffffff' : isHovered ? '#efefef' : '#ffffff',\n      borderRadius: '16px',\n      padding: '8px 16px',\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8px',\n      cursor: 'text',\n      transition: 'all 0.2s ease-in-out',\n      boxSizing: 'border-box',\n      border: isFocused ? '1px solid #efefef' : 'none',\n      boxShadow: isFocused ? '0px 0px 0px 3px #3cad51' : 'none',\n      ...style,\n    };\n\n    const iconContainerStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      padding: '2px',\n    };\n\n    const inputStyles: React.CSSProperties = {\n      border: 'none',\n      outline: 'none',\n      backgroundColor: 'transparent',\n      fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n      fontSize: '13px',\n      fontWeight: 400,\n      color: '#2f2f2f',\n      lineHeight: '1.5',\n      flex: 1,\n      width: '100%',\n      minWidth: 0,\n    };\n\n    const clearButtonStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      width: '16px',\n      height: '16px',\n      cursor: 'pointer',\n      border: 'none',\n      background: 'none',\n      padding: 0,\n    };\n\n    const showClearButton = isFocused && value.length > 0;\n    const iconColor = isFocused || isHovered ? '#2f2f2f' : '#595959';\n\n    return (\n      <div\n        className={className}\n        style={containerStyles}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        onClick={() => inputRef.current?.focus()}\n        data-testid={dataTestId}\n      >\n        <div style={iconContainerStyles}>\n          <Search size={12} color={iconColor} strokeWidth={2} />\n        </div>\n\n        <input\n          ref={inputRef}\n          type=\"text\"\n          value={value}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          placeholder={isFocused ? '' : placeholder}\n          style={inputStyles}\n        />\n\n        {showClearButton && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            style={clearButtonStyles}\n            aria-label=\"Clear search\"\n          >\n            <X size={13.333} color=\"#2f2f2f\" strokeWidth={2} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nSearchOnPage.displayName = 'SearchOnPage';\n"],"mappings":"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","names":[]}

package/dist/chunk-C25FFMRQ.mjs

@@ -0,0 +1,255 @@
+// src/Toggle/Toggle.tsx
+import * as React from "react";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var toggleContainerStyles = {
+  width: "40px",
+  height: "24px",
+  borderRadius: "16px",
+  border: "1px solid",
+  position: "relative",
+  cursor: "pointer",
+  transition: "all 0.2s ease-in-out"
+};
+var knobStyles = {
+  width: "18px",
+  height: "18px",
+  borderRadius: "50%",
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  transition: "all 0.2s ease-in-out"
+};
+var labelStyles = {
+  fontSize: "13px",
+  color: "#2f2f2f",
+  cursor: "pointer",
+  userSelect: "none",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var wrapperStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px"
+};
+var Toggle = React.forwardRef(
+  ({
+    label,
+    checked = false,
+    onChange,
+    disabled = false,
+    className,
+    style,
+    "data-testid": dataTestId,
+    name,
+    value
+  }, ref) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isActive, setIsActive] = React.useState(false);
+    const toggleId = React.useId();
+    const handleChange = (e) => {
+      if (!disabled) {
+        onChange?.(e.target.checked);
+      }
+    };
+    const getContainerStyles = () => {
+      if (disabled) {
+        return {
+          ...toggleContainerStyles,
+          backgroundColor: checked ? "#d1d1d1" : "#ffffff",
+          borderColor: checked ? "#d1d1d1" : "#d1d1d1",
+          cursor: "not-allowed"
+        };
+      }
+      if (checked) {
+        if (isActive && isFocused) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#024002",
+            borderColor: "#024002",
+            boxShadow: "0px 0px 0px 3px #3cad51"
+          };
+        }
+        if (isActive) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#024002",
+            borderColor: "#024002"
+          };
+        }
+        if (isHovered) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#005700",
+            borderColor: "#005700"
+          };
+        }
+        if (isFocused) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#0b800b",
+            borderColor: "#0b800b",
+            boxShadow: "0px 0px 0px 3px #3cad51"
+          };
+        }
+        return {
+          ...toggleContainerStyles,
+          backgroundColor: "#0b800b",
+          borderColor: "#0b800b"
+        };
+      } else {
+        if (isActive && isFocused) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#efefef",
+            borderColor: "#2f2f2f",
+            boxShadow: "0px 0px 0px 3px #3cad51"
+          };
+        }
+        if (isActive) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#efefef",
+            borderColor: "#2f2f2f"
+          };
+        }
+        if (isHovered) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#f8f8f8",
+            borderColor: "#595959"
+          };
+        }
+        if (isFocused) {
+          return {
+            ...toggleContainerStyles,
+            backgroundColor: "#ffffff",
+            borderColor: "#7e7e7e",
+            boxShadow: "0px 0px 0px 3px #3cad51"
+          };
+        }
+        return {
+          ...toggleContainerStyles,
+          backgroundColor: "#ffffff",
+          borderColor: "#7e7e7e"
+        };
+      }
+    };
+    const getKnobStyles = () => {
+      const baseKnob = {
+        ...knobStyles,
+        left: checked ? "18px" : "2px"
+      };
+      if (disabled) {
+        return {
+          ...baseKnob,
+          backgroundColor: checked ? "#f8f8f8" : "#d1d1d1"
+        };
+      }
+      if (checked) {
+        if (isActive) {
+          return {
+            ...baseKnob,
+            backgroundColor: "#efefef"
+          };
+        }
+        if (isHovered) {
+          return {
+            ...baseKnob,
+            backgroundColor: "#f8f8f8"
+          };
+        }
+        return {
+          ...baseKnob,
+          backgroundColor: "#ffffff"
+        };
+      } else {
+        if (isActive) {
+          return {
+            ...baseKnob,
+            backgroundColor: "#2f2f2f"
+          };
+        }
+        if (isHovered) {
+          return {
+            ...baseKnob,
+            backgroundColor: "#595959"
+          };
+        }
+        return {
+          ...baseKnob,
+          backgroundColor: "#7e7e7e"
+        };
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx("arbor-toggle-wrapper", className),
+        style: { ...wrapperStyles, ...style },
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id: toggleId,
+              type: "checkbox",
+              checked,
+              onChange: handleChange,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              disabled,
+              name,
+              value,
+              style: {
+                position: "absolute",
+                opacity: 0,
+                width: 0,
+                height: 0
+              },
+              "aria-checked": checked
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: toggleId,
+              onMouseEnter: () => !disabled && setIsHovered(true),
+              onMouseLeave: () => !disabled && setIsHovered(false),
+              onMouseDown: () => !disabled && setIsActive(true),
+              onMouseUp: () => !disabled && setIsActive(false),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                cursor: disabled ? "not-allowed" : "pointer"
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { style: getContainerStyles(), children: /* @__PURE__ */ jsx("div", { style: getKnobStyles() }) }),
+                label && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      ...labelStyles,
+                      color: disabled ? "#7e7e7e" : "#2f2f2f",
+                      cursor: disabled ? "not-allowed" : "pointer"
+                    },
+                    children: label
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+
+export {
+  Toggle
+};
+//# sourceMappingURL=chunk-C25FFMRQ.mjs.map