klun-ui 0.1.11 → 0.1.13

package/CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to **klun-ui** are documented here. The format follows
 [Semantic Versioning](https://semver.org/) (pre-1.0: minor/patch bumps may carry
 small breaking changes).
 
+## [0.1.13] — 2026-06-23
+
+### Added
+- **`CheckboxGroup` — a set of checkboxes bound to a `string[]` value.**
+  antd-aligned API: `options` (a bare string is shorthand for
+  `{ label, value }`, or pass `{ label, value, disabled }`), controlled
+  `value`/`onChange` or uncontrolled `defaultValue`, `direction`
+  (`"horizontal"` | `"vertical"`), `size`, and a group-level `disabled`.
+- **`Checkbox` now renders an optional label.** Pass `children` to show text
+  next to the box (backward compatible — box-only usage is unchanged).
+
+### Changed
+- **`Drawer` default size is now `50%`** of the viewport along the slide axis
+  (was a fixed `378px`) for both `width` and `height`. Pass an explicit
+  `width`/`height` (number or string) to override.
+
 ## [0.1.10] — 2026-06-21
 
 ### Added

package/dist/{chunk-N4NBEKYR.js → chunk-O2CR4NDQ.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" },
@@ -6014,7 +6014,7 @@ var CharacterCounter = forwardRef(
   }
 );
 CharacterCounter.displayName = "CharacterCounter";
-var Checkbox = forwardRef(function Checkbox2({ indeterminate = false, disabled = false, error = false, size: sizeProp, onChange, className, style, ...props }, ref) {
+var Checkbox = forwardRef(function Checkbox2({ indeterminate = false, disabled = false, error = false, size: sizeProp, onChange, className, style, children, ...props }, ref) {
   const size = useSize(sizeProp);
   const innerRef = useRef(null);
   const setRef = (node) => {
@@ -6033,6 +6033,7 @@ var Checkbox = forwardRef(function Checkbox2({ indeterminate = false, disabled =
         `klun-checkbox--${size}`,
         disabled && "klun-checkbox--disabled",
         error && "klun-checkbox--error",
+        children != null && children !== false && "klun-checkbox--with-label",
         className
       ),
       style,
@@ -6052,12 +6053,52 @@ var Checkbox = forwardRef(function Checkbox2({ indeterminate = false, disabled =
         /* @__PURE__ */ jsxs("span", { className: "klun-checkbox__box", "aria-hidden": true, children: [
           /* @__PURE__ */ jsx("svg", { className: "klun-checkbox__check", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-6.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
           /* @__PURE__ */ jsx("svg", { className: "klun-checkbox__dash", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3.5 8h9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
-        ] })
+        ] }),
+        children != null && children !== false && /* @__PURE__ */ jsx("span", { className: "klun-checkbox__label", children })
       ]
     }
   );
 });
 Checkbox.displayName = "Checkbox";
+var CheckboxGroup = forwardRef(function CheckboxGroup2({ options, value, defaultValue, onChange, disabled = false, size, name, direction = "horizontal", className, style, children }, ref) {
+  const [internal, setInternal] = 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__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "group",
+      className: cx("klun-checkbox-group", `klun-checkbox-group--${direction}`, className),
+      style,
+      children: [
+        norm2.map((o) => /* @__PURE__ */ 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 = forwardRef(
   function CheckboxCard2({
     title,
@@ -10089,8 +10130,8 @@ var Drawer = forwardRef(function Drawer2({
   title,
   placement,
   side,
-  width = 378,
-  height = 378,
+  width = "50%",
+  height = "50%",
   size = "default",
   closable = true,
   maskClosable = true,
@@ -10380,6 +10421,8 @@ var Modal = forwardRef(function Modal2({
   keyboard = true,
   mask = true,
   draggable = false,
+  maximizable = false,
+  defaultMaximized = false,
   zIndex,
   afterClose,
   afterOpenChange,
@@ -10392,6 +10435,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(() => {
@@ -10408,7 +10452,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?.();
@@ -10417,8 +10464,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;
@@ -10440,7 +10487,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
@@ -10458,14 +10505,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,
@@ -10473,7 +10520,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,
@@ -10660,6 +10719,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, 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-N4NBEKYR.js.map
-//# sourceMappingURL=chunk-N4NBEKYR.js.map
+export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, CheckboxGroup, 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-O2CR4NDQ.js.map
+//# sourceMappingURL=chunk-O2CR4NDQ.js.map