@ifhover/leaf-ui 0.0.0-stage → 0.6.0

package/dist/esm/colorpicker/gradient.js

@@ -0,0 +1,332 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TinyColor } from "@ctrl/tinycolor";
+import { Plus, X } from "lucide-react";
+import { useId, useRef, useState } from "react";
+import { ButtonControl } from "../button/button.js";
+import { useLeafConfig } from "../config-provider/context.js";
+import { FieldScope, useFormField } from "../form/form.js";
+import { InputNumberControl } from "../inputnumber/inputnumber.js";
+import { classes } from "../shared/classes.js";
+import { FormValue, useFieldValue } from "../shared/field.js";
+import { FloatingPanel, useFloatingDismiss, usePopupState } from "../shared/floating.js";
+import { useFormattedText } from "../shared/use-formatted-text.js";
+import { useText } from "../shared/use-text.js";
+import { SliderControl } from "../slider/slider.js";
+import { SolidColorPicker } from "./colorpicker.js";
+function gradientString({ angle, stops }) {
+    return `linear-gradient(${angle}deg, ${[
+        ...stops
+    ].sort((a, b)=>a.offset - b.offset).map((stop)=>`${stop.color} ${stop.offset}%`).join(', ')})`;
+}
+function parseGradient(value) {
+    const match = value.match(/^linear-gradient\(\s*([+-]?[\d.]+)deg\s*,([\s\S]+)\)$/i);
+    if (!match) return null;
+    const pieces = (match[2] ?? '').split(/,(?![^()]*\))/);
+    const stops = [];
+    for (const piece of pieces){
+        const stop = piece.trim().match(/^(.+?)\s+([\d.]+)%$/);
+        if (!stop || !new TinyColor(stop[1]).isValid) return null;
+        stops.push({
+            color: stop[1] ?? '',
+            offset: Math.min(100, Math.max(0, Number(stop[2])))
+        });
+    }
+    const angle = Number(match[1]);
+    return stops.length >= 2 && Number.isFinite(angle) ? {
+        angle,
+        stops
+    } : null;
+}
+const defaultGradient = {
+    angle: 90,
+    stops: [
+        {
+            color: '#20834a',
+            offset: 0
+        },
+        {
+            color: '#83cf9e',
+            offset: 100
+        }
+    ]
+};
+const initial = gradientString(defaultGradient);
+function GradientColorPicker({ value, defaultValue = initial, onChange, onChangeComplete, size = 'md', disabled: disabledProp, readOnly, allowClear = false, status: statusProp, format, defaultFormat, onFormatChange, disableAlpha, presets, gradient: _gradient, mode: _mode, name, form, required, open: controlledOpen, defaultOpen, onOpenChange, popupWidth = 300, popupClassName, popupStyle, popupRender, popupPlacement, getPopupContainer, showText, className, style, id, ...props }) {
+    const field = useFormField(), { messages } = useLeafConfig(), t = useText();
+    const formatText = useFormattedText();
+    const disabled = disabledProp || field?.disabled;
+    const status = statusProp ?? (field?.error ? 'error' : void 0);
+    const trigger = useRef(null), panel = useRef(null), root = useRef(null);
+    const panelId = useId();
+    const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);
+    const [open, setOpen] = usePopupState(disabled || readOnly, onOpenChange, controlledOpen, defaultOpen), [active, setActive] = useState(0);
+    const serial = useRef(0);
+    const cache = useRef(null);
+    if (cache.current?.value !== current) cache.current = {
+        value: current,
+        model: {
+            ...parseGradient(current) ?? defaultGradient,
+            stops: (parseGradient(current) ?? defaultGradient).stops.map((stop)=>({
+                    ...stop,
+                    key: `${panelId}-${++serial.current}`
+                }))
+        }
+    };
+    const model = cache.current.model;
+    const selected = model.stops[Math.min(active, model.stops.length - 1)] ?? defaultGradient.stops[0] ?? {
+        color: '#20834a',
+        offset: 0
+    };
+    const change = (next, complete = false)=>{
+        if (disabled || readOnly) return;
+        const text = gradientString(next);
+        cache.current = {
+            value: text,
+            model: next
+        };
+        setCurrent(text);
+        if (text !== current) onChange?.(text);
+        if (complete) onChangeComplete?.(text);
+    };
+    const changeStop = (patch, complete = false)=>change({
+            ...model,
+            stops: model.stops.map((stop, index)=>index === Math.min(active, model.stops.length - 1) ? {
+                    ...stop,
+                    ...patch
+                } : stop)
+        }, complete);
+    useFloatingDismiss(open, ()=>setOpen(false), trigger, panel, root);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("span", {
+                ref: root,
+                className: classes('leaf-color-picker', `leaf-color-picker--${size}`, className),
+                style: style,
+                "data-status": status,
+                "data-disabled": disabled || void 0,
+                "data-readonly": readOnly || void 0,
+                "data-open": open || void 0,
+                onMouseDown: (event)=>{
+                    if (!disabled && event.target === event.currentTarget) event.preventDefault();
+                },
+                onClick: (event)=>{
+                    if (disabled || event.defaultPrevented || event.target !== event.currentTarget) return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    trigger.current?.focus();
+                    trigger.current?.click();
+                },
+                children: [
+                    /*#__PURE__*/ jsxs("button", {
+                        ...props,
+                        ref: trigger,
+                        type: props.type ?? 'button',
+                        form: form,
+                        id: id ?? field?.id,
+                        disabled: disabled,
+                        "aria-label": props['aria-label'] ?? (field?.labelId ? void 0 : messages.colorPicker.label),
+                        "aria-labelledby": props['aria-labelledby'] ?? field?.labelId,
+                        "aria-describedby": [
+                            props['aria-describedby'],
+                            field?.descriptionId
+                        ].filter(Boolean).join(' ') || void 0,
+                        "aria-invalid": 'error' === status || props['aria-invalid'],
+                        "aria-expanded": open,
+                        "aria-haspopup": "dialog",
+                        "aria-controls": open ? panelId : void 0,
+                        className: "leaf-color-picker__trigger",
+                        onClick: (event)=>{
+                            props.onClick?.(event);
+                            if (!event.defaultPrevented) setOpen(!open);
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "leaf-color-picker__swatch",
+                                "aria-hidden": "true",
+                                children: /*#__PURE__*/ jsx("i", {
+                                    style: {
+                                        background: current || 'transparent'
+                                    }
+                                })
+                            }),
+                            showText && /*#__PURE__*/ jsx("span", {
+                                className: "leaf-color-picker__text",
+                                children: 'function' == typeof showText ? showText(current) : current ? t('colorPicker.gradient') : messages.colorPicker.label
+                            })
+                        ]
+                    }),
+                    allowClear && current && !disabled && !readOnly && /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "leaf-color-picker__clear",
+                        "aria-label": messages.colorPicker.clear,
+                        onClick: ()=>{
+                            setCurrent('');
+                            onChange?.('');
+                            onChangeComplete?.('');
+                            trigger.current?.focus();
+                        },
+                        children: /*#__PURE__*/ jsx(X, {
+                            size: 14,
+                            "aria-hidden": "true"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(FormValue, {
+                        name: name,
+                        form: form,
+                        value: current,
+                        required: required ?? field?.required,
+                        disabled: disabled,
+                        triggerRef: trigger
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(FloatingPanel, {
+                open: open,
+                triggerRef: trigger,
+                panelRef: panel,
+                width: popupWidth,
+                id: panelId,
+                role: "dialog",
+                "aria-label": messages.colorPicker.label,
+                className: [
+                    'leaf-floating',
+                    'leaf-color-picker__gradient',
+                    popupClassName
+                ].filter(Boolean).join(' '),
+                style: popupStyle,
+                render: popupRender,
+                placement: popupPlacement,
+                container: getPopupContainer,
+                children: /*#__PURE__*/ jsxs(FieldScope, {
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: "leaf-color-picker__gradient-preview",
+                            style: {
+                                background: current
+                            }
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "leaf-color-picker__stops",
+                            children: [
+                                model.stops.map((stop, index)=>/*#__PURE__*/ jsx("button", {
+                                        type: "button",
+                                        "aria-label": formatText('colorPicker.colorStop', {
+                                            index: index + 1
+                                        }),
+                                        "aria-pressed": active === index,
+                                        style: {
+                                            background: stop.color
+                                        },
+                                        onClick: ()=>setActive(index)
+                                    }, stop.key)),
+                                /*#__PURE__*/ jsx(ButtonControl, {
+                                    size: "sm",
+                                    variant: "ghost",
+                                    "aria-label": t('colorPicker.addColorStop'),
+                                    startIcon: /*#__PURE__*/ jsx(Plus, {
+                                        size: 14
+                                    }),
+                                    disabled: model.stops.length >= 10,
+                                    onClick: ()=>{
+                                        change({
+                                            ...model,
+                                            stops: [
+                                                ...model.stops,
+                                                {
+                                                    color: selected.color,
+                                                    offset: 50,
+                                                    key: `${panelId}-${++serial.current}`
+                                                }
+                                            ]
+                                        }, true);
+                                        setActive(model.stops.length);
+                                    }
+                                }),
+                                /*#__PURE__*/ jsx(ButtonControl, {
+                                    size: "sm",
+                                    variant: "ghost",
+                                    "aria-label": t('colorPicker.removeColorStop'),
+                                    startIcon: /*#__PURE__*/ jsx(X, {
+                                        size: 14
+                                    }),
+                                    disabled: model.stops.length <= 2,
+                                    onClick: ()=>{
+                                        change({
+                                            ...model,
+                                            stops: model.stops.filter((_, index)=>index !== active)
+                                        }, true);
+                                        setActive(0);
+                                    }
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "leaf-color-picker__gradient-field",
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    children: t('colorPicker.color')
+                                }),
+                                /*#__PURE__*/ jsx(SolidColorPicker, {
+                                    value: selected.color,
+                                    onChange: (color)=>changeStop({
+                                            color
+                                        }),
+                                    onChangeComplete: (color)=>changeStop({
+                                            color
+                                        }, true),
+                                    showText: true,
+                                    disableAlpha: disableAlpha,
+                                    presets: presets,
+                                    format: format,
+                                    defaultFormat: defaultFormat,
+                                    onFormatChange: onFormatChange
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "leaf-color-picker__gradient-field",
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    children: t('colorPicker.position')
+                                }),
+                                /*#__PURE__*/ jsx(SliderControl, {
+                                    "aria-label": t('colorPicker.colorStopPosition'),
+                                    value: selected.offset,
+                                    onChange: (offset)=>changeStop({
+                                            offset
+                                        }),
+                                    onChangeComplete: ()=>onChangeComplete?.(current)
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "leaf-color-picker__gradient-field",
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    children: t('colorPicker.angle')
+                                }),
+                                /*#__PURE__*/ jsx(InputNumberControl, {
+                                    "aria-label": t('colorPicker.gradientAngle'),
+                                    min: 0,
+                                    max: 360,
+                                    value: model.angle,
+                                    onChange: (angle)=>{
+                                        if (null !== angle) change({
+                                            ...model,
+                                            angle
+                                        }, true);
+                                    },
+                                    suffix: "\xb0"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+export { GradientColorPicker, gradientString, parseGradient };
+
+//# sourceMappingURL=gradient.js.map

package/dist/esm/colorpicker/gradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorpicker/gradient.js","sources":["../../../src/colorpicker/gradient.tsx"],"sourcesContent":["import { TinyColor } from '@ctrl/tinycolor';\nimport { Plus, X } from 'lucide-react';\nimport { useId, useRef, useState } from 'react';\nimport { ButtonControl } from '../button/button';\nimport { useLeafConfig } from '../config-provider/context';\nimport { FieldScope, useFormField } from '../form/form';\nimport { InputNumberControl as InputNumber } from '../inputnumber/inputnumber';\nimport { classes } from '../shared/classes';\nimport { FormValue, useFieldValue } from '../shared/field';\nimport { FloatingPanel, useFloatingDismiss, usePopupState } from '../shared/floating';\nimport { useFormattedText } from '../shared/use-formatted-text';\nimport { useText } from '../shared/use-text';\nimport { SliderControl as Slider } from '../slider/slider';\nimport { type ColorPickerProps, SolidColorPicker } from './colorpicker';\nexport interface ColorGradientStop {\n  key?: string;\n  color: string;\n  offset: number;\n}\nexport interface ColorGradient {\n  angle: number;\n  stops: readonly ColorGradientStop[];\n}\nexport function gradientString({ angle, stops }: ColorGradient) {\n  return `linear-gradient(${angle}deg, ${[...stops]\n    .sort((a, b) => a.offset - b.offset)\n    .map((stop) => `${stop.color} ${stop.offset}%`)\n    .join(', ')})`;\n}\nexport function parseGradient(value: string): ColorGradient | null {\n  const match = value.match(/^linear-gradient\\(\\s*([+-]?[\\d.]+)deg\\s*,([\\s\\S]+)\\)$/i);\n  if (!match) return null;\n  const pieces = (match[2] ?? '').split(/,(?![^()]*\\))/);\n  const stops: ColorGradientStop[] = [];\n  for (const piece of pieces) {\n    const stop = piece.trim().match(/^(.+?)\\s+([\\d.]+)%$/);\n    if (!stop || !new TinyColor(stop[1]).isValid) return null;\n    stops.push({ color: stop[1] ?? '', offset: Math.min(100, Math.max(0, Number(stop[2]))) });\n  }\n  const angle = Number(match[1]);\n  return stops.length >= 2 && Number.isFinite(angle) ? { angle, stops } : null;\n}\nconst defaultGradient: ColorGradient = {\n  angle: 90,\n  stops: [\n    { color: '#20834a', offset: 0 },\n    { color: '#83cf9e', offset: 100 },\n  ],\n};\nconst initial = gradientString(defaultGradient);\nexport function GradientColorPicker({\n  value,\n  defaultValue = initial,\n  onChange,\n  onChangeComplete,\n  size = 'md',\n  disabled: disabledProp,\n  readOnly,\n  allowClear = false,\n  status: statusProp,\n  format,\n  defaultFormat,\n  onFormatChange,\n  disableAlpha,\n  presets,\n  gradient: _gradient,\n  mode: _mode,\n  name,\n  form,\n  required,\n  open: controlledOpen,\n  defaultOpen,\n  onOpenChange,\n  popupWidth = 300,\n  popupClassName,\n  popupStyle,\n  popupRender,\n  popupPlacement,\n  getPopupContainer,\n  showText,\n  className,\n  style,\n  id,\n  ...props\n}: ColorPickerProps) {\n  const field = useFormField(),\n    { messages } = useLeafConfig(),\n    t = useText();\n  const formatText = useFormattedText();\n  const disabled = disabledProp || field?.disabled;\n  const status = statusProp ?? (field?.error ? 'error' : undefined);\n  const trigger = useRef<HTMLButtonElement>(null),\n    panel = useRef<HTMLDivElement>(null),\n    root = useRef<HTMLSpanElement>(null);\n  const panelId = useId();\n  const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);\n  const [open, setOpen] = usePopupState(\n      disabled || readOnly,\n      onOpenChange,\n      controlledOpen,\n      defaultOpen,\n    ),\n    [active, setActive] = useState(0);\n  const serial = useRef(0);\n  const cache = useRef<{ value: string; model: ColorGradient } | null>(null);\n  if (cache.current?.value !== current)\n    cache.current = {\n      value: current,\n      model: {\n        ...(parseGradient(current) ?? defaultGradient),\n        stops: (parseGradient(current) ?? defaultGradient).stops.map((stop) => ({\n          ...stop,\n          key: `${panelId}-${++serial.current}`,\n        })),\n      },\n    };\n  const model = cache.current.model;\n  const selected = model.stops[Math.min(active, model.stops.length - 1)] ??\n    defaultGradient.stops[0] ?? { color: '#20834a', offset: 0 };\n  const change = (next: ColorGradient, complete = false) => {\n    if (disabled || readOnly) return;\n    const text = gradientString(next);\n    cache.current = { value: text, model: next };\n    setCurrent(text);\n    if (text !== current) onChange?.(text);\n    if (complete) onChangeComplete?.(text);\n  };\n  const changeStop = (patch: Partial<ColorGradientStop>, complete = false) =>\n    change(\n      {\n        ...model,\n        stops: model.stops.map((stop, index) =>\n          index === Math.min(active, model.stops.length - 1) ? { ...stop, ...patch } : stop,\n        ),\n      },\n      complete,\n    );\n  useFloatingDismiss(open, () => setOpen(false), trigger, panel, root);\n  return (\n    <>\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: Pointer events on the outer row forward to the keyboard-accessible trigger button. */}\n      {/* biome-ignore lint/a11y/useKeyWithClickEvents: The enclosed native button owns keyboard interaction; this wrapper only extends its hit area. */}\n      <span\n        ref={root}\n        className={classes('leaf-color-picker', `leaf-color-picker--${size}`, className)}\n        style={style}\n        data-status={status}\n        data-disabled={disabled || undefined}\n        data-readonly={readOnly || undefined}\n        data-open={open || undefined}\n        onMouseDown={(event) => {\n          if (!disabled && event.target === event.currentTarget) event.preventDefault();\n        }}\n        onClick={(event) => {\n          if (disabled || event.defaultPrevented || event.target !== event.currentTarget) return;\n          event.preventDefault();\n          event.stopPropagation();\n          trigger.current?.focus();\n          trigger.current?.click();\n        }}\n      >\n        <button\n          {...props}\n          ref={trigger}\n          type={props.type ?? 'button'}\n          form={form}\n          id={id ?? field?.id}\n          disabled={disabled}\n          aria-label={\n            props['aria-label'] ?? (field?.labelId ? undefined : messages.colorPicker.label)\n          }\n          aria-labelledby={props['aria-labelledby'] ?? field?.labelId}\n          aria-describedby={\n            [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined\n          }\n          aria-invalid={status === 'error' || props['aria-invalid']}\n          aria-expanded={open}\n          aria-haspopup=\"dialog\"\n          aria-controls={open ? panelId : undefined}\n          className=\"leaf-color-picker__trigger\"\n          onClick={(event) => {\n            props.onClick?.(event);\n            if (!event.defaultPrevented) setOpen(!open);\n          }}\n        >\n          <span className=\"leaf-color-picker__swatch\" aria-hidden=\"true\">\n            <i style={{ background: current || 'transparent' }} />\n          </span>\n          {showText && (\n            <span className=\"leaf-color-picker__text\">\n              {typeof showText === 'function'\n                ? showText(current)\n                : current\n                  ? t('colorPicker.gradient')\n                  : messages.colorPicker.label}\n            </span>\n          )}\n        </button>\n        {allowClear && current && !disabled && !readOnly && (\n          <button\n            type=\"button\"\n            className=\"leaf-color-picker__clear\"\n            aria-label={messages.colorPicker.clear}\n            onClick={() => {\n              setCurrent('');\n              onChange?.('');\n              onChangeComplete?.('');\n              trigger.current?.focus();\n            }}\n          >\n            <X size={14} aria-hidden=\"true\" />\n          </button>\n        )}\n        <FormValue\n          name={name}\n          form={form}\n          value={current}\n          required={required ?? field?.required}\n          disabled={disabled}\n          triggerRef={trigger}\n        />\n      </span>\n      <FloatingPanel\n        open={open}\n        triggerRef={trigger}\n        panelRef={panel}\n        width={popupWidth}\n        id={panelId}\n        role=\"dialog\"\n        aria-label={messages.colorPicker.label}\n        className={['leaf-floating', 'leaf-color-picker__gradient', popupClassName]\n          .filter(Boolean)\n          .join(' ')}\n        style={popupStyle}\n        render={popupRender}\n        placement={popupPlacement}\n        container={getPopupContainer}\n      >\n        <FieldScope>\n          <div className=\"leaf-color-picker__gradient-preview\" style={{ background: current }} />\n          <div className=\"leaf-color-picker__stops\">\n            {model.stops.map((stop, index) => (\n              <button\n                key={stop.key}\n                type=\"button\"\n                aria-label={formatText('colorPicker.colorStop', { index: index + 1 })}\n                aria-pressed={active === index}\n                style={{ background: stop.color }}\n                onClick={() => setActive(index)}\n              />\n            ))}\n            <ButtonControl\n              size=\"sm\"\n              variant=\"ghost\"\n              aria-label={t('colorPicker.addColorStop')}\n              startIcon={<Plus size={14} />}\n              disabled={model.stops.length >= 10}\n              onClick={() => {\n                change(\n                  {\n                    ...model,\n                    stops: [\n                      ...model.stops,\n                      { color: selected.color, offset: 50, key: `${panelId}-${++serial.current}` },\n                    ],\n                  },\n                  true,\n                );\n                setActive(model.stops.length);\n              }}\n            />\n            <ButtonControl\n              size=\"sm\"\n              variant=\"ghost\"\n              aria-label={t('colorPicker.removeColorStop')}\n              startIcon={<X size={14} />}\n              disabled={model.stops.length <= 2}\n              onClick={() => {\n                change(\n                  { ...model, stops: model.stops.filter((_, index) => index !== active) },\n                  true,\n                );\n                setActive(0);\n              }}\n            />\n          </div>\n          <div className=\"leaf-color-picker__gradient-field\">\n            <span>{t('colorPicker.color')}</span>\n            <SolidColorPicker\n              value={selected.color}\n              onChange={(color) => changeStop({ color })}\n              onChangeComplete={(color) => changeStop({ color }, true)}\n              showText\n              disableAlpha={disableAlpha}\n              presets={presets}\n              format={format}\n              defaultFormat={defaultFormat}\n              onFormatChange={onFormatChange}\n            />\n          </div>\n          <div className=\"leaf-color-picker__gradient-field\">\n            <span>{t('colorPicker.position')}</span>\n            <Slider\n              aria-label={t('colorPicker.colorStopPosition')}\n              value={selected.offset}\n              onChange={(offset) => changeStop({ offset })}\n              onChangeComplete={() => onChangeComplete?.(current)}\n            />\n          </div>\n          <div className=\"leaf-color-picker__gradient-field\">\n            <span>{t('colorPicker.angle')}</span>\n            <InputNumber\n              aria-label={t('colorPicker.gradientAngle')}\n              min={0}\n              max={360}\n              value={model.angle}\n              onChange={(angle) => {\n                if (angle !== null) change({ ...model, angle }, true);\n              }}\n              suffix=\"°\"\n            />\n          </div>\n        </FieldScope>\n      </FloatingPanel>\n    </>\n  );\n}\n"],"names":["gradientString","angle","stops","a","b","stop","parseGradient","value","match","pieces","piece","TinyColor","Math","Number","defaultGradient","initial","GradientColorPicker","defaultValue","onChange","onChangeComplete","size","disabledProp","readOnly","allowClear","statusProp","format","defaultFormat","onFormatChange","disableAlpha","presets","_gradient","_mode","name","form","required","controlledOpen","defaultOpen","onOpenChange","popupWidth","popupClassName","popupStyle","popupRender","popupPlacement","getPopupContainer","showText","className","style","id","props","field","useFormField","messages","useLeafConfig","t","useText","formatText","useFormattedText","disabled","status","undefined","trigger","useRef","panel","root","panelId","useId","current","setCurrent","useFieldValue","open","setOpen","usePopupState","active","setActive","useState","serial","cache","model","selected","change","next","complete","text","changeStop","patch","index","useFloatingDismiss","classes","event","Boolean","X","FormValue","FloatingPanel","FieldScope","ButtonControl","Plus","_","SolidColorPicker","color","Slider","offset","InputNumber"],"mappings":"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"}

package/dist/esm/colorpicker/index.d.ts

@@ -0,0 +1,5 @@
+export type { ColorPickerProps, ColorPreset } from './colorpicker.js';
+export { ColorPicker } from './colorpicker.js';
+export type { ColorGradient, ColorGradientStop } from './gradient.js';
+export { gradientString, parseGradient } from './gradient.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/colorpicker/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/esm/colorpicker/index.js

@@ -0,0 +1,3 @@
+"use client";
+export { ColorPicker } from "./colorpicker.js";
+export { gradientString, parseGradient } from "./gradient.js";

package/dist/esm/colors.d.ts

@@ -0,0 +1,35 @@
+export declare const defaultColors: {
+    light: {
+        primary: string;
+        'on-primary': string;
+        danger: string;
+        'on-danger': string;
+        warning: string;
+        info: string;
+        success: string;
+        text: string;
+        'text-muted': string;
+        surface: string;
+        'surface-muted': string;
+        border: string;
+    };
+    dark: {
+        primary: string;
+        'on-primary': string;
+        danger: string;
+        'on-danger': string;
+        warning: string;
+        info: string;
+        success: string;
+        text: string;
+        'text-muted': string;
+        surface: string;
+        'surface-muted': string;
+        border: string;
+    };
+};
+/** sRGB mixing with premultiplied alpha, matching CSS transparent-color semantics. */
+export declare function mixColors(first: string | undefined, second: string | undefined, weight: number): string | undefined;
+/** Concrete values only; CSS variable inputs can be resolved by the provider in the browser. */
+export declare function deriveColors(appearance: 'light' | 'dark', overrides?: Record<string, string>): Record<`--leaf-${string}`, string>;
+//# sourceMappingURL=colors.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;IACxB,KAAK;QACH,OAAO;QACP,YAAY;QACZ,MAAM;QACN,WAAW;QACX,OAAO;QACP,IAAI;QACJ,OAAO;QACP,IAAI;QACJ,YAAY;QACZ,OAAO;QACP,eAAe;QACf,MAAM;;IAER,IAAI;QACF,OAAO;QACP,YAAY;QACZ,MAAM;QACN,WAAW;QACX,OAAO;QACP,IAAI;QACJ,OAAO;QACP,IAAI;QACJ,YAAY;QACZ,OAAO;QACP,eAAe;QACf,MAAM;;CAET,CAAC;AAEF,sFAAsF;AACtF,wBAAgB,SAAS,CACvB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,MAAM,EAAE,MAAM,GACb,MAAM,GAAG,SAAS,CAYpB;AAaD,gGAAgG;AAChG,wBAAgB,YAAY,CAAC,UAAU,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,sCAoDhG"}

package/dist/esm/colors.js

@@ -0,0 +1,123 @@
+"use client";
+import { TinyColor, readability } from "@ctrl/tinycolor";
+import { colorRecipes } from "./color-recipes.js";
+const defaultColors = {
+    light: {
+        primary: '#20834a',
+        'on-primary': '#ffffff',
+        danger: '#c83c3c',
+        'on-danger': '#ffffff',
+        warning: '#faad14',
+        info: '#1677ff',
+        success: '#20834a',
+        text: '#202024',
+        'text-muted': '#68686f',
+        surface: '#ffffff',
+        'surface-muted': '#f6f6f7',
+        border: '#e5e5e8'
+    },
+    dark: {
+        primary: '#83cf9e',
+        'on-primary': '#11271a',
+        danger: '#ef8585',
+        'on-danger': '#381818',
+        warning: '#ffc53d',
+        info: '#69b1ff',
+        success: '#83cf9e',
+        text: '#ededf0',
+        'text-muted': '#a5a5ae',
+        surface: '#1c1c20',
+        'surface-muted': '#25252b',
+        border: '#38383f'
+    }
+};
+function mixColors(first, second, weight) {
+    if (!first || !second) return;
+    const a = new TinyColor(first);
+    const b = new TinyColor(second);
+    if (!a.isValid || !b.isValid) return;
+    const x = a.toRgb();
+    const y = b.toRgb();
+    const ratio = Math.min(1, Math.max(0, weight / 100));
+    const alpha = x.a * ratio + y.a * (1 - ratio);
+    const channel = (key)=>alpha ? Math.round((x[key] * x.a * ratio + y[key] * y.a * (1 - ratio)) / alpha) : 0;
+    return `rgba(${channel('r')}, ${channel('g')}, ${channel('b')}, ${Number(alpha.toFixed(4))})`;
+}
+function interactionColor(color, foreground, toward, amounts) {
+    if (!new TinyColor(color).isValid || !new TinyColor(foreground).isValid) return;
+    const minimumContrast = Math.min(4.5, readability(color, foreground));
+    for (const amount of amounts){
+        const candidate = mixColors(color, toward, 100 - amount);
+        if (candidate && readability(candidate, foreground) >= minimumContrast) return candidate;
+    }
+    return color;
+}
+function deriveColors(appearance, overrides = {}) {
+    const colors = {
+        ...defaultColors[appearance],
+        ...overrides
+    };
+    colors['text-subtle'] ??= mixColors(colors['text-muted'], colors.surface, 92) ?? '#68686f';
+    colors['surface-raised'] ??= mixColors(colors.surface, colors.text, 98) ?? '#ffffff';
+    colors['border-hover'] ??= mixColors(colors.border, colors['text-muted'], 65) ?? '#e5e5e8';
+    const result = {};
+    for (const [key, [first, second, ratio]] of Object.entries(colorRecipes)){
+        const other = 'alpha' === second ? 'transparent' : 'white' === second ? '#fff' : 'black' === second ? '#000' : colors[second];
+        const value = mixColors(colors[first], other, ratio);
+        if (value) result[key] = value;
+    }
+    for (const key of [
+        'text-subtle',
+        'surface-raised',
+        'border-hover'
+    ])result[`--leaf-color-${key}`] = colors[key] ?? '';
+    const warning = colors.warning;
+    const text = colors.text;
+    if (warning && text && new TinyColor(warning).isValid && new TinyColor(text).isValid) {
+        const backgrounds = [
+            colors.surface,
+            colors['surface-muted'],
+            result['--leaf-color-warning-surface-8']
+        ].filter((color)=>Boolean(color));
+        for(let weight = 80; weight >= 0; weight -= 10){
+            const ink = mixColors(warning, text, weight);
+            if (ink && backgrounds.every((background)=>readability(ink, background) >= 4.5)) {
+                result['--leaf-color-warning-text-80'] = ink;
+                break;
+            }
+        }
+        result['--leaf-color-on-warning'] = readability(warning, '#202024') >= readability(warning, '#ffffff') ? '#202024' : '#ffffff';
+    }
+    for (const key of [
+        'primary',
+        'danger'
+    ]){
+        const color = colors[key];
+        const foreground = colors[`on-${key}`];
+        if (!color || !foreground) continue;
+        const hover = colors[`${key}-hover`] ?? interactionColor(color, foreground, '#fff', [
+            10,
+            8,
+            6,
+            4,
+            2.5,
+            1
+        ]);
+        const active = colors[`${key}-active`] ?? interactionColor(color, foreground, '#000', [
+            15,
+            12,
+            10,
+            8,
+            6,
+            4,
+            2.5,
+            1
+        ]);
+        if (hover) result[`--leaf-color-${key}-hover`] = hover;
+        if (active) result[`--leaf-color-${key}-active`] = active;
+    }
+    return result;
+}
+export { defaultColors, deriveColors, mixColors };
+
+//# sourceMappingURL=colors.js.map

package/dist/esm/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sources":["../../src/colors.ts"],"sourcesContent":["import { readability, TinyColor } from '@ctrl/tinycolor';\nimport { colorRecipes } from './color-recipes';\n\nexport const defaultColors = {\n  light: {\n    primary: '#20834a',\n    'on-primary': '#ffffff',\n    danger: '#c83c3c',\n    'on-danger': '#ffffff',\n    warning: '#faad14',\n    info: '#1677ff',\n    success: '#20834a',\n    text: '#202024',\n    'text-muted': '#68686f',\n    surface: '#ffffff',\n    'surface-muted': '#f6f6f7',\n    border: '#e5e5e8',\n  },\n  dark: {\n    primary: '#83cf9e',\n    'on-primary': '#11271a',\n    danger: '#ef8585',\n    'on-danger': '#381818',\n    warning: '#ffc53d',\n    info: '#69b1ff',\n    success: '#83cf9e',\n    text: '#ededf0',\n    'text-muted': '#a5a5ae',\n    surface: '#1c1c20',\n    'surface-muted': '#25252b',\n    border: '#38383f',\n  },\n};\n\n/** sRGB mixing with premultiplied alpha, matching CSS transparent-color semantics. */\nexport function mixColors(\n  first: string | undefined,\n  second: string | undefined,\n  weight: number,\n): string | undefined {\n  if (!first || !second) return undefined;\n  const a = new TinyColor(first);\n  const b = new TinyColor(second);\n  if (!a.isValid || !b.isValid) return undefined;\n  const x = a.toRgb();\n  const y = b.toRgb();\n  const ratio = Math.min(1, Math.max(0, weight / 100));\n  const alpha = x.a * ratio + y.a * (1 - ratio);\n  const channel = (key: 'r' | 'g' | 'b') =>\n    alpha ? Math.round((x[key] * x.a * ratio + y[key] * y.a * (1 - ratio)) / alpha) : 0;\n  return `rgba(${channel('r')}, ${channel('g')}, ${channel('b')}, ${Number(alpha.toFixed(4))})`;\n}\n\n/** Derive once per theme; keep readable solid-button labels when changing shade. */\nfunction interactionColor(color: string, foreground: string, toward: string, amounts: number[]) {\n  if (!new TinyColor(color).isValid || !new TinyColor(foreground).isValid) return undefined;\n  const minimumContrast = Math.min(4.5, readability(color, foreground));\n  for (const amount of amounts) {\n    const candidate = mixColors(color, toward, 100 - amount);\n    if (candidate && readability(candidate, foreground) >= minimumContrast) return candidate;\n  }\n  return color;\n}\n\n/** Concrete values only; CSS variable inputs can be resolved by the provider in the browser. */\nexport function deriveColors(appearance: 'light' | 'dark', overrides: Record<string, string> = {}) {\n  const colors: Record<string, string> = { ...defaultColors[appearance], ...overrides };\n  colors['text-subtle'] ??= mixColors(colors['text-muted'], colors.surface, 92) ?? '#68686f';\n  colors['surface-raised'] ??= mixColors(colors.surface, colors.text, 98) ?? '#ffffff';\n  colors['border-hover'] ??= mixColors(colors.border, colors['text-muted'], 65) ?? '#e5e5e8';\n  const result: Record<`--leaf-${string}`, string> = {};\n  for (const [key, [first, second, ratio]] of Object.entries(colorRecipes)) {\n    const other =\n      second === 'alpha'\n        ? 'transparent'\n        : second === 'white'\n          ? '#fff'\n          : second === 'black'\n            ? '#000'\n            : colors[second];\n    const value = mixColors(colors[first], other, ratio);\n    if (value) result[key as `--leaf-${string}`] = value;\n  }\n  for (const key of ['text-subtle', 'surface-raised', 'border-hover'])\n    result[`--leaf-color-${key}`] = colors[key] ?? '';\n  // Bright warning glyphs and fills need a separate, readable text color.\n  const warning = colors.warning;\n  const text = colors.text;\n  if (warning && text && new TinyColor(warning).isValid && new TinyColor(text).isValid) {\n    const backgrounds = [\n      colors.surface,\n      colors['surface-muted'],\n      result['--leaf-color-warning-surface-8'],\n    ].filter((color): color is string => Boolean(color));\n    for (let weight = 80; weight >= 0; weight -= 10) {\n      const ink = mixColors(warning, text, weight);\n      if (ink && backgrounds.every((background) => readability(ink, background) >= 4.5)) {\n        result['--leaf-color-warning-text-80'] = ink;\n        break;\n      }\n    }\n    result['--leaf-color-on-warning'] =\n      readability(warning, '#202024') >= readability(warning, '#ffffff') ? '#202024' : '#ffffff';\n  }\n  for (const key of ['primary', 'danger']) {\n    const color = colors[key];\n    const foreground = colors[`on-${key}`];\n    if (!color || !foreground) continue;\n    const hover =\n      colors[`${key}-hover`] ?? interactionColor(color, foreground, '#fff', [10, 8, 6, 4, 2.5, 1]);\n    const active =\n      colors[`${key}-active`] ??\n      interactionColor(color, foreground, '#000', [15, 12, 10, 8, 6, 4, 2.5, 1]);\n    if (hover) result[`--leaf-color-${key}-hover`] = hover;\n    if (active) result[`--leaf-color-${key}-active`] = active;\n  }\n  return result;\n}\n"],"names":["defaultColors","mixColors","first","second","weight","a","TinyColor","b","x","y","ratio","Math","alpha","channel","key","Number","interactionColor","color","foreground","toward","amounts","minimumContrast","readability","amount","candidate","deriveColors","appearance","overrides","colors","result","Object","colorRecipes","other","value","warning","text","backgrounds","Boolean","ink","background","hover","active"],"mappings":"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"}

package/dist/esm/commandpalette/commandpalette.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+export interface CommandItem {
+    key: string;
+    label: ReactNode;
+    keywords?: string;
+    group?: ReactNode;
+    icon?: ReactNode;
+    shortcut?: string;
+    disabled?: boolean;
+    onSelect?: () => void | Promise<void>;
+}
+export interface CommandPaletteProps {
+    items: readonly CommandItem[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onSelect?: (item: CommandItem) => void;
+    shortcut?: string | false;
+    placeholder?: string;
+    loading?: boolean;
+    emptyContent?: ReactNode;
+    onSearch?: (query: string) => void;
+    onError?: (error: unknown, item: CommandItem) => void;
+}
+export declare function CommandPalette(rawProps: CommandPaletteProps): import("react").JSX.Element;
+//# sourceMappingURL=commandpalette.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"commandpalette.d.ts","sourceRoot":"","sources":["../../../src/commandpalette/commandpalette.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC;AACD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvD;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,mBAAmB,+BAmN3D"}