moru-krds-react 0.1.0

package/dist/lib/krds.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/krds.ts"],"sourcesContent":["/**\n * KRDS 공통 타입과 도우미.\n *\n * 여기 있는 값은 전부 킷(`public/krds/krds.min.css`)에서 실측한 것이다. 지어낸 값이 없다.\n */\n\n/**\n * 크기.\n *\n * ★ 버튼과 입력칸이 **같은 이름에 같은 높이**다. 실측(1rem = 10px):\n *\n * | 이름    | 높이 | 버튼 | 입력·셀렉트 |\n * |---------|-----|------|------------|\n * | xsmall  | 32  | ○    | —          |\n * | small   | 40  | ○    | ○          |\n * | medium  | 48  | ○    | ○          |\n * | large   | 56  | ○    | ○          |\n * | xlarge  | 64  | ○    | 80(예외)   |\n *\n * 그래서 한 줄에 놓을 버튼과 입력칸에는 **같은 size 를 준다.**\n * 예전에 입력칸에 크기를 안 줘서 킷 기본값 large(56)로 렌더되고 옆 버튼은 small(40)이라\n * 16px 이 어긋났다 — 부품에서 기본값을 명시해 이 실수를 구조적으로 막는다.\n */\nexport type KrdsSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\n\n/** 폼 요소가 실제로 지원하는 크기(킷에 xsmall 규칙이 없다). */\nexport type KrdsFieldSize = Exclude<KrdsSize, 'xsmall'>;\n\n/**\n * 의미 색상. 킷의 배지·태그·알림이 공통으로 쓰는 이름이다.\n */\nexport type KrdsTone =\n  | 'primary'\n  | 'secondary'\n  | 'gray'\n  | 'point'\n  | 'danger'\n  | 'warning'\n  | 'success'\n  | 'information';\n\n/** 폼 필드 상태. 킷 클래스는 `.is-error` · `.is-success` · `.is-information`. */\nexport type KrdsFieldState = 'error' | 'success' | 'information';\n\n/**\n * 킷이 제공하는 아이콘 이름(`ico-` 접두사를 뺀 것).\n * `<i className=\"svg-icon ico-sch\" />` 처럼 쓴다.\n *\n * 킷의 아이콘 파일은 `public/krds/img/component/icon/ico_*.svg` 에 있고 CSS 가 mask 로 물린다.\n * **여기 없는 이름을 쓰면 검은 네모가 나온다** — 그래서 타입으로 좁혀 둔다.\n * 아래 목록은 킷 CSS 에서 `\\\\.ico-([a-z0-9-]+)` 로 뽑은 68종 전부다. 킷을 올릴 때 다시 뽑는다.\n */\nexport type KrdsIcon =\n  | 'all' | 'angle' | 'blog' | 'bread-home' | 'cal-move' | 'calendar'\n  | 'call' | 'checkbox' | 'complete-fill' | 'del' | 'delete-fill' | 'down'\n  | 'ellipsis' | 'email' | 'error-fill' | 'facebook' | 'faq' | 'file'\n  | 'filter' | 'flag' | 'fold' | 'func' | 'global' | 'go'\n  | 'go-top' | 'help' | 'information-fill' | 'instagram' | 'invalid' | 'join'\n  | 'like' | 'link' | 'log' | 'login-go' | 'login-type01' | 'login-type02'\n  | 'login-type03' | 'login-type04' | 'login-type05' | 'login-type06' | 'logout' | 'modal-close'\n  | 'more' | 'my' | 'page-next' | 'plus' | 'popup-close' | 'print'\n  | 'pw-visible' | 'pw-visible-on' | 'refresh' | 'reset' | 'sch' | 'sch-plus'\n  | 'scrap' | 'search' | 'setting' | 'share' | 'sns-x' | 'success-fill'\n  | 'swiper-play' | 'swiper-stop' | 'toggle' | 'tooltip' | 'upload' | 'urgent-danger'\n  | 'view-mode' | 'youtube';\n\n/** 클래스 이름을 합친다. falsy 는 버린다. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n  return parts.filter(Boolean).join(' ');\n}\n\n/** 상태 → 킷 클래스. */\nexport function stateClass(state?: KrdsFieldState): string | undefined {\n  return state && `is-${state}`;\n}\n"],"mappings":"AAmEO,SAAS,MAAM,OAAyD;AAC7E,SAAO,MAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AACvC;AAGO,SAAS,WAAW,OAA4C;AACrE,SAAO,SAAS,MAAM,KAAK;AAC7B;","names":[]}

