@ifhover/leaf-ui 0.0.0-stage → 0.6.0

package/dist/esm/tabs/use-moving-indicator.js

@@ -0,0 +1,81 @@
+"use client";
+import { useEffect, useLayoutEffect, useRef } from "react";
+const useBrowserLayoutEffect = "u" < typeof window ? useEffect : useLayoutEffect;
+function useMovingIndicator(container, indicator, selector, selection, enabled = true) {
+    const previous = useRef(null);
+    const refresh = useRef(()=>{});
+    useBrowserLayoutEffect(()=>{
+        const host = container.current;
+        const marker = indicator.current;
+        if (!enabled || !host || !marker) return;
+        let frame = 0;
+        const measure = (animate)=>{
+            const active = host.querySelector(selector);
+            if (!active || active.closest('[inert],[hidden]')) {
+                marker.dataset.visible = 'false';
+                previous.current = null;
+                return;
+            }
+            const bounds = host.getBoundingClientRect();
+            const item = active.getBoundingClientRect();
+            const scaleX = host.offsetWidth ? bounds.width / host.offsetWidth : 1;
+            const scaleY = host.offsetHeight ? bounds.height / host.offsetHeight : 1;
+            const geometry = {
+                '--leaf-indicator-x': `${(item.left - bounds.left) / (scaleX || 1) + host.scrollLeft - host.clientLeft}px`,
+                '--leaf-indicator-y': `${(item.top - bounds.top) / (scaleY || 1) + host.scrollTop - host.clientTop}px`,
+                '--leaf-indicator-width': `${item.width / (scaleX || 1)}px`,
+                '--leaf-indicator-height': `${item.height / (scaleY || 1)}px`
+            };
+            if ('true' === marker.dataset.visible && Object.entries(geometry).every(([key, value])=>marker.style.getPropertyValue(key) === value)) return;
+            marker.dataset.animate = String(animate && null !== previous.current);
+            for (const [key, value] of Object.entries(geometry))marker.style.setProperty(key, value);
+            marker.dataset.visible = String(item.width > 0 && item.height > 0);
+            previous.current = active;
+        };
+        refresh.current = measure;
+        const schedule = ()=>{
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(()=>{
+                for (const node of host.querySelectorAll('[data-leaf-indicator-item]'))observer?.observe(node);
+                measure(false);
+            });
+        };
+        const observer = "u" < typeof ResizeObserver ? null : new ResizeObserver(schedule);
+        observer?.observe(host);
+        for (const node of host.querySelectorAll('[data-leaf-indicator-item]'))observer?.observe(node);
+        const mutation = "u" < typeof MutationObserver ? null : new MutationObserver((records)=>{
+            if (records.some((record)=>record.target !== marker)) schedule();
+        });
+        mutation?.observe(host, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+        host.addEventListener('scroll', schedule, {
+            passive: true
+        });
+        window.addEventListener('resize', schedule);
+        measure(false);
+        document.fonts?.addEventListener('loadingdone', schedule);
+        return ()=>{
+            cancelAnimationFrame(frame);
+            observer?.disconnect();
+            mutation?.disconnect();
+            host.removeEventListener('scroll', schedule);
+            window.removeEventListener('resize', schedule);
+            document.fonts?.removeEventListener('loadingdone', schedule);
+            refresh.current = ()=>{};
+        };
+    }, [
+        container,
+        indicator,
+        selector,
+        enabled
+    ]);
+    useBrowserLayoutEffect(()=>refresh.current(true), [
+        selection
+    ]);
+}
+export { useMovingIndicator };
+
+//# sourceMappingURL=use-moving-indicator.js.map

package/dist/esm/tabs/use-moving-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs/use-moving-indicator.js","sources":["../../../src/tabs/use-moving-indicator.ts"],"sourcesContent":["import { type RefObject, useEffect, useLayoutEffect, useRef } from 'react';\n\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\n/** A single selection surface follows the actual item geometry, including RTL scroll offsets. */\nexport function useMovingIndicator(\n  container: RefObject<HTMLElement | null>,\n  indicator: RefObject<HTMLElement | null>,\n  selector: string,\n  selection: unknown,\n  enabled = true,\n) {\n  const previous = useRef<HTMLElement | null>(null);\n  const refresh = useRef<(animate: boolean) => void>(() => {});\n  useBrowserLayoutEffect(() => {\n    const host = container.current;\n    const marker = indicator.current;\n    if (!enabled || !host || !marker) return;\n    let frame = 0;\n    const measure = (animate: boolean) => {\n      const active = host.querySelector<HTMLElement>(selector);\n      if (!active || active.closest('[inert],[hidden]')) {\n        marker.dataset.visible = 'false';\n        previous.current = null;\n        return;\n      }\n      const bounds = host.getBoundingClientRect();\n      const item = active.getBoundingClientRect();\n      const scaleX = host.offsetWidth ? bounds.width / host.offsetWidth : 1;\n      const scaleY = host.offsetHeight ? bounds.height / host.offsetHeight : 1;\n      const geometry = {\n        '--leaf-indicator-x': `${(item.left - bounds.left) / (scaleX || 1) + host.scrollLeft - host.clientLeft}px`,\n        '--leaf-indicator-y': `${(item.top - bounds.top) / (scaleY || 1) + host.scrollTop - host.clientTop}px`,\n        '--leaf-indicator-width': `${item.width / (scaleX || 1)}px`,\n        '--leaf-indicator-height': `${item.height / (scaleY || 1)}px`,\n      };\n      if (\n        marker.dataset.visible === 'true' &&\n        Object.entries(geometry).every(\n          ([key, value]) => marker.style.getPropertyValue(key) === value,\n        )\n      )\n        return;\n      marker.dataset.animate = String(animate && previous.current !== null);\n      for (const [key, value] of Object.entries(geometry)) marker.style.setProperty(key, value);\n      marker.dataset.visible = String(item.width > 0 && item.height > 0);\n      previous.current = active;\n    };\n    refresh.current = measure;\n    const schedule = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => {\n        for (const node of host.querySelectorAll<HTMLElement>('[data-leaf-indicator-item]'))\n          observer?.observe(node);\n        measure(false);\n      });\n    };\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);\n    observer?.observe(host);\n    for (const node of host.querySelectorAll<HTMLElement>('[data-leaf-indicator-item]'))\n      observer?.observe(node);\n    const mutation =\n      typeof MutationObserver === 'undefined'\n        ? null\n        : new MutationObserver((records) => {\n            if (records.some((record) => record.target !== marker)) schedule();\n          });\n    mutation?.observe(host, { childList: true, subtree: true, characterData: true });\n    host.addEventListener('scroll', schedule, { passive: true });\n    window.addEventListener('resize', schedule);\n    measure(false);\n    // Font loading can change intrinsic widths without a viewport resize.\n    document.fonts?.addEventListener('loadingdone', schedule);\n    return () => {\n      cancelAnimationFrame(frame);\n      observer?.disconnect();\n      mutation?.disconnect();\n      host.removeEventListener('scroll', schedule);\n      window.removeEventListener('resize', schedule);\n      document.fonts?.removeEventListener('loadingdone', schedule);\n      refresh.current = () => {};\n    };\n  }, [container, indicator, selector, enabled]);\n  useBrowserLayoutEffect(() => refresh.current(true), [selection]);\n}\n"],"names":["useBrowserLayoutEffect","window","useEffect","useLayoutEffect","useMovingIndicator","container","indicator","selector","selection","enabled","previous","useRef","refresh","host","marker","frame","measure","animate","active","bounds","item","scaleX","scaleY","geometry","Object","key","value","String","schedule","cancelAnimationFrame","requestAnimationFrame","node","observer","ResizeObserver","mutation","MutationObserver","records","record","document"],"mappings":"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"}

package/dist/esm/tag/group.d.ts

@@ -0,0 +1,27 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import type { ControlSize } from '../shared/types.js';
+export interface CheckableTagProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    size?: ControlSize;
+}
+export declare function CheckableTag(rawProps: CheckableTagProps): import("react").JSX.Element;
+export interface TagOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface TagGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    options: readonly TagOption[];
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onChange?: (values: string[]) => void;
+    disabled?: boolean;
+    size?: ControlSize;
+    name?: string;
+    form?: string;
+    required?: boolean;
+}
+export declare function TagGroup(rawProps: TagGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=group.d.ts.map

package/dist/esm/tag/group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../src/tag/group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAK/F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AACD,wBAAgB,YAAY,CAAC,QAAQ,EAAE,iBAAiB,+BAiCvD;AACD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IACzE,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,aAAa,+BA4D/C"}

package/dist/esm/tag/group.js

@@ -0,0 +1,67 @@
+"use client";
+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 { FormValue, useFieldValue } from "../shared/field.js";
+import { useListMotion } from "../shared/motion.js";
+import { useControllable } from "../shared/use-controllable.js";
+function CheckableTag(rawProps) {
+    const { checked, defaultChecked = false, onChange, size = 'md', children, className, onClick, ...props } = useComponentProps('CheckableTag', rawProps);
+    const [current, change] = useControllable(checked, defaultChecked, onChange);
+    return /*#__PURE__*/ jsx("button", {
+        ...props,
+        type: props.type ?? 'button',
+        className: classes('leaf-tag', 'leaf-tag--soft', `leaf-tag--${size}`, 'leaf-checkable-tag', className),
+        "aria-pressed": current,
+        "data-color": current ? 'primary' : 'default',
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) change(!current);
+        },
+        children: children
+    });
+}
+function TagGroup(rawProps) {
+    const { options, value, defaultValue = [], onChange, disabled, size, name, form, required, className, ...props } = useComponentProps('TagGroup', rawProps);
+    const trigger = useRef(null);
+    const root = useRef(null);
+    const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);
+    useListMotion(root, JSON.stringify(options.map((option)=>option.value)), '.leaf-checkable-tag[data-motion-key]');
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        ref: root,
+        className: classes('leaf-tag-group', className),
+        children: [
+            options.map((option, index)=>/*#__PURE__*/ jsx("button", {
+                    ref: 0 === index ? trigger : void 0,
+                    type: "button",
+                    className: classes('leaf-tag', 'leaf-tag--soft', `leaf-tag--${size ?? 'md'}`, 'leaf-checkable-tag'),
+                    "data-color": current.includes(option.value) ? 'primary' : 'default',
+                    "data-motion-key": option.value,
+                    "aria-pressed": current.includes(option.value),
+                    disabled: disabled || option.disabled,
+                    onClick: ()=>{
+                        const next = current.includes(option.value) ? current.filter((key)=>key !== option.value) : [
+                            ...current,
+                            option.value
+                        ];
+                        setCurrent(next);
+                        onChange?.(next);
+                    },
+                    children: option.label
+                }, option.value)),
+            /*#__PURE__*/ jsx(FormValue, {
+                name: name,
+                form: form,
+                required: required,
+                disabled: disabled,
+                value: current.length ? JSON.stringify(current) : '',
+                triggerRef: trigger
+            })
+        ]
+    });
+}
+export { CheckableTag, TagGroup };
+
+//# sourceMappingURL=group.js.map

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

