@uniai-fe/uds-primitives 0.0.1

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

@@ -0,0 +1,79 @@
+import type { ComponentPropsWithoutRef, ReactNode, ReactElement } from "react";
+
+/**
+ * 버튼 variant/axes는 `modules/_context/design-system/sot/current/components/assets-index.json`
+ * 의 button 항목을 그대로 반영한다.
+ */
+export const BUTTON_VARIANTS = ["solid", "outlined", "text-button"] as const;
+export const BUTTON_INTENTS = ["primary", "secondary", "teritary"] as const;
+export const BUTTON_SIZES = ["xlarge", "large", "medium", "small"] as const;
+export const BUTTON_SHAPES = ["default", "round"] as const;
+export const BUTTON_STATES = ["default", "readonly", "disabled"] as const;
+export const BUTTON_SIMULATED_STATES = ["hover", "pressed"] as const;
+
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+export type ButtonIntent = (typeof BUTTON_INTENTS)[number];
+export type ButtonSize = (typeof BUTTON_SIZES)[number];
+export type ButtonShape = (typeof BUTTON_SHAPES)[number];
+export type ButtonState = (typeof BUTTON_STATES)[number];
+export type ButtonSimulatedState = (typeof BUTTON_SIMULATED_STATES)[number];
+export type ButtonIconSlot = "none" | "left" | "right";
+
+type NativeButtonProps = ComponentPropsWithoutRef<"button">;
+export interface ButtonProps extends Omit<
+  NativeButtonProps,
+  "children" | "prefix" | "suffix"
+> {
+  /**
+   * 주 버튼 내용. 문자열이면 `<span class="button-label">`로 자동 감싼다.
+   */
+  children?: ReactNode;
+  /**
+   * SOT에서 정의한 버튼 스타일 축(solid/outlined/text-button).
+   */
+  variant?: ButtonVariant;
+  /**
+   * UX priority(semantic color). foundation semantic 색과 매핑된다.
+   */
+  intent?: ButtonIntent;
+  /**
+   * 디자인 토큰 사이즈 alias(small~xlarge). Theme size 단계와 매핑된다.
+   */
+  size?: ButtonSize;
+  /**
+   * radius alias. round는 full radius를 사용한다.
+   */
+  shape?: ButtonShape;
+  /**
+   * UI state: readonly/disabled 를 명시적으로 설정할 수 있다.
+   */
+  state?: ButtonState;
+  /**
+   * block이면 width:100%로 확장된다.
+   */
+  block?: boolean;
+  /**
+   * Theme의 loading 속성과 연동된다.
+   */
+  loading?: boolean;
+  /**
+   * 아이콘 슬롯 위치. left/right/none.
+   */
+  iconSlot?: ButtonIconSlot;
+  /**
+   * 아이콘 노드. 슬롯과 함께 전달한다.
+   */
+  icon?: ReactNode;
+  /**
+   * 라벨 앞에 표시할 prefix 슬롯.
+   */
+  prefix?: ReactElement;
+  /**
+   * 라벨 뒤에 표시할 suffix 슬롯.
+   */
+  suffix?: ReactElement;
+  /**
+   * Storybook에서 hover/pressed 상태를 강제로 보여주기 위한 data attribute.
+   */
+  "data-simulated-state"?: ButtonSimulatedState;
+}

package/src/components/button/utils/index.ts

