twico-ui 1.0.2 → 1.2.0

package/README.md

@@ -164,10 +164,22 @@ const brand = indigo[500]; // "#6366f1"
 
 Each hue is an object keyed by shade — a full `50`–`950` ramp (`50, 100, 200, … 900, 950`). These are static values — unlike the `--color-*` aliases, they do not flip in dark mode.
 
+### Icons
+
+Components take icons as React nodes (`leftIcon`, `icon`, …) — bring any icon set, or inline SVG. For convenience, **`twico-ui/icons`** re-exports the full [Lucide](https://lucide.dev) set (the icon language Twico UI is designed around):
+
+```jsx
+import { Home, Search } from "twico-ui/icons";
+
+<Button leftIcon={<Home size={16} />}>Home</Button>
+```
+
+This subpath needs the **optional peer** `lucide-react` (`npm install lucide-react`) and is tree-shakeable; the core `twico-ui` package stays zero-dependency.
+
 ## Components
 
 **Buttons & actions:** Button, IconButton
-**Layout:** Box, Stack, Grid, Container
+**Layout:** AppShell, Box, Stack, Grid, Container, Divider
 **Typography:** Heading, Text, Code
 **Inputs:** Input, Textarea, Currency, CurrencyField, Select, MultiSelect, Combobox, Checkbox, Radio, Switch, Slider, Rating, FileUpload, DatePicker, DateRangePicker, ColorPicker
 **Data display:** Card, Avatar, AvatarMenu, Badge, Tag, Stat, List, Timeline, Chart, Table, Pagination, Datatable, Kanban

package/dist/icons.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var lucideReact = require('lucide-react');
+
+
+
+Object.keys(lucideReact).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return lucideReact[k]; }
+	});
+});
+//# sourceMappingURL=icons.cjs.map
+//# sourceMappingURL=icons.cjs.map

package/dist/icons.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"icons.cjs","sourcesContent":[]}

package/dist/icons.d.cts

@@ -0,0 +1 @@
+export * from 'lucide-react';

package/dist/icons.d.ts

@@ -0,0 +1 @@
+export * from 'lucide-react';

package/dist/icons.mjs

@@ -0,0 +1,3 @@
+export * from 'lucide-react';
+//# sourceMappingURL=icons.mjs.map
+//# sourceMappingURL=icons.mjs.map

package/dist/icons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"icons.mjs","sourcesContent":[]}

package/dist/index.cjs

@@ -8691,6 +8691,135 @@ function Rating({
     }
   );
 }
