@ztwoint/z-ui 0.1.39 → 0.1.40

package/dist/components/badge/badge.js

@@ -0,0 +1,121 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Slot as n } from "@radix-ui/react-slot";
+import { cva as c } from "class-variance-authority";
+import "react";
+import { cn as u } from "../../lib/utils.js";
+const l = c(
+  "inline-flex rounded-lg items-center justify-center 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",
+        destructive: "border-transparent",
+        outline: ""
+      },
+      size: {
+        default: "px-[8px] py-[3px] text-sm",
+        xs: "px-[4px] py-[1px] text-[10px]",
+        sm: "px-[6px] py-[2px] text-xs",
+        lg: "px-[10px] py-[4px] text-base"
+      },
+      color: {
+        default: "",
+        primary: "surface-neutral-default text-default-brand [a&]:hover:surface-neutral-hover",
+        destructive: "surface-danger-default text-inverted-primary [a&]:hover:surface-danger-hover",
+        success: "surface-success-default text-inverted-primary [a&]:hover:surface-success-hover",
+        warning: "surface-warning-default text-inverted-primary [a&]:hover:surface-warning-hover"
+      }
+    },
+    compoundVariants: [
+      // Default variant with different colors
+      {
+        variant: "default",
+        color: "default",
+        class: "surface-neutral-hover [a&]:hover:surface-neutral-hover"
+      },
+      {
+        variant: "default",
+        color: "primary",
+        class: "surface-primary-light text-default-brand [a&]:hover:surface-neutral-hover"
+      },
+      {
+        variant: "default",
+        color: "destructive",
+        class: "surface-danger-light text-danger-secondary [a&]:hover:surface-danger-hover"
+      },
+      {
+        variant: "default",
+        color: "success",
+        class: "surface-success-light text-success-secondary [a&]:hover:surface-success-hover"
+      },
+      {
+        variant: "default",
+        color: "warning",
+        class: "surface-warning-light text-warning-secondary [a&]:hover:surface-warning-hover"
+      },
+      // Destructive variant with different colors
+      {
+        variant: "destructive",
+        color: "default",
+        class: "surface-neutral-primary text-inverted-primary [a&]:hover:surface-neutral-hover"
+      },
+      {
+        variant: "destructive",
+        color: "primary",
+        class: "surface-primary-default text-inverted-primary [a&]:hover:surface-primary-hover"
+      },
+      // Outline variant with different colors
+      {
+        variant: "outline",
+        color: "default",
+        class: "surface-neutral-default text-neutral-primary border-stroke-solid-high [a&]:hover:surface-neutral-hover"
+      },
+      {
+        variant: "outline",
+        color: "primary",
+        class: "surface-primary-light text-default-brand border-stroke-inverted-active [a&]:hover:surface-neutral-hover"
+      },
+      {
+        variant: "outline",
+        color: "destructive",
+        class: "surface-danger-light text-danger-secondary border border-red-200 [a&]:hover:surface-danger-light-hover"
+      },
+      {
+        variant: "outline",
+        color: "success",
+        class: "surface-success-light text-success-secondary border border-green-200 [a&]:hover:surface-success-light-hover"
+      },
+      {
+        variant: "outline",
+        color: "warning",
+        class: "surface-warning-light text-warning-secondary border border-amber-200 [a&]:hover:surface-warning-light-hover"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      color: "default"
+    }
+  }
+);
+function x({
+  className: r,
+  variant: e,
+  size: a,
+  color: t,
+  asChild: s = !1,
+  ...o
+}) {
+  return /* @__PURE__ */ i(
+    s ? n : "span",
+    {
+      "data-slot": "badge",
+      className: u(l({ variant: e, size: a, color: t }), r),
+      ...o
+    }
+  );
+}
+export {
+  x as Badge,
+  l as badgeVariants
+};

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export * from './components/tab/tab';
 export * from './components/table';
 export * from './components/tooltip/tooltip';
 export * from './components/table-card';
