frey-ui 1.0.12 → 1.0.14

package/README.md

@@ -21,6 +21,18 @@ Frey UI is built with **WCAG 2.1 AA** compliance as a goal:
 
 Automated checks run through [`jest-axe`](https://github.com/nickcolley/jest-axe) in unit tests and [`@storybook/addon-a11y`](https://storybook.js.org/addons/@storybook/addon-a11y) in Storybook.
 
+### Test Environment Notes
+
+Unit tests run in JSDOM, which does not provide a full layout engine. Positioning assertions for portal overlays may require mocked geometry APIs (`getBoundingClientRect`, viewport size), and focus-trap behavior is validated at a best-effort level in unit tests.
+
+Browser E2E coverage is available via Playwright in `apps/playwright` for real-world overlay focus and positioning checks, and can be expanded as overlay scenarios grow.
+
+### Overlay Focus Management
+
+- `Dialog` uses the native `<dialog>` element and modal behavior.
+- `Popover` and `DropdownMenu` use `FloatingFocusManager` in modal mode.
+- When a `Popover` or `DropdownMenu` is open, keyboard focus is trapped inside the overlay and focus returns to the trigger when it closes.
+
 ## Installation
 
 ```bash
@@ -34,7 +46,7 @@ npm install frey-ui
 Import the stylesheet once in your app root (for example `App.tsx` or `layout.tsx`):
 
 ```tsx
-import 'frey-ui/style.css';
+import 'frey-ui/theme.css';
 ```
 
 ## Public Subpath Imports
@@ -74,6 +86,28 @@ pnpm install
 pnpm storybook
 ```
 
+## Brand Token Generator
+
+Frey UI includes a contributor CLI utility to generate CSS variable overrides from a small set of brand colors.
+
+```bash
+pnpm theme:tokens -- --primary "#0f62fe"
+```
+
+You can optionally override additional semantic colors:
+
+```bash
+pnpm theme:tokens -- --primary "#0f62fe" --success "#198038" --warning "#f1c21b" --error "#da1e28" --info "#0043ce" > brand-theme.css
+```
+
+Then load the generated CSS after `frey-ui/theme.css` in your application so your brand tokens override defaults.
+
+## Roadmap Notes
+
+- `Combobox / Autocomplete`: planned to support searchable long-option datasets with robust keyboard semantics.
+- `Drawer / Slide-over`: planned for mobile-first and dense settings workflows.
+- Accordion content animation: current grid-based animation uses `overflow: hidden` on the inner content wrapper, which can clip inner tooltips and extended focus rings. Prefer external tooltip portals and avoid relying on overflow-visible descendants inside accordion content.
+
 ## License
 
 [MIT](./LICENSE)

package/dist/cjs/Accordion/accordion.css

@@ -0,0 +1,93 @@
+.accordion_8f91be6e {
+  width: 100%;
+}
+
+.accordion_item_2d6abc63 {
+  border-bottom: 1px solid var(--frey-color-border-subtle);
+}
+
+.accordion_item_2d6abc63:last-child {
+  border-bottom: none;
+}
+
+.accordion_header_c9933178 {
+  display: flex;
+}
+
+.accordion_trigger_1c357514 {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 0;
+  font-weight: 500;
+  font-size: 0.875rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--frey-color-text);
+  transition: all 0.2s ease-in-out;
+  text-align: left;
+  outline: none;
+}
+
+.accordion_trigger_1c357514:hover {
+  text-decoration: underline;
+}
+
+.accordion_trigger_1c357514:focus-visible {
+  border-radius: var(--frey-radius-sm);
+  box-shadow:
+    0 0 0 2px var(--frey-color-surface),
+    0 0 0 4px var(--frey-color-focus-ring);
+}
+
+.accordion_chevron_c55f991e {
+  transition: transform 0.2s ease-in-out;
+  color: var(--frey-color-text-muted);
+}
+
+.accordion_chevron_open_44560e91 {
+  transform: rotate(180deg);
+}
+
+/* 
+  CSS Grid trick for animating height 
+  Transitions from 0fr to 1fr
+*/
+.accordion_content_wrapper_357a0679 {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.2s ease-out;
+}
+
+.accordion_content_wrapper_open_02841768 {
+  grid-template-rows: 1fr;
+}
+
+.accordion_content_wrapper_closed_58ee9305 {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.accordion_content_945ef079 {
+  overflow: hidden; /* Important for grid animation to hide contents when 0fr */
+  padding-bottom: 1rem;
+  color: var(--frey-color-text-muted);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+/* Remove padding if closed to avoid seeing whitespace inside 0fr */
+.accordion_content_wrapper_357a0679:not(.accordion_content_wrapper_open_02841768)
+.accordion_content_945ef079 {
+  padding-bottom: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .accordion_trigger_1c357514,
+  .accordion_chevron_c55f991e,
+  .accordion_content_wrapper_357a0679 {
+    transition: none;
+  }
+}

package/dist/cjs/Accordion/accordion.module.css.cjs

@@ -1,9 +1,10 @@
 'use client';
 'use strict';
+require('./accordion.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"accordion":"accordion_8f91be6e","accordion_item":"accordion_item_2d6abc63","accordion_header":"accordion_header_c9933178","accordion_trigger":"accordion_trigger_1c357514","accordion_chevron":"accordion_chevron_c55f991e","accordion_chevron_open":"accordion_chevron_open_44560e91","accordion_content_wrapper":"accordion_content_wrapper_357a0679","accordion_content_wrapper_open":"accordion_content_wrapper_open_02841768","accordion_content":"accordion_content_945ef079"};
+var styles = {"accordion":"accordion_8f91be6e","accordion_item":"accordion_item_2d6abc63","accordion_header":"accordion_header_c9933178","accordion_trigger":"accordion_trigger_1c357514","accordion_chevron":"accordion_chevron_c55f991e","accordion_chevron_open":"accordion_chevron_open_44560e91","accordion_content_wrapper":"accordion_content_wrapper_357a0679","accordion_content_wrapper_open":"accordion_content_wrapper_open_02841768","accordion_content_wrapper_closed":"accordion_content_wrapper_closed_58ee9305","accordion_content":"accordion_content_945ef079"};
 
 exports.default = styles;
 //# sourceMappingURL=accordion.module.css.cjs.map

package/dist/cjs/Accordion/index.cjs

@@ -6,9 +6,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
+var useControllableState = require('../hooks/useControllableState.cjs');
 var ChevronDownIcon = require('../Icons/ChevronDownIcon.cjs');
+var mergeRefs = require('../utils/mergeRefs.cjs');
 var accordion_module = require('./accordion.module.css.cjs');
 
+const ACCORDION_FOCUSABLE_SELECTOR = 'a[href], button, input, select, textarea, [tabindex]';
 const AccordionContext = React.createContext(null);
 function useAccordionContext() {
     const context = React.useContext(AccordionContext);
@@ -27,18 +30,13 @@ function useAccordionItemContext() {
 }
 const AccordionRoot = React.forwardRef(function Accordion({ type = 'single', value, defaultValue, onValueChange, className, ...props }, ref) {
     const defaultVal = defaultValue ?? (type === 'multiple' ? [] : '');
-    const isControlled = value !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultVal);
-    const currentValue = isControlled ? value : uncontrolledValue;
+    const [currentValue, setCurrentValue] = useControllableState.useControllableValue(value, defaultVal, onValueChange);
     const idPrefix = React.useId();
     const handleValueChange = React.useCallback((nextValue) => {
         let resolvedValue;
         if (type === 'single') {
             const valueAsStr = typeof currentValue === 'string' ? currentValue : '';
             resolvedValue = valueAsStr === nextValue ? '' : nextValue;
-            if (!isControlled) {
-                setUncontrolledValue(resolvedValue);
-            }
         }
         else {
             const valueAsArray = Array.isArray(currentValue) ? currentValue : [];
@@ -46,13 +44,10 @@ const AccordionRoot = React.forwardRef(function Accordion({ type = 'single', val
             const nextArrayValue = isSelected
                 ? valueAsArray.filter((v) => v !== nextValue)
                 : [...valueAsArray, nextValue];
-            if (!isControlled) {
-                setUncontrolledValue(nextArrayValue);
-            }
             resolvedValue = nextArrayValue;
         }
-        onValueChange?.(resolvedValue);
-    }, [type, currentValue, isControlled, onValueChange]);
+        setCurrentValue(resolvedValue);
+    }, [type, currentValue, setCurrentValue]);
     const contextValue = React.useMemo(() => ({
         type,
         value: currentValue,
@@ -83,8 +78,40 @@ AccordionTrigger.displayName = 'Accordion.Trigger';
 const AccordionContent = React.forwardRef(function AccordionContent({ className, children, ...props }, ref) {
     const { idPrefix } = useAccordionContext();
     const { value, isOpen } = useAccordionItemContext();
-    return (jsxRuntime.jsx("section", { ref: ref, id: `${idPrefix}-content-${value}`, "aria-labelledby": `${idPrefix}-trigger-${value}`, className: clsx(accordion_module.default.accordion_content_wrapper, {
-            [accordion_module.default.accordion_content_wrapper_open]: isOpen
+    const contentRef = React.useRef(null);
+    const mergedContentRef = React.useMemo(() => mergeRefs.mergeRefs(ref, contentRef), [ref]);
+    React.useEffect(() => {
+        const node = contentRef.current;
+        if (!node) {
+            return;
+        }
+        const focusableElements = node.querySelectorAll(ACCORDION_FOCUSABLE_SELECTOR);
+        focusableElements.forEach((element) => {
+            if (isOpen) {
+                const originalTabIndex = element.dataset.freyAccordionTabindex;
+                if (originalTabIndex === undefined) {
+                    return;
+                }
+                if (originalTabIndex === '') {
+                    element.removeAttribute('tabindex');
+                }
+                else {
+                    element.setAttribute('tabindex', originalTabIndex);
+                }
+                delete element.dataset.freyAccordionTabindex;
+                return;
+            }
+            if (element.dataset.freyAccordionTabindex !== undefined) {
+                return;
+            }
+            const currentTabIndex = element.getAttribute('tabindex');
+            element.dataset.freyAccordionTabindex = currentTabIndex ?? '';
+            element.setAttribute('tabindex', '-1');
+        });
+    }, [isOpen]);
+    return (jsxRuntime.jsx("section", { ref: mergedContentRef, id: `${idPrefix}-content-${value}`, "aria-labelledby": `${idPrefix}-trigger-${value}`, "aria-hidden": !isOpen, inert: !isOpen, className: clsx(accordion_module.default.accordion_content_wrapper, {
+            [accordion_module.default.accordion_content_wrapper_open]: isOpen,
+            [accordion_module.default.accordion_content_wrapper_closed]: !isOpen
         }), ...props, children: jsxRuntime.jsx("div", { className: clsx(accordion_module.default.accordion_content, className), children: children }) }));
 });
 AccordionContent.displayName = 'Accordion.Content';

package/dist/cjs/Alert/alert.css

@@ -0,0 +1,63 @@
+.alert_7c07a8c0 {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 0.375rem;
+  border: 1px solid;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+/* Variants */
+.alert-error_1de19fed {
+  color: var(--frey-color-error);
+  background-color: var(--frey-color-error-bg);
+  border-color: var(--frey-color-error-border);
+}
+
+.alert-success_38713508 {
+  color: var(--frey-color-success);
+  background-color: var(--frey-color-success-bg);
+  border-color: var(--frey-color-success-border);
+}
+
+.alert-warning_931806ff {
+  color: var(--frey-color-warning);
+  background-color: var(--frey-color-warning-bg);
+  border-color: var(--frey-color-warning-border);
+}
+
+.alert-info_183c5a6f {
+  color: var(--frey-color-info);
+  background-color: var(--frey-color-info-bg);
+  border-color: var(--frey-color-info-border);
+}
+
+.alert-icon_b4aefb94 {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.3125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.alert_icon_svg_1e243ee4 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.alert-content_17fc1725 {
+  flex: 1;
+  min-width: 0;
+}
+
+.alert-title_1260729c {
+  font-weight: 600;
+  margin: 0 0 0.25rem;
+}
+
+.alert-message_af65e832 {
+  margin: 0;
+}

package/dist/cjs/Alert/alert.module.css.cjs

@@ -1,5 +1,6 @@
 'use client';
 'use strict';
+require('./alert.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 

package/dist/cjs/Avatar/avatar.css

@@ -0,0 +1,107 @@
+.avatar_69ecdff2 {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  overflow: hidden;
+  user-select: none;
+  border-radius: 9999px;
+  border: 1px solid var(--frey-color-border-subtle);
+  background-color: var(--frey-color-surface-hover);
+  color: var(--frey-color-text);
+}
+
+.avatar_sm_a7074618 {
+  width: 2rem;
+  height: 2rem;
+}
+
+.avatar_md_b160648e {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.avatar_lg_470c9abd {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+
+.avatar_image_7164259b {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.avatar_fallback_f8d02776 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--frey-color-surface-active);
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.avatar_sm_a7074618 .avatar_fallback_f8d02776 {
+  font-size: 0.875rem;
+}
+
+.avatar_md_b160648e .avatar_fallback_f8d02776 {
+  font-size: 1rem;
+}
+
+.avatar_lg_470c9abd .avatar_fallback_f8d02776 {
+  font-size: 1.25rem;
+}
+
+/* Status Indicator */
+.avatar_status_indicator_3b42fd0a {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: 50%;
+  border: 2px solid var(--frey-color-surface);
+  background-color: var(--frey-color-border-subtle); /* default offline color */
+}
+
+/* Size adjustments for status indicator */
+.avatar_sm_a7074618 .avatar_status_indicator_3b42fd0a {
+  width: 0.5rem;
+  height: 0.5rem;
+  right: 0.1rem;
+  bottom: 0.1rem;
+}
+
+.avatar_md_b160648e .avatar_status_indicator_3b42fd0a {
+  width: 0.625rem;
+  height: 0.625rem;
+  right: 0.125rem;
+  bottom: 0.125rem;
+}
+
+.avatar_lg_470c9abd .avatar_status_indicator_3b42fd0a {
+  width: 0.875rem;
+  height: 0.875rem;
+  right: 0.15rem;
+  bottom: 0.15rem;
+}
+
+/* Status variants */
+.avatar_status_online_5ccf7e50 {
+  background-color: var(--frey-color-success);
+}
+
+.avatar_status_idle_f558cd51 {
+  background-color: var(--frey-color-warning);
+}
+
+.avatar_status_dnd_38c6115c {
+  background-color: var(--frey-color-error);
+}
+
+.avatar_status_offline_c805801a {
+  background-color: var(--frey-color-border-subtle);
+}

package/dist/cjs/Avatar/avatar.module.css.cjs

@@ -1,5 +1,6 @@
 'use client';
 'use strict';
+require('./avatar.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 

package/dist/cjs/Badge/badge.css

@@ -0,0 +1,75 @@
+.badge_bce67ff7 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--frey-radius-full);
+  border: 1px solid transparent;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.badge-sm_dc3de36d {
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+.badge-md_d88ccac8 {
+  padding: 0.25rem 0.625rem;
+  font-size: 0.8125rem;
+}
+
+.badge-subtle-neutral_dc27f7b9 {
+  background-color: var(--frey-color-surface-subtle);
+  color: var(--frey-color-text-primary);
+  border-color: var(--frey-color-border-subtle);
+}
+
+.badge-subtle-info_9088d0b2 {
+  background-color: var(--frey-color-info-bg);
+  color: var(--frey-color-info);
+  border-color: var(--frey-color-info-border);
+}
+
+.badge-subtle-success_a8938864 {
+  background-color: var(--frey-color-success-bg);
+  color: var(--frey-color-success);
+  border-color: var(--frey-color-success-border);
+}
+
+.badge-subtle-warning_9b7640b7 {
+  background-color: var(--frey-color-warning-bg);
+  color: var(--frey-color-warning);
+  border-color: var(--frey-color-warning-border);
+}
+
+.badge-subtle-error_e6426ff9 {
+  background-color: var(--frey-color-error-bg);
+  color: var(--frey-color-error);
+  border-color: var(--frey-color-error-border);
+}
+
+.badge-solid-neutral_ac7e9431 {
+  background-color: var(--frey-color-text-primary);
+  color: var(--frey-color-surface);
+}
+
+.badge-solid-info_ecba7d59 {
+  background-color: var(--frey-color-info);
+  color: var(--frey-palette-white);
+}
+
+.badge-solid-success_28241077 {
+  background-color: var(--frey-color-success);
+  color: var(--frey-palette-white);
+}
+
+.badge-solid-warning_d28d237d {
+  background-color: var(--frey-color-warning);
+  color: var(--frey-palette-black);
+}
+
+.badge-solid-error_e87eabc7 {
+  background-color: var(--frey-color-error);
+  color: var(--frey-palette-white);
+}

package/dist/cjs/Badge/badge.module.css.cjs

@@ -1,5 +1,6 @@
 'use client';
 'use strict';
+require('./badge.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 

package/dist/cjs/Box/box.css

@@ -0,0 +1,3 @@
+.box_01090d66 {
+  box-sizing: border-box;
+}

package/dist/cjs/Box/box.module.css.cjs

@@ -1,5 +1,6 @@
 'use client';
 'use strict';
+require('./box.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 

package/dist/cjs/Breadcrumbs/breadcrumbs.css

@@ -0,0 +1,34 @@
+.breadcrumbs_aa9de1de {
+  --frey-breadcrumb-separator: '/';
+}
+
+.breadcrumbs_list_6dce73e5 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.breadcrumbs_item_b875e8cd {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.breadcrumbs_item_b875e8cd + .breadcrumbs_item_b875e8cd::before {
+  content: var(--frey-breadcrumb-separator, '/');
+  margin-inline: var(--frey-space-2);
+  color: var(--frey-color-text-muted);
+}
+
+.breadcrumbs_link_c337ab74 {
+  white-space: nowrap;
+}
+
+.breadcrumbs_current_6e6bd611 {
+  color: var(--frey-color-text);
+  font-weight: 500;
+  white-space: nowrap;
+}

package/dist/cjs/Breadcrumbs/breadcrumbs.module.css.cjs

@@ -1,5 +1,6 @@
 'use client';
 'use strict';
+require('./breadcrumbs.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 

package/dist/cjs/Button/button.css

@@ -0,0 +1,112 @@
+.button_e3685226 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.5;
+  border-radius: 0.375rem;
+  border: none;
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    background-color 0.2s,
+    color 0.2s,
+    border-color 0.2s,
+    opacity 0.2s;
+  user-select: none;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+
+.button_e3685226:focus-visible {
+  outline: 2px solid var(--frey-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Sizes */
+.button-sm_b760748b {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
+.button-md_c5122fd1 {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+
+.button-lg_96785747 {
+  padding: 0.625rem 1.25rem;
+  font-size: 1rem;
+}
+
+/* Primary */
+.button-primary_78ca6a16 {
+  background-color: var(--frey-button-primary-bg);
+  color: var(--frey-button-primary-text);
+}
+
+.button-primary_78ca6a16:hover:not(:disabled) {
+  background-color: var(--frey-button-primary-hover);
+}
+
+/* Secondary */
+.button-secondary_a67ce4ae {
+  background-color: transparent;
+  color: var(--frey-button-secondary-text);
+  border: 1px solid var(--frey-button-secondary-border);
+}
+
+.button-secondary_a67ce4ae:hover:not(:disabled) {
+  background-color: var(--frey-button-secondary-hover-bg);
+}
+
+/* Ghost */
+.button-ghost_406aeb5f {
+  background-color: transparent;
+  color: var(--frey-button-ghost-text);
+}
+
+.button-ghost_406aeb5f:hover:not(:disabled) {
+  background-color: var(--frey-button-ghost-hover-bg);
+}
+
+/* Destructive */
+.button-destructive_f9faa5ef {
+  background-color: var(--frey-button-destructive-bg);
+  color: var(--frey-button-destructive-text);
+}
+
+.button-destructive_f9faa5ef:hover:not(:disabled) {
+  background-color: var(--frey-button-destructive-hover);
+}
+
+/* Disabled */
+.button_e3685226:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Loading */
+.button-loading_0d5b6d36 {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.spinner_9bcc821b {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spin_c3a3352d 0.6s linear infinite;
+}
+
+@keyframes spin_c3a3352d {
+  to {
+    transform: rotate(360deg);
+  }
+}