@ifhover/leaf-ui 0.0.0-stage → 0.5.0

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

@@ -0,0 +1,126 @@
+"use client";
+import '../../../styles/components/progress.css';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, X } from "lucide-react";
+import { useLeafConfig } from "../config-provider/context.js";
+import { classes } from "../shared/classes.js";
+function Progress({ percent = 0, type = 'line', status = 'normal', showInfo = true, format, strokeWidth, color, size = 100, indeterminate = false, active = true, trailColor, segments, steps, dashboard = false, successPercent, className, style, 'aria-label': label, ...props }) {
+    const { messages } = useLeafConfig();
+    const value = Math.max(0, Math.min(100, Number.isFinite(percent) ? percent : 0));
+    const state = indeterminate || 'normal' !== status || 100 !== value ? status : 'success';
+    const width = Math.max(1, Math.min(20, strokeWidth ?? ('circle' === type ? 6 : 8)));
+    const content = format ? format(value) : 'success' === state ? /*#__PURE__*/ jsx(Check, {
+        "aria-hidden": "true"
+    }) : 'error' === state ? /*#__PURE__*/ jsx(X, {
+        "aria-hidden": "true"
+    }) : `${value}%`;
+    const radius = 50 - width / 2;
+    const circumference = 2 * Math.PI * radius;
+    const sweep = dashboard ? 0.75 * circumference : circumference;
+    const stepCount = steps && Number.isFinite(steps) ? Math.max(1, Math.min(1000, Math.trunc(steps))) : 0;
+    let remaining = 100;
+    const sections = segments?.map((segment)=>{
+        const percent = Math.max(0, Math.min(remaining, Number.isFinite(segment.percent) ? segment.percent : 0));
+        remaining -= percent;
+        return {
+            ...segment,
+            percent
+        };
+    });
+    const filled = sections?.length ? sections.reduce((total, section)=>total + section.percent, 0) : value;
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": indeterminate ? void 0 : value,
+        "aria-label": label ?? messages.progress,
+        "aria-valuetext": indeterminate ? messages.loading : `${value}%`,
+        "data-status": state,
+        "data-indeterminate": indeterminate || void 0,
+        "data-active": active && 'line' === type && !stepCount && !indeterminate && 'normal' === state && filled > 0 && filled < 100 || void 0,
+        className: classes('leaf-progress', `leaf-progress--${type}`, dashboard && 'leaf-progress--dashboard', Boolean(steps) && 'leaf-progress--steps', className),
+        style: {
+            ...color ? {
+                '--leaf-progress-color': color
+            } : {},
+            ...trailColor ? {
+                '--leaf-progress-trail': trailColor
+            } : {},
+            ...'circle' === type ? {
+                width: size,
+                height: size
+            } : {},
+            ...style
+        },
+        children: [
+            'line' === type ? /*#__PURE__*/ jsx("div", {
+                className: "leaf-progress__track",
+                style: {
+                    height: width,
+                    display: segments?.length ? 'flex' : void 0
+                },
+                children: stepCount ? Array.from({
+                    length: stepCount
+                }, (_, index)=>index).map((index)=>/*#__PURE__*/ jsx("span", {
+                        className: "leaf-progress__step",
+                        "data-filled": index / stepCount * 100 < value || void 0,
+                        style: segments?.[index] ? {
+                            '--leaf-progress-color': segments[index]?.color
+                        } : void 0
+                    }, `step-${index}`)) : segments?.length ? sections?.map((segment, index)=>/*#__PURE__*/ jsx("div", {
+                        className: "leaf-progress__fill",
+                        style: {
+                            width: `${segment.percent}%`,
+                            background: segment.color
+                        }
+                    }, segment.key ?? `segment-${index}`)) : /*#__PURE__*/ jsx("div", {
+                    className: "leaf-progress__fill",
+                    style: {
+                        width: `${value}%`
+                    }
+                })
+            }) : /*#__PURE__*/ jsxs("svg", {
+                viewBox: "0 0 100 100",
+                "aria-hidden": "true",
+                children: [
+                    /*#__PURE__*/ jsx("circle", {
+                        className: "leaf-progress__trail",
+                        cx: "50",
+                        cy: "50",
+                        r: radius,
+                        strokeWidth: width,
+                        strokeDasharray: dashboard ? `${sweep} ${circumference}` : void 0,
+                        transform: dashboard ? 'rotate(135 50 50)' : void 0
+                    }),
+                    /*#__PURE__*/ jsx("circle", {
+                        className: "leaf-progress__arc",
+                        cx: "50",
+                        cy: "50",
+                        r: radius,
+                        strokeWidth: width,
+                        strokeDasharray: indeterminate ? `${0.25 * circumference} ${circumference}` : `${sweep * value / 100} ${circumference}`,
+                        strokeDashoffset: 0,
+                        transform: dashboard ? 'rotate(135 50 50)' : 'rotate(-90 50 50)'
+                    }),
+                    void 0 !== successPercent && /*#__PURE__*/ jsx("circle", {
+                        className: "leaf-progress__arc leaf-progress__arc--success",
+                        cx: "50",
+                        cy: "50",
+                        r: radius,
+                        strokeWidth: width,
+                        strokeDasharray: `${sweep * Math.max(0, Math.min(value, successPercent)) / 100} ${circumference}`,
+                        transform: dashboard ? 'rotate(135 50 50)' : 'rotate(-90 50 50)'
+                    })
+                ]
+            }),
+            showInfo && !indeterminate && /*#__PURE__*/ jsx("span", {
+                className: "leaf-progress__info",
+                children: content
+            })
+        ]
+    });
+}
+export { Progress };
+
+//# sourceMappingURL=progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress/progress.js","sources":["../../../../../src/progress/progress.tsx"],"sourcesContent":["import { Check, X } from 'lucide-react';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { useLeafConfig } from '../config-provider/context';\nimport { classes } from '../shared/classes';\n\nexport interface ProgressSegment {\n  key?: string;\n  percent: number;\n  color?: string;\n}\nexport interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  percent?: number;\n  type?: 'line' | 'circle';\n  status?: 'normal' | 'success' | 'error';\n  showInfo?: boolean;\n  format?: (percent: number) => ReactNode;\n  strokeWidth?: number;\n  color?: string;\n  size?: number;\n  indeterminate?: boolean;\n  /** Animate a soft shimmer within the completed part of an unfinished line. */\n  active?: boolean;\n  trailColor?: string;\n  segments?: readonly ProgressSegment[];\n  steps?: number;\n  dashboard?: boolean;\n  successPercent?: number;\n}\nexport function Progress({\n  percent = 0,\n  type = 'line',\n  status = 'normal',\n  showInfo = true,\n  format,\n  strokeWidth,\n  color,\n  size = 100,\n  indeterminate = false,\n  active = true,\n  trailColor,\n  segments,\n  steps,\n  dashboard = false,\n  successPercent,\n  className,\n  style,\n  'aria-label': label,\n  ...props\n}: ProgressProps) {\n  const { messages } = useLeafConfig();\n  const value = Math.max(0, Math.min(100, Number.isFinite(percent) ? percent : 0));\n  const state = !indeterminate && status === 'normal' && value === 100 ? 'success' : status;\n  const width = Math.max(1, Math.min(20, strokeWidth ?? (type === 'circle' ? 6 : 8)));\n  const content = format ? (\n    format(value)\n  ) : state === 'success' ? (\n    <Check aria-hidden=\"true\" />\n  ) : state === 'error' ? (\n    <X aria-hidden=\"true\" />\n  ) : (\n    `${value}%`\n  );\n  const radius = 50 - width / 2;\n  const circumference = 2 * Math.PI * radius;\n  const sweep = dashboard ? circumference * 0.75 : circumference;\n  const stepCount =\n    steps && Number.isFinite(steps) ? Math.max(1, Math.min(1000, Math.trunc(steps))) : 0;\n  let remaining = 100;\n  const sections = segments?.map((segment) => {\n    const percent = Math.max(\n      0,\n      Math.min(remaining, Number.isFinite(segment.percent) ? segment.percent : 0),\n    );\n    remaining -= percent;\n    return { ...segment, percent };\n  });\n  const filled = sections?.length\n    ? sections.reduce((total, section) => total + section.percent, 0)\n    : value;\n  return (\n    <div\n      {...props}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={indeterminate ? undefined : value}\n      aria-label={label ?? messages.progress}\n      aria-valuetext={indeterminate ? messages.loading : `${value}%`}\n      data-status={state}\n      data-indeterminate={indeterminate || undefined}\n      data-active={\n        (active &&\n          type === 'line' &&\n          !stepCount &&\n          !indeterminate &&\n          state === 'normal' &&\n          filled > 0 &&\n          filled < 100) ||\n        undefined\n      }\n      className={classes(\n        'leaf-progress',\n        `leaf-progress--${type}`,\n        dashboard && 'leaf-progress--dashboard',\n        Boolean(steps) && 'leaf-progress--steps',\n        className,\n      )}\n      style={{\n        ...(color ? { '--leaf-progress-color': color } : {}),\n        ...(trailColor ? { '--leaf-progress-trail': trailColor } : {}),\n        ...(type === 'circle' ? { width: size, height: size } : {}),\n        ...style,\n      }}\n    >\n      {type === 'line' ? (\n        <div\n          className=\"leaf-progress__track\"\n          style={{ height: width, display: segments?.length ? 'flex' : undefined }}\n        >\n          {stepCount ? (\n            Array.from({ length: stepCount }, (_, index) => index).map((index) => (\n              <span\n                key={`step-${index}`}\n                className=\"leaf-progress__step\"\n                data-filled={(index / stepCount) * 100 < value || undefined}\n                style={\n                  segments?.[index]\n                    ? ({ '--leaf-progress-color': segments[index]?.color } as React.CSSProperties)\n                    : undefined\n                }\n              />\n            ))\n          ) : segments?.length ? (\n            sections?.map((segment, index) => (\n              <div\n                key={segment.key ?? `segment-${index}`}\n                className=\"leaf-progress__fill\"\n                style={{ width: `${segment.percent}%`, background: segment.color }}\n              />\n            ))\n          ) : (\n            <div className=\"leaf-progress__fill\" style={{ width: `${value}%` }} />\n          )}\n        </div>\n      ) : (\n        <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n          <circle\n            className=\"leaf-progress__trail\"\n            cx=\"50\"\n            cy=\"50\"\n            r={radius}\n            strokeWidth={width}\n            strokeDasharray={dashboard ? `${sweep} ${circumference}` : undefined}\n            transform={dashboard ? 'rotate(135 50 50)' : undefined}\n          />\n          <circle\n            className=\"leaf-progress__arc\"\n            cx=\"50\"\n            cy=\"50\"\n            r={radius}\n            strokeWidth={width}\n            strokeDasharray={\n              indeterminate\n                ? `${circumference * 0.25} ${circumference}`\n                : `${(sweep * value) / 100} ${circumference}`\n            }\n            strokeDashoffset={0}\n            transform={dashboard ? 'rotate(135 50 50)' : 'rotate(-90 50 50)'}\n          />\n          {successPercent !== undefined && (\n            <circle\n              className=\"leaf-progress__arc leaf-progress__arc--success\"\n              cx=\"50\"\n              cy=\"50\"\n              r={radius}\n              strokeWidth={width}\n              strokeDasharray={`${(sweep * Math.max(0, Math.min(value, successPercent))) / 100} ${circumference}`}\n              transform={dashboard ? 'rotate(135 50 50)' : 'rotate(-90 50 50)'}\n            />\n          )}\n        </svg>\n      )}\n      {showInfo && !indeterminate && <span className=\"leaf-progress__info\">{content}</span>}\n    </div>\n  );\n}\n"],"names":["Progress","percent","type","status","showInfo","format","strokeWidth","color","size","indeterminate","active","trailColor","segments","steps","dashboard","successPercent","className","style","label","props","messages","useLeafConfig","value","Math","Number","state","width","content","Check","X","radius","circumference","sweep","stepCount","remaining","sections","segment","filled","total","section","undefined","classes","Boolean","Array","_","index"],"mappings":"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"}

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

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

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

