@jbpark/ui-kit 2.7.0 → 2.8.0

package/README.ko.md

@@ -51,6 +51,7 @@ src/
 | **Skeleton**    | 로딩 스켈레톤             | `Button`, `Node`                     |
 | **Spin**        | 로딩 스피너               | -                                    |
 | **Switch**      | 토글 스위치               | -                                    |
+| **Tag**         | 알약 모양의 라벨/태그     | -                                    |
 | **Typography**  | 텍스트 컴포넌트           | `Link`, `Paragraph`, `Text`, `Title` |
 
 ## 🔬 Molecules (분자)

package/README.md

@@ -51,6 +51,7 @@ Basic UI building blocks
 | **Skeleton**    | Loading skeleton             | `Button`, `Node`                     |
 | **Spin**        | Loading spinner              | -                                    |
 | **Switch**      | Toggle switch component      | -                                    |
+| **Tag**         | Pill-style label/tag         | -                                    |
 | **Typography**  | Text components              | `Link`, `Paragraph`, `Text`, `Title` |
 
 ## 🔬 Molecules

package/dist/components/atoms/Skeleton/index.d.mts

@@ -36,7 +36,7 @@ declare const Skeleton: {
     height,
     children,
     ...props
-  }: Props): string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
+  }: Props): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | null | undefined;
   Button: ({
     className,
     ...props

package/dist/components/atoms/Skeleton/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/Skeleton/index.tsx"],"mappings":";;;;;;UAYiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,MAAA;EACA,OAAA;EACA,MAAA;EACA,IAAA;EACA,KAAA;EACA,GAAA;EACA,SAAA;EACA,KAAA;EACA,MAAA;EACA,UAAA;IACE,OAAA;IACA,MAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAUE,QAAA;EAAA;;;;;;;;;;;;;;;KAeH,KAAA,wCAAK,QAAA,CAAA,KAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,KAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/Skeleton/index.tsx"],"mappings":";;;;;;UAYiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,MAAA;EACA,OAAA;EACA,MAAA;EACA,IAAA;EACA,KAAA;EACA,GAAA;EACA,SAAA;EACA,KAAA;EACA,MAAA;EACA,UAAA;IACE,OAAA;IACA,MAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAUE,QAAA;EAAA;;;;;;;;;;;;;;;KAeH,KAAA,wCAAK,kBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QAAA,CAAA,KAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,KAAA,CAAA,SAAA"}

package/dist/components/atoms/Tag/index.d.mts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/atoms/Tag/index.d.ts
+interface Props extends React.ComponentPropsWithoutRef<'span'> {
+  variant?: 'default' | 'outlined';
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+}
+declare const Tag: ({
+  className,
+  variant,
+  color,
+  children,
+  ...props
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Tag };
+//# sourceMappingURL=index.d.mts.map

package/dist/components/atoms/Tag/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/Tag/index.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,OAAA;EACA,KAAA;AAAA;AAAA,cAmBI,GAAA;EAAO,SAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAMV,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/Tag/index.mjs

@@ -0,0 +1,29 @@
+import { cn } from "../../../utils.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/atoms/Tag/index.tsx
+const fillColorClasses = {
+	default: "bg-muted text-muted-foreground",
+	primary: "bg-primary/10 text-primary",
+	success: "bg-green-500/10 text-green-600 dark:text-green-400",
+	warning: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
+	danger: "bg-destructive/10 text-destructive"
+};
+const outlinedColorClasses = {
+	default: "border-border text-foreground",
+	primary: "border-primary text-primary",
+	success: "border-green-500 text-green-600 dark:text-green-400",
+	warning: "border-yellow-500 text-yellow-600 dark:text-yellow-400",
+	danger: "border-destructive text-destructive"
+};
+const Tag = ({ className, variant = "default", color = "default", children, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center", "rounded-full px-2.5 py-1", "text-xs font-medium", variant === "default" && fillColorClasses[color], variant === "outlined" && ["border", outlinedColorClasses[color]], className),
+		...props,
+		children
+	});
+};
+
+//#endregion
+export { Tag as default };
+//# sourceMappingURL=index.mjs.map

package/dist/components/atoms/Tag/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/atoms/Tag/index.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'span'> {\n  variant?: 'default' | 'outlined';\n  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';\n}\n\nconst fillColorClasses: Record<string, string> = {\n  default: 'bg-muted text-muted-foreground',\n  primary: 'bg-primary/10 text-primary',\n  success: 'bg-green-500/10 text-green-600 dark:text-green-400',\n  warning: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',\n  danger: 'bg-destructive/10 text-destructive',\n};\n\nconst outlinedColorClasses: Record<string, string> = {\n  default: 'border-border text-foreground',\n  primary: 'border-primary text-primary',\n  success: 'border-green-500 text-green-600 dark:text-green-400',\n  warning: 'border-yellow-500 text-yellow-600 dark:text-yellow-400',\n  danger: 'border-destructive text-destructive',\n};\n\nconst Tag = ({\n  className,\n  variant = 'default',\n  color = 'default',\n  children,\n  ...props\n}: Props) => {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center',\n        'rounded-full px-2.5 py-1',\n        'text-xs font-medium',\n        variant === 'default' && fillColorClasses[color],\n        variant === 'outlined' && ['border', outlinedColorClasses[color]],\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;AAOA,MAAM,mBAA2C;CAC/C,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACT;AAED,MAAM,uBAA+C;CACnD,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACT;AAED,MAAM,OAAO,EACX,WACA,UAAU,WACV,QAAQ,WACR,UACA,GAAG,YACQ;AACX,QACE,oBAAC;EACC,WAAW,GACT,4BACA,4BACA,uBACA,YAAY,aAAa,iBAAiB,QAC1C,YAAY,cAAc,CAAC,UAAU,qBAAqB,OAAO,EACjE,UAED;EACD,GAAI;EAEH;GACI"}

package/dist/components/atoms/index.d.mts

@@ -10,4 +10,5 @@ import { Radio } from "./Radio/index.mjs";
 import { Select } from "./Select/index.mjs";
 import { Skeleton } from "./Skeleton/index.mjs";
 import { Spin } from "./Spin/index.mjs";
-import { Switch } from "./Switch/index.mjs";
+import { Switch } from "./Switch/index.mjs";
+import { Tag } from "./Tag/index.mjs";

package/dist/components/atoms/index.mjs

@@ -11,5 +11,6 @@ import Select from "./Select/index.mjs";
 import Skeleton from "./Skeleton/index.mjs";
 import Spin from "./Spin/index.mjs";
 import Switch from "./Switch/index.mjs";
+import Tag from "./Tag/index.mjs";
 
 export {  };

package/dist/components/molecules/Card/index.mjs

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/molecules/Card/index.tsx
 const Card = ({ title, children, className, classNames, variant = "outlined", ...props }) => {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("w-full", "rounded-lg p-4", "bg-white shadow-sm transition-all", variant === "outlined" && "border border-gray-200", className),
+		className: cn("w-full", "rounded-lg p-4", "bg-card text-card-foreground shadow-sm transition-all", variant === "outlined" && "border-border border", className),
 		...props,
 		children: [renderConditional(title, (v) => /* @__PURE__ */ jsx("div", {
 			className: cn("mb-4 font-bold", classNames?.title),

package/dist/components/molecules/Card/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/molecules/Card/index.tsx"],"sourcesContent":["import { cn, renderConditional } from '@repo/ui/utils';\n\ninterface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'title'> {\n  title?: React.ReactNode;\n  variant?: 'outlined' | 'borderless';\n  classNames?: {\n    title?: string;\n    body?: string;\n  };\n}\n\nconst Card = ({\n  title,\n  children,\n  className,\n  classNames,\n  variant = 'outlined',\n  ...props\n}: Props) => {\n  return (\n    <div\n      className={cn(\n        'w-full',\n        'rounded-lg p-4',\n        'bg-white shadow-sm transition-all',\n        variant === 'outlined' && 'border border-gray-200',\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderConditional(title, v => (\n        <div\n          className={cn(\n            'mb-4 font-bold',\n            classNames?.title,\n            //\n          )}\n        >\n          {v}\n        </div>\n      ))}\n      <div\n        className={cn(\n          classNames?.body,\n          //\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Card;\n"],"mappings":";;;;AAWA,MAAM,QAAQ,EACZ,OACA,UACA,WACA,YACA,UAAU,YACV,GAAG,YACQ;AACX,QACE,qBAAC;EACC,WAAW,GACT,UACA,kBACA,qCACA,YAAY,cAAc,0BAC1B,UAED;EACD,GAAI;aAEH,kBAAkB,QAAO,MACxB,oBAAC;GACC,WAAW,GACT,kBACA,YAAY,MAEb;aAEA;IACG,CACN,EACF,oBAAC;GACC,WAAW,GACT,YAAY,KAEb;GAEA;IACG;GACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/molecules/Card/index.tsx"],"sourcesContent":["import { cn, renderConditional } from '@repo/ui/utils';\n\ninterface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'title'> {\n  title?: React.ReactNode;\n  variant?: 'outlined' | 'borderless';\n  classNames?: {\n    title?: string;\n    body?: string;\n  };\n}\n\nconst Card = ({\n  title,\n  children,\n  className,\n  classNames,\n  variant = 'outlined',\n  ...props\n}: Props) => {\n  return (\n    <div\n      className={cn(\n        'w-full',\n        'rounded-lg p-4',\n        'bg-card text-card-foreground shadow-sm transition-all',\n        variant === 'outlined' && 'border-border border',\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderConditional(title, v => (\n        <div\n          className={cn(\n            'mb-4 font-bold',\n            classNames?.title,\n            //\n          )}\n        >\n          {v}\n        </div>\n      ))}\n      <div\n        className={cn(\n          classNames?.body,\n          //\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Card;\n"],"mappings":";;;;AAWA,MAAM,QAAQ,EACZ,OACA,UACA,WACA,YACA,UAAU,YACV,GAAG,YACQ;AACX,QACE,qBAAC;EACC,WAAW,GACT,UACA,kBACA,yDACA,YAAY,cAAc,wBAC1B,UAED;EACD,GAAI;aAEH,kBAAkB,QAAO,MACxB,oBAAC;GACC,WAAW,GACT,kBACA,YAAY,MAEb;aAEA;IACG,CACN,EACF,oBAAC;GACC,WAAW,GACT,YAAY,KAEb;GAEA;IACG;GACF"}

package/dist/components/organisms/List/index.d.mts

@@ -40,7 +40,7 @@ declare const List: {
     classNames,
     renderItem,
     ...props
-  }: Props<T>): string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element;
+  }: Props<T>): string | number | bigint | true | react_jsx_runtime0.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined>;
   Item: ({
     children,
     className,

package/dist/components/organisms/List/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/organisms/List/index.tsx"],"mappings":";;;;;;UAWU,KAAA,YAAiB,IAAA,CACzB,KAAA,CAAM,wBAAA;EAGN,OAAA;EACA,WAAA,GAAc,KAAA,CAAM,cAAA,QAAsB,QAAA;EAC1C,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,UAAA;IACE,KAAA;IACA,MAAA;IACA,IAAA;EAAA;EAEF,MAAA;IACE,OAAA;IACA,OAAA;IACA,MAAA,GAAS,KAAA,CAAM,SAAA;IACf,OAAA,GAAU,wBAAA;IACV,IAAA;EAAA;EAEF,IAAA,GAAO,CAAA;EACP,UAAA,IAAc,IAAA,EAAM,CAAA,EAAG,KAAA,aAAkB,KAAA,CAAM,SAAA;AAAA;AAAA,cAG3C,IAAA;EAAA;IAAS,OAAA;IAAA,WAAA;IAAA,MAAA;IAAA,MAAA;IAAA,KAAA;IAAA,KAAA;IAAA,MAAA;IAAA,IAAA;IAAA,SAAA;IAAA,UAAA;IAAA,UAAA;IAAA,GAAA;EAAA,GAaZ,KAAA,CAAM,CAAA,sCAAE,QAAA,CAAA,KAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,KAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/organisms/List/index.tsx"],"mappings":";;;;;;UAWU,KAAA,YAAiB,IAAA,CACzB,KAAA,CAAM,wBAAA;EAGN,OAAA;EACA,WAAA,GAAc,KAAA,CAAM,cAAA,QAAsB,QAAA;EAC1C,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,UAAA;IACE,KAAA;IACA,MAAA;IACA,IAAA;EAAA;EAEF,MAAA;IACE,OAAA;IACA,OAAA;IACA,MAAA,GAAS,KAAA,CAAM,SAAA;IACf,OAAA,GAAU,wBAAA;IACV,IAAA;EAAA;EAEF,IAAA,GAAO,CAAA;EACP,UAAA,IAAc,IAAA,EAAM,CAAA,EAAG,KAAA,aAAkB,KAAA,CAAM,SAAA;AAAA;AAAA,cAG3C,IAAA;EAAA;IAAS,OAAA;IAAA,WAAA;IAAA,MAAA;IAAA,MAAA;IAAA,KAAA;IAAA,KAAA;IAAA,MAAA;IAAA,IAAA;IAAA,SAAA;IAAA,UAAA;IAAA,UAAA;IAAA,GAAA;EAAA,GAaZ,KAAA,CAAM,CAAA,sCAAE,kBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QAAA,CAAA,KAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,KAAA,CAAA,SAAA"}

package/dist/index.d.mts

@@ -13,6 +13,7 @@ import { Select } from "./components/atoms/Select/index.mjs";
 import { Skeleton } from "./components/atoms/Skeleton/index.mjs";
 import { Spin } from "./components/atoms/Spin/index.mjs";
 import { Switch } from "./components/atoms/Switch/index.mjs";
+import { Tag } from "./components/atoms/Tag/index.mjs";
 import "./components/atoms/index.mjs";
 import { Card } from "./components/molecules/Card/index.mjs";
 import { Collapse } from "./components/molecules/Collapse/index.mjs";
@@ -32,4 +33,4 @@ import { ThemeConfig, ThemeToken } from "./providers/Config/types.mjs";
 import { useConfig } from "./providers/Config/context.mjs";
 import { Config, Props } from "./providers/Config/index.mjs";
 import "./providers/index.mjs";
-export { Button, Card, Checkbox, Collapse, ColorPicker, Config, Props as ConfigProps, Drawer, Props$1 as DrawerProps, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, ThemeConfig, ThemeToken, Typography, useConfig };
+export { Button, Card, Checkbox, Collapse, ColorPicker, Config, Props as ConfigProps, Drawer, Props$1 as DrawerProps, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, ThemeConfig, ThemeToken, Typography, useConfig };

package/dist/index.mjs

@@ -12,6 +12,7 @@ import Select from "./components/atoms/Select/index.mjs";
 import Skeleton from "./components/atoms/Skeleton/index.mjs";
 import Spin from "./components/atoms/Spin/index.mjs";
 import Switch from "./components/atoms/Switch/index.mjs";
+import Tag from "./components/atoms/Tag/index.mjs";
 import "./components/atoms/index.mjs";
 import Card from "./components/molecules/Card/index.mjs";
 import Collapse from "./components/molecules/Collapse/index.mjs";
@@ -33,4 +34,4 @@ import { useConfig } from "./providers/Config/context.mjs";
 import Config from "./providers/Config/index.mjs";
 import "./providers/index.mjs";
 
-export { Button, Card, Checkbox, Collapse, ColorPicker, Config, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Typography, useConfig };
+export { Button, Card, Checkbox, Collapse, ColorPicker, Config, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, Typography, useConfig };

package/dist/style.css

@@ -5,7 +5,11 @@
   :root, :host {
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
+    --color-yellow-500: oklch(79.5% 0.184 86.047);
+    --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-green-400: oklch(79.2% 0.209 151.711);
+    --color-green-500: oklch(72.3% 0.219 149.579);
+    --color-green-600: oklch(62.7% 0.194 149.214);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-black: #000;
@@ -871,6 +875,9 @@
       border-color: color-mix(in oklch,var(--btn-border),transparent 50%);
     }
   }
+  .border-border {
+    border-color: var(--border);
+  }
   .border-border\/60 {
     border-color: var(--border);
     @supports (color: color-mix(in lab, red, red)) {
@@ -880,9 +887,15 @@
   .border-current {
     border-color: currentcolor;
   }
+  .border-destructive {
+    border-color: var(--destructive);
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
+  .border-green-500 {
+    border-color: var(--color-green-500);
+  }
   .border-input {
     border-color: var(--input);
   }
@@ -892,6 +905,9 @@
   .border-transparent {
     border-color: transparent;
   }
+  .border-yellow-500 {
+    border-color: var(--color-yellow-500);
+  }
   .bg-\(--btn-bg\) {
     background-color: var(--btn-bg);
   }
@@ -922,9 +938,24 @@
   .bg-border {
     background-color: var(--border);
   }
+  .bg-card {
+    background-color: var(--card);
+  }
   .bg-destructive {
     background-color: var(--destructive);
   }
+  .bg-destructive\/10 {
+    background-color: var(--destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    }
+  }
+  .bg-green-500\/10 {
+    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
+    }
+  }
   .bg-inherit {
     background-color: inherit;
   }
@@ -937,6 +968,12 @@
   .bg-primary {
     background-color: var(--primary);
   }
+  .bg-primary\/10 {
+    background-color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
+  }
   .bg-primary\/20 {
     background-color: var(--primary);
     @supports (color: color-mix(in lab, red, red)) {
@@ -952,6 +989,12 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-yellow-500\/10 {
+    background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
+    }
+  }
   .fill-primary {
     fill: var(--primary);
   }
@@ -982,6 +1025,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -1141,6 +1187,9 @@
   .text-blue-400 {
     color: var(--color-blue-400);
   }
+  .text-card-foreground {
+    color: var(--card-foreground);
+  }
   .text-current {
     color: currentcolor;
   }
@@ -1153,6 +1202,9 @@
   .text-green-400 {
     color: var(--color-green-400);
   }
+  .text-green-600 {
+    color: var(--color-green-600);
+  }
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -1177,6 +1229,9 @@
   .text-yellow-400 {
     color: var(--color-yellow-400);
   }
+  .text-yellow-600 {
+    color: var(--color-yellow-600);
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -2581,6 +2636,16 @@
       }
     }
   }
+  .dark\:text-green-400 {
+    &:is(.dark *) {
+      color: var(--color-green-400);
+    }
+  }
+  .dark\:text-yellow-400 {
+    &:is(.dark *) {
+      color: var(--color-yellow-400);
+    }
+  }
   .dark\:hover\:bg-accent\/50 {
     &:is(.dark *) {
       &:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",