@ifhover/leaf-ui 0.0.0-stage → 0.5.0

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

@@ -0,0 +1,241 @@
+"use client";
+import { deriveColors } from "./colors.js";
+const defined = (value)=>Object.fromEntries(Object.entries(value ?? {}).filter(([, item])=>void 0 !== item));
+function mergeLeafTheme(parent, theme) {
+    return {
+        ...parent,
+        ...defined(theme),
+        breakpoints: {
+            ...parent.breakpoints,
+            ...defined(theme?.breakpoints)
+        },
+        components: Object.fromEntries([
+            ...new Set([
+                ...Object.keys(parent.components ?? {}),
+                ...Object.keys(theme?.components ?? {})
+            ])
+        ].map((key)=>[
+                key,
+                {
+                    ...parent.components?.[key],
+                    ...defined(theme?.components?.[key])
+                }
+            ])),
+        ...parent.tokens || theme?.tokens ? {
+            tokens: {
+                ...parent.tokens,
+                ...defined(theme?.tokens)
+            }
+        } : {}
+    };
+}
+const tokenVariables = {
+    onPrimaryColor: 'color-on-primary',
+    dangerColor: 'color-danger',
+    onDangerColor: 'color-on-danger',
+    successColor: 'color-success',
+    warningColor: 'color-warning',
+    infoColor: 'color-info',
+    textColor: 'color-text',
+    mutedTextColor: 'color-text-muted',
+    subtleTextColor: 'color-text-subtle',
+    surfaceColor: 'color-surface',
+    mutedSurfaceColor: 'color-surface-muted',
+    raisedSurfaceColor: 'color-surface-raised',
+    borderColor: 'color-border',
+    borderHoverColor: 'color-border-hover',
+    dividerColor: 'color-divider',
+    borderRadiusSm: 'radius-sm',
+    borderRadiusMd: 'radius-md',
+    borderRadiusLg: 'radius-lg',
+    controlHeightSm: 'control-height-sm',
+    controlHeightLg: 'control-height-lg',
+    fontSizeSm: 'font-size-sm',
+    fontSizeLg: 'font-size-lg',
+    fontWeight: 'font-weight',
+    motionDuration: 'motion-duration',
+    motionEasing: 'motion-easing',
+    motionSpring: 'motion-spring',
+    popupZIndex: 'z-index-popup',
+    modalZIndex: 'z-index-modal',
+    messageZIndex: 'z-index-message',
+    buttonBorderRadius: 'button-radius',
+    buttonHeight: 'button-height',
+    choiceBorderRadius: 'choice-radius',
+    focusColor: 'color-focus',
+    primaryHoverColor: 'color-primary-hover',
+    primaryActiveColor: 'color-primary-active',
+    primarySoftColor: 'color-primary-soft',
+    primarySoftHoverColor: 'color-primary-soft-hover',
+    primarySoftActiveColor: 'color-primary-soft-active',
+    primaryBorderColor: 'color-primary-border',
+    dangerHoverColor: 'color-danger-hover',
+    dangerActiveColor: 'color-danger-active',
+    spacingSm: 'spacing-sm',
+    spacingLg: 'spacing-lg',
+    shadowSm: 'shadow-sm',
+    shadowXs: 'shadow-xs',
+    shadowMd: 'shadow-md',
+    shadowLg: 'shadow-lg',
+    lineHeight: 'line-height'
+};
+const theme_length = (value)=>'number' == typeof value ? `${value}px` : value;
+function paddingSides(value) {
+    const parts = [];
+    let depth = 0;
+    let start = 0;
+    for(let index = 0; index <= value.length; index++){
+        const character = value[index];
+        if ('(' === character) depth++;
+        else if (')' === character) depth--;
+        if (index === value.length || 0 === depth && /\s/.test(character ?? '')) {
+            const part = value.slice(start, index).trim();
+            if (part) parts.push(part);
+            start = index + 1;
+        }
+    }
+    if (!parts.length || parts.length > 4) return [];
+    const [top, right = top, bottom = top, left = right] = parts;
+    return [
+        top,
+        right,
+        bottom,
+        left
+    ];
+}
+function leafThemeColors(theme) {
+    const colors = {};
+    if (theme.primaryColor) {
+        colors.primary = theme.primaryColor;
+        colors['on-primary'] = '#ffffff';
+    }
+    for (const key of Object.keys(tokenVariables)){
+        const variable = tokenVariables[key];
+        const value = theme.tokens?.[key];
+        if (variable.startsWith('color-') && 'string' == typeof value) colors[variable.slice(6)] = value;
+    }
+    return colors;
+}
+function leafThemeVariables(theme) {
+    const variables = {};
+    if (void 0 !== theme.spacing) {
+        variables['--leaf-spacing'] = `${Math.max(0, theme.spacing)}px`;
+        for (const [name, scale] of [
+            [
+                'xs',
+                0.5
+            ],
+            [
+                'sm',
+                1
+            ],
+            [
+                'md',
+                2
+            ],
+            [
+                'lg',
+                3
+            ],
+            [
+                'xl',
+                4
+            ]
+        ])variables[`--leaf-spacing-${name}`] = `calc(var(--leaf-spacing) * ${scale})`;
+    }
+    if (void 0 !== theme.lineHeight) variables['--leaf-line-height'] = theme.lineHeight;
+    if (void 0 !== theme.headingWeight) variables['--leaf-heading-weight'] = theme.headingWeight;
+    if (theme.elevation) for (const [name, blur, y] of [
+        [
+            'sm',
+            8,
+            2
+        ],
+        [
+            'md',
+            20,
+            6
+        ],
+        [
+            'lg',
+            48,
+            12
+        ]
+    ])variables[`--leaf-shadow-${name}`] = 'none' === theme.elevation ? 'none' : `0 ${y}px ${blur}px rgb(0 0 0 / ${'soft' === theme.elevation ? '.08' : '.16'})`;
+    for (const [name, value] of Object.entries(theme.breakpoints ?? {}))if (void 0 !== value) variables[`--leaf-breakpoint-${name}`] = `${value}px`;
+    const componentKeys = {
+        borderRadius: 'radius',
+        controlHeight: 'height',
+        padding: 'padding',
+        gap: 'gap',
+        fontSize: 'font-size',
+        color: 'color',
+        background: 'background',
+        borderColor: 'border-color',
+        headerBackground: 'header-background',
+        footerBackground: 'footer-background',
+        shadow: 'shadow'
+    };
+    for (const [component, tokens] of Object.entries(theme.components ?? {}))for (const [key, value] of Object.entries(tokens))if (void 0 !== value && /^[a-z][a-z\d-]*$/i.test(component)) {
+        const token = componentKeys[key];
+        if (token) variables[`--leaf-component-${component.replace(/([a-z\d])([A-Z])/g, '$1-$2').toLowerCase()}-${token}`] = 'number' == typeof value ? theme_length(value) : value;
+        if ('controlHeight' === key) {
+            const name = component.replace(/([a-z\d])([A-Z])/g, '$1-$2').toLowerCase();
+            variables[`--leaf-component-${name}-height-sm`] = `max(1px, calc(var(--leaf-component-${name}-height) - 6px))`;
+            variables[`--leaf-component-${name}-height-lg`] = `calc(var(--leaf-component-${name}-height) + 6px)`;
+        }
+        if ('padding' === key) {
+            const name = component.replace(/([a-z\d])([A-Z])/g, '$1-$2').toLowerCase();
+            const sides = paddingSides(theme_length(value));
+            for (const [index, side] of [
+                'top',
+                'right',
+                'bottom',
+                'left'
+            ].entries())variables[`--leaf-component-${name}-padding-${side}`] = sides[index];
+        }
+    }
+    if (void 0 !== theme.primaryColor) {
+        variables['--leaf-color-primary'] = theme.primaryColor;
+        variables['--leaf-color-on-primary'] = '#ffffff';
+    }
+    if (void 0 !== theme.borderRadius) {
+        variables['--leaf-radius'] = theme_length(theme.borderRadius);
+        variables['--leaf-radius-sm'] = 'calc(var(--leaf-radius) * 0.6)';
+        variables['--leaf-radius-md'] = 'calc(var(--leaf-radius) * 1.2)';
+        variables['--leaf-radius-lg'] = 'calc(var(--leaf-radius) * 1.6)';
+        variables['--leaf-choice-radius'] = 'calc(var(--leaf-radius) * 0.5)';
+    }
+    if (void 0 !== theme.controlHeight) {
+        variables['--leaf-control-height'] = theme_length(theme.controlHeight);
+        variables['--leaf-control-height-sm'] = 'max(1px, calc(var(--leaf-control-height) - 6px))';
+        variables['--leaf-control-height-lg'] = 'calc(var(--leaf-control-height) + 6px)';
+    }
+    if (void 0 !== theme.fontSize) {
+        variables['--leaf-font-size'] = theme_length(theme.fontSize);
+        variables['--leaf-font-size-sm'] = 'max(1px, calc(var(--leaf-font-size) - 1px))';
+        variables['--leaf-font-size-lg'] = 'calc(var(--leaf-font-size) + 2px)';
+    }
+    if (void 0 !== theme.fontFamily) variables['--leaf-font-family'] = theme.fontFamily;
+    for (const key of Object.keys(tokenVariables)){
+        const value = theme.tokens?.[key];
+        if (void 0 === value) continue;
+        const variable = tokenVariables[key];
+        variables[`--leaf-${variable}`] = 'number' != typeof value ? value : 'motionDuration' === key ? `${value}ms` : variable.includes('radius') || variable.includes('height') || variable.includes('font-size') || variable.includes('spacing') ? theme_length(value) : value;
+    }
+    if (void 0 !== theme.motion) {
+        variables['--leaf-motion-play-state'] = theme.motion ? 'running' : 'paused';
+        variables['--leaf-motion-animation'] = theme.motion ? 'initial' : 'none';
+        if (theme.motion) {
+            if (theme.tokens?.motionDuration === void 0) variables['--leaf-motion-duration'] = '200ms';
+        } else variables['--leaf-motion-duration'] = '0ms';
+    }
+    if (theme.appearance || theme.primaryColor || Object.keys(theme.tokens ?? {}).some((key)=>key.endsWith('Color'))) return {
+        ...deriveColors(theme.appearance ?? 'light', leafThemeColors(theme)),
+        ...variables
+    };
+    return variables;
+}
+export { leafThemeColors, leafThemeVariables, mergeLeafTheme };
+
+//# sourceMappingURL=theme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":["../../../../src/theme.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { deriveColors } from './colors';\n\n/** Shared CSS variables; configure component themes through ConfigProvider. */\nexport type LeafThemeStyle = CSSProperties & {\n  [key: `--leaf-${string}`]: string | number | undefined;\n};\n\n/** Common settings. Other sizes and interaction colors are derived automatically. */\nexport interface LeafTheme {\n  primaryColor?: string;\n  borderRadius?: number | string;\n  controlHeight?: number | string;\n  fontSize?: number | string;\n  fontFamily?: string;\n  appearance?: 'light' | 'dark';\n  motion?: boolean;\n  tokens?: LeafThemeTokens;\n  spacing?: number;\n  lineHeight?: number;\n  headingWeight?: number;\n  elevation?: 'none' | 'soft' | 'medium';\n  breakpoints?: Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>>;\n  components?: Record<string, LeafComponentTokens>;\n}\nexport interface LeafComponentTokens {\n  borderRadius?: string | number;\n  controlHeight?: string | number;\n  padding?: string | number;\n  gap?: string | number;\n  fontSize?: string | number;\n  color?: string;\n  background?: string;\n  borderColor?: string;\n  headerBackground?: string;\n  footerBackground?: string;\n  shadow?: string;\n}\n\n/** Optional overrides for applications with more specific design requirements. */\nexport interface LeafThemeTokens {\n  onPrimaryColor?: string;\n  dangerColor?: string;\n  onDangerColor?: string;\n  successColor?: string;\n  warningColor?: string;\n  infoColor?: string;\n  textColor?: string;\n  mutedTextColor?: string;\n  subtleTextColor?: string;\n  surfaceColor?: string;\n  mutedSurfaceColor?: string;\n  raisedSurfaceColor?: string;\n  borderColor?: string;\n  borderHoverColor?: string;\n  dividerColor?: string;\n  borderRadiusSm?: number | string;\n  borderRadiusMd?: number | string;\n  borderRadiusLg?: number | string;\n  controlHeightSm?: number | string;\n  controlHeightLg?: number | string;\n  fontSizeSm?: number | string;\n  fontSizeLg?: number | string;\n  fontWeight?: number;\n  motionDuration?: number | string;\n  motionEasing?: string;\n  motionSpring?: string;\n  popupZIndex?: number;\n  modalZIndex?: number;\n  messageZIndex?: number;\n  buttonBorderRadius?: number | string;\n  buttonHeight?: number | string;\n  choiceBorderRadius?: number | string;\n  focusColor?: string;\n  primaryHoverColor?: string;\n  primaryActiveColor?: string;\n  primarySoftColor?: string;\n  primarySoftHoverColor?: string;\n  primarySoftActiveColor?: string;\n  primaryBorderColor?: string;\n  dangerHoverColor?: string;\n  dangerActiveColor?: string;\n  spacingSm?: number | string;\n  spacingLg?: number | string;\n  shadowSm?: string;\n  shadowXs?: string;\n  shadowMd?: string;\n  shadowLg?: string;\n  lineHeight?: number;\n}\n\nconst defined = <T extends object>(value?: T) =>\n  Object.fromEntries(Object.entries(value ?? {}).filter(([, item]) => item !== undefined)) as T;\n\nexport function mergeLeafTheme(parent: LeafTheme, theme?: LeafTheme): LeafTheme {\n  return {\n    ...parent,\n    ...defined(theme),\n    breakpoints: { ...parent.breakpoints, ...defined(theme?.breakpoints) },\n    components: Object.fromEntries(\n      [\n        ...new Set([\n          ...Object.keys(parent.components ?? {}),\n          ...Object.keys(theme?.components ?? {}),\n        ]),\n      ].map((key) => [key, { ...parent.components?.[key], ...defined(theme?.components?.[key]) }]),\n    ),\n    ...(parent.tokens || theme?.tokens\n      ? { tokens: { ...parent.tokens, ...defined(theme?.tokens) } }\n      : {}),\n  };\n}\n\nconst tokenVariables = {\n  onPrimaryColor: 'color-on-primary',\n  dangerColor: 'color-danger',\n  onDangerColor: 'color-on-danger',\n  successColor: 'color-success',\n  warningColor: 'color-warning',\n  infoColor: 'color-info',\n  textColor: 'color-text',\n  mutedTextColor: 'color-text-muted',\n  subtleTextColor: 'color-text-subtle',\n  surfaceColor: 'color-surface',\n  mutedSurfaceColor: 'color-surface-muted',\n  raisedSurfaceColor: 'color-surface-raised',\n  borderColor: 'color-border',\n  borderHoverColor: 'color-border-hover',\n  dividerColor: 'color-divider',\n  borderRadiusSm: 'radius-sm',\n  borderRadiusMd: 'radius-md',\n  borderRadiusLg: 'radius-lg',\n  controlHeightSm: 'control-height-sm',\n  controlHeightLg: 'control-height-lg',\n  fontSizeSm: 'font-size-sm',\n  fontSizeLg: 'font-size-lg',\n  fontWeight: 'font-weight',\n  motionDuration: 'motion-duration',\n  motionEasing: 'motion-easing',\n  motionSpring: 'motion-spring',\n  popupZIndex: 'z-index-popup',\n  modalZIndex: 'z-index-modal',\n  messageZIndex: 'z-index-message',\n  buttonBorderRadius: 'button-radius',\n  buttonHeight: 'button-height',\n  choiceBorderRadius: 'choice-radius',\n  focusColor: 'color-focus',\n  primaryHoverColor: 'color-primary-hover',\n  primaryActiveColor: 'color-primary-active',\n  primarySoftColor: 'color-primary-soft',\n  primarySoftHoverColor: 'color-primary-soft-hover',\n  primarySoftActiveColor: 'color-primary-soft-active',\n  primaryBorderColor: 'color-primary-border',\n  dangerHoverColor: 'color-danger-hover',\n  dangerActiveColor: 'color-danger-active',\n  spacingSm: 'spacing-sm',\n  spacingLg: 'spacing-lg',\n  shadowSm: 'shadow-sm',\n  shadowXs: 'shadow-xs',\n  shadowMd: 'shadow-md',\n  shadowLg: 'shadow-lg',\n  lineHeight: 'line-height',\n} satisfies Record<keyof LeafThemeTokens, string>;\n\nconst length = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\n\n/** Expand CSS padding without splitting whitespace inside calc()/var(). */\nfunction paddingSides(value: string) {\n  const parts: string[] = [];\n  let depth = 0;\n  let start = 0;\n  for (let index = 0; index <= value.length; index++) {\n    const character = value[index];\n    if (character === '(') depth++;\n    else if (character === ')') depth--;\n    if (index === value.length || (depth === 0 && /\\s/.test(character ?? ''))) {\n      const part = value.slice(start, index).trim();\n      if (part) parts.push(part);\n      start = index + 1;\n    }\n  }\n  if (!parts.length || parts.length > 4) return [];\n  const [top, right = top, bottom = top, left = right] = parts;\n  return [top, right, bottom, left];\n}\n\n/** Explicit inputs, excluding the generated palette, for browser CSS-variable resolution. */\nexport function leafThemeColors(theme: LeafTheme): Record<string, string> {\n  const colors: Record<string, string> = {};\n  if (theme.primaryColor) {\n    colors.primary = theme.primaryColor;\n    colors['on-primary'] = '#ffffff';\n  }\n  for (const key of Object.keys(tokenVariables) as (keyof LeafThemeTokens)[]) {\n    const variable = tokenVariables[key];\n    const value = theme.tokens?.[key];\n    if (variable.startsWith('color-') && typeof value === 'string')\n      colors[variable.slice(6)] = value;\n  }\n  return colors;\n}\n\n/** Pure, deterministic output can be rendered in the server's initial HTML. */\nexport function leafThemeVariables(theme: LeafTheme): LeafThemeStyle {\n  const variables: LeafThemeStyle = {};\n  if (theme.spacing !== undefined) {\n    variables['--leaf-spacing'] = `${Math.max(0, theme.spacing)}px`;\n    for (const [name, scale] of [\n      ['xs', 0.5],\n      ['sm', 1],\n      ['md', 2],\n      ['lg', 3],\n      ['xl', 4],\n    ] as const)\n      variables[`--leaf-spacing-${name}`] = `calc(var(--leaf-spacing) * ${scale})`;\n  }\n  if (theme.lineHeight !== undefined) variables['--leaf-line-height'] = theme.lineHeight;\n  if (theme.headingWeight !== undefined) variables['--leaf-heading-weight'] = theme.headingWeight;\n  if (theme.elevation)\n    for (const [name, blur, y] of [\n      ['sm', 8, 2],\n      ['md', 20, 6],\n      ['lg', 48, 12],\n    ] as const)\n      variables[`--leaf-shadow-${name}`] =\n        theme.elevation === 'none'\n          ? 'none'\n          : `0 ${y}px ${blur}px rgb(0 0 0 / ${theme.elevation === 'soft' ? '.08' : '.16'})`;\n  for (const [name, value] of Object.entries(theme.breakpoints ?? {}))\n    if (value !== undefined) variables[`--leaf-breakpoint-${name}`] = `${value}px`;\n  const componentKeys = {\n    borderRadius: 'radius',\n    controlHeight: 'height',\n    padding: 'padding',\n    gap: 'gap',\n    fontSize: 'font-size',\n    color: 'color',\n    background: 'background',\n    borderColor: 'border-color',\n    headerBackground: 'header-background',\n    footerBackground: 'footer-background',\n    shadow: 'shadow',\n  } as const;\n  for (const [component, tokens] of Object.entries(theme.components ?? {}))\n    for (const [key, value] of Object.entries(tokens))\n      if (value !== undefined && /^[a-z][a-z\\d-]*$/i.test(component)) {\n        const token = componentKeys[key as keyof typeof componentKeys];\n        if (token)\n          variables[\n            `--leaf-component-${component.replace(/([a-z\\d])([A-Z])/g, '$1-$2').toLowerCase()}-${token}`\n          ] = typeof value === 'number' ? length(value) : value;\n        if (key === 'controlHeight') {\n          const name = component.replace(/([a-z\\d])([A-Z])/g, '$1-$2').toLowerCase();\n          variables[`--leaf-component-${name}-height-sm`] =\n            `max(1px, calc(var(--leaf-component-${name}-height) - 6px))`;\n          variables[`--leaf-component-${name}-height-lg`] =\n            `calc(var(--leaf-component-${name}-height) + 6px)`;\n        }\n        if (key === 'padding') {\n          const name = component.replace(/([a-z\\d])([A-Z])/g, '$1-$2').toLowerCase();\n          const sides = paddingSides(length(value));\n          for (const [index, side] of ['top', 'right', 'bottom', 'left'].entries())\n            variables[`--leaf-component-${name}-padding-${side}`] = sides[index];\n        }\n      }\n  if (theme.primaryColor !== undefined) {\n    variables['--leaf-color-primary'] = theme.primaryColor;\n    variables['--leaf-color-on-primary'] = '#ffffff';\n  }\n  if (theme.borderRadius !== undefined) {\n    variables['--leaf-radius'] = length(theme.borderRadius);\n    variables['--leaf-radius-sm'] = 'calc(var(--leaf-radius) * 0.6)';\n    variables['--leaf-radius-md'] = 'calc(var(--leaf-radius) * 1.2)';\n    variables['--leaf-radius-lg'] = 'calc(var(--leaf-radius) * 1.6)';\n    variables['--leaf-choice-radius'] = 'calc(var(--leaf-radius) * 0.5)';\n  }\n  if (theme.controlHeight !== undefined) {\n    variables['--leaf-control-height'] = length(theme.controlHeight);\n    variables['--leaf-control-height-sm'] = 'max(1px, calc(var(--leaf-control-height) - 6px))';\n    variables['--leaf-control-height-lg'] = 'calc(var(--leaf-control-height) + 6px)';\n  }\n  if (theme.fontSize !== undefined) {\n    variables['--leaf-font-size'] = length(theme.fontSize);\n    variables['--leaf-font-size-sm'] = 'max(1px, calc(var(--leaf-font-size) - 1px))';\n    variables['--leaf-font-size-lg'] = 'calc(var(--leaf-font-size) + 2px)';\n  }\n  if (theme.fontFamily !== undefined) variables['--leaf-font-family'] = theme.fontFamily;\n  for (const key of Object.keys(tokenVariables) as (keyof LeafThemeTokens)[]) {\n    const value = theme.tokens?.[key];\n    if (value === undefined) continue;\n    const variable = tokenVariables[key];\n    variables[`--leaf-${variable}`] =\n      typeof value !== 'number'\n        ? value\n        : key === 'motionDuration'\n          ? `${value}ms`\n          : variable.includes('radius') ||\n              variable.includes('height') ||\n              variable.includes('font-size') ||\n              variable.includes('spacing')\n            ? length(value)\n            : value;\n  }\n  if (theme.motion !== undefined) {\n    variables['--leaf-motion-play-state'] = theme.motion ? 'running' : 'paused';\n    variables['--leaf-motion-animation'] = theme.motion ? 'initial' : 'none';\n    if (!theme.motion) variables['--leaf-motion-duration'] = '0ms';\n    else if (theme.tokens?.motionDuration === undefined)\n      variables['--leaf-motion-duration'] = '200ms';\n  }\n  if (\n    theme.appearance ||\n    theme.primaryColor ||\n    Object.keys(theme.tokens ?? {}).some((key) => key.endsWith('Color'))\n  ) {\n    return { ...deriveColors(theme.appearance ?? 'light', leafThemeColors(theme)), ...variables };\n  }\n  return variables;\n}\n"],"names":["defined","value","Object","item","undefined","mergeLeafTheme","parent","theme","Set","key","tokenVariables","length","paddingSides","parts","depth","start","index","character","part","top","right","bottom","left","leafThemeColors","colors","variable","leafThemeVariables","variables","Math","name","scale","blur","y","componentKeys","component","tokens","token","sides","side","deriveColors"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use client";
+export { Timeline } from "./timeline.js";

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

