frey-ui 1.0.12 → 1.0.13

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,80 @@
+.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_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;
+}

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

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

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);
+  }
+}

package/dist/cjs/Button/button.module.css.cjs

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

package/dist/cjs/Button/index.cjs

@@ -6,6 +6,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
+var slot = require('../utils/slot.cjs');
 var button_module = require('./button.module.css.cjs');
 
 const VariantClassMap = {
@@ -19,16 +20,34 @@ const SizeClassMap = {
     md: button_module.default['button-md'],
     lg: button_module.default['button-lg']
 };
-const Button = React.forwardRef(function Button({ as, variant = 'primary', size = 'md', loading = false, disabled = false, className, style, children, onClick, ...restProps }, ref) {
-    const Component = (as ?? 'button');
-    const isButton = (as ?? 'button') === 'button';
-    return (jsxRuntime.jsxs(Component, { ref: ref, className: clsx(button_module.default.button, VariantClassMap[variant], SizeClassMap[size], { [button_module.default['button-loading']]: loading }, className), style: style, disabled: isButton ? disabled || loading : undefined, "aria-disabled": !isButton && (disabled || loading) ? true : undefined, type: isButton ? 'button' : undefined, "aria-busy": loading || undefined, onClick: (e) => {
-            if (!isButton && (disabled || loading)) {
-                e.preventDefault();
-                return;
-            }
-            onClick?.(e);
-        }, ...restProps, children: [loading && jsxRuntime.jsx("span", { className: button_module.default.spinner, "aria-hidden": 'true' }), children] }));
+const Button = React.forwardRef(function Button({ asChild = false, variant = 'primary', size = 'md', loading = false, disabled = false, className, style, children, type, onClick, ...restProps }, ref) {
+    const isDisabled = disabled || loading;
+    const combinedClassName = clsx(button_module.default.button, VariantClassMap[variant], SizeClassMap[size], { [button_module.default['button-loading']]: loading }, className);
+    const commonProps = {
+        className: combinedClassName,
+        style,
+        'aria-busy': loading || undefined
+    };
+    const handleClick = (event) => {
+        if (isDisabled) {
+            event.preventDefault();
+            return;
+        }
+        onClick?.(event);
+    };
+    if (asChild) {
+        if (!React.isValidElement(children)) {
+            throw new Error('Button with asChild expects a single valid React element child.');
+        }
+        const childElement = children;
+        const slotChild = loading
+            ? React.cloneElement(childElement, {
+                children: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: button_module.default.spinner, "aria-hidden": 'true' }), childElement.props.children] }))
+            })
+            : childElement;
+        return (jsxRuntime.jsx(slot.Slot, { ...restProps, ref: ref, ...commonProps, "aria-disabled": isDisabled || undefined, "data-disabled": isDisabled ? true : undefined, onClick: handleClick, children: slotChild }));
+    }
+    return (jsxRuntime.jsxs("button", { ...restProps, ref: ref, ...commonProps, disabled: isDisabled, type: type ?? 'button', onClick: handleClick, children: [loading && jsxRuntime.jsx("span", { className: button_module.default.spinner, "aria-hidden": 'true' }), children] }));
 });
 Button.displayName = 'Button';
 

package/dist/cjs/Card/card.css

@@ -0,0 +1,37 @@
+.card_7757267c {
+  background-color: var(--frey-color-surface);
+  border: 1px solid var(--frey-color-border-subtle);
+  border-radius: var(--frey-radius-lg);
+  box-shadow: var(--frey-shadow-sm);
+  color: var(--frey-color-text);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.card_header_e87ce16b {
+  padding: 1.5rem 1.5rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.card_title_fbeee077 {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--frey-color-text-title);
+}
+
+.card_content_7f98971d {
+  padding: 1.5rem;
+  flex: 1;
+}
+
+.card_footer_198e5d93 {
+  padding: 0 1.5rem 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}

package/dist/cjs/Card/card.module.css.cjs

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