@ikatec/nebula-react 0.0.1-alpha.24 → 1.0.0

package/dist/index.js

@@ -18,6 +18,9 @@ var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var SwitchPrimitives = require('@radix-ui/react-switch');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var AccordionPrimitive = require('@radix-ui/react-accordion');
+var TabsPrimitive = require('@radix-ui/react-tabs');
+var sonner = require('sonner');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -53,6 +56,8 @@ var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialog
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
+var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 
 // src/button.tsx
 
@@ -591,28 +596,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",
     {
@@ -630,10 +642,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",
     {
@@ -643,18 +655,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__namespace.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
@@ -2147,6 +2167,440 @@ var Tooltip = React8__namespace.forwardRef(
   }
 );
 Tooltip.displayName = "Tooltip";
+function Accordion({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Root,
+    {
+      collapsible: true,
+      className: cn("w-full", className),
+      ...props,
+      children
+    }
+  );
+}
+function AccordionItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Item,
+    {
+      "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-accordion-border",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "nebula-ds flex", children: /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds flex flex-col gap-2", children }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds flex items-center justify-center w-5 h-5", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ChevronDown,
+          {
+            "data-slot": "accordion-icon",
+            className: "nebula-ds text-accordion-icon w-4 h-4"
+          }
+        ) })
+      ] })
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  separator = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Content,
+    {
+      "data-slot": "accordion-content",
+      className: cn(
+        "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,
+      children
+    }
+  );
+}
+function AccordionTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "h2",
+    {
+      ...props,
+      className: cn(
+        "text-start !text-accordion-text-title font-semibold text-xl leading-none",
+        className
+      )
+    }
+  );
+}
+function AccordionDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      ...props,
+      className: cn(
+        "text-start !text-accordion-text-description font-normal text-sm leading-none",
+        className
+      )
+    }
+  );
+}
+Accordion.displayName = "Accordion";
+AccordionItem.displayName = "AccordionItem";
+AccordionContent.displayName = "AccordionContent";
+AccordionTrigger.displayName = "AccordionTrigger";
+AccordionTitle.displayName = "AccordionTitle";
+AccordionDescription.displayName = "AccordionDescription";
+var TabsContext = React8__namespace.createContext({});
+var Tabs = React8__namespace.forwardRef(({ isFitted, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { isFitted }, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, ...props, children }) }));
+Tabs.displayName = TabsPrimitive__namespace.Root.displayName;
+var TabsList = React8__namespace.forwardRef(({ className, ...props }, ref) => {
+  const { isFitted } = React8__namespace.useContext(TabsContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.List,
+    {
+      ref,
+      className: cn(
+        `
+          inline-flex 
+          items-center 
+          border-b-[1px]
+          border-tabs-border-default
+          w-full
+        `,
+        { "justify-center": isFitted },
+        className
+      ),
+      ...props
+    }
+  );
+});
+TabsList.displayName = TabsPrimitive__namespace.List.displayName;
+var TabsTrigger = React8__namespace.forwardRef(({ className, ...props }, ref) => {
+  const { isFitted } = React8__namespace.useContext(TabsContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Trigger,
+    {
+      ref,
+      className: cn(
+        `
+          inline-flex
+          items-center
+          justify-center
+          whitespace-nowrap
+          px-2
+          min-h-10
+          min-w-[125px]
+          gap-2
+          border-b-[2px]
+          border-transparent
+          -mb-[1px]
+          text-sm
+          font-semibold
+          ring-offset-background
+          transition-all
+          text-tabs-text-default
+          focus-visible:outline-none
+          disabled:pointer-events-none
+          disabled:opacity-50
+          data-[state=active]:text-tabs-text-active
+          data-[state=active]:border-tabs-border-active
+          [&>svg]:h-4
+          [&>svg]:w-4
+        `,
+        isFitted && "w-full",
+        className
+      ),
+      ...props
+    }
+  );
+});
+TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
+var TabsContent = React8__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Content,
+  {
+    ref,
+    className: cn(
+      `
+        mt-2 
+        focus-visible:outline-none 
+      `,
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
+var Box = ({
+  className,
+  paddingSize = "md",
+  border = false,
+  shadow = "sm",
+  variant: variant3 = "primary",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(sonner.Toaster, { position: "top-right" });
+}
+function ToastComponent({
+  type,
+  message,
+  options,
+  t
+}) {
+  const CustomIcon = React8__namespace.default.isValidElement(options?.icon) ? React8__namespace.default.cloneElement(options.icon, {
+    className: cn("text-toast-icon-default", options.icon.props.className),
+    size: 20
+  }) : null;
+  const typeIcons = {
+    success: /* @__PURE__ */ jsxRuntime.jsx(CircleCheckBig, { className: "nebula-ds text-toast-icon-default", size: 20 }),
+    error: /* @__PURE__ */ jsxRuntime.jsx(CircleX, { className: "nebula-ds text-toast-icon-error", size: 20 }),
+    info: /* @__PURE__ */ jsxRuntime.jsx(Info, { className: "nebula-ds text-toast-icon-default", size: 20 }),
+    custom: CustomIcon
+  };
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: typeIcons[type] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds flex flex-col gap-2 mr-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds flex flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nebula-ds text-toast-title text-sm font-semibold", children: message }),
+        options?.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nebula-ds text-toast-description text-sm font-medium", children: options.description })
+      ] }),
+      options?.action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds flex gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "sm",
+          variant: options.action.variant || "secondary",
+          onClick: options.action.onClick,
+          children: options.action.label
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => sonner.toast.dismiss(t), children: /* @__PURE__ */ jsxRuntime.jsx(X, { className: "nebula-ds text-toast-icon-default", size: 20 }) })
+  ] });
+}
+function success(message, options) {
+  sonner.toast.custom(
+    (t) => /* @__PURE__ */ jsxRuntime.jsx(
+      ToastComponent,
+      {
+        type: "success",
+        message,
+        options,
+        t
+      }
+    ),
+    {
+      duration: 4e3
+      // 4 seconds
+    }
+  );
+}
+function error(message, options) {
+  sonner.toast.custom(
+    (t) => /* @__PURE__ */ jsxRuntime.jsx(ToastComponent, { type: "error", message, options, t }),
+    {
+      duration: 6e3
+      // 6 seconds
+    }
+  );
+}
+function info(message, options) {
+  sonner.toast.custom(
+    (t) => /* @__PURE__ */ jsxRuntime.jsx(ToastComponent, { type: "info", message, options, t }),
+    {
+      duration: 4e3
+      // 4 seconds
+    }
+  );
+}
+function custom(message, options) {
+  sonner.toast.custom(
+    (t) => /* @__PURE__ */ jsxRuntime.jsx(ToastComponent, { type: "custom", message, options, t }),
+    {
+      duration: 4e3
+      // 4 seconds
+    }
+  );
+}
+async function promise(promise2, messages8, options) {
+  const loadingToast = sonner.toast.custom(
+    (t) => /* @__PURE__ */ jsxRuntime.jsx(
+      ToastComponent,
+      {
+        type: "info",
+        message: messages8.loading,
+        options,
+        t
+      }
+    ),
+    { duration: Infinity }
+  );
+  return promise2.then((result) => {
+    sonner.toast.dismiss(loadingToast);
+    sonner.toast.custom(
+      (t) => /* @__PURE__ */ jsxRuntime.jsx(
+        ToastComponent,
+        {
+          type: "success",
+          message: messages8.success,
+          options,
+          t
+        }
+      ),
+      { duration: 4e3 }
+    );
+    return result;
+  }).catch((error2) => {
+    sonner.toast.dismiss(loadingToast);
+    sonner.toast.custom(
+      (t) => /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { modal: false, ...props }));
+ActionBar.displayName = "ActionBar";
+var ActionBarTrigger = React8__namespace.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { ref, ...props }));
+ActionBarTrigger.displayName = "ActionBarTrigger";
+var ActionBarPortal = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { ...props });
+ActionBarPortal.displayName = "ActionBarPortal";
+var ActionBarClose = React8__namespace.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { ref, ...props }));
+ActionBarClose.displayName = "ActionBarClose";
+var ActionBarButton = React8__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        ref,
+        variant: "primary",
+        className: cn(className, "rounded-none !text-sm"),
+        tabIndex: -1,
+        ...props
+      }
+    );
+  }
+);
+ActionBarButton.displayName = "ActionBarButton";
+var ActionBarDivider = React8__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Separator2,
+    {
+      ref,
+      className: cn("bg-actionBar-divider h-6", className),
+      orientation: "vertical",
+      ...props
+    }
+  );
+});
+ActionBarDivider.displayName = "ActionBarDivider";
+var ActionBarContent = React8__namespace.forwardRef(({ className, children, portal = false, ...props }, ref) => {
+  const Comp = portal ? ActionBarPortal : React8__namespace.Fragment;
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    DialogPrimitive__namespace.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__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { className: "nebula-ds sr-only" }),
+        children
+      ]
+    }
+  ) });
+});
+ActionBarContent.displayName = "ActionBarContent";
 
 // src/tailwind.ts
 function content({ base = "./" } = {}) {
@@ -2169,11 +2623,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:
@@ -2185,6 +2641,19 @@ lucide-react/dist/esm/lucide-react.js:
    *)
 */
 
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionDescription = AccordionDescription;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTitle = AccordionTitle;
+exports.AccordionTrigger = AccordionTrigger;
+exports.ActionBar = ActionBar;
+exports.ActionBarButton = ActionBarButton;
+exports.ActionBarClose = ActionBarClose;
+exports.ActionBarContent = ActionBarContent;
+exports.ActionBarDivider = ActionBarDivider;
+exports.ActionBarPortal = ActionBarPortal;
+exports.ActionBarTrigger = ActionBarTrigger;
 exports.Alert = Alert;
 exports.AlertButton = AlertButton;
 exports.AlertDescription = AlertDescription;
@@ -2201,6 +2670,7 @@ exports.AlertTitle = AlertTitle;
 exports.Async = StyledAsync;
 exports.AsyncCreatable = StyledAsyncCreatable;
 exports.Badge = Badge;
+exports.Box = Box;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -2266,7 +2736,12 @@ exports.TableFooter = TableFooter;
 exports.TableHead = TableHead;
 exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;
 exports.Tag = Tag;
+exports.Toaster = Toaster;
 exports.Tooltip = Tooltip;
 exports.alertVariants = alertVariants;
 exports.badgeSizeEnum = badgeSizeEnum;
@@ -2280,4 +2755,5 @@ exports.separatorVariants = separatorVariants;
 exports.setNebulaLanguage = setNebulaLanguage;
 exports.tagVariantsEnum = tagVariantsEnum;
 exports.tailwind = tailwind;
+exports.toast = toast;
 exports.useNebulaI18n = useNebulaI18n;