@@ -0,0 +1,58 @@
+import clsx from "clsx";
+import type {
+  ButtonIconSlot,
+  ButtonIntent,
+  ButtonShape,
+  ButtonSize,
+  ButtonState,
+  ButtonVariant,
+} from "../types";
+
+type ButtonClassNameOptions = {
+  variant: ButtonVariant;
+  intent: ButtonIntent;
+  size: ButtonSize;
+  shape: ButtonShape;
+  block: boolean;
+  loading: boolean;
+  iconSlot: ButtonIconSlot;
+  iconOnly: boolean;
+  state: ButtonState;
+  className?: string;
+};
+
+const BUTTON_CLASSNAME = "button";
+
+/**
+ * 버튼 클래스 조합 helper: variant/intent/size 별 modifier를 한 곳에서 관리한다.
+ */
+const composeButtonClassName = ({
+  variant,
+  intent,
+  size,
+  shape,
+  block,
+  loading,
+  iconSlot,
+  iconOnly,
+  state,
+  className,
+}: ButtonClassNameOptions) =>
+  clsx(
+    BUTTON_CLASSNAME,
+    `${BUTTON_CLASSNAME}--variant-${variant}`,
+    `${BUTTON_CLASSNAME}--intent-${intent}`,
+    `${BUTTON_CLASSNAME}--size-${size}`,
+    `${BUTTON_CLASSNAME}--shape-${shape}`,
+    {
+      [`${BUTTON_CLASSNAME}--state-${state}`]: state !== "default",
+      [`${BUTTON_CLASSNAME}--block`]: block,
+      [`${BUTTON_CLASSNAME}--loading`]: loading,
+      [`${BUTTON_CLASSNAME}--icon-${iconSlot}`]: iconSlot !== "none",
+      [`${BUTTON_CLASSNAME}--icon-only`]: iconOnly,
+    },
+    className,
+  );
+
+export { BUTTON_CLASSNAME, composeButtonClassName };
+export type { ButtonClassNameOptions };

package/src/components/calendar/hooks/index.ts

@@ -0,0 +1,4 @@
+/**
+ * TODO(calendar): 접근성/상태 계산 hook을 정의한다.
+ */
+export {};

package/src/components/calendar/index.scss

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

package/src/components/calendar/index.tsx

@@ -0,0 +1,4 @@
+/**
+ * calendar 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
+ */
+export * from "./markup";

package/src/components/calendar/markup/index.tsx

@@ -0,0 +1,4 @@
+/**
+ * TODO(calendar): SOT 및 사용자 제약에 따라 컴포넌트를 구현한다.
+ */
+export {};

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

@@ -0,0 +1,3 @@
+@use "@uniai-fe/uds-foundation/css";
+
+/* TODO(calendar): 스타일을 SOT 토큰 값으로 정의한다. */

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

@@ -0,0 +1,4 @@
+/**
+ * TODO(calendar): variant/slot 타입 정의를 작성한다.
+ */
+export {};

package/src/components/calendar/utils/index.ts

@@ -0,0 +1,4 @@
+/**
+ * TODO(calendar): 토큰 매핑과 클래스명 유틸을 구현한다.
+ */
+export {};

package/src/components/checkbox/hooks/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Checkbox 전용 hook placeholder.
+ */
+export {};

package/src/components/checkbox/img/check-large.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.699997 3.52844L4.23553 7.06398L10.5995 0.700012" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/checkbox/img/check-medium.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.170857 3.35307C-0.0569492 3.12526 -0.0569492 2.75569 0.170857 2.52788C0.398662 2.30008 0.768239 2.30008 0.996045 2.52788L3.52973 5.06157L8.42044 0.170859C8.64824 -0.0569466 9.01782 -0.056947 9.24562 0.170859C9.47343 0.398665 9.47343 0.768242 9.24562 0.996047L3.94232 6.29935C3.83293 6.40874 3.68444 6.47025 3.52973 6.47025C3.37502 6.47025 3.22653 6.40874 3.11713 6.29935L0.170857 3.35307Z" fill="white"/>
+</svg>

package/src/components/checkbox/img/check.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.170857 3.35307C-0.0569492 3.12526 -0.0569492 2.75569 0.170857 2.52788C0.398662 2.30008 0.768239 2.30008 0.996045 2.52788L3.52973 5.06157L8.42044 0.170859C8.64824 -0.0569466 9.01782 -0.056947 9.24562 0.170859C9.47343 0.398665 9.47343 0.768242 9.24562 0.996047L3.94232 6.29935C3.83293 6.40874 3.68444 6.47025 3.52973 6.47025C3.37502 6.47025 3.22653 6.40874 3.11713 6.29935L0.170857 3.35307Z" fill="white"/>
+</svg>

