@kjun-ui/native 0.10.0 → 0.12.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
@@ -5090,3 +5106,85 @@
   font-family: var(--kjun-font);
   font-variant-numeric: normal;
 }
+
+/* KjunText, KjunStack, KjunInline: 글자 역할과 간격 단계를 이름으로만 고른다. 값은 모두 기존 토큰이다. */
+
+/* KjunText: 크기·줄높이·굵기는 .kjun-type-* 역할이 정한다. 앱의 h1·p 요소 규칙이 들어오지 않도록
+   여백·색·글꼴을 명시하고, 색과 글꼴은 부모(브랜드 카드 등)를 따른다. 클래스를 두 번 써서 앱의
+   `.prose p` 같은 규칙(0,1,1)보다 강하게 하되, .kjun-scope 밖(포털 등)에서도 그대로 적용된다. */
+.kjun-text.kjun-text {
+  margin: 0;
+  color: inherit;
+  font-family: inherit;
+  overflow-wrap: anywhere;
+}
+.kjun-text.kjun-type-number-sm,
+.kjun-text.kjun-type-number-md,
+.kjun-text.kjun-type-number-lg,
+.kjun-text.kjun-type-display-sm,
+.kjun-text.kjun-type-display-md,
+.kjun-text.kjun-type-display-lg {
+  font-family: var(--_kjun-font-numeric);
+}
+/* 숫자는 자릿수 사이에서 끊지 않는다. display 크기는 휴대폰 폭을 넘지 않도록 기본 규칙(anywhere)을 둔다. */
+.kjun-text.kjun-type-number-sm,
+.kjun-text.kjun-type-number-md,
+.kjun-text.kjun-type-number-lg { overflow-wrap: normal; }
+.kjun-text.kjun-text[data-tone="secondary"] { color: var(--_kjun-color-text-secondary); }
+.kjun-text.kjun-text[data-tone="tertiary"] { color: var(--_kjun-color-text-tertiary); }
+.kjun-text.kjun-text[data-tone="disabled"] { color: var(--_kjun-color-text-disabled); }
+.kjun-text[data-align="start"] { text-align: start; }
+.kjun-text[data-align="center"] { text-align: center; }
+.kjun-text[data-align="end"] { text-align: end; }
+.kjun-text[data-max-lines] {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--_kjun-text-lines);
+  overflow: hidden;
+}
+
+/* KjunStack: 세로 쌓기. 간격은 space.stack·space.section 단계다.
+   클래스 대신 data 속성을 써서 KJUN 마크업으로 판정되지 않는다. 그래서 안에 넣은 앱 요소는 Stack이
+   없을 때와 같은 스타일을 받고, Stack을 몇 겹 겹쳐도 달라지지 않는다. */
+[data-kjun-stack] {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--_kjun-geometry-space-stack-md);
+  min-width: 0;
+}
+[data-kjun-stack][data-gap="none"] { gap: 0; }
+[data-kjun-stack][data-gap="sm"] { gap: var(--_kjun-geometry-space-stack-sm); }
+[data-kjun-stack][data-gap="lg"] { gap: var(--_kjun-geometry-space-stack-lg); }
+[data-kjun-stack][data-gap="section-sm"] { gap: var(--_kjun-geometry-space-section-sm); }
+[data-kjun-stack][data-gap="section-md"] { gap: var(--_kjun-geometry-space-section-md); }
+[data-kjun-stack][data-gap="section-lg"] { gap: var(--_kjun-geometry-space-section-lg); }
+[data-kjun-stack][data-align="start"] { align-items: flex-start; }
+[data-kjun-stack][data-align="center"] { align-items: center; }
+[data-kjun-stack][data-align="end"] { align-items: flex-end; }
+
+/* KjunInline: 가로 배치. 간격은 space.inline 단계이고, 좁은 화면에서는 기본으로 줄바꿈한다. */
+[data-kjun-inline] {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--_kjun-geometry-space-inline-sm);
+  min-width: 0;
+}
+[data-kjun-inline][data-wrap="false"] { flex-wrap: nowrap; }
+[data-kjun-inline][data-gap="none"] { gap: 0; }
+[data-kjun-inline][data-gap="xs"] { gap: var(--_kjun-geometry-space-inline-xs); }
+[data-kjun-inline][data-gap="md"] { gap: var(--_kjun-geometry-space-inline-md); }
+[data-kjun-inline][data-gap="lg"] { gap: var(--_kjun-geometry-space-inline-lg); }
+[data-kjun-inline][data-align="start"] { align-items: flex-start; }
+[data-kjun-inline][data-align="end"] { align-items: flex-end; }
+[data-kjun-inline][data-align="baseline"] { align-items: baseline; }
+[data-kjun-inline][data-align="stretch"] { align-items: stretch; }
+[data-kjun-inline][data-justify="center"] { justify-content: center; }
+[data-kjun-inline][data-justify="end"] { justify-content: flex-end; }
+[data-kjun-inline][data-justify="between"] { justify-content: space-between; }
+
+/* 직계 폼 그룹은 자체 아래 여백 대신 부모 gap만 따른다. */
+:is([data-kjun-stack], [data-kjun-inline]) > .kjun-form-group { margin-bottom: 0; }

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/packages/native/src/index.d.cts