@@ -0,0 +1 @@
+{"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/tag/index.d.ts

@@ -0,0 +1,5 @@
+export type { CheckableTagProps, TagGroupProps, TagOption } from './group.js';
+export { CheckableTag, TagGroup } from './group.js';
+export type { TagProps } from './tag.js';
+export { Tag } from './tag.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tag/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACjD,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC"}

package/dist/esm/tag/index.js

@@ -0,0 +1,3 @@
+"use client";
+export { CheckableTag, TagGroup } from "./group.js";
+export { Tag } from "./tag.js";

package/dist/esm/tag/tag.d.ts

@@ -0,0 +1,12 @@
+import { type HTMLAttributes, type MouseEvent, type ReactNode } from 'react';
+import type { ControlSize } from '../shared/types.js';
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | (string & {});
+    variant?: 'soft' | 'solid';
+    size?: ControlSize;
+    icon?: ReactNode;
+    closable?: boolean;
+    onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+export declare function Tag(rawProps: TagProps): import("react").JSX.Element | null;
+//# sourceMappingURL=tag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,eAAe,CAAC;IAC/D,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACzF,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,wBAAgB,GAAG,CAAC,QAAQ,EAAE,QAAQ,sCA8GrC"}

package/dist/esm/tag/tag.js

@@ -0,0 +1,133 @@
+"use client";
+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";
+import { inertProps } from "../shared/inert.js";
+import { usePresence } from "../shared/presence.js";
+const presets = [
+    'default',
+    'primary',
+    'success',
+    'warning',
+    'error',
+    'info'
+];
+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);
+    const present = usePresence(!closed, root);
+    const custom = !presets.includes(color);
+    const surface = theme.tokens?.surfaceColor ?? defaultColors[theme.appearance ?? 'light'].surface;
+    const customVariables = custom ? {
+        '--leaf-tag-color': color,
+        '--leaf-tag-color-alpha-10': mixColors(color, 'transparent', 10),
+        '--leaf-tag-color-surface-8': mixColors(color, surface, 8)
+    } : {};
+    useEffect(()=>{
+        const node = root.current;
+        if (!node || !custom) return;
+        const sync = ()=>{
+            const probe = document.createElement('span');
+            probe.style.color = color;
+            probe.hidden = true;
+            node.append(probe);
+            const concrete = getComputedStyle(probe).color;
+            const background = getComputedStyle(node).getPropertyValue('--leaf-color-surface').trim() || surface;
+            probe.remove();
+            for (const [suffix, target, weight] of [
+                [
+                    'alpha-10',
+                    'transparent',
+                    10
+                ],
+                [
+                    'surface-8',
+                    background,
+                    8
+                ]
+            ]){
+                const value = mixColors(concrete, target, weight);
+                const key = `--leaf-tag-color-${suffix}`;
+                if (value && node.style.getPropertyValue(key) !== value) node.style.setProperty(key, value);
+            }
+        };
+        sync();
+        const observer = new MutationObserver(sync);
+        let ancestor = node;
+        while(ancestor){
+            observer.observe(ancestor, {
+                attributes: true,
+                attributeFilter: [
+                    'class',
+                    'style',
+                    'data-leaf-theme'
+                ]
+            });
+            ancestor = composedParent(ancestor);
+        }
+        return ()=>observer.disconnect();
+    }, [
+        color,
+        custom,
+        surface
+    ]);
+    if (!present) return null;
+    return /*#__PURE__*/ jsxs("span", {
+        ...props,
+        ...inertProps(closed),
+        ref: root,
+        "data-state": closed ? 'closing' : void 0,
+        "aria-hidden": closed || props['aria-hidden'],
+        className: classes('leaf-tag', `leaf-tag--${variant}`, `leaf-tag--${size}`, className),
+        "data-color": presets.includes(color) ? color : void 0,
+        style: {
+            ...customVariables,
+            ...style
+        },
+        children: [
+            icon && /*#__PURE__*/ jsx("span", {
+                className: "leaf-tag__icon",
+                "aria-hidden": "true",
+                children: icon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: children
+            }),
+            closable && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                className: "leaf-tag__close",
+                "aria-label": messages.common.remove,
+                onClick: (event)=>{
+                    onClose?.(event);
+                    if (!event.defaultPrevented) {
+                        const node = root.current;
+                        if (node) {
+                            node.style.setProperty('--leaf-tag-width', `${node.getBoundingClientRect().width}px`);
+                            node.offsetWidth;
+                            if (node.contains(document.activeElement)) {
+                                const buttons = Array.from(node.parentElement?.querySelectorAll('.leaf-tag__close') ?? []);
+                                const index = buttons.indexOf(event.currentTarget);
+                                (buttons[index + 1] ?? buttons[index - 1])?.focus();
+                            }
+                        }
+                        setClosed(true);
+                    }
+                },
+                children: /*#__PURE__*/ jsx(X, {
+                    size: 12,
+                    "aria-hidden": "true"
+                })
+            })
+        ]
+    });
+}
+export { Tag };
+
+//# sourceMappingURL=tag.js.map

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

