@highpixel-co/palda-design-system 0.6.0 → 0.8.0

package/dist/styles.css

@@ -1091,8 +1091,6 @@
 
 /* src/NavigationButton/NavigationButton.css */
 .palda-navigation-button {
-  --palda-navigation-button-icon-color: var(--palda-color-border-strong);
-  --palda-navigation-button-text-color: var(--palda-color-text-disabled);
   align-items: center;
   background: var(--palda-navigation-button-background, transparent);
   border: 0;
@@ -1100,34 +1098,55 @@
   box-sizing: border-box;
   color: var(--palda-navigation-button-text-color);
   cursor: pointer;
-  display: flex;
   gap: var(--palda-space-gap-sm);
-  height: 48px;
   justify-content: flex-start;
-  padding: var(--palda-space-3) var(--palda-space-4);
+  min-width: 0;
   text-align: left;
+  text-decoration: none;
   transition: background-color var(--palda-duration-fast) var(--palda-easing-standard), color var(--palda-duration-fast) var(--palda-easing-standard);
+}
+.palda-navigation-button--md {
+  --palda-navigation-button-icon-color: var(--palda-color-border-strong);
+  --palda-navigation-button-text-color: var(--palda-color-text-disabled);
+  display: flex;
+  height: 48px;
+  padding: var(--palda-space-3) var(--palda-space-4);
   width: 100%;
 }
+.palda-navigation-button--sm {
+  --palda-navigation-button-icon-color: var(--palda-color-primary-default);
+  --palda-navigation-button-text-color: var(--palda-color-text-primary);
+  display: inline-flex;
+  height: 36px;
+  padding: var(--palda-space-2) var(--palda-space-3);
+}
 .palda-navigation-button__icon {
   align-items: center;
   color: var(--palda-navigation-button-icon-color);
   display: inline-flex;
   flex-shrink: 0;
+  justify-content: center;
+}
+.palda-navigation-button--md .palda-navigation-button__icon {
   font-size: 24px;
   height: 24px;
-  justify-content: center;
   width: 24px;
 }
+.palda-navigation-button--sm .palda-navigation-button__icon {
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+}
 .palda-navigation-button__label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.palda-navigation-button:not(:disabled, .palda-navigation-button--selected):is(:hover, :active) {
+.palda-navigation-button--md:not(:disabled, .palda-navigation-button--selected):is(:hover, :active),
+.palda-navigation-button--sm:not(:disabled):is(:hover, :active) {
   --palda-navigation-button-background: var(--palda-color-state-hover-pressed);
 }
-.palda-navigation-button--selected {
+.palda-navigation-button--md.palda-navigation-button--selected {
   --palda-navigation-button-background: var(--palda-color-accent-subtle);
   --palda-navigation-button-icon-color: var(--palda-color-accent-default);
   --palda-navigation-button-text-color: var(--palda-color-text-accent);
@@ -1245,6 +1264,49 @@
   }
 }
 
+/* src/Skeleton/Skeleton.css */
+.palda-skeleton {
+  animation: palda-skeleton-pulse var(--palda-duration-normal) var(--palda-easing-standard) infinite alternate;
+  background: var(--palda-color-surface-sunken);
+  border-radius: var(--palda-radius-control-sm);
+  display: block;
+}
+.palda-skeleton--body1 {
+  height: var(--palda-font-size-md);
+}
+.palda-skeleton--body2 {
+  height: var(--palda-font-size-sm);
+}
+.palda-skeleton--label {
+  height: var(--palda-font-size-xs);
+}
+.palda-skeleton--full {
+  width: 100%;
+}
+.palda-skeleton--wide {
+  width: 70%;
+}
+.palda-skeleton--narrow {
+  width: 40%;
+}
+.palda-skeleton--block {
+  block-size: 100%;
+  inline-size: 100%;
+}
+@keyframes palda-skeleton-pulse {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.4;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .palda-skeleton {
+    animation: none;
+  }
+}
+
 /* src/Switch/Switch.css */
 .palda-switch {
   align-items: center;
@@ -1508,6 +1570,24 @@
   }
 }
 
