@ikatec/nebula-react 0.0.1-alpha.25 → 1.0.1

package/dist/index.mjs

@@ -19,6 +19,7 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { Toaster as Toaster$1, toast as toast$1 } from 'sonner';
 
 // src/button.tsx
 
@@ -557,28 +558,35 @@ var __iconNode6 = [
 ];
 var ChevronsRight = createLucideIcon("ChevronsRight", __iconNode6);
 
-// ../../node_modules/lucide-react/dist/esm/icons/circle-x.js
+// ../../node_modules/lucide-react/dist/esm/icons/circle-check-big.js
 var __iconNode7 = [
+  ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
+  ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
+];
+var CircleCheckBig = createLucideIcon("CircleCheckBig", __iconNode7);
+
+// ../../node_modules/lucide-react/dist/esm/icons/circle-x.js
+var __iconNode8 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m15 9-6 6", key: "1uzhvr" }],
   ["path", { d: "m9 9 6 6", key: "z0biqf" }]
 ];
-var CircleX = createLucideIcon("CircleX", __iconNode7);
+var CircleX = createLucideIcon("CircleX", __iconNode8);
 
 // ../../node_modules/lucide-react/dist/esm/icons/circle.js
-var __iconNode8 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-var Circle = createLucideIcon("Circle", __iconNode8);
+var __iconNode9 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+var Circle = createLucideIcon("Circle", __iconNode9);
 
 // ../../node_modules/lucide-react/dist/esm/icons/ellipsis.js
