@kjun-ui/native 0.10.0 → 0.11.0

package/dist/styles.css

@@ -417,6 +417,7 @@
   --_kjun-extension-drawer-bottom-radius: 16px;
   --_kjun-extension-drawer-radius: 0px;
   --_kjun-extension-drawer-close-radius: 8px;
+  --_kjun-extension-drawer-sheet-gap: 48px;
   --_kjun-extension-drawer-width: 400px;
   --_kjun-extension-drawer-close-size: 32px;
   --_kjun-extension-drawer-close-icon-size: 16px;
@@ -2559,6 +2560,19 @@
   flex-direction: column;
   outline: none;
 }
+/* Safe areas arrive as --_kjun-drawer-safe-top/bottom on the overlay; the panel surface extends under them. */
+.kjun-drawer-overlay:not([data-position="bottom"]) .kjun-drawer-dialog { padding-top: var(--_kjun-drawer-safe-top); }
+.kjun-drawer-overlay:not([data-position="top"]) .kjun-drawer-dialog { padding-bottom: var(--_kjun-drawer-safe-bottom); }
+/* Top and bottom sheets stop short of the opposite edge (its safe area plus the sheet gap); only the body scrolls. */
+.kjun-drawer-overlay[data-position="bottom"] {
+  --_kjun-drawer-sheet-max: calc(100dvh - var(--_kjun-drawer-safe-top) - var(--_kjun-extension-drawer-sheet-gap));
+}
+.kjun-drawer-overlay[data-position="top"] {
+  --_kjun-drawer-sheet-max: calc(100dvh - var(--_kjun-drawer-safe-bottom) - var(--_kjun-extension-drawer-sheet-gap));
+}
+.kjun-drawer-overlay:is([data-position="top"], [data-position="bottom"]) :is(.kjun-drawer, .kjun-drawer-dialog) {
+  max-height: var(--_kjun-drawer-max-height, var(--_kjun-drawer-sheet-max));
+}
 .kjun-drawer-header {
   display: flex;
   align-items: center;
@@ -4393,6 +4407,8 @@
     .kjun-kpi-row__value {
     white-space: normal;
     overflow-wrap: anywhere;
+    /* Korean labels and values wrap at spaces, not between syllables; anywhere stays the last resort. */
+    word-break: keep-all;
   }
   .kjun-kpi-row--mobile-summary
     .kjun-kpi-row__item--secondary

package/dist/types/packages/native/src/drawer.d.cts

@@ -14,5 +14,13 @@ export interface KjunDrawerProps {
     children: ReactNode;
     onClose?: () => void;
     ariaLabel?: string;
+    /** Top safe area, padded inside top and side drawers and kept clear above a bottom sheet. */
+    safeAreaTop?: number;
+    /** Bottom safe area, padded inside bottom and side drawers and kept clear below a top sheet. */
+    safeAreaBottom?: number;
+    /** Height limit for top and bottom drawers; by default they stop a sheet gap short of the opposite edge. */
+    maxHeight?: number;
+    /** Keeps the panel above the on-screen keyboard (devices only). */
+    avoidKeyboard?: boolean;
 }
-export declare function KjunDrawer({ open, onOpenChange, title, position, width, closable, closeOnOverlay, closeOnEsc, noPadding, header, footer, children, onClose, ariaLabel, }: KjunDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunDrawer({ open, onOpenChange, title, position, width, closable, closeOnOverlay, closeOnEsc, noPadding, header, footer, children, onClose, ariaLabel, safeAreaTop, safeAreaBottom, maxHeight, avoidKeyboard, }: KjunDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/drawer.d.ts

@@ -14,5 +14,13 @@ export interface KjunDrawerProps {
     children: ReactNode;
     onClose?: () => void;
     ariaLabel?: string;
+    /** Top safe area, padded inside top and side drawers and kept clear above a bottom sheet. */
+    safeAreaTop?: number;
+    /** Bottom safe area, padded inside bottom and side drawers and kept clear below a top sheet. */
+    safeAreaBottom?: number;
+    /** Height limit for top and bottom drawers; by default they stop a sheet gap short of the opposite edge. */
+    maxHeight?: number;
+    /** Keeps the panel above the on-screen keyboard (devices only). */
+    avoidKeyboard?: boolean;
 }
-export declare function KjunDrawer({ open, onOpenChange, title, position, width, closable, closeOnOverlay, closeOnEsc, noPadding, header, footer, children, onClose, ariaLabel, }: KjunDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunDrawer({ open, onOpenChange, title, position, width, closable, closeOnOverlay, closeOnEsc, noPadding, header, footer, children, onClose, ariaLabel, safeAreaTop, safeAreaBottom, maxHeight, avoidKeyboard, }: KjunDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/feedback.d.cts

@@ -1,7 +1,10 @@
 import { type KjunFeedback } from "@kjun-ui/tokens";
 import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
 export declare function useKjunFeedback(): KjunFeedback;
-export declare function KjunFeedbackProvider({ children }: {
+export interface KjunFeedbackProviderProps {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function KjunFeedbackProvider({ children, style }: KjunFeedbackProviderProps): import("react/jsx-runtime").JSX.Element;
 export type { ConfirmOptions, KjunFeedback, PromptOptions, ToastOptions } from "@kjun-ui/tokens";

package/dist/types/packages/native/src/feedback.d.ts

@@ -1,7 +1,10 @@
 import { type KjunFeedback } from "@kjun-ui/tokens";
 import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
 export declare function useKjunFeedback(): KjunFeedback;
-export declare function KjunFeedbackProvider({ children }: {
+export interface KjunFeedbackProviderProps {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function KjunFeedbackProvider({ children, style }: KjunFeedbackProviderProps): import("react/jsx-runtime").JSX.Element;
 export type { ConfirmOptions, KjunFeedback, PromptOptions, ToastOptions } from "@kjun-ui/tokens";

package/dist/types/shared/package-runtime/drawer-geometry.d.cts

@@ -0,0 +1,36 @@
+export type DrawerPosition = "left" | "right" | "top" | "bottom";
+export interface DrawerFrameInput {
+    position: DrawerPosition;
+    windowHeight: number;
+    safeAreaTop: number;
+    safeAreaBottom: number;
+    /** Space a top or bottom sheet leaves at the opposite edge. */
+    gap: number;
+    /** Height of the window the keyboard covers (0 when hidden). */
+    keyboard: number;
+    maxHeight?: number;
+}
+export interface DrawerFrame {
+    maxHeight: number;
+    height: number | undefined;
+    paddingTop: number;
+    paddingBottom: number;
+    lift: number;
+}
+/**
+ * Keyboard events a drawer listens to. Only iOS: React Native's Android Modal window is adjustResize,
+ * so the system already shrinks the modal and a measured root height covers it.
+ */
+export declare function keyboardEvents(os: string): {
+    readonly show: "keyboardWillShow";
+    readonly hide: "keyboardWillHide";
+} | null;
+/** The part of the window the keyboard covers; 0 when the platform already resized the window. */
+export declare function keyboardOverlap(windowHeight: number, keyboardScreenY: number): number;
+export declare function drawerFrame({ position, windowHeight, safeAreaTop, safeAreaBottom, gap, keyboard, maxHeight }: DrawerFrameInput): DrawerFrame;
+/** Web overlay variables read by the drawer CSS (tokens controls.css). */
+export declare function drawerOverlayVars({ safeAreaTop, safeAreaBottom, maxHeight }: {
+    safeAreaTop?: number;
+    safeAreaBottom?: number;
+    maxHeight?: number;
+}): Record<string, string>;

package/dist/types/shared/package-runtime/drawer-geometry.d.ts

@@ -0,0 +1,36 @@
+export type DrawerPosition = "left" | "right" | "top" | "bottom";
+export interface DrawerFrameInput {
+    position: DrawerPosition;
+    windowHeight: number;
+    safeAreaTop: number;
+    safeAreaBottom: number;
+    /** Space a top or bottom sheet leaves at the opposite edge. */
+    gap: number;
+    /** Height of the window the keyboard covers (0 when hidden). */
+    keyboard: number;
+    maxHeight?: number;
+}
+export interface DrawerFrame {
+    maxHeight: number;
+    height: number | undefined;
+    paddingTop: number;
+    paddingBottom: number;
+    lift: number;
+}
+/**
+ * Keyboard events a drawer listens to. Only iOS: React Native's Android Modal window is adjustResize,
+ * so the system already shrinks the modal and a measured root height covers it.
+ */
+export declare function keyboardEvents(os: string): {
+    readonly show: "keyboardWillShow";
+    readonly hide: "keyboardWillHide";
+} | null;
+/** The part of the window the keyboard covers; 0 when the platform already resized the window. */
+export declare function keyboardOverlap(windowHeight: number, keyboardScreenY: number): number;
+export declare function drawerFrame({ position, windowHeight, safeAreaTop, safeAreaBottom, gap, keyboard, maxHeight }: DrawerFrameInput): DrawerFrame;
+/** Web overlay variables read by the drawer CSS (tokens controls.css). */
+export declare function drawerOverlayVars({ safeAreaTop, safeAreaBottom, maxHeight }: {
+    safeAreaTop?: number;
+    safeAreaBottom?: number;
+    maxHeight?: number;
+}): Record<string, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kjun-ui/native",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "license": "MIT",
   "homepage": "https://ui.kjun.dev",
   "repository": {
@@ -47,8 +47,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@kjun-ui/tokens": "0.10.0",
-    "@kjun-ui/icons": "0.10.0"
+    "@kjun-ui/tokens": "0.11.0",
+    "@kjun-ui/icons": "0.11.0"
   },
   "peerDependencies": {
     "react": "^19.2.3",