@mondrianai/runyourai-design-system 0.0.10 → 0.0.11

package/dist/index.d.mts

@@ -772,9 +772,11 @@ interface TabsProps<T extends string = string> {
     variant?: 'pill' | 'underline';
     /** 컨테이너를 w-full로 펼치고 각 탭 버튼을 균등 분할(flex-1)합니다 */
     block?: boolean;
+    /** Tailwind height 클래스 (e.g. "h-[36px]"). 지정 시 내부 버튼 패딩도 자동 조정됩니다. */
+    height?: string;
     className?: string;
 }
-declare function Tabs<T extends string = string>({ allTabs, current, onTabChange, variant, block, className, }: TabsProps<T>): react_jsx_runtime.JSX.Element;
+declare function Tabs<T extends string = string>({ allTabs, current, onTabChange, variant, block, height, className, }: TabsProps<T>): react_jsx_runtime.JSX.Element;
 
 interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
     pressed?: boolean;
@@ -823,8 +825,8 @@ interface CircleIndicatorProps {
     used: number;
     /** 전체 용량 */
     total: number;
-    /** 중앙에 표시할 아이콘 */
-    icon?: React$1.ReactNode;
+    /** 중앙에 표시할 콘텐츠 */
+    centerContent?: React$1.ReactNode;
     /** hover 시 표시할 툴팁 텍스트 */
     tooltip?: string;
     /**
@@ -835,9 +837,13 @@ interface CircleIndicatorProps {
     color?: string;
     /** 컴포넌트 크기 (px, 기본값 44) */
     size?: number;
+    /** stroke 두께 (px, 기본값 3) */
+    strokeWidth?: number;
+    /** stroke 끝 모양 (기본값 'round') */
+    strokeLinecap?: 'round' | 'square';
     className?: string;
 }
