@ifhover/leaf-ui 0.5.0 → 0.6.0

package/dist/esm/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge/badge.js","sources":["../../../src/badge/badge.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useRef } from 'react';\nimport { classes } from '../shared/classes';\nimport { useContentTransition } from '../shared/presence';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  count?: number | string;\n  max?: number;\n  showZero?: boolean;\n  dot?: boolean;\n  status?: 'success' | 'warning' | 'error' | 'info' | 'default';\n  text?: ReactNode;\n  color?: string;\n}\nexport function Badge({\n  count,\n  max = 99,\n  showZero = false,\n  dot = false,\n  status,\n  text,\n  color,\n  children,\n  className,\n  style,\n  ...props\n}: BadgeProps) {\n  const number = useRef<HTMLSpanElement>(null);\n  const hasCount = count !== undefined && count !== '' && (count !== 0 || showZero);\n  const visible = dot || status || hasCount;\n  const display = typeof count === 'number' && count > max ? `${max}+` : count;\n  useContentTransition(number, display ?? '');\n  return (\n    <span\n      {...props}\n      className={classes('leaf-badge', children != null && 'leaf-badge--attached', className)}\n      data-status={status}\n      style={{ ...(color ? { '--leaf-badge-color': color } : {}), ...style }}\n    >\n      {children}\n      {visible && (\n        <span\n          className={classes(\n            'leaf-badge__indicator',\n            (dot || status) && 'leaf-badge__indicator--dot',\n          )}\n          role=\"status\"\n          aria-label={\n            props['aria-label'] ??\n            (typeof text === 'string'\n              ? text\n              : !dot && count !== undefined\n                ? String(count)\n                : undefined)\n          }\n          title={count === undefined ? undefined : String(count)}\n        >\n          {!dot && !status && (\n            <span ref={number} className=\"leaf-badge__count\">\n              {display}\n            </span>\n          )}\n        </span>\n      )}\n      {text != null && <span className=\"leaf-badge__text\">{text}</span>}\n    </span>\n  );\n}\n"],"names":["Badge","count","max","showZero","dot","status","text","color","children","className","style","props","number","useRef","hasCount","undefined","visible","display","useContentTransition","classes","String"],"mappings":";;;;;AAaO,SAASA,MAAM,EACpBC,KAAK,EACLC,MAAM,EAAE,EACRC,WAAW,KAAK,EAChBC,MAAM,KAAK,EACXC,MAAM,EACNC,IAAI,EACJC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACL,GAAGC,OACQ;IACX,MAAMC,SAASC,OAAwB;IACvC,MAAMC,WAAWb,AAAUc,WAAVd,SAAuBA,AAAU,OAAVA,SAAiBA,CAAAA,AAAU,MAAVA,SAAeE,QAAO;IAC/E,MAAMa,UAAUZ,OAAOC,UAAUS;IACjC,MAAMG,UAAU,AAAiB,YAAjB,OAAOhB,SAAsBA,QAAQC,MAAM,GAAGA,IAAI,CAAC,CAAC,GAAGD;IACvEiB,qBAAqBN,QAAQK,WAAW;IACxC,OAAO,WAAP,GACE,KAAC;QACE,GAAGN,KAAK;QACT,WAAWQ,QAAQ,cAAcX,AAAY,QAAZA,YAAoB,wBAAwBC;QAC7E,eAAaJ;QACb,OAAO;YAAE,GAAIE,QAAQ;gBAAE,sBAAsBA;YAAM,IAAI,CAAC,CAAC;YAAG,GAAGG,KAAK;QAAC;;YAEpEF;YACAQ,WAAW,WAAXA,GACC,IAAC;gBACC,WAAWG,QACT,yBACCf,AAAAA,CAAAA,OAAOC,MAAK,KAAM;gBAErB,MAAK;gBACL,cACEM,KAAK,CAAC,aAAa,IAClB,CAAgB,YAAhB,OAAOL,OACJA,OACA,AAACF,OAAOH,AAAUc,WAAVd,QAENc,SADAK,OAAOnB,MACC;gBAEhB,OAAOA,AAAUc,WAAVd,QAAsBc,SAAYK,OAAOnB;0BAE/C,CAACG,OAAO,CAACC,UAAU,WAAVA,GACR,IAAC;oBAAK,KAAKO;oBAAQ,WAAU;8BAC1BK;;;YAKA,QAARX,QAAgB,WAAR,GAAQ,IAAC;gBAAK,WAAU;0BAAoBA;;;;AAG3D"}
+{"version":3,"file":"badge/badge.js","sources":["../../../src/badge/badge.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useRef } from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { classes } from '../shared/classes';\nimport { useContentTransition } from '../shared/presence';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  count?: number | string;\n  max?: number;\n  showZero?: boolean;\n  dot?: boolean;\n  status?: 'success' | 'warning' | 'error' | 'info' | 'default';\n  text?: ReactNode;\n  color?: string;\n}\nexport function Badge(rawProps: BadgeProps) {\n  const {\n    count,\n    max = 99,\n    showZero = false,\n    dot = false,\n    status,\n    text,\n    color,\n    children,\n    className,\n    style,\n    ...props\n  } = useComponentProps('Badge', rawProps);\n  const number = useRef<HTMLSpanElement>(null);\n  const hasCount = count !== undefined && count !== '' && (count !== 0 || showZero);\n  const visible = dot || status || hasCount;\n  const display = typeof count === 'number' && count > max ? `${max}+` : count;\n  useContentTransition(number, display ?? '');\n  return (\n    <span\n      {...props}\n      className={classes('leaf-badge', children != null && 'leaf-badge--attached', className)}\n      data-status={status}\n      style={{ ...(color ? { '--leaf-badge-color': color } : {}), ...style }}\n    >\n      {children}\n      {visible && (\n        <span\n          className={classes(\n            'leaf-badge__indicator',\n            (dot || status) && 'leaf-badge__indicator--dot',\n          )}\n          role=\"status\"\n          aria-label={\n            props['aria-label'] ??\n            (typeof text === 'string'\n              ? text\n              : !dot && count !== undefined\n                ? String(count)\n                : undefined)\n          }\n          title={count === undefined ? undefined : String(count)}\n        >\n          {!dot && !status && (\n            <span ref={number} className=\"leaf-badge__count\">\n              {display}\n            </span>\n          )}\n        </span>\n      )}\n      {text != null && <span className=\"leaf-badge__text\">{text}</span>}\n    </span>\n  );\n}\n"],"names":["Badge","rawProps","count","max","showZero","dot","status","text","color","children","className","style","props","useComponentProps","number","useRef","hasCount","undefined","visible","display","useContentTransition","classes","String"],"mappings":";;;;;;AAcO,SAASA,MAAMC,QAAoB;IACxC,MAAM,EACJC,KAAK,EACLC,MAAM,EAAE,EACRC,WAAW,KAAK,EAChBC,MAAM,KAAK,EACXC,MAAM,EACNC,IAAI,EACJC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACL,GAAGC,OACJ,GAAGC,kBAAkB,SAASZ;IAC/B,MAAMa,SAASC,OAAwB;IACvC,MAAMC,WAAWd,AAAUe,WAAVf,SAAuBA,AAAU,OAAVA,SAAiBA,CAAAA,AAAU,MAAVA,SAAeE,QAAO;IAC/E,MAAMc,UAAUb,OAAOC,UAAUU;IACjC,MAAMG,UAAU,AAAiB,YAAjB,OAAOjB,SAAsBA,QAAQC,MAAM,GAAGA,IAAI,CAAC,CAAC,GAAGD;IACvEkB,qBAAqBN,QAAQK,WAAW;IACxC,OAAO,WAAP,GACE,KAAC;QACE,GAAGP,KAAK;QACT,WAAWS,QAAQ,cAAcZ,AAAY,QAAZA,YAAoB,wBAAwBC;QAC7E,eAAaJ;QACb,OAAO;YAAE,GAAIE,QAAQ;gBAAE,sBAAsBA;YAAM,IAAI,CAAC,CAAC;YAAG,GAAGG,KAAK;QAAC;;YAEpEF;YACAS,WAAW,WAAXA,GACC,IAAC;gBACC,WAAWG,QACT,yBACChB,AAAAA,CAAAA,OAAOC,MAAK,KAAM;gBAErB,MAAK;gBACL,cACEM,KAAK,CAAC,aAAa,IAClB,CAAgB,YAAhB,OAAOL,OACJA,OACA,AAACF,OAAOH,AAAUe,WAAVf,QAENe,SADAK,OAAOpB,MACC;gBAEhB,OAAOA,AAAUe,WAAVf,QAAsBe,SAAYK,OAAOpB;0BAE/C,CAACG,OAAO,CAACC,UAAU,WAAVA,GACR,IAAC;oBAAK,KAAKQ;oBAAQ,WAAU;8BAC1BK;;;YAKA,QAARZ,QAAgB,WAAR,GAAQ,IAAC;gBAAK,WAAU;0BAAoBA;;;;AAG3D"}

package/dist/esm/breadcrumb/breadcrumb.d.ts

@@ -1,5 +1,5 @@
 import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
-import { type DropdownItem } from '../dropdown/index.js';
+import type { DropdownItem } from '../dropdown/index.js';
 export interface BreadcrumbItem extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title' | 'children'> {
     key?: string;
     title: ReactNode;
@@ -14,5 +14,5 @@ export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
     itemsAfterCollapse?: number;
     itemRender?: (item: BreadcrumbItem, index: number) => ReactNode;
 }
-export declare function Breadcrumb({ items, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse, itemRender, className, 'aria-label': label, ...props }: BreadcrumbProps): import("react").JSX.Element;
+export declare function Breadcrumb(rawProps: BreadcrumbProps): import("react").JSX.Element;
 //# sourceMappingURL=breadcrumb.d.ts.map

package/dist/esm/breadcrumb/breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAG1D,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;CAChC;AACD,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAClE,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CACjE;AACD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAsC,EACtC,QAAmB,EACnB,mBAAuB,EACvB,kBAAsB,EACtB,UAAU,EACV,SAAS,EACT,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,eAAe,+BAgFjB"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;CAChC;AACD,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAClE,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CACjE;AACD,wBAAgB,UAAU,CAAC,QAAQ,EAAE,eAAe,+BA2FnD"}