+export * from './components/badge/badge';
 export * from './components/assets/icons/apartment-building';
 export * from './components/assets/icons/chevron-down';
 export * from './components/assets/icons/chevron-left';

package/dist/index.js

@@ -1,51 +1,51 @@
 /* empty css                    */
-import { Alert as a, AlertDescription as n, AlertTitle as l } from "./components/alert/alert.js";
+import { Alert as p, AlertDescription as n, AlertTitle as l } from "./components/alert/alert.js";
 import { AlertCirclesIcon as f } from "./components/alert/icons/circles-icon.js";
 import { Button as i, buttonVariants as Z } from "./components/button/button.js";
 import { Z2SideNavBarProvider as u } from "./components/collapsible-side-nav-bar/side-nav-bar-provider.js";
 import { Z2SideNavBar as D, Z2SidebarVariants as T } from "./components/collapsible-side-nav-bar/side-nav-bar.js";
-import { Z2SideNavBarHeader as C } from "./components/collapsible-side-nav-bar/side-nav-bar-header.js";
+import { Z2SideNavBarHeader as g } from "./components/collapsible-side-nav-bar/side-nav-bar-header.js";
 import { Z2SideNavBarContent as w } from "./components/collapsible-side-nav-bar/side-nav-bar-content.js";
 import { Z2SideNavBarFooter as s } from "./components/collapsible-side-nav-bar/side-nav-bar-footer.js";
 import { Z2SideNavBarGroup as v } from "./components/collapsible-side-nav-bar/side-nav-bar-group.js";
-import { Z2SideNavBarItem as B } from "./components/collapsible-side-nav-bar/side-nav-bar-item.js";
+import { Z2SideNavBarItem as M } from "./components/collapsible-side-nav-bar/side-nav-bar-item.js";
 import { Z2SideNavBarSeparator as N } from "./components/collapsible-side-nav-bar/side-nav-bar-separator.js";
 import { useZ2SideNavBar as E } from "./components/collapsible-side-nav-bar/context.js";
 import { Z2Popover as F } from "./components/collapsible-side-nav-bar/popover/popover.js";
 import { ChevronUpIcon as _ } from "./components/assets/icons/chevron-up-icon.js";
-import { default as h } from "./components/assets/icons/sub-nav-indicator.js";
-import { default as R } from "./components/assets/icons/circles-icon.js";
-import { default as V } from "./components/assets/icons/database-copy.js";
+import { default as V } from "./components/assets/icons/sub-nav-indicator.js";
+import { default as G } from "./components/assets/icons/circles-icon.js";
+import { default as U } from "./components/assets/icons/database-copy.js";
 import { default as k } from "./components/assets/icons/window-left-copy.js";
 import { default as J } from "./components/assets/icons/sidebar-left-show-copy.js";
 import { SIDEBAR_WIDTH as Y, SIDEBAR_WIDTH_COLLAPSED as j } from "./components/collapsible-side-nav-bar/constants.js";
 import { CountryFlags as z } from "./components/country-flags/country-flags.js";
-import { Z2Dialog as X, Z2DialogClose as $, Z2DialogContent as oo, Z2DialogDescription as eo, Z2DialogFooter as ro, Z2DialogHeader as to, Z2DialogOverlay as po, Z2DialogPortal as ao, Z2DialogTitle as no, Z2DialogTrigger as lo } from "./components/dialog/dialog.js";
+import { Z2Dialog as X, Z2DialogClose as $, Z2DialogContent as oo, Z2DialogDescription as eo, Z2DialogFooter as ro, Z2DialogHeader as to, Z2DialogOverlay as ao, Z2DialogPortal as po, Z2DialogTitle as no, Z2DialogTrigger as lo } from "./components/dialog/dialog.js";
 import { DropdownContext as fo, Z2Dropdown as xo, Z2DropdownContent as io, Z2DropdownInput as Zo, Z2DropdownItem as uo, Z2DropdownSub as So, Z2DropdownSubContent as Do, Z2DropdownSubItem as To, Z2DropdownSubTrigger as bo } from "./components/dropdown/z2-dropdown.js";
