@uniai-fe/uds-primitives 0.4.8 → 0.5.0

package/README.md

@@ -153,6 +153,9 @@ export default function Page() {
 - `Slot.Text`
 - `SlotComponentProps`
 - `SlotTextProps`
+- `Switch`
+- `SwitchProps`
+- `SwitchSize`
 - `TabRoot`
 - `TabList`
 - `TabTrigger`

package/dist/styles.css

@@ -691,6 +691,23 @@
   --select-multiple-chip-summary-font-weight: 400;
   /* Typography tokens */
   --select-text-font-family: var(--font-body-medium-family);
+  --switch-track-width-small: 48px;
+  --switch-track-height-small: 24px;
+  --switch-track-padding-small: 3px;
+  --switch-handle-size-small: 18px;
+  --switch-track-width-medium: 68px;
+  --switch-track-height-medium: 34px;
+  --switch-track-padding-medium: 2px;
+  --switch-handle-size-medium: 30px;
+  --switch-track-background-unchecked: var(--color-surface-strong);
+  --switch-track-background-checked: var(--color-primary-standard);
+  --switch-thumb-background: var(--color-surface-static-white);
+  --switch-thumb-shadow-unchecked:
+  0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.08);
+  --switch-thumb-shadow-checked:
+  0px 2px 8px rgba(0, 0, 0, 0.08), 0px 0px 4px rgba(0, 0, 0, 0.12);
+  --switch-focus-ring: var(--color-primary-focus);
+  --switch-disabled-opacity: 0.4;
   --tab-height-small: 40px;
   --tab-height-medium: 48px;
   --tab-height-large: 56px;
