@uniai-fe/uds-primitives 0.0.1

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

@@ -0,0 +1,252 @@
+@use "@uniai-fe/uds-foundation/css";
+
+:where(.radix-themes, .theme-root) {
+  --theme-radio-frame-size-medium: 20px;
+  --theme-radio-frame-size-large: 24px;
+  --theme-radio-indicator-size-medium: 16px;
+  --theme-radio-indicator-size-large: 20px;
+  --theme-radio-indicator-border-width: 1.4px;
+  --theme-radio-indicator-border-width-selected-medium: 4px;
+  --theme-radio-indicator-border-width-selected-large: 6px;
+  --theme-radio-border-color: var(--color-border-standard-assistive);
+  --theme-radio-border-selected: var(--color-primary-default);
+  --theme-radio-surface-selected: var(--color-primary-default);
+  --theme-radio-surface-disabled: var(--color-border-standard-assistive);
+  --theme-radio-border-disabled: var(--color-border-standard-assistive);
+  --theme-radio-disabled-selected-fill: var(--color-primary-default);
+  --theme-radio-label-color: var(--color-label-strong);
+  --theme-radio-label-disabled: var(--color-label-disabled);
+  --theme-radio-helper-color: var(--color-label-neutral);
+  --theme-radio-helper-disabled: var(--color-label-disabled);
+  --theme-radio-card-background: var(--color-common-100);
+  --theme-radio-card-title-color: var(--color-label-strong);
+  --theme-radio-card-description-color: var(--color-label-neutral);
+  --theme-radio-card-badge-background: var(--color-bg-surface-static-blue);
+  --theme-radio-card-badge-color: var(--color-primary-default);
+  --theme-radio-focus-ring: rgba(2, 84, 255, 0.32);
+  --theme-radio-disabled-selected-opacity: 0.28;
+}
+
+.radio {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--theme-radio-frame-size-medium);
+  block-size: var(--theme-radio-frame-size-medium);
+  border: none;
+  background-color: transparent;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  transition:
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
+
+  &[data-size="large"] {
+    inline-size: var(--theme-radio-frame-size-large);
+    block-size: var(--theme-radio-frame-size-large);
+  }
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+.radio:focus-visible {
+  box-shadow: 0 0 0 2px var(--theme-radio-focus-ring);
+}
+
+.radio-indicator {
+  inline-size: var(--theme-radio-indicator-size-medium);
+  block-size: var(--theme-radio-indicator-size-medium);
+  border-radius: 9999px;
+  border: var(--theme-radio-indicator-border-width) solid
+    var(--theme-radio-border-color);
+  transition: border-color 0.15s ease;
+}
+
+.radio,
+.radio[data-size="medium"] {
+  &[data-state="checked"] .radio-indicator {
+    border-width: var(--theme-radio-indicator-border-width-selected-medium);
+  }
+}
+
+.radio[data-size="large"] {
+  .radio-indicator {
+    inline-size: var(--theme-radio-indicator-size-large);
+    block-size: var(--theme-radio-indicator-size-large);
+  }
+  &[data-state="checked"] .radio-indicator {
+    border-width: var(--theme-radio-indicator-border-width-selected-large);
+  }
+}
+
+.radio[data-state="checked"] .radio-indicator {
+  border-color: var(--theme-radio-border-selected);
+}
+
+.radio[data-disabled="true"] .radio-indicator {
+  border-color: var(--theme-radio-border-disabled);
+  background-color: var(--theme-radio-surface-disabled);
+  opacity: 1;
+}
+
+.radio[data-disabled="true"][data-state="checked"] .radio-indicator {
+  border-color: var(--theme-radio-disabled-selected-fill);
+  opacity: var(--theme-radio-disabled-selected-opacity);
+}
+
+.radio-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-1);
+  color: var(--theme-radio-label-color);
+}
+
+.radio-field[data-disabled="true"] {
+  color: var(--theme-radio-label-disabled);
+}
+
+.radio-label-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-2);
+  cursor: pointer;
+}
+
+.radio-label-wrapper[data-disabled="true"] {
+  cursor: not-allowed;
+}
+
+.radio-label-text {
+  font-weight: var(--font-body-medium-weight);
+  user-select: none;
+}
+
+.radio-field[data-size="medium"] .radio-label-text {
+  font-size: var(--font-body-xsmall-size);
+  line-height: var(--font-body-xsmall-line-height);
+}
+
+.radio-field[data-size="large"] .radio-label-text {
+  font-size: var(--font-body-medium-size);
+  line-height: var(--font-body-medium-line-height);
+}
+
+.radio-helper {
+  margin: 0;
+  font-size: var(--font-caption-large-size);
+  line-height: var(--font-caption-large-line-height);
+  color: var(--theme-radio-helper-color);
+  user-select: none;
+}
+
+.radio-field[data-disabled="true"] .radio-helper {
+  color: var(--theme-radio-helper-disabled);
+}
+
+.radio-card-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-3);
+}
+
+.radio-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  inline-size: 100%;
+  gap: var(--spacing-gap-3);
+  padding: 16px 24px;
+  background-color: var(--theme-radio-card-background);
+  transition: background-color 0.15s ease;
+  cursor: pointer;
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+}
+
+.radio-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-1);
+  min-inline-size: 0;
+}
+
+.radio-card-title-row {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-1);
+  min-inline-size: 0;
+}
+
+.radio-card-title {
+  font-size: var(--font-heading-small-size);
+  line-height: var(--font-heading-small-line-height);
+  font-weight: var(--font-heading-small-weight);
+  letter-spacing: 0.2px;
+  color: var(--theme-radio-card-title-color);
+  white-space: nowrap;
+}
+
+.radio-card-badge {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 6px;
+  font-size: var(--font-caption-medium-size);
+  line-height: var(--font-caption-medium-line-height);
+  border-radius: 6px;
+  background-color: var(--theme-radio-card-badge-background);
+  color: var(--theme-radio-card-badge-color);
+}
+
+.radio-card[data-state="checked"] {
+  .radio-card-title {
+    color: var(--theme-radio-card-badge-color);
+  }
+  .radio-card-badge {
+    display: inline-flex;
+  }
+}
+
+.radio-card-description {
+  margin: 0;
+  font-size: var(--font-body-small-size);
+  line-height: var(--font-body-small-line-height);
+  color: var(--theme-radio-card-description-color);
+}
+
+.radio-card-indicator-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.radio-card-indicator {
+  inline-size: var(--theme-radio-indicator-size-medium);
+  block-size: var(--theme-radio-indicator-size-medium);
+  border-radius: 9999px;
+  border: var(--theme-radio-indicator-border-width) solid
+    var(--theme-radio-border-color);
+  transition: border-color 0.15s ease;
+}
+
+.radio-card[data-size="large"] .radio-card-indicator {
+  inline-size: var(--theme-radio-indicator-size-large);
+  block-size: var(--theme-radio-indicator-size-large);
+}
+
+.radio-card[data-state="checked"] .radio-card-indicator {
+  border-color: var(--theme-radio-border-selected);
+  border-width: var(--theme-radio-indicator-border-width-selected-medium);
+}
+
+.radio-card[data-size="large"][data-state="checked"] .radio-card-indicator {
+  border-width: var(--theme-radio-indicator-border-width-selected-large);
+}

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

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

