@musecat/uikit 0.1.1

package/packages/Components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,24 @@
+import type { TextProps } from "@/packages/Components/Text/Text.types";
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type {
+  BorderProps,
+  ThemeSystemProps,
+} from "@/packages/Frameworks/Theme/Theme.types";
+
+export interface CheckboxProps
+  extends Omit<
+      React.InputHTMLAttributes<HTMLInputElement>,
+      "size" | "title" | "color"
+    >,
+    BorderProps,
+    RadiusProps,
+    ThemeSystemProps {
+  "data-color-mode"?: string;
+  title?: React.ReactNode;
+  titleType?: TextProps["type"];
+  titleSpaceBetween?: boolean;
+  reversed?: boolean;
+  readOnly?: boolean;
+  size?: UIKitSizeValue;
+}

package/packages/Components/CodeBox/CodeBox.copy.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { NavigatorClipboard } from "@musecat/functionkit";
+import Icon from "@/packages/Components/Icon/Icon";
+import Text from "@/packages/Components/Text/Text";
+import View from "@/packages/Frameworks/View/View";
+
+export default function CodeBox_Copy({
+  language,
+  code,
+}: {
+  language: string;
+  code: string;
+}) {
+  return (
+    <View
+      alignItems="center"
+      justifyContent="space-between"
+      gap={12}
+      padding={[12, 12, 0, 12]}
+    >
+      <View
+        padding={[6, 10]}
+        themePreset="UISecondary"
+        radius="Circle"
+        border="Regular"
+      >
+        <Text type="Footnote">{language}</Text>
+      </View>
+
+      <Icon
+        icon="iContentCopy"
+        radius="Circle"
+        themePreset="UISecondary"
+        border="Regular"
+        size={18}
+        box
+        boxOptions={{ padding: 6 }}
+        pressable={{ onClick: () => NavigatorClipboard({ text: code }) }}
+      />
+    </View>
+  );
+}

package/packages/Components/CodeBox/CodeBox.module.scss

@@ -0,0 +1,72 @@
+.CodeBox {
+  overflow: hidden;
+  position: relative;
+}
+
+.Pre {
+  margin: 0;
+  padding: 1.2rem 1.6rem 1.6rem;
+  overflow: auto;
+
+  .Code {
+    display: block;
+    word-break: break-all;
+    font-size: var(--font-caption1-size);
+    line-height: 1.6;
+    letter-spacing: -0.02rem;
+    white-space: pre-wrap;
+  }
+}
+
+/* Prism token - 컬러 스킴 변수 기준 */
+.CodeBox :global(.token.comment),
+.CodeBox :global(.token.prolog),
+.CodeBox :global(.token.doctype),
+.CodeBox :global(.token.cdata) {
+  color: var(--color-text-base-light);
+  opacity: 0.8;
+}
+
+.CodeBox :global(.token.punctuation),
+.CodeBox :global(.token.operator) {
+  color: var(--color-text-base-light);
+}
+
+.CodeBox :global(.token.keyword),
+.CodeBox :global(.token.atrule) {
+  color: var(--color-purple-3);
+}
+
+.CodeBox :global(.token.function),
+.CodeBox :global(.token.class-name) {
+  color: var(--color-blue-3);
+}
+
+.CodeBox :global(.token.string),
+.CodeBox :global(.token.char),
+.CodeBox :global(.token.attr-value) {
+  color: var(--color-green-3);
+}
+
+.CodeBox :global(.token.number),
+.CodeBox :global(.token.boolean),
+.CodeBox :global(.token.constant) {
+  color: var(--color-orange-3);
+}
+
+.CodeBox :global(.token.property),
+.CodeBox :global(.token.selector),
+.CodeBox :global(.token.tag),
+.CodeBox :global(.token.builtin) {
+  color: var(--color-blue-3);
+}
+
+.CodeBox :global(.token.variable),
+.CodeBox :global(.token.parameter) {
+  color: var(--color-yellow-3);
+}
+
+.CodeBox :global(.token.regex),
+.CodeBox :global(.token.important) {
+  color: var(--color-red-3);
+}

package/packages/Components/CodeBox/CodeBox.tsx

@@ -0,0 +1,91 @@
+import Prism from "prismjs";
+import CodeBox_Copy from "@/packages/Components/CodeBox/CodeBox.copy";
+import styles from "@/packages/Components/CodeBox/CodeBox.module.scss";
+import type { CodeBoxProps } from "@/packages/Components/CodeBox/CodeBox.types";
+import { normalizeLang } from "@/packages/Frameworks/_shared/normalize";
+import View from "@/packages/Frameworks/View/View";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-markdown";
+import "prismjs/components/prism-markup";
+import "prismjs/components/prism-scss";
+import "prismjs/components/prism-tsx";
+import "prismjs/components/prism-typescript";
+
+export default function CodeBox({
+  code,
+  language,
+  border,
+  "data-color-mode": dataTheme,
+  themePreset,
+  background,
+  color,
+  shadow,
+  radius,
+  themeInteractive,
+  selected,
+  disabled,
+  readOnly,
+  backgroundBlur,
+  className,
+  style,
+}: CodeBoxProps) {
+  const lang = normalizeLang(language);
+  const grammar = Prism.languages[lang] ?? Prism.languages.markup;
+  const source = code.trim();
+  const html = Prism.highlight(source, grammar, lang);
+  const substitutedLanguage =
+    language === "tsx"
+      ? "TSX"
+      : language === "jsx"
+        ? "JSX"
+        : language === "json"
+          ? "JSON"
+          : language === "python"
+            ? "Py"
+            : language;
+
+  return (
+    <View
+      column
+      gap={0}
+      className={`${styles.CodeBox}${className ? ` ${className}` : ""}`}
+      style={style}
+      data-color-mode={dataTheme}
+      border={border}
+      background={background}
+      themePreset={themePreset ?? "UIPrimary"}
+      color={color}
+      shadow={shadow}
+      radius={radius ?? "Regular"}
+      themeInteractive={themeInteractive}
+      selected={selected}
+      disabled={disabled}
+      readOnly={readOnly}
+      backgroundBlur={backgroundBlur}
+    >
+      {substitutedLanguage && (
+        <CodeBox_Copy
+          language={substitutedLanguage}
+          code={source}
+          data-color-mode={dataTheme}
+        />
+      )}
+      {}
+      {}
+      <pre
+        className={`${styles.Pre} language-${lang}`}
+        data-color-mode={dataTheme}
+      >
+        <code
+          className={`${styles.Code} language-${lang}`}
+          data-color-mode={dataTheme}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </pre>
+    </View>
+  );
+}