package/dist/lib/link.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 링크 구현 — **이 묶음이 프레임워크에 닿는 유일한 자리다.**
+ *
+ * 부품 안에서 화면 이동이 필요할 때는 프레임워크의 링크를 직접 부르지 않고 여기 `UiLink` 를 쓴다.
+ * 그래서 Next·React Router·순수 React 어디에 올리든 **고칠 파일이 이 하나**다.
+ *
+ * 기본값은 맨 `<a>` 다 — 아무 프레임워크에도 묶이지 않는다.
+ * 클라이언트 라우팅을 쓰고 있다면 아래처럼 이 파일만 바꾼다.
+ *
+ * ```tsx
+ * // Next.js (App Router · Pages Router 공통)
+ * import NextLink from 'next/link';
+ * export function UiLink({ href, ...rest }: UiLinkProps) {
+ *   return <NextLink href={href} {...rest} />;
+ * }
+ *
+ * // React Router
+ * import { Link } from 'react-router';
+ * export function UiLink({ href, ...rest }: UiLinkProps) {
+ *   return <Link to={href} {...rest} />;
+ * }
+ * ```
+ *
+ * 왜 context 나 전역 등록이 아닌가 — 부품 중 절반이 서버 컴포넌트로도 쓰인다.
+ * React context 는 서버 컴포넌트에서 못 쓰고, 모듈 전역 등록은 서버와 클라이언트의
+ * 모듈 그래프가 갈라져 있어 한쪽만 설정되는 함정이 있다. 그냥 import 를 한 곳에 모으는 것이
+ * 가장 단순하고 양쪽에서 똑같이 동작한다.
+ */
+import type { ComponentPropsWithRef } from 'react';
+export type UiLinkProps = ComponentPropsWithRef<'a'> & {
+    href: string;
+};
+export declare function UiLink({ href, ...rest }: UiLinkProps): import("react").JSX.Element;
+//# sourceMappingURL=link.d.ts.map

package/dist/lib/link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/lib/link.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG,qBAAqB,CAAC,GAAG,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAExE,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAEpD"}

package/dist/lib/link.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+function UiLink({ href, ...rest }) {
+  return /* @__PURE__ */ jsx("a", { href, ...rest });
+}
+export {
+  UiLink
+};
+//# sourceMappingURL=link.js.map

