@validationcloud/fractal-ui 1.54.0 → 1.55.0

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,14 @@
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
+import { default as React } from 'react';
+export declare const Collapsible: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * CollapsibleContent is a wrapper around Radix's Collapsible.Content component.
+ * It applies project-specific animations to the content based on the orientation.
+ * @param orientation - The orientation of the collapsible content.
+ */
+type CollapsibleContentProps = {
+    orientation?: 'horizontal' | 'vertical';
+} & React.ComponentProps<typeof CollapsiblePrimitive.Content>;
+export declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsibleContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { useChartInstance, type UseChartInstanceProps, type UseChartInstanceRetu
 export { MavrikChart, type MavrikChartProps } from './components/echarts-renderer/mavrik-chart';
 export { MAVRIK_THEME, MAVRIK_THEME_HORIZONTAL } from './components/echarts-renderer/mavrik-theme';
 export { ClientModal } from './components/client-modal/client-modal';
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './components/collapsible/collapsible';
 export { CopyButton } from './components/copy-button/copy-button';
 export { DecoratedIcon } from './components/decorated-icon/decorated-icon';
 export { DropdownMenu, DropdownMenuItem } from './components/dropdown-menu/dropdown-menu';

package/dist/index.js

@@ -2,74 +2,78 @@ import { AnimatedLoader as t } from "./src/components/animated-loader/animated-l
 import { Badge as p } from "./src/components/badge/badge.js";
 import { Box as x } from "./src/components/box/box.js";
 import { Button as n } from "./src/components/button/button.js";
-import { EChartsRenderer as i } from "./src/components/echarts-renderer/echarts-renderer.js";
-import { EChartsThemeOption as u, isEChartsThemeOption as h } from "./src/components/echarts-renderer/echarts-theme-option.js";
-import { EChartsChartOption as c, isEChartsChartOption as s } from "./src/components/echarts-renderer/echarts-chart-option.js";
-import { useChartInstance as I } from "./src/components/echarts-renderer/use-chart-instance.js";
-import { MavrikChart as T } from "./src/components/echarts-renderer/mavrik-chart.js";
-import { MAVRIK_THEME as B, MAVRIK_THEME_HORIZONTAL as S } from "./src/components/echarts-renderer/mavrik-theme.js";
+import { EChartsRenderer as l } from "./src/components/echarts-renderer/echarts-renderer.js";
+import { EChartsThemeOption as C, isEChartsThemeOption as d } from "./src/components/echarts-renderer/echarts-theme-option.js";
+import { EChartsChartOption as u, isEChartsChartOption as h } from "./src/components/echarts-renderer/echarts-chart-option.js";
+import { useChartInstance as T } from "./src/components/echarts-renderer/use-chart-instance.js";
+import { MavrikChart as M } from "./src/components/echarts-renderer/mavrik-chart.js";
+import { MAVRIK_THEME as g, MAVRIK_THEME_HORIZONTAL as B } from "./src/components/echarts-renderer/mavrik-theme.js";
 import { ClientModal as w } from "./src/components/client-modal/client-modal.js";
-import { CopyButton as A } from "./src/components/copy-button/copy-button.js";
-import { DecoratedIcon as P } from "./src/components/decorated-icon/decorated-icon.js";
-import { DropdownMenu as v, DropdownMenuItem as H } from "./src/components/dropdown-menu/dropdown-menu.js";
-import { ErrorBoundary as _ } from "./src/components/error-boundary/error-boundary.js";
-import { ScrollArea as y } from "./src/components/scroll-area/index.js";
-import { Icon as N } from "./src/components/icon/icon.js";
-import { IconButton as V } from "./src/components/icon-button/icon-button.js";
-import { InputButton as F } from "./src/components/input-button/input-button.js";
-import { MountSvgSprite as j } from "./src/components/mount-svg-sprite/mount-svg-sprite.js";
-import { NotFoundComponent as z } from "./src/components/not-found-component/not-found-component.js";
-import { PagePadding as J } from "./src/components/page-padding/page-padding.js";
-import { ProtocolLogo as W } from "./src/components/protocol-logo/protocol-logo.js";
-import { Select as Y, SelectItem as $ } from "./src/components/select/select.js";
-import { Skeleton as ro } from "./src/components/skeleton/skeleton.js";
-import { Switch as eo } from "./src/components/switch/switch.js";
-import { TextInput as mo } from "./src/components/text-input/text-input.js";
-import { Tooltip as fo } from "./src/components/tooltip/tooltip.js";
-import { TooltipProvider as ao } from "./src/components/tooltip-provider/tooltip-provider.js";
-import { TouchTarget as uo } from "./src/components/touch-target/touch-target.js";
-import { twMerge as lo } from "./src/lib/tailwind-merge.js";
-import { UserDropdown as so } from "./src/components/user-dropdown/user-dropdown.js";
-import { UserDropdownMobile as Io } from "./src/components/user-dropdown-mobile/user-dropdown-mobile.js";
-import { useScrollToBottom as To } from "./src/hooks/use-scroll-to-bottom.js";
+import { Collapsible as A, CollapsibleContent as D, CollapsibleTrigger as b } from "./src/components/collapsible/collapsible.js";
+import { CopyButton as R } from "./src/components/copy-button/copy-button.js";
+import { DecoratedIcon as H } from "./src/components/decorated-icon/decorated-icon.js";
+import { DropdownMenu as _, DropdownMenuItem as k } from "./src/components/dropdown-menu/dropdown-menu.js";
+import { ErrorBoundary as K } from "./src/components/error-boundary/error-boundary.js";
+import { ScrollArea as U } from "./src/components/scroll-area/index.js";
+import { Icon as F } from "./src/components/icon/icon.js";
+import { IconButton as j } from "./src/components/icon-button/icon-button.js";
+import { InputButton as z } from "./src/components/input-button/input-button.js";
+import { MountSvgSprite as J } from "./src/components/mount-svg-sprite/mount-svg-sprite.js";
+import { NotFoundComponent as W } from "./src/components/not-found-component/not-found-component.js";
+import { PagePadding as Y } from "./src/components/page-padding/page-padding.js";
+import { ProtocolLogo as oo } from "./src/components/protocol-logo/protocol-logo.js";
+import { Select as to, SelectItem as eo } from "./src/components/select/select.js";
+import { Skeleton as mo } from "./src/components/skeleton/skeleton.js";
+import { Switch as fo } from "./src/components/switch/switch.js";
+import { TextInput as ao } from "./src/components/text-input/text-input.js";
+import { Tooltip as io } from "./src/components/tooltip/tooltip.js";
+import { TooltipProvider as so } from "./src/components/tooltip-provider/tooltip-provider.js";
+import { TouchTarget as ho } from "./src/components/touch-target/touch-target.js";
+import { twMerge as To } from "./src/lib/tailwind-merge.js";
+import { UserDropdown as Mo } from "./src/components/user-dropdown/user-dropdown.js";
+import { UserDropdownMobile as go } from "./src/components/user-dropdown-mobile/user-dropdown-mobile.js";
+import { useScrollToBottom as So } from "./src/hooks/use-scroll-to-bottom.js";
 export {
   t as AnimatedLoader,
   p as Badge,
   x as Box,
   n as Button,
   w as ClientModal,
-  A as CopyButton,
-  P as DecoratedIcon,
-  v as DropdownMenu,
-  H as DropdownMenuItem,
-  c as EChartsChartOption,
-  i as EChartsRenderer,
-  u as EChartsThemeOption,
-  _ as ErrorBoundary,
-  N as Icon,
-  V as IconButton,
-  F as InputButton,
-  B as MAVRIK_THEME,
-  S as MAVRIK_THEME_HORIZONTAL,
-  T as MavrikChart,
-  j as MountSvgSprite,
-  z as NotFoundComponent,
-  J as PagePadding,
-  W as ProtocolLogo,
-  y as ScrollArea,
-  Y as Select,
-  $ as SelectItem,
-  ro as Skeleton,
-  eo as Switch,
-  mo as TextInput,
-  fo as Tooltip,
-  ao as TooltipProvider,
-  uo as TouchTarget,
-  so as UserDropdown,
-  Io as UserDropdownMobile,
-  s as isEChartsChartOption,
-  h as isEChartsThemeOption,
-  lo as twMerge,
-  I as useChartInstance,
-  To as useScrollToBottom
+  A as Collapsible,
+  D as CollapsibleContent,
+  b as CollapsibleTrigger,
+  R as CopyButton,
+  H as DecoratedIcon,
+  _ as DropdownMenu,
+  k as DropdownMenuItem,
+  u as EChartsChartOption,
+  l as EChartsRenderer,
+  C as EChartsThemeOption,
+  K as ErrorBoundary,
+  F as Icon,
+  j as IconButton,
+  z as InputButton,
+  g as MAVRIK_THEME,
+  B as MAVRIK_THEME_HORIZONTAL,
+  M as MavrikChart,
+  J as MountSvgSprite,
+  W as NotFoundComponent,
+  Y as PagePadding,
+  oo as ProtocolLogo,
+  U as ScrollArea,
+  to as Select,
+  eo as SelectItem,
+  mo as Skeleton,
+  fo as Switch,
+  ao as TextInput,
+  io as Tooltip,
+  so as TooltipProvider,
+  ho as TouchTarget,
+  Mo as UserDropdown,
+  go as UserDropdownMobile,
+  h as isEChartsChartOption,
+  d as isEChartsThemeOption,
+  To as twMerge,
+  T as useChartInstance,
+  So as useScrollToBottom
 };

package/dist/src/components/collapsible/collapsible.js

@@ -0,0 +1,29 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Collapsible as t } from "radix-ui";
+import { forwardRef as s } from "react";
+import { twMerge as r } from "../../lib/tailwind-merge.js";
+const p = s(
+  ({ className: a, ...e }, l) => /* @__PURE__ */ o(t.Root, { ref: l, className: r(a), ...e })
+);
+p.displayName = "Collapsible";
+const n = s(({ className: a, ...e }, l) => /* @__PURE__ */ o(t.Trigger, { ref: l, className: r(a), ...e }));
+n.displayName = "CollapsibleTrigger";
+const m = s(({ className: a, orientation: e = "vertical", ...l }, i) => /* @__PURE__ */ o(
+  t.Content,
+  {
+    ref: i,
+    className: r(
+      "overflow-hidden",
+      e === "vertical" && "data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+      e === "horizontal" && "data-[state=closed]:animate-collapsible-in data-[state=open]:animate-collapsible-out",
+      a
+    ),
+    ...l
+  }
+));
+m.displayName = "CollapsibleContent";
+export {
+  p as Collapsible,
+  m as CollapsibleContent,
+  n as CollapsibleTrigger
+};

