klun-ui 0.1.3 → 0.1.5

package/dist/index.d.cts

@@ -2666,17 +2666,45 @@ type ConfirmResult = false | true | {
  */
 declare function Confirm(opts?: ConfirmOptions): Promise<ConfirmResult>;
 
+type DrawerPlacement = "top" | "right" | "bottom" | "left";
 interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "style"> {
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
+    /** Edge the drawer slides from. Default `"right"`. */
+    placement?: DrawerPlacement;
+    /** Alias of `placement`, kept for back-compat. */
     side?: "left" | "right";
+    /** Width for left/right placements. Default `378`. */
     width?: number | string;
+    /** Height for top/bottom placements. Default `378`. */
+    height?: number | string;
+    /** Preset size along the slide axis: `"default"` (378) | `"large"` (736). */
+    size?: "default" | "large";
+    /** Show the close button. Default `true`. */
+    closable?: boolean;
+    /** Close when the backdrop (mask) is clicked. Default `true`. */
+    maskClosable?: boolean;
+    /** Render the dimmed backdrop. Default `true`. */
+    mask?: boolean;
+    /** Allow Esc to close. Default `true`. */
+    keyboard?: boolean;
+    /** Extra actions rendered in the header, before the close button. */
+    extra?: ReactNode;
     footer?: ReactNode;
+    /** z-index of the drawer layer. */
+    zIndex?: number;
+    /** Called whenever the open state changes. */
+    afterOpenChange?: (open: boolean) => void;
     children?: ReactNode;
     style?: CSSProperties;
 }
-/** Klun UI Drawer — slide-over panel anchored to an edge. */
+/**
+ * Klun UI Drawer — slide-over panel anchored to an edge. antd-aligned:
+ * `placement` (top/right/bottom/left), `width`/`height`/`size`, `closable`,
+ * `maskClosable`, `mask`, `keyboard`, `extra` header actions, `zIndex` and
+ * `afterOpenChange`.
+ */
 declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
 
 interface DropdownItem {
@@ -2698,20 +2726,58 @@ declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.Re
 
 interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "style"> {
     open: boolean;
+    /** Close handler — fired by the close button, backdrop, Esc and the cancel button (alias of `onCancel`). */
     onClose?: () => void;
+    /** Confirm handler for the default OK button. */
+    onOk?: () => void;
+    /** Cancel handler; falls back to `onClose`. */
+    onCancel?: () => void;
     title?: ReactNode;
+    /** Sub-text under the title (klun extra). */
     description?: ReactNode;
+    /** Leading icon node (klun extra). */
     icon?: ReactNode;
-    footer?: ReactNode;
+    /** Footer content. `undefined` → default Cancel/OK buttons; `null` → no footer. */
+    footer?: ReactNode | null;
+    okText?: ReactNode;
+    cancelText?: ReactNode;
+    /** Loading spinner on the OK button (e.g. while an async submit runs). */
+    confirmLoading?: boolean;
+    /** OK button type. `"danger"` renders a red button. Default `"primary"`. */
+    okType?: "primary" | "danger";
+    okButtonProps?: Partial<DefaultButtonProps>;
+    cancelButtonProps?: Partial<DefaultButtonProps>;
+    /** Dialog width. Default `520`. */
     width?: number | string;
-    /** Show the close button + allow Esc/backdrop close. Default true. */
+    /** Vertically center the dialog. Default `false` (top-aligned, like antd). */
+    centered?: boolean;
+    /** Show the top-right close button. Default `true`. */
     closable?: boolean;
-    /** Close when the dimmed backdrop is clicked. Default true. */
+    /** Close when the backdrop (mask) is clicked. Default `true`. */
+    maskClosable?: boolean;
+    /** Alias of `maskClosable`. */
     closeOnBackdrop?: boolean;
+    /** Allow Esc to close. Default `true`. */
+    keyboard?: boolean;
+    /** Render the dimmed backdrop. Default `true`. */
+    mask?: boolean;
+    /** Drag the dialog by its header. Default `false`. */
+    draggable?: boolean;
+    /** z-index of the modal layer. */
+    zIndex?: number;
+    /** Called after the modal has closed. */
+    afterClose?: () => void;
+    /** Called whenever the open state changes. */
+    afterOpenChange?: (open: boolean) => void;
     children?: ReactNode;
     style?: CSSProperties;
 }
-/** Klun UI Modal — centered dialog with dimmed backdrop. Controlled via `open` / `onClose`. */
+/**
+ * Klun UI Modal — controlled dialog with a dimmed backdrop. antd-aligned: a
+ * default Cancel/OK footer driven by `onOk`/`onCancel`/`confirmLoading`
+ * (pass `footer={null}` to hide it), plus `centered`, `maskClosable`,
+ * `keyboard`, `mask`, `draggable` and lifecycle callbacks.
+ */
 declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDivElement>>;
 
 interface PopconfirmProps extends Omit<HTMLAttributes<HTMLSpanElement>, "title"> {

package/dist/index.d.ts

@@ -2666,17 +2666,45 @@ type ConfirmResult = false | true | {
  */
 declare function Confirm(opts?: ConfirmOptions): Promise<ConfirmResult>;
 
+type DrawerPlacement = "top" | "right" | "bottom" | "left";
 interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "style"> {
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
+    /** Edge the drawer slides from. Default `"right"`. */
+    placement?: DrawerPlacement;
+    /** Alias of `placement`, kept for back-compat. */
     side?: "left" | "right";
+    /** Width for left/right placements. Default `378`. */
     width?: number | string;
+    /** Height for top/bottom placements. Default `378`. */
+    height?: number | string;
+    /** Preset size along the slide axis: `"default"` (378) | `"large"` (736). */
+    size?: "default" | "large";
+    /** Show the close button. Default `true`. */
+    closable?: boolean;
+    /** Close when the backdrop (mask) is clicked. Default `true`. */
+    maskClosable?: boolean;
+    /** Render the dimmed backdrop. Default `true`. */
+    mask?: boolean;
+    /** Allow Esc to close. Default `true`. */
+    keyboard?: boolean;
+    /** Extra actions rendered in the header, before the close button. */
+    extra?: ReactNode;
     footer?: ReactNode;
+    /** z-index of the drawer layer. */
+    zIndex?: number;
+    /** Called whenever the open state changes. */
+    afterOpenChange?: (open: boolean) => void;
     children?: ReactNode;
     style?: CSSProperties;
 }
-/** Klun UI Drawer — slide-over panel anchored to an edge. */
+/**
+ * Klun UI Drawer — slide-over panel anchored to an edge. antd-aligned:
+ * `placement` (top/right/bottom/left), `width`/`height`/`size`, `closable`,
+ * `maskClosable`, `mask`, `keyboard`, `extra` header actions, `zIndex` and
+ * `afterOpenChange`.
+ */
 declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
 
 interface DropdownItem {
@@ -2698,20 +2726,58 @@ declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.Re
 
 interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "style"> {
     open: boolean;
+    /** Close handler — fired by the close button, backdrop, Esc and the cancel button (alias of `onCancel`). */
     onClose?: () => void;
+    /** Confirm handler for the default OK button. */
+    onOk?: () => void;
+    /** Cancel handler; falls back to `onClose`. */
+    onCancel?: () => void;
     title?: ReactNode;
+    /** Sub-text under the title (klun extra). */
     description?: ReactNode;
+    /** Leading icon node (klun extra). */
     icon?: ReactNode;
-    footer?: ReactNode;
+    /** Footer content. `undefined` → default Cancel/OK buttons; `null` → no footer. */
+    footer?: ReactNode | null;
+    okText?: ReactNode;
+    cancelText?: ReactNode;
+    /** Loading spinner on the OK button (e.g. while an async submit runs). */
+    confirmLoading?: boolean;
+    /** OK button type. `"danger"` renders a red button. Default `"primary"`. */
+    okType?: "primary" | "danger";
+    okButtonProps?: Partial<DefaultButtonProps>;
+    cancelButtonProps?: Partial<DefaultButtonProps>;
+    /** Dialog width. Default `520`. */
     width?: number | string;
-    /** Show the close button + allow Esc/backdrop close. Default true. */
+    /** Vertically center the dialog. Default `false` (top-aligned, like antd). */
+    centered?: boolean;
+    /** Show the top-right close button. Default `true`. */
     closable?: boolean;
-    /** Close when the dimmed backdrop is clicked. Default true. */
+    /** Close when the backdrop (mask) is clicked. Default `true`. */
+    maskClosable?: boolean;
+    /** Alias of `maskClosable`. */
     closeOnBackdrop?: boolean;
+    /** Allow Esc to close. Default `true`. */
+    keyboard?: boolean;
+    /** Render the dimmed backdrop. Default `true`. */
+    mask?: boolean;
+    /** Drag the dialog by its header. Default `false`. */
+    draggable?: boolean;
+    /** z-index of the modal layer. */
+    zIndex?: number;
+    /** Called after the modal has closed. */
+    afterClose?: () => void;
+    /** Called whenever the open state changes. */
+    afterOpenChange?: (open: boolean) => void;
     children?: ReactNode;
     style?: CSSProperties;
 }
-/** Klun UI Modal — centered dialog with dimmed backdrop. Controlled via `open` / `onClose`. */
+/**
+ * Klun UI Modal — controlled dialog with a dimmed backdrop. antd-aligned: a
+ * default Cancel/OK footer driven by `onOk`/`onCancel`/`confirmLoading`
+ * (pass `footer={null}` to hide it), plus `centered`, `maskClosable`,
+ * `keyboard`, `mask`, `draggable` and lifecycle callbacks.
+ */
 declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDivElement>>;
 
 interface PopconfirmProps extends Omit<HTMLAttributes<HTMLSpanElement>, "title"> {

package/dist/index.js

@@ -1,4 +1,4 @@
-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, CopyButton, CounterInput, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DigitInput, Divider, Drawer, Dropdown, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, 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, Spinner, 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, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW } from './chunk-7EOW4LHP.js';
+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, CopyButton, CounterInput, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DigitInput, Divider, Drawer, Dropdown, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, 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, Spinner, 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, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW } from './chunk-Z2TY6K3O.js';
 export { cx } from './chunk-T225J6LV.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/styles.css

@@ -8832,6 +8832,15 @@ body {
 .klun-drawer--left {
   justify-content: flex-start;
 }
+.klun-drawer--top {
+  align-items: flex-start;
+}
+.klun-drawer--bottom {
+  align-items: flex-end;
+}
+.klun-drawer--no-mask {
+  background: transparent;
+}
 .klun-drawer__panel {
   max-width: 100%;
   height: 100%;
@@ -8846,6 +8855,12 @@ body {
 .klun-drawer--left .klun-drawer__panel {
   animation: klun-drawer-in-left 0.24s cubic-bezier(0.4, 0, 0.2, 1);
 }
+.klun-drawer--top .klun-drawer__panel {
+  animation: klun-drawer-in-top 0.24s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.klun-drawer--bottom .klun-drawer__panel {
+  animation: klun-drawer-in-bottom 0.24s cubic-bezier(0.4, 0, 0.2, 1);
+}
 @keyframes klun-drawer-in-right {
   from {
     transform: translateX(24px);
@@ -8866,6 +8881,26 @@ body {
     opacity: 1;
   }
 }
+@keyframes klun-drawer-in-top {
+  from {
+    transform: translateY(-24px);
+    opacity: 0.6;
+  }
+  to {
+    transform: none;
+    opacity: 1;
+  }
+}
+@keyframes klun-drawer-in-bottom {
+  from {
+    transform: translateY(24px);
+    opacity: 0.6;
+  }
+  to {
+    transform: none;
+    opacity: 1;
+  }
+}
 .klun-drawer__header {
   display: flex;
   align-items: center;
@@ -8878,6 +8913,11 @@ body {
   font: var(--klun-text-label-lg);
   color: var(--klun-text-strong-950);
 }
+.klun-drawer__extra {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
 .klun-drawer__close {
   display: inline-flex;
   border: none;
@@ -8972,26 +9012,43 @@ body {
   inset: 0;
   z-index: 100;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   padding: 24px;
+  overflow-y: auto;
   background: var(--klun-overlay-overlay-gray);
   backdrop-filter: blur(2px);
 }
+.klun-modal--centered {
+  align-items: center;
+}
+.klun-modal--no-mask {
+  background: transparent;
+  backdrop-filter: none;
+}
 .klun-modal__dialog {
   max-width: 100%;
-  max-height: 90vh;
-  overflow: auto;
+  margin: min(8vh, 80px) 0;
   background: var(--klun-bg-white-0);
   border-radius: var(--klun-radius-3xl);
   box-shadow: var(--klun-shadow-lg);
 }
+.klun-modal--centered .klun-modal__dialog {
+  margin: 0;
+}
 .klun-modal__header {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 20px 20px 0;
 }
+.klun-modal__header--draggable {
+  cursor: move;
+  user-select: none;
+}
+.klun-modal__header--draggable .klun-modal__close {
+  cursor: pointer;
+}
 .klun-modal__icon {
   width: 40px;
   height: 40px;
@@ -9037,6 +9094,10 @@ body {
   padding: 16px 20px 20px;
   border-top: 1px solid var(--klun-stroke-soft-200);
 }
+.klun-modal__footer--flush {
+  border-top: none;
+  padding-top: 20px;
+}
 
 /* src/components/overlays/Popconfirm.css */
 .klun-popconfirm {