@highpixel-co/palda-design-system 0.4.1

package/dist/ui.d.ts

@@ -0,0 +1,243 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, AnchorHTMLAttributes, ReactElement } from 'react';
+
+type AlertVariant = 'neutral' | 'accent' | 'warning' | 'danger';
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** 배너 본문. 읽는 문장이라 좁아지면 접힌다. */
+    children: ReactNode;
+    /** 본문 위 굵은 한 줄. 없으면 본문만 그린다. */
+    title?: ReactNode;
+    /** 본문 왼쪽 아이콘. 라벨을 보조하는 장식이라 접근성 트리에서 뺀다. */
+    icon?: ReactNode;
+    /** 본문 아래 액션 줄. Button을 넣는다. */
+    action?: ReactNode;
+    variant?: AlertVariant;
+}
+declare function Alert({ children, className, title, icon, action, variant, ...props }: AlertProps): react.JSX.Element;
+
+type BadgeVariant = 'primary' | 'accent' | 'secondary' | 'success' | 'warning' | 'danger';
+type BadgeSize = 'md' | 'sm';
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    /** 시안의 variant 프로퍼티. */
+    variant?: BadgeVariant;
+    /** 라벨 앞 아이콘. 시안 기준 16px 고정이며 md/sm이 같다. */
+    icon?: ReactNode;
+    size?: BadgeSize;
+}
+declare function Badge({ children, className, variant, icon, size, ...props }: BadgeProps): react.JSX.Element;
+
+type ButtonVariant = 'primary' | 'secondary' | 'accent' | 'outline' | 'subtle';
+type ButtonSize = 'md' | 'sm';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    /** 라벨 앞 아이콘. 시안 기준 16px 고정이며 md/sm이 같다. */
+    leadingIcon?: ReactNode;
+    size?: ButtonSize;
+    /** 라벨 뒤 아이콘. */
+    trailingIcon?: ReactNode;
+    variant?: ButtonVariant;
+}
+declare function Button({ children, className, leadingIcon, size, trailingIcon, type, variant, ...props }: ButtonProps): react.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** 시안의 `text` 토글. 생략하면 라벨 없이 컨트롤만 그리므로 `aria-label`을 함께 넘긴다. */
+    children?: ReactNode;
+}
+declare function Checkbox({ children, className, disabled, ...props }: CheckboxProps): react.JSX.Element;
+
+type ChipVariant = 'primary' | 'accent' | 'secondary';
+type ChipSize = 'md' | 'sm';
+interface ChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    children: ReactNode;
+    /** 라벨 뒤 아이콘. 시안 기준 16px 고정이며 md/sm이 같다. */
+    icon?: ReactNode;
+    /** 시안 status의 selected. */
+    selected?: boolean;
+    size?: ChipSize;
+    /** 시안 property 이름은 color지만 코드는 variant로 통일한다(0003). */
+    variant?: ChipVariant;
+}
+declare function Chip({ children, className, icon, selected, size, variant, ...props }: ChipProps): react.JSX.Element;
+
+type DropdownButtonAlign = 'start' | 'end';
+type DropdownButtonVariant = 'outline' | 'subtle';
+interface DropdownButtonItem {
+    disabled?: boolean;
+    /** 라벨 앞 아이콘. 트리거 chevron과 같은 16px 고정이다. */
+    icon?: ReactNode;
+    label: ReactNode;
+    /** onSelect로 돌려주는 값이자 목록 안에서의 key다. */
+    value: string;
+}
+interface DropdownButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect' | 'type'> {
+    /** 메뉴를 트리거의 어느 쪽에 맞출지. 메뉴는 시안에 없어 이 축도 미확정이다. */
+    align?: DropdownButtonAlign;
+    children: ReactNode;
+    items: DropdownButtonItem[];
+    onSelect?: (value: string) => void;
+    /** 라벨 뒤 chevron. 시안 기준 16px 고정이고 열리면 180° 뒤집힌다.
+        시안에서 chevron은 늘 붙어 있는 고정 요소이므로, chevron-down 아이콘이 들어오면
+        이 prop을 없애고 컴포넌트가 직접 그린다. */
+    trailingIcon?: ReactNode;
+    variant?: DropdownButtonVariant;
+}
+declare function DropdownButton({ align, children, className, items, onClick, onKeyDown, onSelect, trailingIcon, variant, ...props }: DropdownButtonProps): react.JSX.Element;
+
+type IconButtonVariant = 'primary' | 'secondary' | 'accent' | 'outline' | 'subtle';
+type IconButtonSize = 'md' | 'sm';
+interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'children'> {
+    /** 버튼 안 아이콘. 시안 기준 16px 고정이며 md/sm이 같다. */
+    icon: ReactNode;
+    /** 스크린 리더가 읽는 이름. 아이콘만 있는 버튼이라 필수다 (docs/ACCESSIBILITY.md). */
+    label: string;
+    size?: IconButtonSize;
+    variant?: IconButtonVariant;
+}
+declare function IconButton({ className, icon, label, size, type, variant, ...props }: IconButtonProps): react.JSX.Element;
+
+type LinkVariant = 'primary' | 'accent';
+type LinkSize = 'md' | 'sm';
+interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    children: ReactNode;
+    /** 필수다. 주소가 없으면 링크가 아니라 버튼이다. */
+    href: string;
+    /**
+     * 새 탭으로 연다. `target`과 `rel`이 함께 붙고, 새 창이 열린다는 사실이 라벨에도 실린다.
+     * 아이콘으로만 알리면 스크린 리더에 전달되지 않는다 (docs/ACCESSIBILITY.md).
+     */
+    external?: boolean;
+    size?: LinkSize;
+    /** 시안의 색. `accent`는 아껴 쓴다 — 한 화면에서 강조는 하나다 (docs/TOKEN_POLICY.md §색). */
+    variant?: LinkVariant;
+}
+/**
+ * 눌러서 이동하는 것이다. **모양이 비슷하다고 Button으로 대신하지 않는다** — 새 탭·주소 복사·
+ * 가운데 클릭이 전부 달라진다. 반대로 이동하지 않는 동작에는 이것을 쓰지 않는다.
+ *
+ * 상태를 prop으로 갖지 않는다. hover·focus·visited는 전부 CSS가 가진다 (0004).
+ */
+declare function Link({ children, className, external, href, rel, size, target, variant, ...props }: LinkProps): react.JSX.Element;
+
+interface ModalActionsProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function ModalActions({ children, className }: ModalActionsProps): react.JSX.Element;
+interface ModalProps {
+    /** 시안의 본문 영역. 길어지면 헤더·푸터는 그대로 두고 여기만 스크롤된다. */
+    children?: ReactNode;
+    className?: string;
+    /** 닫기 버튼의 접근 가능한 이름. 아이콘만 있는 버튼이라 이름이 필요하다(docs/ACCESSIBILITY.md). */
+    closeLabel?: string;
+    /** 시안의 하단 액션 줄. 오른쪽 묶음은 ModalActions로 감싼다. */
+    footer?: ReactNode;
+    /** 닫기 버튼·ESC·딤 클릭이 모두 이 하나로 모인다. */
+    onClose: () => void;
+    open: boolean;
+    /** 헤더 오른쪽 닫기 버튼. 닫는 길을 푸터 버튼으로만 두고 싶을 때 끈다. */
+    showCloseButton?: boolean;
+    title: ReactNode;
+}
+declare function Modal({ children, className, closeLabel, footer, onClose, open, showCloseButton, title, }: ModalProps): react.ReactPortal | null;
+
+interface NavigationButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    children: ReactNode;
+    /** 라벨 앞 아이콘. 시안 기준 24px 고정이다. */
+    icon?: ReactNode;
+    /** 지금 보고 있는 화면. `aria-current="page"`로 함께 노출된다. */
+    selected?: boolean;
+}
+declare function NavigationButton({ children, className, icon, selected, ...props }: NavigationButtonProps): react.JSX.Element;
+
+interface ProgressBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    /** 0~100. 범위를 벗어난 값은 잘라서 그린다. */
+    value: number;
+    /** 무엇의 진행률인지 알리는 접근 가능한 이름. 막대만으로는 뜻이 통하지 않아 필수다. */
+    label: string;
+}
+declare function ProgressBar({ value, label, className, ...props }: ProgressBarProps): react.JSX.Element;
+
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** 시안의 `text` 토글. 생략하면 라벨 없이 컨트롤만 그리므로 `aria-label`을 함께 넘긴다. */
+    children?: ReactNode;
+}
+declare function Radio({ children, className, disabled, ...props }: RadioProps): react.JSX.Element;
+
+type SwitchSize = 'md' | 'sm';
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    size?: SwitchSize;
+}
+declare function Switch({ className, disabled, size, ...props }: SwitchProps): react.JSX.Element;
+
+interface TabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'role' | 'type'> {
+    children: ReactNode;
+    /** 라벨 앞 아이콘. 시안 기준 24px 고정이다. */
+    icon?: ReactNode;
+    /** 지금 보고 있는 탭. `aria-selected`로 함께 노출된다. */
+    selected?: boolean;
+}
+declare function Tab({ children, className, icon, selected, ...props }: TabProps): react.JSX.Element;
+
+type TextFieldVariant = 'outline' | 'accent' | 'subtle';
+type TextFieldSize = 'md' | 'sm';
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'size'> {
+    /** 시안 description. 시안에 별도 에러 슬롯이 없어 error일 때 이 문구가 danger 색으로 바뀐다. */
+    description?: ReactNode;
+    /** 시안 status의 error. `aria-invalid`로 함께 노출된다. */
+    error?: boolean;
+    /** 입력 뒤 아이콘. 시안 기준 20px 고정이며 md/sm이 같다. */
+    icon?: ReactNode;
+    /** 시안의 header. */
+    label?: ReactNode;
+    size?: TextFieldSize;
+    /** 시안 property 이름은 color지만 코드는 variant로 통일한다(0003).
+        값의 outline·subtle은 색이 아니라 채움 방식이라 이름도 다시 볼 대상이다. */
+    variant?: TextFieldVariant;
+}
+declare function TextField({ className, defaultValue, description, disabled, error, icon, id, label, maxLength, onChange, required, size, value, variant, ...props }: TextFieldProps): react.JSX.Element;
+
+type ToastVariant = 'primary' | 'danger';
+
+type ToasterPlacement = 'bottom-center' | 'bottom-right' | 'top-center' | 'top-right';
+interface ToasterProps {
+    className?: string;
+    /** 화면 어느 모서리에 쌓을지. 시안이 없어 정한 축이다. */
+    placement?: ToasterPlacement;
+}
+declare function Toaster({ className, placement }: ToasterProps): react.JSX.Element;
+
+interface ToastOptions {
+    /** 실행취소처럼 토스트가 떠 있는 동안만 유효한 액션의 라벨. onAction과 한 쌍이다. */
+    actionLabel?: string;
+    /** 닫기 버튼의 접근 가능한 이름. 아이콘만 있는 버튼이라 이름이 필요하다(docs/ACCESSIBILITY.md). */
+    closeLabel?: string;
+    /** 자동으로 닫히기까지의 시간(ms). 0이면 눌러서 닫을 때까지 남는다. */
+    duration?: number;
+    /** 메시지 앞 아이콘. 메시지를 보조하는 장식이라 접근성 이름에서 뺀다. */
+    icon?: ReactNode;
+    /** 누르면 토스트가 함께 닫힌다. 한 번 쓰고 사라지는 액션이라 다시 누를 자리가 없다. */
+    onAction?: () => void;
+    variant?: ToastVariant;
+}
+/** 토스트를 하나 띄우고 id를 돌려준다. 화면에 `<Toaster />`가 있어야 보인다. */
+declare function toast(message: ReactNode, options?: ToastOptions): string;
+declare namespace toast {
+    var dismiss: (id?: string) => void;
+}
+
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipProps {
+    /** 툴팁을 붙일 트리거 하나. 키보드로도 열리려면 포커스를 받는 요소여야 한다. */
+    children: ReactElement<{
+        'aria-describedby'?: string;
+    }>;
+    className?: string;
+    /** 말풍선에 들어가는 설명. 트리거의 이름을 대신하지 않는다(이름은 aria-label로 준다). */
+    label: ReactNode;
+    /** 말풍선을 트리거의 어느 쪽에 둘지. 자리가 모자라면 반대쪽으로 뒤집는다. 시안 없이 정한 축이다. */
+    placement?: TooltipPlacement;
+}
+declare function Tooltip({ children, className, label, placement }: TooltipProps): react.JSX.Element;
+
+export { Alert, type AlertProps, type AlertVariant, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipSize, type ChipVariant, DropdownButton, type DropdownButtonAlign, type DropdownButtonItem, type DropdownButtonProps, type DropdownButtonVariant, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Link, type LinkProps, type LinkSize, type LinkVariant, Modal, ModalActions, type ModalActionsProps, type ModalProps, NavigationButton, type NavigationButtonProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, Switch, type SwitchProps, type SwitchSize, Tab, type TabProps, TextField, type TextFieldProps, type TextFieldSize, type TextFieldVariant, type ToastOptions, type ToastVariant, Toaster, type ToasterPlacement, type ToasterProps, Tooltip, type TooltipPlacement, type TooltipProps, toast };

