@ifhover/leaf-ui 0.5.0 → 0.6.0

package/dist/esm/browser/modules/button/group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button/group.js","sources":["../../../../../src/button/group.tsx"],"sourcesContent":["import { ChevronDown } from 'lucide-react';\nimport {\n  Children,\n  cloneElement,\n  type FieldsetHTMLAttributes,\n  isValidElement,\n  type ReactElement,\n} from 'react';\nimport { Dropdown, type DropdownItem, type DropdownProps } from '../dropdown';\nimport { classes } from '../shared/classes';\nimport type { ControlSize } from '../shared/types';\nimport { useText } from '../shared/use-text';\nimport { Button, type ButtonProps } from './button';\nexport interface ButtonGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  size?: ControlSize;\n  disabled?: boolean;\n  attached?: boolean;\n}\nexport function ButtonGroup({\n  size,\n  disabled,\n  attached = true,\n  children,\n  className,\n  ...props\n}: ButtonGroupProps) {\n  return (\n    <fieldset\n      {...props}\n      disabled={disabled}\n      className={classes('leaf-button-group', attached && 'leaf-button-group--attached', className)}\n    >\n      {Children.map(children, (child) =>\n        isValidElement<ButtonProps>(child)\n          ? cloneElement(child, {\n              size: child.props.size ?? size,\n              disabled: disabled || child.props.disabled,\n            })\n          : child,\n      )}\n    </fieldset>\n  );\n}\nexport interface SplitButtonProps extends ButtonProps {\n  items: readonly DropdownItem[];\n  menuLabel?: string;\n  dropdownProps?: Omit<DropdownProps, 'items' | 'children' | 'disabled'>;\n}\nexport function SplitButton({\n  items,\n  menuLabel,\n  dropdownProps,\n  children,\n  className,\n  ...props\n}: SplitButtonProps): ReactElement {\n  const t = useText();\n  return (\n    <ButtonGroup className={className}>\n      <Button {...props}>{children}</Button>\n      <Dropdown {...dropdownProps} items={items} disabled={props.disabled || props.loading}>\n        <Button\n          variant={props.variant}\n          size={props.size}\n          danger={props.danger}\n          startIcon={<ChevronDown size={16} />}\n          aria-label={menuLabel ?? t('更多操作', 'More actions')}\n        />\n      </Dropdown>\n    </ButtonGroup>\n  );\n}\n"],"names":["ButtonGroup","size","disabled","attached","children","className","props","classes","Children","child","isValidElement","cloneElement","SplitButton","items","menuLabel","dropdownProps","t","useText","Button","Dropdown","ChevronDown"],"mappings":";;;;;;;;;AAkBO,SAASA,YAAY,EAC1BC,IAAI,EACJC,QAAQ,EACRC,WAAW,IAAI,EACfC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACc;IACjB,OAAO,WAAP,GACE,IAAC;QACE,GAAGA,KAAK;QACT,UAAUJ;QACV,WAAWK,QAAQ,qBAAqBJ,YAAY,+BAA+BE;kBAElFG,SAAS,GAAG,CAACJ,UAAU,CAACK,QAAAA,WAAAA,GACvBC,eAA4BD,SAAAA,WAAAA,GACxBE,aAAaF,OAAO;gBAClB,MAAMA,MAAM,KAAK,CAAC,IAAI,IAAIR;gBAC1B,UAAUC,YAAYO,MAAM,KAAK,CAAC,QAAQ;YAC5C,KACAA;;AAIZ;AAMO,SAASG,YAAY,EAC1BC,KAAK,EACLC,SAAS,EACTC,aAAa,EACbX,QAAQ,EACRC,SAAS,EACT,GAAGC,OACc;IACjB,MAAMU,IAAIC;IACV,OAAO,WAAP,GACE,KAACjB,aAAWA;QAAC,WAAWK;;0BACtB,IAACa,QAAMA;gBAAE,GAAGZ,KAAK;0BAAGF;;0BACpB,IAACe,UAAQA;gBAAE,GAAGJ,aAAa;gBAAE,OAAOF;gBAAO,UAAUP,MAAM,QAAQ,IAAIA,MAAM,OAAO;0BAClF,kBAACY,QAAMA;oBACL,SAASZ,MAAM,OAAO;oBACtB,MAAMA,MAAM,IAAI;oBAChB,QAAQA,MAAM,MAAM;oBACpB,yBAAW,IAACc,aAAWA;wBAAC,MAAM;;oBAC9B,cAAYN,aAAaE,EAAE,QAAQ;;;;;AAK7C"}
+{"version":3,"file":"button/group.js","sources":["../../../../../src/button/group.tsx"],"sourcesContent":["import { ChevronDown } from 'lucide-react';\nimport {\n  Children,\n  cloneElement,\n  type FieldsetHTMLAttributes,\n  isValidElement,\n  type ReactElement,\n} from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport type { DropdownItem, DropdownProps } from '../dropdown';\nimport { DropdownControl as Dropdown } from '../dropdown/dropdown';\nimport { classes } from '../shared/classes';\nimport type { ControlSize } from '../shared/types';\nimport { useText } from '../shared/use-text';\nimport { ButtonControl, type ButtonProps } from './button';\nexport interface ButtonGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  size?: ControlSize;\n  disabled?: boolean;\n  attached?: boolean;\n}\nexport function ButtonGroupControl({\n  size,\n  disabled,\n  attached = true,\n  children,\n  className,\n  ...props\n}: ButtonGroupProps) {\n  return (\n    <fieldset\n      {...props}\n      disabled={disabled}\n      className={classes('leaf-button-group', attached && 'leaf-button-group--attached', className)}\n    >\n      {Children.map(children, (child) =>\n        isValidElement<ButtonProps>(child)\n          ? cloneElement(child, {\n              size: child.props.size ?? size,\n              disabled: disabled || child.props.disabled,\n            })\n          : child,\n      )}\n    </fieldset>\n  );\n}\nexport interface SplitButtonProps extends ButtonProps {\n  items: readonly DropdownItem[];\n  menuLabel?: string;\n  dropdownProps?: Omit<DropdownProps, 'items' | 'children' | 'disabled'>;\n}\nexport function SplitButton(incomingProps: SplitButtonProps): ReactElement {\n  const { items, menuLabel, dropdownProps, ...rawProps } = useComponentProps(\n    'SplitButton',\n    incomingProps,\n  );\n  const { children, className, ...props } = useComponentProps('Button', rawProps);\n  const inactive = Boolean(props.disabled || props.loading);\n  const t = useText();\n  return (\n    <ButtonGroupControl className={classes('leaf-split-button', className)}>\n      <ButtonControl {...props}>{children}</ButtonControl>\n      <Dropdown {...dropdownProps} items={items} disabled={inactive}>\n        <ButtonControl\n          type=\"button\"\n          disabled={inactive}\n          variant={props.variant}\n          size={props.size}\n          danger={props.danger}\n          startIcon={<ChevronDown size={16} />}\n          aria-label={menuLabel ?? t('button.moreActions')}\n        />\n      </Dropdown>\n    </ButtonGroupControl>\n  );\n}\n\nexport function ButtonGroup(rawProps: ButtonGroupProps) {\n  const props = useComponentProps('ButtonGroup', rawProps);\n  return <ButtonGroupControl {...props} />;\n}\n"],"names":["ButtonGroupControl","size","disabled","attached","children","className","props","classes","Children","child","isValidElement","cloneElement","SplitButton","incomingProps","items","menuLabel","dropdownProps","rawProps","useComponentProps","inactive","Boolean","t","useText","ButtonControl","Dropdown","ChevronDown","ButtonGroup"],"mappings":";;;;;;;;;;;AAoBO,SAASA,mBAAmB,EACjCC,IAAI,EACJC,QAAQ,EACRC,WAAW,IAAI,EACfC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACc;IACjB,OAAO,WAAP,GACE,IAAC;QACE,GAAGA,KAAK;QACT,UAAUJ;QACV,WAAWK,QAAQ,qBAAqBJ,YAAY,+BAA+BE;kBAElFG,SAAS,GAAG,CAACJ,UAAU,CAACK,QAAAA,WAAAA,GACvBC,eAA4BD,SAAAA,WAAAA,GACxBE,aAAaF,OAAO;gBAClB,MAAMA,MAAM,KAAK,CAAC,IAAI,IAAIR;gBAC1B,UAAUC,YAAYO,MAAM,KAAK,CAAC,QAAQ;YAC5C,KACAA;;AAIZ;AAMO,SAASG,YAAYC,aAA+B;IACzD,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,aAAa,EAAE,GAAGC,UAAU,GAAGC,kBACvD,eACAL;IAEF,MAAM,EAAET,QAAQ,EAAEC,SAAS,EAAE,GAAGC,OAAO,GAAGY,kBAAkB,UAAUD;IACtE,MAAME,WAAWC,QAAQd,MAAM,QAAQ,IAAIA,MAAM,OAAO;IACxD,MAAMe,IAAIC;IACV,OAAO,WAAP,GACE,KAACtB,oBAAkBA;QAAC,WAAWO,QAAQ,qBAAqBF;;0BAC1D,IAACkB,eAAaA;gBAAE,GAAGjB,KAAK;0BAAGF;;0BAC3B,IAACoB,iBAAQA;gBAAE,GAAGR,aAAa;gBAAE,OAAOF;gBAAO,UAAUK;0BACnD,kBAACI,eAAaA;oBACZ,MAAK;oBACL,UAAUJ;oBACV,SAASb,MAAM,OAAO;oBACtB,MAAMA,MAAM,IAAI;oBAChB,QAAQA,MAAM,MAAM;oBACpB,yBAAW,IAACmB,aAAWA;wBAAC,MAAM;;oBAC9B,cAAYV,aAAaM,EAAE;;;;;AAKrC;AAEO,SAASK,YAAYT,QAA0B;IACpD,MAAMX,QAAQY,kBAAkB,eAAeD;IAC/C,OAAO,WAAP,GAAO,IAACjB,oBAAkBA;QAAE,GAAGM,KAAK;;AACtC"}

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