package/src/components/radio/types/radio.ts

@@ -0,0 +1,63 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type * as RadixRadioGroup from "@radix-ui/react-radio-group";
+
+export type RadioSize = "medium" | "large";
+
+export type RadioPrimitiveProps = ComponentPropsWithoutRef<
+  typeof RadixRadioGroup.Item
+>;
+
+export interface RadioProps extends RadioPrimitiveProps {
+  size?: RadioSize;
+  className?: string;
+  disabled?: boolean;
+  id?: string;
+}
+
+export interface RadioFieldProps extends RadioProps {
+  label?: ReactNode;
+  helperText?: ReactNode;
+  helperTextProps?: ComponentPropsWithoutRef<"p">;
+  labelProps?: ComponentPropsWithoutRef<"label">;
+  fieldClassName?: string;
+  labelWrapperClassName?: string;
+  id?: string;
+  disabled?: boolean;
+}
+
+interface RadioCardDisplayProps {
+  title: ReactNode;
+  description?: ReactNode;
+  badge?: ReactNode;
+}
+
+export interface RadioCardProps
+  extends
+    Omit<RadioProps, keyof RadioCardDisplayProps>,
+    RadioCardDisplayProps {}
+
+export interface RadioCardGroupOption extends RadioCardDisplayProps {
+  id: string;
+  size?: RadioSize;
+  disabled?: boolean;
+  className?: string;
+}
+
+export interface RadioCardBadgeRenderContext {
+  option: RadioCardGroupOption;
+  isSelected: boolean;
+  isHighlighted: boolean;
+}
+
+export type RadioCardBadgeRender = (
+  context: RadioCardBadgeRenderContext,
+) => ReactNode;
+
+export interface RadioCardGroupProps extends ComponentPropsWithoutRef<
+  typeof RadixRadioGroup.Root
+> {
+  options: RadioCardGroupOption[];
+  size?: RadioSize;
+  highlightedValue?: string;
+  renderBadge?: RadioCardBadgeRender;
+}

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

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

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

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