-var __iconNode9 = [
+var __iconNode10 = [
   ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
   ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
   ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
 ];
-var Ellipsis = createLucideIcon("Ellipsis", __iconNode9);
+var Ellipsis = createLucideIcon("Ellipsis", __iconNode10);
 
 // ../../node_modules/lucide-react/dist/esm/icons/eye-off.js
-var __iconNode10 = [
+var __iconNode11 = [
   [
     "path",
     {
@@ -596,10 +604,10 @@ var __iconNode10 = [
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
 ];
-var EyeOff = createLucideIcon("EyeOff", __iconNode10);
+var EyeOff = createLucideIcon("EyeOff", __iconNode11);
 
 // ../../node_modules/lucide-react/dist/esm/icons/eye.js
-var __iconNode11 = [
+var __iconNode12 = [
   [
     "path",
     {
@@ -609,18 +617,26 @@ var __iconNode11 = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-var Eye = createLucideIcon("Eye", __iconNode11);
+var Eye = createLucideIcon("Eye", __iconNode12);
+
+// ../../node_modules/lucide-react/dist/esm/icons/info.js
+var __iconNode13 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 16v-4", key: "1dtifu" }],
+  ["path", { d: "M12 8h.01", key: "e9boi3" }]
+];
+var Info = createLucideIcon("Info", __iconNode13);
 
 // ../../node_modules/lucide-react/dist/esm/icons/minus.js
-var __iconNode12 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-var Minus = createLucideIcon("Minus", __iconNode12);
+var __iconNode14 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+var Minus = createLucideIcon("Minus", __iconNode14);
 
 // ../../node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode13 = [
+var __iconNode15 = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
-var X = createLucideIcon("X", __iconNode13);
+var X = createLucideIcon("X", __iconNode15);
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
@@ -2122,10 +2138,7 @@ function Accordion({
     AccordionPrimitive.Root,
     {
       collapsible: true,
-      className: cn(
-        "w-full bg-accordion-background rounded-3xl p-6",
-        className
-      ),
+      className: cn("w-full", className),
       ...props,
       children
     }
@@ -2141,7 +2154,7 @@ function AccordionItem({
     {
       "data-slot": "accordion-item",
       className: cn(
-        "transition-all duration-300 border-b last:border-b-0 last:pb-0 last:mb-0 pb-6 mb-6 border-neutral-200 dark:border-neutral-600",
+        "transition-all duration-300 border-b last:border-b-0 last:pb-0 last:mb-0 pb-6 mb-6 border-accordion-border",
         className
       ),
       ...props,
@@ -2159,15 +2172,21 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "flex items-center justify-between w-full transition-all",
-        "[&[data-state=open]>svg]:rotate-180 [&>svg]:transition-all duration-200",
+        "flex items-start justify-between w-full transition-all",
+        "[&[data-state=open]_[data-slot=accordion-icon]]:rotate-180 [&_[data-slot=accordion-icon]]:transition-all duration-200",
         "data-[state=open]:mb-6",
         className
       ),
       ...props,
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        children,
-        /* @__PURE__ */ jsx(ChevronDown, { className: "nebula-ds text-accordion-icon w-6 h-6" })
+        /* @__PURE__ */ jsx("div", { className: "nebula-ds flex flex-col gap-2", children }),
+        /* @__PURE__ */ jsx("div", { className: "nebula-ds flex items-center justify-center w-5 h-5", children: /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            "data-slot": "accordion-icon",
+            className: "nebula-ds text-accordion-icon w-4 h-4"
+          }
+        ) })
       ] })
     }
   ) });
@@ -2175,6 +2194,7 @@ function AccordionTrigger({
 function AccordionContent({
   className,
   children,
+  separator = false,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
@@ -2185,6 +2205,9 @@ function AccordionContent({
         "overflow-hidden transition-all",
         "data-[state=closed]:animate-accordion-up",
         "data-[state=open]:animate-accordion-down",
+        {
+          "data-[state=open]:border-t border-accordion-border py-4": separator
+        },
         className
       ),
       ...props,
@@ -2201,7 +2224,7 @@ function AccordionTitle({
     {
       ...props,
       className: cn(
-        "text-start !text-accordion-text-title font-semibold text-xl",
+        "text-start !text-accordion-text-title font-semibold text-xl leading-none",
         className
       )
     }
@@ -2216,7 +2239,7 @@ function AccordionDescription({
     {
       ...props,
       className: cn(
-        "text-start !text-accordion-text-description font-normal text-sm min-h-5 mt-1",
+        "text-start !text-accordion-text-description font-normal text-sm leading-none",
         className
       )
     }
@@ -2232,6 +2255,7 @@ var TabsContext = React8.createContext({});
 var Tabs = React8.forwardRef(({ isFitted, children, ...props }, ref) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { isFitted }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props, children }) }));
 Tabs.displayName = TabsPrimitive.Root.displayName;
 var TabsList = React8.forwardRef(({ className, ...props }, ref) => {
+  const { isFitted } = React8.useContext(TabsContext);
   return /* @__PURE__ */ jsx(
     TabsPrimitive.List,
     {
@@ -2240,9 +2264,11 @@ var TabsList = React8.forwardRef(({ className, ...props }, ref) => {
         `
           inline-flex 
           items-center 
-          justify-center
+          border-b-[1px]
+          border-tabs-border-default
           w-full
         `,
+        { "justify-center": isFitted },
         className
       ),
       ...props
@@ -2266,12 +2292,13 @@ var TabsTrigger = React8.forwardRef(({ className, ...props }, ref) => {
           min-h-10
           min-w-[125px]
           gap-2
+          border-b-[2px]
+          border-transparent
+          -mb-[1px]
           text-sm
           font-semibold
           ring-offset-background
           transition-all
-          border-b-2
-          border-tabs-border-default
           text-tabs-text-default
           focus-visible:outline-none
           disabled:pointer-events-none
@@ -2304,6 +2331,238 @@ var TabsContent = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
+var Box = ({
+  className,
+  paddingSize = "md",
+  border = false,
+  shadow = "sm",
+  variant: variant3 = "primary",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        "w-full rounded-2xl",
+        {
+          "bg-box-background": variant3 === "primary",
+          "bg-box-secondary-background": variant3 === "secondary"
+        },
+        {
+          "p-4": paddingSize === "sm",
+          "p-6": paddingSize === "md",
+          "p-8": paddingSize === "lg"
+        },
+        {
+          "border border-box-border": border
+        },
+        {
+          "shadow-sm": shadow === "sm",
+          "shadow-md": shadow === "md",
+          "shadow-lg": shadow === "lg"
+        },
+        className
+      ),
+      children
+    }
+  );
+};
+function Toaster() {
+  return /* @__PURE__ */ jsx(Toaster$1, { position: "top-right" });
+}
+function ToastComponent({
+  type,
+  message,
+  options,
+  t
+}) {
+  const CustomIcon = React8__default.isValidElement(options?.icon) ? React8__default.cloneElement(options.icon, {
+    className: cn("text-toast-icon-default", options.icon.props.className),
+    size: 20
+  }) : null;
+  const typeIcons = {
+    success: /* @__PURE__ */ jsx(CircleCheckBig, { className: "nebula-ds text-toast-icon-default", size: 20 }),
+    error: /* @__PURE__ */ jsx(CircleX, { className: "nebula-ds text-toast-icon-error", size: 20 }),
+    info: /* @__PURE__ */ jsx(Info, { className: "nebula-ds text-toast-icon-default", size: 20 }),
+    custom: CustomIcon
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "nebula-ds w-[400px] bg-toast-background border border-toast-border rounded-xl p-4 flex items-start justify-start gap-2 shadow-md", children: [
+    /* @__PURE__ */ jsx("div", { children: typeIcons[type] }),
+    /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex flex-col gap-2 mr-auto", children: [
+      /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex flex-col", children: [
+        /* @__PURE__ */ jsx("span", { className: "nebula-ds text-toast-title text-sm font-semibold", children: message }),
+        options?.description && /* @__PURE__ */ jsx("span", { className: "nebula-ds text-toast-description text-sm font-medium", children: options.description })
+      ] }),
+      options?.action && /* @__PURE__ */ jsx("div", { className: "nebula-ds flex gap-2", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: options.action.variant || "secondary",
+          onClick: options.action.onClick,
+          children: options.action.label
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("button", { onClick: () => toast$1.dismiss(t), children: /* @__PURE__ */ jsx(X, { className: "nebula-ds text-toast-icon-default", size: 20 }) })
+  ] });
+}
+function success(message, options) {
+  toast$1.custom(
+    (t) => /* @__PURE__ */ jsx(
+      ToastComponent,
+      {
+        type: "success",
+        message,
+        options,
+        t
+      }
+    ),
+    {
+      duration: 4e3
+      // 4 seconds
+    }
+  );
+}
+function error(message, options) {
+  toast$1.custom(
+    (t) => /* @__PURE__ */ jsx(ToastComponent, { type: "error", message, options, t }),
+    {
+      duration: 6e3
+      // 6 seconds
+    }
+  );
+}
+function info(message, options) {
+  toast$1.custom(
+    (t) => /* @__PURE__ */ jsx(ToastComponent, { type: "info", message, options, t }),
+    {
+      duration: 4e3
+      // 4 seconds
+    }
+  );
+}
+function custom(message, options) {
+  toast$1.custom(
+    (t) => /* @__PURE__ */ jsx(ToastComponent, { type: "custom", message, options, t }),
+    {
+      duration: 4e3
+      // 4 seconds
+    }
+  );
+}
+async function promise(promise2, messages8, options) {
+  const loadingToast = toast$1.custom(
+    (t) => /* @__PURE__ */ jsx(
+      ToastComponent,
+      {
+        type: "info",
+        message: messages8.loading,
+        options,
+        t
+      }
+    ),
+    { duration: Infinity }
+  );
+  return promise2.then((result) => {
+    toast$1.dismiss(loadingToast);
+    toast$1.custom(
+      (t) => /* @__PURE__ */ jsx(
+        ToastComponent,
+        {
+          type: "success",
+          message: messages8.success,
+          options,
+          t
+        }
+      ),
+      { duration: 4e3 }
+    );
+    return result;
+  }).catch((error2) => {
+    toast$1.dismiss(loadingToast);
+    toast$1.custom(
+      (t) => /* @__PURE__ */ jsx(
+        ToastComponent,
+        {
+          type: "error",
+          message: messages8.error,
+          options,
+          t
+        }
+      ),
+      { duration: 6e3 }
+    );
+    return Promise.reject(error2);
+  });
+}
+var toast = {
+  success,
+  error,
+  info,
+  custom,
+  promise
+};
+var ActionBar = React8.forwardRef(({ ...props }) => /* @__PURE__ */ jsx(DialogPrimitive.Root, { modal: false, ...props }));
+ActionBar.displayName = "ActionBar";
+var ActionBarTrigger = React8.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ref, ...props }));
+ActionBarTrigger.displayName = "ActionBarTrigger";
+var ActionBarPortal = (props) => /* @__PURE__ */ jsx(DialogPrimitive.Portal, { ...props });
+ActionBarPortal.displayName = "ActionBarPortal";
+var ActionBarClose = React8.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Close, { ref, ...props }));
+ActionBarClose.displayName = "ActionBarClose";
+var ActionBarButton = React8.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        variant: "primary",
+        className: cn(className, "rounded-none !text-sm"),
+        tabIndex: -1,
+        ...props
+      }
+    );
+  }
+);
+ActionBarButton.displayName = "ActionBarButton";
+var ActionBarDivider = React8.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Separator2,
+    {
+      ref,
+      className: cn("bg-actionBar-divider h-6", className),
+      orientation: "vertical",
+      ...props
+    }
+  );
+});
+ActionBarDivider.displayName = "ActionBarDivider";
+var ActionBarContent = React8.forwardRef(({ className, children, portal = false, ...props }, ref) => {
+  const Comp = portal ? ActionBarPortal : React8.Fragment;
+  return /* @__PURE__ */ jsx(Comp, { children: /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      onInteractOutside: (e) => e.preventDefault(),
+      className: cn(
+        "fixed left-1/2 bottom-[24px] z-50 -translate-x-1/2",
+        "flex items-center justify-items-center rounded-full shadow-lg shadow-actionBar-shadow",
+        "data-[state=open]:animate-slide-up-center data-[state=closed]:animate-slide-down-center",
+        "bg-button-primary-background-default",
+        "overflow-hidden",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "nebula-ds sr-only" }),
+        children
+      ]
+    }
+  ) });
+});
+ActionBarContent.displayName = "ActionBarContent";
 
 // src/tailwind.ts
 function content({ base = "./" } = {}) {
@@ -2326,11 +2585,13 @@ lucide-react/dist/esm/icons/chevron-left.js:
 lucide-react/dist/esm/icons/chevron-right.js:
 lucide-react/dist/esm/icons/chevrons-left.js:
 lucide-react/dist/esm/icons/chevrons-right.js:
+lucide-react/dist/esm/icons/circle-check-big.js:
 lucide-react/dist/esm/icons/circle-x.js:
 lucide-react/dist/esm/icons/circle.js:
 lucide-react/dist/esm/icons/ellipsis.js:
 lucide-react/dist/esm/icons/eye-off.js:
 lucide-react/dist/esm/icons/eye.js:
+lucide-react/dist/esm/icons/info.js:
 lucide-react/dist/esm/icons/minus.js:
 lucide-react/dist/esm/icons/x.js:
 lucide-react/dist/esm/lucide-react.js:
@@ -2342,4 +2603,4 @@ lucide-react/dist/esm/lucide-react.js:
    *)
 */
 