package/dist/lib/link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/link.tsx"],"sourcesContent":["/**\n * 링크 구현 — **이 묶음이 프레임워크에 닿는 유일한 자리다.**\n *\n * 부품 안에서 화면 이동이 필요할 때는 프레임워크의 링크를 직접 부르지 않고 여기 `UiLink` 를 쓴다.\n * 그래서 Next·React Router·순수 React 어디에 올리든 **고칠 파일이 이 하나**다.\n *\n * 기본값은 맨 `<a>` 다 — 아무 프레임워크에도 묶이지 않는다.\n * 클라이언트 라우팅을 쓰고 있다면 아래처럼 이 파일만 바꾼다.\n *\n * ```tsx\n * // Next.js (App Router · Pages Router 공통)\n * import NextLink from 'next/link';\n * export function UiLink({ href, ...rest }: UiLinkProps) {\n *   return <NextLink href={href} {...rest} />;\n * }\n *\n * // React Router\n * import { Link } from 'react-router';\n * export function UiLink({ href, ...rest }: UiLinkProps) {\n *   return <Link to={href} {...rest} />;\n * }\n * ```\n *\n * 왜 context 나 전역 등록이 아닌가 — 부품 중 절반이 서버 컴포넌트로도 쓰인다.\n * React context 는 서버 컴포넌트에서 못 쓰고, 모듈 전역 등록은 서버와 클라이언트의\n * 모듈 그래프가 갈라져 있어 한쪽만 설정되는 함정이 있다. 그냥 import 를 한 곳에 모으는 것이\n * 가장 단순하고 양쪽에서 똑같이 동작한다.\n */\nimport type { ComponentPropsWithRef } from 'react';\n\nexport type UiLinkProps = ComponentPropsWithRef<'a'> & { href: string };\n\nexport function UiLink({ href, ...rest }: UiLinkProps) {\n  return <a href={href} {...rest} />;\n}\n"],"mappings":"AAiCS;AADF,SAAS,OAAO,EAAE,MAAM,GAAG,KAAK,GAAgB;AACrD,SAAO,oBAAC,OAAE,MAAa,GAAG,MAAM;AAClC;","names":[]}

package/dist/main-menu/index.d.ts