@@ -0,0 +1,83 @@
+"use client";
+import '../../../styles/components/qrcode.css';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Download, RefreshCw } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import { useRef } from "react";
+import { Button } from "../button/index.js";
+import { Loading } from "../loading/index.js";
+import { classes } from "../shared/classes.js";
+import { useText } from "../shared/use-text.js";
+function QRCode({ value, size = 160, color = 'var(--leaf-color-text)', backgroundColor = 'var(--leaf-color-surface)', level = 'M', logo, logoSize = 32, status = 'active', onRefresh, downloadable = false, fileName = 'qrcode.svg', className, ...props }) {
+    const t = useText();
+    const root = useRef(null);
+    const download = ()=>{
+        const svg = root.current?.querySelector('svg');
+        if (!svg) return;
+        const clone = svg.cloneNode(true);
+        const original = Array.from(svg.querySelectorAll('[fill]'));
+        clone.querySelectorAll('[fill]').forEach((element, index)=>{
+            element.setAttribute('fill', getComputedStyle(original[index] ?? svg).fill);
+        });
+        const address = URL.createObjectURL(new Blob([
+            new XMLSerializer().serializeToString(clone)
+        ], {
+            type: 'image/svg+xml'
+        }));
+        const anchor = document.createElement('a');
+        anchor.href = address;
+        anchor.download = fileName;
+        anchor.click();
+        setTimeout(()=>URL.revokeObjectURL(address), 1000);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        ref: root,
+        className: classes('leaf-qr-code', className),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "leaf-qr-code__image",
+                style: {
+                    width: Math.max(64, size),
+                    height: Math.max(64, size)
+                },
+                children: [
+                    /*#__PURE__*/ jsx(QRCodeSVG, {
+                        value: value,
+                        size: Math.max(64, size),
+                        level: level,
+                        marginSize: 2,
+                        fgColor: color,
+                        bgColor: backgroundColor,
+                        title: props['aria-label'] ?? t('二维码', 'QR code'),
+                        imageSettings: logo ? {
+                            src: logo,
+                            width: logoSize,
+                            height: logoSize,
+                            excavate: true
+                        } : void 0
+                    }),
+                    'active' !== status && /*#__PURE__*/ jsx("div", {
+                        className: "leaf-qr-code__overlay",
+                        children: 'loading' === status ? /*#__PURE__*/ jsx(Loading, {}) : /*#__PURE__*/ jsx(Button, {
+                            variant: "outline",
+                            startIcon: /*#__PURE__*/ jsx(RefreshCw, {}),
+                            onClick: onRefresh,
+                            children: t('刷新二维码', 'Refresh code')
+                        })
+                    })
+                ]
+            }),
+            downloadable && /*#__PURE__*/ jsx(Button, {
+                size: "sm",
+                variant: "ghost",
+                startIcon: /*#__PURE__*/ jsx(Download, {}),
+                onClick: download,
+                children: t('下载', 'Download')
+            })
+        ]
+    });
+}
+export { QRCode };
+
+//# sourceMappingURL=qrcode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qrcode/qrcode.js","sources":["../../../../../src/qrcode/qrcode.tsx"],"sourcesContent":["import { Download, RefreshCw } from 'lucide-react';\nimport { QRCodeSVG } from 'qrcode.react';\nimport { type HTMLAttributes, useRef } from 'react';\nimport { Button } from '../button';\nimport { Loading } from '../loading';\nimport { classes } from '../shared/classes';\nimport { useText } from '../shared/use-text';\nexport interface QRCodeProps extends HTMLAttributes<HTMLDivElement> {\n  value: string;\n  size?: number;\n  color?: string;\n  backgroundColor?: string;\n  level?: 'L' | 'M' | 'Q' | 'H';\n  logo?: string;\n  logoSize?: number;\n  status?: 'active' | 'loading' | 'expired';\n  onRefresh?: () => void;\n  downloadable?: boolean;\n  fileName?: string;\n}\nexport function QRCode({\n  value,\n  size = 160,\n  color = 'var(--leaf-color-text)',\n  backgroundColor = 'var(--leaf-color-surface)',\n  level = 'M',\n  logo,\n  logoSize = 32,\n  status = 'active',\n  onRefresh,\n  downloadable = false,\n  fileName = 'qrcode.svg',\n  className,\n  ...props\n}: QRCodeProps) {\n  const t = useText();\n  const root = useRef<HTMLDivElement>(null);\n  const download = () => {\n    const svg = root.current?.querySelector('svg');\n    if (!svg) return;\n    const clone = svg.cloneNode(true) as SVGSVGElement;\n    const original = Array.from(svg.querySelectorAll('[fill]'));\n    clone.querySelectorAll('[fill]').forEach((element, index) => {\n      element.setAttribute('fill', getComputedStyle(original[index] ?? svg).fill);\n    });\n    const address = URL.createObjectURL(\n      new Blob([new XMLSerializer().serializeToString(clone)], { type: 'image/svg+xml' }),\n    );\n    const anchor = document.createElement('a');\n    anchor.href = address;\n    anchor.download = fileName;\n    anchor.click();\n    setTimeout(() => URL.revokeObjectURL(address), 1000);\n  };\n  return (\n    <div {...props} ref={root} className={classes('leaf-qr-code', className)}>\n      <div\n        className=\"leaf-qr-code__image\"\n        style={{ width: Math.max(64, size), height: Math.max(64, size) }}\n      >\n        <QRCodeSVG\n          value={value}\n          size={Math.max(64, size)}\n          level={level}\n          marginSize={2}\n          fgColor={color}\n          bgColor={backgroundColor}\n          title={props['aria-label'] ?? t('二维码', 'QR code')}\n          imageSettings={\n            logo ? { src: logo, width: logoSize, height: logoSize, excavate: true } : undefined\n          }\n        />\n        {status !== 'active' && (\n          <div className=\"leaf-qr-code__overlay\">\n            {status === 'loading' ? (\n              <Loading />\n            ) : (\n              <Button variant=\"outline\" startIcon={<RefreshCw />} onClick={onRefresh}>\n                {t('刷新二维码', 'Refresh code')}\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n      {downloadable && (\n        <Button size=\"sm\" variant=\"ghost\" startIcon={<Download />} onClick={download}>\n          {t('下载', 'Download')}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"names":["QRCode","value","size","color","backgroundColor","level","logo","logoSize","status","onRefresh","downloadable","fileName","className","props","t","useText","root","useRef","download","svg","clone","original","Array","element","index","getComputedStyle","address","URL","Blob","XMLSerializer","anchor","document","setTimeout","classes","Math","QRCodeSVG","undefined","Loading","Button","RefreshCw","Download"],"mappings":";;;;;;;;;;AAoBO,SAASA,OAAO,EACrBC,KAAK,EACLC,OAAO,GAAG,EACVC,QAAQ,wBAAwB,EAChCC,kBAAkB,2BAA2B,EAC7CC,QAAQ,GAAG,EACXC,IAAI,EACJC,WAAW,EAAE,EACbC,SAAS,QAAQ,EACjBC,SAAS,EACTC,eAAe,KAAK,EACpBC,WAAW,YAAY,EACvBC,SAAS,EACT,GAAGC,OACS;IACZ,MAAMC,IAAIC;IACV,MAAMC,OAAOC,OAAuB;IACpC,MAAMC,WAAW;QACf,MAAMC,MAAMH,KAAK,OAAO,EAAE,cAAc;QACxC,IAAI,CAACG,KAAK;QACV,MAAMC,QAAQD,IAAI,SAAS,CAAC;QAC5B,MAAME,WAAWC,MAAM,IAAI,CAACH,IAAI,gBAAgB,CAAC;QACjDC,MAAM,gBAAgB,CAAC,UAAU,OAAO,CAAC,CAACG,SAASC;YACjDD,QAAQ,YAAY,CAAC,QAAQE,iBAAiBJ,QAAQ,CAACG,MAAM,IAAIL,KAAK,IAAI;QAC5E;QACA,MAAMO,UAAUC,IAAI,eAAe,CACjC,IAAIC,KAAK;YAAC,IAAIC,gBAAgB,iBAAiB,CAACT;SAAO,EAAE;YAAE,MAAM;QAAgB;QAEnF,MAAMU,SAASC,SAAS,aAAa,CAAC;QACtCD,OAAO,IAAI,GAAGJ;QACdI,OAAO,QAAQ,GAAGnB;QAClBmB,OAAO,KAAK;QACZE,WAAW,IAAML,IAAI,eAAe,CAACD,UAAU;IACjD;IACA,OAAO,WAAP,GACE,KAAC;QAAK,GAAGb,KAAK;QAAE,KAAKG;QAAM,WAAWiB,QAAQ,gBAAgBrB;;0BAC5D,KAAC;gBACC,WAAU;gBACV,OAAO;oBAAE,OAAOsB,KAAK,GAAG,CAAC,IAAIhC;oBAAO,QAAQgC,KAAK,GAAG,CAAC,IAAIhC;gBAAM;;kCAE/D,IAACiC,WAASA;wBACR,OAAOlC;wBACP,MAAMiC,KAAK,GAAG,CAAC,IAAIhC;wBACnB,OAAOG;wBACP,YAAY;wBACZ,SAASF;wBACT,SAASC;wBACT,OAAOS,KAAK,CAAC,aAAa,IAAIC,EAAE,OAAO;wBACvC,eACER,OAAO;4BAAE,KAAKA;4BAAM,OAAOC;4BAAU,QAAQA;4BAAU,UAAU;wBAAK,IAAI6B;;oBAGlE,aAAX5B,UAAuB,WAAZ,GACV,IAAC;wBAAI,WAAU;kCACZA,AAAW,cAAXA,SAAuB,WAAZ,GACV,IAAC6B,SAAOA,CAAAA,KAAAA,WAAAA,GAER,IAACC,QAAMA;4BAAC,SAAQ;4BAAU,yBAAW,IAACC,WAASA,CAAAA;4BAAK,SAAS9B;sCAC1DK,EAAE,SAAS;;;;;YAMrBJ,gBAAgB,WAAhBA,GACC,IAAC4B,QAAMA;gBAAC,MAAK;gBAAK,SAAQ;gBAAQ,yBAAW,IAACE,UAAQA,CAAAA;gBAAK,SAAStB;0BACjEJ,EAAE,MAAM;;;;AAKnB"}

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

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

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