@@ -9,6 +9,7 @@ export { KjunModal, KjunFormActions } from "./modal.cjs";
 export type { KjunModalProps, KjunFormActionsProps } from "./modal.cjs";
 export type { KjunColors, KjunDomainColors, ColorRole, DomainColorRole, ButtonSize, InputSize, ButtonVariant, } from "@kjun-ui/tokens";
 export * from "./display.cjs";
+export * from "./layout-primitives.cjs";
 export * from "./feedback.cjs";
 export * from "./controls.cjs";
 export { KjunPopover, KjunTooltip, KjunDropdown, KjunDropdownItem, KjunDropdownDivider, KjunMenuButton, KjunDrawer, } from "./layers.cjs";

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

@@ -9,6 +9,7 @@ export { KjunModal, KjunFormActions } from "./modal.js";
 export type { KjunModalProps, KjunFormActionsProps } from "./modal.js";
 export type { KjunColors, KjunDomainColors, ColorRole, DomainColorRole, ButtonSize, InputSize, ButtonVariant, } from "@kjun-ui/tokens";
 export * from "./display.js";
+export * from "./layout-primitives.js";
 export * from "./feedback.js";
 export * from "./controls.js";
 export { KjunPopover, KjunTooltip, KjunDropdown, KjunDropdownItem, KjunDropdownDivider, KjunMenuButton, KjunDrawer, } from "./layers.js";

