@common-origin/design-system 2.19.0 → 2.20.0

package/dist/components/molecules/PageTitle/PageTitle.mjs

@@ -0,0 +1,77 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
+import { Stack } from '../../atoms/Stack/Stack.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+var PageTitleStyled = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "PageTitle__PageTitleStyled",
+  componentId: "sc-16h256f-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"
+/**
+ * @deprecated PageTitle is a leftover from the personal site (its back button always links to `/music`)
+ * and will be removed in the next major version. Compose a page title from `Typography` in a `Stack`:
+ *
+ * ```tsx
+ * <Stack direction="column" gap="md">
+ *   <Typography variant="h1">{title}</Typography>
+ *   <Typography variant="caption" color="subdued">{subtitle}</Typography>
+ * </Stack>
+ * ```
+ *
+ * For a back link, add an `IconButton` with your own `url` and `aria-label`.
+ */])), tokens.semantic.space[600], function (_a) {
+  var $hasBackButton = _a.$hasBackButton;
+  return $hasBackButton ? tokens.semantic.space[0] : tokens.semantic.space[1200];
+});
+/**
+ * @deprecated PageTitle is a leftover from the personal site (its back button always links to `/music`)
+ * and will be removed in the next major version. Compose a page title from `Typography` in a `Stack`:
+ *
+ * ```tsx
+ * <Stack direction="column" gap="md">
+ *   <Typography variant="h1">{title}</Typography>
+ *   <Typography variant="caption" color="subdued">{subtitle}</Typography>
+ * </Stack>
+ * ```
+ *
+ * For a back link, add an `IconButton` with your own `url` and `aria-label`.
+ */
+var PageTitle = function PageTitle(_a) {
+  var title = _a.title,
+    _b = _a.hasBackButton,
+    hasBackButton = _b === void 0 ? false : _b,
+    subtitle = _a.subtitle;
+  return jsxs(PageTitleStyled, {
+    "$hasBackButton": hasBackButton,
+    children: [hasBackButton && jsx(IconButton, {
+      iconName: 'back',
+      size: 'large',
+      variant: 'naked',
+      url: '/music',
+      "aria-label": 'Go back to music page'
+    }), jsxs(Stack, {
+      direction: 'column',
+      gap: "md",
+      children: [jsx(Typography, {
+        variant: "h1",
+        children: title
+      }), subtitle && jsx(Typography, {
+        variant: 'caption',
+        color: 'subdued',
+        children: subtitle
+      })]
+    })]
+  });
+};
+var templateObject_1;
+
+export { PageTitle };
+//# sourceMappingURL=PageTitle.mjs.map

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

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

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

@@ -0,0 +1 @@
+export * from './PageTitle.mjs';

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

@@ -0,0 +1,55 @@
+import { InputHTMLAttributes } from 'react';
+/**
+ * Props for the PasswordField component
+ */
+export interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /**
+     * Label text for the input
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the input
+     */
+    helperText?: string;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Whether the field is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the input is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Unique identifier for the input
+     * Generated automatically if not provided
+     */
+    id?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+    /**
+     * Whether to show the password visibility toggle button
+     * @default true
+     */
+    showToggle?: boolean;
+}
+/**
+ * PasswordField component for secure password input with visibility toggle
+ *
+ * @example
+ * ```tsx
+ * <PasswordField
+ *   label="Password"
+ *   helperText="Must be at least 8 characters"
+ *   required
+ * />
+ * ```
+ */
+export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/molecules/PasswordField/PasswordField.mjs

