@dito-uai/components 5.0.0-alpha16 → 5.0.0-alpha17

package/dist/index.cjs

@@ -7,7 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var RadixProgress = require('@radix-ui/react-progress');
-var AccordionPrimitive = require('@radix-ui/react-accordion');
+var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var icons = require('@dito-uai/icons');
 var reactDropdownMenu = require('@radix-ui/react-dropdown-menu');
 var reactCheckbox = require('@radix-ui/react-checkbox');
@@ -35,7 +35,7 @@ function _interopNamespace(e) {
 var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 var RadixProgress__namespace = /*#__PURE__*/_interopNamespace(RadixProgress);
-var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
+var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 
 // src/ui/avatar.tsx
@@ -846,33 +846,23 @@ Toggle.displayName = "Toggle";
 var toggle_default = Toggle;
 var collapse = ce({
   slots: {
-    collapseWrapper: "gap-1 rounded-lg border p-1",
     item: "mb-1 rounded-lg border-0 last:mb-0",
     trigger: "[&[data-state=open]]:rounded-t-m [&[data-state=open]]:bg-secondary-indigo-100 [&[data-state=closed]]:rounded-m flex h-7 w-full items-center border-0 p-1 text-left transition-all hover:bg-neutral-100 [&[data-disabled]]:cursor-not-allowed [&[data-disabled]]:bg-neutral-200 [&[data-disabled]]:text-neutral-400 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]]:hover:bg-neutral-100",
     triggerIcon: "size-3 transition-transform duration-200",
     content: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down rounded-b-m overflow-hidden border transition-all"
   }
 });
-var { collapseWrapper, item, trigger, triggerIcon, content } = collapse();
-var Collapse = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  AccordionPrimitive__namespace.Root,
-  {
-    ref,
-    className: collapseWrapper({ className }),
-    ...props
-  }
-));
-var CollapseItem = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  AccordionPrimitive__namespace.Item,
+var { trigger, item, triggerIcon, content } = collapse();
+var CollapsibleRoot = React4__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  CollapsiblePrimitive__namespace.Root,
   {
     ref,
     className: item({ className }),
     ...props
   }
 ));
-CollapseItem.displayName = "CollapseItem";
-var CollapseTrigger = React4__namespace.forwardRef(({ className, children, triggerClassName, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
-  AccordionPrimitive__namespace.Trigger,
+var CollapsibleTrigger2 = React4__namespace.default.forwardRef(({ className, triggerClassName, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  CollapsiblePrimitive__namespace.CollapsibleTrigger,
   {
     ref,
     className: trigger({ className: triggerClassName }),
@@ -882,15 +872,22 @@ var CollapseTrigger = React4__namespace.forwardRef(({ className, children, trigg
       /* @__PURE__ */ jsxRuntime.jsx(icons.IconOutlineChevronDown, { className: triggerIcon() })
     ]
   }
-) }));
-CollapseTrigger.displayName = AccordionPrimitive__namespace.Trigger.displayName;
-var CollapseContent = React4__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Content, { ref, className: content(), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-1 py-2", className), children }) }));
-CollapseContent.displayName = AccordionPrimitive__namespace.Content.displayName;
-var CollapseWithStatics = Collapse;
-CollapseWithStatics.Item = CollapseItem;
-CollapseWithStatics.Trigger = CollapseTrigger;
-CollapseWithStatics.Content = CollapseContent;
-var collapse_default = CollapseWithStatics;
+));
+var CollapsibleContent2 = React4__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  CollapsiblePrimitive__namespace.CollapsibleContent,
+  {
+    ref,
+    className: content(),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-1 py-2", className), children })
+  }
+));
+var Collapsible = {
+  Item: CollapsibleRoot,
+  Trigger: CollapsibleTrigger2,
+  Content: CollapsibleContent2
+};
+var collapsible_default = Collapsible;
 var indicatorVariants = ce({
   base: "text-medium flex h-3 items-center justify-center rounded-sm border border-neutral-200 px-1 py-0.5 [&_svg]:-ml-0.5 [&_svg]:w-2",
   variants: {
@@ -1365,7 +1362,7 @@ var Group2 = React4__namespace.default.forwardRef(({ className, disabled, ...pro
   );
 });
 Group2.displayName = RadioGroupPrimitive__namespace.Root.displayName;
-var Item6 = React4__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Item5 = React4__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   RadioGroupPrimitive__namespace.Item,
   {
     ref,
@@ -1377,10 +1374,10 @@ var Item6 = React4__namespace.default.forwardRef(({ className, ...props }, ref)
     children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "text-primary flex items-center justify-center group-disabled:text-neutral-300", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "fill-primary size-[12px] group-disabled:fill-neutral-300" }) })
   }
 ));
