@tonyarbor/components 0.2.1 → 0.4.0

package/dist/chunk-UPBHDBAK.mjs

@@ -0,0 +1,173 @@
+// src/SearchGlobal/SearchGlobal.tsx
+import * as React from "react";
+import { Search, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SearchGlobal = React.forwardRef(
+  ({
+    value = "",
+    onChange,
+    onSubmit,
+    onClear,
+    placeholder = "Search",
+    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: isFocused ? "300px" : "160px",
+      height: "32px",
+      backgroundColor: isFocused ? "#ffffff" : isHovered ? "#efefef" : "#f8f8f8",
+      borderRadius: "16px",
+      padding: "8px 16px",
+      display: "flex",
+      alignItems: "center",
+      gap: isFocused ? "8px" : "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",
+      marginLeft: isFocused ? "-140px" : "0",
+      // Expand to the left
+      ...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 keyboardShortcutStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "0px",
+      flexShrink: 0
+    };
+    const keyStyles = {
+      border: "1px solid #2f2f2f",
+      borderRadius: "5px",
+      padding: "0px 3px",
+      height: "16px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontFamily: "'Work Sans', sans-serif",
+      fontSize: "8px",
+      fontWeight: 400,
+      color: "#2f2f2f",
+      letterSpacing: "-0.08px",
+      lineHeight: "1.5",
+      minWidth: "16px"
+    };
+    const plusStyles = {
+      fontFamily: "'Work Sans', sans-serif",
+      fontSize: "8px",
+      fontWeight: 400,
+      color: "#2f2f2f",
+      letterSpacing: "-0.08px",
+      lineHeight: "1.5",
+      padding: "0 2px"
+    };
+    const clearButtonStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      width: "16px",
+      height: "16px",
+      cursor: "pointer",
+      border: "none",
+      background: "none",
+      padding: 0
+    };
+    const showKeyboardShortcut = isHovered && !isFocused;
+    const showClearButton = isFocused;
+    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: "#2f2f2f", strokeWidth: 2 }) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              placeholder: isFocused ? "" : placeholder,
+              style: inputStyles
+            }
+          ),
+          showKeyboardShortcut && /* @__PURE__ */ jsxs("div", { style: keyboardShortcutStyles, children: [
+            /* @__PURE__ */ jsx("div", { style: keyStyles, children: "\u2318" }),
+            /* @__PURE__ */ jsx("span", { style: plusStyles, children: "+" }),
+            /* @__PURE__ */ jsx("div", { style: keyStyles, children: "K" })
+          ] }),
+          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 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SearchGlobal.displayName = "SearchGlobal";
+
+export {
+  SearchGlobal
+};
+//# sourceMappingURL=chunk-UPBHDBAK.mjs.map

package/dist/chunk-UPBHDBAK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SearchGlobal/SearchGlobal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Search, X } from 'lucide-react';\n\nexport interface SearchGlobalProps {\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 * SearchGlobal component - Arbor Design System\n *\n * A search input that expands from 160px to 300px when focused.\n * Shows keyboard shortcut (⌘ K) on hover and X button when focused.\n */\nexport const SearchGlobal = React.forwardRef<HTMLInputElement, SearchGlobalProps>(\n  (\n    {\n      value = '',\n      onChange,\n      onSubmit,\n      onClear,\n      placeholder = 'Search',\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: isFocused ? '300px' : '160px',\n      height: '32px',\n      backgroundColor: isFocused ? '#ffffff' : isHovered ? '#efefef' : '#f8f8f8',\n      borderRadius: '16px',\n      padding: '8px 16px',\n      display: 'flex',\n      alignItems: 'center',\n      gap: isFocused ? '8px' : '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      marginLeft: isFocused ? '-140px' : '0', // Expand to the left\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 keyboardShortcutStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '0px',\n      flexShrink: 0,\n    };\n\n    const keyStyles: React.CSSProperties = {\n      border: '1px solid #2f2f2f',\n      borderRadius: '5px',\n      padding: '0px 3px',\n      height: '16px',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      fontFamily: \"'Work Sans', sans-serif\",\n      fontSize: '8px',\n      fontWeight: 400,\n      color: '#2f2f2f',\n      letterSpacing: '-0.08px',\n      lineHeight: '1.5',\n      minWidth: '16px',\n    };\n\n    const plusStyles: React.CSSProperties = {\n      fontFamily: \"'Work Sans', sans-serif\",\n      fontSize: '8px',\n      fontWeight: 400,\n      color: '#2f2f2f',\n      letterSpacing: '-0.08px',\n      lineHeight: '1.5',\n      padding: '0 2px',\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 showKeyboardShortcut = isHovered && !isFocused;\n    const showClearButton = isFocused;\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=\"#2f2f2f\" 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        {showKeyboardShortcut && (\n          <div style={keyboardShortcutStyles}>\n            <div style={keyStyles}>⌘</div>\n            <span style={plusStyles}>+</span>\n            <div style={keyStyles}>K</div>\n          </div>\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\nSearchGlobal.displayName = 'SearchGlobal';\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -17,6 +17,10 @@ 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

@@ -17,6 +17,10 @@ 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';
 
 /**