@vrnclr/ui 0.0.1

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@vrnclr/ui",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "@types/react": "^19"
+  }
+}

package/src/Avatar.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+  initials: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export function Avatar({ initials, size = "md", className = "", ...props }: AvatarProps) {
+  return (
+    <span
+      className={["vrnclr-avatar", className].filter(Boolean).join(" ")}
+      data-size={size}
+      {...props}
+    >
+      {initials}
+    </span>
+  );
+}

package/src/Badge.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export type BadgeVariant = "default" | "info" | "success" | "warning" | "error";
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+}
+
+export function Badge({ variant = "default", className = "", ...props }: BadgeProps) {
+  return (
+    <span
+      className={["vrnclr-badge", className].filter(Boolean).join(" ")}
+      data-variant={variant}
+      {...props}
+    />
+  );
+}

package/src/Button.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
+export type ButtonSize = "sm" | "md" | "lg";
+
+type BaseProps = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+};
+
+type ButtonAsButtonProps = BaseProps &
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asAnchor?: false;
+  };
+
+type ButtonAsAnchorProps = BaseProps & {
+  asAnchor: true;
+  children: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
+};
+
+export type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;
+
+function isAnchorLike(type: unknown): boolean {
+  if (type === "a") return true;
+  if (typeof type !== "function" && typeof type !== "object") return false;
+  const name =
+    (type as any).displayName?.toLowerCase() ||
+    (type as any).name?.toLowerCase() ||
+    "";
+  return name.includes("link");
+}
+
+export function Button(props: ButtonProps) {
+  const { variant = "primary", size = "md", className = "" } = props;
+  const cls = ["vrnclr-button", className].filter(Boolean).join(" ");
+
+  if (props.asAnchor) {
+    const { children } = props;
+
+    if (process.env.NODE_ENV === "development") {
+      if (!isAnchorLike((children as any)?.type)) {
+        console.warn(
+          "[Button] asAnchor: 자식은 anchor 계열이어야 해요. (예: <a>, <Link>)"
+        );
+      }
+    }
+
+    const childClassName = (children.props as any).className;
+    return React.cloneElement(children, {
+      className: childClassName ? `${cls} ${childClassName}` : cls,
+      "data-variant": variant,
+      "data-size": size,
+    } as any);
+  }
+
+  const { asAnchor: _a, variant: _v, size: _s, className: _c, ...rest } =
+    props as ButtonAsButtonProps;
+  return (
+    <button
+      className={cls}
+      data-variant={variant}
+      data-size={size}
+      {...rest}
+    />
+  );
+}