-import { Z2DropdownMenu as go, Z2DropdownMenuCheckboxItem as wo, Z2DropdownMenuContent as co, Z2DropdownMenuGroup as so, Z2DropdownMenuItem as Io, Z2DropdownMenuLabel as vo, Z2DropdownMenuPortal as Mo, Z2DropdownMenuRadioGroup as Bo, Z2DropdownMenuRadioItem as Ao, Z2DropdownMenuSeparator as No, Z2DropdownMenuShortcut as Po, Z2DropdownMenuSub as Eo, Z2DropdownMenuSubContent as Lo, Z2DropdownMenuSubTrigger as Fo, Z2DropdownMenuTrigger as Ho } from "./components/dropdown-menu/z2-dropdown-menu.js";
+import { Z2DropdownMenu as Co, Z2DropdownMenuCheckboxItem as wo, Z2DropdownMenuContent as co, Z2DropdownMenuGroup as so, Z2DropdownMenuItem as Io, Z2DropdownMenuLabel as vo, Z2DropdownMenuPortal as Bo, Z2DropdownMenuRadioGroup as Mo, Z2DropdownMenuRadioItem as Ao, Z2DropdownMenuSeparator as No, Z2DropdownMenuShortcut as Po, Z2DropdownMenuSub as Eo, Z2DropdownMenuSubContent as Lo, Z2DropdownMenuSubTrigger as Fo, Z2DropdownMenuTrigger as Ho } from "./components/dropdown-menu/z2-dropdown-menu.js";
 import { FileUploadArea as yo } from "./components/file-upload-area/file-upload-area.js";
-import { DEFAULT_ACCEPT as Go } from "./components/file-upload-area/file-upload-area.const.js";
-import { Input as Uo } from "./components/input/input.js";
+import { DEFAULT_ACCEPT as ho } from "./components/file-upload-area/file-upload-area.const.js";
+import { Input as Ro } from "./components/input/input.js";
 import { NavHeader as Wo } from "./components/nav-header/nav-header.js";
 import { NavItem as Oo } from "./components/nav-header/nav-item/nav-item.js";
 import { Z2Select as Qo, Z2SelectContent as Yo, Z2SelectGroup as jo, Z2SelectItem as qo, Z2SelectLabel as zo, Z2SelectScrollDownButton as Ko, Z2SelectScrollUpButton as Xo, Z2SelectSeparator as $o, Z2SelectTrigger as oe, Z2SelectValue as ee } from "./components/select/z2-select.js";
 import { Z2Stepper as te } from "./components/stepper/stepper.js";
-import { Z2StepperItem as ae } from "./components/stepper-item/stepper-item.js";
+import { Z2StepperItem as pe } from "./components/stepper-item/stepper-item.js";
 import { Z2Tabs as le, Z2TabsContent as me, Z2TabsList as fe, Z2TabsTrigger as xe } from "./components/tab/tab.js";
 import { Table as Ze, TableProvider as de } from "./components/table/table-provider.js";
 import { TableBody as Se } from "./components/table/table.js";
 import { extractCellValue as Te, getNestedValue as be } from "./components/table/table.utils.js";
-import { DEFAULT_EMPTY_MESSAGE as ge, TABLE_CSS_CLASSES as we } from "./components/table/table.const.js";
+import { DEFAULT_EMPTY_MESSAGE as Ce, TABLE_CSS_CLASSES as we } from "./components/table/table.const.js";
 import { TableContext as se, useTableContext as Ie } from "./components/table/table.context.js";