@@ -0,0 +1,123 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+/** 마지막 단(3뎁스) 항목. 여기서 트리가 끝난다 — 규격의 「최대 3수준」을 타입으로 막은 자리다. */
+export type MainMenuLink = {
+    /** React key. 없으면 차례를 쓴다. */
+    id?: string;
+    /** 메뉴 이름. */
+    label: ReactNode;
+    /** 이동 주소. 없으면 버튼이 된다. */
+    href?: string;
+    /** 새 창으로 연다. 외부 링크면 화살표 아이콘이 함께 붙는다. */
+    newWindow?: boolean;
+    /** 지금 보고 있는 화면. `aria-current="page"` 가 붙는다. */
+    current?: boolean;
+    /** 메뉴 설명. 한 목록에 하나라도 있으면 그 목록 전체가 킷의 설명형으로 바뀐다. */
+    description?: string;
+    /** 눌렀을 때. */
+    onSelect?: () => void;
+};
+/** 드롭다운 오른쪽(또는 아래)의 신규 서비스 배너 — 킷 `gnb-sub-banner`. */
+export type MainMenuBanner = {
+    /** 배지 글자. 배지는 대화형이 아니므로 글자만 넣는다. */
+    badge?: ReactNode;
+    /** 배너 글자. */
+    label: ReactNode;
+    /** 이동 주소. */
+    href?: string;
+    /** 새 창으로 연다. */
+    newWindow?: boolean;
+    /** 배너를 오른쪽 칸에 세운다. 기본은 목록 아래. */
+    side?: boolean;
+    /** 눌렀을 때. */
+    onSelect?: () => void;
+};
+/** 2뎁스. `items` 가 없으면 왼쪽 칸에 링크 한 줄로만 놓인다. */
+export type MainMenuGroup = {
+    /** React key. 없으면 차례를 쓴다. */
+    id?: string;
+    /** 메뉴 이름. */
+    label: ReactNode;
+    /** 이동 주소. `items` 가 없을 때 쓰인다. */
+    href?: string;
+    /** 새 창으로 연다. */
+    newWindow?: boolean;
+    /** 지금 보고 있는 화면. */
+    current?: boolean;
+    /** 드롭다운 제목. 생략하면 `label` 을 쓴다 — 제목 없는 드롭다운은 만들 수 없다. */
+    title?: ReactNode;
+    /** 제목 옆 「바로가기」 링크. */
+    shortcut?: {
+        href: string;
+        label?: ReactNode;
+        newWindow?: boolean;
+    };
+    /** 신규 서비스 배너. */
+    banner?: MainMenuBanner;
+    /** 3뎁스 항목. */
+    items?: MainMenuLink[];
+    /** 눌렀을 때. */
+    onSelect?: () => void;
+};
+/** 1뎁스. `items` 가 없으면 드롭다운 없는 단순 링크다. */
+export type MainMenuTop = {
+    /** React key. 없으면 차례를 쓴다. */
+    id?: string;
+    /** 메뉴 이름. */
+    label: ReactNode;
+    /** 이동 주소. `items` 가 없을 때 쓰인다. */
+    href?: string;
+    /** 새 창으로 연다. */
+    newWindow?: boolean;
+    /** 지금 보고 있는 화면. */
+    current?: boolean;
+    /** 2뎁스 항목. */
+    items?: MainMenuGroup[];
+    /** 눌렀을 때. */
+    onSelect?: () => void;
+};
+/** 드롭다운 제목의 헤딩 단계. 화면의 제목 위계에 맞춘다. */
+export type MainMenuTitleLevel = 2 | 3 | 4 | 5 | 6;
+export type MainMenuProps = Omit<ComponentPropsWithRef<'nav'>, 'children'> & {
+    /** 메뉴 트리(최대 3수준). */
+    items: MainMenuTop[];
+    /** `<nav>` 의 이름. 규격 권장 문구가 「메인 메뉴」다. */
+    label?: string;
+    /** 드롭다운 제목의 헤딩 단계. 기본 2. */
+    titleLevel?: MainMenuTitleLevel;
+    /** 딤을 깔고 본문 스크롤을 잠근다. 기본 켬 — 헤더 안 좁은 드롭다운으로 쓸 때만 끈다. */
+    backdrop?: boolean;
+};
+/**
+ * 주메뉴(PC) — 킷 `krds-main-menu`. **1023px 이하에서는 킷이 이 요소를 숨긴다** —
+ * 좁은 화면은 {@link MainMenuMobile} 이 맡는다.
+ */
+export declare function MainMenu({ items, label, titleLevel, backdrop, className, onKeyDown, onBlur, ref, ...rest }: MainMenuProps): import("react").JSX.Element;
+export type MainMenuMobileProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'id'> & {
+    /** 메뉴 트리. PC 주메뉴와 같은 값을 넘긴다. */
+    items: MainMenuTop[];
+    /** 열림 여부. 상태는 화면 쪽이 쥔다. */
+    open: boolean;
+    /** 닫아 달라는 요청 — Esc·닫기 단추·PC 폭으로 넓어질 때 온다. */
+    onClose: () => void;
+    /** 서랍의 id. 여는 단추의 `aria-controls` 와 짝이다. **한 화면에 하나만 둔다.** */
+    id?: string;
+    /** 서랍의 이름(`aria-label`). 기본 「전체 메뉴」. */
+    label?: string;
+    /** 닫기 단추의 이름. */
+    closeLabel?: string;
+    /** 판 제목의 헤딩 단계. 기본 2. */
+    titleLevel?: MainMenuTitleLevel;
+    /** 서랍 머리 자리 — 유틸 링크·로그인·검색칸. */
+    header?: ReactNode;
+    /** 서랍 바닥 자리 — 정책 링크 등. */
+    bottom?: ReactNode;
+};
+/**
+ * 전체메뉴(모바일) — 킷 `krds-main-menu-mobile`. 초점을 가두는 대화상자다.
+ *
+ * 왼쪽 1뎁스는 탭이 아니라 **앵커**다 — 누르면 오른쪽이 그 자리로 스크롤하고 선택 표시가 따라간다.
+ * **1024px 이상에서는 킷이 이 요소를 숨긴다** — PC 는 {@link MainMenu} 가 맡는다.
+ * 화면이 PC 폭으로 넓어지면 스스로 닫는다(그대로 두면 닫을 길이 사라진다).
+ */
+export declare function MainMenuMobile({ items, open, onClose, id, label, closeLabel, titleLevel, header, bottom, className, style, onKeyDown, ...rest }: MainMenuMobileProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/main-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/main-menu/index.tsx"],"names":[],"mappings":"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"}