klun-ui 0.1.11 → 0.1.13

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

@@ -190,7 +190,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" },
@@ -284,7 +284,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" },
@@ -6016,7 +6016,7 @@ var CharacterCounter = react.forwardRef(
   }
 );
 CharacterCounter.displayName = "CharacterCounter";
-var Checkbox = react.forwardRef(function Checkbox2({ indeterminate = false, disabled = false, error = false, size: sizeProp, onChange, className, style, ...props }, ref) {
+var Checkbox = react.forwardRef(function Checkbox2({ indeterminate = false, disabled = false, error = false, size: sizeProp, onChange, className, style, children, ...props }, ref) {
   const size = useSize(sizeProp);
   const innerRef = react.useRef(null);
   const setRef = (node) => {
@@ -6035,6 +6035,7 @@ var Checkbox = react.forwardRef(function Checkbox2({ indeterminate = false, disa
         `klun-checkbox--${size}`,
         disabled && "klun-checkbox--disabled",
         error && "klun-checkbox--error",
+        children != null && children !== false && "klun-checkbox--with-label",
         className
       ),
       style,
@@ -6054,12 +6055,52 @@ var Checkbox = react.forwardRef(function Checkbox2({ indeterminate = false, disa
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "klun-checkbox__box", "aria-hidden": true, children: [
           /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "klun-checkbox__check", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 8.5l3 3 6-6.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "klun-checkbox__dash", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 8h9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
-        ] })
+        ] }),
+        children != null && children !== false && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-checkbox__label", children })
       ]
     }
   );
 });
 Checkbox.displayName = "Checkbox";
+var CheckboxGroup = react.forwardRef(function CheckboxGroup2({ options, value, defaultValue, onChange, disabled = false, size, name, direction = "horizontal", className, style, children }, ref) {
+  const [internal, setInternal] = react.useState(defaultValue ?? []);
+  const controlled = value != null;
+  const current = controlled ? value : internal;
+  const toggle = (val, checked) => {
+    const next = checked ? [...current, val] : current.filter((v) => v !== val);
+    if (!controlled) setInternal(next);
+    onChange?.(next);
+  };
+  const norm2 = (options ?? []).map(
+    (o) => typeof o === "string" ? { label: o, value: o } : o
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "group",
+      className: chunkTPGAXYFU_cjs.cx("klun-checkbox-group", `klun-checkbox-group--${direction}`, className),
+      style,
+      children: [
+        norm2.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox,
+          {
+            name,
+            size,
+            value: o.value,
+            checked: current.includes(o.value),
+            disabled: disabled || o.disabled,
+            onChange: (checked) => toggle(o.value, checked),
+            children: o.label
+          },
+          o.value
+        )),
+        children
+      ]
+    }
+  );
+});
+CheckboxGroup.displayName = "CheckboxGroup";
 var CheckboxCard = react.forwardRef(
   function CheckboxCard2({
     title,
@@ -10091,8 +10132,8 @@ var Drawer = react.forwardRef(function Drawer2({
   title,
   placement,
   side,
-  width = 378,
-  height = 378,
+  width = "50%",
+  height = "50%",
   size = "default",
   closable = true,
   maskClosable = true,
@@ -10382,6 +10423,8 @@ var Modal = react.forwardRef(function Modal2({
   keyboard = true,
   mask = true,
   draggable = false,
+  maximizable = false,
+  defaultMaximized = false,
   zIndex,
   afterClose,
   afterOpenChange,
@@ -10394,6 +10437,7 @@ var Modal = react.forwardRef(function Modal2({
   const cancel = onCancel ?? onClose;
   const backdropClosable = maskClosable ?? closeOnBackdrop ?? true;
   const [pos, setPos] = react.useState({ x: 0, y: 0 });
+  const [maximized, setMaximized] = react.useState(defaultMaximized);
   const drag = react.useRef(null);
   const prevOpen = react.useRef(open);
   react.useEffect(() => {
@@ -10410,7 +10454,10 @@ var Modal = react.forwardRef(function Modal2({
     };
   }, [open, keyboard, closable, cancel]);
   react.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?.();
@@ -10419,8 +10466,8 @@ var Modal = react.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;
@@ -10442,7 +10489,7 @@ var Modal = react.forwardRef(function Modal2({
     /* @__PURE__ */ jsxRuntime.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
@@ -10460,14 +10507,14 @@ var Modal = react.forwardRef(function Modal2({
           role: "dialog",
           "aria-modal": "true",
           onClick: (e) => e.stopPropagation(),
-          className: chunkTPGAXYFU_cjs.cx("klun-modal__dialog", className),
+          className: chunkTPGAXYFU_cjs.cx("klun-modal__dialog", maximized && "klun-modal__dialog--maximized", className),
           style: dialogStyle,
           ...props,
           children: [
             title || icon ? /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: chunkTPGAXYFU_cjs.cx("klun-modal__header", draggable && "klun-modal__header--draggable"),
+                className: chunkTPGAXYFU_cjs.cx("klun-modal__header", draggable && !maximized && "klun-modal__header--draggable"),
                 onMouseDown: startDrag,
                 children: [
                   icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-modal__icon", children: icon }) : null,
@@ -10475,7 +10522,19 @@ var Modal = react.forwardRef(function Modal2({
                     title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-modal__title", children: title }) : null,
                     description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-modal__description", children: description }) : null
                   ] }),
-                  closable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: cancel, "aria-label": modal.close, className: "klun-modal__close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }) : null
+                  maximizable || closable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-modal__actions", children: [
+                    maximizable ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setMaximized((m) => !m),
+                        "aria-label": maximized ? modal.restore ?? "Restore" : modal.maximize ?? "Maximize",
+                        className: "klun-modal__action",
+                        children: maximized ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 4v4H4M12 16v-4h4M12 4v4h4M8 16v-4H4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 8V4h4M16 12v4h-4M16 8V4h-4M4 12v4h4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                      }
+                    ) : null,
+                    closable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: cancel, "aria-label": modal.close, className: "klun-modal__action klun-modal__close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }) : null
+                  ] }) : null
                 ]
               }
             ) : null,
@@ -10682,6 +10741,7 @@ exports.ChartLegend = ChartLegend;
 exports.ChartTooltip = ChartTooltip;
 exports.Checkbox = Checkbox;
 exports.CheckboxCard = CheckboxCard;
+exports.CheckboxGroup = CheckboxGroup;
 exports.Chip = Chip;
 exports.CircularProgress = CircularProgress;
 exports.CodeViewer = CodeViewer;
@@ -10809,5 +10869,5 @@ exports.useSize = useSize;
 exports.viVN = viVN;
 exports.zhCN = zhCN;
 exports.zhTW = zhTW;
-//# sourceMappingURL=chunk-F7D5VPDL.cjs.map
-//# sourceMappingURL=chunk-F7D5VPDL.cjs.map
+//# sourceMappingURL=chunk-Y2R5PBYN.cjs.map
+//# sourceMappingURL=chunk-Y2R5PBYN.cjs.map