-Item6.displayName = RadioGroupPrimitive__namespace.Item.displayName;
+Item5.displayName = RadioGroupPrimitive__namespace.Item.displayName;
 var Radio = {
   Group: Group2,
-  Item: Item6
+  Item: Item5
 };
 var radio_default = Radio;
 var searchVariants = ce({
@@ -1498,7 +1495,7 @@ exports.Button = button_default;
 exports.Card = card_default;
 exports.Checkbox = checkbox_default;
 exports.Chips = chips_default;
-exports.Collapse = collapse_default;
+exports.Collapsible = collapsible_default;
 exports.FormItem = form_item_default;
 exports.Indicator = indicator_default;
 exports.Input = input_default;

package/dist/index.d.cts

@@ -6,7 +6,7 @@ import React__default, { HTMLAttributes, PropsWithChildren } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { VariantProps as VariantProps$1 } from 'class-variance-authority';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as _radix_ui_react_checkbox from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 
@@ -1097,18 +1097,13 @@ declare const Toggle: React.ForwardRefExoticComponent<HTMLAttributes<HTMLInputEl
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 
-type CollapseProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
-declare const CollapseItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CollapseTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
-    triggerClassName?: string;
-} & React.RefAttributes<HTMLButtonElement>>;
-declare const CollapseContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type CollapseType = React.ForwardRefExoticComponent<CollapseProps> & {
-    Item: typeof CollapseItem;
-    Trigger: typeof CollapseTrigger;
-    Content: typeof CollapseContent;
+declare const Collapsible: {
+    Item: React__default.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+    Trigger: React__default.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleTriggerProps & React__default.RefAttributes<HTMLButtonElement>, "ref"> & {
+        triggerClassName?: string;
+    } & React__default.RefAttributes<HTMLButtonElement>>;
+    Content: React__default.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 };
-declare const CollapseWithStatics: CollapseType;
 
 declare const Indicator: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & VariantProps<tailwind_variants.TVReturnType<{
     status: {
@@ -2017,4 +2012,4 @@ declare const Search: React.ForwardRefExoticComponent<React.InputHTMLAttributes<
     scope?: DropdownProps;
 } & React.RefAttributes<HTMLInputElement>>;
 
-export { Avatar, Badge, Button, Card, Checkbox, Chips, CollapseWithStatics as Collapse, FormItem, Indicator, Input, InputDescription, Label, Progress, ProgressBar, Radio, Scope, Search, Sheet, Status, Text, Textarea, Toggle };
+export { Avatar, Badge, Button, Card, Checkbox, Chips, Collapsible, FormItem, Indicator, Input, InputDescription, Label, Progress, ProgressBar, Radio, Scope, Search, Sheet, Status, Text, Textarea, Toggle };

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import React__default, { HTMLAttributes, PropsWithChildren } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { VariantProps as VariantProps$1 } from 'class-variance-authority';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as _radix_ui_react_checkbox from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 
@@ -1097,18 +1097,13 @@ declare const Toggle: React.ForwardRefExoticComponent<HTMLAttributes<HTMLInputEl
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 
-type CollapseProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
-declare const CollapseItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CollapseTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
-    triggerClassName?: string;
-} & React.RefAttributes<HTMLButtonElement>>;
-declare const CollapseContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type CollapseType = React.ForwardRefExoticComponent<CollapseProps> & {
-    Item: typeof CollapseItem;
-    Trigger: typeof CollapseTrigger;
-    Content: typeof CollapseContent;
+declare const Collapsible: {
+    Item: React__default.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+    Trigger: React__default.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleTriggerProps & React__default.RefAttributes<HTMLButtonElement>, "ref"> & {
+        triggerClassName?: string;
+    } & React__default.RefAttributes<HTMLButtonElement>>;
+    Content: React__default.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 };
-declare const CollapseWithStatics: CollapseType;
 
 declare const Indicator: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & VariantProps<tailwind_variants.TVReturnType<{
     status: {
@@ -2017,4 +2012,4 @@ declare const Search: React.ForwardRefExoticComponent<React.InputHTMLAttributes<
     scope?: DropdownProps;
 } & React.RefAttributes<HTMLInputElement>>;
 
-export { Avatar, Badge, Button, Card, Checkbox, Chips, CollapseWithStatics as Collapse, FormItem, Indicator, Input, InputDescription, Label, Progress, ProgressBar, Radio, Scope, Search, Sheet, Status, Text, Textarea, Toggle };
+export { Avatar, Badge, Button, Card, Checkbox, Chips, Collapsible, FormItem, Indicator, Input, InputDescription, Label, Progress, ProgressBar, Radio, Scope, Search, Sheet, Status, Text, Textarea, Toggle };

package/dist/index.js

@@ -7,7 +7,7 @@ import { clsx } from 'clsx';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as RadixProgress from '@radix-ui/react-progress';
 import { Root as Root$2, Indicator } from '@radix-ui/react-progress';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { IconOutlineChevronDown, IconOutlineClose, IconOutlineLine, IconOutlineCheck, IconOutlineSearch, IconOutlineArrowUp, IconOutlineArrowDown, IconOutlineMinus } from '@dito-uai/icons';
 import { Root, Trigger, Portal, Content, Item } from '@radix-ui/react-dropdown-menu';
 import { Root as Root$1 } from '@radix-ui/react-checkbox';
@@ -822,33 +822,23 @@ Toggle.displayName = "Toggle";
 var toggle_default = Toggle;
 var collapse = ce({
   slots: {
-    collapseWrapper: "gap-1 rounded-lg border p-1",
     item: "mb-1 rounded-lg border-0 last:mb-0",
     trigger: "[&[data-state=open]]:rounded-t-m [&[data-state=open]]:bg-secondary-indigo-100 [&[data-state=closed]]:rounded-m flex h-7 w-full items-center border-0 p-1 text-left transition-all hover:bg-neutral-100 [&[data-disabled]]:cursor-not-allowed [&[data-disabled]]:bg-neutral-200 [&[data-disabled]]:text-neutral-400 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]]:hover:bg-neutral-100",
     triggerIcon: "size-3 transition-transform duration-200",
     content: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down rounded-b-m overflow-hidden border transition-all"
   }
 });
-var { collapseWrapper, item, trigger, triggerIcon, content } = collapse();
-var Collapse = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AccordionPrimitive.Root,
-  {
-    ref,
-    className: collapseWrapper({ className }),
-    ...props
-  }
-));
-var CollapseItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AccordionPrimitive.Item,
+var { trigger, item, triggerIcon, content } = collapse();
+var CollapsibleRoot = React4__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CollapsiblePrimitive.Root,
   {
     ref,
     className: item({ className }),
     ...props
   }
 ));