package/dist/styles/animation.css

@@ -8,6 +8,10 @@
   --animate-tooltip-enter: fade-in 150ms ease-out, scale-up-50 100ms cubic-bezier(0.16, 1, 0.3, 1);
   --animate-tooltip-delayed-enter: fade-in 150ms ease-out, scale-up-50 400ms cubic-bezier(0.16, 1, 0.3, 1);
   --animate-tooltip-exit: fade-out 100ms ease-in, scale-down-50 100ms ease-in;
+  --animate-collapsible-down: collapsible-slide-down 150ms ease-out;
+  --animate-collapsible-up: collapsible-slide-up 150ms ease-out;
+  --animate-collapsible-in: collapsible-slide-in 150ms ease-out;
+  --animate-collapsible-out: collapsible-slide-out 150ms ease-out;
 }
 
 @keyframes fade-in {
@@ -81,3 +85,39 @@
     transform: translateX(100%);
   }
 }
+
+@keyframes collapsible-slide-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes collapsible-slide-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes collapsible-slide-in {
+  from {
+    width: var(--radix-collapsible-content-width);
+  }
+  to {
+    width: 0;
+  }
+}
+
+@keyframes collapsible-slide-out {
+  from {
+    width: 0;
+  }
+  to {
+    width: var(--radix-collapsible-content-width);
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.54.0",
+  "version": "1.55.0",
   "module": "./dist/index.js",
   "type": "module",
   "files": [