@@ -1,11 +1,14 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/calendar.css';
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { useLeafConfig } from "../config-provider/context.js";
 import { CalendarPanel } from "../shared/calendar.js";
 import { classes } from "../shared/classes.js";
-function Calendar({ value, defaultValue, onChange, visibleDate, onVisibleChange, mode = 'date', fullscreen = true, minDate, maxDate, disabledDate, cellRender, headerExtra, showToday = true, className, 'aria-label': label, ...props }) {
+function Calendar(rawProps) {
+    const { value, defaultValue, onChange, visibleDate, onVisibleChange, mode = 'date', fullscreen = true, minDate, maxDate, disabledDate, cellRender, headerExtra, showToday = true, className, 'aria-label': label, ...props } = useComponentProps('Calendar', rawProps);
     const { messages } = useLeafConfig();
     const [internal, setInternal] = useState(defaultValue);
     const selected = value ?? internal;
@@ -23,7 +26,7 @@ function Calendar({ value, defaultValue, onChange, visibleDate, onVisibleChange,
     ]);
     return /*#__PURE__*/ jsx("section", {
         ...props,
-        "aria-label": label ?? messages.calendar,
+        "aria-label": label ?? messages.calendar.label,
         className: classes('leaf-calendar-view', fullscreen && 'leaf-calendar-view--full', className),
         children: /*#__PURE__*/ jsx(CalendarPanel, {
             picker: mode,

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

@@ -1 +1 @@
-{"version":3,"file":"calendar/calendar.js","sources":["../../../../../src/calendar/calendar.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useEffect, useState } from 'react';\nimport { useLeafConfig } from '../config-provider/context';\nimport { CalendarPanel } from '../shared/calendar';\nimport { classes } from '../shared/classes';\n\nexport interface CalendarProps\n  extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'defaultValue'> {\n  value?: Date;\n  defaultValue?: Date;\n  onChange?: (date: Date) => void;\n  visibleDate?: Date;\n  onVisibleChange?: (date: Date) => void;\n  mode?: 'date' | 'month';\n  fullscreen?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n  disabledDate?: (date: Date) => boolean;\n  cellRender?: (date: Date) => ReactNode;\n  headerExtra?: ReactNode;\n  showToday?: boolean;\n}\nexport function Calendar({\n  value,\n  defaultValue,\n  onChange,\n  visibleDate,\n  onVisibleChange,\n  mode = 'date',\n  fullscreen = true,\n  minDate,\n  maxDate,\n  disabledDate,\n  cellRender,\n  headerExtra,\n  showToday = true,\n  className,\n  'aria-label': label,\n  ...props\n}: CalendarProps) {\n  const { messages } = useLeafConfig();\n  const [internal, setInternal] = useState(defaultValue);\n  const selected = value ?? internal;\n  const [visible, setVisible] = useState(\n    visibleDate ?? defaultValue ?? value ?? minDate ?? new Date(),\n  );\n  const changeVisible = (next: Date) => {\n    if (visibleDate === undefined) setVisible(next);\n    onVisibleChange?.(next);\n  };\n  const valueTime = value?.getTime();\n  useEffect(() => {\n    if (valueTime !== undefined && visibleDate === undefined) setVisible(new Date(valueTime));\n  }, [valueTime, visibleDate]);\n  return (\n    <section\n      {...props}\n      aria-label={label ?? messages.calendar}\n      className={classes('leaf-calendar-view', fullscreen && 'leaf-calendar-view--full', className)}\n    >\n      <CalendarPanel\n        picker={mode}\n        value={selected}\n        visibleDate={visibleDate ?? visible}\n        onVisibleChange={changeVisible}\n        minDate={minDate}\n        maxDate={maxDate}\n        disabledDate={disabledDate}\n        cellRender={cellRender}\n        headerExtra={headerExtra}\n        showToday={fullscreen && showToday}\n        onChange={(next) => {\n          if (value === undefined) setInternal(next);\n          changeVisible(next);\n          onChange?.(next);\n        }}\n      />\n    </section>\n  );\n}\n"],"names":["Calendar","value","defaultValue","onChange","visibleDate","onVisibleChange","mode","fullscreen","minDate","maxDate","disabledDate","cellRender","headerExtra","showToday","className","label","props","messages","useLeafConfig","internal","setInternal","useState","selected","visible","setVisible","Date","changeVisible","next","undefined","valueTime","useEffect","classes","CalendarPanel"],"mappings":";;;;;;;AAqBO,SAASA,SAAS,EACvBC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,WAAW,EACXC,eAAe,EACfC,OAAO,MAAM,EACbC,aAAa,IAAI,EACjBC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,YAAY,IAAI,EAChBC,SAAS,EACT,cAAcC,KAAK,EACnB,GAAGC,OACW;IACd,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IACrB,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAASnB;IACzC,MAAMoB,WAAWrB,SAASkB;IAC1B,MAAM,CAACI,SAASC,WAAW,GAAGH,SAC5BjB,eAAeF,gBAAgBD,SAASO,WAAW,IAAIiB;IAEzD,MAAMC,gBAAgB,CAACC;QACrB,IAAIvB,AAAgBwB,WAAhBxB,aAA2BoB,WAAWG;QAC1CtB,kBAAkBsB;IACpB;IACA,MAAME,YAAY5B,OAAO;IACzB6B,UAAU;QACR,IAAID,AAAcD,WAAdC,aAA2BzB,AAAgBwB,WAAhBxB,aAA2BoB,WAAW,IAAIC,KAAKI;IAChF,GAAG;QAACA;QAAWzB;KAAY;IAC3B,OAAO,WAAP,GACE,IAAC;QACE,GAAGY,KAAK;QACT,cAAYD,SAASE,SAAS,QAAQ;QACtC,WAAWc,QAAQ,sBAAsBxB,cAAc,4BAA4BO;kBAEnF,kBAACkB,eAAaA;YACZ,QAAQ1B;YACR,OAAOgB;YACP,aAAalB,eAAemB;YAC5B,iBAAiBG;YACjB,SAASlB;YACT,SAASC;YACT,cAAcC;YACd,YAAYC;YACZ,aAAaC;YACb,WAAWL,cAAcM;YACzB,UAAU,CAACc;gBACT,IAAI1B,AAAU2B,WAAV3B,OAAqBmB,YAAYO;gBACrCD,cAAcC;gBACdxB,WAAWwB;YACb;;;AAIR"}
+{"version":3,"file":"calendar/calendar.js","sources":["../../../../../src/calendar/calendar.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useEffect, useState } from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useLeafConfig } from '../config-provider/context';\nimport { CalendarPanel } from '../shared/calendar';\nimport { classes } from '../shared/classes';\n\nexport interface CalendarProps\n  extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'defaultValue'> {\n  value?: Date;\n  defaultValue?: Date;\n  onChange?: (date: Date) => void;\n  visibleDate?: Date;\n  onVisibleChange?: (date: Date) => void;\n  mode?: 'date' | 'month';\n  fullscreen?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n  disabledDate?: (date: Date) => boolean;\n  cellRender?: (date: Date) => ReactNode;\n  headerExtra?: ReactNode;\n  showToday?: boolean;\n}\nexport function Calendar(rawProps: CalendarProps) {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    visibleDate,\n    onVisibleChange,\n    mode = 'date',\n    fullscreen = true,\n    minDate,\n    maxDate,\n    disabledDate,\n    cellRender,\n    headerExtra,\n    showToday = true,\n    className,\n    'aria-label': label,\n    ...props\n  } = useComponentProps('Calendar', rawProps);\n  const { messages } = useLeafConfig();\n  const [internal, setInternal] = useState(defaultValue);\n  const selected = value ?? internal;\n  const [visible, setVisible] = useState(\n    visibleDate ?? defaultValue ?? value ?? minDate ?? new Date(),\n  );\n  const changeVisible = (next: Date) => {\n    if (visibleDate === undefined) setVisible(next);\n    onVisibleChange?.(next);\n  };\n  const valueTime = value?.getTime();\n  useEffect(() => {\n    if (valueTime !== undefined && visibleDate === undefined) setVisible(new Date(valueTime));\n  }, [valueTime, visibleDate]);\n  return (\n    <section\n      {...props}\n      aria-label={label ?? messages.calendar.label}\n      className={classes('leaf-calendar-view', fullscreen && 'leaf-calendar-view--full', className)}\n    >\n      <CalendarPanel\n        picker={mode}\n        value={selected}\n        visibleDate={visibleDate ?? visible}\n        onVisibleChange={changeVisible}\n        minDate={minDate}\n        maxDate={maxDate}\n        disabledDate={disabledDate}\n        cellRender={cellRender}\n        headerExtra={headerExtra}\n        showToday={fullscreen && showToday}\n        onChange={(next) => {\n          if (value === undefined) setInternal(next);\n          changeVisible(next);\n          onChange?.(next);\n        }}\n      />\n    </section>\n  );\n}\n"],"names":["Calendar","rawProps","value","defaultValue","onChange","visibleDate","onVisibleChange","mode","fullscreen","minDate","maxDate","disabledDate","cellRender","headerExtra","showToday","className","label","props","useComponentProps","messages","useLeafConfig","internal","setInternal","useState","selected","visible","setVisible","Date","changeVisible","next","undefined","valueTime","useEffect","classes","CalendarPanel"],"mappings":";;;;;;;;;AAsBO,SAASA,SAASC,QAAuB;IAC9C,MAAM,EACJC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,WAAW,EACXC,eAAe,EACfC,OAAO,MAAM,EACbC,aAAa,IAAI,EACjBC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,YAAY,IAAI,EAChBC,SAAS,EACT,cAAcC,KAAK,EACnB,GAAGC,OACJ,GAAGC,kBAAkB,YAAYjB;IAClC,MAAM,EAAEkB,QAAQ,EAAE,GAAGC;IACrB,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAASpB;IACzC,MAAMqB,WAAWtB,SAASmB;IAC1B,MAAM,CAACI,SAASC,WAAW,GAAGH,SAC5BlB,eAAeF,gBAAgBD,SAASO,WAAW,IAAIkB;IAEzD,MAAMC,gBAAgB,CAACC;QACrB,IAAIxB,AAAgByB,WAAhBzB,aAA2BqB,WAAWG;QAC1CvB,kBAAkBuB;IACpB;IACA,MAAME,YAAY7B,OAAO;IACzB8B,UAAU;QACR,IAAID,AAAcD,WAAdC,aAA2B1B,AAAgByB,WAAhBzB,aAA2BqB,WAAW,IAAIC,KAAKI;IAChF,GAAG;QAACA;QAAW1B;KAAY;IAC3B,OAAO,WAAP,GACE,IAAC;QACE,GAAGY,KAAK;QACT,cAAYD,SAASG,SAAS,QAAQ,CAAC,KAAK;QAC5C,WAAWc,QAAQ,sBAAsBzB,cAAc,4BAA4BO;kBAEnF,kBAACmB,eAAaA;YACZ,QAAQ3B;YACR,OAAOiB;YACP,aAAanB,eAAeoB;YAC5B,iBAAiBG;YACjB,SAASnB;YACT,SAASC;YACT,cAAcC;YACd,YAAYC;YACZ,aAAaC;YACb,WAAWL,cAAcM;YACzB,UAAU,CAACe;gBACT,IAAI3B,AAAU4B,WAAV5B,OAAqBoB,YAAYO;gBACrCD,cAAcC;gBACdzB,WAAWyB;YACb;;;AAIR"}

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

@@ -1,23 +1,36 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/card.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { classes } from "../shared/classes.js";
 import { useContentTransition } from "../shared/presence.js";
-import { Skeleton } from "../skeleton/index.js";
-function Card({ title, description, extra, cover, footer, loading = false, bordered = true, divided = false, hoverable = false, size = 'md', children, className, ...props }) {
+import { SkeletonControl } from "../skeleton/skeleton.js";
+import { TabsControl } from "../tabs/tabs.js";
+function Card(rawProps) {
+    const { title, description, extra, tabs, cover, footer, loading = false, bordered = true, divided = false, size = 'md', children, className, ...props } = useComponentProps('Card', rawProps);
     const body = useRef(null);
     useContentTransition(body, loading ? 'loading' : 'content');
+    const hasTabs = Boolean(tabs?.items.length);
+    const hasHeading = null != title || null != description;
+    const tabExtra = hasHeading || null == extra ? tabs?.extra : /*#__PURE__*/ jsxs("div", {
+        className: "leaf-card__tab-extra",
+        children: [
+            tabs?.extra,
+            extra
+        ]
+    });
     return /*#__PURE__*/ jsxs("div", {
         ...props,
         "aria-busy": loading || void 0,
-        className: classes('leaf-card', `leaf-card--${size}`, bordered && 'leaf-card--bordered', divided && 'leaf-card--divided', hoverable && 'leaf-card--hoverable', className),
+        className: classes('leaf-card', `leaf-card--${size}`, bordered && 'leaf-card--bordered', divided && 'leaf-card--divided', hasTabs && 'leaf-card--tabbed', className),
         children: [
             null != cover && /*#__PURE__*/ jsx("div", {
                 className: "leaf-card__cover",
                 children: cover
             }),
-            (null != title || null != description || null != extra) && /*#__PURE__*/ jsxs("div", {
+            (hasHeading || !hasTabs && null != extra) && /*#__PURE__*/ jsxs("div", {
                 className: "leaf-card__header",
                 children: [
                     (null != title || null != description) && /*#__PURE__*/ jsxs("div", {
@@ -39,10 +52,33 @@ function Card({ title, description, extra, cover, footer, loading = false, borde
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx("div", {
+            hasTabs && tabs && /*#__PURE__*/ jsx(TabsControl, {
+                ...tabs,
+                type: "line",
+                placement: "top",
+                size: tabs.size ?? size,
+                "aria-label": tabs['aria-label'] ?? ('string' == typeof title ? title : void 0),
+                extra: tabExtra,
+                className: classes('leaf-card__tabs', tabs.className),
+                items: tabs.items.map((item)=>({
+                        ...item,
+                        children: /*#__PURE__*/ jsx(SkeletonControl, {
+                            loading: loading,
+                            children: item.children
+                        })
+                    })),
+                onReorder: tabs.onReorder && ((items)=>{
+                    const originals = new Map(tabs.items.map((item)=>[
+                            item.key,
+                            item
+                        ]));
+                    tabs.onReorder?.(items.map((item)=>originals.get(item.key) ?? item));
+                })
+            }),
+            (!hasTabs || null != children) && /*#__PURE__*/ jsx("div", {
                 className: "leaf-card__body",
                 ref: body,
-                children: /*#__PURE__*/ jsx(Skeleton, {
+                children: /*#__PURE__*/ jsx(SkeletonControl, {
                     loading: loading,
                     children: children
                 })

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

@@ -1 +1 @@
-{"version":3,"file":"card/card.js","sources":["../../../../../src/card/card.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useRef } from 'react';\nimport { classes } from '../shared/classes';\nimport { useContentTransition } from '../shared/presence';\nimport { Skeleton } from '../skeleton';\n\nexport interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  title?: ReactNode;\n  description?: ReactNode;\n  extra?: ReactNode;\n  cover?: ReactNode;\n  footer?: ReactNode;\n  loading?: boolean;\n  bordered?: boolean;\n  /** Opt into section dividers and a muted footer surface. */\n  divided?: boolean;\n  hoverable?: boolean;\n  size?: 'sm' | 'md';\n}\nexport function Card({\n  title,\n  description,\n  extra,\n  cover,\n  footer,\n  loading = false,\n  bordered = true,\n  divided = false,\n  hoverable = false,\n  size = 'md',\n  children,\n  className,\n  ...props\n}: CardProps) {\n  const body = useRef<HTMLDivElement>(null);\n  useContentTransition(body, loading ? 'loading' : 'content');\n  return (\n    <div\n      {...props}\n      aria-busy={loading || undefined}\n      className={classes(\n        'leaf-card',\n        `leaf-card--${size}`,\n        bordered && 'leaf-card--bordered',\n        divided && 'leaf-card--divided',\n        hoverable && 'leaf-card--hoverable',\n        className,\n      )}\n    >\n      {cover != null && <div className=\"leaf-card__cover\">{cover}</div>}\n      {(title != null || description != null || extra != null) && (\n        <div className=\"leaf-card__header\">\n          {(title != null || description != null) && (\n            <div className=\"leaf-card__heading\">\n              {title != null && <h3 className=\"leaf-card__title\">{title}</h3>}\n              {description != null && <div className=\"leaf-card__description\">{description}</div>}\n            </div>\n          )}\n          {extra != null && <div className=\"leaf-card__extra\">{extra}</div>}\n        </div>\n      )}\n      <div className=\"leaf-card__body\" ref={body}>\n        <Skeleton loading={loading}>{children}</Skeleton>\n      </div>\n      {footer != null && <div className=\"leaf-card__footer\">{footer}</div>}\n    </div>\n  );\n}\n"],"names":["Card","title","description","extra","cover","footer","loading","bordered","divided","hoverable","size","children","className","props","body","useRef","useContentTransition","undefined","classes","Skeleton"],"mappings":";;;;;;;AAkBO,SAASA,KAAK,EACnBC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,UAAU,KAAK,EACfC,WAAW,IAAI,EACfC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,OAAO,IAAI,EACXC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACO;IACV,MAAMC,OAAOC,OAAuB;IACpCC,qBAAqBF,MAAMR,UAAU,YAAY;IACjD,OAAO,WAAP,GACE,KAAC;QACE,GAAGO,KAAK;QACT,aAAWP,WAAWW;QACtB,WAAWC,QACT,aACA,CAAC,WAAW,EAAER,MAAM,EACpBH,YAAY,uBACZC,WAAW,sBACXC,aAAa,wBACbG;;YAGQ,QAATR,SAAiB,WAAR,GAAQ,IAAC;gBAAI,WAAU;0BAAoBA;;YACnDH,CAAAA,AAAS,QAATA,SAAiBC,AAAe,QAAfA,eAAuBC,AAAS,QAATA,KAAY,mBACpD,KAAC;gBAAI,WAAU;;oBACXF,CAAAA,AAAS,QAATA,SAAiBC,AAAe,QAAfA,WAAkB,mBACnC,KAAC;wBAAI,WAAU;;4BACH,QAATD,SAAiB,WAAR,GAAQ,IAAC;gCAAG,WAAU;0CAAoBA;;4BACpC,QAAfC,eAAuB,WAAR,GAAQ,IAAC;gCAAI,WAAU;0CAA0BA;;;;oBAG3D,QAATC,SAAiB,WAAR,GAAQ,IAAC;wBAAI,WAAU;kCAAoBA;;;;0BAGzD,IAAC;gBAAI,WAAU;gBAAkB,KAAKW;0BACpC,kBAACK,UAAQA;oBAAC,SAASb;8BAAUK;;;YAEpB,QAAVN,UAAkB,WAAR,GAAQ,IAAC;gBAAI,WAAU;0BAAqBA;;;;AAG7D"}
+{"version":3,"file":"card/card.js","sources":["../../../../../src/card/card.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';\nimport { SkeletonControl as Skeleton } from '../skeleton/skeleton';\nimport type { TabsProps } from '../tabs';\nimport { TabsControl as Tabs } from '../tabs/tabs';\n\n/** Horizontal line tabs integrated with the card heading and content spacing. */\nexport interface CardTabsProps extends Omit<TabsProps, 'type' | 'placement' | 'children'> {}\n\nexport interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  title?: ReactNode;\n  description?: ReactNode;\n  extra?: ReactNode;\n  /** Tabs replace the heading when no title is supplied, otherwise sit below it. */\n  tabs?: CardTabsProps;\n  cover?: ReactNode;\n  footer?: ReactNode;\n  loading?: boolean;\n  bordered?: boolean;\n  /** Opt into section dividers and a muted footer surface. */\n  divided?: boolean;\n  /** Card spacing, heading typography and height, and the default size of embedded tabs. */\n  size?: 'sm' | 'md' | 'lg';\n}\nexport function Card(rawProps: CardProps) {\n  const {\n    title,\n    description,\n    extra,\n    tabs,\n    cover,\n    footer,\n    loading = false,\n    bordered = true,\n    divided = false,\n    size = 'md',\n    children,\n    className,\n    ...props\n  } = useComponentProps('Card', rawProps);\n  const body = useRef<HTMLDivElement>(null);\n  useContentTransition(body, loading ? 'loading' : 'content');\n  const hasTabs = Boolean(tabs?.items.length);\n  const hasHeading = title != null || description != null;\n  const tabExtra =\n    !hasHeading && extra != null ? (\n      <div className=\"leaf-card__tab-extra\">\n        {tabs?.extra}\n        {extra}\n      </div>\n    ) : (\n      tabs?.extra\n    );\n  return (\n    <div\n      {...props}\n      aria-busy={loading || undefined}\n      className={classes(\n        'leaf-card',\n        `leaf-card--${size}`,\n        bordered && 'leaf-card--bordered',\n        divided && 'leaf-card--divided',\n        hasTabs && 'leaf-card--tabbed',\n        className,\n      )}\n    >\n      {cover != null && <div className=\"leaf-card__cover\">{cover}</div>}\n      {(hasHeading || (!hasTabs && extra != null)) && (\n        <div className=\"leaf-card__header\">\n          {(title != null || description != null) && (\n            <div className=\"leaf-card__heading\">\n              {title != null && <h3 className=\"leaf-card__title\">{title}</h3>}\n              {description != null && <div className=\"leaf-card__description\">{description}</div>}\n            </div>\n          )}\n          {extra != null && <div className=\"leaf-card__extra\">{extra}</div>}\n        </div>\n      )}\n      {hasTabs && tabs && (\n        <Tabs\n          {...tabs}\n          type=\"line\"\n          placement=\"top\"\n          size={tabs.size ?? size}\n          aria-label={tabs['aria-label'] ?? (typeof title === 'string' ? title : undefined)}\n          extra={tabExtra}\n          className={classes('leaf-card__tabs', tabs.className)}\n          items={tabs.items.map((item) => ({\n            ...item,\n            children: <Skeleton loading={loading}>{item.children}</Skeleton>,\n          }))}\n          onReorder={\n            tabs.onReorder &&\n            ((items) => {\n              const originals = new Map(tabs.items.map((item) => [item.key, item]));\n              tabs.onReorder?.(items.map((item) => originals.get(item.key) ?? item));\n            })\n          }\n        />\n      )}\n      {(!hasTabs || children != null) && (\n        <div className=\"leaf-card__body\" ref={body}>\n          <Skeleton loading={loading}>{children}</Skeleton>\n        </div>\n      )}\n      {footer != null && <div className=\"leaf-card__footer\">{footer}</div>}\n    </div>\n  );\n}\n"],"names":["Card","rawProps","title","description","extra","tabs","cover","footer","loading","bordered","divided","size","children","className","props","useComponentProps","body","useRef","useContentTransition","hasTabs","Boolean","hasHeading","tabExtra","undefined","classes","Tabs","item","Skeleton","items","originals","Map"],"mappings":";;;;;;;;;;AA0BO,SAASA,KAAKC,QAAmB;IACtC,MAAM,EACJC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,IAAI,EACJC,KAAK,EACLC,MAAM,EACNC,UAAU,KAAK,EACfC,WAAW,IAAI,EACfC,UAAU,KAAK,EACfC,OAAO,IAAI,EACXC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACJ,GAAGC,kBAAkB,QAAQd;IAC9B,MAAMe,OAAOC,OAAuB;IACpCC,qBAAqBF,MAAMR,UAAU,YAAY;IACjD,MAAMW,UAAUC,QAAQf,MAAM,MAAM;IACpC,MAAMgB,aAAanB,AAAS,QAATA,SAAiBC,AAAe,QAAfA;IACpC,MAAMmB,WACJ,AAACD,cAAcjB,AAAS,QAATA,QAMbC,MAAM,QANuB,WAAP,GACtB,KAAC;QAAI,WAAU;;YACZA,MAAM;YACND;;;IAKP,OAAO,WAAP,GACE,KAAC;QACE,GAAGU,KAAK;QACT,aAAWN,WAAWe;QACtB,WAAWC,QACT,aACA,CAAC,WAAW,EAAEb,MAAM,EACpBF,YAAY,uBACZC,WAAW,sBACXS,WAAW,qBACXN;;YAGQ,QAATP,SAAiB,WAAR,GAAQ,IAAC;gBAAI,WAAU;0BAAoBA;;YACnDe,CAAAA,cAAe,CAACF,WAAWf,AAAS,QAATA,KAAY,KAAC,cACxC,KAAC;gBAAI,WAAU;;oBACXF,CAAAA,AAAS,QAATA,SAAiBC,AAAe,QAAfA,WAAkB,mBACnC,KAAC;wBAAI,WAAU;;4BACH,QAATD,SAAiB,WAAR,GAAQ,IAAC;gCAAG,WAAU;0CAAoBA;;4BACpC,QAAfC,eAAuB,WAAR,GAAQ,IAAC;gCAAI,WAAU;0CAA0BA;;;;oBAG3D,QAATC,SAAiB,WAAR,GAAQ,IAAC;wBAAI,WAAU;kCAAoBA;;;;YAGxDe,WAAWd,QAAQ,WAARA,GACV,IAACoB,aAAIA;gBACF,GAAGpB,IAAI;gBACR,MAAK;gBACL,WAAU;gBACV,MAAMA,KAAK,IAAI,IAAIM;gBACnB,cAAYN,IAAI,CAAC,aAAa,IAAK,CAAiB,YAAjB,OAAOH,QAAqBA,QAAQqB,MAAQ;gBAC/E,OAAOD;gBACP,WAAWE,QAAQ,mBAAmBnB,KAAK,SAAS;gBACpD,OAAOA,KAAK,KAAK,CAAC,GAAG,CAAC,CAACqB,OAAU;wBAC/B,GAAGA,IAAI;wBACP,UAAU,WAAV,GAAU,IAACC,iBAAQA;4BAAC,SAASnB;sCAAUkB,KAAK,QAAQ;;oBACtD;gBACA,WACErB,KAAK,SAAS,IACZ,EAAAuB;oBACA,MAAMC,YAAY,IAAIC,IAAIzB,KAAK,KAAK,CAAC,GAAG,CAAC,CAACqB,OAAS;4BAACA,KAAK,GAAG;4BAAEA;yBAAK;oBACnErB,KAAK,SAAS,GAAGuB,MAAM,GAAG,CAAC,CAACF,OAASG,UAAU,GAAG,CAACH,KAAK,GAAG,KAAKA;gBAClE;;YAIJ,EAACP,WAAWP,AAAY,QAAZA,QAAe,mBAC3B,IAAC;gBAAI,WAAU;gBAAkB,KAAKI;0BACpC,kBAACW,iBAAQA;oBAAC,SAASnB;8BAAUI;;;YAGtB,QAAVL,UAAkB,WAAR,GAAQ,IAAC;gBAAI,WAAU;0BAAqBA;;;;AAG7D"}

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

@@ -1,16 +1,21 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/carousel.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Children, forwardRef, isValidElement, useEffect, useId, useImperativeHandle, useLayoutEffect, 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";
 import { animateMotion, useMotionEnabled } from "../shared/motion.js";
 import { useControllable } from "../shared/use-controllable.js";
+import { useFormattedText } from "../shared/use-formatted-text.js";
 import { useText } from "../shared/use-text.js";
 const useBrowserLayoutEffect = "u" < typeof window ? useEffect : useLayoutEffect;
-const carousel_Carousel = /*#__PURE__*/ forwardRef(function({ activeIndex, defaultActiveIndex = 0, onChange, arrows = true, dots = true, autoplay = false, infinite = true, pauseOnHover = true, children, className, onKeyDown, ...props }, ref) {
+const carousel_Carousel = /*#__PURE__*/ forwardRef(function(rawProps, ref) {
+    const { activeIndex, defaultActiveIndex = 0, onChange, arrows = true, dots = true, autoplay = false, infinite = true, pauseOnHover = true, children, className, onKeyDown, ...props } = useComponentProps('Carousel', rawProps);
+    const format = useFormattedText();
     const t = useText(), config = useLeafConfig(), id = useId();
     const slides = Children.toArray(children), count = slides.length;
     const [requested, setIndex] = useControllable(activeIndex, defaultActiveIndex, onChange);
@@ -49,8 +54,8 @@ const carousel_Carousel = /*#__PURE__*/ forwardRef(function({ activeIndex, defau
     ]);
     return /*#__PURE__*/ jsxs("section", {
         ...props,
-        "aria-roledescription": "carousel",
-        "aria-label": props['aria-label'] ?? t('轮播', 'Carousel'),
+        "aria-roledescription": t('carousel.role'),
+        "aria-label": props['aria-label'] ?? t('carousel.carousel'),
         className: classes('leaf-carousel', className),
         onPointerEnter: ()=>{
             if (pauseOnHover) setPaused(true);
@@ -97,7 +102,7 @@ const carousel_Carousel = /*#__PURE__*/ forwardRef(function({ activeIndex, defau
                     className: "leaf-carousel__track",
                     children: slides.map((slide, position)=>/*#__PURE__*/ jsx("fieldset", {
                             id: `${id}-${position}`,
-                            "aria-roledescription": "slide",
+                            "aria-roledescription": t('carousel.slide'),
                             "aria-label": `${position + 1} / ${count}`,
                             "aria-hidden": position !== index || void 0,
                             ...inertProps(position !== index),
@@ -115,7 +120,7 @@ const carousel_Carousel = /*#__PURE__*/ forwardRef(function({ activeIndex, defau
                     type: "button",
                     className: classes('leaf-carousel__arrow', -1 === direction ? 'leaf-carousel__arrow--previous' : 'leaf-carousel__arrow--next'),
                     disabled: !infinite && (-1 === direction ? 0 === index : index === count - 1),
-                    "aria-label": -1 === direction ? t('上一张', 'Previous slide') : t('下一张', 'Next slide'),
+                    "aria-label": -1 === direction ? t('carousel.previousSlide') : t('carousel.nextSlide'),
                     onClick: ()=>go(index + direction),
                     children: -1 === direction ? /*#__PURE__*/ jsx(ChevronLeft, {
                         size: 20
@@ -127,7 +132,9 @@ const carousel_Carousel = /*#__PURE__*/ forwardRef(function({ activeIndex, defau
                 className: "leaf-carousel__dots",
                 children: slides.map((slide, position)=>/*#__PURE__*/ jsx("button", {
                         type: "button",
-                        "aria-label": `${t('转到', 'Go to')} ${position + 1}`,
+                        "aria-label": format('carousel.goTo', {
+                            index: position + 1
+                        }),
                         "aria-current": position === index ? 'true' : void 0,
                         "aria-controls": `${id}-${position}`,
                         onClick: ()=>go(position)

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

@@ -1 +1 @@
-{"version":3,"file":"carousel/carousel.js","sources":["../../../../../src/carousel/carousel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  Children,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type MutableRefObject,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useLeafConfig } from '../config-provider/context';\nimport { classes } from '../shared/classes';\nimport { inertProps } from '../shared/inert';\nimport { animateMotion, useMotionEnabled } from '../shared/motion';\nimport { useControllable } from '../shared/use-controllable';\nimport { useText } from '../shared/use-text';\n\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\nexport interface CarouselHandle {\n  goTo: (index: number) => void;\n  next: () => void;\n  previous: () => void;\n}\nexport interface CarouselProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  activeIndex?: number;\n  defaultActiveIndex?: number;\n  onChange?: (index: number) => void;\n  arrows?: boolean;\n  dots?: boolean;\n  autoplay?: boolean | number;\n  infinite?: boolean;\n  pauseOnHover?: boolean;\n}\nexport const Carousel = forwardRef<CarouselHandle, CarouselProps>(function Carousel(\n  {\n    activeIndex,\n    defaultActiveIndex = 0,\n    onChange,\n    arrows = true,\n    dots = true,\n    autoplay = false,\n    infinite = true,\n    pauseOnHover = true,\n    children,\n    className,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  const t = useText(),\n    config = useLeafConfig(),\n    id = useId();\n  const slides = Children.toArray(children),\n    count = slides.length;\n  const [requested, setIndex] = useControllable(activeIndex, defaultActiveIndex, onChange);\n  const index = Math.min(Math.max(0, requested), Math.max(0, count - 1));\n  const [paused, setPaused] = useState(false);\n  const motion = useMotionEnabled();\n  const track = useRef<HTMLDivElement>(null);\n  const moveDirection = useRef(0);\n  useCarouselMotion(track, index, moveDirection, config.direction, motion);\n  const latest = useRef(index);\n  latest.current = index;\n  const go = (next: number) => {\n    if (!count) return;\n    moveDirection.current = Math.sign(next - index);\n    setIndex(infinite ? ((next % count) + count) % count : Math.max(0, Math.min(count - 1, next)));\n  };\n  const callback = useRef(go);\n  callback.current = go;\n  const pointer = useRef<number | undefined>(undefined);\n  useImperativeHandle(ref, () => ({\n    goTo: go,\n    next: () => go(index + 1),\n    previous: () => go(index - 1),\n  }));\n  useEffect(() => {\n    if (!autoplay || paused || !motion || count < 2) return;\n    const timer = setInterval(\n      () => {\n        if (!document.hidden) callback.current(latest.current + 1);\n      },\n      typeof autoplay === 'number' ? Math.max(500, autoplay) : 4000,\n    );\n    return () => clearInterval(timer);\n  }, [autoplay, paused, count, motion]);\n  return (\n    <section\n      {...props}\n      aria-roledescription=\"carousel\"\n      aria-label={props['aria-label'] ?? t('轮播', 'Carousel')}\n      className={classes('leaf-carousel', className)}\n      onPointerEnter={() => {\n        if (pauseOnHover) setPaused(true);\n      }}\n      onPointerLeave={() => setPaused(false)}\n      onFocus={() => setPaused(true)}\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) setPaused(false);\n      }}\n      onPointerDown={(event) => {\n        if (!(event.target as HTMLElement).closest('button,a,input'))\n          pointer.current = event.clientX;\n      }}\n      onPointerUp={(event) => {\n        if (pointer.current === undefined) return;\n        const distance = event.clientX - pointer.current;\n        pointer.current = undefined;\n        if (Math.abs(distance) > 40)\n          go(index + (distance < 0 ? 1 : -1) * (config.direction === 'rtl' ? -1 : 1));\n      }}\n      onPointerCancel={() => {\n        pointer.current = undefined;\n      }}\n      onKeyDown={(event) => {\n        onKeyDown?.(event);\n        if (event.defaultPrevented || (event.target as HTMLElement).matches('input,textarea'))\n          return;\n        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n          event.preventDefault();\n          go(index + (event.key === 'ArrowRight' ? 1 : -1) * (config.direction === 'rtl' ? -1 : 1));\n        }\n        if (event.key === 'Home') {\n          event.preventDefault();\n          go(0);\n        }\n        if (event.key === 'End') {\n          event.preventDefault();\n          go(count - 1);\n        }\n      }}\n      tabIndex={props.tabIndex ?? 0}\n    >\n      <div className=\"leaf-carousel__viewport\">\n        <div ref={track} className=\"leaf-carousel__track\">\n          {slides.map((slide, position) => (\n            <fieldset\n              key={isValidElement(slide) ? slide.key : `slide-${position}`}\n              id={`${id}-${position}`}\n              aria-roledescription=\"slide\"\n              aria-label={`${position + 1} / ${count}`}\n              aria-hidden={position !== index || undefined}\n              {...inertProps(position !== index)}\n              className=\"leaf-carousel__slide\"\n              data-slide-index={position}\n              data-active={position === index || undefined}\n            >\n              {slide}\n            </fieldset>\n          ))}\n        </div>\n      </div>\n      {arrows &&\n        count > 1 &&\n        [-1, 1].map((direction) => (\n          <button\n            key={direction}\n            type=\"button\"\n            className={classes(\n              'leaf-carousel__arrow',\n              direction === -1 ? 'leaf-carousel__arrow--previous' : 'leaf-carousel__arrow--next',\n            )}\n            disabled={!infinite && (direction === -1 ? index === 0 : index === count - 1)}\n            aria-label={\n              direction === -1 ? t('上一张', 'Previous slide') : t('下一张', 'Next slide')\n            }\n            onClick={() => go(index + direction)}\n          >\n            {direction === -1 ? <ChevronLeft size={20} /> : <ChevronRight size={20} />}\n          </button>\n        ))}\n      {dots && count > 1 && (\n        <div className=\"leaf-carousel__dots\">\n          {slides.map((slide, position) => (\n            <button\n              key={isValidElement(slide) ? slide.key : String(slide)}\n              type=\"button\"\n              aria-label={`${t('转到', 'Go to')} ${position + 1}`}\n              aria-current={position === index ? 'true' : undefined}\n              aria-controls={`${id}-${position}`}\n              onClick={() => go(position)}\n            />\n          ))}\n        </div>\n      )}\n      <span className=\"leaf-carousel__status\" aria-live={autoplay && !paused ? 'off' : 'polite'}>\n        {count ? index + 1 : 0} / {count}\n      </span>\n    </section>\n  );\n});\n\nfunction useCarouselMotion(\n  track: React.RefObject<HTMLDivElement | null>,\n  index: number,\n  moveDirection: MutableRefObject<number>,\n  direction: 'ltr' | 'rtl',\n  enabled: boolean,\n) {\n  const previous = useRef({ index, height: 0 });\n  const animations = useRef<Animation[]>([]);\n  const heightAnimation = useRef<Animation | undefined>(undefined);\n  useBrowserLayoutEffect(() => {\n    const host = track.current;\n    if (!host) return;\n    const outgoing = host.querySelector<HTMLElement>(\n      `[data-slide-index=\"${previous.current.index}\"]`,\n    );\n    const incoming = host.querySelector<HTMLElement>(`[data-slide-index=\"${index}\"]`);\n    const interruptedHeight =\n      heightAnimation.current?.playState === 'running'\n        ? host.offsetHeight\n        : previous.current.height;\n    const outgoingStyle = outgoing ? getComputedStyle(outgoing) : null;\n    const incomingStyle = incoming?.dataset.exiting ? getComputedStyle(incoming) : null;\n    const incomingTransform = incomingStyle?.transform;\n    const incomingOpacity = incomingStyle?.opacity;\n    const outgoingTransform = outgoingStyle?.transform ?? 'none';\n    const outgoingOpacity = animations.current.some(\n      (animation) => animation.playState === 'running',\n    )\n      ? (outgoingStyle?.opacity ?? '1')\n      : '1';\n    for (const animation of animations.current) animation.cancel();\n    animations.current = [];\n    heightAnimation.current = undefined;\n    for (const slide of host.querySelectorAll<HTMLElement>('[data-exiting]'))\n      slide.removeAttribute('data-exiting');\n    const height = host.offsetHeight;\n    if (enabled && incoming && previous.current.index !== index) {\n      const sign =\n        (moveDirection.current || Math.sign(index - previous.current.index)) *\n        (direction === 'rtl' ? -1 : 1);\n      const enter = animateMotion(\n        incoming,\n        [\n          {\n            opacity: incomingOpacity ?? 0,\n            transform: incomingTransform ?? `translateX(${sign * 12}%) scale(0.985)`,\n          },\n          { opacity: 1, transform: 'translateX(0) scale(1)' },\n        ],\n        { durationMultiplier: 2 },\n      );\n      if (enter) animations.current.push(enter);\n      if (outgoing) {\n        outgoing.dataset.exiting = 'true';\n        const exit = animateMotion(\n          outgoing,\n          [\n            { opacity: outgoingOpacity, transform: outgoingTransform },\n            { opacity: 0, transform: `translateX(${sign * -12}%) scale(0.985)` },\n          ],\n          { durationMultiplier: 2 },\n        );\n        if (exit) {\n          animations.current.push(exit);\n          exit.addEventListener('finish', () => outgoing.removeAttribute('data-exiting'), {\n            once: true,\n          });\n        } else outgoing.removeAttribute('data-exiting');\n      }\n      if (interruptedHeight > 0 && Math.abs(height - interruptedHeight) > 1) {\n        const resize = animateMotion(\n          host,\n          [{ height: `${interruptedHeight}px` }, { height: `${height}px` }],\n          { durationMultiplier: 2 },\n        );\n        if (resize) {\n          animations.current.push(resize);\n          heightAnimation.current = resize;\n        }\n      }\n    }\n    moveDirection.current = 0;\n    previous.current = { index, height };\n    const observer =\n      typeof ResizeObserver === 'undefined'\n        ? null\n        : new ResizeObserver(() => {\n            if (!animations.current.some((animation) => animation.playState === 'running'))\n              previous.current.height = host.offsetHeight;\n          });\n    if (incoming) observer?.observe(incoming);\n    return () => observer?.disconnect();\n  }, [track, index, moveDirection, direction, enabled]);\n  useEffect(\n    () => () => {\n      for (const animation of animations.current) animation.cancel();\n    },\n    [],\n  );\n}\n"],"names":["useBrowserLayoutEffect","window","useEffect","useLayoutEffect","Carousel","forwardRef","activeIndex","defaultActiveIndex","onChange","arrows","dots","autoplay","infinite","pauseOnHover","children","className","onKeyDown","props","ref","t","useText","config","useLeafConfig","id","useId","slides","Children","count","requested","setIndex","useControllable","index","Math","paused","setPaused","useState","motion","useMotionEnabled","track","useRef","moveDirection","useCarouselMotion","latest","go","next","callback","pointer","undefined","useImperativeHandle","timer","setInterval","document","clearInterval","classes","event","distance","slide","position","inertProps","isValidElement","direction","ChevronLeft","ChevronRight","String","enabled","previous","animations","heightAnimation","host","outgoing","incoming","interruptedHeight","outgoingStyle","getComputedStyle","incomingStyle","incomingTransform","incomingOpacity","outgoingTransform","outgoingOpacity","animation","height","sign","enter","animateMotion","exit","resize","observer","ResizeObserver"],"mappings":"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"}
+{"version":3,"file":"carousel/carousel.js","sources":["../../../../../src/carousel/carousel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  Children,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type MutableRefObject,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n} 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 { animateMotion, useMotionEnabled } from '../shared/motion';\nimport { useControllable } from '../shared/use-controllable';\nimport { useFormattedText } from '../shared/use-formatted-text';\nimport { useText } from '../shared/use-text';\n\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\nexport interface CarouselHandle {\n  goTo: (index: number) => void;\n  next: () => void;\n  previous: () => void;\n}\nexport interface CarouselProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  activeIndex?: number;\n  defaultActiveIndex?: number;\n  onChange?: (index: number) => void;\n  arrows?: boolean;\n  dots?: boolean;\n  autoplay?: boolean | number;\n  infinite?: boolean;\n  pauseOnHover?: boolean;\n}\nexport const Carousel = forwardRef<CarouselHandle, CarouselProps>(function Carousel(\n  rawProps: CarouselProps,\n  ref,\n) {\n  const {\n    activeIndex,\n    defaultActiveIndex = 0,\n    onChange,\n    arrows = true,\n    dots = true,\n    autoplay = false,\n    infinite = true,\n    pauseOnHover = true,\n    children,\n    className,\n    onKeyDown,\n    ...props\n  } = useComponentProps('Carousel', rawProps);\n  const format = useFormattedText();\n  const t = useText(),\n    config = useLeafConfig(),\n    id = useId();\n  const slides = Children.toArray(children),\n    count = slides.length;\n  const [requested, setIndex] = useControllable(activeIndex, defaultActiveIndex, onChange);\n  const index = Math.min(Math.max(0, requested), Math.max(0, count - 1));\n  const [paused, setPaused] = useState(false);\n  const motion = useMotionEnabled();\n  const track = useRef<HTMLDivElement>(null);\n  const moveDirection = useRef(0);\n  useCarouselMotion(track, index, moveDirection, config.direction, motion);\n  const latest = useRef(index);\n  latest.current = index;\n  const go = (next: number) => {\n    if (!count) return;\n    moveDirection.current = Math.sign(next - index);\n    setIndex(infinite ? ((next % count) + count) % count : Math.max(0, Math.min(count - 1, next)));\n  };\n  const callback = useRef(go);\n  callback.current = go;\n  const pointer = useRef<number | undefined>(undefined);\n  useImperativeHandle(ref, () => ({\n    goTo: go,\n    next: () => go(index + 1),\n    previous: () => go(index - 1),\n  }));\n  useEffect(() => {\n    if (!autoplay || paused || !motion || count < 2) return;\n    const timer = setInterval(\n      () => {\n        if (!document.hidden) callback.current(latest.current + 1);\n      },\n      typeof autoplay === 'number' ? Math.max(500, autoplay) : 4000,\n    );\n    return () => clearInterval(timer);\n  }, [autoplay, paused, count, motion]);\n  return (\n    <section\n      {...props}\n      aria-roledescription={t('carousel.role')}\n      aria-label={props['aria-label'] ?? t('carousel.carousel')}\n      className={classes('leaf-carousel', className)}\n      onPointerEnter={() => {\n        if (pauseOnHover) setPaused(true);\n      }}\n      onPointerLeave={() => setPaused(false)}\n      onFocus={() => setPaused(true)}\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) setPaused(false);\n      }}\n      onPointerDown={(event) => {\n        if (!(event.target as HTMLElement).closest('button,a,input'))\n          pointer.current = event.clientX;\n      }}\n      onPointerUp={(event) => {\n        if (pointer.current === undefined) return;\n        const distance = event.clientX - pointer.current;\n        pointer.current = undefined;\n        if (Math.abs(distance) > 40)\n          go(index + (distance < 0 ? 1 : -1) * (config.direction === 'rtl' ? -1 : 1));\n      }}\n      onPointerCancel={() => {\n        pointer.current = undefined;\n      }}\n      onKeyDown={(event) => {\n        onKeyDown?.(event);\n        if (event.defaultPrevented || (event.target as HTMLElement).matches('input,textarea'))\n          return;\n        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n          event.preventDefault();\n          go(index + (event.key === 'ArrowRight' ? 1 : -1) * (config.direction === 'rtl' ? -1 : 1));\n        }\n        if (event.key === 'Home') {\n          event.preventDefault();\n          go(0);\n        }\n        if (event.key === 'End') {\n          event.preventDefault();\n          go(count - 1);\n        }\n      }}\n      tabIndex={props.tabIndex ?? 0}\n    >\n      <div className=\"leaf-carousel__viewport\">\n        <div ref={track} className=\"leaf-carousel__track\">\n          {slides.map((slide, position) => (\n            <fieldset\n              key={isValidElement(slide) ? slide.key : `slide-${position}`}\n              id={`${id}-${position}`}\n              aria-roledescription={t('carousel.slide')}\n              aria-label={`${position + 1} / ${count}`}\n              aria-hidden={position !== index || undefined}\n              {...inertProps(position !== index)}\n              className=\"leaf-carousel__slide\"\n              data-slide-index={position}\n              data-active={position === index || undefined}\n            >\n              {slide}\n            </fieldset>\n          ))}\n        </div>\n      </div>\n      {arrows &&\n        count > 1 &&\n        [-1, 1].map((direction) => (\n          <button\n            key={direction}\n            type=\"button\"\n            className={classes(\n              'leaf-carousel__arrow',\n              direction === -1 ? 'leaf-carousel__arrow--previous' : 'leaf-carousel__arrow--next',\n            )}\n            disabled={!infinite && (direction === -1 ? index === 0 : index === count - 1)}\n            aria-label={direction === -1 ? t('carousel.previousSlide') : t('carousel.nextSlide')}\n            onClick={() => go(index + direction)}\n          >\n            {direction === -1 ? <ChevronLeft size={20} /> : <ChevronRight size={20} />}\n          </button>\n        ))}\n      {dots && count > 1 && (\n        <div className=\"leaf-carousel__dots\">\n          {slides.map((slide, position) => (\n            <button\n              key={isValidElement(slide) ? slide.key : String(slide)}\n              type=\"button\"\n              aria-label={format('carousel.goTo', { index: position + 1 })}\n              aria-current={position === index ? 'true' : undefined}\n              aria-controls={`${id}-${position}`}\n              onClick={() => go(position)}\n            />\n          ))}\n        </div>\n      )}\n      <span className=\"leaf-carousel__status\" aria-live={autoplay && !paused ? 'off' : 'polite'}>\n        {count ? index + 1 : 0} / {count}\n      </span>\n    </section>\n  );\n});\n\nfunction useCarouselMotion(\n  track: React.RefObject<HTMLDivElement | null>,\n  index: number,\n  moveDirection: MutableRefObject<number>,\n  direction: 'ltr' | 'rtl',\n  enabled: boolean,\n) {\n  const previous = useRef({ index, height: 0 });\n  const animations = useRef<Animation[]>([]);\n  const heightAnimation = useRef<Animation | undefined>(undefined);\n  useBrowserLayoutEffect(() => {\n    const host = track.current;\n    if (!host) return;\n    const outgoing = host.querySelector<HTMLElement>(\n      `[data-slide-index=\"${previous.current.index}\"]`,\n    );\n    const incoming = host.querySelector<HTMLElement>(`[data-slide-index=\"${index}\"]`);\n    const interruptedHeight =\n      heightAnimation.current?.playState === 'running'\n        ? host.offsetHeight\n        : previous.current.height;\n    const outgoingStyle = outgoing ? getComputedStyle(outgoing) : null;\n    const incomingStyle = incoming?.dataset.exiting ? getComputedStyle(incoming) : null;\n    const incomingTransform = incomingStyle?.transform;\n    const incomingOpacity = incomingStyle?.opacity;\n    const outgoingTransform = outgoingStyle?.transform ?? 'none';\n    const outgoingOpacity = animations.current.some(\n      (animation) => animation.playState === 'running',\n    )\n      ? (outgoingStyle?.opacity ?? '1')\n      : '1';\n    for (const animation of animations.current) animation.cancel();\n    animations.current = [];\n    heightAnimation.current = undefined;\n    for (const slide of host.querySelectorAll<HTMLElement>('[data-exiting]'))\n      slide.removeAttribute('data-exiting');\n    const height = host.offsetHeight;\n    if (enabled && incoming && previous.current.index !== index) {\n      const sign =\n        (moveDirection.current || Math.sign(index - previous.current.index)) *\n        (direction === 'rtl' ? -1 : 1);\n      const enter = animateMotion(\n        incoming,\n        [\n          {\n            opacity: incomingOpacity ?? 0,\n            transform: incomingTransform ?? `translateX(${sign * 12}%) scale(0.985)`,\n          },\n          { opacity: 1, transform: 'translateX(0) scale(1)' },\n        ],\n        { durationMultiplier: 2 },\n      );\n      if (enter) animations.current.push(enter);\n      if (outgoing) {\n        outgoing.dataset.exiting = 'true';\n        const exit = animateMotion(\n          outgoing,\n          [\n            { opacity: outgoingOpacity, transform: outgoingTransform },\n            { opacity: 0, transform: `translateX(${sign * -12}%) scale(0.985)` },\n          ],\n          { durationMultiplier: 2 },\n        );\n        if (exit) {\n          animations.current.push(exit);\n          exit.addEventListener('finish', () => outgoing.removeAttribute('data-exiting'), {\n            once: true,\n          });\n        } else outgoing.removeAttribute('data-exiting');\n      }\n      if (interruptedHeight > 0 && Math.abs(height - interruptedHeight) > 1) {\n        const resize = animateMotion(\n          host,\n          [{ height: `${interruptedHeight}px` }, { height: `${height}px` }],\n          { durationMultiplier: 2 },\n        );\n        if (resize) {\n          animations.current.push(resize);\n          heightAnimation.current = resize;\n        }\n      }\n    }\n    moveDirection.current = 0;\n    previous.current = { index, height };\n    const observer =\n      typeof ResizeObserver === 'undefined'\n        ? null\n        : new ResizeObserver(() => {\n            if (!animations.current.some((animation) => animation.playState === 'running'))\n              previous.current.height = host.offsetHeight;\n          });\n    if (incoming) observer?.observe(incoming);\n    return () => observer?.disconnect();\n  }, [track, index, moveDirection, direction, enabled]);\n  useEffect(\n    () => () => {\n      for (const animation of animations.current) animation.cancel();\n    },\n    [],\n  );\n}\n"],"names":["useBrowserLayoutEffect","window","useEffect","useLayoutEffect","Carousel","forwardRef","rawProps","ref","activeIndex","defaultActiveIndex","onChange","arrows","dots","autoplay","infinite","pauseOnHover","children","className","onKeyDown","props","useComponentProps","format","useFormattedText","t","useText","config","useLeafConfig","id","useId","slides","Children","count","requested","setIndex","useControllable","index","Math","paused","setPaused","useState","motion","useMotionEnabled","track","useRef","moveDirection","useCarouselMotion","latest","go","next","callback","pointer","undefined","useImperativeHandle","timer","setInterval","document","clearInterval","classes","event","distance","slide","position","inertProps","isValidElement","direction","ChevronLeft","ChevronRight","String","enabled","previous","animations","heightAnimation","host","outgoing","incoming","interruptedHeight","outgoingStyle","getComputedStyle","incomingStyle","incomingTransform","incomingOpacity","outgoingTransform","outgoingOpacity","animation","height","sign","enter","animateMotion","exit","resize","observer","ResizeObserver"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
 "use client";
-export * from "./carousel.js";
+export { Carousel } from "./carousel.js";

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

@@ -1,16 +1,20 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/cascader.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, ChevronRight, LoaderCircle } from "lucide-react";
 import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { useLeafConfig } from "../config-provider/context.js";
 import { FieldScope, useFormField } from "../form/form.js";
-import { Input } from "../input/index.js";
-import { Scrollbar } from "../scrollbar/index.js";
+import { InputControl } from "../input/input.js";
+import { ScrollbarControl } from "../scrollbar/scrollbar.js";
 import { classes } from "../shared/classes.js";
 import { ClearButton } from "../shared/clear-button.js";
 import { FormValue, useFieldValue, useMergedRef } from "../shared/field.js";
 import { FloatingPanel, useFloatingDismiss, usePopupState } from "../shared/floating.js";
+import { SelectionContent } from "../shared/selection-content.js";
+import { useFormattedText } from "../shared/use-formatted-text.js";
 const emptyPath = [];
 function resolvePath(options, values) {
     const path = [];
@@ -23,8 +27,10 @@ function resolvePath(options, values) {
     }
     return path;
 }
-const cascader_Cascader = /*#__PURE__*/ forwardRef(function({ options: suppliedOptions, value, defaultValue = emptyPath, size = 'md', status: statusProp, placeholder, name, form, required: requiredProp, allowClear = true, disabled: disabledProp, className, style, onChange, onOpenChange, open: controlledOpen, defaultOpen, multiple = false, readOnly, showSearch, changeOnSelect, displayRender, optionRender, loadData, onLoadError, cacheKey, popupPlacement, popupClassName, popupStyle, popupRender, getPopupContainer, onClick, onKeyDown, 'aria-label': ariaLabel, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-invalid': ariaInvalid, ...props }, forwardedRef) {
-    const { locale, messages, direction } = useLeafConfig();
+const cascader_Cascader = /*#__PURE__*/ forwardRef(function(rawProps, forwardedRef) {
+    const { options: suppliedOptions, value, defaultValue = emptyPath, size = 'md', status: statusProp, placeholder, name, form, required: requiredProp, allowClear = true, disabled: disabledProp, className, style, onChange, onOpenChange, open: controlledOpen, defaultOpen, multiple = false, readOnly, showSearch, changeOnSelect, displayRender, optionRender, loadData, onLoadError, cacheKey, tagWrap = true, maxTagCount, popupPlacement, popupClassName, popupStyle, popupRender, getPopupContainer, onClick, onKeyDown, 'aria-label': ariaLabel, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-invalid': ariaInvalid, ...props } = useComponentProps('Cascader', rawProps);
+    const { messages, direction } = useLeafConfig();
+    const format = useFormattedText();
     const [loaded, setLoaded] = useState(new Map());
     const [loading, setLoading] = useState(new Set());
     const requests = useRef(new Map());
@@ -170,7 +176,7 @@ const cascader_Cascader = /*#__PURE__*/ forwardRef(function({ options: suppliedO
         }
     };
     return /*#__PURE__*/ jsxs("div", {
-        className: classes('leaf-cascader', `leaf-cascader--${size}`, className),
+        className: classes('leaf-cascader', `leaf-cascader--${size}`, multiple && 'leaf-cascader--multiple', className),
         style: style,
         "data-status": status,
         "data-disabled": disabled ? '' : void 0,
@@ -212,14 +218,24 @@ const cascader_Cascader = /*#__PURE__*/ forwardRef(function({ options: suppliedO
                     }
                 },
                 children: [
-                    /*#__PURE__*/ jsx("span", {
+                    multiple && selectedPaths.length ? /*#__PURE__*/ jsx(SelectionContent, {
+                        className: "leaf-cascader__value",
+                        tagClassName: "leaf-cascader__tag",
+                        tagWrap: tagWrap,
+                        maxTagCount: maxTagCount,
+                        items: selectedPaths.map((path, index)=>({
+                                key: JSON.stringify(paths[index]),
+                                label: caption(path),
+                                text: path.map((option)=>option.searchLabel ?? ('string' == typeof option.label ? option.label : option.value)).join(' / ')
+                            }))
+                    }) : /*#__PURE__*/ jsx("span", {
                         className: classes('leaf-cascader__value', !selectedPaths.length && 'leaf-cascader__placeholder'),
                         children: selectedPaths.length ? selectedPaths.map((path, index)=>/*#__PURE__*/ jsxs("span", {
                                 children: [
                                     index > 0 ? '、' : '',
                                     caption(path)
                                 ]
-                            }, paths[index]?.join('/'))) : placeholder || messages.select
+                            }, paths[index]?.join('/'))) : placeholder || messages.cascader.placeholder
                     }),
                     /*#__PURE__*/ jsx(ChevronDown, {
                         size: 16,
@@ -228,7 +244,7 @@ const cascader_Cascader = /*#__PURE__*/ forwardRef(function({ options: suppliedO
                 ]
             }),
             allowClear && selectedValue.length > 0 && !disabled && !readOnly && /*#__PURE__*/ jsx(ClearButton, {
-                label: messages.clearCascader,
+                label: messages.cascader.clear,
                 beforeArrow: true,
                 onClear: ()=>{
                     setSelectedValue([]);
@@ -257,19 +273,22 @@ const cascader_Cascader = /*#__PURE__*/ forwardRef(function({ options: suppliedO
                 id: panelId,
                 className: classes('leaf-floating leaf-cascader__panel', popupClassName),
                 role: "dialog",
-                "aria-label": ariaLabel || messages.select,
+                "aria-label": ariaLabel || messages.cascader.placeholder,
                 children: [
                     showSearch && /*#__PURE__*/ jsx(FieldScope, {
-                        children: /*#__PURE__*/ jsx(Input, {
-                            allowClear: true,
-                            "aria-label": messages.search,
-                            value: query,
-                            onChange: (event)=>setQuery(event.target.value)
+                        children: /*#__PURE__*/ jsx("div", {
+                            className: "leaf-cascader__search",
+                            children: /*#__PURE__*/ jsx(InputControl, {
+                                allowClear: true,
+                                "aria-label": messages.common.search,
+                                value: query,
+                                onChange: (event)=>setQuery(event.target.value)
+                            })
                         })
                     }),
-                    query ? /*#__PURE__*/ jsx(Scrollbar, {
+                    query ? /*#__PURE__*/ jsx(ScrollbarControl, {
                         role: "listbox",
-                        "aria-label": messages.search,
+                        "aria-label": messages.common.search,
                         className: "leaf-cascader__column",
                         orientation: "vertical",
                         maxHeight: 256,
@@ -282,17 +301,19 @@ const cascader_Cascader = /*#__PURE__*/ forwardRef(function({ options: suppliedO
                                 children: caption(path)
                             }, path.map((option)=>option.value).join('/'))) : /*#__PURE__*/ jsx("div", {
                             className: "leaf-floating__empty",
-                            children: messages.empty
+                            children: messages.cascader.empty
                         })
                     }) : /*#__PURE__*/ jsx("div", {
                         className: "leaf-cascader__columns",
-                        children: levels.map((level, depth)=>/*#__PURE__*/ jsx(Scrollbar, {
+                        children: levels.map((level, depth)=>/*#__PURE__*/ jsx(ScrollbarControl, {
                                 className: "leaf-cascader__column",
                                 orientation: "vertical",
                                 maxHeight: 256,
                                 "data-level": depth,
                                 role: "listbox",
-                                "aria-label": 'en-US' === locale ? `Level ${depth + 1}` : `第 ${depth + 1} 级`,
+                                "aria-label": format('cascader.level', {
+                                    level: depth + 1
+                                }),
                                 children: level.length ? level.map((option)=>/*#__PURE__*/ jsxs("button", {
                                         type: "button",
                                         role: "option",
@@ -349,7 +370,7 @@ const cascader_Cascader = /*#__PURE__*/ forwardRef(function({ options: suppliedO
                                         ]
                                     }, option.value)) : /*#__PURE__*/ jsx("div", {
                                     className: "leaf-floating__empty",
-                                    children: messages.empty
+                                    children: messages.cascader.empty
                                 })
                             }, 0 === depth ? 'root' : draft[depth - 1]))
                     })