@kjun-ui/native 0.11.0 → 0.12.1

package/dist/styles.css

@@ -5106,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/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/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/dist/types/shared/package-runtime/use-layer.d.cts

@@ -35,6 +35,7 @@ export declare function usePopupFocusGuard(trigger: {
 };
 export declare function useActiveLayerScope(): boolean;
 export declare function focusTrigger(target: FocusTarget | null | undefined): FocusTarget | HTMLElement | null | undefined;
+export declare function isRestorableFocus(item: FocusTarget | null | undefined): boolean;
 export declare function useLayer(open: boolean, present: boolean, kind: LayerKind, close: () => void, trigger?: {
     current: FocusTarget | null;
 }, returnFocus?: () => FocusTarget | null | false | undefined): {

package/dist/types/shared/package-runtime/use-layer.d.ts

@@ -35,6 +35,7 @@ export declare function usePopupFocusGuard(trigger: {
 };
 export declare function useActiveLayerScope(): boolean;
 export declare function focusTrigger(target: FocusTarget | null | undefined): FocusTarget | HTMLElement | null | undefined;
+export declare function isRestorableFocus(item: FocusTarget | null | undefined): boolean;
 export declare function useLayer(open: boolean, present: boolean, kind: LayerKind, close: () => void, trigger?: {
     current: FocusTarget | null;
 }, returnFocus?: () => FocusTarget | null | false | undefined): {

package/package.json

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