@j3m-quantum/ui 2.1.7 → 2.1.8

package/README.md

@@ -280,7 +280,7 @@ import '@j3m-quantum/ui/styles'
 Button, ButtonGroup, Input, InputGroup, Textarea, Checkbox, RadioGroup, Switch, Slider, Select, NativeSelect, Toggle, ToggleGroup, Form, Field, Label, CopyButton
 
 ### Display
-Card, Table, Badge, Avatar, UserAvatarsDropdown, Separator, Skeleton, Accordion, Tabs, Calendar, EventCalendar, Carousel, Chart, AspectRatio, Empty, Item, Kbd
+Card, Table, Badge, Pill, Avatar, UserAvatarsDropdown, Separator, Skeleton, Accordion, Tabs, Calendar, EventCalendar, Carousel, Chart, AspectRatio, Empty, Item, Kbd
 
 ### Feedback
 Alert, AlertDialog, Progress, CircularProgress, Tooltip, Sonner (Toast), Spinner

package/dist/cli/index.js

@@ -456,6 +456,7 @@ var REGISTRY = {
       { name: "Card", description: "Content container", import: "Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter", figmaNames: ["Card", "Container", "Panel"] },
       { name: "Table", description: "Data table", import: "Table, TableHeader, TableBody, TableRow, TableHead, TableCell", figmaNames: ["Table", "Data Grid"] },
       { name: "Badge", description: "Status badge/tag", import: "Badge", figmaNames: ["Badge", "Tag", "Label"] },
+      { name: "Pill", description: "Feature-rich pill with status, delta, avatars", import: "Pill, PillStatus, PillDelta, PillAvatar, PillAvatarGroup, PillIcon, PillClose", figmaNames: ["Pill", "Tag", "Chip"] },
       { name: "Avatar", description: "User avatar", import: "Avatar, AvatarImage, AvatarFallback", figmaNames: ["Avatar", "Profile Image"] },
       { name: "UserAvatarsDropdown", description: "Avatar with dropdown", import: "UserAvatarsDropdown" },
       { name: "Separator", description: "Visual divider", import: "Separator" },

package/dist/index.cjs

@@ -1992,10 +1992,10 @@ var badgeVariants = classVarianceAuthority.cva(
   {
     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: "bg-background text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+        default: "border-transparent bg-primary text-primary-foreground shadow-sm [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground shadow-sm [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white shadow-sm [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "bg-background text-foreground shadow-sm [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
       }
     },
     defaultVariants: {
@@ -2064,6 +2064,142 @@ function AvatarFallback({
     }
   );
 }
+var pillVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-full border px-2.5 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1.5 transition-colors overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow-sm",
+        secondary: "border-transparent bg-secondary text-secondary-foreground shadow-sm",
+        destructive: "border-transparent bg-destructive text-white shadow-sm dark:bg-destructive/80",
+        outline: "border-border bg-background text-foreground shadow-sm",
+        success: "border-transparent bg-green-500/15 text-green-700 shadow-sm dark:bg-green-500/20 dark:text-green-400",
+        warning: "border-transparent bg-amber-500/15 text-amber-700 shadow-sm dark:bg-amber-500/20 dark:text-amber-400",
+        info: "border-transparent bg-blue-500/15 text-blue-700 shadow-sm dark:bg-blue-500/20 dark:text-blue-400",
+        error: "border-transparent bg-red-500/15 text-red-700 shadow-sm dark:bg-red-500/20 dark:text-red-400"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var statusVariants = classVarianceAuthority.cva(
+  "size-2 rounded-full shrink-0",
+  {
+    variants: {
+      status: {
+        success: "bg-green-500",
+        warning: "bg-amber-500",
+        error: "bg-red-500",
+        info: "bg-blue-500",
+        neutral: "bg-gray-400"
+      },
+      pulse: {
+        true: "animate-pulse",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      status: "neutral",
+      pulse: false
+    }
+  }
+);
+function PillStatus({ status = "neutral", pulse = false }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "pill-status",
+      className: cn(statusVariants({ status, pulse }))
+    }
+  );
+}
+function PillDelta({ type, children, showIcon = true }) {
+  const Icon2 = type === "increase" ? lucideReact.TrendingUp : type === "decrease" ? lucideReact.TrendingDown : lucideReact.Minus;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-slot": "pill-delta",
+      className: cn(
+        "inline-flex items-center gap-1",
+        type === "increase" && "text-green-600 dark:text-green-400",
+        type === "decrease" && "text-red-600 dark:text-red-400",
+        type === "neutral" && "text-muted-foreground"
+      ),
+      children: [
+        showIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "size-3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+      ]
+    }
+  );
+}
+function PillAvatar({ src, fallback, alt }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-5 -ml-1", "data-slot": "pill-avatar", children: [
+    src && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src, alt: alt || fallback }),
+    /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-[10px] font-medium", children: fallback.slice(0, 2).toUpperCase() })
+  ] });
+}
+function PillAvatarGroup({ avatars, max = 3 }) {
+  const visibleAvatars = avatars.slice(0, max);
+  const remainingCount = avatars.length - max;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex -space-x-2 -ml-1", "data-slot": "pill-avatar-group", children: [
+    visibleAvatars.map((avatar, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Avatar,
+      {
+        className: "size-5 border-2 border-background",
+        children: [
+          avatar.src && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatar.src, alt: avatar.alt || avatar.fallback }),
+          /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-[10px] font-medium", children: avatar.fallback.slice(0, 2).toUpperCase() })
+        ]
+      },
+      index
+    )),
+    remainingCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-5 border-2 border-background", children: /* @__PURE__ */ jsxRuntime.jsxs(AvatarFallback, { className: "text-[10px] font-medium bg-muted", children: [
+      "+",
+      remainingCount
+    ] }) })
+  ] });
+}
+function PillIcon({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "pill-icon", className: "[&>svg]:size-3.5 shrink-0", children });
+}
+function PillClose({ onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "data-slot": "pill-close",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick?.(e);
+      },
+      className: "ml-0.5 -mr-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10 transition-colors focus:outline-none focus:ring-1 focus:ring-ring",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Remove" })
+      ]
+    }
+  );
+}
+function Pill({
+  className,
+  variant,
+  asChild = false,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "pill",
+      className: cn(pillVariants({ variant }), className),
+      ...props,
+      children
+    }
+  );
+}
 function DropdownMenu({
   ...props
 }) {
@@ -19281,6 +19417,13 @@ exports.PaginationLink = PaginationLink;
 exports.PaginationNext = PaginationNext;
 exports.PaginationPrevious = PaginationPrevious;
 exports.PhaseGantt = PhaseGantt;
+exports.Pill = Pill;
+exports.PillAvatar = PillAvatar;
+exports.PillAvatarGroup = PillAvatarGroup;
+exports.PillClose = PillClose;
+exports.PillDelta = PillDelta;
+exports.PillIcon = PillIcon;
+exports.PillStatus = PillStatus;
 exports.PlanningTable = PlanningTable;
 exports.PlanningTableToolbar = PlanningTableToolbar;
 exports.PlanningWeekCommentPopover = PlanningWeekCommentPopover;
@@ -19477,6 +19620,7 @@ exports.isMultiDayEvent = isMultiDayEvent;
 exports.isWorkingHour = isWorkingHour;
 exports.navigateDate = navigateDate;
 exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
+exports.pillVariants = pillVariants;
 exports.playerCanvasPlayButtonVariants = playerCanvasPlayButtonVariants;
 exports.playerCanvasSkipButtonVariants = playerCanvasSkipButtonVariants;
 exports.rangeText = rangeText;