@ifhover/leaf-ui 0.5.0 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"tag/group.js","sources":["../../../../../src/tag/group.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode, useRef } from 'react';\nimport { classes } from '../shared/classes';\nimport { FormValue, useFieldValue } from '../shared/field';\nimport { useListMotion } from '../shared/motion';\nimport type { ControlSize } from '../shared/types';\nimport { useControllable } from '../shared/use-controllable';\nexport interface CheckableTagProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean) => void;\n  size?: ControlSize;\n}\nexport function CheckableTag({\n  checked,\n  defaultChecked = false,\n  onChange,\n  size = 'md',\n  children,\n  className,\n  onClick,\n  ...props\n}: CheckableTagProps) {\n  const [current, change] = useControllable(checked, defaultChecked, onChange);\n  return (\n    <button\n      {...props}\n      type={props.type ?? 'button'}\n      className={classes(\n        'leaf-tag',\n        'leaf-tag--soft',\n        `leaf-tag--${size}`,\n        'leaf-checkable-tag',\n        className,\n      )}\n      aria-pressed={current}\n      data-color={current ? 'primary' : 'default'}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) change(!current);\n      }}\n    >\n      {children}\n    </button>\n  );\n}\nexport interface TagOption {\n  value: string;\n  label: ReactNode;\n  disabled?: boolean;\n}\nexport interface TagGroupProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  options: readonly TagOption[];\n  value?: readonly string[];\n  defaultValue?: readonly string[];\n  onChange?: (values: string[]) => void;\n  disabled?: boolean;\n  size?: ControlSize;\n  name?: string;\n  form?: string;\n  required?: boolean;\n}\nexport function TagGroup({\n  options,\n  value,\n  defaultValue = [],\n  onChange,\n  disabled,\n  size,\n  name,\n  form,\n  required,\n  className,\n  ...props\n}: TagGroupProps) {\n  const trigger = useRef<HTMLButtonElement>(null);\n  const root = useRef<HTMLDivElement>(null);\n  const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);\n  useListMotion(\n    root,\n    JSON.stringify(options.map((option) => option.value)),\n    '.leaf-checkable-tag[data-motion-key]',\n  );\n  return (\n    <div {...props} ref={root} className={classes('leaf-tag-group', className)}>\n      {options.map((option, index) => (\n        <button\n          key={option.value}\n          ref={index === 0 ? trigger : undefined}\n          type=\"button\"\n          className={classes(\n            'leaf-tag',\n            'leaf-tag--soft',\n            `leaf-tag--${size ?? 'md'}`,\n            'leaf-checkable-tag',\n          )}\n          data-color={current.includes(option.value) ? 'primary' : 'default'}\n          data-motion-key={option.value}\n          aria-pressed={current.includes(option.value)}\n          disabled={disabled || option.disabled}\n          onClick={() => {\n            const next = current.includes(option.value)\n              ? current.filter((key) => key !== option.value)\n              : [...current, option.value];\n            setCurrent(next);\n            onChange?.(next);\n          }}\n        >\n          {option.label}\n        </button>\n      ))}\n      <FormValue\n        name={name}\n        form={form}\n        required={required}\n        disabled={disabled}\n        value={current.length ? JSON.stringify(current) : ''}\n        triggerRef={trigger}\n      />\n    </div>\n  );\n}\n"],"names":["CheckableTag","checked","defaultChecked","onChange","size","children","className","onClick","props","current","change","useControllable","classes","event","TagGroup","options","value","defaultValue","disabled","name","form","required","trigger","useRef","root","setCurrent","useFieldValue","useListMotion","JSON","option","index","undefined","next","key","FormValue"],"mappings":";;;;;;;;AAaO,SAASA,aAAa,EAC3BC,OAAO,EACPC,iBAAiB,KAAK,EACtBC,QAAQ,EACRC,OAAO,IAAI,EACXC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACP,GAAGC,OACe;IAClB,MAAM,CAACC,SAASC,OAAO,GAAGC,gBAAgBV,SAASC,gBAAgBC;IACnE,OAAO,WAAP,GACE,IAAC;QACE,GAAGK,KAAK;QACT,MAAMA,MAAM,IAAI,IAAI;QACpB,WAAWI,QACT,YACA,kBACA,CAAC,UAAU,EAAER,MAAM,EACnB,sBACAE;QAEF,gBAAcG;QACd,cAAYA,UAAU,YAAY;QAClC,SAAS,CAACI;YACRN,UAAUM;YACV,IAAI,CAACA,MAAM,gBAAgB,EAAEH,OAAO,CAACD;QACvC;kBAECJ;;AAGP;AAkBO,SAASS,SAAS,EACvBC,OAAO,EACPC,KAAK,EACLC,eAAe,EAAE,EACjBd,QAAQ,EACRe,QAAQ,EACRd,IAAI,EACJe,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRf,SAAS,EACT,GAAGE,OACW;IACd,MAAMc,UAAUC,OAA0B;IAC1C,MAAMC,OAAOD,OAAuB;IACpC,MAAM,CAACd,SAASgB,WAAW,GAAGC,cAAcV,OAAOC,cAAcK,SAASF;IAC1EO,cACEH,MACAI,KAAK,SAAS,CAACb,QAAQ,GAAG,CAAC,CAACc,SAAWA,OAAO,KAAK,IACnD;IAEF,OAAO,WAAP,GACE,KAAC;QAAK,GAAGrB,KAAK;QAAE,KAAKgB;QAAM,WAAWZ,QAAQ,kBAAkBN;;YAC7DS,QAAQ,GAAG,CAAC,CAACc,QAAQC,QAAAA,WAAAA,GACpB,IAAC;oBAEC,KAAKA,AAAU,MAAVA,QAAcR,UAAUS;oBAC7B,MAAK;oBACL,WAAWnB,QACT,YACA,kBACA,CAAC,UAAU,EAAER,QAAQ,MAAM,EAC3B;oBAEF,cAAYK,QAAQ,QAAQ,CAACoB,OAAO,KAAK,IAAI,YAAY;oBACzD,mBAAiBA,OAAO,KAAK;oBAC7B,gBAAcpB,QAAQ,QAAQ,CAACoB,OAAO,KAAK;oBAC3C,UAAUX,YAAYW,OAAO,QAAQ;oBACrC,SAAS;wBACP,MAAMG,OAAOvB,QAAQ,QAAQ,CAACoB,OAAO,KAAK,IACtCpB,QAAQ,MAAM,CAAC,CAACwB,MAAQA,QAAQJ,OAAO,KAAK,IAC5C;+BAAIpB;4BAASoB,OAAO,KAAK;yBAAC;wBAC9BJ,WAAWO;wBACX7B,WAAW6B;oBACb;8BAECH,OAAO,KAAK;mBArBRA,OAAO,KAAK;0BAwBrB,IAACK,WAASA;gBACR,MAAMf;gBACN,MAAMC;gBACN,UAAUC;gBACV,UAAUH;gBACV,OAAOT,QAAQ,MAAM,GAAGmB,KAAK,SAAS,CAACnB,WAAW;gBAClD,YAAYa;;;;AAIpB"}
+{"version":3,"file":"tag/group.js","sources":["../../../../../src/tag/group.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode, useRef } from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { classes } from '../shared/classes';\nimport { FormValue, useFieldValue } from '../shared/field';\nimport { useListMotion } from '../shared/motion';\nimport type { ControlSize } from '../shared/types';\nimport { useControllable } from '../shared/use-controllable';\nexport interface CheckableTagProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean) => void;\n  size?: ControlSize;\n}\nexport function CheckableTag(rawProps: CheckableTagProps) {\n  const {\n    checked,\n    defaultChecked = false,\n    onChange,\n    size = 'md',\n    children,\n    className,\n    onClick,\n    ...props\n  } = useComponentProps('CheckableTag', rawProps);\n  const [current, change] = useControllable(checked, defaultChecked, onChange);\n  return (\n    <button\n      {...props}\n      type={props.type ?? 'button'}\n      className={classes(\n        'leaf-tag',\n        'leaf-tag--soft',\n        `leaf-tag--${size}`,\n        'leaf-checkable-tag',\n        className,\n      )}\n      aria-pressed={current}\n      data-color={current ? 'primary' : 'default'}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) change(!current);\n      }}\n    >\n      {children}\n    </button>\n  );\n}\nexport interface TagOption {\n  value: string;\n  label: ReactNode;\n  disabled?: boolean;\n}\nexport interface TagGroupProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  options: readonly TagOption[];\n  value?: readonly string[];\n  defaultValue?: readonly string[];\n  onChange?: (values: string[]) => void;\n  disabled?: boolean;\n  size?: ControlSize;\n  name?: string;\n  form?: string;\n  required?: boolean;\n}\nexport function TagGroup(rawProps: TagGroupProps) {\n  const {\n    options,\n    value,\n    defaultValue = [],\n    onChange,\n    disabled,\n    size,\n    name,\n    form,\n    required,\n    className,\n    ...props\n  } = useComponentProps('TagGroup', rawProps);\n  const trigger = useRef<HTMLButtonElement>(null);\n  const root = useRef<HTMLDivElement>(null);\n  const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);\n  useListMotion(\n    root,\n    JSON.stringify(options.map((option) => option.value)),\n    '.leaf-checkable-tag[data-motion-key]',\n  );\n  return (\n    <div {...props} ref={root} className={classes('leaf-tag-group', className)}>\n      {options.map((option, index) => (\n        <button\n          key={option.value}\n          ref={index === 0 ? trigger : undefined}\n          type=\"button\"\n          className={classes(\n            'leaf-tag',\n            'leaf-tag--soft',\n            `leaf-tag--${size ?? 'md'}`,\n            'leaf-checkable-tag',\n          )}\n          data-color={current.includes(option.value) ? 'primary' : 'default'}\n          data-motion-key={option.value}\n          aria-pressed={current.includes(option.value)}\n          disabled={disabled || option.disabled}\n          onClick={() => {\n            const next = current.includes(option.value)\n              ? current.filter((key) => key !== option.value)\n              : [...current, option.value];\n            setCurrent(next);\n            onChange?.(next);\n          }}\n        >\n          {option.label}\n        </button>\n      ))}\n      <FormValue\n        name={name}\n        form={form}\n        required={required}\n        disabled={disabled}\n        value={current.length ? JSON.stringify(current) : ''}\n        triggerRef={trigger}\n      />\n    </div>\n  );\n}\n"],"names":["CheckableTag","rawProps","checked","defaultChecked","onChange","size","children","className","onClick","props","useComponentProps","current","change","useControllable","classes","event","TagGroup","options","value","defaultValue","disabled","name","form","required","trigger","useRef","root","setCurrent","useFieldValue","useListMotion","JSON","option","index","undefined","next","key","FormValue"],"mappings":";;;;;;;;;;AAcO,SAASA,aAAaC,QAA2B;IACtD,MAAM,EACJC,OAAO,EACPC,iBAAiB,KAAK,EACtBC,QAAQ,EACRC,OAAO,IAAI,EACXC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACP,GAAGC,OACJ,GAAGC,kBAAkB,gBAAgBT;IACtC,MAAM,CAACU,SAASC,OAAO,GAAGC,gBAAgBX,SAASC,gBAAgBC;IACnE,OAAO,WAAP,GACE,IAAC;QACE,GAAGK,KAAK;QACT,MAAMA,MAAM,IAAI,IAAI;QACpB,WAAWK,QACT,YACA,kBACA,CAAC,UAAU,EAAET,MAAM,EACnB,sBACAE;QAEF,gBAAcI;QACd,cAAYA,UAAU,YAAY;QAClC,SAAS,CAACI;YACRP,UAAUO;YACV,IAAI,CAACA,MAAM,gBAAgB,EAAEH,OAAO,CAACD;QACvC;kBAECL;;AAGP;AAkBO,SAASU,SAASf,QAAuB;IAC9C,MAAM,EACJgB,OAAO,EACPC,KAAK,EACLC,eAAe,EAAE,EACjBf,QAAQ,EACRgB,QAAQ,EACRf,IAAI,EACJgB,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRhB,SAAS,EACT,GAAGE,OACJ,GAAGC,kBAAkB,YAAYT;IAClC,MAAMuB,UAAUC,OAA0B;IAC1C,MAAMC,OAAOD,OAAuB;IACpC,MAAM,CAACd,SAASgB,WAAW,GAAGC,cAAcV,OAAOC,cAAcK,SAASF;IAC1EO,cACEH,MACAI,KAAK,SAAS,CAACb,QAAQ,GAAG,CAAC,CAACc,SAAWA,OAAO,KAAK,IACnD;IAEF,OAAO,WAAP,GACE,KAAC;QAAK,GAAGtB,KAAK;QAAE,KAAKiB;QAAM,WAAWZ,QAAQ,kBAAkBP;;YAC7DU,QAAQ,GAAG,CAAC,CAACc,QAAQC,QAAAA,WAAAA,GACpB,IAAC;oBAEC,KAAKA,AAAU,MAAVA,QAAcR,UAAUS;oBAC7B,MAAK;oBACL,WAAWnB,QACT,YACA,kBACA,CAAC,UAAU,EAAET,QAAQ,MAAM,EAC3B;oBAEF,cAAYM,QAAQ,QAAQ,CAACoB,OAAO,KAAK,IAAI,YAAY;oBACzD,mBAAiBA,OAAO,KAAK;oBAC7B,gBAAcpB,QAAQ,QAAQ,CAACoB,OAAO,KAAK;oBAC3C,UAAUX,YAAYW,OAAO,QAAQ;oBACrC,SAAS;wBACP,MAAMG,OAAOvB,QAAQ,QAAQ,CAACoB,OAAO,KAAK,IACtCpB,QAAQ,MAAM,CAAC,CAACwB,MAAQA,QAAQJ,OAAO,KAAK,IAC5C;+BAAIpB;4BAASoB,OAAO,KAAK;yBAAC;wBAC9BJ,WAAWO;wBACX9B,WAAW8B;oBACb;8BAECH,OAAO,KAAK;mBArBRA,OAAO,KAAK;0BAwBrB,IAACK,WAASA;gBACR,MAAMf;gBACN,MAAMC;gBACN,UAAUC;gBACV,UAAUH;gBACV,OAAOT,QAAQ,MAAM,GAAGmB,KAAK,SAAS,CAACnB,WAAW;gBAClD,YAAYa;;;;AAIpB"}

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