-export { Accordion, AccordionContent, AccordionDescription, AccordionItem, AccordionTitle, AccordionTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Checkbox, StyledCreatable as Creatable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, InputText, Label, NebulaI18nProvider, Pagination, Popover, PopoverContent, PopoverTrigger, StyledSelect as Select, Separator2 as Separator, Space, SpaceDirectionEnum, SpaceSizeEnum, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, getNebulaLanguage, messages7 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, useNebulaI18n };
+export { Accordion, AccordionContent, AccordionDescription, AccordionItem, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Checkbox, StyledCreatable as Creatable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, InputText, Label, NebulaI18nProvider, Pagination, Popover, PopoverContent, PopoverTrigger, StyledSelect as Select, Separator2 as Separator, Space, SpaceDirectionEnum, SpaceSizeEnum, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Toaster, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, getNebulaLanguage, messages7 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useNebulaI18n };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "0.0.1-alpha.25",
+  "version": "1.0.1",
   "description": "React components",
   "publishConfig": {
     "access": "public"
@@ -52,6 +52,7 @@
     "@radix-ui/react-tooltip": "^1.2.6",
     "class-variance-authority": "^0.7.1",
     "react-select": "^5.10.1",
+    "sonner": "^2.0.5",
     "tailwind-merge": "^2.6.0"
   },
   "peerDependencies": {