klun-ui 0.1.10 → 0.1.11

package/README.md

@@ -75,7 +75,7 @@ You can also override tokens directly:
 | **Feedback** | Alert, Banner, InlineTip, Toast, NotificationItem, ProgressBar, GaugeBar, CircularProgress, SegmentedProgress, Spinner, Skeleton, EmptyState |
 | **Navigation** | Tabs, SegmentedControl, Breadcrumb, Pagination, StepIndicator, Divider, ContentDivider, HorizontalFilter, PageHeader |
 | **Overlays** | Modal, Drawer, Dropdown, Popover, CommandMenu |
-| **Disclosure** | Accordion |
+| **Disclosure** | Accordion, Collapse |
 | **Layout** | Card, ContentCard, FeatureCard |
 
 All components and their prop types are named exports; a `cx` classnames helper is exported too.
@@ -86,7 +86,7 @@ Full-screen example compositions are available from the `klun-ui/templates` subp
 
 ```tsx
 import "klun-ui/styles.css";
-import { DashboardTemplate, AIAssistantTemplate, CryptoTemplate, MarketingTemplate } from "klun-ui/templates";
+import { DashboardTemplate, AIAssistantTemplate, AgentChatTemplate, CryptoTemplate, MarketingTemplate } from "klun-ui/templates";
 
 export default function App() {
   return <DashboardTemplate />;

package/dist/{chunk-VFEV4TOL.cjs → chunk-F7D5VPDL.cjs}

@@ -5018,6 +5018,56 @@ var Accordion = react.forwardRef(function Accordion2({ items: items2 = [], defau
   }) });
 });
 Accordion.displayName = "Accordion";
+var Collapse = react.forwardRef(function Collapse2({
+  title,
+  icon,
+  extra,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  hideChevron = false,
+  contentStyle,
+  contentClassName,
+  className,
+  children,
+  ...props
+}, ref) {
+  const isControlled = open !== void 0;
+  const [internal, setInternal] = react.useState(defaultOpen);
+  const isOpen = isControlled ? open : internal;
+  const toggle = () => {
+    const next = !isOpen;
+    if (!isControlled) setInternal(next);
+    onOpenChange?.(next);
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-collapse", className), "data-state": isOpen ? "open" : "closed", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "klun-collapse__trigger",
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": isOpen,
+        onClick: toggle,
+        onKeyDown,
+        children: [
+          icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-collapse__icon", children: icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-collapse__title", children: title }),
+          extra != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-collapse__extra", onClick: (e) => e.stopPropagation(), children: extra }) : null,
+          !hideChevron ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-collapse__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-collapse__panel", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkTPGAXYFU_cjs.cx("klun-collapse__content", contentClassName), style: contentStyle, children }) })
+  ] });
+});
+Collapse.displayName = "Collapse";
 var Alert = react.forwardRef(function Alert2({ status = "information", variant = "lighter", icon, title, action, onClose, className, children, ...props }, ref) {
   const { alert } = useLocale();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10636,6 +10686,7 @@ exports.Chip = Chip;
 exports.CircularProgress = CircularProgress;
 exports.CodeViewer = CodeViewer;
 exports.Col = Col;
+exports.Collapse = Collapse;
 exports.ColorDot = ColorDot;
 exports.ColorPicker = ColorPicker;
 exports.ColorSlider = ColorSlider;
@@ -10758,5 +10809,5 @@ exports.useSize = useSize;
 exports.viVN = viVN;
 exports.zhCN = zhCN;
 exports.zhTW = zhTW;
-//# sourceMappingURL=chunk-VFEV4TOL.cjs.map
-//# sourceMappingURL=chunk-VFEV4TOL.cjs.map
+//# sourceMappingURL=chunk-F7D5VPDL.cjs.map
+//# sourceMappingURL=chunk-F7D5VPDL.cjs.map