klun-ui 0.1.10 → 0.1.12

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-Y5BGEO2J.js → chunk-3XJ5FN4P.js}

@@ -188,7 +188,7 @@ var enUS = {
   },
   timePicker: { am: "AM", pm: "PM" },
   pagination: { previous: "Previous", next: "Next" },
-  modal: { close: "Close" },
+  modal: { close: "Close", maximize: "Maximize", restore: "Restore" },
   drawer: { close: "Close" },
   alert: { dismiss: "Dismiss" },
   banner: { dismiss: "Dismiss" },
@@ -282,7 +282,7 @@ var zhCN = {
   },
   timePicker: { am: "\u4E0A\u5348", pm: "\u4E0B\u5348" },
   pagination: { previous: "\u4E0A\u4E00\u9875", next: "\u4E0B\u4E00\u9875" },
-  modal: { close: "\u5173\u95ED" },
+  modal: { close: "\u5173\u95ED", maximize: "\u6700\u5927\u5316", restore: "\u8FD8\u539F" },
   drawer: { close: "\u5173\u95ED" },
   alert: { dismiss: "\u5173\u95ED" },
   banner: { dismiss: "\u5173\u95ED" },
@@ -5016,6 +5016,56 @@ var Accordion = forwardRef(function Accordion2({ items: items2 = [], defaultOpen
   }) });
 });
 Accordion.displayName = "Accordion";
