@j3m-quantum/ui 2.1.7 → 2.1.9

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
@@ -408,11 +408,14 @@ const navItems: NavItem[] = [
 
 ## Map Components
 
-Leaflet-based map components for displaying interactive maps. **Requires optional peer dependencies.**
+Leaflet-based map components for displaying interactive maps. **Separate entry point - requires additional dependencies.**
+
+> **Note:** Map components are in a separate entry point (`@j3m-quantum/ui/map`) to avoid requiring leaflet for users who don't need maps.
 
 ### Installation
 
 ```bash
+# Install map dependencies
 npm install leaflet react-leaflet
 ```
 
@@ -425,13 +428,14 @@ Import Leaflet CSS in your app's entry CSS file:
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "@j3m-quantum/ui/styles";
-@import "leaflet/dist/leaflet.css";
+@import "leaflet/dist/leaflet.css";  /* Required for maps */
 ```
 
 ### Basic Usage
 
 ```tsx
-import { Map, MapTileLayer, MapMarker, MapPopup } from '@j3m-quantum/ui'
+// Import from the /map entry point
+import { Map, MapTileLayer, MapMarker, MapPopup } from '@j3m-quantum/ui/map'
 
 function MyMap() {
   return (

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" },
@@ -534,14 +535,14 @@ var REGISTRY = {
     ]
   },
   map: {
-    label: "Map (requires leaflet)",
+    label: "Map (separate import: @j3m-quantum/ui/map)",
     components: [
-      { name: "Map", description: "Map container", import: "Map" },
-      { name: "MapTileLayer", description: "Map tile layer", import: "MapTileLayer" },
-      { name: "MapMarker", description: "Map marker", import: "MapMarker" },
-      { name: "MapPopup", description: "Marker popup", import: "MapPopup" },
-      { name: "MapTooltip", description: "Marker tooltip", import: "MapTooltip" },
-      { name: "MapZoomControl", description: "Zoom controls", import: "MapZoomControl" }
+      { name: "Map", description: "Map container", import: "Map from '@j3m-quantum/ui/map'" },
+      { name: "MapTileLayer", description: "Map tile layer", import: "MapTileLayer from '@j3m-quantum/ui/map'" },
+      { name: "MapMarker", description: "Map marker", import: "MapMarker from '@j3m-quantum/ui/map'" },
+      { name: "MapPopup", description: "Marker popup", import: "MapPopup from '@j3m-quantum/ui/map'" },
+      { name: "MapTooltip", description: "Marker tooltip", import: "MapTooltip from '@j3m-quantum/ui/map'" },
+      { name: "MapZoomControl", description: "Zoom controls", import: "MapZoomControl from '@j3m-quantum/ui/map'" }
     ]
   }
 };

package/dist/index.cjs

@@ -40,7 +40,6 @@ var PopoverPrimitive = require('@radix-ui/react-popover');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var ResizablePrimitive = require('react-resizable-panels');
-var reactLeaflet = require('react-leaflet');
 var reactTable = require('@tanstack/react-table');
 var dateFns = require('date-fns');
 var core = require('@dnd-kit/core');
@@ -1992,10 +1991,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 +2063,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
 }) {
@@ -6245,89 +6380,6 @@ var SectionFooter = React30__namespace.forwardRef(
   )
 );
 SectionFooter.displayName = "SectionFooter";
-function Map2({
-  center,
-  zoom = 13,
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactLeaflet.MapContainer,
-    {
-      center,
-      zoom,
-      className: cn(
-        "w-full rounded-lg border border-border overflow-hidden",
-        "[&_.leaflet-control-zoom]:border-border",
-        "[&_.leaflet-control-zoom]:rounded-md",
-        "[&_.leaflet-control-zoom]:shadow-sm",
-        "[&_.leaflet-control-zoom-in]:rounded-t-md",
-        "[&_.leaflet-control-zoom-in]:border-b",
-        "[&_.leaflet-control-zoom-in]:border-border",
-        "[&_.leaflet-control-zoom-out]:rounded-b-md",
-        "[&_.leaflet-popup-content-wrapper]:rounded-lg",
-        "[&_.leaflet-popup-content-wrapper]:shadow-lg",
-        "[&_.leaflet-popup-content-wrapper]:border",
-        "[&_.leaflet-popup-content-wrapper]:border-border",
-        className
-      ),
-      scrollWheelZoom: true,
-      ...props,
-      children
-    }
-  );
-}
-var TILE_LAYERS = {
-  default: {
-    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-  },
-  dark: {
-    url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
-  },
-  satellite: {
-    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
-    attribution: "&copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
-  }
-};
-function MapTileLayer({
-  variant = "default",
-  ...props
-}) {
-  const layer = TILE_LAYERS[variant];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactLeaflet.TileLayer,
-    {
-      url: layer.url,
-      attribution: layer.attribution,
-      ...props
-    }
-  );
-}
-function MapMarker({
-  position,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Marker, { position, ...props, children });
-}
-function MapPopup({
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Popup, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children }) });
-}
-function MapTooltip({
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Tooltip, { ...props, children });
-}
-function MapZoomControl(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.ZoomControl, { ...props });
-}
 function DataTableColumnHeader({
   column,
   title,
@@ -19232,12 +19284,6 @@ exports.KanbanProvider = KanbanProvider;
 exports.Kbd = Kbd;
 exports.KbdGroup = KbdGroup;
 exports.Label = Label2;
-exports.Map = Map2;
-exports.MapMarker = MapMarker;
-exports.MapPopup = MapPopup;
-exports.MapTileLayer = MapTileLayer;
-exports.MapTooltip = MapTooltip;
-exports.MapZoomControl = MapZoomControl;
 exports.Menubar = Menubar;
 exports.MenubarCheckboxItem = MenubarCheckboxItem;
 exports.MenubarContent = MenubarContent;
@@ -19281,6 +19327,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 +19530,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;