+/* src/Thumbnail/Thumbnail.css */
+.palda-thumbnail {
+  background: var(--palda-color-surface-raised);
+  border-radius: var(--palda-radius-control);
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+  object-fit: cover;
+}
+.palda-thumbnail--md {
+  height: 40px;
+  width: 40px;
+}
+.palda-thumbnail--sm {
+  height: 32px;
+  width: 32px;
+}
+
 /* src/Toast/Toast.css */
 .palda-toast {
   align-items: center;
@@ -1891,7 +1971,7 @@ button.palda-card {
   text-align: start;
   width: 100%;
 }
-button.palda-card:hover {
+button.palda-card:not(.palda-card--selected):hover {
   border-color: var(--palda-color-border-strong);
 }
 button.palda-card:focus-visible {
@@ -2010,6 +2090,16 @@ button.palda-card:focus-visible {
   gap: var(--palda-space-gap-lg);
   min-width: 0;
 }
+.palda-form-section--filled .palda-form-section__fields {
+  background: var(--palda-color-surface-raised);
+  border-radius: var(--palda-radius-container);
+  padding: var(--palda-space-inset-md);
+  --palda-list-row-filled-background: var(--palda-color-surface-base);
+}
+.palda-form-section--filled .palda-text-field--outline,
+.palda-form-section--filled .palda-text-field--accent {
+  --palda-text-field-background: var(--palda-color-surface-base);
+}
 .palda-form-section__footer {
   align-items: center;
   display: flex;
@@ -2038,7 +2128,7 @@ button.palda-card:focus-visible {
   border-block-end: 0;
 }
 .palda-list-row--filled {
-  background: var(--palda-color-surface-raised);
+  background: var(--palda-list-row-filled-background, var(--palda-color-surface-raised));
   border-radius: var(--palda-radius-control);
   padding-inline: var(--palda-space-inset-md);
 }
@@ -2103,42 +2193,11 @@ button.palda-list-row:focus-visible {
   flex-direction: column;
   gap: var(--palda-space-gap-xs);
 }
-.palda-list-row__skeleton {
-  animation: palda-list-row-pulse var(--palda-duration-normal) var(--palda-easing-standard) infinite alternate;
-  background: var(--palda-color-surface-sunken);
-  border-radius: var(--palda-radius-control-sm);
-  display: block;
-}
-.palda-list-row__skeleton--title {
-  height: var(--palda-font-size-sm);
-  width: 40%;
-}
-.palda-list-row__skeleton--description {
-  height: var(--palda-font-size-xs);
-  width: 70%;
-}
-.palda-list-row--strong .palda-list-row__skeleton--title {
-  height: var(--palda-font-size-md);
-}
-.palda-list-row--strong .palda-list-row__skeleton--description {
-  height: var(--palda-font-size-sm);
-}
-@keyframes palda-list-row-pulse {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.4;
-  }
-}
 @media (prefers-reduced-motion: reduce) {
   .palda-list-row,
   .palda-list-row__chevron {
     transition: none;
   }
-  .palda-list-row__skeleton {
-    animation: none;
-  }
 }
 
 /* src/LivePreview/LivePreview.css */

package/dist/ui.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, AnchorHTMLAttributes, ReactElement } from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, AnchorHTMLAttributes, ImgHTMLAttributes, ReactElement } from 'react';
 
 type AlertVariant = 'neutral' | 'accent' | 'warning' | 'danger';
 interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
@@ -141,14 +141,29 @@ interface ModalProps {
 }
 declare function Modal({ children, className, closeLabel, footer, onClose, open, showCloseButton, title, }: ModalProps): react.ReactPortal | null;
 
-interface NavigationButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+type NavigationButtonSize = 'md' | 'sm';
+interface NavigationButtonOwnProps {
     children: ReactNode;
-    /** 라벨 앞 아이콘. 시안 기준 24px 고정이다. */
+    /** 라벨 앞 아이콘. md는 24px, sm은 20px 고정이다. */
     icon?: ReactNode;
     /** 지금 보고 있는 화면. `aria-current="page"`로 함께 노출된다. */
     selected?: boolean;
+    /**
+     * `md`는 사이드바 항목(48px · 아이콘 24 · semibold · 부모 폭을 채움),
+     * `sm`은 상단 행 항목(36px · 아이콘 20 · medium · 내용만큼)이다.
+     */
+    size?: NavigationButtonSize;
 }
-declare function NavigationButton({ children, className, icon, selected, ...props }: NavigationButtonProps): react.JSX.Element;
+/**
+ * 내비게이션은 폼 제출에 쓰지 않는다. 그래서 button일 때 `type`은 노출하지 않고 button으로
+ * 고정하고, anchor일 때 `href`는 이 union이 필수로 만든다.
+ */
+type NavigationButtonProps = (NavigationButtonOwnProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {
+    href?: undefined;
+}) | (NavigationButtonOwnProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
+    href: string;
+});
+declare function NavigationButton(props: NavigationButtonProps): react.JSX.Element;
 
 interface ProgressBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
     /** 0~100. 범위를 벗어난 값은 잘라서 그린다. */
@@ -164,6 +179,38 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>
 }
 declare function Radio({ children, className, disabled, ...props }: RadioProps): react.JSX.Element;
 