package/src/components/scrollbar/index.scss

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

package/src/components/scrollbar/index.tsx

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

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

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

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

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

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

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

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

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

package/src/components/segmented-control/index.scss

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

package/src/components/segmented-control/index.tsx

@@ -0,0 +1,7 @@
+/**
+ * segmented-control 카테고리 배럴
+ */
+import "./index.scss";
+
+export * from "./markup";
+export * from "./types";

package/src/components/segmented-control/markup/SegmentedControl.tsx

@@ -0,0 +1,117 @@
+import { SegmentedControl as RadixSegmentedControl } from "@radix-ui/themes";
+import clsx from "clsx";
+import {
+  forwardRef,
+  useMemo,
+  useState,
+  type KeyboardEvent,
+  type MouseEvent,
+  type PointerEvent,
+} from "react";
+import type { SegmentedControlProps, SegmentedControlValue } from "../types";
+
+const toNullableValue = (value?: SegmentedControlValue) =>
+  value === undefined || value === "" ? undefined : value;
+
+const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
+  (
+    {
+      options,
+      ariaLabel,
+      keepSelected = true,
+      className,
+      onValueChange,
+      value: valueProp,
+      defaultValue,
+      ...restProps
+    },
+    forwardedRef,
+  ) => {
+    const isControlled = valueProp !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState<
+      SegmentedControlValue | undefined
+    >(toNullableValue(defaultValue));
+    const selectedValue = toNullableValue(
+      isControlled ? valueProp : uncontrolledValue,
+    );
+
+    const emitChange = (nextValue: SegmentedControlValue | undefined) => {
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      onValueChange?.(nextValue ?? "");
+    };
+
+    const handleRootValueChange = (nextValue: string) => {
+      emitChange(nextValue);
+    };
+
+    const resolvedValue = useMemo(
+      () => selectedValue ?? undefined,
+      [selectedValue],
+    );
+
+    return (
+      <RadixSegmentedControl.Root
+        {...restProps}
+        ref={forwardedRef}
+        aria-label={ariaLabel}
+        className={clsx("segmented-control", className)}
+        value={resolvedValue}
+        onValueChange={handleRootValueChange}
+        data-keep-selected={keepSelected ? "true" : undefined}
+      >
+        {options.map(option => {
+          const isDisabled = Boolean(option.disabled);
+          const isSelected = selectedValue === option.value;
+
+          const preventDisabledInteraction = (
+            event:
+              | MouseEvent<HTMLButtonElement>
+              | PointerEvent<HTMLButtonElement>
+              | KeyboardEvent<HTMLButtonElement>,
+          ) => {
+            if (!isDisabled) {
+              return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+          };
+
+          const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+            preventDisabledInteraction(event);
+            if (isDisabled) {
+              return;
+            }
+            if (!keepSelected && isSelected) {
+              event.preventDefault();
+              emitChange(undefined);
+            }
+          };
+
+          return (
+            <RadixSegmentedControl.Item
+              key={option.value}
+              value={option.value}
+              className="segmented-control-item"
+              aria-disabled={isDisabled || undefined}
+              data-disabled={isDisabled ? "true" : undefined}
+              tabIndex={isDisabled ? -1 : undefined}
+              onPointerDown={preventDisabledInteraction}
+              onKeyDown={preventDisabledInteraction}
+              onClick={handleClick}
+            >
+              <span className="segmented-control-item-label">
+                {option.label}
+              </span>
+            </RadixSegmentedControl.Item>
+          );
+        })}
+      </RadixSegmentedControl.Root>
+    );
+  },
+);
+
+SegmentedControl.displayName = "SegmentedControl";
+
+export { SegmentedControl };

package/src/components/segmented-control/markup/index.ts

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

package/src/components/segmented-control/styles/index.scss