@@ -4419,6 +4436,64 @@ figure.chip {
 
 
 
+.switch {
+  --switch-track-width: var(--switch-track-width-small);
+  --switch-track-height: var(--switch-track-height-small);
+  --switch-track-padding: var(--switch-track-padding-small);
+  --switch-handle-size: var(--switch-handle-size-small);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: var(--switch-track-width);
+  min-width: var(--switch-track-width);
+  height: var(--switch-track-height);
+  padding: var(--switch-track-padding);
+  border: none;
+  border-radius: 999px;
+  background-color: var(--switch-track-background-unchecked);
+  cursor: pointer;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+}
+
+.switch:where([data-size=medium]) {
+  --switch-track-width: var(--switch-track-width-medium);
+  --switch-track-height: var(--switch-track-height-medium);
+  --switch-track-padding: var(--switch-track-padding-medium);
+  --switch-handle-size: var(--switch-handle-size-medium);
+}
+
+.switch:where([data-state=checked]) {
+  background-color: var(--switch-track-background-checked);
+}
+
+.switch:where(:focus-visible) {
+  box-shadow: 0 0 0 2px var(--switch-focus-ring);
+}
+
+.switch:where(:disabled) {
+  cursor: not-allowed;
+  opacity: var(--switch-disabled-opacity);
+}
+
+.switch-handle {
+  display: flex;
+  width: var(--switch-handle-size);
+  min-width: var(--switch-handle-size);
+  height: var(--switch-handle-size);
+  border-radius: 999px;
+  background-color: var(--switch-thumb-background);
+  box-shadow: var(--switch-thumb-shadow-unchecked);
+  transition: transform 0.2s ease;
+}
+
+.switch:where([data-state=checked]) .switch-handle {
+  /* 변경: handle 이동 거리는 frame width - handle size - 양쪽 padding 합으로 고정한다. */
+  box-shadow: var(--switch-thumb-shadow-checked);
+  transform: translateX(calc(var(--switch-track-width) - var(--switch-handle-size) - var(--switch-track-padding) * 2));
+}
+
+
+
 .tab-root {
   --tab-height: var(--tab-height-medium);
   --tab-label-font-size: var(--tab-label-font-size-medium);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.4.8",
+  "version": "0.5.0",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

package/src/components/switch/index.scss

@@ -0,0 +1 @@
+@use "./styles/index.scss";

package/src/components/switch/index.tsx

@@ -0,0 +1,10 @@
+/**
+ * Switch; standard toggle leaf 카테고리 배럴
+ * @desc
+ * - `Switch`: on/off 전환만 담당하는 leaf switch 컴포넌트다.
+ * - `SwitchProps`, `SwitchSize`: public 계약 타입이다.
+ */
+import "./index.scss";
+
+export * from "./markup";
+export type * from "./types";

package/src/components/switch/markup/Switch.tsx

@@ -0,0 +1,76 @@
+import clsx from "clsx";
+import { forwardRef, useState } from "react";
+import type { MouseEvent } from "react";
+import type { SwitchProps } from "../types";
+
+/**
+ * Switch; standard on/off toggle leaf 컴포넌트
+ * @component
+ * @param {SwitchProps} props
+ * @param {"small" | "medium"} [props.size="small"] Figma size 축이다.
+ * @param {boolean} [props.checked] 제어형 checked 상태다.
+ * @param {boolean} [props.defaultChecked=false] 비제어 초기 checked 상태다.
+ * @param {(checked: boolean, event: MouseEvent<HTMLButtonElement>) => void} [props.onCheckedChange]
+ *  checked 상태 변경 핸들러다.
+ * @param {boolean} [props.disabled] 비활성 여부다.
+ * @param {string} [props.className] button root className override다.
+ * @example
+ * <Switch aria-label="알림 수신" defaultChecked />
+ */
+const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(
+  {
+    size = "small",
+    checked,
+    defaultChecked = false,
+    disabled = false,
+    className,
+    onCheckedChange,
+    onClick,
+    ...restProps
+  },
+  ref,
+) {
+  const [uncontrolledChecked, setUncontrolledChecked] =
+    useState(defaultChecked);
+  const isControlled = typeof checked === "boolean";
+  const isChecked = isControlled ? checked : uncontrolledChecked;
+
+  const onToggle = (event: MouseEvent<HTMLButtonElement>) => {
+    // 변경: 소비자가 defaultPrevented로 토글을 막을 수 있도록 onClick을 먼저 실행한다.
+    onClick?.(event);
+
+    if (event.defaultPrevented || disabled) {
+      return;
+    }
+
+    const nextChecked = !isChecked;
+
+    if (!isControlled) {
+      setUncontrolledChecked(nextChecked);
+    }
+
+    onCheckedChange?.(nextChecked, event);
+  };
+
+  return (
+    <button
+      {...restProps}
+      ref={ref}
+      type="button"
+      role="switch"
+      aria-checked={isChecked}
+      disabled={disabled}
+      className={clsx("switch", className)}
+      data-size={size}
+      data-state={isChecked ? "checked" : "unchecked"}
+      onClick={onToggle}
+    >
+      {/* 변경: standard variant는 handle만 렌더링하고, with text는 후속 확장 범위로 보류한다. */}
+      <span className="switch-handle" aria-hidden="true" />
+    </button>
+  );
+});
+
+Switch.displayName = "Switch";
+
+export { Switch };

package/src/components/switch/markup/index.ts

@@ -0,0 +1 @@
+export { Switch } from "./Switch";

package/src/components/switch/styles/index.scss

@@ -0,0 +1,2 @@
+@use "./variables.scss";
+@use "./switch.scss";

package/src/components/switch/styles/switch.scss

@@ -0,0 +1,63 @@
+.switch {
+  --switch-track-width: var(--switch-track-width-small);
+  --switch-track-height: var(--switch-track-height-small);
+  --switch-track-padding: var(--switch-track-padding-small);
+  --switch-handle-size: var(--switch-handle-size-small);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: var(--switch-track-width);
+  min-width: var(--switch-track-width);
+  height: var(--switch-track-height);
+  padding: var(--switch-track-padding);
+  border: none;
+  border-radius: 999px;
+  background-color: var(--switch-track-background-unchecked);
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    opacity 0.2s ease;
+}
+
+.switch:where([data-size="medium"]) {
+  --switch-track-width: var(--switch-track-width-medium);
+  --switch-track-height: var(--switch-track-height-medium);
+  --switch-track-padding: var(--switch-track-padding-medium);
+  --switch-handle-size: var(--switch-handle-size-medium);
+}
+
+.switch:where([data-state="checked"]) {
+  background-color: var(--switch-track-background-checked);
+}
+
+.switch:where(:focus-visible) {
+  box-shadow: 0 0 0 2px var(--switch-focus-ring);
+}
+
+.switch:where(:disabled) {
+  cursor: not-allowed;
+  opacity: var(--switch-disabled-opacity);
+}
+
+.switch-handle {
+  display: flex;
+  width: var(--switch-handle-size);
+  min-width: var(--switch-handle-size);
+  height: var(--switch-handle-size);
+  border-radius: 999px;
+  background-color: var(--switch-thumb-background);
+  box-shadow: var(--switch-thumb-shadow-unchecked);
+  transition: transform 0.2s ease;
+}
+
+.switch:where([data-state="checked"]) .switch-handle {
+  /* 변경: handle 이동 거리는 frame width - handle size - 양쪽 padding 합으로 고정한다. */
+  box-shadow: var(--switch-thumb-shadow-checked);
+  transform: translateX(
+    calc(
+      var(--switch-track-width) - var(--switch-handle-size) -
+        (var(--switch-track-padding) * 2)
+    )
+  );
+}

package/src/components/switch/styles/variables.scss

@@ -0,0 +1,21 @@
+:root {
+  --switch-track-width-small: 48px;
+  --switch-track-height-small: 24px;
+  --switch-track-padding-small: 3px;
+  --switch-handle-size-small: 18px;
+
+  --switch-track-width-medium: 68px;
+  --switch-track-height-medium: 34px;
+  --switch-track-padding-medium: 2px;
+  --switch-handle-size-medium: 30px;
+
+  --switch-track-background-unchecked: var(--color-surface-strong);
+  --switch-track-background-checked: var(--color-primary-standard);
+  --switch-thumb-background: var(--color-surface-static-white);
+  --switch-thumb-shadow-unchecked:
+    0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.08);
+  --switch-thumb-shadow-checked:
+    0px 2px 8px rgba(0, 0, 0, 0.08), 0px 0px 4px rgba(0, 0, 0, 0.12);
+  --switch-focus-ring: var(--color-primary-focus);
+  --switch-disabled-opacity: 0.4;
+}

