@optigrit/optigrit-ui 0.0.19 → 0.0.20

package/dist/components/index.d.ts

@@ -345,6 +345,40 @@ interface CardFooterProps extends React__default.HTMLAttributes<HTMLDivElement>
 }
 declare const CardFooter: React__default.ForwardRefExoticComponent<CardFooterProps & React__default.RefAttributes<HTMLDivElement>>;
 
+type AvatarProps = IconButtonProps & {
+    src?: string;
+    alt?: string;
+    label?: string;
+    labelProps?: Omit<TooltipProps, 'label'>;
+};
+declare function Avatar(props: AvatarProps): react_jsx_runtime.JSX.Element;
+
+type AvatarStackProps = {
+    avatars: Array<Pick<AvatarProps, 'alt' | 'src' | 'label' | 'color' | 'variant'> & {
+        id: string;
+    }>;
+    max?: number;
+    size?: AvatarProps['size'];
+    onClickAvatar?: (id: string) => void;
+};
+declare function AvatarStack(props: AvatarStackProps): react_jsx_runtime.JSX.Element;
+
+declare const SearchIcon: React__default.FC<React__default.SVGProps<SVGSVGElement>>;
+
+declare const CrossIcon: React__default.FC<React__default.SVGProps<SVGSVGElement>>;
+
+declare const SuccessIcon: React__default.FC<React__default.SVGProps<SVGSVGElement>>;
+
+declare const ErrorIcon: React__default.FC<React__default.SVGProps<SVGSVGElement>>;
+
+declare const WarningIcon: React__default.FC<React__default.SVGProps<SVGSVGElement>>;
+
+declare const InfoIcon: React__default.FC<React__default.SVGProps<SVGSVGElement>>;
+
+declare const CloseIcon: React__default.FC<React__default.SVGProps<SVGSVGElement>>;
+
+declare const ChevronDownIcon: React__default.FC<React__default.SVGProps<SVGSVGElement>>;
+
 declare function FlagAD(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
 declare function FlagAE(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
@@ -1169,4 +1203,12 @@ type FlagProps = HTMLAttributes<HTMLSpanElement> & {
 };
 declare function FlagIcon(props: FlagProps): react_jsx_runtime.JSX.Element;
 
-export { Button, type ButtonColor, type ButtonProps, type ButtonRoundness, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Carousel, type CarouselItem, type CarouselProps, type Column, type Country, DataTable, type DataTableProps, DatePicker, type DatePickerProps, type DatePickerValue, Dialog, DialogContent, DialogFooter, DialogHeader, type DialogProps, Drawer, DrawerContent, DrawerFooter, DrawerHeader, type DrawerProps, FlagIcon, type FlagName, type FlagProps, IconButton, type IconButtonProps, InputField, type InputFieldProps, MultiSelect, type MultiSelectProps, SearchBar, type SearchBarProps, Select, type SelectProps, Separator, type SeparatorProps, TabList, type TabListProps, TabPanel, type TabPanelProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableContainer, type TableContainerProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TablePaginationConfig, type TableProps, TableRow, type TableRowProps, TelInput, type TelInputProps, type TelInputValue, TimePicker, type TimePickerProps, type TimePickerValue, Tooltip, type TooltipProps, handleAlert, handleError, isValidPhoneChars, isValidPhoneLength, sanitizePhoneNumber, validatePhoneNumber };
+declare const CalendarIcon: React__default.FC<React__default.SVGProps<SVGSVGElement>>;
+
+declare const ClockIcon: React__default.FC<React__default.SVGProps<SVGSVGElement>>;
+
+declare const ChevronLeftIcon: React__default.FC<React__default.SVGProps<SVGSVGElement>>;
+
+declare const ChevronRightIcon: React__default.FC<React__default.SVGProps<SVGSVGElement>>;
+
+export { Avatar, type AvatarProps, AvatarStack, type AvatarStackProps, Button, type ButtonColor, type ButtonProps, type ButtonRoundness, type ButtonSize, type ButtonVariant, CalendarIcon, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Carousel, type CarouselItem, type CarouselProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, CloseIcon, type Column, type Country, CrossIcon, DataTable, type DataTableProps, DatePicker, type DatePickerProps, type DatePickerValue, Dialog, DialogContent, DialogFooter, DialogHeader, type DialogProps, Drawer, DrawerContent, DrawerFooter, DrawerHeader, type DrawerProps, ErrorIcon, FlagIcon, type FlagName, type FlagProps, IconButton, type IconButtonProps, InfoIcon, InputField, type InputFieldProps, MultiSelect, type MultiSelectProps, SearchBar, type SearchBarProps, SearchIcon, Select, type SelectProps, Separator, type SeparatorProps, SuccessIcon, TabList, type TabListProps, TabPanel, type TabPanelProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableContainer, type TableContainerProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TablePaginationConfig, type TableProps, TableRow, type TableRowProps, TelInput, type TelInputProps, type TelInputValue, TimePicker, type TimePickerProps, type TimePickerValue, Tooltip, type TooltipProps, WarningIcon, handleAlert, handleError, isValidPhoneChars, isValidPhoneLength, sanitizePhoneNumber, validatePhoneNumber };

package/dist/components/index.js

@@ -6,7 +6,7 @@ import {
   ShowWithAnimation,
   Spinner,
   cn
-} from "../chunk-AGDACE33.js";
+} from "../chunk-4KHU7KPD.js";
 import "../chunk-MCQS3QNN.js";
 import {
   useKeyboardShortcuts
@@ -34,12 +34,12 @@ var getVariantClasses = (variant, color) => {
       info: "bg-info text-white shadow-sm hover:shadow"
     },
     outlined: {
-      primary: "border border-primary-500 text-primary hover:border-primary hover:bg-[color-mix(in_srgb,var(--primary)_4%,transparent)]",
-      secondary: "border border-primary-secondary-500 text-secondary hover:border-primary-secondary hover:bg-[color-mix(in_srgb,var(--primary-secondary)_4%,transparent)]",
-      error: "border border-error-500 text-error hover:border-error hover:bg-[color-mix(in_srgb,var(--error)_4%,transparent)]",
-      success: "border border-success-500 text-success hover:border-success hover:bg-[color-mix(in_srgb,var(--success)_4%,transparent)]",
-      warning: "border border-warning-500 text-warning hover:border-warning hover:bg-[color-mix(in_srgb,var(--warning)_4%,transparent)]",
-      info: "border border-info-500 text-info hover:border-info hover:bg-[color-mix(in_srgb,var(--info)_4%,transparent)]"
+      primary: "border border-primary-500 text-primary hover:border-primary hover:bg-[color-mix(in_srgb,var(--primary)_4%,transparent)] backdrop-blur-sm",
+      secondary: "border border-primary-secondary-500 text-secondary hover:border-primary-secondary hover:bg-[color-mix(in_srgb,var(--primary-secondary)_4%,transparent)] backdrop-blur-sm",
+      error: "border border-error-500 text-error hover:border-error hover:bg-[color-mix(in_srgb,var(--error)_4%,transparent)] backdrop-blur-sm",
+      success: "border border-success-500 text-success hover:border-success hover:bg-[color-mix(in_srgb,var(--success)_4%,transparent)] backdrop-blur-sm",
+      warning: "border border-warning-500 text-warning hover:border-warning hover:bg-[color-mix(in_srgb,var(--warning)_4%,transparent)] backdrop-blur-sm",
+      info: "border border-info-500 text-info hover:border-info hover:bg-[color-mix(in_srgb,var(--info)_4%,transparent)] backdrop-blur-sm"
     },
     soft: {
       primary: "bg-primary-100 text-primary hover:bg-primary-200",
@@ -157,11 +157,11 @@ import {
 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var iconOnlySizeClasses = {
-  xs: "text-xs h-7 w-7",
-  sm: "text-sm h-9 w-9",
-  md: "text-base h-11 w-11",
-  lg: "text-base h-13 w-13",
-  xl: "text-lg h-15 w-15"
+  xs: "text-xs h-6 w-6",
+  sm: "text-sm h-8 w-8",
+  md: "text-base h-12 w-12",
+  lg: "text-base h-14 w-14",
+  xl: "text-lg h-16 w-16"
 };
 var roundnessClasses2 = {
   none: "rounded-none",
@@ -170,6 +170,13 @@ var roundnessClasses2 = {
   lg: "rounded-[16px]",
   full: "rounded-full"
 };
+var borderWidthClasses = {
+  xs: "border-[1px]",
+  sm: "border-[1px]",
+  md: "border-[2px]",
+  lg: "border-[3px]",
+  xl: "border-[3px]"
+};
 var IconButton = forwardRef2(
   ({
     variant = "contained",
@@ -217,12 +224,13 @@ var IconButton = forwardRef2(
           getVariantClasses(variant, color),
           iconOnlySizeClasses[size],
           roundnessClasses2[roundness],
+          variant === "outlined" && borderWidthClasses[size],
           className
         ),
         ...rest,
         children: [
           /* @__PURE__ */ jsx2(Ripple, { ref: rippleRef, color: getRippleColor(variant, color) }),
-          loading ? /* @__PURE__ */ jsx2(Spinner, { size: spinnerSize[size], color: "inherit" }) : /* @__PURE__ */ jsx2("span", { className: "z-10 inline-flex items-center justify-center shrink-0", children })
+          loading ? /* @__PURE__ */ jsx2(Spinner, { size: spinnerSize[size], color: "inherit" }) : children
         ]
       }
     );
@@ -15642,13 +15650,143 @@ var CardFooter = React8.forwardRef(
   }
 );
 CardFooter.displayName = "CardFooter";
+
+// src/components/Primitives/Avatar/index.tsx
+import { Fragment as Fragment9, useLayoutEffect as useLayoutEffect2, useState as useState12 } from "react";
+import { jsx as jsx323, jsxs as jsxs297 } from "react/jsx-runtime";
+function Avatar(props) {
+  const {
+    label,
+    labelProps,
+    src = "",
+    alt = "Avatar",
+    variant = "outlined",
+    color = "secondary",
+    size = "md",
+    ...iconButtonProps
+  } = props;
+  const [hasError, setHasError] = useState12(false);
+  const fallbackText = getInitials(alt);
+  const shouldRenderImage = Boolean(src) && !hasError;
+  useLayoutEffect2(() => {
+    setHasError(false);
+  }, [src]);
+  return /* @__PURE__ */ jsx323(
+    Tooltip,
+    {
+      ...labelProps,
+      label,
+      labelContainerProps: {
+        ...labelProps?.labelContainerProps,
+        style: {
+          ...labelProps?.labelContainerProps?.style,
+          display: label ? "flex" : "none"
+        }
+      },
+      children: /* @__PURE__ */ jsx323(
+        IconButton_default,
+        {
+          role: "img",
+          "aria-label": alt,
+          ...iconButtonProps,
+          variant,
+          color,
+          size,
+          children: shouldRenderImage ? /* @__PURE__ */ jsxs297(Fragment9, { children: [
+            /* @__PURE__ */ jsx323(
+              "img",
+              {
+                src,
+                alt: "",
+                "aria-hidden": "true",
+                className: "h-full w-full object-fill blur-sm absolute z-[-1]",
+                onError: () => setHasError(true),
+                loading: "lazy",
+                decoding: "async"
+              }
+            ),
+            /* @__PURE__ */ jsx323(
+              "img",
+              {
+                src,
+                alt: "",
+                "aria-hidden": "true",
+                className: "h-full w-full object-contain",
+                onError: () => setHasError(true),
+                loading: "lazy",
+                decoding: "async"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx323("span", { "aria-hidden": "true", className: "select-none leading-none", children: fallbackText })
+        }
+      )
+    }
+  );
+}
+function getInitials(label) {
+  const trimmedLabel = label.trim();
+  if (!trimmedLabel) return "?";
+  const words = trimmedLabel.split(/\s+/).filter(Boolean);
+  if (words.length === 1) {
+    return words[0].slice(0, 2).toUpperCase();
+  }
+  return words.slice(0, 2).map((word) => word[0]?.toUpperCase() ?? "").join("");
+}
+
+// src/components/Primitives/AvatarStack/index.tsx
+import { useState as useState13 } from "react";
+import { jsx as jsx324 } from "react/jsx-runtime";
+import { createElement } from "react";
+function AvatarStack(props) {
+  const {
+    avatars = [],
+    max = Infinity,
+    size = "md",
+    onClickAvatar
+  } = props;
+  const allowAvatars = avatars.slice(0, max);
+  const [hoverIndex, setHoverIndex] = useState13(-1);
+  return /* @__PURE__ */ jsx324("div", { className: cn(
+    "flex items-center",
+    {
+      "xs": "-space-x-2",
+      "sm": "-space-x-3",
+      "md": "-space-x-4",
+      "lg": "-space-x-5",
+      "xl": "-space-x-6"
+    }[size]
+  ), children: allowAvatars.map((avatarProps, index) => /* @__PURE__ */ createElement(
+    Avatar,
+    {
+      ...avatarProps,
+      size,
+      key: avatarProps.id,
+      className: "hover:scale-105 transition-all border-2",
+      style: {
+        zIndex: hoverIndex === index ? avatars.length + 1 : avatars.length - index
+      },
+      onClick: () => onClickAvatar?.(avatarProps.id),
+      onMouseEnter: () => setHoverIndex(index),
+      onMouseLeave: () => setHoverIndex(-1)
+    }
+  )) });
+}
 export {
+  Avatar,
+  AvatarStack,
   Button_default as Button,
+  CalendarIcon,
   Card,
   CardContent,
   CardFooter,
   CardHeader,
   Carousel,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ClockIcon,
+  CloseIcon,
+  CrossIcon,
   DataTable_default as DataTable,
   DatePicker,
   Dialog,
@@ -15659,13 +15797,17 @@ export {
   DrawerContent,
   DrawerFooter,
   DrawerHeader,
+  ErrorIcon,
   FlagIcon,
   IconButton_default as IconButton,
+  InfoIcon,
   InputField,
   MultiSelect,
   SearchBar,
+  SearchIcon,
   Select,
   Separator,
+  SuccessIcon,
   TabList,
   TabPanel,
   Table_default as Table,
@@ -15678,6 +15820,7 @@ export {
   TelInput,
   TimePicker,
   Tooltip,
+  WarningIcon,
   handleAlert,
   handleError,
   isValidPhoneChars,

package/dist/core/index.d.ts

@@ -68,4 +68,10 @@ type ShowProps = {
 };
 declare function Show({ when, children, otherwise }: ShowProps): ReactNode;
 
-export { Popover, PopoverProps, Ripple, type RippleProps, type RippleRef, Show, type ShowProps, ShowWithAnimation, ShowWithAnimationProps, Spinner, type SpinnerColor, type SpinnerProps };
+/**
+ * Utility function to merge tailwind classes safely.
+ * Uses `twMerge` to correctly override conflicting tailwind utility classes.
+ */
+declare function cn(...inputs: (string | undefined | null | false | boolean)[]): string;
+
+export { Popover, PopoverProps, Ripple, type RippleProps, type RippleRef, Show, type ShowProps, ShowWithAnimation, ShowWithAnimationProps, Spinner, type SpinnerColor, type SpinnerProps, cn };

package/dist/core/index.js

@@ -4,8 +4,9 @@ import {
   Ripple,
   Show,
   ShowWithAnimation,
-  Spinner
-} from "../chunk-AGDACE33.js";
+  Spinner,
+  cn
+} from "../chunk-4KHU7KPD.js";
 import "../chunk-MCQS3QNN.js";
 import "../chunk-OP7KGPEN.js";
 export {
@@ -14,5 +15,6 @@ export {
   Ripple,
   Show,
   ShowWithAnimation,
-  Spinner
+  Spinner,
+  cn
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optigrit/optigrit-ui",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "UI components library for optigrit apps",
   "license": "ISC",
   "author": "",