package/dist/esm/breadcrumb/breadcrumb.js

@@ -1,30 +1,32 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, Ellipsis } from "lucide-react";
-import { Button } from "../button/index.js";
+import { ButtonControl } from "../button/button.js";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { useLeafConfig } from "../config-provider/context.js";
-import { Dropdown } from "../dropdown/index.js";
+import { DropdownControl } from "../dropdown/dropdown.js";
 import { classes } from "../shared/classes.js";
-function Breadcrumb({ items, separator = /*#__PURE__*/ jsx(ChevronRight, {
-    size: 13
-}), maxItems = 1 / 0, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, itemRender, className, 'aria-label': label, ...props }) {
+function Breadcrumb(rawProps) {
+    const { items, separator = /*#__PURE__*/ jsx(ChevronRight, {
+        size: 13
+    }), maxItems = 1 / 0, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, itemRender, className, 'aria-label': label, ...props } = useComponentProps('Breadcrumb', rawProps);
     const { messages } = useLeafConfig();
     const before = Math.max(1, itemsBeforeCollapse), after = Math.max(1, itemsAfterCollapse);
     const hidden = items.length > Math.max(3, maxItems) && items.length > before + after ? items.slice(before, -after) : [];
     const visible = hidden.length ? [
         ...items.slice(0, before),
         {
-            title: /*#__PURE__*/ jsx(Dropdown, {
+            title: /*#__PURE__*/ jsx(DropdownControl, {
                 items: hidden.map((item, index)=>({
                         key: item.key ?? String(index),
                         label: item.title,
                         href: item.href,
                         onClick: item.onClick ? (event)=>item.onClick?.(event) : void 0
                     })),
-                children: /*#__PURE__*/ jsx(Button, {
+                children: /*#__PURE__*/ jsx(ButtonControl, {
                     variant: "ghost",
                     size: "sm",
-                    "aria-label": messages.expand,
+                    "aria-label": messages.tree.expand,
                     startIcon: /*#__PURE__*/ jsx(Ellipsis, {
                         size: 16
                     })
@@ -39,7 +41,7 @@ function Breadcrumb({ items, separator = /*#__PURE__*/ jsx(ChevronRight, {
     return /*#__PURE__*/ jsx("nav", {
         ...props,
         className: classes('leaf-breadcrumb', className),
-        "aria-label": label ?? messages.breadcrumb,
+        "aria-label": label ?? messages.breadcrumb.label,
         children: /*#__PURE__*/ jsx("ol", {
             children: visible.map(({ key, title, icon, menu, ...item }, index)=>/*#__PURE__*/ jsxs("li", {
                     children: [
@@ -54,9 +56,9 @@ function Breadcrumb({ items, separator = /*#__PURE__*/ jsx(ChevronRight, {
                             icon,
                             menu,
                             ...item
-                        }, items.findIndex((entry)=>entry.key === key && entry.title === title)) : menu ? /*#__PURE__*/ jsx(Dropdown, {
+                        }, items.findIndex((entry)=>entry.key === key && entry.title === title)) : menu ? /*#__PURE__*/ jsx(DropdownControl, {
                             items: menu,
-                            children: /*#__PURE__*/ jsx(Button, {
+                            children: /*#__PURE__*/ jsx(ButtonControl, {
                                 variant: "ghost",
                                 size: "sm",
                                 children: title

package/dist/esm/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb/breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRight, Ellipsis } from 'lucide-react';\nimport type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';\nimport { Button } from '../button';\nimport { useLeafConfig } from '../config-provider/context';\nimport { Dropdown, type DropdownItem } from '../dropdown';\nimport { classes } from '../shared/classes';\n\nexport interface BreadcrumbItem\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title' | 'children'> {\n  key?: string;\n  title: ReactNode;\n  icon?: ReactNode;\n  menu?: readonly DropdownItem[];\n}\nexport interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {\n  items: readonly BreadcrumbItem[];\n  separator?: ReactNode;\n  maxItems?: number;\n  itemsBeforeCollapse?: number;\n  itemsAfterCollapse?: number;\n  itemRender?: (item: BreadcrumbItem, index: number) => ReactNode;\n}\nexport function Breadcrumb({\n  items,\n  separator = <ChevronRight size={13} />,\n  maxItems = Infinity,\n  itemsBeforeCollapse = 1,\n  itemsAfterCollapse = 1,\n  itemRender,\n  className,\n  'aria-label': label,\n  ...props\n}: BreadcrumbProps) {\n  const { messages } = useLeafConfig();\n  const before = Math.max(1, itemsBeforeCollapse),\n    after = Math.max(1, itemsAfterCollapse);\n  const hidden =\n    items.length > Math.max(3, maxItems) && items.length > before + after\n      ? items.slice(before, -after)\n      : [];\n  const visible: BreadcrumbItem[] = hidden.length\n    ? [\n        ...items.slice(0, before),\n        {\n          title: (\n            <Dropdown\n              items={hidden.map((item, index) => ({\n                key: item.key ?? String(index),\n                label: item.title,\n                href: item.href,\n                onClick: item.onClick\n                  ? (event) => item.onClick?.(event as React.MouseEvent<HTMLAnchorElement>)\n                  : undefined,\n              }))}\n            >\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                aria-label={messages.expand}\n                startIcon={<Ellipsis size={16} />}\n              />\n            </Dropdown>\n          ),\n          key: 'leaf-collapse',\n        },\n        ...items.slice(-after),\n      ]\n    : [...items];\n  return (\n    <nav\n      {...props}\n      className={classes('leaf-breadcrumb', className)}\n      aria-label={label ?? messages.breadcrumb}\n    >\n      <ol>\n        {visible.map(({ key, title, icon, menu, ...item }, index) => (\n          <li key={key ?? index}>\n            {index > 0 && (\n              <span className=\"leaf-breadcrumb__separator\" aria-hidden=\"true\">\n                {separator}\n              </span>\n            )}\n            {itemRender ? (\n              itemRender(\n                { key, title, icon, menu, ...item },\n                items.findIndex((entry) => entry.key === key && entry.title === title),\n              )\n            ) : menu ? (\n              <Dropdown items={menu}>\n                <Button variant=\"ghost\" size=\"sm\">\n                  {title}\n                </Button>\n              </Dropdown>\n            ) : item.href ? (\n              <a {...item} aria-current={index === visible.length - 1 ? 'page' : undefined}>\n                {icon && <span aria-hidden=\"true\">{icon}</span>}\n                {title}\n              </a>\n            ) : (\n              <span\n                className=\"leaf-breadcrumb__label\"\n                aria-current={index === visible.length - 1 ? 'page' : undefined}\n              >\n                {icon && <span aria-hidden=\"true\">{icon}</span>}\n                {title}\n              </span>\n            )}\n          </li>\n        ))}\n      </ol>\n    </nav>\n  );\n}\n"],"names":["Breadcrumb","items","separator","ChevronRight","maxItems","Infinity","itemsBeforeCollapse","itemsAfterCollapse","itemRender","className","label","props","messages","useLeafConfig","before","Math","after","hidden","visible","Dropdown","item","index","String","event","undefined","Button","Ellipsis","classes","key","title","icon","menu","entry"],"mappings":";;;;;;;AAsBO,SAASA,WAAW,EACzBC,KAAK,EACLC,YAAY,WAAZA,GAAY,IAACC,cAAYA;IAAC,MAAM;EAAM,EACtCC,WAAWC,KAAQ,EACnBC,sBAAsB,CAAC,EACvBC,qBAAqB,CAAC,EACtBC,UAAU,EACVC,SAAS,EACT,cAAcC,KAAK,EACnB,GAAGC,OACa;IAChB,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IACrB,MAAMC,SAASC,KAAK,GAAG,CAAC,GAAGT,sBACzBU,QAAQD,KAAK,GAAG,CAAC,GAAGR;IACtB,MAAMU,SACJhB,MAAM,MAAM,GAAGc,KAAK,GAAG,CAAC,GAAGX,aAAaH,MAAM,MAAM,GAAGa,SAASE,QAC5Df,MAAM,KAAK,CAACa,QAAQ,CAACE,SACrB,EAAE;IACR,MAAME,UAA4BD,OAAO,MAAM,GAC3C;WACKhB,MAAM,KAAK,CAAC,GAAGa;QAClB;YACE,OAAO,WAAP,GACE,IAACK,UAAQA;gBACP,OAAOF,OAAO,GAAG,CAAC,CAACG,MAAMC,QAAW;wBAClC,KAAKD,KAAK,GAAG,IAAIE,OAAOD;wBACxB,OAAOD,KAAK,KAAK;wBACjB,MAAMA,KAAK,IAAI;wBACf,SAASA,KAAK,OAAO,GACjB,CAACG,QAAUH,KAAK,OAAO,GAAGG,SAC1BC;oBACN;0BAEA,kBAACC,QAAMA;oBACL,SAAQ;oBACR,MAAK;oBACL,cAAYb,SAAS,MAAM;oBAC3B,yBAAW,IAACc,UAAQA;wBAAC,MAAM;;;;YAIjC,KAAK;QACP;WACGzB,MAAM,KAAK,CAAC,CAACe;KACjB,GACD;WAAIf;KAAM;IACd,OAAO,WAAP,GACE,IAAC;QACE,GAAGU,KAAK;QACT,WAAWgB,QAAQ,mBAAmBlB;QACtC,cAAYC,SAASE,SAAS,UAAU;kBAExC,kBAAC;sBACEM,QAAQ,GAAG,CAAC,CAAC,EAAEU,GAAG,EAAEC,KAAK,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGX,MAAM,EAAEC,QAAAA,WAAAA,GACjD,KAAC;;wBACEA,QAAQ,KAAK,WAAL,GACP,IAAC;4BAAK,WAAU;4BAA6B,eAAY;sCACtDnB;;wBAGJM,aACCA,WACE;4BAAEoB;4BAAKC;4BAAOC;4BAAMC;4BAAM,GAAGX,IAAI;wBAAC,GAClCnB,MAAM,SAAS,CAAC,CAAC+B,QAAUA,MAAM,GAAG,KAAKJ,OAAOI,MAAM,KAAK,KAAKH,UAEhEE,OAAO,WAAPA,GACF,IAACZ,UAAQA;4BAAC,OAAOY;sCACf,kBAACN,QAAMA;gCAAC,SAAQ;gCAAQ,MAAK;0CAC1BI;;6BAGHT,KAAK,IAAI,GAAG,WAAH,GACX,KAAC;4BAAG,GAAGA,IAAI;4BAAE,gBAAcC,UAAUH,QAAQ,MAAM,GAAG,IAAI,SAASM;;gCAChEM,QAAQ,WAARA,GAAQ,IAAC;oCAAK,eAAY;8CAAQA;;gCAClCD;;2CAGH,KAAC;4BACC,WAAU;4BACV,gBAAcR,UAAUH,QAAQ,MAAM,GAAG,IAAI,SAASM;;gCAErDM,QAAQ,WAARA,GAAQ,IAAC;oCAAK,eAAY;8CAAQA;;gCAClCD;;;;mBA5BED,OAAOP;;;AAoC1B"}
+{"version":3,"file":"breadcrumb/breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRight, Ellipsis } from 'lucide-react';\nimport type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';\nimport { ButtonControl } from '../button/button';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useLeafConfig } from '../config-provider/context';\nimport type { DropdownItem } from '../dropdown';\nimport { DropdownControl as Dropdown } from '../dropdown/dropdown';\nimport { classes } from '../shared/classes';\n\nexport interface BreadcrumbItem\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title' | 'children'> {\n  key?: string;\n  title: ReactNode;\n  icon?: ReactNode;\n  menu?: readonly DropdownItem[];\n}\nexport interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {\n  items: readonly BreadcrumbItem[];\n  separator?: ReactNode;\n  maxItems?: number;\n  itemsBeforeCollapse?: number;\n  itemsAfterCollapse?: number;\n  itemRender?: (item: BreadcrumbItem, index: number) => ReactNode;\n}\nexport function Breadcrumb(rawProps: BreadcrumbProps) {\n  const {\n    items,\n    separator = <ChevronRight size={13} />,\n    maxItems = Infinity,\n    itemsBeforeCollapse = 1,\n    itemsAfterCollapse = 1,\n    itemRender,\n    className,\n    'aria-label': label,\n    ...props\n  } = useComponentProps('Breadcrumb', rawProps);\n  const { messages } = useLeafConfig();\n  const before = Math.max(1, itemsBeforeCollapse),\n    after = Math.max(1, itemsAfterCollapse);\n  const hidden =\n    items.length > Math.max(3, maxItems) && items.length > before + after\n      ? items.slice(before, -after)\n      : [];\n  const visible: BreadcrumbItem[] = hidden.length\n    ? [\n        ...items.slice(0, before),\n        {\n          title: (\n            <Dropdown\n              items={hidden.map((item, index) => ({\n                key: item.key ?? String(index),\n                label: item.title,\n                href: item.href,\n                onClick: item.onClick\n                  ? (event) => item.onClick?.(event as React.MouseEvent<HTMLAnchorElement>)\n                  : undefined,\n              }))}\n            >\n              <ButtonControl\n                variant=\"ghost\"\n                size=\"sm\"\n                aria-label={messages.tree.expand}\n                startIcon={<Ellipsis size={16} />}\n              />\n            </Dropdown>\n          ),\n          key: 'leaf-collapse',\n        },\n        ...items.slice(-after),\n      ]\n    : [...items];\n  return (\n    <nav\n      {...props}\n      className={classes('leaf-breadcrumb', className)}\n      aria-label={label ?? messages.breadcrumb.label}\n    >\n      <ol>\n        {visible.map(({ key, title, icon, menu, ...item }, index) => (\n          <li key={key ?? index}>\n            {index > 0 && (\n              <span className=\"leaf-breadcrumb__separator\" aria-hidden=\"true\">\n                {separator}\n              </span>\n            )}\n            {itemRender ? (\n              itemRender(\n                { key, title, icon, menu, ...item },\n                items.findIndex((entry) => entry.key === key && entry.title === title),\n              )\n            ) : menu ? (\n              <Dropdown items={menu}>\n                <ButtonControl variant=\"ghost\" size=\"sm\">\n                  {title}\n                </ButtonControl>\n              </Dropdown>\n            ) : item.href ? (\n              <a {...item} aria-current={index === visible.length - 1 ? 'page' : undefined}>\n                {icon && <span aria-hidden=\"true\">{icon}</span>}\n                {title}\n              </a>\n            ) : (\n              <span\n                className=\"leaf-breadcrumb__label\"\n                aria-current={index === visible.length - 1 ? 'page' : undefined}\n              >\n                {icon && <span aria-hidden=\"true\">{icon}</span>}\n                {title}\n              </span>\n            )}\n          </li>\n        ))}\n      </ol>\n    </nav>\n  );\n}\n"],"names":["Breadcrumb","rawProps","items","separator","ChevronRight","maxItems","Infinity","itemsBeforeCollapse","itemsAfterCollapse","itemRender","className","label","props","useComponentProps","messages","useLeafConfig","before","Math","after","hidden","visible","Dropdown","item","index","String","event","undefined","ButtonControl","Ellipsis","classes","key","title","icon","menu","entry"],"mappings":";;;;;;;;AAwBO,SAASA,WAAWC,QAAyB;IAClD,MAAM,EACJC,KAAK,EACLC,YAAY,WAAZA,GAAY,IAACC,cAAYA;QAAC,MAAM;MAAM,EACtCC,WAAWC,KAAQ,EACnBC,sBAAsB,CAAC,EACvBC,qBAAqB,CAAC,EACtBC,UAAU,EACVC,SAAS,EACT,cAAcC,KAAK,EACnB,GAAGC,OACJ,GAAGC,kBAAkB,cAAcZ;IACpC,MAAM,EAAEa,QAAQ,EAAE,GAAGC;IACrB,MAAMC,SAASC,KAAK,GAAG,CAAC,GAAGV,sBACzBW,QAAQD,KAAK,GAAG,CAAC,GAAGT;IACtB,MAAMW,SACJjB,MAAM,MAAM,GAAGe,KAAK,GAAG,CAAC,GAAGZ,aAAaH,MAAM,MAAM,GAAGc,SAASE,QAC5DhB,MAAM,KAAK,CAACc,QAAQ,CAACE,SACrB,EAAE;IACR,MAAME,UAA4BD,OAAO,MAAM,GAC3C;WACKjB,MAAM,KAAK,CAAC,GAAGc;QAClB;YACE,OAAO,WAAP,GACE,IAACK,iBAAQA;gBACP,OAAOF,OAAO,GAAG,CAAC,CAACG,MAAMC,QAAW;wBAClC,KAAKD,KAAK,GAAG,IAAIE,OAAOD;wBACxB,OAAOD,KAAK,KAAK;wBACjB,MAAMA,KAAK,IAAI;wBACf,SAASA,KAAK,OAAO,GACjB,CAACG,QAAUH,KAAK,OAAO,GAAGG,SAC1BC;oBACN;0BAEA,kBAACC,eAAaA;oBACZ,SAAQ;oBACR,MAAK;oBACL,cAAYb,SAAS,IAAI,CAAC,MAAM;oBAChC,yBAAW,IAACc,UAAQA;wBAAC,MAAM;;;;YAIjC,KAAK;QACP;WACG1B,MAAM,KAAK,CAAC,CAACgB;KACjB,GACD;WAAIhB;KAAM;IACd,OAAO,WAAP,GACE,IAAC;QACE,GAAGU,KAAK;QACT,WAAWiB,QAAQ,mBAAmBnB;QACtC,cAAYC,SAASG,SAAS,UAAU,CAAC,KAAK;kBAE9C,kBAAC;sBACEM,QAAQ,GAAG,CAAC,CAAC,EAAEU,GAAG,EAAEC,KAAK,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGX,MAAM,EAAEC,QAAAA,WAAAA,GACjD,KAAC;;wBACEA,QAAQ,KAAK,WAAL,GACP,IAAC;4BAAK,WAAU;4BAA6B,eAAY;sCACtDpB;;wBAGJM,aACCA,WACE;4BAAEqB;4BAAKC;4BAAOC;4BAAMC;4BAAM,GAAGX,IAAI;wBAAC,GAClCpB,MAAM,SAAS,CAAC,CAACgC,QAAUA,MAAM,GAAG,KAAKJ,OAAOI,MAAM,KAAK,KAAKH,UAEhEE,OAAO,WAAPA,GACF,IAACZ,iBAAQA;4BAAC,OAAOY;sCACf,kBAACN,eAAaA;gCAAC,SAAQ;gCAAQ,MAAK;0CACjCI;;6BAGHT,KAAK,IAAI,GAAG,WAAH,GACX,KAAC;4BAAG,GAAGA,IAAI;4BAAE,gBAAcC,UAAUH,QAAQ,MAAM,GAAG,IAAI,SAASM;;gCAChEM,QAAQ,WAARA,GAAQ,IAAC;oCAAK,eAAY;8CAAQA;;gCAClCD;;2CAGH,KAAC;4BACC,WAAU;4BACV,gBAAcR,UAAUH,QAAQ,MAAM,GAAG,IAAI,SAASM;;gCAErDM,QAAQ,WAARA,GAAQ,IAAC;oCAAK,eAAY;8CAAQA;;gCAClCD;;;;mBA5BED,OAAOP;;;AAoC1B"}

package/dist/esm/browser/flex.js

@@ -0,0 +1,2 @@
+"use client";
+export * from './modules/flex/index.js';

package/dist/esm/browser/modules/alert/alert.js

@@ -1,8 +1,10 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/alert.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckCircle2, CircleX, Info, LoaderCircle, TriangleAlert, X } from "lucide-react";
 import { useRef, useState } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { useLeafConfig } from "../config-provider/context.js";
 import { classes } from "../shared/classes.js";
 import { inertProps } from "../shared/inert.js";
@@ -21,7 +23,8 @@ function FeedbackIcon({ type }) {
         className: 'loading' === type ? 'leaf-feedback-spinner' : void 0
     });
 }
-function Alert({ title, description, type = 'info', icon, showIcon = true, closable, onClose, className, ...props }) {
+function Alert(rawProps) {
+    const { title, description, type = 'info', icon, showIcon = true, closable, onClose, className, ...props } = useComponentProps('Alert', rawProps);
     const { messages } = useLeafConfig();
     const [closed, setClosed] = useState(false);
     const root = useRef(null);
@@ -63,7 +66,7 @@ function Alert({ title, description, type = 'info', icon, showIcon = true, closa
             closable && /*#__PURE__*/ jsx("button", {
                 type: "button",
                 className: "leaf-alert__close",
-                "aria-label": messages.close,
+                "aria-label": messages.common.close,
                 onClick: ()=>{
                     const node = root.current;
                     if (node) {

package/dist/esm/browser/modules/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert/alert.js","sources":["../../../../../src/alert/alert.tsx"],"sourcesContent":["import { CheckCircle2, CircleX, Info, LoaderCircle, TriangleAlert, X } from 'lucide-react';\nimport { type HTMLAttributes, type ReactNode, useRef, useState } from 'react';\nimport { useLeafConfig } from '../config-provider/context';\nimport { classes } from '../shared/classes';\nimport { inertProps } from '../shared/inert';\nimport { useContentTransition, usePresence } from '../shared/presence';\nexport type FeedbackType = 'success' | 'info' | 'warning' | 'error';\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  title: ReactNode;\n  description?: ReactNode;\n  type?: FeedbackType;\n  icon?: ReactNode;\n  showIcon?: boolean;\n  closable?: boolean;\n  onClose?: () => void;\n}\nexport function FeedbackIcon({ type }: { type: FeedbackType | 'loading' }) {\n  const Icon = {\n    success: CheckCircle2,\n    info: Info,\n    warning: TriangleAlert,\n    error: CircleX,\n    loading: LoaderCircle,\n  }[type];\n  return (\n    <Icon\n      size={18}\n      aria-hidden=\"true\"\n      className={type === 'loading' ? 'leaf-feedback-spinner' : undefined}\n    />\n  );\n}\nexport function Alert({\n  title,\n  description,\n  type = 'info',\n  icon,\n  showIcon = true,\n  closable,\n  onClose,\n  className,\n  ...props\n}: AlertProps) {\n  const { messages } = useLeafConfig();\n  const [closed, setClosed] = useState(false);\n  const root = useRef<HTMLDivElement>(null);\n  const content = useRef<HTMLDivElement>(null);\n  const present = usePresence(!closed, root);\n  useContentTransition(content, type);\n  if (!present) return null;\n  return (\n    <div\n      {...props}\n      {...inertProps(closed)}\n      ref={root}\n      data-state={closed ? 'closing' : undefined}\n      data-description={description ? '' : undefined}\n      aria-hidden={closed || props['aria-hidden']}\n      role={props.role ?? (type === 'error' || type === 'warning' ? 'alert' : 'status')}\n      className={classes('leaf-alert', `leaf-alert--${type}`, className)}\n    >\n      {showIcon && (\n        <span className=\"leaf-alert__icon\" aria-hidden=\"true\">\n          {icon ?? <FeedbackIcon type={type} />}\n        </span>\n      )}\n      <div className=\"leaf-alert__content\" ref={content}>\n        <div className=\"leaf-alert__title\">{title}</div>\n        {description && <div className=\"leaf-alert__description\">{description}</div>}\n      </div>\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"leaf-alert__close\"\n          aria-label={messages.close}\n          onClick={() => {\n            const node = root.current;\n            if (node) {\n              node.style.setProperty(\n                '--leaf-alert-height',\n                `${node.getBoundingClientRect().height}px`,\n              );\n              void node.offsetHeight;\n            }\n            setClosed(true);\n            onClose?.();\n          }}\n        >\n          <X size={16} aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["FeedbackIcon","type","Icon","CheckCircle2","Info","TriangleAlert","CircleX","LoaderCircle","undefined","Alert","title","description","icon","showIcon","closable","onClose","className","props","messages","useLeafConfig","closed","setClosed","useState","root","useRef","content","present","usePresence","useContentTransition","inertProps","classes","node","X"],"mappings":";;;;;;;;;AAgBO,SAASA,aAAa,EAAEC,IAAI,EAAsC;IACvE,MAAMC,OAAO;QACX,SAASC;QACT,MAAMC;QACN,SAASC;QACT,OAAOC;QACP,SAASC;IACX,CAAC,CAACN,KAAK;IACP,OAAO,WAAP,GACE,IAACC,MAAAA;QACC,MAAM;QACN,eAAY;QACZ,WAAWD,AAAS,cAATA,OAAqB,0BAA0BO;;AAGhE;AACO,SAASC,MAAM,EACpBC,KAAK,EACLC,WAAW,EACXV,OAAO,MAAM,EACbW,IAAI,EACJC,WAAW,IAAI,EACfC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACT,GAAGC,OACQ;IACX,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IACrB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAS;IACrC,MAAMC,OAAOC,OAAuB;IACpC,MAAMC,UAAUD,OAAuB;IACvC,MAAME,UAAUC,YAAY,CAACP,QAAQG;IACrCK,qBAAqBH,SAASxB;IAC9B,IAAI,CAACyB,SAAS,OAAO;IACrB,OAAO,WAAP,GACE,KAAC;QACE,GAAGT,KAAK;QACR,GAAGY,WAAWT,OAAO;QACtB,KAAKG;QACL,cAAYH,SAAS,YAAYZ;QACjC,oBAAkBG,cAAc,KAAKH;QACrC,eAAaY,UAAUH,KAAK,CAAC,cAAc;QAC3C,MAAMA,MAAM,IAAI,IAAKhB,CAAAA,AAAS,YAATA,QAAoBA,AAAS,cAATA,OAAqB,UAAU,QAAO;QAC/E,WAAW6B,QAAQ,cAAc,CAAC,YAAY,EAAE7B,MAAM,EAAEe;;YAEvDH,YAAY,WAAZA,GACC,IAAC;gBAAK,WAAU;gBAAmB,eAAY;0BAC5CD,QAAQ,WAARA,GAAQ,IAACZ,cAAYA;oBAAC,MAAMC;;;0BAGjC,KAAC;gBAAI,WAAU;gBAAsB,KAAKwB;;kCACxC,IAAC;wBAAI,WAAU;kCAAqBf;;oBACnCC,eAAe,WAAfA,GAAe,IAAC;wBAAI,WAAU;kCAA2BA;;;;YAE3DG,YAAY,WAAZA,GACC,IAAC;gBACC,MAAK;gBACL,WAAU;gBACV,cAAYI,SAAS,KAAK;gBAC1B,SAAS;oBACP,MAAMa,OAAOR,KAAK,OAAO;oBACzB,IAAIQ,MAAM;wBACRA,KAAK,KAAK,CAAC,WAAW,CACpB,uBACA,GAAGA,KAAK,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAAC;wBAEvCA,KAAK,YAAY;oBACxB;oBACAV,UAAU;oBACVN;gBACF;0BAEA,kBAACiB,GAACA;oBAAC,MAAM;oBAAI,eAAY;;;;;AAKnC"}
+{"version":3,"file":"alert/alert.js","sources":["../../../../../src/alert/alert.tsx"],"sourcesContent":["import { CheckCircle2, CircleX, Info, LoaderCircle, TriangleAlert, X } from 'lucide-react';\nimport { type HTMLAttributes, type ReactNode, useRef, useState } from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useLeafConfig } from '../config-provider/context';\nimport { classes } from '../shared/classes';\nimport { inertProps } from '../shared/inert';\nimport { useContentTransition, usePresence } from '../shared/presence';\nexport type FeedbackType = 'success' | 'info' | 'warning' | 'error';\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  title: ReactNode;\n  description?: ReactNode;\n  type?: FeedbackType;\n  icon?: ReactNode;\n  showIcon?: boolean;\n  closable?: boolean;\n  onClose?: () => void;\n}\nexport function FeedbackIcon({ type }: { type: FeedbackType | 'loading' }) {\n  const Icon = {\n    success: CheckCircle2,\n    info: Info,\n    warning: TriangleAlert,\n    error: CircleX,\n    loading: LoaderCircle,\n  }[type];\n  return (\n    <Icon\n      size={18}\n      aria-hidden=\"true\"\n      className={type === 'loading' ? 'leaf-feedback-spinner' : undefined}\n    />\n  );\n}\nexport function Alert(rawProps: AlertProps) {\n  const {\n    title,\n    description,\n    type = 'info',\n    icon,\n    showIcon = true,\n    closable,\n    onClose,\n    className,\n    ...props\n  } = useComponentProps('Alert', rawProps);\n  const { messages } = useLeafConfig();\n  const [closed, setClosed] = useState(false);\n  const root = useRef<HTMLDivElement>(null);\n  const content = useRef<HTMLDivElement>(null);\n  const present = usePresence(!closed, root);\n  useContentTransition(content, type);\n  if (!present) return null;\n  return (\n    <div\n      {...props}\n      {...inertProps(closed)}\n      ref={root}\n      data-state={closed ? 'closing' : undefined}\n      data-description={description ? '' : undefined}\n      aria-hidden={closed || props['aria-hidden']}\n      role={props.role ?? (type === 'error' || type === 'warning' ? 'alert' : 'status')}\n      className={classes('leaf-alert', `leaf-alert--${type}`, className)}\n    >\n      {showIcon && (\n        <span className=\"leaf-alert__icon\" aria-hidden=\"true\">\n          {icon ?? <FeedbackIcon type={type} />}\n        </span>\n      )}\n      <div className=\"leaf-alert__content\" ref={content}>\n        <div className=\"leaf-alert__title\">{title}</div>\n        {description && <div className=\"leaf-alert__description\">{description}</div>}\n      </div>\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"leaf-alert__close\"\n          aria-label={messages.common.close}\n          onClick={() => {\n            const node = root.current;\n            if (node) {\n              node.style.setProperty(\n                '--leaf-alert-height',\n                `${node.getBoundingClientRect().height}px`,\n              );\n              void node.offsetHeight;\n            }\n            setClosed(true);\n            onClose?.();\n          }}\n        >\n          <X size={16} aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["FeedbackIcon","type","Icon","CheckCircle2","Info","TriangleAlert","CircleX","LoaderCircle","undefined","Alert","rawProps","title","description","icon","showIcon","closable","onClose","className","props","useComponentProps","messages","useLeafConfig","closed","setClosed","useState","root","useRef","content","present","usePresence","useContentTransition","inertProps","classes","node","X"],"mappings":";;;;;;;;;;;AAiBO,SAASA,aAAa,EAAEC,IAAI,EAAsC;IACvE,MAAMC,OAAO;QACX,SAASC;QACT,MAAMC;QACN,SAASC;QACT,OAAOC;QACP,SAASC;IACX,CAAC,CAACN,KAAK;IACP,OAAO,WAAP,GACE,IAACC,MAAAA;QACC,MAAM;QACN,eAAY;QACZ,WAAWD,AAAS,cAATA,OAAqB,0BAA0BO;;AAGhE;AACO,SAASC,MAAMC,QAAoB;IACxC,MAAM,EACJC,KAAK,EACLC,WAAW,EACXX,OAAO,MAAM,EACbY,IAAI,EACJC,WAAW,IAAI,EACfC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACT,GAAGC,OACJ,GAAGC,kBAAkB,SAAST;IAC/B,MAAM,EAAEU,QAAQ,EAAE,GAAGC;IACrB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAS;IACrC,MAAMC,OAAOC,OAAuB;IACpC,MAAMC,UAAUD,OAAuB;IACvC,MAAME,UAAUC,YAAY,CAACP,QAAQG;IACrCK,qBAAqBH,SAAS1B;IAC9B,IAAI,CAAC2B,SAAS,OAAO;IACrB,OAAO,WAAP,GACE,KAAC;QACE,GAAGV,KAAK;QACR,GAAGa,WAAWT,OAAO;QACtB,KAAKG;QACL,cAAYH,SAAS,YAAYd;QACjC,oBAAkBI,cAAc,KAAKJ;QACrC,eAAac,UAAUJ,KAAK,CAAC,cAAc;QAC3C,MAAMA,MAAM,IAAI,IAAKjB,CAAAA,AAAS,YAATA,QAAoBA,AAAS,cAATA,OAAqB,UAAU,QAAO;QAC/E,WAAW+B,QAAQ,cAAc,CAAC,YAAY,EAAE/B,MAAM,EAAEgB;;YAEvDH,YAAY,WAAZA,GACC,IAAC;gBAAK,WAAU;gBAAmB,eAAY;0BAC5CD,QAAQ,WAARA,GAAQ,IAACb,cAAYA;oBAAC,MAAMC;;;0BAGjC,KAAC;gBAAI,WAAU;gBAAsB,KAAK0B;;kCACxC,IAAC;wBAAI,WAAU;kCAAqBhB;;oBACnCC,eAAe,WAAfA,GAAe,IAAC;wBAAI,WAAU;kCAA2BA;;;;YAE3DG,YAAY,WAAZA,GACC,IAAC;gBACC,MAAK;gBACL,WAAU;gBACV,cAAYK,SAAS,MAAM,CAAC,KAAK;gBACjC,SAAS;oBACP,MAAMa,OAAOR,KAAK,OAAO;oBACzB,IAAIQ,MAAM;wBACRA,KAAK,KAAK,CAAC,WAAW,CACpB,uBACA,GAAGA,KAAK,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAAC;wBAEvCA,KAAK,YAAY;oBACxB;oBACAV,UAAU;oBACVP;gBACF;0BAEA,kBAACkB,GAACA;oBAAC,MAAM;oBAAI,eAAY;;;;;AAKnC"}

package/dist/esm/browser/modules/anchor/anchor.js

@@ -1,12 +1,15 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/anchor.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { classes } from "../shared/classes.js";
 import { useMotionEnabled } from "../shared/motion.js";
 import { useControllable } from "../shared/use-controllable.js";
 import { useMovingIndicator } from "../tabs/use-moving-indicator.js";
-function Anchor({ items, container, offset = 12, activeKey, onActiveChange, smooth = true, className, ...props }) {
+function Anchor(rawProps) {
+    const { items, container, offset = 12, activeKey, onActiveChange, smooth = true, className, ...props } = useComponentProps('Anchor', rawProps);
     const [active, setActive] = useControllable(activeKey, '', onActiveChange);
     const root = useRef(null);
     const indicator = useRef(null);
@@ -90,7 +93,8 @@ function Anchor({ items, container, offset = 12, activeKey, onActiveChange, smoo
         ]
     });
 }
-function Affix({ offsetTop = 0, offsetBottom, container, onAffixChange, className, style, children, ...props }) {
+function Affix(rawProps) {
+    const { offsetTop = 0, offsetBottom, container, onAffixChange, className, style, children, ...props } = useComponentProps('Affix', rawProps);
     const placeholder = useRef(null), content = useRef(null);
     const [position, setPosition] = useState();
     const callback = useRef(onAffixChange);

package/dist/esm/browser/modules/anchor/anchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"anchor/anchor.js","sources":["../../../../../src/anchor/anchor.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useEffect, useRef, useState } from 'react';\nimport { classes } from '../shared/classes';\nimport { useMotionEnabled } from '../shared/motion';\nimport { useControllable } from '../shared/use-controllable';\nimport { useMovingIndicator } from '../tabs/use-moving-indicator';\nexport interface AnchorItem {\n  key: string;\n  title: ReactNode;\n  href: string;\n  children?: readonly AnchorItem[];\n}\nexport interface AnchorProps extends HTMLAttributes<HTMLElement> {\n  items: readonly AnchorItem[];\n  container?: () => HTMLElement | Window;\n  offset?: number;\n  activeKey?: string;\n  onActiveChange?: (key: string) => void;\n  smooth?: boolean;\n}\nexport function Anchor({\n  items,\n  container,\n  offset = 12,\n  activeKey,\n  onActiveChange,\n  smooth = true,\n  className,\n  ...props\n}: AnchorProps) {\n  const [active, setActive] = useControllable(activeKey, '', onActiveChange);\n  const root = useRef<HTMLElement>(null);\n  const indicator = useRef<HTMLSpanElement>(null);\n  const motion = useMotionEnabled();\n  useMovingIndicator(root, indicator, '[aria-current=\"location\"]', active);\n  const callback = useRef(setActive);\n  callback.current = setActive;\n  useEffect(() => {\n    const scroll = container?.() ?? window;\n    let frame = 0;\n    const update = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => {\n        const top = scroll instanceof HTMLElement ? scroll.getBoundingClientRect().top : 0;\n        let key = '';\n        const visit = (entries: readonly AnchorItem[]) => {\n          for (const item of entries) {\n            const target = document.getElementById(decodeURIComponent(item.href.replace(/^#/, '')));\n            if (target && target.getBoundingClientRect().top - top <= offset + 24) key = item.key;\n            if (item.children) visit(item.children);\n          }\n        };\n        visit(items);\n        callback.current(key);\n      });\n    };\n    scroll.addEventListener('scroll', update, { passive: true });\n    window.addEventListener('resize', update);\n    update();\n    return () => {\n      cancelAnimationFrame(frame);\n      scroll.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [container, items, offset]);\n  const links = (entries: readonly AnchorItem[]) =>\n    entries.map((item) => (\n      <li key={item.key}>\n        <a\n          href={item.href}\n          data-leaf-indicator-item=\"\"\n          aria-current={active === item.key ? 'location' : undefined}\n          onClick={(event) => {\n            const target = document.getElementById(decodeURIComponent(item.href.replace(/^#/, '')));\n            if (!target) return;\n            event.preventDefault();\n            const scroll = container?.() ?? window;\n            const top =\n              target.getBoundingClientRect().top -\n              (scroll instanceof HTMLElement ? scroll.getBoundingClientRect().top : 0) +\n              (scroll instanceof HTMLElement ? scroll.scrollTop : window.scrollY) -\n              offset;\n            scroll.scrollTo({\n              top,\n              behavior: smooth && motion ? 'smooth' : 'instant',\n            });\n            setActive(item.key);\n          }}\n        >\n          {item.title}\n        </a>\n        {item.children && <ul>{links(item.children)}</ul>}\n      </li>\n    ));\n  return (\n    <nav\n      {...props}\n      ref={root}\n      aria-label={props['aria-label'] ?? 'Contents'}\n      className={classes('leaf-anchor', className)}\n    >\n      <span ref={indicator} className=\"leaf-anchor__indicator\" aria-hidden=\"true\" />\n      <ul>{links(items)}</ul>\n    </nav>\n  );\n}\nexport interface AffixProps extends HTMLAttributes<HTMLDivElement> {\n  offsetTop?: number;\n  offsetBottom?: number;\n  container?: () => HTMLElement | Window;\n  onAffixChange?: (affixed: boolean) => void;\n}\nexport function Affix({\n  offsetTop = 0,\n  offsetBottom,\n  container,\n  onAffixChange,\n  className,\n  style,\n  children,\n  ...props\n}: AffixProps) {\n  const placeholder = useRef<HTMLDivElement>(null),\n    content = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState<React.CSSProperties>();\n  const callback = useRef(onAffixChange);\n  callback.current = onAffixChange;\n  useEffect(() => {\n    const scroll = container?.() ?? window;\n    let frame = 0,\n      was = false;\n    const update = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => {\n        if (!placeholder.current || !content.current) return;\n        const bounds = placeholder.current.getBoundingClientRect(),\n          view =\n            scroll instanceof HTMLElement\n              ? scroll.getBoundingClientRect()\n              : { top: 0, bottom: innerHeight };\n        const affixed =\n          offsetBottom === undefined\n            ? bounds.top < view.top + offsetTop\n            : bounds.bottom > view.bottom - offsetBottom;\n        setPosition(\n          affixed\n            ? {\n                position: 'fixed',\n                top:\n                  offsetBottom === undefined\n                    ? view.top + offsetTop\n                    : view.bottom - offsetBottom - content.current.offsetHeight,\n                left: bounds.left,\n                width: bounds.width,\n                zIndex: 20,\n              }\n            : undefined,\n        );\n        if (affixed !== was) {\n          was = affixed;\n          callback.current?.(affixed);\n        }\n      });\n    };\n    scroll.addEventListener('scroll', update, { passive: true });\n    window.addEventListener('resize', update);\n    const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(update);\n    if (placeholder.current) observer?.observe(placeholder.current);\n    if (content.current) observer?.observe(content.current);\n    update();\n    return () => {\n      cancelAnimationFrame(frame);\n      observer?.disconnect();\n      scroll.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [container, offsetTop, offsetBottom]);\n  return (\n    <div\n      {...props}\n      ref={placeholder}\n      className={classes('leaf-affix', className)}\n      style={{ ...style, height: position ? content.current?.offsetHeight : style?.height }}\n    >\n      <div ref={content} style={position}>\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"names":["Anchor","items","container","offset","activeKey","onActiveChange","smooth","className","props","active","setActive","useControllable","root","useRef","indicator","motion","useMotionEnabled","useMovingIndicator","callback","useEffect","scroll","window","frame","update","cancelAnimationFrame","requestAnimationFrame","top","HTMLElement","key","visit","entries","item","target","document","decodeURIComponent","links","undefined","event","classes","Affix","offsetTop","offsetBottom","onAffixChange","style","children","placeholder","content","position","setPosition","useState","was","bounds","view","innerHeight","affixed","observer","ResizeObserver"],"mappings":"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"}
+{"version":3,"file":"anchor/anchor.js","sources":["../../../../../src/anchor/anchor.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useEffect, useRef, useState } from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { classes } from '../shared/classes';\nimport { useMotionEnabled } from '../shared/motion';\nimport { useControllable } from '../shared/use-controllable';\nimport { useMovingIndicator } from '../tabs/use-moving-indicator';\nexport interface AnchorItem {\n  key: string;\n  title: ReactNode;\n  href: string;\n  children?: readonly AnchorItem[];\n}\nexport interface AnchorProps extends HTMLAttributes<HTMLElement> {\n  items: readonly AnchorItem[];\n  container?: () => HTMLElement | Window;\n  offset?: number;\n  activeKey?: string;\n  onActiveChange?: (key: string) => void;\n  smooth?: boolean;\n}\nexport function Anchor(rawProps: AnchorProps) {\n  const {\n    items,\n    container,\n    offset = 12,\n    activeKey,\n    onActiveChange,\n    smooth = true,\n    className,\n    ...props\n  } = useComponentProps('Anchor', rawProps);\n  const [active, setActive] = useControllable(activeKey, '', onActiveChange);\n  const root = useRef<HTMLElement>(null);\n  const indicator = useRef<HTMLSpanElement>(null);\n  const motion = useMotionEnabled();\n  useMovingIndicator(root, indicator, '[aria-current=\"location\"]', active);\n  const callback = useRef(setActive);\n  callback.current = setActive;\n  useEffect(() => {\n    const scroll = container?.() ?? window;\n    let frame = 0;\n    const update = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => {\n        const top = scroll instanceof HTMLElement ? scroll.getBoundingClientRect().top : 0;\n        let key = '';\n        const visit = (entries: readonly AnchorItem[]) => {\n          for (const item of entries) {\n            const target = document.getElementById(decodeURIComponent(item.href.replace(/^#/, '')));\n            if (target && target.getBoundingClientRect().top - top <= offset + 24) key = item.key;\n            if (item.children) visit(item.children);\n          }\n        };\n        visit(items);\n        callback.current(key);\n      });\n    };\n    scroll.addEventListener('scroll', update, { passive: true });\n    window.addEventListener('resize', update);\n    update();\n    return () => {\n      cancelAnimationFrame(frame);\n      scroll.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [container, items, offset]);\n  const links = (entries: readonly AnchorItem[]) =>\n    entries.map((item) => (\n      <li key={item.key}>\n        <a\n          href={item.href}\n          data-leaf-indicator-item=\"\"\n          aria-current={active === item.key ? 'location' : undefined}\n          onClick={(event) => {\n            const target = document.getElementById(decodeURIComponent(item.href.replace(/^#/, '')));\n            if (!target) return;\n            event.preventDefault();\n            const scroll = container?.() ?? window;\n            const top =\n              target.getBoundingClientRect().top -\n              (scroll instanceof HTMLElement ? scroll.getBoundingClientRect().top : 0) +\n              (scroll instanceof HTMLElement ? scroll.scrollTop : window.scrollY) -\n              offset;\n            scroll.scrollTo({\n              top,\n              behavior: smooth && motion ? 'smooth' : 'instant',\n            });\n            setActive(item.key);\n          }}\n        >\n          {item.title}\n        </a>\n        {item.children && <ul>{links(item.children)}</ul>}\n      </li>\n    ));\n  return (\n    <nav\n      {...props}\n      ref={root}\n      aria-label={props['aria-label'] ?? 'Contents'}\n      className={classes('leaf-anchor', className)}\n    >\n      <span ref={indicator} className=\"leaf-anchor__indicator\" aria-hidden=\"true\" />\n      <ul>{links(items)}</ul>\n    </nav>\n  );\n}\nexport interface AffixProps extends HTMLAttributes<HTMLDivElement> {\n  offsetTop?: number;\n  offsetBottom?: number;\n  container?: () => HTMLElement | Window;\n  onAffixChange?: (affixed: boolean) => void;\n}\nexport function Affix(rawProps: AffixProps) {\n  const {\n    offsetTop = 0,\n    offsetBottom,\n    container,\n    onAffixChange,\n    className,\n    style,\n    children,\n    ...props\n  } = useComponentProps('Affix', rawProps);\n  const placeholder = useRef<HTMLDivElement>(null),\n    content = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState<React.CSSProperties>();\n  const callback = useRef(onAffixChange);\n  callback.current = onAffixChange;\n  useEffect(() => {\n    const scroll = container?.() ?? window;\n    let frame = 0,\n      was = false;\n    const update = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => {\n        if (!placeholder.current || !content.current) return;\n        const bounds = placeholder.current.getBoundingClientRect(),\n          view =\n            scroll instanceof HTMLElement\n              ? scroll.getBoundingClientRect()\n              : { top: 0, bottom: innerHeight };\n        const affixed =\n          offsetBottom === undefined\n            ? bounds.top < view.top + offsetTop\n            : bounds.bottom > view.bottom - offsetBottom;\n        setPosition(\n          affixed\n            ? {\n                position: 'fixed',\n                top:\n                  offsetBottom === undefined\n                    ? view.top + offsetTop\n                    : view.bottom - offsetBottom - content.current.offsetHeight,\n                left: bounds.left,\n                width: bounds.width,\n                zIndex: 20,\n              }\n            : undefined,\n        );\n        if (affixed !== was) {\n          was = affixed;\n          callback.current?.(affixed);\n        }\n      });\n    };\n    scroll.addEventListener('scroll', update, { passive: true });\n    window.addEventListener('resize', update);\n    const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(update);\n    if (placeholder.current) observer?.observe(placeholder.current);\n    if (content.current) observer?.observe(content.current);\n    update();\n    return () => {\n      cancelAnimationFrame(frame);\n      observer?.disconnect();\n      scroll.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [container, offsetTop, offsetBottom]);\n  return (\n    <div\n      {...props}\n      ref={placeholder}\n      className={classes('leaf-affix', className)}\n      style={{ ...style, height: position ? content.current?.offsetHeight : style?.height }}\n    >\n      <div ref={content} style={position}>\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"names":["Anchor","rawProps","items","container","offset","activeKey","onActiveChange","smooth","className","props","useComponentProps","active","setActive","useControllable","root","useRef","indicator","motion","useMotionEnabled","useMovingIndicator","callback","useEffect","scroll","window","frame","update","cancelAnimationFrame","requestAnimationFrame","top","HTMLElement","key","visit","entries","item","target","document","decodeURIComponent","links","undefined","event","classes","Affix","offsetTop","offsetBottom","onAffixChange","style","children","placeholder","content","position","setPosition","useState","was","bounds","view","innerHeight","affixed","observer","ResizeObserver"],"mappings":"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"}

package/dist/esm/browser/modules/anchor/index.js

@@ -1,2 +1,2 @@
 "use client";
-export * from "./anchor.js";
+export { Affix, Anchor } from "./anchor.js";

package/dist/esm/browser/modules/appbar/appbar.js

@@ -1,13 +1,16 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/appbar.css';
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { useLeafConfig } from "../config-provider/context.js";
 import { classes } from "../shared/classes.js";
 import { useMergedRef } from "../shared/field.js";
 import { useControllable } from "../shared/use-controllable.js";
 import { useMovingIndicator } from "../tabs/use-moving-indicator.js";
-const appbar_AppBar = /*#__PURE__*/ forwardRef(function({ position = 'static', elevation, className, style, ...props }, ref) {
+const appbar_AppBar = /*#__PURE__*/ forwardRef(function(rawProps, ref) {
+    const { position = 'static', elevation, className, style, ...props } = useComponentProps('AppBar', rawProps);
     return /*#__PURE__*/ jsx("header", {
         ...props,
         ref: ref,
@@ -19,7 +22,8 @@ const appbar_AppBar = /*#__PURE__*/ forwardRef(function({ position = 'static', e
         }
     });
 });
-const appbar_Toolbar = /*#__PURE__*/ forwardRef(function({ dense, className, onKeyDown, ...props }, ref) {
+const appbar_Toolbar = /*#__PURE__*/ forwardRef(function(rawProps, ref) {
+    const { dense, className, onKeyDown, ...props } = useComponentProps('Toolbar', rawProps);
     const root = useRef(null);
     const merged = useMergedRef(root, ref);
     const { direction } = useLeafConfig();
@@ -48,7 +52,8 @@ const appbar_Toolbar = /*#__PURE__*/ forwardRef(function({ dense, className, onK
         }
     });
 });
-function BottomNavigation({ items, value, defaultValue = '', onChange, showLabels = true, linkRender, className, ...props }) {
+function BottomNavigation(rawProps) {
+    const { items, value, defaultValue = '', onChange, showLabels = true, linkRender, className, ...props } = useComponentProps('BottomNavigation', rawProps);
     const { direction } = useLeafConfig(), root = useRef(null);
     const [current, setCurrent] = useControllable(value, defaultValue || items[0]?.key || '', onChange);
     const indicator = useRef(null);

package/dist/esm/browser/modules/appbar/appbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"appbar/appbar.js","sources":["../../../../../src/appbar/appbar.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useRef,\n} from 'react';\nimport { useLeafConfig } from '../config-provider/context';\nimport { classes } from '../shared/classes';\nimport { useMergedRef } from '../shared/field';\nimport { useControllable } from '../shared/use-controllable';\nimport { useMovingIndicator } from '../tabs/use-moving-indicator';\nexport interface AppBarProps extends HTMLAttributes<HTMLElement> {\n  position?: 'static' | 'sticky' | 'fixed';\n  elevation?: boolean;\n}\nexport const AppBar = forwardRef<HTMLElement, AppBarProps>(function AppBar(\n  { position = 'static', elevation, className, style, ...props },\n  ref,\n) {\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={classes('leaf-app-bar', elevation && 'leaf-app-bar--elevated', className)}\n      style={{ position, top: position === 'static' ? undefined : 0, ...style }}\n    />\n  );\n});\nexport interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {\n  dense?: boolean;\n}\nexport const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(function Toolbar(\n  { dense, className, onKeyDown, ...props },\n  ref,\n) {\n  const root = useRef<HTMLDivElement>(null);\n  const merged = useMergedRef(root, ref);\n  const { direction } = useLeafConfig();\n  return (\n    <div\n      role=\"toolbar\"\n      {...props}\n      ref={merged}\n      className={classes('leaf-toolbar', dense && 'leaf-toolbar--dense', className)}\n      onKeyDown={(event) => {\n        onKeyDown?.(event);\n        if (\n          event.defaultPrevented ||\n          (event.target as HTMLElement).closest('input,textarea,select,[contenteditable=true]')\n        )\n          return;\n        const items = [\n          ...(root.current?.querySelectorAll<HTMLElement>(\n            'button:not(:disabled),a[href],[tabindex=\"0\"]',\n          ) ?? []),\n        ].filter((item) => !item.closest('[inert],[hidden],[aria-disabled=\"true\"]'));\n        const index = items.indexOf(event.target as HTMLElement);\n        if (index < 0 || !items.length) return;\n        let next: number;\n        if (event.key === 'Home') next = 0;\n        else if (event.key === 'End') next = items.length - 1;\n        else if (event.key === 'ArrowRight' || event.key === 'ArrowLeft')\n          next =\n            (index +\n              (event.key === (direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight') ? 1 : -1) +\n              items.length) %\n            items.length;\n        else return;\n        event.preventDefault();\n        items[next]?.focus();\n      }}\n    />\n  );\n});\nexport interface BottomNavigationItem {\n  key: string;\n  label: ReactNode;\n  icon?: ReactNode;\n  disabled?: boolean;\n  href?: string;\n}\nexport interface BottomNavigationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  items: readonly BottomNavigationItem[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  showLabels?: boolean;\n  linkRender?: (\n    item: BottomNavigationItem,\n    props: AnchorHTMLAttributes<HTMLAnchorElement>,\n  ) => ReactNode;\n}\nexport function BottomNavigation({\n  items,\n  value,\n  defaultValue = '',\n  onChange,\n  showLabels = true,\n  linkRender,\n  className,\n  ...props\n}: BottomNavigationProps) {\n  const { direction } = useLeafConfig(),\n    root = useRef<HTMLElement>(null);\n  const [current, setCurrent] = useControllable(\n    value,\n    defaultValue || items[0]?.key || '',\n    onChange,\n  );\n  const indicator = useRef<HTMLSpanElement>(null);\n  useMovingIndicator(\n    root,\n    indicator,\n    '[aria-current=\"page\"]',\n    `${current}-${showLabels}-${direction}`,\n  );\n  return (\n    <nav {...props} ref={root} className={classes('leaf-bottom-navigation', className)}>\n      <span ref={indicator} className=\"leaf-bottom-navigation__indicator\" aria-hidden=\"true\" />\n      {items.map((item) => {\n        const contents = (\n          <>\n            {item.icon && (\n              <span className=\"leaf-bottom-navigation__icon\" aria-hidden=\"true\">\n                {item.icon}\n              </span>\n            )}\n            <span\n              className=\"leaf-bottom-navigation__label\"\n              data-visible={showLabels || current === item.key || undefined}\n              aria-hidden=\"true\"\n            >\n              {item.label}\n            </span>\n          </>\n        );\n        const attributes = {\n          'data-leaf-navigation': '',\n          'data-leaf-indicator-item': '',\n          'aria-label': typeof item.label === 'string' ? item.label : item.key,\n          'aria-current': current === item.key ? ('page' as const) : undefined,\n          'aria-disabled': item.disabled || undefined,\n          tabIndex: item.disabled ? -1 : current === item.key ? 0 : -1,\n          onClick: (event: MouseEvent<HTMLElement>) => {\n            if (item.disabled) event.preventDefault();\n            else setCurrent(item.key);\n          },\n          onKeyDown: (event: KeyboardEvent<HTMLElement>) => {\n            if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;\n            event.preventDefault();\n            const buttons = [\n                ...(root.current?.querySelectorAll<HTMLElement>(\n                  '[data-leaf-navigation]:not([aria-disabled=\"true\"])',\n                ) ?? []),\n              ],\n              index = buttons.indexOf(event.currentTarget);\n            const next =\n              event.key === 'Home'\n                ? 0\n                : event.key === 'End'\n                  ? buttons.length - 1\n                  : (index +\n                      (event.key === 'ArrowRight' ? 1 : -1) * (direction === 'rtl' ? -1 : 1) +\n                      buttons.length) %\n                    buttons.length;\n            buttons[next]?.focus();\n          },\n        };\n        return (\n          <span key={item.key} className=\"leaf-bottom-navigation__item\">\n            {item.href ? (\n              (linkRender?.(item, {\n                ...attributes,\n                href: item.disabled ? undefined : item.href,\n                children: contents,\n              }) ?? (\n                <a {...attributes} href={item.disabled ? undefined : item.href}>\n                  {contents}\n                </a>\n              ))\n            ) : (\n              <button {...attributes} type=\"button\" disabled={item.disabled}>\n                {contents}\n              </button>\n            )}\n          </span>\n        );\n      })}\n    </nav>\n  );\n}\n"],"names":["AppBar","forwardRef","position","elevation","className","style","props","ref","classes","undefined","Toolbar","dense","onKeyDown","root","useRef","merged","useMergedRef","direction","useLeafConfig","event","items","item","index","next","BottomNavigation","value","defaultValue","onChange","showLabels","linkRender","current","setCurrent","useControllable","indicator","useMovingIndicator","contents","attributes","buttons"],"mappings":"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"}
+{"version":3,"file":"appbar/appbar.js","sources":["../../../../../src/appbar/appbar.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useRef,\n} from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useLeafConfig } from '../config-provider/context';\nimport { classes } from '../shared/classes';\nimport { useMergedRef } from '../shared/field';\nimport { useControllable } from '../shared/use-controllable';\nimport { useMovingIndicator } from '../tabs/use-moving-indicator';\nexport interface AppBarProps extends HTMLAttributes<HTMLElement> {\n  position?: 'static' | 'sticky' | 'fixed';\n  elevation?: boolean;\n}\nexport const AppBar = forwardRef<HTMLElement, AppBarProps>(function AppBar(\n  rawProps: AppBarProps,\n  ref,\n) {\n  const {\n    position = 'static',\n    elevation,\n    className,\n    style,\n    ...props\n  } = useComponentProps('AppBar', rawProps);\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={classes('leaf-app-bar', elevation && 'leaf-app-bar--elevated', className)}\n      style={{ position, top: position === 'static' ? undefined : 0, ...style }}\n    />\n  );\n});\nexport interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {\n  dense?: boolean;\n}\nexport const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(function Toolbar(\n  rawProps: ToolbarProps,\n  ref,\n) {\n  const { dense, className, onKeyDown, ...props } = useComponentProps('Toolbar', rawProps);\n  const root = useRef<HTMLDivElement>(null);\n  const merged = useMergedRef(root, ref);\n  const { direction } = useLeafConfig();\n  return (\n    <div\n      role=\"toolbar\"\n      {...props}\n      ref={merged}\n      className={classes('leaf-toolbar', dense && 'leaf-toolbar--dense', className)}\n      onKeyDown={(event) => {\n        onKeyDown?.(event);\n        if (\n          event.defaultPrevented ||\n          (event.target as HTMLElement).closest('input,textarea,select,[contenteditable=true]')\n        )\n          return;\n        const items = [\n          ...(root.current?.querySelectorAll<HTMLElement>(\n            'button:not(:disabled),a[href],[tabindex=\"0\"]',\n          ) ?? []),\n        ].filter((item) => !item.closest('[inert],[hidden],[aria-disabled=\"true\"]'));\n        const index = items.indexOf(event.target as HTMLElement);\n        if (index < 0 || !items.length) return;\n        let next: number;\n        if (event.key === 'Home') next = 0;\n        else if (event.key === 'End') next = items.length - 1;\n        else if (event.key === 'ArrowRight' || event.key === 'ArrowLeft')\n          next =\n            (index +\n              (event.key === (direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight') ? 1 : -1) +\n              items.length) %\n            items.length;\n        else return;\n        event.preventDefault();\n        items[next]?.focus();\n      }}\n    />\n  );\n});\nexport interface BottomNavigationItem {\n  key: string;\n  label: ReactNode;\n  icon?: ReactNode;\n  disabled?: boolean;\n  href?: string;\n}\nexport interface BottomNavigationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  items: readonly BottomNavigationItem[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  showLabels?: boolean;\n  linkRender?: (\n    item: BottomNavigationItem,\n    props: AnchorHTMLAttributes<HTMLAnchorElement>,\n  ) => ReactNode;\n}\nexport function BottomNavigation(rawProps: BottomNavigationProps) {\n  const {\n    items,\n    value,\n    defaultValue = '',\n    onChange,\n    showLabels = true,\n    linkRender,\n    className,\n    ...props\n  } = useComponentProps('BottomNavigation', rawProps);\n  const { direction } = useLeafConfig(),\n    root = useRef<HTMLElement>(null);\n  const [current, setCurrent] = useControllable(\n    value,\n    defaultValue || items[0]?.key || '',\n    onChange,\n  );\n  const indicator = useRef<HTMLSpanElement>(null);\n  useMovingIndicator(\n    root,\n    indicator,\n    '[aria-current=\"page\"]',\n    `${current}-${showLabels}-${direction}`,\n  );\n  return (\n    <nav {...props} ref={root} className={classes('leaf-bottom-navigation', className)}>\n      <span ref={indicator} className=\"leaf-bottom-navigation__indicator\" aria-hidden=\"true\" />\n      {items.map((item) => {\n        const contents = (\n          <>\n            {item.icon && (\n              <span className=\"leaf-bottom-navigation__icon\" aria-hidden=\"true\">\n                {item.icon}\n              </span>\n            )}\n            <span\n              className=\"leaf-bottom-navigation__label\"\n              data-visible={showLabels || current === item.key || undefined}\n              aria-hidden=\"true\"\n            >\n              {item.label}\n            </span>\n          </>\n        );\n        const attributes = {\n          'data-leaf-navigation': '',\n          'data-leaf-indicator-item': '',\n          'aria-label': typeof item.label === 'string' ? item.label : item.key,\n          'aria-current': current === item.key ? ('page' as const) : undefined,\n          'aria-disabled': item.disabled || undefined,\n          tabIndex: item.disabled ? -1 : current === item.key ? 0 : -1,\n          onClick: (event: MouseEvent<HTMLElement>) => {\n            if (item.disabled) event.preventDefault();\n            else setCurrent(item.key);\n          },\n          onKeyDown: (event: KeyboardEvent<HTMLElement>) => {\n            if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;\n            event.preventDefault();\n            const buttons = [\n                ...(root.current?.querySelectorAll<HTMLElement>(\n                  '[data-leaf-navigation]:not([aria-disabled=\"true\"])',\n                ) ?? []),\n              ],\n              index = buttons.indexOf(event.currentTarget);\n            const next =\n              event.key === 'Home'\n                ? 0\n                : event.key === 'End'\n                  ? buttons.length - 1\n                  : (index +\n                      (event.key === 'ArrowRight' ? 1 : -1) * (direction === 'rtl' ? -1 : 1) +\n                      buttons.length) %\n                    buttons.length;\n            buttons[next]?.focus();\n          },\n        };\n        return (\n          <span key={item.key} className=\"leaf-bottom-navigation__item\">\n            {item.href ? (\n              (linkRender?.(item, {\n                ...attributes,\n                href: item.disabled ? undefined : item.href,\n                children: contents,\n              }) ?? (\n                <a {...attributes} href={item.disabled ? undefined : item.href}>\n                  {contents}\n                </a>\n              ))\n            ) : (\n              <button {...attributes} type=\"button\" disabled={item.disabled}>\n                {contents}\n              </button>\n            )}\n          </span>\n        );\n      })}\n    </nav>\n  );\n}\n"],"names":["AppBar","forwardRef","rawProps","ref","position","elevation","className","style","props","useComponentProps","classes","undefined","Toolbar","dense","onKeyDown","root","useRef","merged","useMergedRef","direction","useLeafConfig","event","items","item","index","next","BottomNavigation","value","defaultValue","onChange","showLabels","linkRender","current","setCurrent","useControllable","indicator","useMovingIndicator","contents","attributes","buttons"],"mappings":"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"}

package/dist/esm/browser/modules/appbar/index.js

@@ -1,2 +1,2 @@
 "use client";
-export * from "./appbar.js";
+export { AppBar, BottomNavigation, Toolbar } from "./appbar.js";

package/dist/esm/browser/modules/autocomplete/autocomplete.js

@@ -1,20 +1,28 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/autocomplete.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { useLeafConfig } from "../config-provider/context.js";
+import { estimateControlHeight } from "../density.js";
 import { useFormField } from "../form/form.js";
 import { classes } from "../shared/classes.js";
 import { ClearButton } from "../shared/clear-button.js";
 import { useFieldValue, useMergedRef } from "../shared/field.js";
 import { FloatingPanel, useActiveOption, useFloatingDismiss, usePopupState } from "../shared/floating.js";
+import { FloatingFeedback } from "../shared/floating-feedback.js";
 import { FloatingHighlight, useFloatingHighlight } from "../shared/floating-highlight.js";
-const autocomplete_AutoComplete = /*#__PURE__*/ forwardRef(function({ options: entries, value, defaultValue = '', size = 'md', status: statusProp, filterOption, disabled: disabledProp, readOnly, className, style, form, onChange, onSelect, onSearch, open: controlledOpen, defaultOpen, onOpenChange, loading, notFoundContent, errorContent, optionRender, allowClear, virtual: virtualProp, listHeight = 248, optionHeight = 36, popupPlacement, popupClassName, popupStyle, popupRender, getPopupContainer, onKeyDown, onFocus, autoComplete = 'off', 'aria-label': ariaLabel, 'aria-invalid': ariaInvalid, ...props }, forwardedRef) {
+import { useFormattedText } from "../shared/use-formatted-text.js";
+const autocomplete_AutoComplete = /*#__PURE__*/ forwardRef(function(rawProps, forwardedRef) {
+    const { options: entries, value, defaultValue = '', size = 'md', status: statusProp, filterOption, disabled: disabledProp, readOnly, className, style, form, onChange, onSelect, onSearch, open: controlledOpen, defaultOpen, onOpenChange, loading, notFoundContent, errorContent, optionRender, allowClear, virtual: virtualProp, listHeight = 248, optionHeight: optionHeightProp, popupPlacement, popupClassName, popupStyle, popupRender, getPopupContainer, onKeyDown, onFocus, autoComplete = 'off', 'aria-label': ariaLabel, 'aria-invalid': ariaInvalid, ...props } = useComponentProps('AutoComplete', rawProps);
     const field = useFormField();
     const disabled = disabledProp || field?.disabled;
     const status = statusProp ?? (field?.error ? 'error' : void 0);
-    const { locale, messages } = useLeafConfig();
+    const { messages, theme, density } = useLeafConfig();
+    const format = useFormattedText();
+    const optionHeight = optionHeightProp ?? Math.max(24, estimateControlHeight(theme, density) - 4);
     const inputRef = useRef(null);
     const panelRef = useRef(null);
     const ref = useMergedRef(inputRef, forwardedRef);
@@ -59,6 +67,15 @@ const autocomplete_AutoComplete = /*#__PURE__*/ forwardRef(function({ options: e
         virtualizer
     ]);
     const expanded = open && !disabled && !readOnly;
+    const hasSuggestions = visibleOptions.length > 0 && !errorContent;
+    const listboxProps = {
+        id: listId,
+        role: 'listbox',
+        'aria-busy': loading || void 0,
+        'aria-label': ariaLabel ? format('autoComplete.suggestions', {
+            label: ariaLabel
+        }) : messages.autoComplete.empty
+    };
     useFloatingDismiss(expanded, ()=>setOpen(false), inputRef, panelRef);
     useActiveOption(expanded, visibleOptions[active] ? `${listId}-${active}` : void 0, panelRef);
     const highlight = useFloatingHighlight(expanded, panelRef, visibleOptions[active] ? `${listId}-${active}` : void 0, `${text}:${visibleOptions[active]?.value}:${visibleOptions.length}:${virtualizer.range?.startIndex}:${virtualizer.range?.endIndex}`);
@@ -144,7 +161,7 @@ const autocomplete_AutoComplete = /*#__PURE__*/ forwardRef(function({ options: e
                 }
             }),
             allowClear && text && !disabled && !readOnly && /*#__PURE__*/ jsx(ClearButton, {
-                label: messages.clearInput,
+                label: messages.input.clear,
                 onClear: ()=>{
                     setText('');
                     onChange?.('');
@@ -157,9 +174,10 @@ const autocomplete_AutoComplete = /*#__PURE__*/ forwardRef(function({ options: e
                 triggerRef: inputRef,
                 panelRef: panelRef,
                 matchWidth: true,
-                id: listId,
+                ...hasSuggestions ? listboxProps : {},
                 className: classes('leaf-floating', 'leaf-autocomplete__panel', popupClassName),
                 "data-hover-motion": "",
+                "data-selection": "candidate",
                 placement: popupPlacement,
                 style: {
                     maxHeight: listHeight,
@@ -167,22 +185,22 @@ const autocomplete_AutoComplete = /*#__PURE__*/ forwardRef(function({ options: e
                 },
                 container: getPopupContainer,
                 render: popupRender,
-                role: "listbox",
-                "aria-busy": loading || void 0,
-                "aria-label": ariaLabel ? `${ariaLabel} ${'en-US' === locale ? 'suggestions' : '建议'}` : messages.noMatches,
                 children: [
+                    !hasSuggestions && /*#__PURE__*/ jsx("div", {
+                        ...listboxProps
+                    }),
                     /*#__PURE__*/ jsx(FloatingHighlight, {
-                        style: highlight,
-                        selected: true
+                        style: highlight
                     }),
-                    loading && !visibleOptions.length ? /*#__PURE__*/ jsx("div", {
-                        className: "leaf-floating__empty",
-                        children: messages.loading
+                    loading && !visibleOptions.length ? /*#__PURE__*/ jsx(FloatingFeedback, {
+                        loading: true,
+                        children: messages.common.loading
                     }) : errorContent ? /*#__PURE__*/ jsx("div", {
                         className: "leaf-floating__empty",
                         role: "alert",
                         children: errorContent
                     }) : visibleOptions.length ? /*#__PURE__*/ jsx("div", {
+                        className: virtual ? void 0 : 'leaf-floating__options',
                         style: virtual ? {
                             height: virtualizer.getTotalSize(),
                             position: 'relative'
@@ -222,13 +240,15 @@ const autocomplete_AutoComplete = /*#__PURE__*/ forwardRef(function({ options: e
                                         onMouseDown: (event)=>event.preventDefault(),
                                         onMouseEnter: ()=>!option.disabled && setActive(index),
                                         onClick: ()=>select(option),
-                                        children: optionRender?.(option) ?? option.label ?? option.value
+                                        children: /*#__PURE__*/ jsx("span", {
+                                            className: "leaf-floating__option-label",
+                                            children: optionRender?.(option) ?? option.label ?? option.value
+                                        })
                                     }, option.value)
                                 ]
                             }, option.value))
-                    }) : /*#__PURE__*/ jsx("div", {
-                        className: "leaf-floating__empty",
-                        children: notFoundContent ?? messages.noMatches
+                    }) : /*#__PURE__*/ jsx(FloatingFeedback, {
+                        children: notFoundContent ?? messages.autoComplete.empty
                     })
                 ]
             })