package/packages/Components/CodeBox/CodeBox.types.ts

@@ -0,0 +1,17 @@
+import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type {
+  BorderProps,
+  ThemeSystemProps,
+} from "@/packages/Frameworks/Theme/Theme.types";
+
+export interface CodeBoxProps
+  extends ThemeSystemProps,
+    RadiusProps,
+    BorderProps {
+  "data-color-mode"?: string;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  code: string;
+  language?: string;
+}

package/packages/Components/ContextMenu/ContextMenu.module.scss

@@ -0,0 +1,8 @@
+.OptionItem {
+  padding: 0.6rem 1.6rem;
+  width: 100%;
+
+  &[data-active="true"] {
+    background: color-mix(in srgb, currentcolor 10%, transparent);
+  }
+}

package/packages/Components/ContextMenu/ContextMenu.options.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import {
+  type KeyboardEvent,
+  type MouseEvent,
+  memo,
+  type ReactElement,
+} from "react";
+import styles from "@/packages/Components/ContextMenu/ContextMenu.module.scss";
+import type { ContentItem } from "@/packages/Components/ContextMenu/ContextMenu.types";
+import Icon from "@/packages/Components/Icon/Icon";
+import Text from "@/packages/Components/Text/Text";
+import Pressable from "@/packages/Frameworks/Pressable/Pressable";
+import View from "@/packages/Frameworks/View/View";
+
+export interface ContextMenuOptionProps {
+  item: ContentItem;
+  index: number;
+  listId: string;
+  openSource: "mouse" | "keyboard";
+  activeIndex: number;
+  isInteractionDisabled: boolean;
+  isOptionDisabled: (option: ContentItem) => boolean;
+  setOpenSource: (source: "mouse" | "keyboard") => void;
+  setActiveIndex: (index: number) => void;
+  selectOption: () => void;
+  isSheetMode?: boolean;
+  showCheck?: boolean;
+}
+
+const ContextMenuOption = memo(function ContextMenuOption(
+  props: ContextMenuOptionProps,
+): ReactElement {
+  const {
+    item,
+    index,
+    listId,
+    openSource,
+    activeIndex,
+    isInteractionDisabled,
+    isOptionDisabled,
+    setOpenSource,
+    setActiveIndex,
+    selectOption,
+    showCheck,
+    isSheetMode,
+  } = props;
+  const isSelected = !!item.selected;
+  const isActive = openSource === "keyboard" && index === activeIndex;
+  const isDisabled = isInteractionDisabled || isOptionDisabled(item);
+
+  const onMouseEnter = () => {
+    if (isDisabled) return;
+    setOpenSource("mouse");
+    setActiveIndex(index);
+  };
+
+  const onMouseDown = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const onClick = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isDisabled) return;
+    selectOption();
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (isDisabled) return;
+      selectOption();
+    }
+  };
+
+  return (
+    <Pressable
+      id={`${listId}-${index}`}
+      className={styles.OptionItem}
+      role="option"
+      aria-selected={isSelected}
+      data-selected={isSelected ? "true" : "false"}
+      data-active={isActive ? "true" : "false"}
+      data-disabled={isDisabled ? "true" : "false"}
+      themeInteractive={!isDisabled}
+      disabled={isDisabled}
+      radius={isSheetMode ? "Light" : "ExtraLight"}
+      onMouseEnter={onMouseEnter}
+      onMouseDown={onMouseDown}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      alignItems="center"
+      gap={8}
+      width="100%"
+      padding={isSheetMode ? [12, 16] : [6, 12]}
+    >
+      {showCheck && (
+        <Icon
+          icon="iCheck"
+          size={16}
+          style={{ flex: "none" }}
+          opacity={isSelected ? 1 : 0}
+        />
+      )}
+      <View gap={6} alignItems="center">
+        {item.icon && <Icon icon={item.icon} size={16} />}
+        <View column gap={2}>
+          <Text type="Subheadline">{item.label}</Text>
+          {item.description && (
+            <Text
+              type="Caption2"
+              style={{ color: "var(--ds-gray-700, currentColor)" }}
+            >
+              {item.description}
+            </Text>
+          )}
+        </View>
+      </View>
+    </Pressable>
+  );
+});
+
+export default ContextMenuOption;