@@ -0,0 +1,62 @@
+"use client";
+import '../../../styles/components/timeline.css';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { classes } from "../shared/classes.js";
+import { useListMotion } from "../shared/motion.js";
+function Timeline({ items, mode = 'left', reverse = false, pending, className, ...props }) {
+    const root = useRef(null);
+    const entries = [
+        ...items
+    ];
+    if (reverse) entries.reverse();
+    if (null != pending) entries.push({
+        key: '__leaf-pending',
+        children: pending
+    });
+    useListMotion(root, JSON.stringify([
+        mode,
+        entries.map((item)=>item.key)
+    ]), '.leaf-timeline__item');
+    const colors = {
+        primary: 'primary',
+        success: 'success',
+        warning: 'warning',
+        error: 'danger',
+        info: 'info'
+    };
+    return /*#__PURE__*/ jsx("ol", {
+        ...props,
+        ref: root,
+        className: classes('leaf-timeline', `leaf-timeline--${mode}`, className),
+        children: entries.map((item, index)=>/*#__PURE__*/ jsxs("li", {
+                "data-motion-key": item.key,
+                className: "leaf-timeline__item",
+                "data-pending": '__leaf-pending' === item.key || void 0,
+                "data-side": 'right' === mode || 'alternate' === mode && index % 2 ? 'right' : 'left',
+                style: {
+                    '--leaf-timeline-color': item.color && item.color in colors ? `var(--leaf-color-${colors[item.color]})` : item.color ?? 'var(--leaf-color-primary)'
+                },
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "leaf-timeline__dot",
+                        "aria-hidden": "true",
+                        children: item.dot
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "leaf-timeline__content",
+                        children: [
+                            null != item.label && /*#__PURE__*/ jsx("div", {
+                                className: "leaf-timeline__label",
+                                children: item.label
+                            }),
+                            item.children
+                        ]
+                    })
+                ]
+            }, item.key))
+    });
+}
+export { Timeline };
+
+//# sourceMappingURL=timeline.js.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1,185 @@
+"use client";
+import '../../../styles/components/timepicker.css';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useLeafConfig } from "../config-provider/context.js";
+import { padTime } from "../shared/time.js";
+const useBrowserLayoutEffect = "u" < typeof window ? useEffect : useLayoutEffect;
+function keepTimeOptionVisible(column, row) {
+    const top = row.offsetTop;
+    const bottom = top + row.offsetHeight;
+    if (top < column.scrollTop) column.scrollTop = top;
+    else if (bottom > column.scrollTop + column.clientHeight) column.scrollTop = bottom - column.clientHeight;
+}
+function TimeColumn({ label, choices, selected, change, labels, disabled }) {
+    const ref = useRef(null);
+    const [selection, setSelection] = useState();
+    useBrowserLayoutEffect(()=>{
+        const column = ref.current;
+        if (!column) return;
+        const row = column.querySelector('[aria-selected="true"]:not(:disabled)');
+        const update = ()=>{
+            setSelection(row ? {
+                '--leaf-time-selection-y': `${row.offsetTop}px`,
+                '--leaf-time-selection-height': `${row.offsetHeight}px`
+            } : void 0);
+            if (row) keepTimeOptionVisible(column, row);
+        };
+        update();
+        if ("u" < typeof ResizeObserver) return;
+        const observer = new ResizeObserver(update);
+        observer.observe(column);
+        if (row) observer.observe(row);
+        return ()=>observer.disconnect();
+    }, [
+        selected,
+        choices,
+        disabled
+    ]);
+    const key = (event, current)=>{
+        const available = choices.filter((choice)=>!disabled?.(choice));
+        if (!available.length) return;
+        const index = available.indexOf(current);
+        let next = index;
+        if ('ArrowDown' === event.key) next = (index + 1) % available.length;
+        else if ('ArrowUp' === event.key) next = (index - 1 + available.length) % available.length;
+        else if ('Home' === event.key) next = 0;
+        else {
+            if ('End' !== event.key) return;
+            next = available.length - 1;
+        }
+        event.preventDefault();
+        change(available[next] ?? current);
+        const node = event.currentTarget.parentElement?.querySelectorAll('button:not(:disabled)')[next];
+        node?.focus({
+            preventScroll: true
+        });
+        if (node && ref.current) keepTimeOptionVisible(ref.current, node);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "leaf-time-picker__column-wrap",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "leaf-time-picker__column-label",
+                "aria-hidden": "true",
+                children: label
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                ref: ref,
+                className: "leaf-time-picker__column",
+                role: "listbox",
+                "aria-label": label,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "leaf-time-picker__selection",
+                        "data-ready": Boolean(selection),
+                        "aria-hidden": "true",
+                        style: selection
+                    }),
+                    choices.map((option)=>/*#__PURE__*/ jsxs("button", {
+                            type: "button",
+                            role: "option",
+                            disabled: disabled?.(option),
+                            tabIndex: option === (disabled?.(selected) ? choices.find((choice)=>!disabled?.(choice)) : selected) ? 0 : -1,
+                            "aria-selected": option === selected,
+                            className: "leaf-floating__option",
+                            onClick: ()=>change(option),
+                            onKeyDown: (event)=>key(event, option),
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    children: labels?.[option] ?? padTime(option)
+                                }),
+                                /*#__PURE__*/ jsx(Check, {
+                                    size: 14,
+                                    "aria-hidden": "true",
+                                    className: "leaf-time-picker__check",
+                                    style: {
+                                        opacity: option === selected ? 1 : 0
+                                    }
+                                })
+                            ]
+                        }, option))
+                ]
+            })
+        ]
+    });
+}
+function TimePanel({ value, onChange, showSeconds, use12Hours, minuteStep = 5, secondStep = 1, autoFocus, disabledTime }) {
+    const { messages } = useLeafConfig();
+    const ref = useRef(null);
+    useEffect(()=>{
+        if (autoFocus) ref.current?.querySelector('[aria-selected="true"]')?.focus({
+            preventScroll: true
+        });
+    }, [
+        autoFocus
+    ]);
+    const options = (step, selected)=>{
+        const safe = Number.isFinite(step) ? Math.max(1, Math.min(60, Math.floor(step))) : 1;
+        return [
+            ...new Set([
+                ...Array.from({
+                    length: Math.ceil(60 / safe)
+                }, (_, i)=>i * safe),
+                selected
+            ])
+        ].sort((a, b)=>a - b);
+    };
+    const column = (label, choices, selected, change, labels, disabled)=>/*#__PURE__*/ jsx(TimeColumn, {
+            label: label,
+            choices: choices,
+            selected: selected,
+            change: change,
+            labels: labels,
+            disabled: disabled
+        }, label);
+    const hours = use12Hours ? Array.from({
+        length: 12
+    }, (_, i)=>i + 1) : Array.from({
+        length: 24
+    }, (_, i)=>i);
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        className: "leaf-time-picker__columns",
+        children: [
+            column(messages.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({
+                    ...value,
+                    minute
+                }), void 0, (minute)=>!!disabledTime?.({
+                    ...value,
+                    minute
+                })),
+            showSeconds && column(messages.seconds, options(secondStep, value.second), value.second, (second)=>onChange({
+                    ...value,
+                    second
+                }), void 0, (second)=>!!disabledTime?.({
+                    ...value,
+                    second
+                })),
+            use12Hours && column(messages.period, [
+                0,
+                1
+            ], value.hour < 12 ? 0 : 1, (period)=>onChange({
+                    ...value,
+                    hour: value.hour % 12 + 12 * period
+                }), [
+                messages.am,
+                messages.pm
+            ], (period)=>!!disabledTime?.({
+                    ...value,
+                    hour: value.hour % 12 + 12 * period
+                }))
+        ]
+    });
+}
+export { TimePanel };
+
+//# sourceMappingURL=time-panel.js.map

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

@@ -0,0 +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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"}