package/src/components/switch/types/index.ts

@@ -0,0 +1 @@
+export type * from "./switch";

package/src/components/switch/types/switch.ts

@@ -0,0 +1,46 @@
+import type { ComponentPropsWithoutRef, MouseEvent } from "react";
+
+type NativeButtonProps = Omit<
+  ComponentPropsWithoutRef<"button">,
+  "aria-checked" | "children" | "onChange" | "role" | "type"
+>;
+
+/**
+ * Switch size; standard switch size 축
+ * @typedef {"small" | "medium"} SwitchSize
+ */
+export type SwitchSize = "small" | "medium";
+
+/**
+ * Switch props; standard toggle leaf public props
+ * @property {"small" | "medium"} [size] Figma size 축이다.
+ * @property {boolean} [checked] 제어형 checked 상태다.
+ * @property {boolean} [defaultChecked] 비제어 초기 checked 상태다.
+ * @property {(checked: boolean, event: MouseEvent<HTMLButtonElement>) => void} [onCheckedChange] checked 상태 변경 핸들러다.
+ * @property {boolean} [disabled] 비활성 여부다.
+ */
+export interface SwitchProps extends NativeButtonProps {
+  /**
+   * Figma size 축이다.
+   */
+  size?: SwitchSize;
+  /**
+   * 제어형 checked 상태다.
+   */
+  checked?: boolean;
+  /**
+   * 비제어 초기 checked 상태다.
+   */
+  defaultChecked?: boolean;
+  /**
+   * checked 상태 변경 핸들러다.
+   */
+  onCheckedChange?: (
+    checked: boolean,
+    event: MouseEvent<HTMLButtonElement>,
+  ) => void;
+  /**
+   * 비활성 여부다.
+   */
+  disabled?: boolean;
+}

package/src/index.scss

@@ -19,6 +19,7 @@
 @use "./components/segmented-control";
 @use "./components/select";
 @use "./components/spinner";
+@use "./components/switch";
 @use "./components/tab";
 @use "./components/table";
 @use "./components/tooltip";

package/src/index.tsx

@@ -25,6 +25,7 @@ export * from "./components/segmented-control";
 export * from "./components/select";
 export * from "./components/slot";
 export * from "./components/spinner";
+export * from "./components/switch";
 export * from "./components/tab";
 export * from "./components/table";
 export * from "./components/tooltip";