@common-origin/design-system 2.19.0 → 2.21.0

package/dist/components/molecules/SearchField/SearchField.mjs

@@ -0,0 +1,340 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect, useMemo } from 'react';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
+import { ListItem } from '../List/ListItem.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+import { rowStates } from '../../../lib/styleUtils.mjs';
+
+var semantic = tokens.semantic,
+  component = tokens.component;
+var StyledSearchContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SearchField__StyledSearchContainer",
+  componentId: "sc-qhz9i8-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+var StyledInputWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SearchField__StyledInputWrapper",
+  componentId: "sc-qhz9i8-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  /* The field's height comes from size.control.lg as a minimum, matching the other fields\n     (decision 0034); the padding only matters if the content grows past it */\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  transition: border-color ", " ", ", outline ", " ", ";\n  \n  ", "\n  \n  ", "\n  \n  &:hover:not([data-disabled='true']) {\n    border-color: ", ";\n  }\n"])), semantic.space[200], semantic.size.control.lg, semantic.space[200], semantic.space[300], component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, component.input["default"].borderRadius, semantic.motion.duration.moderate, semantic.motion.easing.standard, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (props) {
+  return props.$isFocused && "\n    border-color: ".concat(component.input.focus.borderColor, ";\n    outline: ").concat(component.input.focus.outline, ";\n    outline-offset: ").concat(semantic.border.focusOffset, ";\n  ");
+}, function (props) {
+  return props.$disabled && "\n    background-color: ".concat(component.input.disabled.backgroundColor, ";\n    border-color: ").concat(component.input.disabled.borderColor, ";\n    cursor: not-allowed;\n  ");
+}, component.input.hover.borderColor);
+var StyledInput = /*#__PURE__*/styled.input.withConfig({
+  displayName: "SearchField__StyledInput",
+  componentId: "sc-qhz9i8-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  flex: 1;\n  border: none;\n  background: transparent;\n  font: ", ";\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n    /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n    opacity: 1;\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), semantic.typography.body, semantic.color.text["default"], component.input.placeholder.textColor, semantic.color.text.disabled);
+var StyledSuggestionsList = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "SearchField__StyledSuggestionsList",
+  componentId: "sc-qhz9i8-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  top: calc(100% + ", ");\n  left: 0;\n  right: 0;\n  max-height: ", ";\n  overflow-y: auto;\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  list-style: none;\n  padding: ", " 0;\n  margin: 0;\n  z-index: ", ";\n\n  /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n     treatment (decision 0029). Its row is the option's first child. While pressed, the row's own\n     pressed state shows (decision 0030) */\n  & > [data-highlighted] > :first-child:not(:active) {\n    background-color: ", ";\n  }\n"])), semantic.space[100], tokens.semantic.size.menu.maxHeight, semantic.surface.raised, semantic.border.width.thin, semantic.color.border["default"], semantic.radius.md, semantic.elevation.floating, semantic.space[100], semantic.layer.dropdown, rowStates.unselected.hover.background);
+var StyledSectionHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SearchField__StyledSectionHeader",
+  componentId: "sc-qhz9i8-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  letter-spacing: ", ";\n"], ["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  letter-spacing: ", ";\n"])), semantic.space[200], semantic.space[300], tokens.component.searchField.sectionHeader.typography, semantic.color.text.muted, tokens.component.searchField.sectionHeader.letterSpacing);
+var debounce = function debounce(func, wait) {
+  var timeout = null;
+  return function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+      args[_i] = arguments[_i];
+    }
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      return func.apply(void 0, args);
+    }, wait);
+  };
+};
+/**
+ * SearchField component with autocomplete and recent searches
+ *
+ * Provides intelligent search with debouncing, keyboard navigation,
+ * suggestions, and recent search history. Fully accessible with ARIA.
+ *
+ * @example
+ * ```tsx
+ * const [search, setSearch] = useState('')
+ * const [suggestions] = useState([
+ *   { id: '1', label: 'Apple', category: 'Fruit' },
+ *   { id: '2', label: 'Banana', category: 'Fruit' }
+ * ])
+ *
+ * <SearchField
+ *   value={search}
+ *   onChange={setSearch}
+ *   suggestions={suggestions}
+ *   recentSearches={['coffee', 'tea']}
+ *   onSuggestionSelect={(item) => console.log('Selected:', item)}
+ * />
+ * ```
+ */
+var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var value = _a.value,
+    onChange = _a.onChange,
+    _b = _a.suggestions,
+    suggestions = _b === void 0 ? [] : _b,
+    _c = _a.showRecentSearches,
+    showRecentSearches = _c === void 0 ? true : _c,
+    _d = _a.recentSearches,
+    recentSearches = _d === void 0 ? [] : _d,
+    onSuggestionSelect = _a.onSuggestionSelect,
+    onClearRecentSearches = _a.onClearRecentSearches,
+    _e = _a.debounceMs,
+    debounceMs = _e === void 0 ? 300 : _e,
+    _f = _a.placeholder,
+    placeholder = _f === void 0 ? 'Search...' : _f,
+    _g = _a.disabled,
+    disabled = _g === void 0 ? false : _g,
+    _h = _a.loading,
+    loading = _h === void 0 ? false : _h,
+    _j = _a["aria-label"],
+    ariaLabel = _j === void 0 ? 'Search' : _j,
+    dataTestId = _a["data-testid"],
+    inputProps = __rest(_a, ["value", "onChange", "suggestions", "showRecentSearches", "recentSearches", "onSuggestionSelect", "onClearRecentSearches", "debounceMs", "placeholder", "disabled", "loading", 'aria-label', 'data-testid']);
+  var _k = useState(false),
+    isFocused = _k[0],
+    setIsFocused = _k[1];
+  var _l = useState(false),
+    showSuggestions = _l[0],
+    setShowSuggestions = _l[1];
+  var _m = useState(-1),
+    highlightedIndex = _m[0],
+    setHighlightedIndex = _m[1];
+  var _o = useState(value);
+    _o[0];
+    var setDebouncedValue = _o[1];
+  var inputRef = useRef(null);
+  var listRef = useRef(null);
+  // Combine refs
+  useEffect(function () {
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(inputRef.current);
+      } else {
+        ref.current = inputRef.current;
+      }
+    }
+  }, [ref]);
+  // Debounced search
+  var debouncedOnChange = useMemo(function () {
+    return debounce(function (newValue) {
+      setDebouncedValue(newValue);
+    }, debounceMs);
+  }, [debounceMs]);
+  useEffect(function () {
+    debouncedOnChange(value);
+  }, [value, debouncedOnChange]);
+  // Combined list of suggestions and recent searches
+  var displayItems = useMemo(function () {
+    var items = [];
+    if (value.trim()) {
+      // Show matching suggestions
+      suggestions.forEach(function (s) {
+        return items.push({
+          type: 'suggestion',
+          data: s
+        });
+      });
+    } else if (showRecentSearches && recentSearches.length > 0) {
+      // Show recent searches when empty
+      recentSearches.forEach(function (r) {
+        return items.push({
+          type: 'recent',
+          data: r
+        });
+      });
+      if (onClearRecentSearches) {
+        items.push({
+          type: 'clear',
+          data: 'clear'
+        });
+      }
+    }
+    return items;
+  }, [value, suggestions, recentSearches, showRecentSearches, onClearRecentSearches]);
+  var handleInputChange = function handleInputChange(e) {
+    var newValue = e.target.value;
+    onChange(newValue);
+    setShowSuggestions(true);
+    setHighlightedIndex(-1);
+  };
+  var handleFocus = function handleFocus(e) {
+    var _a;
+    setIsFocused(true);
+    setShowSuggestions(true);
+    (_a = inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+  };
+  var handleBlur = function handleBlur(e) {
+    var _a;
+    // Delay to allow click events on suggestions
+    setTimeout(function () {
+      setIsFocused(false);
+      setShowSuggestions(false);
+      setHighlightedIndex(-1);
+    }, 200);
+    (_a = inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+  };
+  var handleSuggestionClick = function handleSuggestionClick(item) {
+    var _a;
+    if (item.type === 'clear') {
+      onClearRecentSearches === null || onClearRecentSearches === void 0 ? void 0 : onClearRecentSearches();
+      return;
+    }
+    var suggestion = item.data;
+    if (typeof suggestion === 'string') {
+      onChange(suggestion);
+      onSuggestionSelect === null || onSuggestionSelect === void 0 ? void 0 : onSuggestionSelect(suggestion);
+    } else {
+      onChange(suggestion.label);
+      onSuggestionSelect === null || onSuggestionSelect === void 0 ? void 0 : onSuggestionSelect(suggestion);
+    }
+    setShowSuggestions(false);
+    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  };
+  var handleClear = function handleClear() {
+    var _a;
+    onChange('');
+    setShowSuggestions(false);
+    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    var _a;
+    if (!showSuggestions || displayItems.length === 0) return;
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setHighlightedIndex(function (prev) {
+          return prev < displayItems.length - 1 ? prev + 1 : prev;
+        });
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setHighlightedIndex(function (prev) {
+          return prev > 0 ? prev - 1 : -1;
+        });
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (highlightedIndex >= 0 && highlightedIndex < displayItems.length) {
+          handleSuggestionClick(displayItems[highlightedIndex]);
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        setShowSuggestions(false);
+        setHighlightedIndex(-1);
+        break;
+    }
+    (_a = inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+  };
+  // Scroll highlighted item into view
+  useEffect(function () {
+    var _a;
+    if (highlightedIndex >= 0 && listRef.current) {
+      var items = listRef.current.querySelectorAll('li');
+      (_a = items[highlightedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+  }, [highlightedIndex]);
+  var showClearButton = value.length > 0 && !disabled;
+  var hasItems = displayItems.length > 0;
+  return jsxs(StyledSearchContainer, {
+    "$isFocused": isFocused,
+    "$disabled": disabled,
+    "data-testid": dataTestId,
+    children: [jsxs(StyledInputWrapper, {
+      "$isFocused": isFocused,
+      "$disabled": disabled,
+      "data-disabled": disabled,
+      children: [jsx(Icon, {
+        name: "search",
+        size: "sm",
+        iconColor: "subdued"
+      }), jsx(StyledInput, __assign({
+        ref: inputRef,
+        type: "text",
+        value: value,
+        onChange: handleInputChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        placeholder: placeholder,
+        disabled: disabled,
+        "aria-label": ariaLabel,
+        "aria-autocomplete": "list",
+        "aria-controls": showSuggestions && hasItems ? 'search-suggestions' : undefined,
+        "aria-expanded": showSuggestions && hasItems,
+        "aria-activedescendant": highlightedIndex >= 0 ? "suggestion-".concat(highlightedIndex) : undefined,
+        role: "combobox"
+      }, inputProps)), loading && jsx(Icon, {
+        name: "refresh",
+        size: "sm",
+        iconColor: "subdued",
+        "aria-label": "Loading"
+      }), showClearButton && jsx(IconButton, {
+        iconName: "close",
+        size: "small",
+        variant: "naked",
+        onClick: handleClear,
+        "aria-label": "Clear search",
+        tabIndex: -1
+      })]
+    }), showSuggestions && hasItems && jsxs(StyledSuggestionsList, {
+      ref: listRef,
+      id: "search-suggestions",
+      role: "listbox",
+      children: [!value.trim() && showRecentSearches && recentSearches.length > 0 && jsx(StyledSectionHeader, {
+        children: "Recent Searches"
+      }), displayItems.map(function (item, index) {
+        if (item.type === 'clear') {
+          return jsx(ListItem, {
+            role: "option",
+            primary: "Clear recent searches",
+            interactive: true,
+            spacing: "compact",
+            onClick: function onClick() {
+              return handleSuggestionClick(item);
+            },
+            onKeyDown: function onKeyDown(e) {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handleSuggestionClick(item);
+              }
+            }
+          }, "clear");
+        }
+        var suggestion = item.data;
+        var isString = typeof suggestion === 'string';
+        var label = isString ? suggestion : suggestion.label;
+        var description = !isString ? suggestion.description : undefined;
+        return jsx(ListItem, {
+          id: "suggestion-".concat(index),
+          role: "option",
+          "aria-selected": index === highlightedIndex,
+          primary: label,
+          secondary: description,
+          icon: item.type === 'recent' ? jsx(Icon, {
+            name: "refresh",
+            size: "xs"
+          }) : undefined,
+          interactive: true,
+          "data-highlighted": index === highlightedIndex || undefined,
+          spacing: "compact",
+          onClick: function onClick() {
+            return handleSuggestionClick(item);
+          }
+        }, isString ? suggestion : suggestion.id);
+      })]
+    })]
+  });
+});
+SearchField.displayName = 'SearchField';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+export { SearchField };
+//# sourceMappingURL=SearchField.mjs.map

package/dist/components/molecules/SearchField/SearchField.mjs.map

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

package/dist/components/molecules/SearchField/index.d.mts

@@ -0,0 +1,2 @@
+export { SearchField } from './SearchField.mjs';
+export type { SearchFieldProps, Suggestion } from './SearchField.mjs';

package/dist/components/molecules/Sheet/Sheet.d.mts

@@ -0,0 +1,96 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the Sheet component
+ */
+export interface SheetProps {
+    /**
+     * Whether the sheet is open
+     */
+    isOpen: boolean;
+    /**
+     * Callback fired when the sheet should close
+     */
+    onClose: () => void;
+    /**
+     * Position of the sheet
+     * @default 'right'
+     */
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Variant of the sheet
+     * - 'sheet': Full height/width edge-to-edge
+     * - 'drawer': Floating with rounded corners and margin
+     * @default 'sheet'
+     */
+    variant?: 'sheet' | 'drawer';
+    /**
+     * Width of the sheet (for left/right positions)
+     * @default semantic.size.overlay.sm (25rem, 400px)
+     */
+    width?: string;
+    /**
+     * Height of the sheet (for top/bottom positions)
+     * @default semantic.size.overlay.sm (25rem, 400px)
+     */
+    height?: string;
+    /**
+     * Content to display in the sheet
+     */
+    children?: ReactNode;
+    /**
+     * Whether clicking the overlay should close the sheet
+     * @default true
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * Whether pressing Escape should close the sheet
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Optional title for the sheet (improves accessibility)
+     */
+    title?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+    /**
+     * Accessible label for the sheet
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element describing the sheet
+     */
+    'aria-describedby'?: string;
+}
+/**
+ * Sheet component for side panels and drawers
+ *
+ * Provides a sliding panel that appears from any edge of the screen.
+ * Can be used for navigation menus, filters, forms, or additional content.
+ *
+ * @example
+ * ```tsx
+ * // Right-positioned sheet (default)
+ * <Sheet isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <h2>Sheet Content</h2>
+ *   <p>Your content here</p>
+ * </Sheet>
+ *
+ * // Drawer variant from bottom
+ * <Sheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   position="bottom"
+ *   variant="drawer"
+ *   height="60vh"
+ * >
+ *   <h2>Mobile Menu</h2>
+ * </Sheet>
+ * ```
+ */
+export declare const Sheet: {
+    ({ isOpen, onClose, position, variant, width, height, children, closeOnOverlayClick, closeOnEscape, title, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: SheetProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};