package/src/components/checkbox/index.scss

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

package/src/components/checkbox/index.tsx

@@ -0,0 +1,4 @@
+import "./index.scss";
+
+export * from "./markup";
+export type * from "./types";

package/src/components/checkbox/markup/Checkbox.tsx

@@ -0,0 +1,127 @@
+import clsx from "clsx";
+import { forwardRef, useId } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import type { CheckboxFieldProps, CheckboxProps, CheckboxSize } from "../types";
+import CheckLargeIcon from "../img/check-large.svg";
+import CheckMediumIcon from "../img/check-medium.svg";
+
+const CHECKBOX_CLASSNAME = "checkbox";
+const CHECKBOX_INDICATOR_CLASSNAME = "checkbox-indicator";
+const CHECKBOX_FIELD_CLASSNAME = "checkbox-field";
+const CHECKBOX_LABEL_WRAPPER_CLASSNAME = "checkbox-label-wrapper";
+const CHECKBOX_LABEL_TEXT_CLASSNAME = "checkbox-label-text";
+const CHECKBOX_HELPER_CLASSNAME = "checkbox-helper";
+
+const getIndicatorIcon = (size: CheckboxSize) =>
+  size === "large" ? CheckLargeIcon : CheckMediumIcon;
+
+/**
+ * 체크박스 컴포넌트; Radix Checkbox thin wrapper
+ * @component
+ * @param {CheckboxProps} props
+ * @param {CheckboxSize} [props.size] medium, large
+ * @example
+ * <Checkbox size="medium" checked />
+ */
+export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
+  function Checkbox(
+    { size = "medium", className, disabled, ...restProps },
+    ref,
+  ) {
+    const IndicatorIcon = getIndicatorIcon(size);
+
+    return (
+      <CheckboxPrimitive.Root
+        ref={ref}
+        disabled={disabled}
+        data-size={size}
+        data-disabled={disabled ? "true" : undefined}
+        className={clsx(CHECKBOX_CLASSNAME, className)}
+        {...restProps}
+      >
+        <CheckboxPrimitive.Indicator className={CHECKBOX_INDICATOR_CLASSNAME}>
+          <IndicatorIcon aria-hidden />
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+    );
+  },
+);
+
+/**
+ * 체크박스 필드 컴포넌트; label/helper 텍스트 래퍼
+ * @component
+ * @param {CheckboxFieldProps} props
+ * @param {CheckboxSize} [props.size] medium, large
+ * @example
+ * <CheckboxField label="약관 동의" helperText="필수" checked />
+ */
+export const CheckboxField = forwardRef<HTMLButtonElement, CheckboxFieldProps>(
+  function CheckboxField(
+    {
+      label,
+      helperText,
+      helperTextProps,
+      labelProps,
+      fieldClassName,
+      labelWrapperClassName,
+      size = "medium",
+      id,
+      disabled,
+      ...restProps
+    },
+    ref,
+  ) {
+    const generatedId = useId();
+    const checkboxId = id ?? generatedId;
+    const labelId = label ? `${checkboxId}-label` : undefined;
+    const helperId = helperText ? `${checkboxId}-helper` : undefined;
+    // Label/helper는 Root 외부에서 htmlFor/aria 연결을 유지한다.
+
+    return (
+      <div
+        className={clsx(CHECKBOX_FIELD_CLASSNAME, fieldClassName)}
+        data-size={size}
+        data-disabled={disabled ? "true" : undefined}
+      >
+        <label
+          htmlFor={checkboxId}
+          {...labelProps}
+          className={clsx(
+            CHECKBOX_LABEL_WRAPPER_CLASSNAME,
+            labelWrapperClassName,
+            labelProps?.className,
+          )}
+          data-disabled={disabled ? "true" : undefined}
+          aria-disabled={disabled ? "true" : undefined}
+        >
+          <Checkbox
+            {...restProps}
+            id={checkboxId}
+            size={size}
+            disabled={disabled}
+            aria-labelledby={labelId}
+            aria-describedby={helperId}
+            ref={ref}
+          />
+          {label ? (
+            <span id={labelId} className={CHECKBOX_LABEL_TEXT_CLASSNAME}>
+              {label}
+            </span>
+          ) : null}
+        </label>
+        {helperText ? (
+          <p
+            id={helperId}
+            {...helperTextProps}
+            className={clsx(
+              CHECKBOX_HELPER_CLASSNAME,
+              helperTextProps?.className,
+            )}
+          >
+            {helperText}
+          </p>
+        ) : null}
+      </div>
+    );
+  },
+);

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

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

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

