@fangxinyan/lumina 0.5.1 → 0.6.1

package/dist/chunk-5JSDQ6QQ.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+require('./tokens-BIIUTPKN.css');
+require('./shared-NJHRNLRH.css');
+require('./Divider-OEE4Q2KS.css');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/components/Divider/Divider.tsx
+var Divider = React__namespace.forwardRef(({
+  direction = "horizontal",
+  label,
+  sunken,
+  dashed,
+  orientation = "center",
+  className = "",
+  ...rest
+}, ref) => {
+  const cls = [
+    "divider",
+    direction,
+    sunken && "sunken",
+    dashed && "dashed",
+    label && direction === "horizontal" && `orient-${orientation}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cls, role: "separator", ...rest, children: label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "divider-label", children: label }) });
+});
+Divider.displayName = "Divider";
+
+exports.Divider = Divider;

package/dist/{chunk-UXABXEWT.js → chunk-5M26OVVY.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-X3JG3IR6.js';
+import { Icon } from './chunk-NJ6B22YJ.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Image-4MN34O6P.css';
@@ -6,7 +6,7 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-var Image = ({
+var Image = React.forwardRef(({
   src,
   alt,
   width = 200,
@@ -14,8 +14,10 @@ var Image = ({
   preview = true,
   hover = true,
   placeholder,
-  className = ""
-}) => {
+  className = "",
+  style,
+  ...rest
+}, ref) => {
   const [loaded, setLoaded] = React.useState(false);
   const [err, setErr] = React.useState(false);
   const [open, setOpen] = React.useState(false);
@@ -24,9 +26,11 @@ var Image = ({
     /* @__PURE__ */ jsx(
       "div",
       {
+        ref,
         className: `n-image ${hover ? "hover" : ""} ${canPreview ? "clickable" : ""} ${className}`,
-        style: { width },
+        style: { width, ...style },
         onClick: () => canPreview && setOpen(true),
+        ...rest,
         children: /* @__PURE__ */ jsxs("div", { className: "n-image-frame", style: { width: "100%", height }, children: [
           !err && src && /* @__PURE__ */ jsx("img", { src, alt, onLoad: () => setLoaded(true), onError: () => setErr(true) }),
           /* @__PURE__ */ jsx("div", { className: `n-image-placeholder ${loaded && !err ? "loaded" : ""}`, children: placeholder ?? /* @__PURE__ */ jsx(Icon, { name: "image", size: 28 }) }),
@@ -57,25 +61,30 @@ var Image = ({
       document.body
     )
   ] });
-};
-var ImageGrid = ({
+});
+Image.displayName = "Image";
+var ImageGrid = React.forwardRef(({
   images,
   columns,
   itemHeight = 130,
-  className = ""
-}) => /* @__PURE__ */ jsx(
+  className = "",
+  style,
+  ...rest
+}, ref) => /* @__PURE__ */ jsx(
   "div",
   {
+    ref,
     className,
     style: {
       display: "grid",
       gap: 14,
-      gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : "repeat(auto-fill, minmax(160px, 1fr))"
+      gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : "repeat(auto-fill, minmax(160px, 1fr))",
+      ...style
     },
+    ...rest,
     children: images.map((img, i) => /* @__PURE__ */ jsx(Image, { src: img.src, alt: img.alt, width: "100%", height: itemHeight }, i))
   }
-);
+));
+ImageGrid.displayName = "ImageGrid";
 
 export { Image, ImageGrid };
-//# sourceMappingURL=chunk-UXABXEWT.js.map
-//# sourceMappingURL=chunk-UXABXEWT.js.map

package/dist/{chunk-U7TAQLPN.cjs → chunk-62GU4OHH.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk3KQKEE5O_cjs = require('./chunk-3KQKEE5O.cjs');
+var chunk2MNAZRWE_cjs = require('./chunk-2MNAZRWE.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./Button-SDQD25AG.css');
@@ -59,9 +59,9 @@ var Button = React__namespace.forwardRef(
         disabled: disabled || loading,
         ...rest,
         children: [
-          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "spinner", "aria-hidden": true }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: icon, size: 15 }) : null,
+          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "spinner", "aria-hidden": true }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: icon, size: 15 }) : null,
           children,
-          trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: trailingIcon, size: 15 })
+          trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: trailingIcon, size: 15 })
         ]
       }
     );
@@ -77,7 +77,7 @@ var IconButton = React__namespace.forwardRef(
       "aria-label": tip || rest["aria-label"] || icon,
       title: tip,
       ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: icon, size: 16 })
+      children: /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: icon, size: 16 })
     }
   )
 );
@@ -85,5 +85,3 @@ IconButton.displayName = "IconButton";
 
 exports.Button = Button;
 exports.IconButton = IconButton;
-//# sourceMappingURL=chunk-U7TAQLPN.cjs.map
-//# sourceMappingURL=chunk-U7TAQLPN.cjs.map

package/dist/{chunk-5PREWYTB.js → chunk-65FIH5A3.js}

@@ -1,20 +1,31 @@
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
-import './Progress-IXRSO5TW.css';
+import './Progress-CHV7DN6Y.css';
+import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Progress/Progress.tsx
-var Progress = ({
+var Progress = React.forwardRef(({
   value,
   max = 100,
   label,
   showValue,
   tone = "accent",
+  color,
   size = "md",
-  className = ""
-}) => {
+  className = "",
+  style,
+  ...rest
+}, ref) => {
   const pct = Math.max(0, Math.min(100, value / max * 100));
-  return /* @__PURE__ */ jsxs("div", { className: `progress ${size} ${tone} ${className}`, children: [
+  const rootStyle = {
+    ...color ? {
+      ["--progress-fill"]: color,
+      ["--progress-fill-glow"]: `color-mix(in oklch, ${color} 35%, transparent)`
+    } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs("div", { ref, className: `progress ${size} ${tone} ${className}`, style: rootStyle, ...rest, children: [
     (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "progress-label", children: [
       label ? /* @__PURE__ */ jsx("span", { children: label }) : /* @__PURE__ */ jsx("span", {}),
       showValue && /* @__PURE__ */ jsxs("span", { className: "v", children: [
@@ -24,26 +35,7 @@ var Progress = ({
     ] }),
     /* @__PURE__ */ jsx("div", { className: "progress-track", children: /* @__PURE__ */ jsx("div", { className: "progress-bar", style: { width: `${pct}%` } }) })
   ] });
-};
-var Ring = ({
-  value,
-  max = 100,
-  size = 72,
-  tone = "accent",
-  children,
-  className = ""
-}) => {
-  const pct = Math.max(0, Math.min(100, value / max * 100));
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `ring ${tone} ${className}`,
-      style: { ["--size"]: `${size}px`, ["--val"]: pct },
-      children: /* @__PURE__ */ jsx("span", { className: "ring-label", children: children ?? `${Math.round(pct)}%` })
-    }
-  );
-};
+});
+Progress.displayName = "Progress";
 
-export { Progress, Ring };
-//# sourceMappingURL=chunk-5PREWYTB.js.map
-//# sourceMappingURL=chunk-5PREWYTB.js.map
+export { Progress };

package/dist/{chunk-OWNVDXRQ.js → chunk-6BWELOCT.js}

@@ -1,42 +1,53 @@
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './StatusBar-CDS2GPSI.css';
+import * as React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/StatusBar/StatusBar.tsx
-var StatusBarItem = ({
+var StatusBarItem = React.forwardRef(({
   icon,
   tone = "default",
   onClick,
   className = "",
   children,
   ...rest
-}) => {
+}, ref) => {
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon && /* @__PURE__ */ jsx("span", { className: "statusbar-item-icon", children: icon }),
     children != null && /* @__PURE__ */ jsx("span", { className: "statusbar-item-label", children })
   ] });
   const cls = `statusbar-item tone-${tone} ${onClick ? "clickable" : ""} ${className}`;
   if (onClick) {
-    return /* @__PURE__ */ jsx("button", { type: "button", className: cls, onClick, children: content });
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cls,
+        onClick,
+        children: content
+      }
+    );
   }
-  return /* @__PURE__ */ jsx("div", { className: cls, ...rest, children: content });
-};
-var StatusBar = ({
+  return /* @__PURE__ */ jsx("div", { ref, className: cls, ...rest, children: content });
+});
+StatusBarItem.displayName = "StatusBarItem";
+var StatusBarBase = React.forwardRef(({
   left,
   center,
   right,
   className = "",
   children,
   ...rest
-}) => /* @__PURE__ */ jsxs("div", { className: `statusbar ${className}`, role: "status", ...rest, children: [
+}, ref) => /* @__PURE__ */ jsxs("div", { ref, className: `statusbar ${className}`, role: "status", ...rest, children: [
   left != null && /* @__PURE__ */ jsx("div", { className: "statusbar-section left", children: left }),
   center != null && /* @__PURE__ */ jsx("div", { className: "statusbar-section center", children: center }),
   children,
   right != null && /* @__PURE__ */ jsx("div", { className: "statusbar-section right", children: right })
-] });
+] }));
+StatusBarBase.displayName = "StatusBar";
+var StatusBar = StatusBarBase;
 StatusBar.Item = StatusBarItem;
 
 export { StatusBar, StatusBarItem };
-//# sourceMappingURL=chunk-OWNVDXRQ.js.map
-//# sourceMappingURL=chunk-OWNVDXRQ.js.map

package/dist/{chunk-BIXW4ZYW.cjs → chunk-6ODY6MGL.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk3KQKEE5O_cjs = require('./chunk-3KQKEE5O.cjs');
+var chunk2MNAZRWE_cjs = require('./chunk-2MNAZRWE.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./Typography-NKPWTJCV.css');
@@ -74,8 +74,8 @@ var CopyAction = ({ config, fallbackText }) => {
     timerRef.current = window.setTimeout(() => setCopied(false), 2400);
   };
   const [defIcon, doneIcon] = config.icon ?? [
-    /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "copy", size: 12 }, "def"),
-    /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "check", size: 12 }, "done")
+    /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "copy", size: 12 }, "def"),
+    /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "check", size: 12 }, "done")
   ];
   const tipText = config.tooltips === false ? void 0 : Array.isArray(config.tooltips) ? copied ? config.tooltips[1] : config.tooltips[0] : copied ? "\u5DF2\u590D\u5236" : "\u590D\u5236";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -213,7 +213,7 @@ function useTypographyBody(props) {
           }
         },
         className: "typo-action typo-edit",
-        children: editConf.icon ?? /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "edit", size: 12 })
+        children: editConf.icon ?? /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "edit", size: 12 })
       }
     );
   }
@@ -473,7 +473,7 @@ var Link = React__namespace.forwardRef(
         ...anchorRest,
         children: [
           body.inner,
-          external && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-link-ext", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: externalIcon, size: 12 }) }),
+          external && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-link-ext", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: externalIcon, size: 12 }) }),
           body.expandNode,
           body.copyNode,
           body.editIconNode
@@ -506,5 +506,3 @@ exports.Paragraph = Paragraph;
 exports.Text = Text;
 exports.Title = Title;
 exports.Typography = Typography;
-//# sourceMappingURL=chunk-BIXW4ZYW.cjs.map
-//# sourceMappingURL=chunk-BIXW4ZYW.cjs.map

package/dist/{chunk-TMRSI543.js → chunk-6Y5WRCPW.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-X3JG3IR6.js';
+import { Icon } from './chunk-NJ6B22YJ.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Calendar-LHZELUDL.css';
@@ -6,15 +6,16 @@ import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var WEEKDAYS = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
-var Calendar = ({
+var Calendar = React.forwardRef(({
   value,
   defaultValue,
   onChange,
   min,
   max,
   disabledDate,
-  className = ""
-}) => {
+  className = "",
+  ...rest
+}, ref) => {
   const [inner, setInner] = React.useState(defaultValue ?? /* @__PURE__ */ new Date());
   const isControlled = value !== void 0;
   const sel = isControlled ? value : inner;
@@ -34,7 +35,7 @@ var Calendar = ({
     if (!isControlled) setInner(next);
     onChange?.(next);
   };
-  return /* @__PURE__ */ jsxs("div", { className: `calendar ${className}`, children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: `calendar ${className}`, ...rest, children: [
     /* @__PURE__ */ jsxs("div", { className: "calendar-head", children: [
       /* @__PURE__ */ jsx(
         "button",
@@ -83,8 +84,7 @@ var Calendar = ({
       })
     ] })
   ] });
-};
+});
+Calendar.displayName = "Calendar";
 
 export { Calendar };
-//# sourceMappingURL=chunk-TMRSI543.js.map
-//# sourceMappingURL=chunk-TMRSI543.js.map

package/dist/chunk-6YQTMI55.js

@@ -0,0 +1,27 @@
+import './tokens-BIIUTPKN.css';
+import './shared-NJHRNLRH.css';
+import './List-W5BW4D2P.css';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/List/List.tsx
+var List = React.forwardRef(({ items, dividers = true, className = "", style, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "ul",
+  {
+    ref,
+    className: `list ${dividers ? "with-dividers" : ""} ${className}`,
+    style: { listStyle: "none", margin: 0, ...style },
+    ...rest,
+    children: items.map((it) => /* @__PURE__ */ jsxs("li", { className: `list-item ${it.onClick ? "clickable" : ""}`, onClick: it.onClick, children: [
+      it.avatar && /* @__PURE__ */ jsx("div", { className: "list-item-avatar", children: it.avatar }),
+      /* @__PURE__ */ jsxs("div", { className: "list-item-meta", children: [
+        it.title && /* @__PURE__ */ jsx("div", { className: "list-item-title", children: it.title }),
+        it.description && /* @__PURE__ */ jsx("div", { className: "list-item-desc", children: it.description })
+      ] }),
+      it.actions && /* @__PURE__ */ jsx("div", { className: "list-item-actions", children: it.actions })
+    ] }, it.key))
+  }
+));
+List.displayName = "List";
+
+export { List };

package/dist/{chunk-3YYOYDKI.js → chunk-73RQBWWW.js}

@@ -1,5 +1,5 @@
-import { useFloating } from './chunk-ANAQER3T.js';
-import { Input } from './chunk-GB5NAXBP.js';
+import { useFloating } from './chunk-DUFRASGO.js';
+import { Input } from './chunk-DPNDHNKK.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './AutoComplete-P5KZMZO5.css';
@@ -31,7 +31,10 @@ var AutoComplete = React.forwardRef(
     dropdownClassName = "",
     matchTriggerWidth = true,
     id,
-    name
+    name,
+    onFocus,
+    onKeyDown,
+    ...rest
   }, ref) => {
     const [inner, setInner] = React.useState(defaultValue ?? "");
     const isControlled = value !== void 0;
@@ -146,6 +149,7 @@ var AutoComplete = React.forwardRef(
         Input,
         {
           ref,
+          ...rest,
           id,
           name,
           size,
@@ -155,8 +159,14 @@ var AutoComplete = React.forwardRef(
           allowClear,
           autoFocus,
           onChange: handleInput,
-          onFocus: () => !disabled && setOpen(true),
-          onKeyDown: onKey
+          onFocus: (event) => {
+            onFocus?.(event);
+            if (!disabled) setOpen(true);
+          },
+          onKeyDown: (event) => {
+            onKeyDown?.(event);
+            onKey(event);
+          }
         }
       ),
       panel
@@ -166,5 +176,3 @@ var AutoComplete = React.forwardRef(
 AutoComplete.displayName = "AutoComplete";
 
 export { AutoComplete };
-//# sourceMappingURL=chunk-3YYOYDKI.js.map
-//# sourceMappingURL=chunk-3YYOYDKI.js.map

package/dist/{chunk-33TIL25B.cjs → chunk-7ABFUIOB.cjs}

@@ -3,31 +3,54 @@
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./AppShell-RCALXUCZ.css');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 // src/components/AppShell/AppShell.tsx
-var WindowControls = ({
+var WindowControls = React__namespace.forwardRef(({
   platform = "mac",
   onMinimize,
   onMaximize,
   onClose,
-  className = ""
-}) => {
+  className = "",
+  ...rest
+}, ref) => {
   const noDragStyle = { WebkitAppRegion: "no-drag" };
   if (platform === "windows") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `win-controls windows ${className}`, style: noDragStyle, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: `win-controls windows ${className}`, style: noDragStyle, ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "win-btn minimize", onClick: onMinimize, "aria-label": "Minimize", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 5h8", stroke: "currentColor", strokeWidth: "1" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "win-btn maximize", onClick: onMaximize, "aria-label": "Maximize", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "1", width: "8", height: "8", stroke: "currentColor", strokeWidth: "1" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "win-btn close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 1l8 8M9 1l-8 8", stroke: "currentColor", strokeWidth: "1" }) }) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `win-controls mac ${className}`, style: noDragStyle, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: `win-controls mac ${className}`, style: noDragStyle, ...rest, children: [
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "win-btn close", onClick: onClose, "aria-label": "Close" }),
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "win-btn minimize", onClick: onMinimize, "aria-label": "Minimize" }),
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "win-btn maximize", onClick: onMaximize, "aria-label": "Maximize" })
   ] });
-};
-var TitleBar = ({
+});
+WindowControls.displayName = "WindowControls";
+var TitleBar = React__namespace.forwardRef(({
   title,
   platform = "mac",
   onMinimize,
@@ -36,27 +59,30 @@ var TitleBar = ({
   center,
   actions,
   draggable = true,
-  className = ""
-}) => {
+  className = "",
+  ...rest
+}, ref) => {
   const dragStyle = draggable ? { WebkitAppRegion: "drag" } : void 0;
   const noDragStyle = { WebkitAppRegion: "no-drag" };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `titlebar ${platform} ${className}`, style: dragStyle, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: `titlebar ${platform} ${className}`, style: dragStyle, ...rest, children: [
     platform === "mac" && /* @__PURE__ */ jsxRuntime.jsx(WindowControls, { platform: "mac", onMinimize, onMaximize, onClose }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "titlebar-title", children: title }),
     center && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "titlebar-center", style: noDragStyle, children: center }),
     actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "titlebar-actions", style: noDragStyle, children: actions }),
     platform === "windows" && /* @__PURE__ */ jsxRuntime.jsx(WindowControls, { platform: "windows", onMinimize, onMaximize, onClose })
   ] });
-};
-var Sidebar = ({
+});
+TitleBar.displayName = "TitleBar";
+var Sidebar = React__namespace.forwardRef(({
   items,
   activeKey,
   onSelect,
   collapsed,
   header,
   footer,
-  className = ""
-}) => /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: `sidebar ${collapsed ? "collapsed" : ""} ${className}`, children: [
+  className = "",
+  ...rest
+}, ref) => /* @__PURE__ */ jsxRuntime.jsxs("aside", { ref, className: `sidebar ${collapsed ? "collapsed" : ""} ${className}`, ...rest, children: [
   header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sidebar-header", children: header }),
   /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "sidebar-nav", children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
@@ -73,18 +99,18 @@ var Sidebar = ({
     it.key
   )) }),
   footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sidebar-footer", children: footer })
-] });
-var AppShell = ({ sidebar, titleBar, children, className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `app-shell ${className}`, children: [
+] }));
+Sidebar.displayName = "Sidebar";
+var AppShell = React__namespace.forwardRef(({ sidebar, titleBar, children, className = "", ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: `app-shell ${className}`, ...rest, children: [
   titleBar,
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "app-shell-body", children: [
     sidebar,
     /* @__PURE__ */ jsxRuntime.jsx("main", { className: "app-shell-main", children })
   ] })
-] });
+] }));
+AppShell.displayName = "AppShell";
 
 exports.AppShell = AppShell;
 exports.Sidebar = Sidebar;
 exports.TitleBar = TitleBar;
 exports.WindowControls = WindowControls;
-//# sourceMappingURL=chunk-33TIL25B.cjs.map
-//# sourceMappingURL=chunk-33TIL25B.cjs.map

package/dist/{chunk-2TZ2R7L2.js → chunk-7JN6FJ55.js}

@@ -231,5 +231,3 @@ var Slider = React.forwardRef(
 );
 
 export { Slider };
-//# sourceMappingURL=chunk-2TZ2R7L2.js.map
-//# sourceMappingURL=chunk-2TZ2R7L2.js.map

package/dist/chunk-7PNJI5UE.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+require('./tokens-BIIUTPKN.css');
+require('./shared-NJHRNLRH.css');
+require('./List-W5BW4D2P.css');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/components/List/List.tsx
+var List = React__namespace.forwardRef(({ items, dividers = true, className = "", style, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "ul",
+  {
+    ref,
+    className: `list ${dividers ? "with-dividers" : ""} ${className}`,
+    style: { listStyle: "none", margin: 0, ...style },
+    ...rest,
+    children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: `list-item ${it.onClick ? "clickable" : ""}`, onClick: it.onClick, children: [
+      it.avatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "list-item-avatar", children: it.avatar }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "list-item-meta", children: [
+        it.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "list-item-title", children: it.title }),
+        it.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "list-item-desc", children: it.description })
+      ] }),
+      it.actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "list-item-actions", children: it.actions })
+    ] }, it.key))
+  }
+));
+List.displayName = "List";
+
+exports.List = List;