+var TOOLTIP_CSS = `
+.twc-tooltip-wrap { display: inline-flex; }
+.twc-tooltip {
+  position: fixed; z-index: var(--z-tooltip); pointer-events: none;
+  padding: 6px 10px; border-radius: var(--radius-md);
+  background: var(--color-text); color: var(--color-surface);
+  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-medium);
+  line-height: 1.3; white-space: nowrap; box-shadow: var(--shadow-md);
+  opacity: 0; transform: scale(0.9); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring);
+}
+.twc-tooltip[data-show="true"] { opacity: 1; transform: scale(1); }
+.twc-tooltip[data-place="top"]    { transform-origin: bottom center; translate: -50% 0; }
+.twc-tooltip[data-place="bottom"] { transform-origin: top center; translate: -50% 0; }
+.twc-tooltip[data-place="left"]   { transform-origin: right center; translate: 0 -50%; }
+.twc-tooltip[data-place="right"]  { transform-origin: left center; translate: 0 -50%; }
+.twc-tooltip[data-show="true"][data-place="top"], .twc-tooltip[data-show="true"][data-place="bottom"] { transform: scale(1); }
+.twc-tooltip__arrow { position: absolute; width: 7px; height: 7px; background: var(--color-text); transform: rotate(45deg); }
+.twc-tooltip[data-place="top"] .twc-tooltip__arrow    { bottom: -3px; left: 50%; margin-left: -3.5px; }
+.twc-tooltip[data-place="bottom"] .twc-tooltip__arrow { top: -3px; left: 50%; margin-left: -3.5px; }
+.twc-tooltip[data-place="left"] .twc-tooltip__arrow   { right: -3px; top: 50%; margin-top: -3.5px; }
+.twc-tooltip[data-place="right"] .twc-tooltip__arrow  { left: -3px; top: 50%; margin-top: -3.5px; }
+@media (prefers-reduced-motion: reduce) { .twc-tooltip { transition: opacity var(--duration-fast) linear; transform: none; } }
+`;
+function Tooltip({
+  children,
+  label,
+  placement = "top",
+  delay = 120,
+  className = "",
+  ...rest
+}) {
+  const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
+  const id = React23__namespace.default.useId();
+  const [show, setShow] = React23__namespace.default.useState(false);
+  const [coords, setCoords] = React23__namespace.default.useState(null);
+  const timer = React23__namespace.default.useRef(null);
+  const wrapRef = React23__namespace.default.useRef(null);
+  const tipRef = React23__namespace.default.useRef(null);
+  const open = () => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setShow(true), delay);
+  };
+  const close = () => {
+    clearTimeout(timer.current);
+    setShow(false);
+  };
+  React23__namespace.default.useEffect(() => () => clearTimeout(timer.current), []);
+  const place = React23__namespace.default.useCallback(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const cx = Math.round(r.left + r.width / 2), cy = Math.round(r.top + r.height / 2);
+    const vw = window.innerWidth, vh = window.innerHeight, gap = 8, margin = 8;
+    const tip = tipRef.current;
+    const tw = tip ? tip.offsetWidth : 0, th = tip ? tip.offsetHeight : 0;
+    const clampX = (c) => tw ? Math.round(Math.min(Math.max(c, margin + tw / 2), vw - margin - tw / 2)) : c;
+    const clampY = (c) => th ? Math.round(Math.min(Math.max(c, margin + th / 2), vh - margin - th / 2)) : c;
+    const base = { left: "auto", right: "auto", top: "auto", bottom: "auto" };
+    if (placement === "bottom") setCoords({ ...base, left: clampX(cx), top: Math.round(r.bottom + gap) });
+    else if (placement === "left") setCoords({ ...base, top: clampY(cy), right: Math.round(vw - r.left + gap) });
+    else if (placement === "right") setCoords({ ...base, top: clampY(cy), left: Math.round(r.right + gap) });
+    else setCoords({ ...base, left: clampX(cx), bottom: Math.round(vh - r.top + gap) });
+  }, [placement]);
+  React23__namespace.default.useEffect(() => {
+    place();
+  }, [place]);
+  React23__namespace.default.useEffect(() => {
+    if (!show) return void 0;
+    place();
+    const onMove = () => place();
+    window.addEventListener("scroll", onMove, true);
+    window.addEventListener("resize", onMove);
+    return () => {
+      window.removeEventListener("scroll", onMove, true);
+      window.removeEventListener("resize", onMove);
+    };
+  }, [show, place]);
+  React23__namespace.default.useEffect(() => {
+    if (!show) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        clearTimeout(timer.current);
+        setShow(false);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [show]);
+  const describedBy = show ? id : void 0;
+  const trigger = React23__namespace.default.isValidElement(children) && children.type !== React23__namespace.default.Fragment ? React23__namespace.default.cloneElement(children, {
+    "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
+  }) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-describedby": describedBy, children });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref: wrapRef,
+      className: `twc-tooltip-wrap ${className}`,
+      onMouseEnter: open,
+      onMouseLeave: close,
+      onFocus: open,
+      onBlur: close,
+      ...rest,
+      children: [
+        __twcStyles,
+        trigger,
+        coords ? reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              ref: tipRef,
+              id,
+              className: "twc-tooltip",
+              "data-place": placement,
+              "data-show": show || void 0,
+              role: "tooltip",
+              "aria-hidden": show ? void 0 : "true",
+              style: { position: "fixed", left: coords.left, right: coords.right, top: coords.top, bottom: coords.bottom },
+              children: [
+                label,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-tooltip__arrow", "aria-hidden": "true" })
+              ]
+            }
+          ),
+          document.body
+        ) : null
+      ]
+    }
+  );
+}
 var SIDEBAR_CSS = `
 .twc-sidebar { display: flex; flex-direction: column; height: 100%; font-family: var(--font-sans);
   background: var(--color-surface); border-inline-end: var(--border-thin) solid var(--color-border);
@@ -8774,10 +8903,10 @@ function Sidebar({
           "data-active": it.active || void 0,
           "aria-current": it.active ? "page" : void 0,
           onClick: it.onClick,
-          title: collapsed && labelStr != null ? labelStr : void 0,
           "aria-label": collapsed && labelStr != null ? labelStr : void 0
         };
-        return href != null ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, ...common, children: inner }, i) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", ...common, children: inner }, i);
+        const node = href != null ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, ...common, children: inner }, i) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", ...common, children: inner }, i);
+        return collapsed && labelStr != null ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { label: labelStr, placement: "right", style: { display: "block" }, children: node }, i) : node;
       })()
     ) }),
     footer || collapsible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-sidebar__foot", children: [
@@ -9919,135 +10048,6 @@ function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps
     )) })
   ] });
 }
-var TOOLTIP_CSS = `
-.twc-tooltip-wrap { display: inline-flex; }
-.twc-tooltip {
-  position: fixed; z-index: var(--z-tooltip); pointer-events: none;
-  padding: 6px 10px; border-radius: var(--radius-md);
-  background: var(--color-text); color: var(--color-surface);
-  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-medium);
-  line-height: 1.3; white-space: nowrap; box-shadow: var(--shadow-md);
-  opacity: 0; transform: scale(0.9); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring);
-}
-.twc-tooltip[data-show="true"] { opacity: 1; transform: scale(1); }
-.twc-tooltip[data-place="top"]    { transform-origin: bottom center; translate: -50% 0; }
-.twc-tooltip[data-place="bottom"] { transform-origin: top center; translate: -50% 0; }
-.twc-tooltip[data-place="left"]   { transform-origin: right center; translate: 0 -50%; }
-.twc-tooltip[data-place="right"]  { transform-origin: left center; translate: 0 -50%; }
-.twc-tooltip[data-show="true"][data-place="top"], .twc-tooltip[data-show="true"][data-place="bottom"] { transform: scale(1); }
-.twc-tooltip__arrow { position: absolute; width: 7px; height: 7px; background: var(--color-text); transform: rotate(45deg); }
-.twc-tooltip[data-place="top"] .twc-tooltip__arrow    { bottom: -3px; left: 50%; margin-left: -3.5px; }
-.twc-tooltip[data-place="bottom"] .twc-tooltip__arrow { top: -3px; left: 50%; margin-left: -3.5px; }
-.twc-tooltip[data-place="left"] .twc-tooltip__arrow   { right: -3px; top: 50%; margin-top: -3.5px; }
-.twc-tooltip[data-place="right"] .twc-tooltip__arrow  { left: -3px; top: 50%; margin-top: -3.5px; }
-@media (prefers-reduced-motion: reduce) { .twc-tooltip { transition: opacity var(--duration-fast) linear; transform: none; } }
-`;
-function Tooltip({
-  children,
-  label,
-  placement = "top",
-  delay = 120,
-  className = "",
-  ...rest
-}) {
-  const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
-  const id = React23__namespace.default.useId();
-  const [show, setShow] = React23__namespace.default.useState(false);
-  const [coords, setCoords] = React23__namespace.default.useState(null);
-  const timer = React23__namespace.default.useRef(null);
-  const wrapRef = React23__namespace.default.useRef(null);
-  const tipRef = React23__namespace.default.useRef(null);
-  const open = () => {
-    clearTimeout(timer.current);
-    timer.current = setTimeout(() => setShow(true), delay);
-  };
-  const close = () => {
-    clearTimeout(timer.current);
-    setShow(false);
-  };
-  React23__namespace.default.useEffect(() => () => clearTimeout(timer.current), []);
-  const place = React23__namespace.default.useCallback(() => {
-    const el = wrapRef.current;
-    if (!el) return;
-    const r = el.getBoundingClientRect();
-    const cx = Math.round(r.left + r.width / 2), cy = Math.round(r.top + r.height / 2);
-    const vw = window.innerWidth, vh = window.innerHeight, gap = 8, margin = 8;
-    const tip = tipRef.current;
-    const tw = tip ? tip.offsetWidth : 0, th = tip ? tip.offsetHeight : 0;
-    const clampX = (c) => tw ? Math.round(Math.min(Math.max(c, margin + tw / 2), vw - margin - tw / 2)) : c;
-    const clampY = (c) => th ? Math.round(Math.min(Math.max(c, margin + th / 2), vh - margin - th / 2)) : c;
-    const base = { left: "auto", right: "auto", top: "auto", bottom: "auto" };
-    if (placement === "bottom") setCoords({ ...base, left: clampX(cx), top: Math.round(r.bottom + gap) });
-    else if (placement === "left") setCoords({ ...base, top: clampY(cy), right: Math.round(vw - r.left + gap) });
-    else if (placement === "right") setCoords({ ...base, top: clampY(cy), left: Math.round(r.right + gap) });
-    else setCoords({ ...base, left: clampX(cx), bottom: Math.round(vh - r.top + gap) });
-  }, [placement]);
-  React23__namespace.default.useEffect(() => {
-    place();
-  }, [place]);
-  React23__namespace.default.useEffect(() => {
-    if (!show) return void 0;
-    place();
-    const onMove = () => place();
-    window.addEventListener("scroll", onMove, true);
-    window.addEventListener("resize", onMove);
-    return () => {
-      window.removeEventListener("scroll", onMove, true);
-      window.removeEventListener("resize", onMove);
-    };
-  }, [show, place]);
-  React23__namespace.default.useEffect(() => {
-    if (!show) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") {
-        clearTimeout(timer.current);
-        setShow(false);
-      }
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [show]);
-  const describedBy = show ? id : void 0;
-  const trigger = React23__namespace.default.isValidElement(children) && children.type !== React23__namespace.default.Fragment ? React23__namespace.default.cloneElement(children, {
-    "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
-  }) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-describedby": describedBy, children });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      ref: wrapRef,
-      className: `twc-tooltip-wrap ${className}`,
-      onMouseEnter: open,
-      onMouseLeave: close,
-      onFocus: open,
-      onBlur: close,
-      ...rest,
-      children: [
-        __twcStyles,
-        trigger,
-        coords ? reactDom.createPortal(
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              ref: tipRef,
-              id,
-              className: "twc-tooltip",
-              "data-place": placement,
-              "data-show": show || void 0,
-              role: "tooltip",
-              "aria-hidden": show ? void 0 : "true",
-              style: { position: "fixed", left: coords.left, right: coords.right, top: coords.top, bottom: coords.bottom },
-              children: [
-                label,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-tooltip__arrow", "aria-hidden": "true" })
-              ]
-            }
-          ),
-          document.body
-        ) : null
-      ]
-    }
-  );
-}
 var TREE_CSS = `
 .twc-tree { font-family: var(--font-sans); font-size: var(--text-sm); user-select: none; }
 .twc-tree__group { list-style: none; margin: 0; padding: 0; }