@@ -1,9 +1,11 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/tag.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { defaultColors, mixColors } from "../colors.js";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { useLeafConfig } from "../config-provider/context.js";
 import { classes } from "../shared/classes.js";
 import { composedParent } from "../shared/dom.js";
@@ -17,7 +19,8 @@ const presets = [
     'error',
     'info'
 ];
-function Tag({ color = 'default', variant = 'soft', size = 'md', icon, closable = false, onClose, className, style, children, ...props }) {
+function Tag(rawProps) {
+    const { color = 'default', variant = 'soft', size = 'md', icon, closable = false, onClose, className, style, children, ...props } = useComponentProps('Tag', rawProps);
     const { messages, theme } = useLeafConfig();
     const [closed, setClosed] = useState(false);
     const root = useRef(null);
@@ -26,7 +29,6 @@ function Tag({ color = 'default', variant = 'soft', size = 'md', icon, closable
     const surface = theme.tokens?.surfaceColor ?? defaultColors[theme.appearance ?? 'light'].surface;
     const customVariables = custom ? {
         '--leaf-tag-color': color,
-        '--leaf-tag-color-alpha-22': mixColors(color, 'transparent', 22),
         '--leaf-tag-color-alpha-10': mixColors(color, 'transparent', 10),
         '--leaf-tag-color-surface-8': mixColors(color, surface, 8)
     } : {};
@@ -42,11 +44,6 @@ function Tag({ color = 'default', variant = 'soft', size = 'md', icon, closable
             const background = getComputedStyle(node).getPropertyValue('--leaf-color-surface').trim() || surface;
             probe.remove();
             for (const [suffix, target, weight] of [
-                [
-                    'alpha-22',
-                    'transparent',
-                    22
-                ],
                 [
                     'alpha-10',
                     'transparent',
@@ -108,7 +105,7 @@ function Tag({ color = 'default', variant = 'soft', size = 'md', icon, closable
             closable && /*#__PURE__*/ jsx("button", {
                 type: "button",
                 className: "leaf-tag__close",
-                "aria-label": messages.remove,
+                "aria-label": messages.common.remove,
                 onClick: (event)=>{
                     onClose?.(event);
                     if (!event.defaultPrevented) {

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

@@ -1 +1 @@
-{"version":3,"file":"tag/tag.js","sources":["../../../../../src/tag/tag.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { defaultColors, mixColors } from '../colors';\nimport { useLeafConfig } from '../config-provider/context';\nimport { classes } from '../shared/classes';\nimport { composedParent } from '../shared/dom';\nimport { inertProps } from '../shared/inert';\nimport { usePresence } from '../shared/presence';\nimport type { ControlSize } from '../shared/types';\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n  color?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | (string & {});\n  variant?: 'soft' | 'outline' | 'solid';\n  size?: ControlSize;\n  icon?: ReactNode;\n  closable?: boolean;\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\nconst presets = ['default', 'primary', 'success', 'warning', 'error', 'info'];\nexport function Tag({\n  color = 'default',\n  variant = 'soft',\n  size = 'md',\n  icon,\n  closable = false,\n  onClose,\n  className,\n  style,\n  children,\n  ...props\n}: TagProps) {\n  const { messages, theme } = useLeafConfig();\n  const [closed, setClosed] = useState(false);\n  const root = useRef<HTMLSpanElement>(null);\n  const present = usePresence(!closed, root);\n  const custom = !presets.includes(color);\n  const surface = theme.tokens?.surfaceColor ?? defaultColors[theme.appearance ?? 'light'].surface;\n  const customVariables = custom\n    ? {\n        '--leaf-tag-color': color,\n        '--leaf-tag-color-alpha-22': mixColors(color, 'transparent', 22),\n        '--leaf-tag-color-alpha-10': mixColors(color, 'transparent', 10),\n        '--leaf-tag-color-surface-8': mixColors(color, surface, 8),\n      }\n    : {};\n  useEffect(() => {\n    const node = root.current;\n    if (!node || !custom) return;\n    const sync = () => {\n      const probe = document.createElement('span');\n      probe.style.color = color;\n      probe.hidden = true;\n      node.append(probe);\n      const concrete = getComputedStyle(probe).color;\n      const background =\n        getComputedStyle(node).getPropertyValue('--leaf-color-surface').trim() || surface;\n      probe.remove();\n      for (const [suffix, target, weight] of [\n        ['alpha-22', 'transparent', 22],\n        ['alpha-10', 'transparent', 10],\n        ['surface-8', background, 8],\n      ] as const) {\n        const value = mixColors(concrete, target, weight);\n        const key = `--leaf-tag-color-${suffix}`;\n        if (value && node.style.getPropertyValue(key) !== value) node.style.setProperty(key, value);\n      }\n    };\n    sync();\n    const observer = new MutationObserver(sync);\n    let ancestor: HTMLElement | null = node;\n    while (ancestor) {\n      observer.observe(ancestor, {\n        attributes: true,\n        attributeFilter: ['class', 'style', 'data-leaf-theme'],\n      });\n      ancestor = composedParent(ancestor);\n    }\n    return () => observer.disconnect();\n  }, [color, custom, surface]);\n  if (!present) return null;\n  return (\n    <span\n      {...props}\n      {...inertProps(closed)}\n      ref={root}\n      data-state={closed ? 'closing' : undefined}\n      aria-hidden={closed || props['aria-hidden']}\n      className={classes('leaf-tag', `leaf-tag--${variant}`, `leaf-tag--${size}`, className)}\n      data-color={presets.includes(color) ? color : undefined}\n      style={{ ...customVariables, ...style }}\n    >\n      {icon && (\n        <span className=\"leaf-tag__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span>{children}</span>\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"leaf-tag__close\"\n          aria-label={messages.remove}\n          onClick={(event) => {\n            onClose?.(event);\n            if (!event.defaultPrevented) {\n              const node = root.current;\n              if (node) {\n                node.style.setProperty(\n                  '--leaf-tag-width',\n                  `${node.getBoundingClientRect().width}px`,\n                );\n                void node.offsetWidth;\n                if (node.contains(document.activeElement)) {\n                  const buttons = Array.from(\n                    node.parentElement?.querySelectorAll<HTMLButtonElement>('.leaf-tag__close') ??\n                      [],\n                  );\n                  const index = buttons.indexOf(event.currentTarget);\n                  (buttons[index + 1] ?? buttons[index - 1])?.focus();\n                }\n              }\n              setClosed(true);\n            }\n          }}\n        >\n          <X size={12} aria-hidden=\"true\" />\n        </button>\n      )}\n    </span>\n  );\n}\n"],"names":["presets","Tag","color","variant","size","icon","closable","onClose","className","style","children","props","messages","theme","useLeafConfig","closed","setClosed","useState","root","useRef","present","usePresence","custom","surface","defaultColors","customVariables","mixColors","useEffect","node","sync","probe","document","concrete","getComputedStyle","background","suffix","target","weight","value","key","observer","MutationObserver","ancestor","composedParent","inertProps","undefined","classes","event","buttons","Array","index","X"],"mappings":"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"}
+{"version":3,"file":"tag/tag.js","sources":["../../../../../src/tag/tag.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { defaultColors, mixColors } from '../colors';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useLeafConfig } from '../config-provider/context';\nimport { classes } from '../shared/classes';\nimport { composedParent } from '../shared/dom';\nimport { inertProps } from '../shared/inert';\nimport { usePresence } from '../shared/presence';\nimport type { ControlSize } from '../shared/types';\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n  color?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | (string & {});\n  variant?: 'soft' | 'solid';\n  size?: ControlSize;\n  icon?: ReactNode;\n  closable?: boolean;\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\nconst presets = ['default', 'primary', 'success', 'warning', 'error', 'info'];\nexport function Tag(rawProps: TagProps) {\n  const {\n    color = 'default',\n    variant = 'soft',\n    size = 'md',\n    icon,\n    closable = false,\n    onClose,\n    className,\n    style,\n    children,\n    ...props\n  } = useComponentProps('Tag', rawProps);\n  const { messages, theme } = useLeafConfig();\n  const [closed, setClosed] = useState(false);\n  const root = useRef<HTMLSpanElement>(null);\n  const present = usePresence(!closed, root);\n  const custom = !presets.includes(color);\n  const surface = theme.tokens?.surfaceColor ?? defaultColors[theme.appearance ?? 'light'].surface;\n  const customVariables = custom\n    ? {\n        '--leaf-tag-color': color,\n        '--leaf-tag-color-alpha-10': mixColors(color, 'transparent', 10),\n        '--leaf-tag-color-surface-8': mixColors(color, surface, 8),\n      }\n    : {};\n  useEffect(() => {\n    const node = root.current;\n    if (!node || !custom) return;\n    const sync = () => {\n      const probe = document.createElement('span');\n      probe.style.color = color;\n      probe.hidden = true;\n      node.append(probe);\n      const concrete = getComputedStyle(probe).color;\n      const background =\n        getComputedStyle(node).getPropertyValue('--leaf-color-surface').trim() || surface;\n      probe.remove();\n      for (const [suffix, target, weight] of [\n        ['alpha-10', 'transparent', 10],\n        ['surface-8', background, 8],\n      ] as const) {\n        const value = mixColors(concrete, target, weight);\n        const key = `--leaf-tag-color-${suffix}`;\n        if (value && node.style.getPropertyValue(key) !== value) node.style.setProperty(key, value);\n      }\n    };\n    sync();\n    const observer = new MutationObserver(sync);\n    let ancestor: HTMLElement | null = node;\n    while (ancestor) {\n      observer.observe(ancestor, {\n        attributes: true,\n        attributeFilter: ['class', 'style', 'data-leaf-theme'],\n      });\n      ancestor = composedParent(ancestor);\n    }\n    return () => observer.disconnect();\n  }, [color, custom, surface]);\n  if (!present) return null;\n  return (\n    <span\n      {...props}\n      {...inertProps(closed)}\n      ref={root}\n      data-state={closed ? 'closing' : undefined}\n      aria-hidden={closed || props['aria-hidden']}\n      className={classes('leaf-tag', `leaf-tag--${variant}`, `leaf-tag--${size}`, className)}\n      data-color={presets.includes(color) ? color : undefined}\n      style={{ ...customVariables, ...style }}\n    >\n      {icon && (\n        <span className=\"leaf-tag__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span>{children}</span>\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"leaf-tag__close\"\n          aria-label={messages.common.remove}\n          onClick={(event) => {\n            onClose?.(event);\n            if (!event.defaultPrevented) {\n              const node = root.current;\n              if (node) {\n                node.style.setProperty(\n                  '--leaf-tag-width',\n                  `${node.getBoundingClientRect().width}px`,\n                );\n                void node.offsetWidth;\n                if (node.contains(document.activeElement)) {\n                  const buttons = Array.from(\n                    node.parentElement?.querySelectorAll<HTMLButtonElement>('.leaf-tag__close') ??\n                      [],\n                  );\n                  const index = buttons.indexOf(event.currentTarget);\n                  (buttons[index + 1] ?? buttons[index - 1])?.focus();\n                }\n              }\n              setClosed(true);\n            }\n          }}\n        >\n          <X size={12} aria-hidden=\"true\" />\n        </button>\n      )}\n    </span>\n  );\n}\n"],"names":["presets","Tag","rawProps","color","variant","size","icon","closable","onClose","className","style","children","props","useComponentProps","messages","theme","useLeafConfig","closed","setClosed","useState","root","useRef","present","usePresence","custom","surface","defaultColors","customVariables","mixColors","useEffect","node","sync","probe","document","concrete","getComputedStyle","background","suffix","target","weight","value","key","observer","MutationObserver","ancestor","composedParent","inertProps","undefined","classes","event","buttons","Array","index","X"],"mappings":"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"}

package/dist/esm/browser/modules/tailwind-tokens.js

@@ -0,0 +1,93 @@
+"use client";
+const leafTailwindTokens = {
+    colors: {
+        'leaf-primary': 'var(--leaf-color-primary)',
+        'leaf-primary-hover': 'var(--leaf-color-primary-hover)',
+        'leaf-primary-active': 'var(--leaf-color-primary-active)',
+        'leaf-on-primary': 'var(--leaf-color-on-primary)',
+        'leaf-success': 'var(--leaf-color-success)',
+        'leaf-warning': 'var(--leaf-color-warning)',
+        'leaf-on-warning': 'var(--leaf-color-on-warning)',
+        'leaf-danger': 'var(--leaf-color-danger)',
+        'leaf-danger-hover': 'var(--leaf-color-danger-hover)',
+        'leaf-danger-active': 'var(--leaf-color-danger-active)',
+        'leaf-on-danger': 'var(--leaf-color-on-danger)',
+        'leaf-info': 'var(--leaf-color-info)',
+        'leaf-text': 'var(--leaf-color-text)',
+        'leaf-muted': 'var(--leaf-color-text-muted)',
+        'leaf-subtle': 'var(--leaf-color-text-subtle)',
+        'leaf-surface': 'var(--leaf-color-surface)',
+        'leaf-surface-muted': 'var(--leaf-color-surface-muted)',
+        'leaf-surface-raised': 'var(--leaf-color-surface-raised)',
+        'leaf-border': 'var(--leaf-color-border)',
+        'leaf-border-hover': 'var(--leaf-color-border-hover)',
+        'leaf-divider': 'var(--leaf-color-divider)',
+        'leaf-option-hover': 'var(--leaf-color-option-hover)',
+        'leaf-focus': 'var(--leaf-color-focus, var(--leaf-color-primary-alpha-42))'
+    },
+    borderRadius: {
+        leaf: 'var(--leaf-radius)',
+        'leaf-sm': 'var(--leaf-radius-sm)',
+        'leaf-md': 'var(--leaf-radius-md)',
+        'leaf-lg': 'var(--leaf-radius-lg)',
+        'leaf-choice': 'var(--leaf-choice-radius)'
+    },
+    spacing: {
+        leaf: 'var(--leaf-spacing)',
+        'leaf-xs': 'var(--leaf-spacing-xs)',
+        'leaf-sm': 'var(--leaf-spacing-sm)',
+        'leaf-md': 'var(--leaf-spacing-md)',
+        'leaf-lg': 'var(--leaf-spacing-lg)',
+        'leaf-xl': 'var(--leaf-spacing-xl)',
+        'leaf-control': 'var(--leaf-control-height)',
+        'leaf-control-sm': 'var(--leaf-control-height-sm)',
+        'leaf-control-lg': 'var(--leaf-control-height-lg)',
+        'leaf-form-gap': 'var(--leaf-density-form-gap)',
+        'leaf-label-gap': 'var(--leaf-density-label-gap)',
+        'leaf-row-padding': 'var(--leaf-density-row-padding)',
+        'leaf-option-height': 'var(--leaf-density-option-height)',
+        'leaf-option-padding': 'var(--leaf-density-option-padding)',
+        'leaf-field-padding': 'var(--leaf-density-field-padding)',
+        'leaf-dialog-block': 'var(--leaf-density-dialog-block)',
+        'leaf-dialog-inline': 'var(--leaf-density-dialog-inline)',
+        'leaf-dialog-gap': 'var(--leaf-density-dialog-gap)'
+    },
+    fontFamily: {
+        leaf: 'var(--leaf-font-family)'
+    },
+    fontSize: {
+        leaf: 'var(--leaf-font-size)',
+        'leaf-sm': 'var(--leaf-font-size-sm)',
+        'leaf-lg': 'var(--leaf-font-size-lg)'
+    },
+    lineHeight: {
+        leaf: 'var(--leaf-line-height)'
+    },
+    fontWeight: {
+        'leaf-medium': 'var(--leaf-font-weight)',
+        'leaf-heading': 'var(--leaf-heading-weight)'
+    },
+    boxShadow: {
+        'leaf-xs': 'var(--leaf-shadow-xs)',
+        'leaf-sm': 'var(--leaf-shadow-sm)',
+        'leaf-md': 'var(--leaf-shadow-md)',
+        'leaf-lg': 'var(--leaf-shadow-lg)'
+    },
+    transitionDuration: {
+        leaf: 'var(--leaf-motion-duration)',
+        'leaf-fast': 'var(--leaf-motion-fast)',
+        'leaf-slow': 'var(--leaf-motion-slow)'
+    },
+    transitionTimingFunction: {
+        leaf: 'var(--leaf-motion-easing)',
+        'leaf-spring': 'var(--leaf-motion-spring)'
+    },
+    zIndex: {
+        'leaf-popup': 'var(--leaf-z-index-popup)',
+        'leaf-modal': 'var(--leaf-z-index-modal)',
+        'leaf-message': 'var(--leaf-z-index-message)'
+    }
+};
+export { leafTailwindTokens };
+
+//# sourceMappingURL=tailwind-tokens.js.map

package/dist/esm/browser/modules/tailwind-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-tokens.js","sources":["../../../../src/tailwind-tokens.ts"],"sourcesContent":["/** Shared by the Tailwind 3 preset and the generated Tailwind 4 CSS theme. */\nexport const leafTailwindTokens = {\n  colors: {\n    'leaf-primary': 'var(--leaf-color-primary)',\n    'leaf-primary-hover': 'var(--leaf-color-primary-hover)',\n    'leaf-primary-active': 'var(--leaf-color-primary-active)',\n    'leaf-on-primary': 'var(--leaf-color-on-primary)',\n    'leaf-success': 'var(--leaf-color-success)',\n    'leaf-warning': 'var(--leaf-color-warning)',\n    'leaf-on-warning': 'var(--leaf-color-on-warning)',\n    'leaf-danger': 'var(--leaf-color-danger)',\n    'leaf-danger-hover': 'var(--leaf-color-danger-hover)',\n    'leaf-danger-active': 'var(--leaf-color-danger-active)',\n    'leaf-on-danger': 'var(--leaf-color-on-danger)',\n    'leaf-info': 'var(--leaf-color-info)',\n    'leaf-text': 'var(--leaf-color-text)',\n    'leaf-muted': 'var(--leaf-color-text-muted)',\n    'leaf-subtle': 'var(--leaf-color-text-subtle)',\n    'leaf-surface': 'var(--leaf-color-surface)',\n    'leaf-surface-muted': 'var(--leaf-color-surface-muted)',\n    'leaf-surface-raised': 'var(--leaf-color-surface-raised)',\n    'leaf-border': 'var(--leaf-color-border)',\n    'leaf-border-hover': 'var(--leaf-color-border-hover)',\n    'leaf-divider': 'var(--leaf-color-divider)',\n    'leaf-option-hover': 'var(--leaf-color-option-hover)',\n    'leaf-focus': 'var(--leaf-color-focus, var(--leaf-color-primary-alpha-42))',\n  },\n  borderRadius: {\n    leaf: 'var(--leaf-radius)',\n    'leaf-sm': 'var(--leaf-radius-sm)',\n    'leaf-md': 'var(--leaf-radius-md)',\n    'leaf-lg': 'var(--leaf-radius-lg)',\n    'leaf-choice': 'var(--leaf-choice-radius)',\n  },\n  spacing: {\n    leaf: 'var(--leaf-spacing)',\n    'leaf-xs': 'var(--leaf-spacing-xs)',\n    'leaf-sm': 'var(--leaf-spacing-sm)',\n    'leaf-md': 'var(--leaf-spacing-md)',\n    'leaf-lg': 'var(--leaf-spacing-lg)',\n    'leaf-xl': 'var(--leaf-spacing-xl)',\n    'leaf-control': 'var(--leaf-control-height)',\n    'leaf-control-sm': 'var(--leaf-control-height-sm)',\n    'leaf-control-lg': 'var(--leaf-control-height-lg)',\n    'leaf-form-gap': 'var(--leaf-density-form-gap)',\n    'leaf-label-gap': 'var(--leaf-density-label-gap)',\n    'leaf-row-padding': 'var(--leaf-density-row-padding)',\n    'leaf-option-height': 'var(--leaf-density-option-height)',\n    'leaf-option-padding': 'var(--leaf-density-option-padding)',\n    'leaf-field-padding': 'var(--leaf-density-field-padding)',\n    'leaf-dialog-block': 'var(--leaf-density-dialog-block)',\n    'leaf-dialog-inline': 'var(--leaf-density-dialog-inline)',\n    'leaf-dialog-gap': 'var(--leaf-density-dialog-gap)',\n  },\n  fontFamily: { leaf: 'var(--leaf-font-family)' },\n  fontSize: {\n    leaf: 'var(--leaf-font-size)',\n    'leaf-sm': 'var(--leaf-font-size-sm)',\n    'leaf-lg': 'var(--leaf-font-size-lg)',\n  },\n  lineHeight: { leaf: 'var(--leaf-line-height)' },\n  fontWeight: {\n    'leaf-medium': 'var(--leaf-font-weight)',\n    'leaf-heading': 'var(--leaf-heading-weight)',\n  },\n  boxShadow: {\n    'leaf-xs': 'var(--leaf-shadow-xs)',\n    'leaf-sm': 'var(--leaf-shadow-sm)',\n    'leaf-md': 'var(--leaf-shadow-md)',\n    'leaf-lg': 'var(--leaf-shadow-lg)',\n  },\n  transitionDuration: {\n    leaf: 'var(--leaf-motion-duration)',\n    'leaf-fast': 'var(--leaf-motion-fast)',\n    'leaf-slow': 'var(--leaf-motion-slow)',\n  },\n  transitionTimingFunction: {\n    leaf: 'var(--leaf-motion-easing)',\n    'leaf-spring': 'var(--leaf-motion-spring)',\n  },\n  zIndex: {\n    'leaf-popup': 'var(--leaf-z-index-popup)',\n    'leaf-modal': 'var(--leaf-z-index-modal)',\n    'leaf-message': 'var(--leaf-z-index-message)',\n  },\n};\n"],"names":["leafTailwindTokens"],"mappings":";AACO,MAAMA,qBAAqB;IAChC,QAAQ;QACN,gBAAgB;QAChB,sBAAsB;QACtB,uBAAuB;QACvB,mBAAmB;QACnB,gBAAgB;QAChB,gBAAgB;QAChB,mBAAmB;QACnB,eAAe;QACf,qBAAqB;QACrB,sBAAsB;QACtB,kBAAkB;QAClB,aAAa;QACb,aAAa;QACb,cAAc;QACd,eAAe;QACf,gBAAgB;QAChB,sBAAsB;QACtB,uBAAuB;QACvB,eAAe;QACf,qBAAqB;QACrB,gBAAgB;QAChB,qBAAqB;QACrB,cAAc;IAChB;IACA,cAAc;QACZ,MAAM;QACN,WAAW;QACX,WAAW;QACX,WAAW;QACX,eAAe;IACjB;IACA,SAAS;QACP,MAAM;QACN,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,gBAAgB;QAChB,mBAAmB;QACnB,mBAAmB;QACnB,iBAAiB;QACjB,kBAAkB;QAClB,oBAAoB;QACpB,sBAAsB;QACtB,uBAAuB;QACvB,sBAAsB;QACtB,qBAAqB;QACrB,sBAAsB;QACtB,mBAAmB;IACrB;IACA,YAAY;QAAE,MAAM;IAA0B;IAC9C,UAAU;QACR,MAAM;QACN,WAAW;QACX,WAAW;IACb;IACA,YAAY;QAAE,MAAM;IAA0B;IAC9C,YAAY;QACV,eAAe;QACf,gBAAgB;IAClB;IACA,WAAW;QACT,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;IACb;IACA,oBAAoB;QAClB,MAAM;QACN,aAAa;QACb,aAAa;IACf;IACA,0BAA0B;QACxB,MAAM;QACN,eAAe;IACjB;IACA,QAAQ;QACN,cAAc;QACd,cAAc;QACd,gBAAgB;IAClB;AACF"}

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

@@ -0,0 +1,24 @@
+"use client";
+import { leafTailwindTokens } from "./tailwind-tokens.js";
+const leafPreset = {
+    theme: {
+        extend: {
+            ...leafTailwindTokens,
+            fontSize: Object.fromEntries(Object.entries(leafTailwindTokens.fontSize).map(([name, value])=>[
+                    name,
+                    [
+                        value,
+                        {
+                            lineHeight: leafTailwindTokens.lineHeight.leaf
+                        }
+                    ]
+                ])),
+            minHeight: leafTailwindTokens.spacing,
+            minWidth: leafTailwindTokens.spacing
+        }
+    }
+};
+const tailwind = leafPreset;
+export default tailwind;
+
+//# sourceMappingURL=tailwind.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.js","sources":["../../../../src/tailwind.ts"],"sourcesContent":["import { leafTailwindTokens } from './tailwind-tokens';\n\n/** Tailwind CSS 3 preset. Extend the application theme without changing its defaults. */\nconst leafPreset = {\n  theme: {\n    extend: {\n      ...leafTailwindTokens,\n      fontSize: Object.fromEntries(\n        Object.entries(leafTailwindTokens.fontSize).map(([name, value]) => [\n          name,\n          [value, { lineHeight: leafTailwindTokens.lineHeight.leaf }] as [\n            string,\n            { lineHeight: string },\n          ],\n        ]),\n      ),\n      minHeight: leafTailwindTokens.spacing,\n      minWidth: leafTailwindTokens.spacing,\n    },\n  },\n};\n\nexport default leafPreset;\n"],"names":["leafPreset","leafTailwindTokens","Object","name","value"],"mappings":";;AAGA,MAAMA,aAAa;IACjB,OAAO;QACL,QAAQ;YACN,GAAGC,kBAAkB;YACrB,UAAUC,OAAO,WAAW,CAC1BA,OAAO,OAAO,CAACD,mBAAmB,QAAQ,EAAE,GAAG,CAAC,CAAC,CAACE,MAAMC,MAAM,GAAK;oBACjED;oBACA;wBAACC;wBAAO;4BAAE,YAAYH,mBAAmB,UAAU,CAAC,IAAI;wBAAC;qBAAE;iBAI5D;YAEH,WAAWA,mBAAmB,OAAO;YACrC,UAAUA,mBAAmB,OAAO;QACtC;IACF;AACF;AAEA,iBAAeD"}

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

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

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

@@ -1,13 +1,15 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/textarea.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useLayoutEffect, useRef } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { useFormField } from "../form/form.js";
 import { classes } from "../shared/classes.js";
 import { useFieldValue, useMergedRef } from "../shared/field.js";
 import { animateMotion, useMotionEnabled } from "../shared/motion.js";
 const useBrowserLayoutEffect = "u" < typeof window ? useEffect : useLayoutEffect;
-const textarea_Textarea = /*#__PURE__*/ forwardRef(function({ size = 'md', status: statusProp, resize = 'vertical', rows = 3, autoSize = false, showCount = false, value, defaultValue, onChange, className, style, disabled: disabledProp, 'aria-invalid': ariaInvalid, ...props }, ref) {
+const textarea_TextareaControl = /*#__PURE__*/ forwardRef(function({ size = 'md', status: statusProp, resize = 'vertical', rows = 3, autoSize = false, showCount = false, value, defaultValue, onChange, className, style, disabled: disabledProp, 'aria-invalid': ariaInvalid, ...props }, ref) {
     const field = useFormField();
     const textarea = useRef(null);
     const heightAnimation = useRef(void 0);
@@ -105,7 +107,15 @@ const textarea_Textarea = /*#__PURE__*/ forwardRef(function({ size = 'md', statu
         ]
     }) : control;
 });
+textarea_TextareaControl.displayName = 'TextareaControl';
+const textarea_Textarea = /*#__PURE__*/ forwardRef(function(rawProps, ref) {
+    const props = useComponentProps('Textarea', rawProps);
+    return /*#__PURE__*/ jsx(textarea_TextareaControl, {
+        ...props,
+        ref: ref
+    });
+});
 textarea_Textarea.displayName = 'Textarea';
-export { textarea_Textarea as Textarea };
+export { textarea_Textarea as Textarea, textarea_TextareaControl as TextareaControl };
 
 //# sourceMappingURL=textarea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"textarea/textarea.js","sources":["../../../../../src/textarea/textarea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ReactNode,\n  type TextareaHTMLAttributes,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n} from 'react';\nimport { useFormField } from '../form/form';\nimport { classes } from '../shared/classes';\nimport { useFieldValue, useMergedRef } from '../shared/field';\nimport { animateMotion, useMotionEnabled } from '../shared/motion';\nimport type { ControlSize, ControlStatus } from '../shared/types';\n\nexport interface TextareaAutoSize {\n  minRows?: number;\n  maxRows?: number;\n}\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  size?: ControlSize;\n  status?: ControlStatus;\n  resize?: 'none' | 'vertical' | 'both';\n  autoSize?: boolean | TextareaAutoSize;\n  showCount?: boolean | ((value: string, maxLength?: number) => ReactNode);\n}\n\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  {\n    size = 'md',\n    status: statusProp,\n    resize = 'vertical',\n    rows = 3,\n    autoSize = false,\n    showCount = false,\n    value,\n    defaultValue,\n    onChange,\n    className,\n    style,\n    disabled: disabledProp,\n    'aria-invalid': ariaInvalid,\n    ...props\n  },\n  ref,\n) {\n  const field = useFormField();\n  const textarea = useRef<HTMLTextAreaElement>(null);\n  const heightAnimation = useRef<Animation | undefined>(undefined);\n  const measuredHeight = useRef(false);\n  const motionEnabled = useMotionEnabled();\n  const merged = useMergedRef(textarea, ref);\n  const [current, setCurrent] = useFieldValue(\n    value === undefined ? undefined : String(value),\n    String(defaultValue ?? ''),\n    textarea,\n    props.form,\n  );\n  const disabled = disabledProp || field?.disabled;\n  const status = statusProp ?? (field?.error ? 'error' : undefined);\n  const minRows = typeof autoSize === 'object' ? Math.max(1, autoSize.minRows ?? rows) : rows;\n  const maxRows =\n    typeof autoSize === 'object' ? Math.max(minRows, autoSize.maxRows ?? Infinity) : Infinity;\n  useBrowserLayoutEffect(() => {\n    if (!autoSize || !textarea.current) {\n      heightAnimation.current?.cancel();\n      measuredHeight.current = false;\n      return;\n    }\n    const node = textarea.current;\n    const measure = () => {\n      const previousHeight = Number.parseFloat(getComputedStyle(node).height) || node.offsetHeight;\n      heightAnimation.current?.cancel();\n      const computed = getComputedStyle(node);\n      const lineHeight =\n        Number.parseFloat(computed.lineHeight) ||\n        (Number.parseFloat(computed.fontSize) || 14) * 1.5;\n      const padding =\n        (Number.parseFloat(computed.paddingTop) || 0) +\n        (Number.parseFloat(computed.paddingBottom) || 0);\n      const border =\n        (Number.parseFloat(computed.borderTopWidth) || 0) +\n        (Number.parseFloat(computed.borderBottomWidth) || 0);\n      const addition = computed.boxSizing === 'border-box' ? padding + border : 0;\n      node.style.height = 'auto';\n      const measured =\n        node.scrollHeight + (computed.boxSizing === 'border-box' ? border : -padding);\n      const maximum = lineHeight * maxRows + addition;\n      const height = Math.min(maximum, Math.max(lineHeight * minRows + addition, measured));\n      node.style.height = `${height}px`;\n      node.style.overflowY = measured > maximum ? 'auto' : 'hidden';\n      if (measuredHeight.current && motionEnabled && Math.abs(previousHeight - height) > 0.5)\n        heightAnimation.current = animateMotion(\n          node,\n          [{ height: `${previousHeight}px` }, { height: `${height}px` }],\n          { durationMultiplier: 0.8 },\n        );\n      measuredHeight.current = true;\n    };\n    measure();\n    let width = node.clientWidth;\n    const observer =\n      typeof ResizeObserver === 'undefined'\n        ? null\n        : new ResizeObserver(() => {\n            if (width !== node.clientWidth) {\n              width = node.clientWidth;\n              measure();\n            }\n          });\n    observer?.observe(node);\n    return () => observer?.disconnect();\n  }, [autoSize, minRows, maxRows, current, motionEnabled]);\n  useEffect(() => () => heightAnimation.current?.cancel(), []);\n  const control = (\n    <textarea\n      {...props}\n      id={props.id ?? field?.id}\n      required={props.required ?? field?.required}\n      aria-describedby={\n        [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined\n      }\n      ref={merged}\n      disabled={disabled}\n      rows={rows}\n      value={current}\n      onChange={(event) => {\n        setCurrent(event.target.value);\n        onChange?.(event);\n      }}\n      className={classes('leaf-textarea', `leaf-textarea--${size}`, className)}\n      style={{ resize: autoSize ? 'none' : resize, ...style }}\n      data-status={status}\n      aria-invalid={status === 'error' ? true : ariaInvalid}\n    />\n  );\n  return showCount ? (\n    <div className=\"leaf-textarea-wrap\">\n      {control}\n      <span className=\"leaf-textarea__count\">\n        {typeof showCount === 'function'\n          ? showCount(current, props.maxLength)\n          : `${current.length}${props.maxLength === undefined ? '' : ` / ${props.maxLength}`}`}\n      </span>\n    </div>\n  ) : (\n    control\n  );\n});\nTextarea.displayName = 'Textarea';\n"],"names":["useBrowserLayoutEffect","window","useEffect","useLayoutEffect","Textarea","forwardRef","size","statusProp","resize","rows","autoSize","showCount","value","defaultValue","onChange","className","style","disabledProp","ariaInvalid","props","ref","field","useFormField","textarea","useRef","heightAnimation","undefined","measuredHeight","motionEnabled","useMotionEnabled","merged","useMergedRef","current","setCurrent","useFieldValue","String","disabled","status","minRows","Math","maxRows","Infinity","node","measure","previousHeight","Number","getComputedStyle","computed","lineHeight","padding","border","addition","measured","maximum","height","animateMotion","width","observer","ResizeObserver","control","Boolean","event","classes"],"mappings":"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"}
+{"version":3,"file":"textarea/textarea.js","sources":["../../../../../src/textarea/textarea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ReactNode,\n  type TextareaHTMLAttributes,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n} from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useFormField } from '../form/form';\nimport { classes } from '../shared/classes';\nimport { useFieldValue, useMergedRef } from '../shared/field';\nimport { animateMotion, useMotionEnabled } from '../shared/motion';\nimport type { ControlSize, ControlStatus } from '../shared/types';\n\nexport interface TextareaAutoSize {\n  minRows?: number;\n  maxRows?: number;\n}\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  size?: ControlSize;\n  status?: ControlStatus;\n  resize?: 'none' | 'vertical' | 'both';\n  autoSize?: boolean | TextareaAutoSize;\n  showCount?: boolean | ((value: string, maxLength?: number) => ReactNode);\n}\n\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\nexport const TextareaControl = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function TextareaControl(\n    {\n      size = 'md',\n      status: statusProp,\n      resize = 'vertical',\n      rows = 3,\n      autoSize = false,\n      showCount = false,\n      value,\n      defaultValue,\n      onChange,\n      className,\n      style,\n      disabled: disabledProp,\n      'aria-invalid': ariaInvalid,\n      ...props\n    }: TextareaProps,\n    ref,\n  ) {\n    const field = useFormField();\n    const textarea = useRef<HTMLTextAreaElement>(null);\n    const heightAnimation = useRef<Animation | undefined>(undefined);\n    const measuredHeight = useRef(false);\n    const motionEnabled = useMotionEnabled();\n    const merged = useMergedRef(textarea, ref);\n    const [current, setCurrent] = useFieldValue(\n      value === undefined ? undefined : String(value),\n      String(defaultValue ?? ''),\n      textarea,\n      props.form,\n    );\n    const disabled = disabledProp || field?.disabled;\n    const status = statusProp ?? (field?.error ? 'error' : undefined);\n    const minRows = typeof autoSize === 'object' ? Math.max(1, autoSize.minRows ?? rows) : rows;\n    const maxRows =\n      typeof autoSize === 'object' ? Math.max(minRows, autoSize.maxRows ?? Infinity) : Infinity;\n    useBrowserLayoutEffect(() => {\n      if (!autoSize || !textarea.current) {\n        heightAnimation.current?.cancel();\n        measuredHeight.current = false;\n        return;\n      }\n      const node = textarea.current;\n      const measure = () => {\n        const previousHeight =\n          Number.parseFloat(getComputedStyle(node).height) || node.offsetHeight;\n        heightAnimation.current?.cancel();\n        const computed = getComputedStyle(node);\n        const lineHeight =\n          Number.parseFloat(computed.lineHeight) ||\n          (Number.parseFloat(computed.fontSize) || 14) * 1.5;\n        const padding =\n          (Number.parseFloat(computed.paddingTop) || 0) +\n          (Number.parseFloat(computed.paddingBottom) || 0);\n        const border =\n          (Number.parseFloat(computed.borderTopWidth) || 0) +\n          (Number.parseFloat(computed.borderBottomWidth) || 0);\n        const addition = computed.boxSizing === 'border-box' ? padding + border : 0;\n        node.style.height = 'auto';\n        const measured =\n          node.scrollHeight + (computed.boxSizing === 'border-box' ? border : -padding);\n        const maximum = lineHeight * maxRows + addition;\n        const height = Math.min(maximum, Math.max(lineHeight * minRows + addition, measured));\n        node.style.height = `${height}px`;\n        node.style.overflowY = measured > maximum ? 'auto' : 'hidden';\n        if (measuredHeight.current && motionEnabled && Math.abs(previousHeight - height) > 0.5)\n          heightAnimation.current = animateMotion(\n            node,\n            [{ height: `${previousHeight}px` }, { height: `${height}px` }],\n            { durationMultiplier: 0.8 },\n          );\n        measuredHeight.current = true;\n      };\n      measure();\n      let width = node.clientWidth;\n      const observer =\n        typeof ResizeObserver === 'undefined'\n          ? null\n          : new ResizeObserver(() => {\n              if (width !== node.clientWidth) {\n                width = node.clientWidth;\n                measure();\n              }\n            });\n      observer?.observe(node);\n      return () => observer?.disconnect();\n    }, [autoSize, minRows, maxRows, current, motionEnabled]);\n    useEffect(() => () => heightAnimation.current?.cancel(), []);\n    const control = (\n      <textarea\n        {...props}\n        id={props.id ?? field?.id}\n        required={props.required ?? field?.required}\n        aria-describedby={\n          [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined\n        }\n        ref={merged}\n        disabled={disabled}\n        rows={rows}\n        value={current}\n        onChange={(event) => {\n          setCurrent(event.target.value);\n          onChange?.(event);\n        }}\n        className={classes('leaf-textarea', `leaf-textarea--${size}`, className)}\n        style={{ resize: autoSize ? 'none' : resize, ...style }}\n        data-status={status}\n        aria-invalid={status === 'error' ? true : ariaInvalid}\n      />\n    );\n    return showCount ? (\n      <div className=\"leaf-textarea-wrap\">\n        {control}\n        <span className=\"leaf-textarea__count\">\n          {typeof showCount === 'function'\n            ? showCount(current, props.maxLength)\n            : `${current.length}${props.maxLength === undefined ? '' : ` / ${props.maxLength}`}`}\n        </span>\n      </div>\n    ) : (\n      control\n    );\n  },\n);\nTextareaControl.displayName = 'TextareaControl';\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  rawProps: TextareaProps,\n  ref,\n) {\n  const props = useComponentProps('Textarea', rawProps);\n  return <TextareaControl {...props} ref={ref} />;\n});\nTextarea.displayName = 'Textarea';\n"],"names":["useBrowserLayoutEffect","window","useEffect","useLayoutEffect","TextareaControl","forwardRef","size","statusProp","resize","rows","autoSize","showCount","value","defaultValue","onChange","className","style","disabledProp","ariaInvalid","props","ref","field","useFormField","textarea","useRef","heightAnimation","undefined","measuredHeight","motionEnabled","useMotionEnabled","merged","useMergedRef","current","setCurrent","useFieldValue","String","disabled","status","minRows","Math","maxRows","Infinity","node","measure","previousHeight","Number","getComputedStyle","computed","lineHeight","padding","border","addition","measured","maximum","height","animateMotion","width","observer","ResizeObserver","control","Boolean","event","classes","Textarea","rawProps","useComponentProps"],"mappings":"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"}

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

@@ -1,10 +1,13 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/timeline.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 { useListMotion } from "../shared/motion.js";
-function Timeline({ items, mode = 'left', reverse = false, pending, className, ...props }) {
+function Timeline(rawProps) {
+    const { items, mode = 'left', reverse = false, pending, className, ...props } = useComponentProps('Timeline', rawProps);
     const root = useRef(null);
     const entries = [
         ...items

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

@@ -1 +1 @@
-{"version":3,"file":"timeline/timeline.js","sources":["../../../../../src/timeline/timeline.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useRef } from 'react';\nimport { classes } from '../shared/classes';\nimport { useListMotion } from '../shared/motion';\nimport type { LeafThemeStyle } from '../theme';\nexport interface TimelineItem {\n  key: string;\n  label?: ReactNode;\n  children: ReactNode;\n  dot?: ReactNode;\n  color?: 'primary' | 'success' | 'warning' | 'error' | 'info' | (string & {});\n}\nexport interface TimelineProps extends Omit<HTMLAttributes<HTMLOListElement>, 'onChange'> {\n  items: readonly TimelineItem[];\n  mode?: 'left' | 'right' | 'alternate';\n  reverse?: boolean;\n  pending?: ReactNode;\n}\nexport function Timeline({\n  items,\n  mode = 'left',\n  reverse = false,\n  pending,\n  className,\n  ...props\n}: TimelineProps) {\n  const root = useRef<HTMLOListElement>(null);\n  const entries = [...items];\n  if (reverse) entries.reverse();\n  if (pending != null) entries.push({ key: '__leaf-pending', children: pending });\n  useListMotion(\n    root,\n    JSON.stringify([mode, entries.map((item) => item.key)]),\n    '.leaf-timeline__item',\n  );\n  const colors = {\n    primary: 'primary',\n    success: 'success',\n    warning: 'warning',\n    error: 'danger',\n    info: 'info',\n  };\n  return (\n    <ol\n      {...props}\n      ref={root}\n      className={classes('leaf-timeline', `leaf-timeline--${mode}`, className)}\n    >\n      {entries.map((item, index) => (\n        <li\n          key={item.key}\n          data-motion-key={item.key}\n          className=\"leaf-timeline__item\"\n          data-pending={item.key === '__leaf-pending' || undefined}\n          data-side={mode === 'right' || (mode === 'alternate' && index % 2) ? 'right' : 'left'}\n          style={\n            {\n              '--leaf-timeline-color':\n                item.color && item.color in colors\n                  ? `var(--leaf-color-${colors[item.color as keyof typeof colors]})`\n                  : (item.color ?? 'var(--leaf-color-primary)'),\n            } as LeafThemeStyle\n          }\n        >\n          <div className=\"leaf-timeline__dot\" aria-hidden=\"true\">\n            {item.dot}\n          </div>\n          <div className=\"leaf-timeline__content\">\n            {item.label != null && <div className=\"leaf-timeline__label\">{item.label}</div>}\n            {item.children}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n}\n"],"names":["Timeline","items","mode","reverse","pending","className","props","root","useRef","entries","useListMotion","JSON","item","colors","classes","index","undefined"],"mappings":";;;;;;AAiBO,SAASA,SAAS,EACvBC,KAAK,EACLC,OAAO,MAAM,EACbC,UAAU,KAAK,EACfC,OAAO,EACPC,SAAS,EACT,GAAGC,OACW;IACd,MAAMC,OAAOC,OAAyB;IACtC,MAAMC,UAAU;WAAIR;KAAM;IAC1B,IAAIE,SAASM,QAAQ,OAAO;IAC5B,IAAIL,AAAW,QAAXA,SAAiBK,QAAQ,IAAI,CAAC;QAAE,KAAK;QAAkB,UAAUL;IAAQ;IAC7EM,cACEH,MACAI,KAAK,SAAS,CAAC;QAACT;QAAMO,QAAQ,GAAG,CAAC,CAACG,OAASA,KAAK,GAAG;KAAE,GACtD;IAEF,MAAMC,SAAS;QACb,SAAS;QACT,SAAS;QACT,SAAS;QACT,OAAO;QACP,MAAM;IACR;IACA,OAAO,WAAP,GACE,IAAC;QACE,GAAGP,KAAK;QACT,KAAKC;QACL,WAAWO,QAAQ,iBAAiB,CAAC,eAAe,EAAEZ,MAAM,EAAEG;kBAE7DI,QAAQ,GAAG,CAAC,CAACG,MAAMG,QAAAA,WAAAA,GAClB,KAAC;gBAEC,mBAAiBH,KAAK,GAAG;gBACzB,WAAU;gBACV,gBAAcA,AAAa,qBAAbA,KAAK,GAAG,IAAyBI;gBAC/C,aAAWd,AAAS,YAATA,QAAqBA,AAAS,gBAATA,QAAwBa,QAAQ,IAAK,UAAU;gBAC/E,OACE;oBACE,yBACEH,KAAK,KAAK,IAAIA,KAAK,KAAK,IAAIC,SACxB,CAAC,iBAAiB,EAAEA,MAAM,CAACD,KAAK,KAAK,CAAwB,CAAC,CAAC,CAAC,GAC/DA,KAAK,KAAK,IAAI;gBACvB;;kCAGF,IAAC;wBAAI,WAAU;wBAAqB,eAAY;kCAC7CA,KAAK,GAAG;;kCAEX,KAAC;wBAAI,WAAU;;4BACE,QAAdA,KAAK,KAAK,IAAY,WAAR,GAAQ,IAAC;gCAAI,WAAU;0CAAwBA,KAAK,KAAK;;4BACvEA,KAAK,QAAQ;;;;eAnBXA,KAAK,GAAG;;AAyBvB"}
+{"version":3,"file":"timeline/timeline.js","sources":["../../../../../src/timeline/timeline.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useRef } from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { classes } from '../shared/classes';\nimport { useListMotion } from '../shared/motion';\nimport type { LeafThemeStyle } from '../theme';\nexport interface TimelineItem {\n  key: string;\n  label?: ReactNode;\n  children: ReactNode;\n  dot?: ReactNode;\n  color?: 'primary' | 'success' | 'warning' | 'error' | 'info' | (string & {});\n}\nexport interface TimelineProps extends Omit<HTMLAttributes<HTMLOListElement>, 'onChange'> {\n  items: readonly TimelineItem[];\n  mode?: 'left' | 'right' | 'alternate';\n  reverse?: boolean;\n  pending?: ReactNode;\n}\nexport function Timeline(rawProps: TimelineProps) {\n  const {\n    items,\n    mode = 'left',\n    reverse = false,\n    pending,\n    className,\n    ...props\n  } = useComponentProps('Timeline', rawProps);\n  const root = useRef<HTMLOListElement>(null);\n  const entries = [...items];\n  if (reverse) entries.reverse();\n  if (pending != null) entries.push({ key: '__leaf-pending', children: pending });\n  useListMotion(\n    root,\n    JSON.stringify([mode, entries.map((item) => item.key)]),\n    '.leaf-timeline__item',\n  );\n  const colors = {\n    primary: 'primary',\n    success: 'success',\n    warning: 'warning',\n    error: 'danger',\n    info: 'info',\n  };\n  return (\n    <ol\n      {...props}\n      ref={root}\n      className={classes('leaf-timeline', `leaf-timeline--${mode}`, className)}\n    >\n      {entries.map((item, index) => (\n        <li\n          key={item.key}\n          data-motion-key={item.key}\n          className=\"leaf-timeline__item\"\n          data-pending={item.key === '__leaf-pending' || undefined}\n          data-side={mode === 'right' || (mode === 'alternate' && index % 2) ? 'right' : 'left'}\n          style={\n            {\n              '--leaf-timeline-color':\n                item.color && item.color in colors\n                  ? `var(--leaf-color-${colors[item.color as keyof typeof colors]})`\n                  : (item.color ?? 'var(--leaf-color-primary)'),\n            } as LeafThemeStyle\n          }\n        >\n          <div className=\"leaf-timeline__dot\" aria-hidden=\"true\">\n            {item.dot}\n          </div>\n          <div className=\"leaf-timeline__content\">\n            {item.label != null && <div className=\"leaf-timeline__label\">{item.label}</div>}\n            {item.children}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n}\n"],"names":["Timeline","rawProps","items","mode","reverse","pending","className","props","useComponentProps","root","useRef","entries","useListMotion","JSON","item","colors","classes","index","undefined"],"mappings":";;;;;;;;AAkBO,SAASA,SAASC,QAAuB;IAC9C,MAAM,EACJC,KAAK,EACLC,OAAO,MAAM,EACbC,UAAU,KAAK,EACfC,OAAO,EACPC,SAAS,EACT,GAAGC,OACJ,GAAGC,kBAAkB,YAAYP;IAClC,MAAMQ,OAAOC,OAAyB;IACtC,MAAMC,UAAU;WAAIT;KAAM;IAC1B,IAAIE,SAASO,QAAQ,OAAO;IAC5B,IAAIN,AAAW,QAAXA,SAAiBM,QAAQ,IAAI,CAAC;QAAE,KAAK;QAAkB,UAAUN;IAAQ;IAC7EO,cACEH,MACAI,KAAK,SAAS,CAAC;QAACV;QAAMQ,QAAQ,GAAG,CAAC,CAACG,OAASA,KAAK,GAAG;KAAE,GACtD;IAEF,MAAMC,SAAS;QACb,SAAS;QACT,SAAS;QACT,SAAS;QACT,OAAO;QACP,MAAM;IACR;IACA,OAAO,WAAP,GACE,IAAC;QACE,GAAGR,KAAK;QACT,KAAKE;QACL,WAAWO,QAAQ,iBAAiB,CAAC,eAAe,EAAEb,MAAM,EAAEG;kBAE7DK,QAAQ,GAAG,CAAC,CAACG,MAAMG,QAAAA,WAAAA,GAClB,KAAC;gBAEC,mBAAiBH,KAAK,GAAG;gBACzB,WAAU;gBACV,gBAAcA,AAAa,qBAAbA,KAAK,GAAG,IAAyBI;gBAC/C,aAAWf,AAAS,YAATA,QAAqBA,AAAS,gBAATA,QAAwBc,QAAQ,IAAK,UAAU;gBAC/E,OACE;oBACE,yBACEH,KAAK,KAAK,IAAIA,KAAK,KAAK,IAAIC,SACxB,CAAC,iBAAiB,EAAEA,MAAM,CAACD,KAAK,KAAK,CAAwB,CAAC,CAAC,CAAC,GAC/DA,KAAK,KAAK,IAAI;gBACvB;;kCAGF,IAAC;wBAAI,WAAU;wBAAqB,eAAY;kCAC7CA,KAAK,GAAG;;kCAEX,KAAC;wBAAI,WAAU;;4BACE,QAAdA,KAAK,KAAK,IAAY,WAAR,GAAQ,IAAC;gCAAI,WAAU;0CAAwBA,KAAK,KAAK;;4BACvEA,KAAK,QAAQ;;;;eAnBXA,KAAK,GAAG;;AAyBvB"}

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

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

package/dist/esm/browser/modules/timepicker/time-panel.js

@@ -1,4 +1,5 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/timepicker.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
@@ -143,36 +144,36 @@ function TimePanel({ value, onChange, showSeconds, use12Hours, minuteStep = 5, s
         ref: ref,
         className: "leaf-time-picker__columns",
         children: [
-            column(messages.hours, hours, use12Hours ? value.hour % 12 || 12 : value.hour, (hour)=>onChange({
+            column(messages.timePicker.hours, hours, use12Hours ? value.hour % 12 || 12 : value.hour, (hour)=>onChange({
                     ...value,
                     hour: use12Hours ? hour % 12 + (value.hour < 12 ? 0 : 12) : hour
                 }), void 0, (hour)=>!!disabledTime?.({
                     ...value,
                     hour: use12Hours ? hour % 12 + (value.hour < 12 ? 0 : 12) : hour
                 })),
-            column(messages.minutes, options(minuteStep, value.minute), value.minute, (minute)=>onChange({
+            column(messages.timePicker.minutes, options(minuteStep, value.minute), value.minute, (minute)=>onChange({
                     ...value,
                     minute
                 }), void 0, (minute)=>!!disabledTime?.({
                     ...value,
                     minute
                 })),
-            showSeconds && column(messages.seconds, options(secondStep, value.second), value.second, (second)=>onChange({
+            showSeconds && column(messages.timePicker.seconds, options(secondStep, value.second), value.second, (second)=>onChange({
                     ...value,
                     second
                 }), void 0, (second)=>!!disabledTime?.({
                     ...value,
                     second
                 })),
-            use12Hours && column(messages.period, [
+            use12Hours && column(messages.timePicker.period, [
                 0,
                 1
             ], value.hour < 12 ? 0 : 1, (period)=>onChange({
                     ...value,
                     hour: value.hour % 12 + 12 * period
                 }), [
-                messages.am,
-                messages.pm
+                messages.timePicker.am,
+                messages.timePicker.pm
             ], (period)=>!!disabledTime?.({
                     ...value,
                     hour: value.hour % 12 + 12 * period

package/dist/esm/browser/modules/timepicker/time-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker/time-panel.js","sources":["../../../../../src/timepicker/time-panel.tsx"],"sourcesContent":["import { Check } from 'lucide-react';\nimport {\n  type CSSProperties,\n  type KeyboardEvent,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useLeafConfig } from '../config-provider/context';\nimport { padTime, type TimeParts } from '../shared/time';\n\ninterface TimePanelProps {\n  value: TimeParts;\n  onChange: (value: TimeParts) => void;\n  showSeconds?: boolean;\n  use12Hours?: boolean;\n  minuteStep?: number;\n  secondStep?: number;\n  autoFocus?: boolean;\n  disabledTime?: (parts: TimeParts) => boolean;\n}\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\ninterface TimeColumnProps {\n  label: string;\n  choices: number[];\n  selected: number;\n  change: (next: number) => void;\n  labels?: string[];\n  disabled?: (choice: number) => boolean;\n}\nfunction keepTimeOptionVisible(column: HTMLElement, row: HTMLElement) {\n  const top = row.offsetTop;\n  const bottom = top + row.offsetHeight;\n  if (top < column.scrollTop) column.scrollTop = top;\n  else if (bottom > column.scrollTop + column.clientHeight)\n    column.scrollTop = bottom - column.clientHeight;\n}\n\nfunction TimeColumn({ label, choices, selected, change, labels, disabled }: TimeColumnProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [selection, setSelection] = useState<CSSProperties>();\n  useBrowserLayoutEffect(() => {\n    const column = ref.current;\n    if (!column) return;\n    const row = column.querySelector<HTMLButtonElement>('[aria-selected=\"true\"]:not(:disabled)');\n    const update = () => {\n      setSelection(\n        row\n          ? ({\n              '--leaf-time-selection-y': `${row.offsetTop}px`,\n              '--leaf-time-selection-height': `${row.offsetHeight}px`,\n            } as CSSProperties)\n          : undefined,\n      );\n      // Scrolling a row into every ancestor moves the whole range popup and can\n      // hide its endpoint labels when both time panels are present.\n      if (row) keepTimeOptionVisible(column, row);\n    };\n    update();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(update);\n    observer.observe(column);\n    if (row) observer.observe(row);\n    return () => observer.disconnect();\n  }, [selected, choices, disabled]);\n  const key = (event: KeyboardEvent<HTMLButtonElement>, current: number) => {\n    const available = choices.filter((choice) => !disabled?.(choice));\n    if (!available.length) return;\n    const index = available.indexOf(current);\n    let next = index;\n    if (event.key === 'ArrowDown') next = (index + 1) % available.length;\n    else if (event.key === 'ArrowUp') next = (index - 1 + available.length) % available.length;\n    else if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = available.length - 1;\n    else return;\n    event.preventDefault();\n    change(available[next] ?? current);\n    const node =\n      event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\n        'button:not(:disabled)',\n      )[next];\n    node?.focus({ preventScroll: true });\n    if (node && ref.current) keepTimeOptionVisible(ref.current, node);\n  };\n  return (\n    <div className=\"leaf-time-picker__column-wrap\">\n      <div className=\"leaf-time-picker__column-label\" aria-hidden=\"true\">\n        {label}\n      </div>\n      <div ref={ref} className=\"leaf-time-picker__column\" role=\"listbox\" aria-label={label}>\n        <div\n          className=\"leaf-time-picker__selection\"\n          data-ready={Boolean(selection)}\n          aria-hidden=\"true\"\n          style={selection}\n        />\n        {choices.map((option) => (\n          <button\n            type=\"button\"\n            key={option}\n            role=\"option\"\n            disabled={disabled?.(option)}\n            tabIndex={\n              option ===\n              (disabled?.(selected) ? choices.find((choice) => !disabled?.(choice)) : selected)\n                ? 0\n                : -1\n            }\n            aria-selected={option === selected}\n            className=\"leaf-floating__option\"\n            onClick={() => change(option)}\n            onKeyDown={(event) => key(event, option)}\n          >\n            <span>{labels?.[option] ?? padTime(option)}</span>\n            <Check\n              size={14}\n              aria-hidden=\"true\"\n              className=\"leaf-time-picker__check\"\n              style={{ opacity: option === selected ? 1 : 0 }}\n            />\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\nexport function TimePanel({\n  value,\n  onChange,\n  showSeconds,\n  use12Hours,\n  minuteStep = 5,\n  secondStep = 1,\n  autoFocus,\n  disabledTime,\n}: TimePanelProps) {\n  const { messages } = useLeafConfig();\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (autoFocus)\n      ref.current\n        ?.querySelector<HTMLButtonElement>('[aria-selected=\"true\"]')\n        ?.focus({ preventScroll: true });\n  }, [autoFocus]);\n  const options = (step: number, selected: number) => {\n    const safe = Number.isFinite(step) ? Math.max(1, Math.min(60, Math.floor(step))) : 1;\n    return [\n      ...new Set([...Array.from({ length: Math.ceil(60 / safe) }, (_, i) => i * safe), selected]),\n    ].sort((a, b) => a - b);\n  };\n  const column = (\n    label: string,\n    choices: number[],\n    selected: number,\n    change: (next: number) => void,\n    labels?: string[],\n    disabled?: (choice: number) => boolean,\n  ) => {\n    return (\n      <TimeColumn\n        key={label}\n        label={label}\n        choices={choices}\n        selected={selected}\n        change={change}\n        labels={labels}\n        disabled={disabled}\n      />\n    );\n  };\n  const hours = use12Hours\n    ? Array.from({ length: 12 }, (_, i) => i + 1)\n    : Array.from({ length: 24 }, (_, i) => i);\n  return (\n    <div ref={ref} className=\"leaf-time-picker__columns\">\n      {column(\n        messages.hours,\n        hours,\n        use12Hours ? value.hour % 12 || 12 : value.hour,\n        (hour) =>\n          onChange({\n            ...value,\n            hour: use12Hours ? (hour % 12) + (value.hour < 12 ? 0 : 12) : hour,\n          }),\n        undefined,\n        (hour) =>\n          !!disabledTime?.({\n            ...value,\n            hour: use12Hours ? (hour % 12) + (value.hour < 12 ? 0 : 12) : hour,\n          }),\n      )}\n      {column(\n        messages.minutes,\n        options(minuteStep, value.minute),\n        value.minute,\n        (minute) => onChange({ ...value, minute }),\n        undefined,\n        (minute) => !!disabledTime?.({ ...value, minute }),\n      )}\n      {showSeconds &&\n        column(\n          messages.seconds,\n          options(secondStep, value.second),\n          value.second,\n          (second) => onChange({ ...value, second }),\n          undefined,\n          (second) => !!disabledTime?.({ ...value, second }),\n        )}\n      {use12Hours &&\n        column(\n          messages.period,\n          [0, 1],\n          value.hour < 12 ? 0 : 1,\n          (period) => onChange({ ...value, hour: (value.hour % 12) + period * 12 }),\n          [messages.am, messages.pm],\n          (period) => !!disabledTime?.({ ...value, hour: (value.hour % 12) + period * 12 }),\n        )}\n    </div>\n  );\n}\n"],"names":["useBrowserLayoutEffect","window","useEffect","useLayoutEffect","keepTimeOptionVisible","column","row","top","bottom","TimeColumn","label","choices","selected","change","labels","disabled","ref","useRef","selection","setSelection","useState","update","undefined","ResizeObserver","observer","key","event","current","available","choice","index","next","node","Boolean","option","padTime","Check","TimePanel","value","onChange","showSeconds","use12Hours","minuteStep","secondStep","autoFocus","disabledTime","messages","useLeafConfig","options","step","safe","Number","Math","Set","Array","_","i","a","b","hours","hour","minute","second","period"],"mappings":"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"}
+{"version":3,"file":"timepicker/time-panel.js","sources":["../../../../../src/timepicker/time-panel.tsx"],"sourcesContent":["import { Check } from 'lucide-react';\nimport {\n  type CSSProperties,\n  type KeyboardEvent,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useLeafConfig } from '../config-provider/context';\nimport { padTime, type TimeParts } from '../shared/time';\n\ninterface TimePanelProps {\n  value: TimeParts;\n  onChange: (value: TimeParts) => void;\n  showSeconds?: boolean;\n  use12Hours?: boolean;\n  minuteStep?: number;\n  secondStep?: number;\n  autoFocus?: boolean;\n  disabledTime?: (parts: TimeParts) => boolean;\n}\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\ninterface TimeColumnProps {\n  label: string;\n  choices: number[];\n  selected: number;\n  change: (next: number) => void;\n  labels?: string[];\n  disabled?: (choice: number) => boolean;\n}\nfunction keepTimeOptionVisible(column: HTMLElement, row: HTMLElement) {\n  const top = row.offsetTop;\n  const bottom = top + row.offsetHeight;\n  if (top < column.scrollTop) column.scrollTop = top;\n  else if (bottom > column.scrollTop + column.clientHeight)\n    column.scrollTop = bottom - column.clientHeight;\n}\n\nfunction TimeColumn({ label, choices, selected, change, labels, disabled }: TimeColumnProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [selection, setSelection] = useState<CSSProperties>();\n  useBrowserLayoutEffect(() => {\n    const column = ref.current;\n    if (!column) return;\n    const row = column.querySelector<HTMLButtonElement>('[aria-selected=\"true\"]:not(:disabled)');\n    const update = () => {\n      setSelection(\n        row\n          ? ({\n              '--leaf-time-selection-y': `${row.offsetTop}px`,\n              '--leaf-time-selection-height': `${row.offsetHeight}px`,\n            } as CSSProperties)\n          : undefined,\n      );\n      // Scrolling a row into every ancestor moves the whole range popup and can\n      // hide its endpoint labels when both time panels are present.\n      if (row) keepTimeOptionVisible(column, row);\n    };\n    update();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(update);\n    observer.observe(column);\n    if (row) observer.observe(row);\n    return () => observer.disconnect();\n  }, [selected, choices, disabled]);\n  const key = (event: KeyboardEvent<HTMLButtonElement>, current: number) => {\n    const available = choices.filter((choice) => !disabled?.(choice));\n    if (!available.length) return;\n    const index = available.indexOf(current);\n    let next = index;\n    if (event.key === 'ArrowDown') next = (index + 1) % available.length;\n    else if (event.key === 'ArrowUp') next = (index - 1 + available.length) % available.length;\n    else if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = available.length - 1;\n    else return;\n    event.preventDefault();\n    change(available[next] ?? current);\n    const node =\n      event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\n        'button:not(:disabled)',\n      )[next];\n    node?.focus({ preventScroll: true });\n    if (node && ref.current) keepTimeOptionVisible(ref.current, node);\n  };\n  return (\n    <div className=\"leaf-time-picker__column-wrap\">\n      <div className=\"leaf-time-picker__column-label\" aria-hidden=\"true\">\n        {label}\n      </div>\n      <div ref={ref} className=\"leaf-time-picker__column\" role=\"listbox\" aria-label={label}>\n        <div\n          className=\"leaf-time-picker__selection\"\n          data-ready={Boolean(selection)}\n          aria-hidden=\"true\"\n          style={selection}\n        />\n        {choices.map((option) => (\n          <button\n            type=\"button\"\n            key={option}\n            role=\"option\"\n            disabled={disabled?.(option)}\n            tabIndex={\n              option ===\n              (disabled?.(selected) ? choices.find((choice) => !disabled?.(choice)) : selected)\n                ? 0\n                : -1\n            }\n            aria-selected={option === selected}\n            className=\"leaf-floating__option\"\n            onClick={() => change(option)}\n            onKeyDown={(event) => key(event, option)}\n          >\n            <span>{labels?.[option] ?? padTime(option)}</span>\n            <Check\n              size={14}\n              aria-hidden=\"true\"\n              className=\"leaf-time-picker__check\"\n              style={{ opacity: option === selected ? 1 : 0 }}\n            />\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\nexport function TimePanel({\n  value,\n  onChange,\n  showSeconds,\n  use12Hours,\n  minuteStep = 5,\n  secondStep = 1,\n  autoFocus,\n  disabledTime,\n}: TimePanelProps) {\n  const { messages } = useLeafConfig();\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (autoFocus)\n      ref.current\n        ?.querySelector<HTMLButtonElement>('[aria-selected=\"true\"]')\n        ?.focus({ preventScroll: true });\n  }, [autoFocus]);\n  const options = (step: number, selected: number) => {\n    const safe = Number.isFinite(step) ? Math.max(1, Math.min(60, Math.floor(step))) : 1;\n    return [\n      ...new Set([...Array.from({ length: Math.ceil(60 / safe) }, (_, i) => i * safe), selected]),\n    ].sort((a, b) => a - b);\n  };\n  const column = (\n    label: string,\n    choices: number[],\n    selected: number,\n    change: (next: number) => void,\n    labels?: string[],\n    disabled?: (choice: number) => boolean,\n  ) => {\n    return (\n      <TimeColumn\n        key={label}\n        label={label}\n        choices={choices}\n        selected={selected}\n        change={change}\n        labels={labels}\n        disabled={disabled}\n      />\n    );\n  };\n  const hours = use12Hours\n    ? Array.from({ length: 12 }, (_, i) => i + 1)\n    : Array.from({ length: 24 }, (_, i) => i);\n  return (\n    <div ref={ref} className=\"leaf-time-picker__columns\">\n      {column(\n        messages.timePicker.hours,\n        hours,\n        use12Hours ? value.hour % 12 || 12 : value.hour,\n        (hour) =>\n          onChange({\n            ...value,\n            hour: use12Hours ? (hour % 12) + (value.hour < 12 ? 0 : 12) : hour,\n          }),\n        undefined,\n        (hour) =>\n          !!disabledTime?.({\n            ...value,\n            hour: use12Hours ? (hour % 12) + (value.hour < 12 ? 0 : 12) : hour,\n          }),\n      )}\n      {column(\n        messages.timePicker.minutes,\n        options(minuteStep, value.minute),\n        value.minute,\n        (minute) => onChange({ ...value, minute }),\n        undefined,\n        (minute) => !!disabledTime?.({ ...value, minute }),\n      )}\n      {showSeconds &&\n        column(\n          messages.timePicker.seconds,\n          options(secondStep, value.second),\n          value.second,\n          (second) => onChange({ ...value, second }),\n          undefined,\n          (second) => !!disabledTime?.({ ...value, second }),\n        )}\n      {use12Hours &&\n        column(\n          messages.timePicker.period,\n          [0, 1],\n          value.hour < 12 ? 0 : 1,\n          (period) => onChange({ ...value, hour: (value.hour % 12) + period * 12 }),\n          [messages.timePicker.am, messages.timePicker.pm],\n          (period) => !!disabledTime?.({ ...value, hour: (value.hour % 12) + period * 12 }),\n        )}\n    </div>\n  );\n}\n"],"names":["useBrowserLayoutEffect","window","useEffect","useLayoutEffect","keepTimeOptionVisible","column","row","top","bottom","TimeColumn","label","choices","selected","change","labels","disabled","ref","useRef","selection","setSelection","useState","update","undefined","ResizeObserver","observer","key","event","current","available","choice","index","next","node","Boolean","option","padTime","Check","TimePanel","value","onChange","showSeconds","use12Hours","minuteStep","secondStep","autoFocus","disabledTime","messages","useLeafConfig","options","step","safe","Number","Math","Set","Array","_","i","a","b","hours","hour","minute","second","period"],"mappings":";;;;;;;;AAsBA,MAAMA,yBAAyB,AAAkB,MAAlB,OAAOC,SAAyBC,YAAYC;AAU3E,SAASC,sBAAsBC,MAAmB,EAAEC,GAAgB;IAClE,MAAMC,MAAMD,IAAI,SAAS;IACzB,MAAME,SAASD,MAAMD,IAAI,YAAY;IACrC,IAAIC,MAAMF,OAAO,SAAS,EAAEA,OAAO,SAAS,GAAGE;SAC1C,IAAIC,SAASH,OAAO,SAAS,GAAGA,OAAO,YAAY,EACtDA,OAAO,SAAS,GAAGG,SAASH,OAAO,YAAY;AACnD;AAEA,SAASI,WAAW,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAmB;IACzF,MAAMC,MAAMC,OAAuB;IACnC,MAAM,CAACC,WAAWC,aAAa,GAAGC;IAClCpB,uBAAuB;QACrB,MAAMK,SAASW,IAAI,OAAO;QAC1B,IAAI,CAACX,QAAQ;QACb,MAAMC,MAAMD,OAAO,aAAa,CAAoB;QACpD,MAAMgB,SAAS;YACbF,aACEb,MACK;gBACC,2BAA2B,GAAGA,IAAI,SAAS,CAAC,EAAE,CAAC;gBAC/C,gCAAgC,GAAGA,IAAI,YAAY,CAAC,EAAE,CAAC;YACzD,IACAgB;YAIN,IAAIhB,KAAKF,sBAAsBC,QAAQC;QACzC;QACAe;QACA,IAAI,AAA0B,MAA1B,OAAOE,gBAAgC;QAC3C,MAAMC,WAAW,IAAID,eAAeF;QACpCG,SAAS,OAAO,CAACnB;QACjB,IAAIC,KAAKkB,SAAS,OAAO,CAAClB;QAC1B,OAAO,IAAMkB,SAAS,UAAU;IAClC,GAAG;QAACZ;QAAUD;QAASI;KAAS;IAChC,MAAMU,MAAM,CAACC,OAAyCC;QACpD,MAAMC,YAAYjB,QAAQ,MAAM,CAAC,CAACkB,SAAW,CAACd,WAAWc;QACzD,IAAI,CAACD,UAAU,MAAM,EAAE;QACvB,MAAME,QAAQF,UAAU,OAAO,CAACD;QAChC,IAAII,OAAOD;QACX,IAAIJ,AAAc,gBAAdA,MAAM,GAAG,EAAkBK,OAAQD,AAAAA,CAAAA,QAAQ,KAAKF,UAAU,MAAM;aAC/D,IAAIF,AAAc,cAAdA,MAAM,GAAG,EAAgBK,OAAQD,AAAAA,CAAAA,QAAQ,IAAIF,UAAU,MAAK,IAAKA,UAAU,MAAM;aACrF,IAAIF,AAAc,WAAdA,MAAM,GAAG,EAAaK,OAAO;;YACjC,IAAIL,AAAc,UAAdA,MAAM,GAAG,EACb;YADyBK,OAAOH,UAAU,MAAM,GAAG;;QAExDF,MAAM,cAAc;QACpBb,OAAOe,SAAS,CAACG,KAAK,IAAIJ;QAC1B,MAAMK,OACJN,MAAM,aAAa,CAAC,aAAa,EAAE,iBACjC,wBACD,CAACK,KAAK;QACTC,MAAM,MAAM;YAAE,eAAe;QAAK;QAClC,IAAIA,QAAQhB,IAAI,OAAO,EAAEZ,sBAAsBY,IAAI,OAAO,EAAEgB;IAC9D;IACA,OAAO,WAAP,GACE,KAAC;QAAI,WAAU;;0BACb,IAAC;gBAAI,WAAU;gBAAiC,eAAY;0BACzDtB;;0BAEH,KAAC;gBAAI,KAAKM;gBAAK,WAAU;gBAA2B,MAAK;gBAAU,cAAYN;;kCAC7E,IAAC;wBACC,WAAU;wBACV,cAAYuB,QAAQf;wBACpB,eAAY;wBACZ,OAAOA;;oBAERP,QAAQ,GAAG,CAAC,CAACuB,SAAAA,WAAAA,GACZ,KAAC;4BACC,MAAK;4BAEL,MAAK;4BACL,UAAUnB,WAAWmB;4BACrB,UACEA,WACCnB,CAAAA,WAAWH,YAAYD,QAAQ,IAAI,CAAC,CAACkB,SAAW,CAACd,WAAWc,WAAWjB,QAAO,IAC3E,IACA;4BAEN,iBAAesB,WAAWtB;4BAC1B,WAAU;4BACV,SAAS,IAAMC,OAAOqB;4BACtB,WAAW,CAACR,QAAUD,IAAIC,OAAOQ;;8CAEjC,IAAC;8CAAMpB,QAAQ,CAACoB,OAAO,IAAIC,QAAQD;;8CACnC,IAACE,OAAKA;oCACJ,MAAM;oCACN,eAAY;oCACZ,WAAU;oCACV,OAAO;wCAAE,SAASF,WAAWtB,WAAW,IAAI;oCAAE;;;2BAnB3CsB;;;;;AA0BjB;AACO,SAASG,UAAU,EACxBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACVC,aAAa,CAAC,EACdC,aAAa,CAAC,EACdC,SAAS,EACTC,YAAY,EACG;IACf,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IACrB,MAAM/B,MAAMC,OAAuB;IACnCf,UAAU;QACR,IAAI0C,WACF5B,IAAI,OAAO,EACP,cAAiC,2BACjC,MAAM;YAAE,eAAe;QAAK;IACpC,GAAG;QAAC4B;KAAU;IACd,MAAMI,UAAU,CAACC,MAAcrC;QAC7B,MAAMsC,OAAOC,OAAO,QAAQ,CAACF,QAAQG,KAAK,GAAG,CAAC,GAAGA,KAAK,GAAG,CAAC,IAAIA,KAAK,KAAK,CAACH,UAAU;QACnF,OAAO;eACF,IAAII,IAAI;mBAAIC,MAAM,IAAI,CAAC;oBAAE,QAAQF,KAAK,IAAI,CAAC,KAAKF;gBAAM,GAAG,CAACK,GAAGC,IAAMA,IAAIN;gBAAOtC;aAAS;SAC3F,CAAC,IAAI,CAAC,CAAC6C,GAAGC,IAAMD,IAAIC;IACvB;IACA,MAAMrD,SAAS,CACbK,OACAC,SACAC,UACAC,QACAC,QACAC,WAEO,WAAP,GACE,IAACN,YAAUA;YAET,OAAOC;YACP,SAASC;YACT,UAAUC;YACV,QAAQC;YACR,QAAQC;YACR,UAAUC;WANLL;IAUX,MAAMiD,QAAQlB,aACVa,MAAM,IAAI,CAAC;QAAE,QAAQ;IAAG,GAAG,CAACC,GAAGC,IAAMA,IAAI,KACzCF,MAAM,IAAI,CAAC;QAAE,QAAQ;IAAG,GAAG,CAACC,GAAGC,IAAMA;IACzC,OAAO,WAAP,GACE,KAAC;QAAI,KAAKxC;QAAK,WAAU;;YACtBX,OACCyC,SAAS,UAAU,CAAC,KAAK,EACzBa,OACAlB,aAAaH,MAAM,IAAI,GAAG,MAAM,KAAKA,MAAM,IAAI,EAC/C,CAACsB,OACCrB,SAAS;oBACP,GAAGD,KAAK;oBACR,MAAMG,aAAcmB,OAAO,KAAOtB,CAAAA,MAAM,IAAI,GAAG,KAAK,IAAI,EAAC,IAAKsB;gBAChE,IACFtC,QACA,CAACsC,OACC,CAAC,CAACf,eAAe;oBACf,GAAGP,KAAK;oBACR,MAAMG,aAAcmB,OAAO,KAAOtB,CAAAA,MAAM,IAAI,GAAG,KAAK,IAAI,EAAC,IAAKsB;gBAChE;YAEHvD,OACCyC,SAAS,UAAU,CAAC,OAAO,EAC3BE,QAAQN,YAAYJ,MAAM,MAAM,GAChCA,MAAM,MAAM,EACZ,CAACuB,SAAWtB,SAAS;oBAAE,GAAGD,KAAK;oBAAEuB;gBAAO,IACxCvC,QACA,CAACuC,SAAW,CAAC,CAAChB,eAAe;oBAAE,GAAGP,KAAK;oBAAEuB;gBAAO;YAEjDrB,eACCnC,OACEyC,SAAS,UAAU,CAAC,OAAO,EAC3BE,QAAQL,YAAYL,MAAM,MAAM,GAChCA,MAAM,MAAM,EACZ,CAACwB,SAAWvB,SAAS;oBAAE,GAAGD,KAAK;oBAAEwB;gBAAO,IACxCxC,QACA,CAACwC,SAAW,CAAC,CAACjB,eAAe;oBAAE,GAAGP,KAAK;oBAAEwB;gBAAO;YAEnDrB,cACCpC,OACEyC,SAAS,UAAU,CAAC,MAAM,EAC1B;gBAAC;gBAAG;aAAE,EACNR,MAAM,IAAI,GAAG,KAAK,IAAI,GACtB,CAACyB,SAAWxB,SAAS;oBAAE,GAAGD,KAAK;oBAAE,MAAOA,MAAM,IAAI,GAAG,KAAMyB,AAAS,KAATA;gBAAY,IACvE;gBAACjB,SAAS,UAAU,CAAC,EAAE;gBAAEA,SAAS,UAAU,CAAC,EAAE;aAAC,EAChD,CAACiB,SAAW,CAAC,CAAClB,eAAe;oBAAE,GAAGP,KAAK;oBAAE,MAAOA,MAAM,IAAI,GAAG,KAAMyB,AAAS,KAATA;gBAAY;;;AAIzF"}