@@ -0,0 +1,164 @@
+@use "@uniai-fe/uds-foundation/css";
+
+:where(.radix-themes, .theme-root, :root) {
+  --theme-checkbox-frame-size-medium: 20px;
+  --theme-checkbox-frame-size-large: 24px;
+  --theme-checkbox-indicator-size-medium: 16px;
+  --theme-checkbox-indicator-size-large: 20px;
+  --theme-checkbox-control-radius-medium: var(--theme-radius-xsmall-3, 3px);
+  --theme-checkbox-control-radius-large: var(--theme-radius-small-1, 4px);
+  --theme-checkbox-border-width: 1.4px;
+  --theme-checkbox-border-color: var(--color-border-standard-assistive);
+  --theme-checkbox-border-selected: var(--color-primary-default);
+  --theme-checkbox-surface: var(--color-common-100);
+  --theme-checkbox-surface-selected: var(--color-primary-default);
+  --theme-checkbox-surface-disabled: var(--color-neutral-95);
+  --theme-checkbox-label-color: var(--color-label-strong);
+  --theme-checkbox-label-disabled: var(--color-label-disabled);
+  --theme-checkbox-helper-color: var(--color-label-neutral);
+  --theme-checkbox-helper-disabled: var(--color-label-disabled);
+  --theme-checkbox-icon-color: var(--color-common-100);
+  --theme-checkbox-focus-ring: rgba(2, 84, 255, 0.32);
+  --theme-checkbox-disabled-selected-opacity: 0.28;
+}
+
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--theme-checkbox-frame-size-medium);
+  block-size: var(--theme-checkbox-frame-size-medium);
+  border-radius: var(--theme-checkbox-control-radius-medium);
+  background-color: transparent; // 프레임은 완전 투명
+  border: none;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    opacity 0.15s ease,
+    box-shadow 0.15s ease;
+
+  &[data-size="medium"] {
+    inline-size: var(--theme-checkbox-frame-size-medium);
+    block-size: var(--theme-checkbox-frame-size-medium);
+    border-radius: var(--theme-checkbox-control-radius-medium);
+  }
+
+  &[data-size="large"] {
+    inline-size: var(--theme-checkbox-frame-size-large);
+    block-size: var(--theme-checkbox-frame-size-large);
+    border-radius: var(--theme-checkbox-control-radius-large);
+  }
+
+  &[data-disabled="true"] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.checkbox:focus-visible {
+  box-shadow: 0 0 0 2px var(--theme-checkbox-focus-ring);
+}
+
+.checkbox-indicator {
+  inline-size: var(--theme-checkbox-indicator-size-medium);
+  block-size: var(--theme-checkbox-indicator-size-medium);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--theme-checkbox-icon-color);
+  border: var(--theme-checkbox-border-width) solid
+    var(--theme-checkbox-border-color);
+  border-radius: var(--theme-checkbox-control-radius-medium);
+  background-color: var(--theme-checkbox-surface);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease,
+    opacity 0.15s ease;
+
+  svg {
+    display: block;
+    inline-size: auto;
+    block-size: auto;
+    max-inline-size: 100%;
+    max-block-size: 100%;
+  }
+}
+
+.checkbox[data-size="large"] .checkbox-indicator {
+  inline-size: var(--theme-checkbox-indicator-size-large);
+  block-size: var(--theme-checkbox-indicator-size-large);
+  border-radius: var(--theme-checkbox-control-radius-large);
+}
+
+// 인디케이터 영역(16x16 / 20x20)에만 상태 색상을 입혀 Figma 레이아웃과 동일하게 유지한다.
+.checkbox[data-state="checked"] .checkbox-indicator,
+.checkbox[data-state="indeterminate"] .checkbox-indicator {
+  background-color: var(--theme-checkbox-surface-selected);
+  border-color: var(--theme-checkbox-border-selected);
+}
+
+.checkbox[data-disabled="true"] .checkbox-indicator {
+  background-color: var(--theme-checkbox-surface-disabled);
+  border-color: var(--theme-checkbox-border-color);
+  opacity: 1;
+}
+
+.checkbox[data-disabled="true"][data-state="checked"] .checkbox-indicator,
+.checkbox[data-disabled="true"][data-state="indeterminate"]
+  .checkbox-indicator {
+  // Figma 기준 disabled selected 상태는 primary 면을 유지하며 투명도로 구분한다.
+  background-color: var(--theme-checkbox-surface-selected);
+  border-color: var(--theme-checkbox-border-selected);
+  opacity: var(--theme-checkbox-disabled-selected-opacity);
+}
+
+.checkbox-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-1);
+  color: var(--theme-checkbox-label-color);
+}
+
+.checkbox-field[data-disabled="true"] {
+  color: var(--theme-checkbox-label-disabled);
+}
+
+.checkbox-label-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-2);
+  cursor: pointer;
+}
+
+.checkbox-label-wrapper[data-disabled="true"] {
+  cursor: not-allowed;
+}
+
+.checkbox-label-text {
+  font-weight: var(--font-body-medium-weight);
+  user-select: none;
+}
+
+.checkbox-field[data-size="medium"] .checkbox-label-text {
+  font-size: var(--font-body-xsmall-size);
+  line-height: var(--font-body-xsmall-line-height);
+}
+
+.checkbox-field[data-size="large"] .checkbox-label-text {
+  font-size: var(--font-body-medium-size);
+  line-height: var(--font-body-medium-line-height);
+}
+
+.checkbox-helper {
+  margin: 0;
+  font-size: var(--font-caption-large-size);
+  line-height: var(--font-caption-large-line-height);
+  color: var(--theme-checkbox-helper-color);
+  user-select: none;
+}
+
+.checkbox-field[data-disabled="true"] .checkbox-helper {
+  color: var(--theme-checkbox-helper-disabled);
+}