package/dist/types/packages/native/src/layout-primitives.d.cts

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { type InlineAlign, type InlineGap, type InlineJustify, type StackAlign, type StackGap, type TextAlign, type TextTone, type TextVariant } from "../../../shared/package-runtime/layout-primitives.cjs";
+export type { InlineAlign, InlineGap, InlineJustify, StackAlign, StackGap, TextAlign, TextTone, TextVariant };
+export interface KjunTextProps {
+    /** Typography role; every size, line height and weight comes from tokens.typography. */
+    variant?: TextVariant;
+    /** Text color role. */
+    tone?: TextTone;
+    align?: TextAlign;
+    /** Clamp to this many lines with an ellipsis (numberOfLines). */
+    maxLines?: number;
+    style?: StyleProp<TextStyle>;
+    children?: ReactNode;
+}
+export declare function KjunText({ variant, tone, align, maxLines, style, children }: KjunTextProps): import("react/jsx-runtime").JSX.Element;
+export interface KjunStackProps {
+    /** Space between children: space.stack (sm·md·lg) or space.section (section-sm·md·lg). */
+    gap?: StackGap;
+    align?: StackAlign;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+}
+export declare function KjunStack({ gap, align, style, children }: KjunStackProps): import("react/jsx-runtime").JSX.Element;
+export interface KjunInlineProps {
+    /** Space between children: space.inline (xs·sm·md·lg). */
+    gap?: InlineGap;
+    align?: InlineAlign;
+    justify?: InlineJustify;
+    /** Wrap onto new lines when the row runs out of width. Default true. */
+    wrap?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+}
+export declare function KjunInline({ gap, align, justify, wrap, style, children }: KjunInlineProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/layout-primitives.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { type InlineAlign, type InlineGap, type InlineJustify, type StackAlign, type StackGap, type TextAlign, type TextTone, type TextVariant } from "../../../shared/package-runtime/layout-primitives.js";
+export type { InlineAlign, InlineGap, InlineJustify, StackAlign, StackGap, TextAlign, TextTone, TextVariant };
+export interface KjunTextProps {
+    /** Typography role; every size, line height and weight comes from tokens.typography. */
+    variant?: TextVariant;
+    /** Text color role. */
+    tone?: TextTone;
+    align?: TextAlign;
+    /** Clamp to this many lines with an ellipsis (numberOfLines). */
+    maxLines?: number;
+    style?: StyleProp<TextStyle>;
+    children?: ReactNode;
+}
+export declare function KjunText({ variant, tone, align, maxLines, style, children }: KjunTextProps): import("react/jsx-runtime").JSX.Element;
+export interface KjunStackProps {
+    /** Space between children: space.stack (sm·md·lg) or space.section (section-sm·md·lg). */
+    gap?: StackGap;
+    align?: StackAlign;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+}
+export declare function KjunStack({ gap, align, style, children }: KjunStackProps): import("react/jsx-runtime").JSX.Element;
+export interface KjunInlineProps {
+    /** Space between children: space.inline (xs·sm·md·lg). */
+    gap?: InlineGap;
+    align?: InlineAlign;
+    justify?: InlineJustify;
+    /** Wrap onto new lines when the row runs out of width. Default true. */
+    wrap?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+}
+export declare function KjunInline({ gap, align, justify, wrap, style, children }: KjunInlineProps): import("react/jsx-runtime").JSX.Element;

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/dist/types/shared/package-runtime/layout-primitives.d.cts

@@ -0,0 +1,15 @@
+export type TextVariant = "pageTitle" | "sectionTitle" | "cardTitle" | "body" | "label" | "meta" | "caption" | "numberSm" | "numberMd" | "numberLg" | "displaySm" | "displayMd" | "displayLg";
+export type TextTone = "default" | "secondary" | "tertiary" | "disabled";
+export type TextAlign = "start" | "center" | "end";
+export type TextTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
+export type StackGap = "none" | "sm" | "md" | "lg" | "section-sm" | "section-md" | "section-lg";
+export type StackAlign = "stretch" | "start" | "center" | "end";
+export type InlineGap = "none" | "xs" | "sm" | "md" | "lg";
+export type InlineAlign = "start" | "center" | "end" | "baseline" | "stretch";
+export type InlineJustify = "start" | "center" | "end" | "between";
+export declare const titleVariants: readonly TextVariant[];
+/** The .kjun-type-* role class (pageTitle → kjun-type-page-title). */
+export declare const textTypeClass: (variant: TextVariant) => string;
+/** Document tag when the app gives no `as`: titles are headings, numbers are inline, the rest are paragraphs. */
+export declare const defaultTextTag: (variant: TextVariant) => TextTag;
+export declare const isNumericVariant: (variant: TextVariant) => boolean;

package/dist/types/shared/package-runtime/layout-primitives.d.ts

@@ -0,0 +1,15 @@
+export type TextVariant = "pageTitle" | "sectionTitle" | "cardTitle" | "body" | "label" | "meta" | "caption" | "numberSm" | "numberMd" | "numberLg" | "displaySm" | "displayMd" | "displayLg";
+export type TextTone = "default" | "secondary" | "tertiary" | "disabled";
+export type TextAlign = "start" | "center" | "end";
+export type TextTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
+export type StackGap = "none" | "sm" | "md" | "lg" | "section-sm" | "section-md" | "section-lg";
+export type StackAlign = "stretch" | "start" | "center" | "end";
+export type InlineGap = "none" | "xs" | "sm" | "md" | "lg";
+export type InlineAlign = "start" | "center" | "end" | "baseline" | "stretch";
+export type InlineJustify = "start" | "center" | "end" | "between";
+export declare const titleVariants: readonly TextVariant[];
+/** The .kjun-type-* role class (pageTitle → kjun-type-page-title). */
+export declare const textTypeClass: (variant: TextVariant) => string;
+/** Document tag when the app gives no `as`: titles are headings, numbers are inline, the rest are paragraphs. */
+export declare const defaultTextTag: (variant: TextVariant) => TextTag;
+export declare const isNumericVariant: (variant: TextVariant) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kjun-ui/native",
-  "version": "0.10.0",
+  "version": "0.12.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.12.0",
+    "@kjun-ui/icons": "0.12.0"
   },
   "peerDependencies": {
     "react": "^19.2.3",