-declare function CircleIndicator({ used, total, icon, tooltip, color, size, className, }: CircleIndicatorProps): react_jsx_runtime.JSX.Element;
+declare function CircleIndicator({ used, total, centerContent, tooltip, color, size, strokeWidth, strokeLinecap, className, }: CircleIndicatorProps): react_jsx_runtime.JSX.Element;
 
 declare const Switch: React__default.ForwardRefExoticComponent<Omit<Switch$1.SwitchProps & React__default.RefAttributes<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 interface SwitchFieldProps extends React__default.ComponentPropsWithoutRef<typeof Switch$1.Root> {

package/dist/index.d.ts

@@ -772,9 +772,11 @@ interface TabsProps<T extends string = string> {
     variant?: 'pill' | 'underline';
     /** 컨테이너를 w-full로 펼치고 각 탭 버튼을 균등 분할(flex-1)합니다 */
     block?: boolean;
+    /** Tailwind height 클래스 (e.g. "h-[36px]"). 지정 시 내부 버튼 패딩도 자동 조정됩니다. */
+    height?: string;
     className?: string;
 }
-declare function Tabs<T extends string = string>({ allTabs, current, onTabChange, variant, block, className, }: TabsProps<T>): react_jsx_runtime.JSX.Element;
+declare function Tabs<T extends string = string>({ allTabs, current, onTabChange, variant, block, height, className, }: TabsProps<T>): react_jsx_runtime.JSX.Element;
 
 interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
     pressed?: boolean;
@@ -823,8 +825,8 @@ interface CircleIndicatorProps {
     used: number;
     /** 전체 용량 */
     total: number;
-    /** 중앙에 표시할 아이콘 */
-    icon?: React$1.ReactNode;
+    /** 중앙에 표시할 콘텐츠 */
+    centerContent?: React$1.ReactNode;
     /** hover 시 표시할 툴팁 텍스트 */
     tooltip?: string;
     /**
@@ -835,9 +837,13 @@ interface CircleIndicatorProps {
     color?: string;
     /** 컴포넌트 크기 (px, 기본값 44) */
     size?: number;
+    /** stroke 두께 (px, 기본값 3) */
+    strokeWidth?: number;
+    /** stroke 끝 모양 (기본값 'round') */
+    strokeLinecap?: 'round' | 'square';
     className?: string;
 }
-declare function CircleIndicator({ used, total, icon, tooltip, color, size, className, }: CircleIndicatorProps): react_jsx_runtime.JSX.Element;
+declare function CircleIndicator({ used, total, centerContent, tooltip, color, size, strokeWidth, strokeLinecap, className, }: CircleIndicatorProps): react_jsx_runtime.JSX.Element;
 
 declare const Switch: React__default.ForwardRefExoticComponent<Omit<Switch$1.SwitchProps & React__default.RefAttributes<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 interface SwitchFieldProps extends React__default.ComponentPropsWithoutRef<typeof Switch$1.Root> {

package/dist/index.js

@@ -2140,8 +2140,8 @@ function CalendarGrid({
   const prevYear = month === 0 ? year - 1 : year;
   const prevMon = month === 0 ? 11 : month - 1;
   const isPrevDisabled = disablePast && (prevYear < today.getFullYear() || prevYear === today.getFullYear() && prevMon < today.getMonth());
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "p-5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "px-5 pt-3 pb-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
         {
@@ -2149,20 +2149,20 @@ function CalendarGrid({
           onClick: prevMonth,
           disabled: isPrevDisabled,
           className: cn(
-            "size-8 flex items-center justify-center rounded-md transition-colors",
-            isPrevDisabled ? "text-muted-foreground opacity-30 cursor-not-allowed" : "text-foreground hover:bg-accent cursor-pointer"
+            "flex size-8 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            isPrevDisabled ? "text-muted-foreground opacity-30 cursor-not-allowed" : "text-foreground hover:bg-accent active:bg-accent cursor-pointer"
           ),
           children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "chevron-left", className: "size-4" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative", children: [
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "select",
             {
               value: year,
               onChange: (e) => onYearChange(Number(e.target.value)),
-              className: "appearance-none border border-border rounded-lg pl-3 pr-6 py-1.5 text-sm font-medium bg-background cursor-pointer focus:outline-none hover:bg-accent transition-colors",
+              className: "h-8 appearance-none rounded-lg border border-border bg-background pl-3 pr-6 text-sm font-medium text-foreground transition-colors hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer",
               children: years.map((y) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: y, children: config.formatYear(y) }, y))
             }
           ),
@@ -2170,7 +2170,7 @@ function CalendarGrid({
             Icon,
             {
               name: "chevron-down",
-              className: "absolute right-1.5 top-1/2 -translate-y-1/2 size-3 text-muted-foreground pointer-events-none"
+              className: "pointer-events-none absolute right-1.5 top-1/2 size-3 -translate-y-1/2 text-foreground"
             }
           )
         ] }),
@@ -2180,7 +2180,7 @@ function CalendarGrid({
             {
               value: month,
               onChange: (e) => onMonthChange(Number(e.target.value)),
-              className: "appearance-none border border-border rounded-lg pl-3 pr-6 py-1.5 text-sm font-medium bg-background cursor-pointer focus:outline-none hover:bg-accent transition-colors",
+              className: "h-8 appearance-none rounded-lg border border-border bg-background pl-3 pr-6 text-sm font-medium text-foreground transition-colors hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer",
               children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: i, children: config.formatMonth(i) }, i))
             }
           ),
@@ -2188,7 +2188,7 @@ function CalendarGrid({
             Icon,
             {
               name: "chevron-down",
-              className: "absolute right-1.5 top-1/2 -translate-y-1/2 size-3 text-muted-foreground pointer-events-none"
+              className: "pointer-events-none absolute right-1.5 top-1/2 size-3 -translate-y-1/2 text-foreground"
             }
           )
         ] })