@@ -10218,6 +10218,34 @@ function TreeView({
     )) })
   ] });
 }
+var SHELL_CSS = `
+.twc-shell { display: flex; overflow: hidden; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); }
+.twc-shell__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; height: 100%; }
+.twc-shell__header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
+  min-height: 60px; padding-inline: var(--space-5); border-bottom: var(--border-thin) solid var(--color-border); background: var(--color-surface); }
+.twc-shell__content { flex: 1 1 auto; min-height: 0; overflow: auto; }
+.twc-shell__content[data-padded="true"] { padding: var(--space-6) var(--space-5); }
+`;
+function AppShell({
+  sidebar,
+  header,
+  children,
+  height = "100dvh",
+  padded = true,
+  className = "",
+  style,
+  ...rest
+}) {
+  const __twcStyles = useScopedStyles("twc-shell-styles", SHELL_CSS);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-shell ${className}`.trim(), style: { height, ...style }, ...rest, children: [
+    __twcStyles,
+    sidebar,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-shell__main", children: [
+      header != null ? /* @__PURE__ */ jsxRuntime.jsx("header", { className: "twc-shell__header", children: header }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "twc-shell__content", "data-padded": padded ? "true" : void 0, children })
+    ] })
+  ] });
+}
 function sp(v) {
   if (v == null) return void 0;
   return typeof v === "number" ? `var(--space-${String(v).replace(".", "-")})` : v;
@@ -10856,6 +10884,7 @@ function useId(prefix = "twc") {
 
 exports.Accordion = Accordion;
 exports.Alert = Alert;
+exports.AppShell = AppShell;
 exports.Avatar = Avatar;
 exports.AvatarMenu = AvatarMenu;
 exports.Badge = Badge;