+type SkeletonShape = 'text' | 'block';
+type SkeletonText = 'body1' | 'body2' | 'label';
+type SkeletonWidth = 'full' | 'wide' | 'narrow';
+/**
+ * `children`을 받지 않는다. 뼈대 안에 든 것은 읽히지 않는데 DOM에는 남아서, 넣을 수 있게 두면
+ * 실제 내용이 숨겨진 채 그려진다.
+ */
+interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    shape?: SkeletonShape;
+    /** `shape="text"`에서만 쓴다. */
+    text?: SkeletonText;
+    /** `shape="text"`에서만 쓴다. */
+    width?: SkeletonWidth;
+}
+/**
+ * 값이 오기 전 자리를 잡아 두는 뼈대다.
+ *
+ * **뼈대는 자리를 잡는 것이 목적이다.** 대신할 것과 크기가 갈리면 값이 도착할 때 화면이 튀어서,
+ * 깜빡임을 막으려고 쓴 것이 다른 깜빡임을 만든다. 그래서 `text`의 높이는 그 텍스트 스타일의 글자
+ * 크기이고, `block`은 크기를 스스로 갖지 않고 놓인 자리를 채운다 — 카드도 썸네일도 크기는 그
+ * 자리가 정한다.
+ *
+ * **폭을 값으로 받지 않는다.** 글자 폭을 흉내 내는 자리라 정확한 값이 있을 수 없고, 자리마다 다른
+ * 값이 들어가면 같은 목록의 뼈대가 서로 갈린다. `full`·`wide`·`narrow` 셋으로 닫는다.
+ *
+ * **여러 줄은 화면이 조립한다.** `lines` 같은 prop을 두지 않는다 — 줄 사이 간격은 그 자리의
+ * 레이아웃이고, 컴포넌트가 들면 자리마다 어긋난다.
+ *
+ * 읽을 내용이 없으므로 스크린리더에서 뺀다. **진행 중이라는 사실은 이것을 놓은 자리가 알린다.**
+ */
+declare function Skeleton({ className, shape, text, width, ...props }: SkeletonProps): react.JSX.Element;
+
 type SwitchSize = 'md' | 'sm';
 interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     size?: SwitchSize;
@@ -202,6 +249,21 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 're
 }
 declare function TextField({ className, defaultValue, description, disabled, error, icon, id, label, maxLength, onChange, required, size, value, variant, ...props }: TextFieldProps): react.JSX.Element;
 
+type ThumbnailSize = 'md' | 'sm';
+/**
+ * 상품·항목의 작은 사각 이미지. 원형(아바타)은 다른 것이라 여기에 넣지 않는다.
+ *
+ * `alt`를 필수로 받는다. 장식이면 빈 문자열을 **명시적으로** 넘긴다 — 빠뜨린 것과 장식인 것이
+ * 코드에서 갈려야 한다 (docs/ACCESSIBILITY.md).
+ */
+interface ThumbnailProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt' | 'height' | 'src' | 'width'> {
+    src: string;
+    /** 장식이면 `""`를 넘긴다. 생략할 수 없다. */
+    alt: string;
+    size?: ThumbnailSize;
+}
+declare function Thumbnail({ alt, className, loading, size, src, ...props }: ThumbnailProps): react.JSX.Element;
+
 type ToastVariant = 'primary' | 'danger';
 
 type ToasterPlacement = 'bottom-center' | 'bottom-right' | 'top-center' | 'top-right';
@@ -245,4 +307,4 @@ interface TooltipProps {
 }
 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 };
+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, type NavigationButtonSize, ProgressBar, type ProgressBarProps, Radio, type RadioProps, Skeleton, type SkeletonProps, type SkeletonShape, type SkeletonText, type SkeletonWidth, Switch, type SwitchProps, type SwitchSize, Tab, type TabProps, TextField, type TextFieldProps, type TextFieldSize, type TextFieldVariant, Thumbnail, type ThumbnailProps, type ThumbnailSize, type ToastOptions, type ToastVariant, Toaster, type ToasterPlacement, type ToasterProps, Tooltip, type TooltipPlacement, type TooltipProps, toast };

package/dist/ui.js

@@ -13,13 +13,15 @@ import {
   NavigationButton,
   ProgressBar,
   Radio,
+  Skeleton,
   Switch,
   Tab,
   TextField,
+  Thumbnail,
   Toaster,
   Tooltip,
   toast
-} from "./chunk-6JZPK2W5.js";
+} from "./chunk-PWAQFOM3.js";
 import "./chunk-TWYJ2UTC.js";
 export {
   Alert,
@@ -35,9 +37,11 @@ export {
   NavigationButton,
   ProgressBar,
   Radio,
+  Skeleton,
   Switch,
   Tab,
   TextField,
+  Thumbnail,
   Toaster,
   Tooltip,
   toast

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highpixel-co/palda-design-system",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Palda product design tokens, icons, React components, and patterns",
   "license": "MIT",
   "type": "module",