-import { TableCell as Me } from "./components/table/components/table-cell.js";
+import { TableCell as Be } from "./components/table/components/table-cell.js";
 import { TextCell as Ae } from "./components/table/components/cell/text-cell.js";
 import { NumberCell as Pe } from "./components/table/components/cell/number-cell.js";
 import { BooleanCell as Le } from "./components/table/components/cell/boolean-cell.js";
 import { TableHeader as He } from "./components/table/components/table-header/table-header.js";
 import "react/jsx-runtime";
 import { TableRow as ye } from "./components/table/components/table-row.js";
-import { TableEmptyState as Ge } from "./components/table/components/table-empty-state.js";
-import { TableLoadingState as Ue } from "./components/table/components/table-loading-state.js";
+import { TableEmptyState as he } from "./components/table/components/table-empty-state.js";
+import { TableLoadingState as Re } from "./components/table/components/table-loading-state.js";
 import { Pagination as We } from "./components/table/components/pagination/pagination.js";
 import { TableHeaderWrapper as Oe } from "./components/table/components/table-header-wrapper.js";
 import { TableHeaderContent as Qe } from "./components/table/components/table-header-content.js";
@@ -54,56 +54,58 @@ import { TableFooterContent as ze } from "./components/table/components/table-fo
 import { MagnifierIcon as Xe } from "./components/assets/icons/magnifier-icon.js";
 import { TableFilter as or } from "./components/table/components/table-filter/table-filter.js";
 import { PaginationInfo as rr } from "./components/table/components/pagination/components/pagination-info.js";
-import { PaginationQuickJumper as pr } from "./components/table/components/pagination/components/pagination-quick-jumper.js";
+import { PaginationQuickJumper as ar } from "./components/table/components/pagination/components/pagination-quick-jumper.js";
 import "react";
 import { Z2Tooltip as nr } from "./components/tooltip/tooltip.js";
 import { default as mr } from "./components/table-card/table-card.js";