-CollapseItem.displayName = "CollapseItem";
-var CollapseTrigger = React4.forwardRef(({ className, children, triggerClassName, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
-  AccordionPrimitive.Trigger,
+var CollapsibleTrigger2 = React4__default.forwardRef(({ className, triggerClassName, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  CollapsiblePrimitive.CollapsibleTrigger,
   {
     ref,
     className: trigger({ className: triggerClassName }),
@@ -858,15 +848,22 @@ var CollapseTrigger = React4.forwardRef(({ className, children, triggerClassName
       /* @__PURE__ */ jsx(IconOutlineChevronDown, { className: triggerIcon() })
     ]
   }
-) }));
-CollapseTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var CollapseContent = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, { ref, className: content(), ...props, children: /* @__PURE__ */ jsx("div", { className: cn("px-1 py-2", className), children }) }));
-CollapseContent.displayName = AccordionPrimitive.Content.displayName;
-var CollapseWithStatics = Collapse;
-CollapseWithStatics.Item = CollapseItem;
-CollapseWithStatics.Trigger = CollapseTrigger;
-CollapseWithStatics.Content = CollapseContent;
-var collapse_default = CollapseWithStatics;
+));
+var CollapsibleContent2 = React4__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  CollapsiblePrimitive.CollapsibleContent,
+  {
+    ref,
+    className: content(),
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: cn("px-1 py-2", className), children })
+  }
+));
+var Collapsible = {
+  Item: CollapsibleRoot,
+  Trigger: CollapsibleTrigger2,
+  Content: CollapsibleContent2
+};
+var collapsible_default = Collapsible;
 var indicatorVariants = ce({
   base: "text-medium flex h-3 items-center justify-center rounded-sm border border-neutral-200 px-1 py-0.5 [&_svg]:-ml-0.5 [&_svg]:w-2",
   variants: {
@@ -1341,7 +1338,7 @@ var Group2 = React4__default.forwardRef(({ className, disabled, ...props }, ref)
   );
 });
 Group2.displayName = RadioGroupPrimitive.Root.displayName;
-var Item6 = React4__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Item5 = React4__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   RadioGroupPrimitive.Item,
   {
     ref,
@@ -1353,10 +1350,10 @@ var Item6 = React4__default.forwardRef(({ className, ...props }, ref) => /* @__P
     children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "text-primary flex items-center justify-center group-disabled:text-neutral-300", children: /* @__PURE__ */ jsx(Circle$1, { className: "fill-primary size-[12px] group-disabled:fill-neutral-300" }) })
   }
 ));