package/dist/ui.js

@@ -0,0 +1,44 @@
+import "./chunk-EYFL232L.js";
+import {
+  Alert,
+  Badge,
+  Button,
+  Checkbox,
+  Chip,
+  DropdownButton,
+  IconButton,
+  Link,
+  Modal,
+  ModalActions,
+  NavigationButton,
+  ProgressBar,
+  Radio,
+  Switch,
+  Tab,
+  TextField,
+  Toaster,
+  Tooltip,
+  toast
+} from "./chunk-GPCPGABI.js";
+import "./chunk-TWYJ2UTC.js";
+export {
+  Alert,
+  Badge,
+  Button,
+  Checkbox,
+  Chip,
+  DropdownButton,
+  IconButton,
+  Link,
+  Modal,
+  ModalActions,
+  NavigationButton,
+  ProgressBar,
+  Radio,
+  Switch,
+  Tab,
+  TextField,
+  Toaster,
+  Tooltip,
+  toast
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@highpixel-co/palda-design-system",
+  "version": "0.4.1",
+  "description": "Palda product design tokens, icons, React components, and patterns",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.js"
+    },
+    "./patterns": {
+      "types": "./dist/patterns.d.ts",
+      "import": "./dist/patterns.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "import": "./dist/tokens.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "sideEffects": [
+    "./dist/styles.css"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts src/ui.ts src/icons.ts src/patterns.ts src/tokens.ts --format esm --dts --clean --external react --external react-dom --tsconfig ../../tsconfig.json && node build.mjs"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/highpixel-co/palda-design-system.git",
+    "directory": "packages/palda-design-system"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
+}