-import { InfoIcon as xr } from "./components/assets/icons/info-icon.js";
-import { useTheme as Zr } from "./lib/theme.hook.js";
-import { cn as ur } from "./lib/utils.js";
-import { Z2PopoverTrigger as Dr } from "./components/collapsible-side-nav-bar/popover/popover-trigger.js";
-import { Z2PopoverContent as br } from "./components/collapsible-side-nav-bar/popover/popover-content.js";
+import { Badge as xr, badgeVariants as ir } from "./components/badge/badge.js";
+import { InfoIcon as dr } from "./components/assets/icons/info-icon.js";
+import { useTheme as Sr } from "./lib/theme.hook.js";
+import { cn as Tr } from "./lib/utils.js";
+import { Z2PopoverTrigger as gr } from "./components/collapsible-side-nav-bar/popover/popover-trigger.js";
+import { Z2PopoverContent as wr } from "./components/collapsible-side-nav-bar/popover/popover-content.js";
 export {
-  a as Alert,
+  p as Alert,
   f as AlertCirclesIcon,
   n as AlertDescription,
   l as AlertTitle,
+  xr as Badge,
   Le as BooleanCell,
   i as Button,
   _ as ChevronUpIcon,
-  R as CirclesIcon,
+  G as CirclesIcon,
   z as CountryFlags,
-  Go as DEFAULT_ACCEPT,
-  ge as DEFAULT_EMPTY_MESSAGE,
-  V as DatabaseCopy,
+  ho as DEFAULT_ACCEPT,
+  Ce as DEFAULT_EMPTY_MESSAGE,
+  U as DatabaseCopy,
   fo as DropdownContext,
   yo as FileUploadArea,
-  xr as InfoIcon,
-  Uo as Input,
+  dr as InfoIcon,
+  Ro as Input,
   Xe as MagnifierIcon,
   Wo as NavHeader,
   Oo as NavItem,
   Pe as NumberCell,
   rr as PaginationInfo,
-  pr as PaginationQuickJumper,
+  ar as PaginationQuickJumper,
   Y as SIDEBAR_WIDTH,
   j as SIDEBAR_WIDTH_COLLAPSED,
   J as SidebarLeftShowCopy,
-  h as SubNavIndicator,
+  V as SubNavIndicator,
   we as TABLE_CSS_CLASSES,
   Ze as Table,
   Se as TableBody,
   mr as TableCard,
-  Me as TableCell,
+  Be as TableCell,
   se as TableContext,
-  Ge as TableEmptyState,
+  he as TableEmptyState,
   or as TableFilter,
   je as TableFooter,
   ze as TableFooterContent,
   He as TableHeader,
   Qe as TableHeaderContent,
   Oe as TableHeaderWrapper,
-  Ue as TableLoadingState,
+  Re as TableLoadingState,
   We as TablePagination,
   de as TableProvider,
   ye as TableRow,
@@ -115,22 +117,22 @@ export {
   eo as Z2DialogDescription,
   ro as Z2DialogFooter,
   to as Z2DialogHeader,
-  po as Z2DialogOverlay,
-  ao as Z2DialogPortal,
+  ao as Z2DialogOverlay,
+  po as Z2DialogPortal,
   no as Z2DialogTitle,
   lo as Z2DialogTrigger,
   xo as Z2Dropdown,
   io as Z2DropdownContent,
   Zo as Z2DropdownInput,
   uo as Z2DropdownItem,
-  go as Z2DropdownMenu,
+  Co as Z2DropdownMenu,
   wo as Z2DropdownMenuCheckboxItem,
   co as Z2DropdownMenuContent,
   so as Z2DropdownMenuGroup,
   Io as Z2DropdownMenuItem,
   vo as Z2DropdownMenuLabel,
-  Mo as Z2DropdownMenuPortal,
-  Bo as Z2DropdownMenuRadioGroup,
+  Bo as Z2DropdownMenuPortal,
+  Mo as Z2DropdownMenuRadioGroup,
   Ao as Z2DropdownMenuRadioItem,
   No as Z2DropdownMenuSeparator,
   Po as Z2DropdownMenuShortcut,
@@ -143,8 +145,8 @@ export {
   To as Z2DropdownSubItem,
   bo as Z2DropdownSubTrigger,
   F as Z2Popover,
-  br as Z2PopoverContent,
-  Dr as Z2PopoverTrigger,
+  wr as Z2PopoverContent,
+  gr as Z2PopoverTrigger,
   Qo as Z2Select,
   Yo as Z2SelectContent,
   jo as Z2SelectGroup,
@@ -159,23 +161,24 @@ export {
   w as Z2SideNavBarContent,
   s as Z2SideNavBarFooter,
   v as Z2SideNavBarGroup,
-  C as Z2SideNavBarHeader,
-  B as Z2SideNavBarItem,
+  g as Z2SideNavBarHeader,
+  M as Z2SideNavBarItem,
   u as Z2SideNavBarProvider,
   N as Z2SideNavBarSeparator,
   T as Z2SidebarVariants,
   te as Z2Stepper,
-  ae as Z2StepperItem,
+  pe as Z2StepperItem,
   le as Z2Tabs,
   me as Z2TabsContent,
   fe as Z2TabsList,
   xe as Z2TabsTrigger,
   nr as Z2Tooltip,
+  ir as badgeVariants,
   Z as buttonVariants,
-  ur as cn,
+  Tr as cn,
   Te as extractCellValue,
   be as getNestedValue,
   Ie as useTableContext,
-  Zr as useTheme,
+  Sr as useTheme,
   E as useZ2SideNavBar
 };

package/dist/types/index.d.ts

@@ -16,6 +16,7 @@ export * from './components/tab/tab';
 export * from './components/table';
 export * from './components/tooltip/tooltip';
 export * from './components/table-card';
+export * from './components/badge/badge';
 export * from './components/assets/icons/apartment-building';
 export * from './components/assets/icons/chevron-down';
 export * from './components/assets/icons/chevron-left';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztwoint/z-ui",
-  "version": "0.1.39",
+  "version": "0.1.40",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",