@@ -0,0 +1,117 @@
+"use client";
+import '../../../styles/components/radio.css';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { useFormField } from "../form/form.js";
+import { classes } from "../shared/classes.js";
+const radio_Radio = /*#__PURE__*/ forwardRef(function({ size = 'md', variant = 'plain', description, icon, extra, className, style, disabled: disabledProp, children, ...props }, ref) {
+    const field = useFormField();
+    const id = useId();
+    const disabled = disabledProp || field?.disabled;
+    return /*#__PURE__*/ jsxs("label", {
+        className: classes('leaf-radio', `leaf-radio--${size}`, `leaf-radio--${variant}`, null != description && 'leaf-radio--described', className),
+        style: style,
+        "data-disabled": disabled ? '' : void 0,
+        children: [
+            /*#__PURE__*/ jsxs("span", {
+                className: "leaf-radio__control",
+                children: [
+                    /*#__PURE__*/ jsx("input", {
+                        ...props,
+                        id: props.id ?? field?.id,
+                        required: props.required ?? field?.required,
+                        "aria-labelledby": props['aria-labelledby'] ?? (props['aria-label'] || null == children ? void 0 : `${id}-label`),
+                        "aria-describedby": [
+                            props['aria-describedby'],
+                            field?.descriptionId,
+                            null != description && `${id}-description`,
+                            null != extra && `${id}-extra`
+                        ].filter(Boolean).join(' ') || void 0,
+                        "aria-invalid": field?.error ? true : props['aria-invalid'],
+                        ref: ref,
+                        type: "radio",
+                        disabled: disabled,
+                        className: "leaf-radio__input"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "leaf-radio__mark"
+                    })
+                ]
+            }),
+            null != icon && /*#__PURE__*/ jsx("span", {
+                className: "leaf-radio__icon",
+                "aria-hidden": "true",
+                children: icon
+            }),
+            (null != children || null != description) && /*#__PURE__*/ jsxs("span", {
+                className: "leaf-radio__copy",
+                children: [
+                    null != children && /*#__PURE__*/ jsx("span", {
+                        id: `${id}-label`,
+                        className: "leaf-radio__label",
+                        children: children
+                    }),
+                    null != description && /*#__PURE__*/ jsx("span", {
+                        id: `${id}-description`,
+                        className: "leaf-radio__description",
+                        children: description
+                    })
+                ]
+            }),
+            null != extra && /*#__PURE__*/ jsx("span", {
+                id: `${id}-extra`,
+                className: "leaf-radio__extra",
+                children: extra
+            })
+        ]
+    });
+});
+radio_Radio.displayName = 'Radio';
+const radio_RadioGroup = /*#__PURE__*/ forwardRef(function({ options, value, defaultValue, name, label, size = 'md', variant = 'plain', direction = 'horizontal', required, onChange, disabled: disabledProp, className, ...props }, ref) {
+    const id = useId();
+    const field = useFormField();
+    const disabled = disabledProp || field?.disabled;
+    return /*#__PURE__*/ jsxs("fieldset", {
+        ...props,
+        ref: ref,
+        id: props.id ?? field?.id,
+        "aria-labelledby": props['aria-labelledby'] ?? (label ? void 0 : field?.labelId),
+        "aria-describedby": [
+            props['aria-describedby'],
+            field?.descriptionId
+        ].filter(Boolean).join(' ') || void 0,
+        "aria-invalid": field?.error ? true : props['aria-invalid'],
+        tabIndex: -1,
+        disabled: disabled,
+        className: classes('leaf-radio-group', `leaf-radio-group--${direction}`, `leaf-radio-group--${variant}`, className),
+        children: [
+            label && /*#__PURE__*/ jsx("legend", {
+                className: "leaf-radio-group__legend",
+                children: label
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "leaf-radio-group__options",
+                children: options.map((option)=>/*#__PURE__*/ jsx(radio_Radio, {
+                        id: `${props.id ?? field?.id ?? id}-${option.value}`,
+                        size: size,
+                        variant: 'card' === variant ? 'card' : 'plain',
+                        description: option.description,
+                        icon: option.icon,
+                        extra: option.extra,
+                        name: name ?? id,
+                        value: option.value,
+                        disabled: disabled || option.disabled,
+                        required: required ?? field?.required,
+                        checked: void 0 === value ? void 0 : value === option.value,
+                        defaultChecked: void 0 === value ? defaultValue === option.value : void 0,
+                        onChange: onChange,
+                        children: option.label
+                    }, option.value))
+            })
+        ]
+    });
+});
+radio_RadioGroup.displayName = 'RadioGroup';
+export { radio_Radio as Radio, radio_RadioGroup as RadioGroup };
+
+//# sourceMappingURL=radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio/radio.js","sources":["../../../../../src/radio/radio.tsx"],"sourcesContent":["import {\n  type ChangeEventHandler,\n  type FieldsetHTMLAttributes,\n  forwardRef,\n  type InputHTMLAttributes,\n  type ReactNode,\n  useId,\n} from 'react';\nimport { useFormField } from '../form/form';\nimport { classes } from '../shared/classes';\nimport type { ControlSize } from '../shared/types';\nexport interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\n  size?: ControlSize;\n  variant?: 'plain' | 'card';\n  description?: ReactNode;\n  icon?: ReactNode;\n  extra?: ReactNode;\n}\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    size = 'md',\n    variant = 'plain',\n    description,\n    icon,\n    extra,\n    className,\n    style,\n    disabled: disabledProp,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const field = useFormField();\n  const id = useId();\n  const disabled = disabledProp || field?.disabled;\n  return (\n    <label\n      className={classes(\n        'leaf-radio',\n        `leaf-radio--${size}`,\n        `leaf-radio--${variant}`,\n        description != null && 'leaf-radio--described',\n        className,\n      )}\n      style={style}\n      data-disabled={disabled ? '' : undefined}\n    >\n      <span className=\"leaf-radio__control\">\n        <input\n          {...props}\n          id={props.id ?? field?.id}\n          required={props.required ?? field?.required}\n          aria-labelledby={\n            props['aria-labelledby'] ??\n            (!props['aria-label'] && children != null ? `${id}-label` : undefined)\n          }\n          aria-describedby={\n            [\n              props['aria-describedby'],\n              field?.descriptionId,\n              description != null && `${id}-description`,\n              extra != null && `${id}-extra`,\n            ]\n              .filter(Boolean)\n              .join(' ') || undefined\n          }\n          aria-invalid={field?.error ? true : props['aria-invalid']}\n          ref={ref}\n          type=\"radio\"\n          disabled={disabled}\n          className=\"leaf-radio__input\"\n        />\n        <span className=\"leaf-radio__mark\" />\n      </span>\n      {icon != null && (\n        <span className=\"leaf-radio__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      {(children != null || description != null) && (\n        <span className=\"leaf-radio__copy\">\n          {children != null && (\n            <span id={`${id}-label`} className=\"leaf-radio__label\">\n              {children}\n            </span>\n          )}\n          {description != null && (\n            <span id={`${id}-description`} className=\"leaf-radio__description\">\n              {description}\n            </span>\n          )}\n        </span>\n      )}\n      {extra != null && (\n        <span id={`${id}-extra`} className=\"leaf-radio__extra\">\n          {extra}\n        </span>\n      )}\n    </label>\n  );\n});\nRadio.displayName = 'Radio';\nexport interface RadioOption {\n  label: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n  extra?: ReactNode;\n  value: string;\n  disabled?: boolean;\n}\nexport interface RadioGroupProps\n  extends Omit<\n    FieldsetHTMLAttributes<HTMLFieldSetElement>,\n    'onChange' | 'defaultValue' | 'children'\n  > {\n  options: readonly RadioOption[];\n  value?: string;\n  defaultValue?: string;\n  name?: string;\n  label?: ReactNode;\n  size?: ControlSize;\n  variant?: 'plain' | 'card' | 'list';\n  direction?: 'horizontal' | 'vertical';\n  required?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n}\nexport const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(function RadioGroup(\n  {\n    options,\n    value,\n    defaultValue,\n    name,\n    label,\n    size = 'md',\n    variant = 'plain',\n    direction = 'horizontal',\n    required,\n    onChange,\n    disabled: disabledProp,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const id = useId();\n  const field = useFormField();\n  const disabled = disabledProp || field?.disabled;\n  return (\n    <fieldset\n      {...props}\n      ref={ref}\n      id={props.id ?? field?.id}\n      aria-labelledby={props['aria-labelledby'] ?? (!label ? field?.labelId : undefined)}\n      aria-describedby={\n        [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined\n      }\n      aria-invalid={field?.error ? true : props['aria-invalid']}\n      tabIndex={-1}\n      disabled={disabled}\n      className={classes(\n        'leaf-radio-group',\n        `leaf-radio-group--${direction}`,\n        `leaf-radio-group--${variant}`,\n        className,\n      )}\n    >\n      {label && <legend className=\"leaf-radio-group__legend\">{label}</legend>}\n      <div className=\"leaf-radio-group__options\">\n        {options.map((option) => (\n          <Radio\n            key={option.value}\n            id={`${props.id ?? field?.id ?? id}-${option.value}`}\n            size={size}\n            variant={variant === 'card' ? 'card' : 'plain'}\n            description={option.description}\n            icon={option.icon}\n            extra={option.extra}\n            name={name ?? id}\n            value={option.value}\n            disabled={disabled || option.disabled}\n            required={required ?? field?.required}\n            checked={value === undefined ? undefined : value === option.value}\n            defaultChecked={value === undefined ? defaultValue === option.value : undefined}\n            onChange={onChange}\n          >\n            {option.label}\n          </Radio>\n        ))}\n      </div>\n    </fieldset>\n  );\n});\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["Radio","forwardRef","size","variant","description","icon","extra","className","style","disabledProp","children","props","ref","field","useFormField","id","useId","disabled","classes","undefined","Boolean","RadioGroup","options","value","defaultValue","name","label","direction","required","onChange","option"],"mappings":"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"}

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

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

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