+var Collapse = 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] = 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__ */ jsxs("div", { ref, className: cx("klun-collapse", className), "data-state": isOpen ? "open" : "closed", ...props, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "klun-collapse__trigger",
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": isOpen,
+        onClick: toggle,
+        onKeyDown,
+        children: [
+          icon != null ? /* @__PURE__ */ jsx("span", { className: "klun-collapse__icon", children: icon }) : null,
+          /* @__PURE__ */ jsx("span", { className: "klun-collapse__title", children: title }),
+          extra != null ? /* @__PURE__ */ jsx("span", { className: "klun-collapse__extra", onClick: (e) => e.stopPropagation(), children: extra }) : null,
+          !hideChevron ? /* @__PURE__ */ jsx("span", { className: "klun-collapse__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "klun-collapse__panel", children: /* @__PURE__ */ jsx("div", { className: cx("klun-collapse__content", contentClassName), style: contentStyle, children }) })
+  ] });
+});
+Collapse.displayName = "Collapse";
 var Alert = forwardRef(function Alert2({ status = "information", variant = "lighter", icon, title, action, onClose, className, children, ...props }, ref) {
   const { alert } = useLocale();
   return /* @__PURE__ */ jsxs(
@@ -10330,6 +10380,8 @@ var Modal = forwardRef(function Modal2({
   keyboard = true,
   mask = true,
   draggable = false,
+  maximizable = false,
+  defaultMaximized = false,
   zIndex,
   afterClose,
   afterOpenChange,
@@ -10342,6 +10394,7 @@ var Modal = forwardRef(function Modal2({
   const cancel = onCancel ?? onClose;
   const backdropClosable = maskClosable ?? closeOnBackdrop ?? true;
   const [pos, setPos] = useState({ x: 0, y: 0 });
+  const [maximized, setMaximized] = useState(defaultMaximized);
   const drag = useRef(null);
   const prevOpen = useRef(open);
   useEffect(() => {
@@ -10358,7 +10411,10 @@ var Modal = forwardRef(function Modal2({
     };
   }, [open, keyboard, closable, cancel]);
   useEffect(() => {
-    if (open) setPos({ x: 0, y: 0 });
+    if (open) {
+      setPos({ x: 0, y: 0 });
+      setMaximized(defaultMaximized);
+    }
     if (prevOpen.current !== open) {
       afterOpenChange?.(open);
       if (!open) afterClose?.();
@@ -10367,8 +10423,8 @@ var Modal = forwardRef(function Modal2({
   }, [open]);
   if (!open) return null;
   const startDrag = (e) => {
-    if (!draggable) return;
-    if (e.target.closest(".klun-modal__close")) return;
+    if (!draggable || maximized) return;
+    if (e.target.closest(".klun-modal__actions")) return;
     drag.current = { sx: e.clientX, sy: e.clientY, ox: pos.x, oy: pos.y };
     const move = (ev) => {
       if (!drag.current) return;
@@ -10390,7 +10446,7 @@ var Modal = forwardRef(function Modal2({
     /* @__PURE__ */ jsx(Button, { variant: okType === "danger" ? "error" : "primary", loading: confirmLoading, onClick: onOk, ...okButtonProps, children: okText ?? "OK" })
   ] });
   const resolvedFooter = footer === null ? null : footer !== void 0 ? footer : defaultFooter;
-  const dialogStyle = {
+  const dialogStyle = maximized ? { ...style } : {
     width,
     ...pos.x || pos.y ? { transform: `translate(${pos.x}px, ${pos.y}px)` } : null,
     ...style
@@ -10408,14 +10464,14 @@ var Modal = forwardRef(function Modal2({
           role: "dialog",
           "aria-modal": "true",
           onClick: (e) => e.stopPropagation(),
-          className: cx("klun-modal__dialog", className),
+          className: cx("klun-modal__dialog", maximized && "klun-modal__dialog--maximized", className),
           style: dialogStyle,
           ...props,
           children: [
             title || icon ? /* @__PURE__ */ jsxs(
               "div",
               {
-                className: cx("klun-modal__header", draggable && "klun-modal__header--draggable"),
+                className: cx("klun-modal__header", draggable && !maximized && "klun-modal__header--draggable"),
                 onMouseDown: startDrag,
                 children: [
                   icon ? /* @__PURE__ */ jsx("div", { className: "klun-modal__icon", children: icon }) : null,
@@ -10423,7 +10479,19 @@ var Modal = forwardRef(function Modal2({
                     title ? /* @__PURE__ */ jsx("div", { className: "klun-modal__title", children: title }) : null,
                     description ? /* @__PURE__ */ jsx("div", { className: "klun-modal__description", children: description }) : null
                   ] }),
-                  closable ? /* @__PURE__ */ jsx("button", { type: "button", onClick: cancel, "aria-label": modal.close, className: "klun-modal__close", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }) : null
+                  maximizable || closable ? /* @__PURE__ */ jsxs("div", { className: "klun-modal__actions", children: [
+                    maximizable ? /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setMaximized((m) => !m),
+                        "aria-label": maximized ? modal.restore ?? "Restore" : modal.maximize ?? "Maximize",
+                        className: "klun-modal__action",
+                        children: maximized ? /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M8 4v4H4M12 16v-4h4M12 4v4h4M8 16v-4H4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4 8V4h4M16 12v4h-4M16 8V4h-4M4 12v4h4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                      }
+                    ) : null,
+                    closable ? /* @__PURE__ */ jsx("button", { type: "button", onClick: cancel, "aria-label": modal.close, className: "klun-modal__action klun-modal__close", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }) : null
+                  ] }) : null
                 ]
               }
             ) : null,
@@ -10610,6 +10678,6 @@ var Popconfirm = forwardRef(function Popconfirm2({
 });
 Popconfirm.displayName = "Popconfirm";
 
-export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, Chip, CircularProgress, CodeViewer, Col, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DigitInput, Divider, Drawer, Dropdown, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Masonry, Menu, Message, Modal, Money, Notification, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, Wizard, arSA, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, plPL, primaryColorVars, ptBR, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
-//# sourceMappingURL=chunk-Y5BGEO2J.js.map
-//# sourceMappingURL=chunk-Y5BGEO2J.js.map
+export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DigitInput, Divider, Drawer, Dropdown, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Masonry, Menu, Message, Modal, Money, Notification, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, Wizard, arSA, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, plPL, primaryColorVars, ptBR, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
+//# sourceMappingURL=chunk-3XJ5FN4P.js.map
+//# sourceMappingURL=chunk-3XJ5FN4P.js.map