@@ -2198,39 +2198,40 @@ function CalendarGrid({
         {
           type: "button",
           onClick: nextMonth,
-          className: "size-8 flex items-center justify-center rounded-md text-foreground hover:bg-accent transition-colors cursor-pointer",
+          className: "flex size-8 items-center justify-center rounded-md text-foreground transition-colors hover:bg-accent active:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer",
           children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "chevron-right", className: "size-4" })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "grid grid-cols-7 mb-1", children: config.dayHeaders.map((d) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mb-1 grid grid-cols-7 gap-1", children: config.dayHeaders.map((d) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
-        className: "flex items-center justify-center h-10 text-sm text-muted-foreground",
+        className: "flex h-10 items-center justify-center text-sm font-normal leading-xs text-muted-foreground",
         children: d
       },
       d
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "grid grid-cols-7", children: cells.map(({ day, currentMonth, date }, idx) => {
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "grid grid-cols-7 gap-1", children: cells.map(({ day, currentMonth, date }) => {
       const dateStart = startOfDay(date);
       const isSelected = (selectedStart == null ? void 0 : selectedStart.getTime()) === dateStart.getTime();
       const isToday = todayStart.getTime() === dateStart.getTime();
       const isPast = dateStart < todayStart;
       const isDisabled = disablePast && isPast;
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center justify-center py-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
         {
           type: "button",
           disabled: isDisabled,
           onClick: () => onSelect(date),
           className: cn(
-            "size-10 flex items-center justify-center rounded-full text-sm transition-colors",
-            isSelected ? "bg-primary text-primary-foreground font-medium" : isDisabled ? "text-muted-foreground opacity-40 cursor-not-allowed" : !currentMonth ? "text-muted-foreground hover:bg-accent cursor-pointer" : "text-foreground hover:bg-accent cursor-pointer",
-            isToday && !isSelected && "ring-1 ring-foreground"
+            "flex aspect-square w-full items-center justify-center rounded-lg text-sm leading-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            isSelected ? "bg-foreground font-normal text-background hover:bg-foreground active:bg-foreground" : isDisabled ? "cursor-not-allowed text-foreground opacity-50" : !currentMonth ? "cursor-pointer text-foreground opacity-50 hover:bg-accent active:bg-accent" : "cursor-pointer text-foreground hover:bg-accent active:bg-accent",
+            isToday && !isSelected && "border border-border"
           ),
           children: day
-        }
-      ) }, idx);
+        },
+        date.toISOString()
+      );
     }) })
   ] });
 }
@@ -2341,7 +2342,7 @@ function DatePicker({
             sideOffset: 4,
             style: { minWidth: "var(--radix-popover-trigger-width)" },
             className: cn(
-              "z-50 rounded-2xl border border-border bg-background",
+              "z-50 w-64 rounded-2xl border border-border bg-background",
               "shadow-dropdown",
               "data-[state=open]:animate-in data-[state=closed]:animate-out",
               "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -4924,6 +4925,7 @@ function Tabs({
   onTabChange,
   variant = "underline",
   block = false,
+  height = "h-[36px]",
   className
 }) {
   if (variant === "pill") {
@@ -4933,6 +4935,8 @@ function Tabs({
         className: cn(
           "items-center gap-1 rounded-lg bg-muted p-1",
           block ? "flex w-full" : "inline-flex",
+          height,
+          height && "[&_button]:py-1",
           className
         ),
         children: allTabs.map((tab) => {
@@ -5104,14 +5108,15 @@ var import_jsx_runtime43 = require("react/jsx-runtime");
 function CircleIndicator({
   used,
   total,
-  icon,
+  centerContent,
   tooltip,
   color,
   size = 44,
+  strokeWidth = 3,
+  strokeLinecap = "round",
   className
 }) {
   const ratio = total > 0 ? Math.min(used / total, 1) : 0;
-  const strokeWidth = 3;
   const padding = strokeWidth / 2 + 1;
   const radius = size / 2 - padding;
   const circumference = 2 * Math.PI * radius;
@@ -5150,7 +5155,7 @@ function CircleIndicator({
                   cy: size / 2,
                   r: radius,
                   strokeWidth,
-                  strokeLinecap: "round",
+                  strokeLinecap,
                   strokeDasharray: circumference,
                   strokeDashoffset: offset,
                   className: cn(!color && "text-primary"),
@@ -5160,7 +5165,7 @@ function CircleIndicator({
             ]
           }
         ),
-        icon && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "z-10", children: icon })
+        centerContent && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "z-10", children: centerContent })
       ]
     }
   ) });