@@ -0,0 +1,143 @@
+"use client";
+import '../../../styles/components/rate.css';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Star } from "lucide-react";
+import { useRef, useState } from "react";
+import { useLeafConfig } from "../config-provider/context.js";
+import { useFormField } from "../form/form.js";
+import { classes } from "../shared/classes.js";
+import { FormValue, useFieldValue } from "../shared/field.js";
+function Rate({ value, defaultValue = 0, onChange, count = 5, allowHalf = false, allowClear = true, disabled: disabledProp, readOnly = false, size = 'md', color, colorByValue = false, colors = [
+    '#ef5350',
+    '#f49b23',
+    '#ffc53d'
+], name, form, required: requiredProp, className, style, 'aria-label': label, ...props }) {
+    const { messages } = useLeafConfig();
+    const field = useFormField();
+    const disabled = disabledProp || field?.disabled;
+    const required = requiredProp ?? field?.required;
+    const maximum = Math.max(1, Math.min(20, Number.isFinite(count) ? Math.floor(count) : 5));
+    const step = allowHalf ? 0.5 : 1;
+    const normalize = (number)=>Math.min(maximum, Math.max(0, Number.isFinite(number) ? Math.round(number / step) * step : 0));
+    const trigger = useRef(null);
+    const root = useRef(null);
+    const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);
+    const selected = normalize(current);
+    const [hovered, setHovered] = useState();
+    const [focused, setFocused] = useState();
+    const displayed = disabled || readOnly ? selected : hovered ?? selected;
+    const activeColor = color ?? (colorByValue ? colors[displayed / maximum <= 0.4 ? 0 : displayed / maximum <= 0.7 ? 1 : 2] : void 0);
+    const values = Array.from({
+        length: maximum / step
+    }, (_, index)=>(index + 1) * step);
+    const focusValue = values.includes(focused ?? 0) ? focused : selected || step;
+    const choose = (next)=>{
+        if (disabled || readOnly) return;
+        const normalized = normalize(next);
+        setCurrent(normalized);
+        if (normalized !== selected) onChange?.(normalized);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        id: props.id ?? field?.id,
+        ref: root,
+        role: "radiogroup",
+        "aria-label": label ?? (field?.labelId ? void 0 : messages.rating),
+        "aria-labelledby": props['aria-labelledby'] ?? field?.labelId,
+        "aria-disabled": disabled || void 0,
+        "aria-readonly": readOnly || void 0,
+        "aria-required": required || void 0,
+        "aria-describedby": [
+            props['aria-describedby'],
+            field?.descriptionId
+        ].filter(Boolean).join(' ') || void 0,
+        className: classes('leaf-rate', `leaf-rate--${size}`, className),
+        style: {
+            ...activeColor ? {
+                '--leaf-rate-color': activeColor
+            } : {},
+            ...style
+        },
+        onPointerLeave: ()=>setHovered(void 0),
+        onBlur: (event)=>{
+            props.onBlur?.(event);
+            if (!event.currentTarget.contains(event.relatedTarget)) setFocused(void 0);
+        },
+        children: [
+            Array.from({
+                length: maximum
+            }, (_, index)=>/*#__PURE__*/ jsxs("span", {
+                    className: "leaf-rate__star",
+                    children: [
+                        /*#__PURE__*/ jsx(Star, {
+                            className: "leaf-rate__empty",
+                            "aria-hidden": "true"
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            className: "leaf-rate__fill",
+                            "aria-hidden": "true",
+                            style: {
+                                width: `${100 * Math.max(0, Math.min(1, displayed - index))}%`
+                            },
+                            children: /*#__PURE__*/ jsx(Star, {})
+                        }),
+                        (allowHalf ? [
+                            index + 0.5,
+                            index + 1
+                        ] : [
+                            index + 1
+                        ]).map((number)=>/*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                ref: number === step ? trigger : void 0,
+                                role: "radio",
+                                "aria-checked": number === selected,
+                                "aria-label": `${number} / ${maximum}`,
+                                disabled: disabled,
+                                "aria-disabled": readOnly || void 0,
+                                className: "leaf-rate__option",
+                                tabIndex: number === focusValue ? 0 : -1,
+                                onFocus: ()=>setFocused(number),
+                                onPointerEnter: ()=>{
+                                    if (!disabled && !readOnly) setHovered(number);
+                                },
+                                onClick: ()=>choose(allowClear && number === selected ? 0 : number),
+                                onKeyDown: (event)=>{
+                                    if (disabled || readOnly) return;
+                                    let next;
+                                    if ('Home' === event.key) next = step;
+                                    else if ('End' === event.key) next = maximum;
+                                    else if ([
+                                        'ArrowRight',
+                                        'ArrowUp',
+                                        'ArrowLeft',
+                                        'ArrowDown'
+                                    ].includes(event.key)) next = Math.max(step, Math.min(maximum, number + ([
+                                        'ArrowRight',
+                                        'ArrowUp'
+                                    ].includes(event.key) ? step : -step)));
+                                    else if (('Delete' === event.key || 'Backspace' === event.key) && allowClear) next = 0;
+                                    if (void 0 !== next) {
+                                        event.preventDefault();
+                                        choose(next);
+                                        setHovered(void 0);
+                                        const target = root.current?.querySelector(`[aria-label='${next || step} / ${maximum}']`);
+                                        target?.focus();
+                                    }
+                                }
+                            }, number))
+                    ]
+                }, `star-${index}`)),
+            /*#__PURE__*/ jsx(FormValue, {
+                name: name,
+                form: form,
+                value: selected ? String(selected) : '',
+                disabled: disabled,
+                required: required,
+                triggerRef: trigger
+            })
+        ]
+    });
+}
+export { Rate };
+
+//# sourceMappingURL=rate.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rate/rate.js","sources":["../../../../../src/rate/rate.tsx"],"sourcesContent":["import { Star } from 'lucide-react';\nimport { type HTMLAttributes, useRef, useState } from 'react';\nimport { useLeafConfig } from '../config-provider/context';\nimport { useFormField } from '../form/form';\nimport { classes } from '../shared/classes';\nimport { FormValue, useFieldValue } from '../shared/field';\nimport type { ControlSize } from '../shared/types';\n\nexport interface RateProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number) => void;\n  count?: number;\n  allowHalf?: boolean;\n  allowClear?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  size?: ControlSize;\n  color?: string;\n  colorByValue?: boolean;\n  colors?: readonly [string, string, string];\n  name?: string;\n  form?: string;\n  required?: boolean;\n}\nexport function Rate({\n  value,\n  defaultValue = 0,\n  onChange,\n  count = 5,\n  allowHalf = false,\n  allowClear = true,\n  disabled: disabledProp,\n  readOnly = false,\n  size = 'md',\n  color,\n  colorByValue = false,\n  colors = ['#ef5350', '#f49b23', '#ffc53d'],\n  name,\n  form,\n  required: requiredProp,\n  className,\n  style,\n  'aria-label': label,\n  ...props\n}: RateProps) {\n  const { messages } = useLeafConfig();\n  const field = useFormField();\n  const disabled = disabledProp || field?.disabled;\n  const required = requiredProp ?? field?.required;\n  const maximum = Math.max(1, Math.min(20, Number.isFinite(count) ? Math.floor(count) : 5));\n  const step = allowHalf ? 0.5 : 1;\n  const normalize = (number: number) =>\n    Math.min(maximum, Math.max(0, Number.isFinite(number) ? Math.round(number / step) * step : 0));\n  const trigger = useRef<HTMLButtonElement>(null);\n  const root = useRef<HTMLDivElement>(null);\n  const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);\n  const selected = normalize(current);\n  const [hovered, setHovered] = useState<number>();\n  const [focused, setFocused] = useState<number>();\n  const displayed = disabled || readOnly ? selected : (hovered ?? selected);\n  const activeColor =\n    color ??\n    (colorByValue\n      ? colors[displayed / maximum <= 0.4 ? 0 : displayed / maximum <= 0.7 ? 1 : 2]\n      : undefined);\n  const values = Array.from({ length: maximum / step }, (_, index) => (index + 1) * step);\n  const focusValue = values.includes(focused ?? 0) ? focused : selected || step;\n  const choose = (next: number) => {\n    if (disabled || readOnly) return;\n    const normalized = normalize(next);\n    setCurrent(normalized);\n    if (normalized !== selected) onChange?.(normalized);\n  };\n  return (\n    <div\n      {...props}\n      id={props.id ?? field?.id}\n      ref={root}\n      role=\"radiogroup\"\n      aria-label={label ?? (field?.labelId ? undefined : messages.rating)}\n      aria-labelledby={props['aria-labelledby'] ?? field?.labelId}\n      aria-disabled={disabled || undefined}\n      aria-readonly={readOnly || undefined}\n      aria-required={required || undefined}\n      aria-describedby={\n        [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined\n      }\n      className={classes('leaf-rate', `leaf-rate--${size}`, className)}\n      style={{ ...(activeColor ? { '--leaf-rate-color': activeColor } : {}), ...style }}\n      onPointerLeave={() => setHovered(undefined)}\n      onBlur={(event) => {\n        props.onBlur?.(event);\n        if (!event.currentTarget.contains(event.relatedTarget)) setFocused(undefined);\n      }}\n    >\n      {Array.from({ length: maximum }, (_, index) => (\n        // biome-ignore lint/suspicious/noArrayIndexKey: Each star has a fixed numeric position in the rating scale.\n        <span className=\"leaf-rate__star\" key={`star-${index}`}>\n          <Star className=\"leaf-rate__empty\" aria-hidden=\"true\" />\n          <span\n            className=\"leaf-rate__fill\"\n            aria-hidden=\"true\"\n            style={{ width: `${Math.max(0, Math.min(1, displayed - index)) * 100}%` }}\n          >\n            <Star />\n          </span>\n          {(allowHalf ? [index + 0.5, index + 1] : [index + 1]).map((number) => (\n            // biome-ignore lint/a11y/useSemanticElements: Custom rating radios support half values, clearing and read-only state with one roving tab stop.\n            <button\n              type=\"button\"\n              key={number}\n              ref={number === step ? trigger : undefined}\n              role=\"radio\"\n              aria-checked={number === selected}\n              aria-label={`${number} / ${maximum}`}\n              disabled={disabled}\n              aria-disabled={readOnly || undefined}\n              className=\"leaf-rate__option\"\n              tabIndex={number === focusValue ? 0 : -1}\n              onFocus={() => setFocused(number)}\n              onPointerEnter={() => {\n                if (!disabled && !readOnly) setHovered(number);\n              }}\n              onClick={() => choose(allowClear && number === selected ? 0 : number)}\n              onKeyDown={(event) => {\n                if (disabled || readOnly) return;\n                let next: number | undefined;\n                if (event.key === 'Home') next = step;\n                else if (event.key === 'End') next = maximum;\n                else if (['ArrowRight', 'ArrowUp', 'ArrowLeft', 'ArrowDown'].includes(event.key))\n                  next = Math.max(\n                    step,\n                    Math.min(\n                      maximum,\n                      number + (['ArrowRight', 'ArrowUp'].includes(event.key) ? step : -step),\n                    ),\n                  );\n                else if ((event.key === 'Delete' || event.key === 'Backspace') && allowClear)\n                  next = 0;\n                if (next !== undefined) {\n                  event.preventDefault();\n                  choose(next);\n                  setHovered(undefined);\n                  const target = root.current?.querySelector<HTMLButtonElement>(\n                    `[aria-label='${next || step} / ${maximum}']`,\n                  );\n                  target?.focus();\n                }\n              }}\n            />\n          ))}\n        </span>\n      ))}\n      <FormValue\n        name={name}\n        form={form}\n        value={selected ? String(selected) : ''}\n        disabled={disabled}\n        required={required}\n        triggerRef={trigger}\n      />\n    </div>\n  );\n}\n"],"names":["Rate","value","defaultValue","onChange","count","allowHalf","allowClear","disabledProp","readOnly","size","color","colorByValue","colors","name","form","requiredProp","className","style","label","props","messages","useLeafConfig","field","useFormField","disabled","required","maximum","Math","Number","step","normalize","number","trigger","useRef","root","current","setCurrent","useFieldValue","selected","hovered","setHovered","useState","focused","setFocused","displayed","activeColor","undefined","values","Array","_","index","focusValue","choose","next","normalized","Boolean","classes","event","Star","target","FormValue","String"],"mappings":"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"}

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

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

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

@@ -0,0 +1,53 @@
+"use client";
+import '../../../styles/components/result.css';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Inbox, Info, TriangleAlert, X } from "lucide-react";
+import { useRef } from "react";
+import { useLeafConfig } from "../config-provider/context.js";
+import { classes } from "../shared/classes.js";
+import { useContentTransition } from "../shared/presence.js";
+const icons = {
+    empty: Inbox,
+    success: Check,
+    warning: TriangleAlert,
+    error: X,
+    info: Info
+};
+function Result({ status = 'empty', title, description, icon, extra, size = 'md', children, className, ...props }) {
+    const { messages } = useLeafConfig();
+    const root = useRef(null);
+    useContentTransition(root, status);
+    const Icon = icons[status];
+    const heading = void 0 !== title ? title : 'empty' === status ? messages.noData : messages['success' === status ? 'resultSuccess' : 'warning' === status ? 'resultWarning' : 'error' === status ? 'resultError' : 'resultInfo'];
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        ref: root,
+        className: classes('leaf-result', `leaf-result--${status}`, `leaf-result--${size}`, className),
+        children: [
+            null !== icon && /*#__PURE__*/ jsx("div", {
+                className: "leaf-result__icon",
+                "aria-hidden": "true",
+                children: icon ?? /*#__PURE__*/ jsx(Icon, {})
+            }, status),
+            null !== heading && /*#__PURE__*/ jsx("div", {
+                className: "leaf-result__title",
+                children: heading
+            }),
+            null != description && /*#__PURE__*/ jsx("div", {
+                className: "leaf-result__description",
+                children: description
+            }),
+            null != children && /*#__PURE__*/ jsx("div", {
+                className: "leaf-result__content",
+                children: children
+            }),
+            null != extra && /*#__PURE__*/ jsx("div", {
+                className: "leaf-result__extra",
+                children: extra
+            })
+        ]
+    });
+}
+export { Result };
+
+//# sourceMappingURL=result.js.map