@jbpark/ui-kit 2.9.5 → 2.9.7

package/dist/Tag.d.mts

@@ -1,7 +1,10 @@
+import { Props as Props$1 } from "./core/badge.mjs";
+import "./core.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/atoms/tag.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'span'> {
+type BadgeProps = Props$1;
+interface Props extends Omit<BadgeProps, 'variant'> {
   variant?: 'default' | 'outlined';
   color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
 }
@@ -13,5 +16,5 @@ declare const Tag: ({
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Tag as default };
+export { Props, Tag as default };
 //# sourceMappingURL=Tag.d.mts.map

package/dist/Tag.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.mts","names":[],"sources":["../src/components/atoms/tag.tsx"],"mappings":";;;UAEU,KAAA,SAAc,KAAA,CAAM,wBAAA;EAC5B,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"}
+{"version":3,"file":"Tag.d.mts","names":[],"sources":["../src/components/atoms/tag.tsx"],"mappings":";;;;;KAIK,UAAA,GAAa,OAAA;AAAA,UAED,KAAA,SAAc,IAAA,CAAK,UAAA;EAClC,OAAA;EACA,KAAA;AAAA;AAAA,cAqBI,GAAA;EAAO,SAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAMV,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Tag.mjs

@@ -1,13 +1,16 @@
 import { cn } from "./utils.mjs";
+import { Badge } from "./core/badge.mjs";
+import "./core.mjs";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/atoms/tag.tsx
+const Core = Badge;
 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"
+	default: "border-transparent bg-muted text-muted-foreground",
+	primary: "border-transparent bg-primary/10 text-primary",
+	success: "border-transparent bg-green-500/10 text-green-600 dark:text-green-400",
+	warning: "border-transparent bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
+	danger: "border-transparent bg-destructive/10 text-destructive"
 };
 const outlinedColorClasses = {
 	default: "border-border text-foreground",
@@ -17,8 +20,9 @@ const outlinedColorClasses = {
 	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),
+	return /* @__PURE__ */ jsx(Core, {
+		variant: "outline",
+		className: cn("rounded-full px-2.5 py-1", "text-xs font-medium", variant === "default" && fillColorClasses[color], variant === "outlined" && outlinedColorClasses[color], className),
 		...props,
 		children
 	});

package/dist/Tag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.mjs","names":[],"sources":["../src/components/atoms/tag.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\ninterface 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"}
+{"version":3,"file":"Tag.mjs","names":["badge.Badge"],"sources":["../src/components/atoms/tag.tsx"],"sourcesContent":["import { badge } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = badge.Badge;\ntype BadgeProps = badge.Props;\n\nexport interface Props extends Omit<BadgeProps, 'variant'> {\n  variant?: 'default' | 'outlined';\n  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';\n}\n\nconst fillColorClasses: Record<string, string> = {\n  default: 'border-transparent bg-muted text-muted-foreground',\n  primary: 'border-transparent bg-primary/10 text-primary',\n  success:\n    'border-transparent bg-green-500/10 text-green-600 dark:text-green-400',\n  warning:\n    'border-transparent bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',\n  danger: 'border-transparent 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    <Core\n      variant=\"outline\"\n      className={cn(\n        'rounded-full px-2.5 py-1',\n        'text-xs font-medium',\n        variant === 'default' && fillColorClasses[color],\n        variant === 'outlined' && outlinedColorClasses[color],\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </Core>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;AAGA,MAAM,OAAOA;AAQb,MAAM,mBAA2C;CAC/C,SAAS;CACT,SAAS;CACT,SACE;CACF,SACE;CACF,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,SAAQ;EACR,WAAW,GACT,4BACA,uBACA,YAAY,aAAa,iBAAiB,QAC1C,YAAY,cAAc,qBAAqB,QAC/C,UAED;EACD,GAAI;EAEH;GACI"}

package/dist/core/badge.d.mts

@@ -0,0 +1,24 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/core/badge.d.ts
+declare namespace badge_d_exports {
+  export { Badge, Props, badgeVariants };
+}
+declare const badgeVariants: (props?: ({
+  variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+type Props = React$1.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+  asChild?: boolean;
+};
+declare function Badge({
+  className,
+  variant,
+  asChild,
+  ...props
+}: Props): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { type Props, badge_d_exports };
+//# sourceMappingURL=badge.d.mts.map

package/dist/core/badge.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.mts","names":[],"sources":["../../src/core/badge.tsx"],"mappings":";;;;;;;;;cAOM,aAAA,GAAa,KAAA;;IAyBlB,+BAAA,CAAA,SAAA;AAAA,KAEI,KAAA,GAAQ,OAAA,CAAM,cAAA,WACjB,YAAA,QAAoB,aAAA;EAClB,OAAA;AAAA;AAAA,iBAGK,KAAA,CAAA;EAAQ,SAAA;EAAW,OAAA;EAAS,OAAA;EAAA,GAAoB;AAAA,GAAS,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/core/badge.mjs

@@ -0,0 +1,38 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
+import { cn } from "../utils.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+//#region src/core/badge.tsx
+var badge_exports = /* @__PURE__ */ __exportAll({
+	Badge: () => Badge,
+	badgeVariants: () => badgeVariants
+});
+const badgeVariants = cva(`inline-flex items-center justify-center rounded-md border px-2 py-0.5
+  text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1
+  [&>svg]:pointer-events-none focus-visible:border-ring
+  focus-visible:ring-ring/50 focus-visible:ring-[3px]
+  aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
+  aria-invalid:border-destructive transition-[color,box-shadow]
+  overflow-hidden`, {
+	variants: { variant: {
+		default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+		secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+		destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+		outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Badge({ className, variant, asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
+		"data-slot": "badge",
+		className: cn(badgeVariants({ variant }), className),
+		...props
+	});
+}
+
+//#endregion
+export { Badge, badge_exports };
+//# sourceMappingURL=badge.mjs.map

package/dist/core/badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.mjs","names":[],"sources":["../../src/core/badge.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nimport { cn } from '@repo/ui/utils';\n\nconst badgeVariants = cva(\n  `inline-flex items-center justify-center rounded-md border px-2 py-0.5\n  text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1\n  [&>svg]:pointer-events-none focus-visible:border-ring\n  focus-visible:ring-ring/50 focus-visible:ring-[3px]\n  aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\n  aria-invalid:border-destructive transition-[color,box-shadow]\n  overflow-hidden`,\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',\n        destructive:\n          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline:\n          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\ntype Props = React.ComponentProps<'span'> &\n  VariantProps<typeof badgeVariants> & {\n    asChild?: boolean;\n  };\n\nfunction Badge({ className, variant, asChild = false, ...props }: Props) {\n  const Comp = asChild ? Slot : 'span';\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Badge, badgeVariants, type Props };\n"],"mappings":";;;;;;;;;;;;AAOA,MAAM,gBAAgB,IACpB;;;;;;oBAOA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,WACE;EACF,aACE;EACF,SACE;EACH,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAOD,SAAS,MAAM,EAAE,WAAW,SAAS,UAAU,OAAO,GAAG,SAAgB;AAGvE,QACE,oBAHW,UAAU,OAAO;EAI1B,aAAU;EACV,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;EACpD,GAAI;GACJ"}

package/dist/core/button.d.mts

@@ -8,8 +8,8 @@ declare namespace button_d_exports {
   export { Button, Props, buttonVariants };
 }
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-  size?: "icon" | "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
   asChild?: boolean;

package/dist/core.d.mts

@@ -1,4 +1,5 @@
 import { accordion_d_exports } from "./core/accordion.mjs";
+import { badge_d_exports } from "./core/badge.mjs";
 import { button_d_exports } from "./core/button.mjs";
 import { checkbox_d_exports } from "./core/checkbox.mjs";
 import { dialog_d_exports } from "./core/dialog.mjs";
@@ -15,4 +16,4 @@ import { separator_d_exports } from "./core/separator.mjs";
 import { skeleton_d_exports } from "./core/skeleton.mjs";
 import { switch_d_exports } from "./core/switch.mjs";
 import { textarea_d_exports } from "./core/textarea.mjs";
-export { accordion_d_exports as accordion, button_d_exports as button, checkbox_d_exports as checkbox, dialog_d_exports as dialog, drawer_d_exports as drawer, field_d_exports as field, input_d_exports as input, label_d_exports as label, popover_d_exports as popover, progress_d_exports as progress, radio_group_d_exports as radio, resizable_d_exports as resizable, select_d_exports as select, separator_d_exports as separator, skeleton_d_exports as skeleton, switch_d_exports as switchComponent, textarea_d_exports as textarea };
+export { accordion_d_exports as accordion, badge_d_exports as badge, button_d_exports as button, checkbox_d_exports as checkbox, dialog_d_exports as dialog, drawer_d_exports as drawer, field_d_exports as field, input_d_exports as input, label_d_exports as label, popover_d_exports as popover, progress_d_exports as progress, radio_group_d_exports as radio, resizable_d_exports as resizable, select_d_exports as select, separator_d_exports as separator, skeleton_d_exports as skeleton, switch_d_exports as switchComponent, textarea_d_exports as textarea };

package/dist/core.mjs

@@ -1,4 +1,5 @@
 import { accordion_exports } from "./core/accordion.mjs";
+import { badge_exports } from "./core/badge.mjs";
 import { button_exports } from "./core/button.mjs";
 import { checkbox_exports } from "./core/checkbox.mjs";
 import { dialog_exports } from "./core/dialog.mjs";
@@ -16,4 +17,4 @@ import { skeleton_exports } from "./core/skeleton.mjs";
 import { switch_exports } from "./core/switch.mjs";
 import { textarea_exports } from "./core/textarea.mjs";
 
-export { accordion_exports as accordion, button_exports as button, checkbox_exports as checkbox, dialog_exports as dialog, drawer_exports as drawer, field_exports as field, input_exports as input, label_exports as label, popover_exports as popover, progress_exports as progress, radio_group_exports as radio, resizable_exports as resizable, select_exports as select, separator_exports as separator, skeleton_exports as skeleton, switch_exports as switchComponent, textarea_exports as textarea };
+export { accordion_exports as accordion, badge_exports as badge, button_exports as button, checkbox_exports as checkbox, dialog_exports as dialog, drawer_exports as drawer, field_exports as field, input_exports as input, label_exports as label, popover_exports as popover, progress_exports as progress, radio_group_exports as radio, resizable_exports as resizable, select_exports as select, separator_exports as separator, skeleton_exports as skeleton, switch_exports as switchComponent, textarea_exports as textarea };

package/dist/style.css

@@ -1042,6 +1042,9 @@
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
   }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -2872,6 +2875,17 @@
       color: var(--primary);
     }
   }
+  .\[\&\>svg\]\:pointer-events-none {
+    &>svg {
+      pointer-events: none;
+    }
+  }
+  .\[\&\>svg\]\:size-3 {
+    &>svg {
+      width: calc(var(--spacing) * 3);
+      height: calc(var(--spacing) * 3);
+    }
+  }
   .\[\&\[aria-orientation\=horizontal\]\>div\]\:rotate-90 {
     &[aria-orientation=horizontal]>div {
       rotate: 90deg;
@@ -2887,6 +2901,60 @@
       margin-top: calc(var(--spacing) * -1.5);
     }
   }
+  .\[a\&\]\:hover\:bg-accent {
+    a& {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--accent);
+        }
+      }
+    }
+  }
+  .\[a\&\]\:hover\:bg-destructive\/90 {
+    a& {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .\[a\&\]\:hover\:bg-primary\/90 {
+    a& {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--primary);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .\[a\&\]\:hover\:bg-secondary\/90 {
+    a& {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--secondary);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .\[a\&\]\:hover\:text-accent-foreground {
+    a& {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--accent-foreground);
+        }
+      }
+    }
+  }
 }
 :root {
   --radius: 0.625rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "2.9.5",
+  "version": "2.9.7",
   "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",