-Item6.displayName = RadioGroupPrimitive.Item.displayName;
+Item5.displayName = RadioGroupPrimitive.Item.displayName;
 var Radio = {
   Group: Group2,
-  Item: Item6
+  Item: Item5
 };
 var radio_default = Radio;
 var searchVariants = ce({
@@ -1468,4 +1465,4 @@ var ScopeSelect = ({
 Search.displayName = "Search";
 var search_default = Search;
 
-export { avatar_default as Avatar, badge_default as Badge, button_default as Button, card_default as Card, checkbox_default as Checkbox, chips_default as Chips, collapse_default as Collapse, form_item_default as FormItem, indicator_default as Indicator, input_default as Input, input_description_default as InputDescription, label_default as Label, progress_default as Progress, progress_bar_default as ProgressBar, radio_default as Radio, scope_default as Scope, search_default as Search, sheets_default as Sheet, status_default as Status, text_default as Text, textarea_default as Textarea, toggle_default as Toggle };
+export { avatar_default as Avatar, badge_default as Badge, button_default as Button, card_default as Card, checkbox_default as Checkbox, chips_default as Chips, collapsible_default as Collapsible, form_item_default as FormItem, indicator_default as Indicator, input_default as Input, input_description_default as InputDescription, label_default as Label, progress_default as Progress, progress_bar_default as ProgressBar, radio_default as Radio, scope_default as Scope, search_default as Search, sheets_default as Sheet, status_default as Status, text_default as Text, textarea_default as Textarea, toggle_default as Toggle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dito-uai/components",
-  "version": "5.0.0-alpha16",
+  "version": "5.0.0-alpha17",
   "descriptin": "Dito's design system component library, made in TSX",
   "repository": "git+https://github.com/ditointernet/dito-uai.git",
   "publishConfig": {
@@ -58,6 +58,7 @@
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-progress": "^1.1.0",
@@ -88,4 +89,4 @@
     "react-hook-form": "^7.52.1",
     "zod": "^3.23.8"
   }
-}
+}