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

package/dist/index.d.mts

@@ -13,6 +13,8 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 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';
 
 declare enum buttonVariantEnum {
     primary = "\n    bg-button-primary-background-default\n    hover:bg-button-primary-background-hover\n    active:bg-button-primary-background-active\n    focus:bg-button-primary-background-focus\n    focus:ring-button-primary-border-focus\n    text-button-primary-text\n  ",
@@ -388,6 +390,42 @@ interface TooltipProps {
 }
 declare const Tooltip: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & TooltipProps & React$1.RefAttributes<HTMLDivElement>>;
 
+interface AccordionProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare function Accordion({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Root> & {
+    collapsible?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare namespace Accordion {
+    var displayName: string;
+}
+declare function AccordionItem({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Item>): react_jsx_runtime.JSX.Element;
+declare namespace AccordionItem {
+    var displayName: string;
+}
+declare function AccordionTrigger({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare namespace AccordionTrigger {
+    var displayName: string;
+}
+declare function AccordionContent({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare namespace AccordionContent {
+    var displayName: string;
+}
+declare function AccordionTitle({ className, ...props }: React$1.HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+declare namespace AccordionTitle {
+    var displayName: string;
+}
+declare function AccordionDescription({ className, ...props }: React$1.HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
+declare namespace AccordionDescription {
+    var displayName: string;
+}
+
+declare const Tabs: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    isFitted?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
 interface Content {
     /**
      * Path to `node_modules` where `flowbite-react` is installed
@@ -504,4 +542,4 @@ declare const setNebulaLanguage: (language: Language) => void;
  */
 declare const messages: Map<Language | null | undefined, Messages>;
 
-export { Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Checkbox, type CheckboxProps, 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, type InputTextProps, Label, NebulaI18nProvider, type NebulaI18nProviderProps, Pagination, type PaginationProps, Popover, PopoverContent, PopoverTrigger, StyledSelect as Select, type CreateStyledSelectProps as SelectProps, Separator, type SeparatorProps, Space, SpaceDirectionEnum, type SpaceProps, SpaceSizeEnum, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tag, type TagProps, Tooltip, type TooltipProps, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, getNebulaLanguage, messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, useNebulaI18n };
+export { Accordion, AccordionContent, AccordionDescription, AccordionItem, type AccordionProps, AccordionTitle, AccordionTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Checkbox, type CheckboxProps, 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, type InputTextProps, Label, NebulaI18nProvider, type NebulaI18nProviderProps, Pagination, type PaginationProps, Popover, PopoverContent, PopoverTrigger, StyledSelect as Select, type CreateStyledSelectProps as SelectProps, Separator, type SeparatorProps, Space, SpaceDirectionEnum, type SpaceProps, SpaceSizeEnum, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Tooltip, type TooltipProps, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, getNebulaLanguage, messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, useNebulaI18n };

package/dist/index.d.ts

@@ -13,6 +13,8 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 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';
 
 declare enum buttonVariantEnum {
     primary = "\n    bg-button-primary-background-default\n    hover:bg-button-primary-background-hover\n    active:bg-button-primary-background-active\n    focus:bg-button-primary-background-focus\n    focus:ring-button-primary-border-focus\n    text-button-primary-text\n  ",
@@ -388,6 +390,42 @@ interface TooltipProps {
 }
 declare const Tooltip: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & TooltipProps & React$1.RefAttributes<HTMLDivElement>>;
 
+interface AccordionProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare function Accordion({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Root> & {
+    collapsible?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare namespace Accordion {
+    var displayName: string;
+}
+declare function AccordionItem({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Item>): react_jsx_runtime.JSX.Element;
+declare namespace AccordionItem {
+    var displayName: string;
+}
+declare function AccordionTrigger({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare namespace AccordionTrigger {
+    var displayName: string;
+}
+declare function AccordionContent({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare namespace AccordionContent {
+    var displayName: string;
+}
+declare function AccordionTitle({ className, ...props }: React$1.HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+declare namespace AccordionTitle {
+    var displayName: string;
+}
+declare function AccordionDescription({ className, ...props }: React$1.HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
+declare namespace AccordionDescription {
+    var displayName: string;
+}
+
+declare const Tabs: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    isFitted?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
 interface Content {
     /**
      * Path to `node_modules` where `flowbite-react` is installed
@@ -504,4 +542,4 @@ declare const setNebulaLanguage: (language: Language) => void;
  */
 declare const messages: Map<Language | null | undefined, Messages>;
 
-export { Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Checkbox, type CheckboxProps, 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, type InputTextProps, Label, NebulaI18nProvider, type NebulaI18nProviderProps, Pagination, type PaginationProps, Popover, PopoverContent, PopoverTrigger, StyledSelect as Select, type CreateStyledSelectProps as SelectProps, Separator, type SeparatorProps, Space, SpaceDirectionEnum, type SpaceProps, SpaceSizeEnum, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tag, type TagProps, Tooltip, type TooltipProps, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, getNebulaLanguage, messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, useNebulaI18n };
+export { Accordion, AccordionContent, AccordionDescription, AccordionItem, type AccordionProps, AccordionTitle, AccordionTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Checkbox, type CheckboxProps, 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, type InputTextProps, Label, NebulaI18nProvider, type NebulaI18nProviderProps, Pagination, type PaginationProps, Popover, PopoverContent, PopoverTrigger, StyledSelect as Select, type CreateStyledSelectProps as SelectProps, Separator, type SeparatorProps, Space, SpaceDirectionEnum, type SpaceProps, SpaceSizeEnum, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Tooltip, type TooltipProps, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, getNebulaLanguage, messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, useNebulaI18n };

package/dist/index.js

@@ -18,6 +18,8 @@ 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');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -53,6 +55,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
 
@@ -2147,6 +2151,197 @@ 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 bg-accordion-background rounded-3xl p-6",
+        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-neutral-200 dark:border-neutral-600",
+        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-center justify-between w-full transition-all",
+        "[&[data-state=open]>svg]:rotate-180 [&>svg]:transition-all duration-200",
+        "data-[state=open]:mb-6",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { className: "nebula-ds text-accordion-icon w-6 h-6" })
+      ] })
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...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",
+        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",
+        className
+      )
+    }
+  );
+}
+function AccordionDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      ...props,
+      className: cn(
+        "text-start !text-accordion-text-description font-normal text-sm min-h-5 mt-1",
+        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) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.List,
+    {
+      ref,
+      className: cn(
+        `
+          inline-flex 
+          items-center 
+          justify-center
+          w-full
+        `,
+        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
+          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
+          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;
 
 // src/tailwind.ts
 function content({ base = "./" } = {}) {
@@ -2185,6 +2380,12 @@ 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.Alert = Alert;
 exports.AlertButton = AlertButton;
 exports.AlertDescription = AlertDescription;
@@ -2266,6 +2467,10 @@ 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.Tooltip = Tooltip;
 exports.alertVariants = alertVariants;

package/dist/index.mjs

@@ -3,7 +3,7 @@ import React8__default, { forwardRef, createElement, createContext, useMemo, use
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -17,6 +17,8 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 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';
 
 // src/button.tsx
 
@@ -2111,6 +2113,197 @@ var Tooltip = React8.forwardRef(
   }
 );
 Tooltip.displayName = "Tooltip";
+function Accordion({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Root,
+    {
+      collapsible: true,
+      className: cn(
+        "w-full bg-accordion-background rounded-3xl p-6",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function AccordionItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.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-neutral-200 dark:border-neutral-600",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "nebula-ds flex", children: /* @__PURE__ */ jsx(
+    AccordionPrimitive.Trigger,
+    {
+      "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",
+        "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" })
+      ] })
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      "data-slot": "accordion-content",
+      className: cn(
+        "overflow-hidden transition-all",
+        "data-[state=closed]:animate-accordion-up",
+        "data-[state=open]:animate-accordion-down",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function AccordionTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      ...props,
+      className: cn(
+        "text-start !text-accordion-text-title font-semibold text-xl",
+        className
+      )
+    }
+  );
+}
+function AccordionDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...props,
+      className: cn(
+        "text-start !text-accordion-text-description font-normal text-sm min-h-5 mt-1",
+        className
+      )
+    }
+  );
+}
+Accordion.displayName = "Accordion";
+AccordionItem.displayName = "AccordionItem";
+AccordionContent.displayName = "AccordionContent";
+AccordionTrigger.displayName = "AccordionTrigger";
+AccordionTitle.displayName = "AccordionTitle";
+AccordionDescription.displayName = "AccordionDescription";
+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) => {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      ref,
+      className: cn(
+        `
+          inline-flex 
+          items-center 
+          justify-center
+          w-full
+        `,
+        className
+      ),
+      ...props
+    }
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React8.forwardRef(({ className, ...props }, ref) => {
+  const { isFitted } = React8.useContext(TabsContext);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        `
+          inline-flex
+          items-center
+          justify-center
+          whitespace-nowrap
+          px-2
+          min-h-10
+          min-w-[125px]
+          gap-2
+          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
+          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.Trigger.displayName;
+var TabsContent = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      `
+        mt-2 
+        focus-visible:outline-none 
+      `,
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/tailwind.ts
 function content({ base = "./" } = {}) {
@@ -2149,4 +2342,4 @@ lucide-react/dist/esm/lucide-react.js:
    *)
 */
 
-export { 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, Tag, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, getNebulaLanguage, messages7 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, useNebulaI18n };
+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 };

package/dist/tokens.css

@@ -0,0 +1,521 @@
+:root {
+  --primary-50: #f2f7fc;
+  --primary-100: #e1edf8;
+  --primary-200: #cadff3;
+  --primary-300: #a5cbeb;
+  --primary-400: #7ab0e0;
+  --primary-500: #5a92d7;
+  --primary-600: #4679ca;
+  --primary-700: #3c66b9;
+  --primary-800: #365497;
+  --primary-900: #324b7d;
+  --primary-950: #212e4a;
+  --success-50: #e9ffe5;
+  --success-100: #cdffc7;
+  --success-200: #9fff95;
+  --success-300: #63fe58;
+  --success-400: #32f526;
+  --success-500: #0edc06;
+  --success-600: #04b100;
+  --success-700: #068506;
+  --success-800: #0b690b;
+  --success-900: #0f5811;
+  --success-950: #013204;
+  --warning-50: #fdfbe9;
+  --warning-100: #fcf9c5;
+  --warning-200: #fbef8d;
+  --warning-300: #f8df4c;
+  --warning-400: #f3cb1c;
+  --warning-500: #e3b30f;
+  --warning-600: #c48b0a;
+  --warning-700: #9c630c;
+  --warning-800: #814f12;
+  --warning-900: #6f4115;
+  --warning-950: #402108;
+  --danger-50: #fef2f2;
+  --danger-100: #fee2e2;
+  --danger-200: #fecaca;
+  --danger-300: #fba6a6;
+  --danger-400: #f77272;
+  --danger-500: #ee4545;
+  --danger-600: #db2727;
+  --danger-700: #b81d1d;
+  --danger-800: #981c1c;
+  --danger-900: #801e1e;
+  --danger-950: #450a0a;
+  --neutral-white: #ffffff;
+  --neutral-50: #f7f8f8;
+  --neutral-100: #edeef1;
+  --neutral-200: #d7dbe0;
+  --neutral-300: #b4bbc5;
+  --neutral-400: #8c97a4;
+  --neutral-500: #6e7a89;
+  --neutral-600: #586171;
+  --neutral-700: #4c5461;
+  --neutral-800: #3e444e;
+  --neutral-900: #373c43;
+  --neutral-950: #24272d;
+  --neutral-1000: #1d1f24;
+
+  --button-primary-background-default: var(--primary-900);
+  --button-primary-background-hover: var(--primary-800);
+  --button-primary-background-active: var(--primary-950);
+  --button-primary-background-focus: var(--primary-800);
+  --button-primary-border-focus: var(--primary-300);
+  --button-primary-text: var(--neutral-50);
+
+  --button-secondary-background-default: white;
+  --button-secondary-background-hover: var(--neutral-50);
+  --button-secondary-background-active: var(--neutral-100);
+  --button-secondary-background-focus: white;
+  --button-secondary-border-default: var(--neutral-300);
+  --button-secondary-border-focus: var(--primary-300);
+  --button-secondary-text: var(--neutral-1000);
+
+  --button-ghost-background-hover: var(--neutral-100);
+  --button-ghost-background-active: var(--neutral-200);
+  --button-ghost-background-focus: var(--neutral-100);
+  --button-ghost-border-focus: var(--primary-300);
+  --button-ghost-text: var(--neutral-1000);
+
+  --button-danger-background-default: var(--danger-700);
+  --button-danger-background-hover: var(--danger-600);
+  --button-danger-background-active: var(--danger-800);
+  --button-danger-background-focus: var(--danger-600);
+  --button-danger-border-focus: var(--danger-300);
+  --button-danger-text: var(--neutral-50);
+
+  --button-disabled-background: var(--neutral-200);
+  --button-disabled-text: var(--neutral-500);
+
+  /* badge styles */
+  --badge-primary-background: var(--primary-900);
+  --badge-primary-text: var(--neutral-white);
+
+  --badge-secondary-background: var(--neutral-200);
+  --badge-secondary-text: var(--neutral-1000);
+
+  --badge-alert-background-default: var(--danger-600);
+  --badge-alert-text: var(--neutral-white);
+
+  --separator-border-default: var(--neutral-300);
+
+  --alert-success-background: var(--success-50);
+  --alert-success-border: var(--success-600);
+  --alert-success-text: var(--neutral-950);
+  --alert-success-icon: var(--success-700);
+  --alert-success-button-color: var(--primary-900);
+
+  --alert-info-background: var(--primary-50);
+  --alert-info-border: var(--primary-600);
+  --alert-info-text: var(--neutral-950);
+  --alert-info-icon: var(--primary-700);
+  --alert-info-button-color: var(--primary-900);
+
+  --alert-default-background: var(--neutral-50);
+  --alert-default-border: var(--primary-600);
+  --alert-default-text: var(--neutral-950);
+  --alert-default-icon: var(--primary-700);
+  --alert-default-button-color: var(--primary-900);
+
+  --alert-warning-background: var(--warning-50);
+  --alert-warning-border: var(--warning-600);
+  --alert-warning-text: var(--neutral-950);
+  --alert-warning-icon: var(--warning-700);
+  --alert-warning-button-color: var(--primary-900);
+
+  --alert-danger-background: var(--danger-50);
+  --alert-danger-border: var(--danger-600);
+  --alert-danger-text: var(--neutral-950);
+  --alert-danger-icon: var(--danger-700);
+  --alert-danger-button-color: var(--primary-900);
+
+  --label-text-default: var(--neutral-500);
+  --label-text-active: var(--neutral-950);
+
+  --input-background: white;
+  --input-border-default: var(--neutral-300);
+  --input-border-focus: var(--primary-950);
+  --input-text: var(--neutral-950);
+  --input-placeholder: var(--neutral-500);
+  --input-helper-text-default: var(--neutral-500);
+  --input-helper-text-error: var(--danger-500);
+
+  /* Dropdown styles */
+  --dropdown-background: white;
+  --dropdown-border: var(--neutral-200);
+  --dropdown-shadow: rgba(166, 184, 230, 0.32);
+
+  /*  Popover styles */
+  --popover-background: var(--neutral-white);
+  --popover-border-color: var(--neutral-200);
+  --popover-shadow-color: rgba(166, 184, 230, 0.32);
+
+  /* listItem styles */
+  --listItem-background: white;
+  --listItem-background-hover: var(--neutral-50);
+  --listItem-border: var(--neutral-200);
+  --listItem-text-header: var(--neutral-400);
+  --listItem-text: var(--neutral-600);
+  --listItem-text-selected: var(--neutral-950);
+  --listItem-icon: var(--neutral-600);
+  --listItem-icon-selected: var(--neutral-950);
+
+  /* Pagination styles */
+  --pagination-text: var(--neutral-600);
+  --pagination-background-default: var(--neutral-white);
+  --pagination-background-hover: var(--neutral-50);
+  --pagination-background-disabled: var(--neutral-white);
+  --pagination-border-default: var(--neutral-200);
+  --pagination-border-disabled: var(--neutral-100);
+  --pagination-icon-default: var(--neutral-600);
+  --pagination-icon-disabled: var(--neutral-300);
+
+  /* Tag styles */
+  --tag-border: var(--neutral-200);
+  --tag-icon: var(--neutral-400);
+  --tag-text: var(--neutral-600);
+  --tag-background-hover: var(--neutral-100);
+  --tag-colorIndicator-yellow: #f3cb1c;
+  --tag-colorIndicator-blue: #40c3ff;
+  --tag-colorIndicator-red: #f77272;
+  --tag-colorIndicator-green: #6ee566;
+  --tag-colorIndicator-gray: #8c97a4;
+  --tag-colorIndicator-orange: #ff7f29;
+
+  /* Table styles */
+  --table-background: white;
+  --table-border: var(--neutral-200);
+  /* --table-header-background: white; */
+  /* --table-header-border: var(--neutral-200); */
+  --table-header-text: var(--neutral-800);
+  /* --table-header-helper: var(--neutral-300); */
+  --table-cell-background-first-layer: white;
+  --table-cell-background-second-layer: var(--neutral-50);
+  --table-cell-border: var(--neutral-200);
+  --table-cell-text: var(--neutral-950);
+  --table-cell-link: var(--primary-700);
+  --table-cell-icon: var(--primary-950);
+
+  /* Input select styles */
+  /* default */
+  --inputSelect-background-default: var(--neutral-white);
+  --inputSelect-border-default: var(--neutral-300);
+  --inputSelect-text-default: var(--neutral-500);
+  --inputSelect-icon-default: var(--neutral-500);
+
+  /* Focus */
+  --inputSelect-border-focus: var(--primary-300);
+  --inputSelect-text-focus: var(--neutral-950);
+
+  /* Active */
+  --inputSelect-border-active: var(--neutral-950);
+  --inputSelect-text-active: var(--neutral-950);
+  --inputSelect-icon-active: var(--neutral-950);
+
+  /* Filled */
+  --inputSelect-border-filled: var(--primary-300);
+  --inputSelect-text-filled: var(--neutral-950);
+  --inputSelect-icon-filled: var(--neutral-950);
+
+  /* Disabled */
+  --inputSelect-background-disabled: var(--neutral-100);
+
+  /* Danger */
+  --inputSelect-border-danger: var(--danger-600);
+  --inputSelect-icon-danger: var(--danger-600);
+
+  /* Input-text styles */
+  --inputText-background-default: white;
+  --inputText-background-disabled: var(--neutral-100);
+  --inputText-border-default: var(--neutral-300);
+  --inputText-border-focus: var(--primary-300);
+  --inputText-border-active: var(--neutral-950);
+  --inputText-border-danger: var(--danger-600);
+  --inputText-border-filled: var(--neutral-950);
+  --inputText-text-default: var(--neutral-500);
+  --inputText-text-focus: var(--neutral-950);
+  /* --inputText-text-active: var(--primary-950); */
+  --inputText-text-filled: var(--neutral-950);
+  --inputText-text-disabled: var(--neutral-500);
+  --inputText-icon-default: var(--neutral-500);
+  --inputText-icon-focus: var(--neutral-950);
+  /* --inputText-icon-active: var(--primary-950); */
+  --inputText-icon-filled: var(--neutral-950);
+  --inputText-icon-danger: var(--danger-600);
+  --inputText-icon-disabled: var(--neutral-500);
+
+  /* Dialog styles */
+  --dialog-background-default: white;
+  --dialog-background-overlay: rgba(0, 0, 0, 0.5);
+  --dialog-title: var(--primary-950);
+  --dialog-text: var(--neutral-600);
+  --dialog-icon: var(--primary-950);
+
+  /* Checkbox styles */
+  --checkbox-unselected-background-default: white;
+  --checkbox-unselected-background-hover: var(--neutral-50);
+  --checkbox-unselected-background-focus: var(--neutral-50);
+  --checkbox-unselected-background-disabled: var(--neutral-200);
+  --checkbox-unselected-border-default: var(--neutral-200);
+  --checkbox-unselected-border-hover: var(--neutral-400);
+  --checkbox-unselected-border-focus: var(--neutral-400);
+  --checkbox-unselected-border-disabled: var(--neutral-300);
+  --checkbox-unselected-border-external-focus: var(--primary-300);
+  --checkbox-selected-background-default: var(--primary-800);
+  --checkbox-selected-background-hover: var(--primary-900);
+  --checkbox-selected-background-focus: var(--primary-900);
+  --checkbox-selected-background-disabled: var(--neutral-200);
+  --checkbox-selected-border-focus: var(--primary-800);
+  --checkbox-selected-icon-default: white;
+  --checkbox-selected-icon-disabled: var(--neutral-500);
+
+  /* Drawer styles */
+
+  --drawer-header-background: white;
+  --drawer-header-border: var(--neutral-100);
+  --drawer-header-title: var(--neutral-950);
+  --drawer-header-description: var(--neutral-600);
+  --drawer-footer-background: white;
+  --drawer-footer-border: var(--neutral-100);
+  --drawer-footer-label: var(--neutral-950);
+  --drawer-body-background: white;
+  --drawer-body-text: var(--neutral-950);
+  --drawer-background-overlay: rgba(0, 0, 0, 0.5);
+
+  /* Breadcrumb styles */
+  --breadcrumb-text-default: var(--neutral-600);
+  --breadcrumb-text-hover: var(--neutral-950);
+  --breadcrumb-text-active: var(--primary-700);
+  --breadcrumb-ellipsis-bg-hover: var(--neutral-100);
+
+  /* Switch styles */
+  --switch-background-off-default: var(--neutral-200);
+  --switch-background-off-hover: var(--neutral-300);
+  --switch-background-off-focus: var(--neutral-300);
+  --switch-background-off-disabled: var(--neutral-200);
+  --switch-background-on-default: var(--primary-800);
+  --switch-background-on-hover: var(--primary-900);
+  --switch-background-on-focus: var(--primary-900);
+  --switch-background-on-disabled: var(--primary-800);
+  --switch-ring: var(--primary-300);
+  --switch-circle: white;
+
+  /* Tooltip styles */
+  --tooltip-background: var(--neutral-950);
+  --tooltip-text: var(--neutral-50);
+
+  /* Tabs styles */
+  --tabs-border-default: var(--neutral-200);
+  --tabs-border-active: var(--primary-700);
+  --tabs-text-default: var(--neutral-600);
+  --tabs-text-active: var(--neutral-950);
+}
+
+.dark {
+  --button-primary-background-default: var(--primary-200);
+  --button-primary-background-hover: var(--primary-300);
+  --button-primary-background-active: var(--primary-400);
+  --button-primary-background-focus: var(--primary-300);
+  --button-primary-border-focus: var(--primary-500);
+  --button-primary-text: var(--neutral-950);
+
+  --button-secondary-background-default: var(--neutral-950);
+  --button-secondary-background-hover: var(--neutral-900);
+  --button-secondary-background-active: var(--neutral-800);
+  --button-secondary-background-focus: var(--neutral-950);
+  --button-secondary-border-default: var(--neutral-500);
+  --button-secondary-border-focus: var(--primary-500);
+  --button-secondary-text: var(--neutral-200);
+
+  --button-ghost-background-hover: var(--neutral-800);
+  --button-ghost-background-active: var(--neutral-900);
+  --button-ghost-background-focus: var(--neutral-800);
+  --button-ghost-border-focus: var(--primary-500);
+  --button-ghost-text: var(--neutral-200);
+
+  --button-danger-background-default: var(--danger-300);
+  --button-danger-background-hover: var(--danger-400);
+  --button-danger-background-active: var(--danger-500);
+  --button-danger-background-focus: var(--danger-400);
+  --button-danger-border-focus: var(--danger-300);
+  --button-danger-text: var(--neutral-950);
+
+  --button-disabled-background: var(--neutral-800);
+  --button-disabled-text: var(--neutral-400);
+
+  /* badge styles */
+  --badge-primary-background: var(--primary-200);
+  --badge-primary-text: var(--neutral-950);
+
+  --badge-secondary-background: var(--neutral-200);
+  --badge-secondary-text: var(--neutral-950);
+
+  --badge-alert-background-default: var(--danger-600);
+  --badge-alert-text: var(--neutral-white);
+
+  /* Pagination styles */
+  --pagination-text: var(--neutral-600);
+  --pagination-background-hover: var(--neutral-800);
+  --pagination-background-default: var(--neutral-950);
+  --pagination-border-default: var(--neutral-800);
+  --pagination-icon-default: var(--neutral-500);
+  --pagination-icon-disabled: var(--neutral-800);
+  --pagination-background-disabled: var(--neutral-950);
+  --pagination-border-disabled: var(--neutral-900);
+
+  /* Dropdown styles */
+  --dropdown-background: var(--neutral-900);
+  --dropdown-border: var(--neutral-800);
+  --dropdown-shadow: rgba(0, 0, 0, 0.5);
+
+  /* listItem styles */
+  --listItem-background: var(--neutral-900);
+  --listItem-background-hover: var(--neutral-800);
+  --listItem-border: var(--neutral-800);
+  --listItem-text-header: var(--neutral-500);
+  --listItem-text: var(--neutral-300);
+  --listItem-text-selected: var(--neutral-200);
+  --listItem-icon: var(--neutral-300);
+  --listItem-icon-selected: var(--neutral-200);
+
+  /* Tag styles */
+  --tag-border: var(--neutral-800);
+  --tag-icon: var(--neutral-500);
+  --tag-text: var(--neutral-200);
+  --tag-background-hover: var(--neutral-800);
+  --tag-colorIndicator-yellow: #f3cb1c;
+  --tag-colorIndicator-blue: #40c3ff;
+  --tag-colorIndicator-red: #f77272;
+  --tag-colorIndicator-green: #6ee566;
+  --tag-colorIndicator-gray: #8c97a4;
+  --tag-colorIndicator-orange: #ff7f29;
+
+  /* Table styles */
+  --table-background: var(--neutral-900);
+  --table-border: var(--neutral-800);
+  /* --table-header-background: white; */
+  /* --table-header-border: var(--neutral-200); */
+  --table-header-text: var(--neutral-400);
+  /* --table-header-helper: var(--neutral-300); */
+  --table-cell-background-first-layer: var(--neutral-950);
+  --table-cell-background-second-layer: var(--neutral-1000);
+  --table-cell-border: var(--neutral-800);
+  --table-cell-text: var(--neutral-200);
+  --table-cell-link: var(--primary-300);
+  --table-cell-icon: var(--primary-500);
+
+  /* Input select styles */
+  /* Default */
+  --inputSelect-background-default: var(--neutral-900);
+  --inputSelect-border-default: var(--neutral-500);
+  --inputSelect-text-default: var(--neutral-500);
+  --inputSelect-icon-default: var(--neutral-500);
+
+  /* Focus */
+  --inputSelect-border-focus: var(--primary-400);
+  --inputSelect-text-focus: var(--neutral-200);
+
+  /* Active */
+  --inputSelect-border-active: var(--primary-200);
+  --inputSelect-text-active: var(--neutral-200);
+  --inputSelect-icon-active: var(--neutral-200);
+
+  /* Filled */
+  --inputSelect-border-filled: var(--primary-500);
+  --inputSelect-text-filled: var(--neutral-200);
+  --inputSelect-icon-filled: var(--neutral-200);
+
+  /* Disabled */
+  --inputSelect-background-disabled: var(--primary-500);
+
+    /* Danger */
+  --inputSelect-border-danger: var(--danger-300);
+  --inputSelect-icon-danger: var(--danger-300);
+
+  /* Input-text styles */
+  --inputText-background-default: var(--neutral-900);
+  --inputText-background-disabled: var(--neutral-700);
+  --inputText-border-default: var(--neutral-500);
+  --inputText-border-focus: var(--primary-300);
+  --inputText-border-active: var(--neutral-200);
+  --inputText-border-danger: var(--danger-300);
+  --inputText-border-filled: var(--neutral-200);
+  --inputText-text-default: var(--neutral-500);
+  --inputText-text-focus: var(--neutral-200);
+  /* --inputText-text-active: var(--primary-950); */
+  --inputText-text-filled: var(--neutral-200);
+  --inputText-text-disabled: var(--neutral-400);
+  --inputText-icon-default: var(--neutral-500);
+  --inputText-icon-focus: var(--primary-950);
+  /* --inputText-icon-active: var(--primary-950); */
+  --inputText-icon-filled: var(--neutral-200);
+  --inputText-icon-danger: var(--danger-300);
+  --inputText-icon-disabled: var(--neutral-400);
+
+  /* Dialog styles */
+  --dialog-background-default: var(--neutral-950);
+  --dialog-background-overlay: rgba(0, 0, 0, 0.5);
+  --dialog-title: var(--neutral-200);
+  --dialog-text: var(--neutral-400);
+  --dialog-icon: var(--neutral-200);
+
+  /* Checkbox styles */
+  --checkbox-unselected-background-default: var(--neutral-900);
+  --checkbox-unselected-background-hover: var(--neutral-800);
+  --checkbox-unselected-background-focus: var(--neutral-800);
+  --checkbox-unselected-background-disabled: var(--neutral-500);
+  --checkbox-unselected-border-default: var(--neutral-800);
+  --checkbox-unselected-border-hover: var(--neutral-500);
+  --checkbox-unselected-border-focus: var(--neutral-500);
+  --checkbox-unselected-border-external-focus: var(--primary-300);
+  --checkbox-unselected-border-disabled: var(--neutral-700);
+  --checkbox-selected-background-default: var(--primary-100);
+  --checkbox-selected-background-hover: var(--primary-200);
+  --checkbox-selected-background-focus: var(--primary-200);
+  --checkbox-selected-background-disabled: var(--neutral-500);
+  --checkbox-selected-border-focus: var(--primary-100);
+  --checkbox-selected-icon-default: var(--neutral-950);
+  --checkbox-selected-icon-disabled: var(--neutral-800);
+
+  /* Drawer styles */
+
+  --drawer-header-background: var(--neutral-900);
+  --drawer-header-border: var(--neutral-800);
+  --drawer-header-title: var(--neutral-200);
+  --drawer-header-description: var(--neutral-400);
+  --drawer-footer-background: var(--neutral-900);
+  --drawer-footer-border: var(--neutral-800);
+  --drawer-footer-label: var(--neutral-200);
+  --drawer-body-background: var(--neutral-900);
+  --drawer-body-text: var(--neutral-200);
+  --drawer-background-overlay: rgba(0, 0, 0, 0.5);
+
+  /* Breadcrumb styles */
+  --breadcrumb-text-default: var(--neutral-400);
+  --breadcrumb-text-hover: var(--neutral-50);
+  --breadcrumb-text-active: var(--primary-500);
+  --breadcrumb-ellipsis-bg-hover: var(--neutral-800);
+
+  /* Switch styles */
+  --switch-background-off-default: var(--neutral-800);
+  --switch-background-off-hover: var(--neutral-700);
+  --switch-background-off-focus: var(--neutral-700);
+  --switch-background-off-disabled: var(--neutral-800);
+  --switch-background-on-default: var(--primary-500);
+  --switch-background-on-hover: var(--primary-400);
+  --switch-background-on-focus: var(--primary-400);
+  --switch-background-on-disabled: var(--primary-500);
+  --switch-ring: var(--primary-100);
+  --switch-circle: white;
+
+  /* Tooltip styles */
+  --tooltip-background: var(--neutral-700);
+  --tooltip-text: var(--neutral-50);
+
+  /* Tabs styles */
+  --tabs-border-default: var(--neutral-800);
+  --tabs-border-active: var(--primary-200);
+  --tabs-text-default: var(--neutral-500);
+  --tabs-text-active: var(--neutral-200);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "0.0.1-alpha.24",
+  "version": "0.0.1-alpha.25",
   "description": "React components",
   "publishConfig": {
     "access": "public"
@@ -37,6 +37,7 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.7",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.7",
@@ -46,6 +47,7 @@
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-switch": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toggle": "^1.1.8",
     "@radix-ui/react-tooltip": "^1.2.6",
     "class-variance-authority": "^0.7.1",