package/src/components/checkbox/types/checkbox.ts

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+
+export type CheckboxSize = "medium" | "large";
+
+export type CheckboxPrimitiveProps = ComponentPropsWithoutRef<
+  typeof CheckboxPrimitive.Root
+>;
+
+export interface CheckboxProps extends CheckboxPrimitiveProps {
+  size?: CheckboxSize;
+}
+
+export interface CheckboxFieldProps extends CheckboxProps {
+  label?: ReactNode;
+  helperText?: ReactNode;
+  helperTextProps?: ComponentPropsWithoutRef<"p">;
+  labelProps?: ComponentPropsWithoutRef<"label">;
+  fieldClassName?: string;
+  labelWrapperClassName?: string;
+}

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

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

package/src/components/chip/hooks/index.ts

@@ -0,0 +1,4 @@
+/**
+ * TODO(chips): 접근성/상태 계산 hook을 정의한다.
+ */
+export {};

package/src/components/chip/img/remove.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8889 4.28931C11.0972 4.08103 11.4355 4.08103 11.6438 4.28931C11.8521 4.49759 11.8521 4.83592 11.6438 5.04419L8.72095 7.96606L11.6438 10.8889C11.8521 11.0972 11.8521 11.4355 11.6438 11.6438C11.4355 11.8521 11.0972 11.8521 10.8889 11.6438L7.96606 8.72095L5.04419 11.6438C4.83592 11.8521 4.49759 11.8521 4.28931 11.6438C4.08103 11.4355 4.08103 11.0972 4.28931 10.8889L7.21118 7.96606L4.28931 5.04419C4.08103 4.83591 4.08103 4.49759 4.28931 4.28931C4.49759 4.08103 4.83591 4.08103 5.04419 4.28931L7.96606 7.21118L10.8889 4.28931Z" fill="currentColor"/>
+</svg>