package/src/Card.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function Card({ className = "", ...props }: CardProps) {
+  return (
+    <div
+      className={["vrnclr-card", className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}
+
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardHeader({ className = "", ...props }: CardHeaderProps) {
+  return (
+    <div
+      className={["vrnclr-card-header", className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}
+
+export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardContent({ className = "", ...props }: CardContentProps) {
+  return (
+    <div
+      className={["vrnclr-card-content", className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}
+
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardFooter({ className = "", ...props }: CardFooterProps) {
+  return (
+    <div
+      className={["vrnclr-card-footer", className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}

package/src/Checkbox.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import React from "react";
+
+export interface CheckboxProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+}
+
+export function Checkbox({ label, className = "", ...props }: CheckboxProps) {
+  return (
+    <label
+      className={["vrnclr-checkbox-label", className].filter(Boolean).join(" ")}
+      data-disabled={props.disabled ? "true" : undefined}
+    >
+      <input
+        type="checkbox"
+        className="vrnclr-checkbox"
+        {...props}
+      />
+      {label}
+    </label>
+  );
+}

package/src/Input.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export type InputState = "default" | "error";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  state?: InputState;
+}
+
+export function Input({ state = "default", className = "", ...props }: InputProps) {
+  return (
+    <input
+      className={["vrnclr-input", className].filter(Boolean).join(" ")}
+      data-state={state}
+      {...props}
+    />
+  );
+}

package/src/Label.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+
+export function Label({ className = "", ...props }: LabelProps) {
+  return (
+    <label
+      className={["vrnclr-label", className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}

package/src/Separator.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+}
+
+export function Separator({
+  orientation = "horizontal",
+  className = "",
+  ...props
+}: SeparatorProps) {
+  return (
+    <div
+      role="separator"
+      className={["vrnclr-separator", className].filter(Boolean).join(" ")}
+      data-orientation={orientation}
+      {...props}
+    />
+  );
+}

package/src/Toggle.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import React, { useState } from "react";
+
+export interface ToggleProps {
+  defaultChecked?: boolean;
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  label?: string;
+  className?: string;
+}
+
+export function Toggle({
+  defaultChecked = false,
+  checked,
+  onChange,
+  disabled = false,
+  label,
+  className = "",
+}: ToggleProps) {
+  const [internal, setInternal] = useState(defaultChecked);
+  const on = checked !== undefined ? checked : internal;
+
+  function handleClick() {
+    if (disabled) return;
+    const next = !on;
+    setInternal(next);
+    onChange?.(next);
+  }
+
+  return (
+    <label
+      className={["vrnclr-toggle-label", className].filter(Boolean).join(" ")}
+      data-disabled={disabled ? "true" : undefined}
+    >
+      <button
+        type="button"
+        role="switch"
+        aria-checked={on}
+        onClick={handleClick}
+        disabled={disabled}
+        className="vrnclr-toggle"
+      >
+        <span className="vrnclr-toggle-thumb" />
+      </button>
+      {label}
+    </label>
+  );
+}

package/src/index.ts

@@ -0,0 +1,26 @@
+export { Button } from "./Button";
+export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button";
+
+export { Input } from "./Input";
+export type { InputProps, InputState } from "./Input";
+
+export { Badge } from "./Badge";
+export type { BadgeProps, BadgeVariant } from "./Badge";
+
+export { Card, CardHeader, CardContent, CardFooter } from "./Card";
+export type { CardProps, CardHeaderProps, CardContentProps, CardFooterProps } from "./Card";
+
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps } from "./Checkbox";
+
+export { Toggle } from "./Toggle";
+export type { ToggleProps } from "./Toggle";
+
+export { Label } from "./Label";
+export type { LabelProps } from "./Label";
+
+export { Separator } from "./Separator";
+export type { SeparatorProps } from "./Separator";
+
+export { Avatar } from "./Avatar";
+export type { AvatarProps } from "./Avatar";

package/src/styles.css

@@ -0,0 +1,291 @@
+/* ─── Default token values ─────────────────────────────────────────────── */
+
+:root {
+  --vrnclr-color-background: #fafafa;
+  --vrnclr-color-foreground: #09090b;
+  --vrnclr-color-primary: #2952cc;
+  --vrnclr-color-primary-foreground: #eff6ff;
+  --vrnclr-color-secondary: #f4f4f5;
+  --vrnclr-color-secondary-foreground: #18181b;
+  --vrnclr-color-muted: #f4f4f5;
+  --vrnclr-color-muted-foreground: #71717a;
+  --vrnclr-color-border: #e4e4e7;
+  --vrnclr-color-input: #e4e4e7;
+  --vrnclr-color-ring: #2952cc;
+  --vrnclr-color-destructive: #ef4444;
+  --vrnclr-color-destructive-foreground: #fafafa;
+
+  --vrnclr-radius-sm: 4px;
+  --vrnclr-radius-md: 8px;
+  --vrnclr-radius-lg: 16px;
+
+  --vrnclr-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --vrnclr-shadow-md: 0 4px 6px 0 rgba(0, 0, 0, 0.07);
+  --vrnclr-shadow-lg: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
+
+  --vrnclr-font-family: Inter, sans-serif;
+  --vrnclr-font-size-base: 16px;
+  --vrnclr-spacing-base: 4px;
+}
+
+/* ─── Button ───────────────────────────────────────────────────────────── */
+
+.vrnclr-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  border-radius: var(--vrnclr-radius-md);
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.15s, background-color 0.15s;
+  text-decoration: none;
+  white-space: nowrap;
+  font-family: inherit;
+}
+
+.vrnclr-button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Sizes */
+.vrnclr-button[data-size="sm"] { padding: 6px 12px; font-size: 12px; }
+.vrnclr-button[data-size="md"] { padding: 8px 16px; font-size: 14px; }
+.vrnclr-button[data-size="lg"] { padding: 10px 20px; font-size: 16px; }
+
+/* Variants */
+.vrnclr-button[data-variant="primary"] {
+  background-color: var(--vrnclr-color-primary);
+  color: var(--vrnclr-color-primary-foreground);
+}
+.vrnclr-button[data-variant="primary"]:hover { opacity: 0.9; }
+
+.vrnclr-button[data-variant="secondary"] {
+  background-color: var(--vrnclr-color-background);
+  color: var(--vrnclr-color-foreground);
+  border: 1px solid var(--vrnclr-color-border);
+}
+.vrnclr-button[data-variant="secondary"]:hover {
+  background-color: var(--vrnclr-color-secondary);
+}
+
+.vrnclr-button[data-variant="ghost"] {
+  background-color: transparent;
+  color: var(--vrnclr-color-muted-foreground);
+}
+.vrnclr-button[data-variant="ghost"]:hover {
+  background-color: var(--vrnclr-color-secondary);
+}
+
+.vrnclr-button[data-variant="destructive"] {
+  background-color: var(--vrnclr-color-destructive);
+  color: var(--vrnclr-color-destructive-foreground);
+}
+.vrnclr-button[data-variant="destructive"]:hover { opacity: 0.9; }
+
+/* ─── Input ────────────────────────────────────────────────────────────── */
+
+.vrnclr-input {
+  padding: 8px 12px;
+  font-size: 14px;
+  border: 1px solid var(--vrnclr-color-border);
+  border-radius: var(--vrnclr-radius-md);
+  background-color: var(--vrnclr-color-background);
+  color: var(--vrnclr-color-foreground);
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  font-family: inherit;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.vrnclr-input:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 2px var(--vrnclr-color-ring);
+}
+
+.vrnclr-input:disabled {
+  background-color: var(--vrnclr-color-muted);
+  color: var(--vrnclr-color-muted-foreground);
+  cursor: not-allowed;
+}
+
+.vrnclr-input[data-state="error"] {
+  border-color: var(--vrnclr-color-destructive);
+}
+
+.vrnclr-input[data-state="error"]:focus {
+  box-shadow: 0 0 0 2px var(--vrnclr-color-destructive);
+}
+
+/* ─── Card ─────────────────────────────────────────────────────────────── */
+
+.vrnclr-card {
+  background-color: var(--vrnclr-color-background);
+  border: 1px solid var(--vrnclr-color-border);
+  border-radius: var(--vrnclr-radius-lg);
+}
+
+.vrnclr-card-header {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.vrnclr-card-content {
+  padding: 0 20px 20px;
+}
+
+.vrnclr-card-footer {
+  padding: 16px 20px;
+  border-top: 1px solid var(--vrnclr-color-border);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* ─── Badge ────────────────────────────────────────────────────────────── */
+
+.vrnclr-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 9999px;
+}
+
+.vrnclr-badge[data-variant="default"] {
+  background-color: var(--vrnclr-color-primary);
+  color: var(--vrnclr-color-primary-foreground);
+}
+.vrnclr-badge[data-variant="info"]    { background-color: #dbeafe; color: #1d4ed8; }
+.vrnclr-badge[data-variant="success"] { background-color: #dcfce7; color: #15803d; }
+.vrnclr-badge[data-variant="warning"] { background-color: #fef9c3; color: #a16207; }
+.vrnclr-badge[data-variant="error"] {
+  background-color: var(--vrnclr-color-destructive);
+  color: var(--vrnclr-color-destructive-foreground);
+}
+
+/* ─── Checkbox ─────────────────────────────────────────────────────────── */
+
+.vrnclr-checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  color: var(--vrnclr-color-foreground);
+}
+
+.vrnclr-checkbox-label[data-disabled="true"] {
+  color: var(--vrnclr-color-muted-foreground);
+  cursor: not-allowed;
+}
+
+.vrnclr-checkbox {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--vrnclr-radius-sm);
+  border: 1px solid var(--vrnclr-color-border);
+  accent-color: var(--vrnclr-color-primary);
+  cursor: pointer;
+}
+
+.vrnclr-checkbox:disabled { cursor: not-allowed; }
+
+/* ─── Toggle ───────────────────────────────────────────────────────────── */
+
+.vrnclr-toggle-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  cursor: pointer;
+  color: var(--vrnclr-color-foreground);
+}
+
+.vrnclr-toggle-label[data-disabled="true"] {
+  color: var(--vrnclr-color-muted-foreground);
+  cursor: not-allowed;
+}
+
+.vrnclr-toggle {
+  width: 40px;
+  height: 24px;
+  border-radius: 9999px;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s;
+  padding: 0;
+  position: relative;
+}
+
+.vrnclr-toggle:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.vrnclr-toggle[aria-checked="true"]  { background-color: var(--vrnclr-color-primary); }
+.vrnclr-toggle[aria-checked="false"] { background-color: var(--vrnclr-color-secondary); }
+
+.vrnclr-toggle-thumb {
+  display: block;
+  width: 16px;
+  height: 16px;
+  background-color: var(--vrnclr-color-background);
+  border-radius: 9999px;
+  box-shadow: var(--vrnclr-shadow-sm);
+  transition: transform 0.15s;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+}
+
+.vrnclr-toggle[aria-checked="true"] .vrnclr-toggle-thumb  { transform: translateX(16px); }
+.vrnclr-toggle[aria-checked="false"] .vrnclr-toggle-thumb { transform: translateX(0); }
+
+/* ─── Label ────────────────────────────────────────────────────────────── */
+
+.vrnclr-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vrnclr-color-muted-foreground);
+}
+
+/* ─── Separator ────────────────────────────────────────────────────────── */
+
+.vrnclr-separator {
+  background-color: var(--vrnclr-color-border);
+  border: none;
+}
+
+.vrnclr-separator[data-orientation="horizontal"] {
+  height: 1px;
+  width: 100%;
+}
+
+.vrnclr-separator[data-orientation="vertical"] {
+  width: 1px;
+  align-self: stretch;
+}
+
+/* ─── Avatar ───────────────────────────────────────────────────────────── */
+
+.vrnclr-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: var(--vrnclr-color-primary);
+  color: var(--vrnclr-color-primary-foreground);
+  font-weight: 500;
+  user-select: none;
+  font-family: inherit;
+}
+
+.vrnclr-avatar[data-size="sm"] { width: 24px; height: 24px; font-size: 10px; }
+.vrnclr-avatar[data-size="md"] { width: 32px; height: 32px; font-size: 12px; }
+.vrnclr-avatar[data-size="lg"] { width: 40px; height: 40px; font-size: 14px; }

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "esnext"],
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  external: ["react", "react-dom"],
+  clean: true,
+  publicDir: false,
+  async onSuccess() {
+    const { copyFileSync } = await import("fs");
+    copyFileSync("src/styles.css", "dist/styles.css");
+  },
+});