@@ -0,0 +1,113 @@
+@use "@uniai-fe/uds-foundation/css";
+
+.segmented-control {
+  --segmented-height: 34px;
+  --segmented-padding: 2px;
+  --segmented-radius: 16px;
+  --segmented-bg: var(--color-bg-alternative-cool-gray, #f2f2f3);
+  --segmented-indicator-bg: var(--color-common-100, #ffffff);
+  --segmented-indicator-shadow: 2px 2px 4px rgba(0, 0, 0, 0.02);
+  --segmented-label-color: var(--color-label-neutral, #797e86);
+  --segmented-label-active-color: var(--color-label-strong, #181a1b);
+  --segmented-disabled-opacity: 0.4;
+  --segmented-item-padding-x: 22px;
+  --segmented-item-padding-y: 4px;
+  --segmented-item-font-size: var(--font-heading-xxsmall-size, 15px);
+  --segmented-item-font-weight: var(--font-heading-xxsmall-weight, 500);
+  --segmented-item-line-height: var(--font-heading-xxsmall-line-height, 1.5);
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: stretch;
+  padding: var(--segmented-padding);
+  border-radius: var(--segmented-radius);
+  background: var(--segmented-bg);
+  width: fit-content;
+  height: var(--segmented-height);
+  font-size: 0;
+  isolation: isolate;
+}
+
+.segmented-control:where(.rt-SegmentedControlRoot) {
+  /* Radix Theme 기본 inline-grid를 덮어 동일한 sizing 시스템에서만 layout이 될 수 있도록 한다. */
+  display: grid;
+}
+
+.segmented-control:where([data-keep-selected="true"]) {
+  --segmented-disabled-opacity: 0.3;
+}
+
+.segmented-control :where(.rt-SegmentedControlIndicator) {
+  border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
+  background: transparent;
+  box-shadow: none;
+  overflow: hidden;
+}
+
+.segmented-control :where(.rt-SegmentedControlIndicator)::before {
+  content: "";
+  position: absolute;
+  inset: var(--segmented-padding);
+  border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
+  background: var(--segmented-indicator-bg);
+  box-shadow: var(--segmented-indicator-shadow);
+}
+
+.segmented-control :where(.rt-SegmentedControlItemSeparator) {
+  display: none;
+}
+
+.segmented-control :where(.rt-SegmentedControlItem) {
+  background: transparent;
+  padding: 0;
+  border: none;
+  min-width: 0;
+  display: flex;
+}
+
+.segmented-control :where(.rt-SegmentedControlItemLabel) {
+  gap: 0;
+  height: fit-content;
+  padding: 0;
+  font-size: 0;
+}
+
+.segmented-control-item {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  .rt-SegmentedControlItemLabel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--segmented-item-padding-y) var(--segmented-item-padding-x);
+    border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
+  }
+}
+.segmented-control-item:where([data-disabled="true"]) {
+  cursor: not-allowed;
+  opacity: var(--segmented-disabled-opacity);
+}
+
+.segmented-control-item:where(:focus-visible) {
+  outline: 2px solid var(--color-focus-ring, var(--color-primary-default));
+  outline-offset: 2px;
+}
+
+.segmented-control-item-label {
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
+  font-size: var(--segmented-item-font-size);
+  font-weight: var(--segmented-item-font-weight);
+  line-height: var(--segmented-item-line-height);
+  letter-spacing: 0.2px;
+  color: var(--segmented-label-color);
+  transition: color 0.2s ease;
+}
+
+.segmented-control-item:where([data-state="on"]) .segmented-control-item-label {
+  color: var(--segmented-label-active-color);
+}

package/src/components/segmented-control/types/index.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithoutRef } from "react";
+import type { SegmentedControl as RadixSegmentedControlNamespace } from "@radix-ui/themes";
+
+export type SegmentedControlValue = string;
+
+export interface SegmentedControlOption {
+  value: SegmentedControlValue;
+  label: string;
+  disabled?: boolean;
+}
+
+type RadixSegmentedControlRootProps = ComponentPropsWithoutRef<
+  typeof RadixSegmentedControlNamespace.Root
+>;
+export interface SegmentedControlProps extends Omit<
+  RadixSegmentedControlRootProps,
+  "children"
+> {
+  options: SegmentedControlOption[];
+  ariaLabel: string;
+  keepSelected?: boolean;
+}

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

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

package/src/components/select/index.scss

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

package/src/components/select/index.tsx

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

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

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

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

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

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

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

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

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

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

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

package/src/components/spinner/index.scss

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