package/src/components/chip/index.scss

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

package/src/components/chip/index.tsx

@@ -0,0 +1,6 @@
+/**
+ * chips 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
+ */
+import "./index.scss";
+
+export * from "./markup";

package/src/components/chip/markup/Chip.tsx

@@ -0,0 +1,103 @@
+import { forwardRef, type Ref } from "react";
+import RemoveIcon from "../img/remove.svg";
+import type { ChipInputProps, ChipProps } from "../types";
+import {
+  CHIP_LABEL_CLASSNAME,
+  CHIP_LEADING_CLASSNAME,
+  CHIP_REMOVE_BUTTON_CLASSNAME,
+  composeChipClassName,
+} from "../utils";
+
+// kind === "input" 조합에서 props를 ChipInputProps로 좁히기 위한 type guard.
+const isChipInputProps = (props: ChipProps): props is ChipInputProps =>
+  props.kind === "input";
+
+/**
+ * Chip 종류별로 interactive/input 구조가 달라 별도 분기한다.
+ */
+const Chip = forwardRef<HTMLElement, ChipProps>((props, ref) => {
+  if (isChipInputProps(props)) {
+    // input kind는 figure + remove 버튼 조합으로 구성한다.
+    const {
+      children,
+      className,
+      removeButtonLabel = "선택 항목 삭제",
+      onRemove,
+      selected,
+      leading,
+      ...restProps
+    } = props;
+    const hasLeading = Boolean(leading);
+    const combinedClassName = composeChipClassName({
+      kind: "input",
+      selected,
+      hasLeading,
+      removable: true,
+      className,
+    });
+
+    return (
+      <figure
+        {...restProps}
+        ref={ref as Ref<HTMLElementTagNameMap["figure"]>}
+        className={combinedClassName}
+        data-kind="input"
+        data-removable="true"
+        data-selected={selected ? "true" : undefined}
+        data-has-leading={hasLeading ? "true" : undefined}
+      >
+        <span className={CHIP_LABEL_CLASSNAME}>{children}</span>
+        <button
+          type="button"
+          className={CHIP_REMOVE_BUTTON_CLASSNAME}
+          aria-label={removeButtonLabel}
+          onClick={onRemove}
+        >
+          <RemoveIcon aria-hidden="true" />
+        </button>
+      </figure>
+    );
+  }
+
+  const { children, selected, leading, className, kind, type, ...restProps } =
+    props;
+  const resolvedKind = kind ?? "filter";
+  const isAssist = resolvedKind === "assist";
+  const hasLeading = isAssist && Boolean(leading);
+  const combinedClassName = composeChipClassName({
+    kind: resolvedKind,
+    selected,
+    hasLeading,
+    removable: false,
+    className,
+  });
+
+  return (
+    <button
+      {...restProps}
+      ref={ref as Ref<HTMLButtonElement>}
+      type={type ?? "button"}
+      className={combinedClassName}
+      data-kind={resolvedKind}
+      data-selected={selected ? "true" : undefined}
+      data-has-leading={hasLeading ? "true" : undefined}
+      aria-pressed={
+        typeof selected === "boolean" &&
+        (resolvedKind === "filter" || resolvedKind === "filter-rounded")
+          ? selected
+          : undefined
+      }
+    >
+      {isAssist && leading ? (
+        <span className={CHIP_LEADING_CLASSNAME} aria-hidden="true">
+          {leading}
+        </span>
+      ) : null}
+      <span className={CHIP_LABEL_CLASSNAME}>{children}</span>
+    </button>
+  );
+});
+
+Chip.displayName = "Chip";
+
+export { Chip };

package/src/components/chip/markup/index.tsx

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