@@ -0,0 +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 { 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/tailwind-tokens.d.ts

@@ -0,0 +1,91 @@
+/** Shared by the Tailwind 3 preset and the generated Tailwind 4 CSS theme. */
+export declare const leafTailwindTokens: {
+    colors: {
+        'leaf-primary': string;
+        'leaf-primary-hover': string;
+        'leaf-primary-active': string;
+        'leaf-on-primary': string;
+        'leaf-success': string;
+        'leaf-warning': string;
+        'leaf-on-warning': string;
+        'leaf-danger': string;
+        'leaf-danger-hover': string;
+        'leaf-danger-active': string;
+        'leaf-on-danger': string;
+        'leaf-info': string;
+        'leaf-text': string;
+        'leaf-muted': string;
+        'leaf-subtle': string;
+        'leaf-surface': string;
+        'leaf-surface-muted': string;
+        'leaf-surface-raised': string;
+        'leaf-border': string;
+        'leaf-border-hover': string;
+        'leaf-divider': string;
+        'leaf-option-hover': string;
+        'leaf-focus': string;
+    };
+    borderRadius: {
+        leaf: string;
+        'leaf-sm': string;
+        'leaf-md': string;
+        'leaf-lg': string;
+        'leaf-choice': string;
+    };
+    spacing: {
+        leaf: string;
+        'leaf-xs': string;
+        'leaf-sm': string;
+        'leaf-md': string;
+        'leaf-lg': string;
+        'leaf-xl': string;
+        'leaf-control': string;
+        'leaf-control-sm': string;
+        'leaf-control-lg': string;
+        'leaf-form-gap': string;
+        'leaf-label-gap': string;
+        'leaf-row-padding': string;
+        'leaf-option-height': string;
+        'leaf-option-padding': string;
+        'leaf-field-padding': string;
+        'leaf-dialog-block': string;
+        'leaf-dialog-inline': string;
+        'leaf-dialog-gap': string;
+    };
+    fontFamily: {
+        leaf: string;
+    };
+    fontSize: {
+        leaf: string;
+        'leaf-sm': string;
+        'leaf-lg': string;
+    };
+    lineHeight: {
+        leaf: string;
+    };
+    fontWeight: {
+        'leaf-medium': string;
+        'leaf-heading': string;
+    };
+    boxShadow: {
+        'leaf-xs': string;
+        'leaf-sm': string;
+        'leaf-md': string;
+        'leaf-lg': string;
+    };
+    transitionDuration: {
+        leaf: string;
+        'leaf-fast': string;
+        'leaf-slow': string;
+    };
+    transitionTimingFunction: {
+        leaf: string;
+        'leaf-spring': string;
+    };
+    zIndex: {
+        'leaf-popup': string;
+        'leaf-modal': string;
+        'leaf-message': string;
+    };
+};
+//# sourceMappingURL=tailwind-tokens.d.ts.map

package/dist/esm/tailwind-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-tokens.d.ts","sourceRoot":"","sources":["../../src/tailwind-tokens.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB;IAC7B,MAAM;QACJ,cAAc;QACd,oBAAoB;QACpB,qBAAqB;QACrB,iBAAiB;QACjB,cAAc;QACd,cAAc;QACd,iBAAiB;QACjB,aAAa;QACb,mBAAmB;QACnB,oBAAoB;QACpB,gBAAgB;QAChB,WAAW;QACX,WAAW;QACX,YAAY;QACZ,aAAa;QACb,cAAc;QACd,oBAAoB;QACpB,qBAAqB;QACrB,aAAa;QACb,mBAAmB;QACnB,cAAc;QACd,mBAAmB;QACnB,YAAY;;IAEd,YAAY;QACV,IAAI;QACJ,SAAS;QACT,SAAS;QACT,SAAS;QACT,aAAa;;IAEf,OAAO;QACL,IAAI;QACJ,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,cAAc;QACd,iBAAiB;QACjB,iBAAiB;QACjB,eAAe;QACf,gBAAgB;QAChB,kBAAkB;QAClB,oBAAoB;QACpB,qBAAqB;QACrB,oBAAoB;QACpB,mBAAmB;QACnB,oBAAoB;QACpB,iBAAiB;;IAEnB,UAAU;QAAI,IAAI;;IAClB,QAAQ;QACN,IAAI;QACJ,SAAS;QACT,SAAS;;IAEX,UAAU;QAAI,IAAI;;IAClB,UAAU;QACR,aAAa;QACb,cAAc;;IAEhB,SAAS;QACP,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;;IAEX,kBAAkB;QAChB,IAAI;QACJ,WAAW;QACX,WAAW;;IAEb,wBAAwB;QACtB,IAAI;QACJ,aAAa;;IAEf,MAAM;QACJ,YAAY;QACZ,YAAY;QACZ,cAAc;;CAEjB,CAAC"}

package/dist/esm/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/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"}