첫 커밋: 로컬 프로젝트 업로드

baron-sso/common/ui/badge.ts

@@ -0,0 +1,28 @@
+export const commonBadgeBaseClass =
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2";
+
+export const commonBadgeVariantClasses = {
+  default:
+    "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/90",
+  secondary:
+    "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  outline: "text-foreground",
+  muted: "border-border bg-secondary/60 text-muted-foreground",
+  success:
+    "border-transparent bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300",
+  warning:
+    "border-transparent bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200",
+  destructive:
+    "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+  info: "border-transparent bg-blue-500 text-white hover:bg-blue-500/90",
+} as const;
+
+export type CommonBadgeVariant = keyof typeof commonBadgeVariantClasses;
+
+export function getCommonBadgeClasses({
+  variant = "default",
+}: {
+  variant?: CommonBadgeVariant;
+}) {
+  return [commonBadgeBaseClass, commonBadgeVariantClasses[variant]].join(" ");
+}

baron-sso/common/ui/button.ts

@@ -0,0 +1,37 @@
+export const commonButtonBaseClass =
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background";
+
+export const commonButtonVariantClasses = {
+  default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  outline:
+    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+  ghost: "hover:bg-accent hover:text-accent-foreground",
+  destructive:
+    "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+  muted: "bg-muted text-muted-foreground hover:bg-muted/80",
+} as const;
+
+export const commonButtonSizeClasses = {
+  default: "h-10 px-4 py-2",
+  sm: "h-9 rounded-md px-3",
+  lg: "h-11 rounded-md px-6 text-base",
+  icon: "h-10 w-10",
+} as const;
+
+export type CommonButtonVariant = keyof typeof commonButtonVariantClasses;
+export type CommonButtonSize = keyof typeof commonButtonSizeClasses;
+
+export function getCommonButtonClasses({
+  variant = "default",
+  size = "default",
+}: {
+  variant?: CommonButtonVariant;
+  size?: CommonButtonSize;
+}) {
+  return [
+    commonButtonBaseClass,
+    commonButtonVariantClasses[variant],
+    commonButtonSizeClasses[size],
+  ].join(" ");
+}

baron-sso/common/ui/card.ts

@@ -0,0 +1,7 @@
+export const commonCardClass =
+  "rounded-2xl border border-border bg-card/90 text-card-foreground shadow-card";
+export const commonCardHeaderClass = "flex flex-col space-y-1.5 p-6";
+export const commonCardTitleClass = "text-lg font-semibold leading-none";
+export const commonCardDescriptionClass = "text-sm text-muted-foreground";
+export const commonCardContentClass = "p-6 pt-0";
+export const commonCardFooterClass = "flex items-center p-6 pt-0";

baron-sso/common/ui/input.ts

@@ -0,0 +1,2 @@
+export const commonInputClass =
+  "flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50";

baron-sso/common/ui/search-filter-bar.tsx

@@ -0,0 +1,44 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+function cx(...classNames: Array<string | false | null | undefined>) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+export const commonSearchFilterBarRowClass =
+  "flex flex-col gap-3 md:flex-row md:items-center md:justify-between";
+export const commonSearchFilterBarPrimaryClass =
+  "flex min-w-0 flex-1 flex-col gap-3 md:flex-row md:items-center";
+export const commonSearchFilterBarActionsClass =
+  "flex flex-wrap items-center gap-2";
+export const commonSearchFilterBarAdvancedClass =
+  "flex flex-col gap-4 rounded-lg border border-border/40 bg-secondary/30 p-4 animate-in fade-in slide-in-from-top-2 duration-200";
+
+type SearchFilterBarProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  actions?: ReactNode;
+  advanced?: ReactNode;
+  advancedOpen?: boolean;
+  primary: ReactNode;
+};
+
+export function SearchFilterBar({
+  actions,
+  advanced,
+  advancedOpen = false,
+  className,
+  primary,
+  ...props
+}: SearchFilterBarProps) {
+  return (
+    <div className={cx("space-y-3", className)} {...props}>
+      <div className={commonSearchFilterBarRowClass}>
+        <div className={commonSearchFilterBarPrimaryClass}>{primary}</div>
+        {actions ? (
+          <div className={commonSearchFilterBarActionsClass}>{actions}</div>
+        ) : null}
+      </div>
+      {advanced && advancedOpen ? (
+        <div className={commonSearchFilterBarAdvancedClass}>{advanced}</div>
+      ) : null}
+    </div>
+  );
+}

baron-sso/common/ui/table.ts

@@ -0,0 +1,18 @@
+export const commonTableWrapperClass = "relative w-full";
+export const commonTableClass = "w-full caption-bottom text-sm";
+export const commonTableHeaderClass = "[&_tr]:border-b";
+export const commonTableHeaderSurfaceClass = "bg-secondary shadow-sm";
+export const commonStickyTableHeaderClass =
+  "sticky top-0 z-10 bg-secondary shadow-sm";
+export const commonTableBodyClass = "[&_tr:last-child]:border-0";
+export const commonTableFooterClass = "bg-muted/50 font-medium text-foreground";
+export const commonTableRowClass =
+  "border-b transition-colors hover:bg-muted/30 data-[state=selected]:bg-muted";
+export const commonTableHeadClass =
+  "h-12 px-6 text-left text-xs font-sans font-bold uppercase tracking-[0.08em] text-foreground align-middle";
+export const commonTableCellClass = "p-6 align-middle text-sm";
+export const commonTableCaptionClass = "mt-4 text-sm text-muted-foreground";
+export const commonTableShellClass =
+  "flex-1 rounded-md border overflow-hidden flex flex-col";
+export const commonTableViewportClass =
+  "flex-1 overflow-auto relative custom-scrollbar";