@@ -0,0 +1,146 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useState } from 'react';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { StyledInputBase } from '../TextField/InputBase.mjs';
+import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+var field = tokens.component.field;
+// Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
+var space = tokens.semantic.space;
+var StyledFieldContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PasswordField__StyledFieldContainer",
+  componentId: "sc-1p15zk0-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), space[200]);
+var StyledLabel = /*#__PURE__*/styled.label.withConfig({
+  displayName: "PasswordField__StyledLabel",
+  componentId: "sc-1p15zk0-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), space[100], field.label.typography, field.label.color, field.label.colorDisabled);
+var StyledRequiredIndicator = /*#__PURE__*/styled.span.withConfig({
+  displayName: "PasswordField__StyledRequiredIndicator",
+  componentId: "sc-1p15zk0-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n"])), field.requiredIndicator.color, field.requiredIndicator.fontWeight);
+var StyledHelperText = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PasswordField__StyledHelperText",
+  componentId: "sc-1p15zk0-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), field.helperText.typography, function (_a) {
+  var $hasError = _a.$hasError;
+  return $hasError ? field.helperText.colorError : field.helperText.color;
+});
+var StyledInputWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PasswordField__StyledInputWrapper",
+  componentId: "sc-1p15zk0-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+var StyledToggleButton = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PasswordField__StyledToggleButton",
+  componentId: "sc-1p15zk0-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n"], ["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n"
+/**
+ * PasswordField component for secure password input with visibility toggle
+ *
+ * @example
+ * ```tsx
+ * <PasswordField
+ *   label="Password"
+ *   helperText="Must be at least 8 characters"
+ *   required
+ * />
+ * ```
+ */])), tokens.semantic.space[200]);
+/**
+ * PasswordField component for secure password input with visibility toggle
+ *
+ * @example
+ * ```tsx
+ * <PasswordField
+ *   label="Password"
+ *   helperText="Must be at least 8 characters"
+ *   required
+ * />
+ * ```
+ */
+var PasswordField = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var label = _a.label,
+    helperText = _a.helperText,
+    error = _a.error,
+    _b = _a.required,
+    required = _b === void 0 ? false : _b,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    providedId = _a.id,
+    dataTestId = _a["data-testid"],
+    _d = _a.showToggle,
+    showToggle = _d === void 0 ? true : _d,
+    inputProps = __rest(_a, ["label", "helperText", "error", "required", "disabled", "id", 'data-testid', "showToggle"]);
+  // Generate unique ID if not provided
+  var generatedId = useId();
+  var id = providedId || generatedId;
+  // Password visibility state
+  var _e = useState(false),
+    showPassword = _e[0],
+    setShowPassword = _e[1];
+  // IDs for ARIA relationships
+  var errorId = error ? "".concat(id, "-error") : undefined;
+  var helperId = helperText && !error ? "".concat(id, "-helper") : undefined;
+  var describedBy = [errorId, helperId].filter(Boolean).join(' ') || undefined;
+  var hasError = Boolean(error);
+  var togglePasswordVisibility = function togglePasswordVisibility() {
+    setShowPassword(!showPassword);
+  };
+  return jsxs(StyledFieldContainer, {
+    children: [label && jsxs(StyledLabel, {
+      htmlFor: id,
+      "data-disabled": disabled,
+      children: [label, required && jsx(StyledRequiredIndicator, {
+        "aria-label": "required",
+        children: "*"
+      })]
+    }), jsxs(StyledInputWrapper, {
+      children: [jsx(StyledInputBase, __assign({
+        ref: ref,
+        id: id,
+        type: showPassword ? 'text' : 'password',
+        disabled: disabled,
+        required: required,
+        "aria-required": required,
+        "aria-invalid": hasError,
+        "aria-describedby": describedBy,
+        "$hasError": hasError,
+        "$disabled": disabled,
+        "data-testid": dataTestId,
+        style: {
+          paddingRight: showToggle ? '3rem' : undefined
+        }
+      }, inputProps)), showToggle && jsx(StyledToggleButton, {
+        children: jsx(IconButton, {
+          variant: "naked",
+          size: "small",
+          iconName: showPassword ? 'viewHide' : 'view',
+          onClick: togglePasswordVisibility,
+          disabled: disabled,
+          "aria-label": showPassword ? 'Hide password' : 'Show password',
+          "aria-pressed": showPassword,
+          type: "button",
+          tabIndex: -1
+        })
+      })]
+    }), error && jsx(StyledHelperText, {
+      id: errorId,
+      role: "alert",
+      "aria-live": "polite",
+      "$hasError": true,
+      children: error
+    }), helperText && !error && jsx(StyledHelperText, {
+      id: helperId,
+      children: helperText
+    })]
+  });
+});
+PasswordField.displayName = 'PasswordField';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { PasswordField };
+//# sourceMappingURL=PasswordField.mjs.map

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

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

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

@@ -0,0 +1,2 @@
+export { PasswordField } from './PasswordField.mjs';
+export type { PasswordFieldProps } from './PasswordField.mjs';

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

@@ -0,0 +1,108 @@
+import { InputHTMLAttributes } from 'react';
+/**
+ * Suggestion item for autocomplete
+ */
+export interface Suggestion {
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Display text
+     */
+    label: string;
+    /**
+     * Optional secondary text
+     */
+    description?: string;
+    /**
+     * Optional category for grouping
+     */
+    category?: string;
+}
+/**
+ * Props for the SearchField component
+ */
+export interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    /**
+     * Current search value
+     */
+    value: string;
+    /**
+     * Callback when value changes
+     */
+    onChange: (value: string) => void;
+    /**
+     * Suggestions to display
+     */
+    suggestions?: Suggestion[];
+    /**
+     * Whether to show recent searches
+     * @default true
+     */
+    showRecentSearches?: boolean;
+    /**
+     * Array of recent search terms
+     */
+    recentSearches?: string[];
+    /**
+     * Callback when a suggestion is selected
+     */
+    onSuggestionSelect?: (suggestion: Suggestion | string) => void;
+    /**
+     * Callback to clear recent searches
+     */
+    onClearRecentSearches?: () => void;
+    /**
+     * Debounce delay in milliseconds
+     * @default 300
+     */
+    debounceMs?: number;
+    /**
+     * Placeholder text
+     * @default 'Search...'
+     */
+    placeholder?: string;
+    /**
+     * Whether the field is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Accessible label
+     */
+    'aria-label'?: string;
+    /**
+     * Test identifier
+     */
+    'data-testid'?: string;
+}
+/**
+ * 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)}
+ * />
+ * ```
+ */
+export declare const SearchField: import("react").ForwardRefExoticComponent<SearchFieldProps & import("react").RefAttributes<HTMLInputElement>>;