@rovula/ui 0.0.16 → 0.0.17

package/dist/esm/types/components/Collapsible/Collapsible.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+declare const CollapsibleButton: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string | undefined;
+    hideExpandIcon?: boolean | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const CollapsiblePanel: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+interface CollapsibleComponent extends React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLDivElement>> {
+    Button: typeof CollapsibleButton;
+    Panel: typeof CollapsiblePanel;
+}
+interface CollapsibleProps {
+    size?: "sm" | "md" | "lg";
+    children: React.ReactNode;
+    isExpand?: boolean;
+    className?: string;
+    onToggle?: (isExpand: boolean) => void;
+}
+declare const Collapsible: CollapsibleComponent;
+export default Collapsible;

package/dist/esm/types/components/Collapsible/Collapsible.stories.d.ts

@@ -0,0 +1,8 @@
+declare const meta: any;
+export default meta;
+export declare const Default: {
+    args: {
+        size: string;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/types/components/Collapsible/Collapsible.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const collapseButtonVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const collapseIconVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    isExpand?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const collapsePanelVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const collapseContainerVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/dist/esm/types/components/Collapsible/CollapsibleContext.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+interface CollapsibleContextProps {
+    size?: "sm" | "md" | "lg";
+    isExpand: boolean;
+    toggle: () => void;
+    setIsExpand: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare const useCollapsible: () => CollapsibleContextProps;
+interface CollapsibleProviderProps {
+    size?: "sm" | "md" | "lg";
+    children: ReactNode;
+    isExpandControlled?: boolean;
+    onToggle?: (isExpand: boolean) => void;
+}
+export declare const CollapsibleProvider: React.FC<CollapsibleProviderProps>;
+export {};

package/dist/esm/types/components/Collapsible/index.d.ts

@@ -0,0 +1 @@
+export { default as Collapsible } from "./Collapsible";

package/dist/esm/types/index.d.ts

@@ -10,6 +10,7 @@ export { Input } from "./components/Input/Input";
 export { Navbar } from "./components/Navbar";
 export { default as ActionButton } from "./components/ActionButton/ActionButton";
 export { Avatar, AvatarGroup } from "./components/Avatar";
+export { Collapsible } from "./components/Collapsible";
 export * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";

package/dist/index.d.ts

@@ -225,6 +225,28 @@ type AvatarGroupProps = {
 };
 declare const AvatarGroup: FC<AvatarGroupProps>;
 
+declare const CollapsibleButton: React__default.ForwardRefExoticComponent<{
+    children: React__default.ReactNode;
+    className?: string | undefined;
+    hideExpandIcon?: boolean | undefined;
+} & React__default.RefAttributes<HTMLButtonElement>>;
+declare const CollapsiblePanel: React__default.ForwardRefExoticComponent<{
+    children: React__default.ReactNode;
+    className?: string | undefined;
+} & React__default.RefAttributes<HTMLDivElement>>;
+interface CollapsibleComponent extends React__default.ForwardRefExoticComponent<CollapsibleProps & React__default.RefAttributes<HTMLDivElement>> {
+    Button: typeof CollapsibleButton;
+    Panel: typeof CollapsiblePanel;
+}
+interface CollapsibleProps {
+    size?: "sm" | "md" | "lg";
+    children: React__default.ReactNode;
+    isExpand?: boolean;
+    className?: string;
+    onToggle?: (isExpand: boolean) => void;
+}
+declare const Collapsible: CollapsibleComponent;
+
 declare const Table: React.ForwardRefExoticComponent<{
     rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
 } & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
@@ -291,4 +313,4 @@ declare const getTimestampUTC: (date: Date) => number;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Checkbox, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, type DropdownProps, Input, type InputProps, Label, Navbar, type NavbarProps, type Options, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, resloveTimestamp };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Checkbox, Collapsible, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, type DropdownProps, Input, type InputProps, Label, Navbar, type NavbarProps, type Options, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, resloveTimestamp };

package/dist/index.js

@@ -12,6 +12,7 @@ export { Input } from "./components/Input/Input";
 export { Navbar } from "./components/Navbar";
 export { default as ActionButton } from "./components/ActionButton/ActionButton";
 export { Avatar, AvatarGroup } from "./components/Avatar";
+export { Collapsible } from "./components/Collapsible";
 export * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";

package/dist/src/theme/global.css

@@ -1062,11 +1062,21 @@ body {
   height: 1.5rem;
 }
 
+.size-7 {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
 .size-\[14px\] {
   width: 14px;
   height: 14px;
 }
 
+.size-full {
+  width: 100%;
+  height: 100%;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -1303,6 +1313,10 @@ body {
   flex-wrap: wrap;
 }
 
+.content-center {
+  align-content: center;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1590,6 +1604,11 @@ body {
   background-color: rgb(var(--error-100) / var(--tw-bg-opacity));
 }
 
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -1779,6 +1798,11 @@ body {
   padding-right: 1rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -2249,6 +2273,14 @@ body {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2267,6 +2299,10 @@ body {
   transition-duration: 150ms;
 }
 
+.delay-150 {
+  transition-delay: 150ms;
+}
+
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -2452,6 +2488,11 @@ body {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--info-100)) / var(--tw-bg-opacity));
@@ -2604,16 +2645,31 @@ body {
   outline-offset: 2px;
 }
 
+.focus-visible\:ring:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus-visible\:ring-2:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus-visible\:ring-gray-500:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
+}
+
 .focus-visible\:ring-ring:focus-visible {
   --tw-ring-color: hsl(var(--ring));
 }
 
+.focus-visible\:ring-opacity-75:focus-visible {
+  --tw-ring-opacity: 0.75;
+}
+
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Collapsible from "./Collapsible";
+
+const meta: any = {
+  title: "Components/Collapsible",
+  component: Collapsible,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+
+const Test = () => {
+  useEffect(() => {
+    console.log("Mont");
+    return () => {
+      console.log("UnMont");
+    };
+  }, []);
+
+  return <p>This is the content of section 1.</p>;
+};
+
+export const Default = {
+  args: {
+    size: "md",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-col gap-1 w-full ">
+        <Collapsible isExpand {...props}>
+          <Collapsible.Button>Section 1</Collapsible.Button>
+          <Collapsible.Panel>
+            This is the content of section 1.
+          </Collapsible.Panel>
+        </Collapsible>
+        <Collapsible>
+          <Collapsible.Button>Section 2</Collapsible.Button>
+          <Collapsible.Panel>
+            <p>This is the content of section 2.</p>
+          </Collapsible.Panel>
+        </Collapsible>
+        <Collapsible>
+          <Collapsible.Button>Section 3</Collapsible.Button>
+          <Collapsible.Panel>
+            <p>This is the content of section 3.</p>
+          </Collapsible.Panel>
+        </Collapsible>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Collapsible/Collapsible.styles.ts

@@ -0,0 +1,62 @@
+import { cva } from "class-variance-authority";
+
+export const collapseButtonVariants = cva(
+  [
+    "flex flex-1 bg-gray-100 hover:bg-gray-200",
+    "focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "py-2 px-3",
+        md: "py-3 px-4",
+        lg: "py-4 px-5",
+      },
+    },
+
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export const collapseIconVariants = cva(
+  ["transition-all flex content-center justify-center "],
+  {
+    variants: {
+      size: {
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-7",
+      },
+      isExpand: {
+        true: "rotate-180",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      isExpand: false,
+    },
+  }
+);
+
+export const collapsePanelVariants = cva(
+  ["flex flex-1 border-t", "transition ease-in-out delay-150 duration-300"],
+  {
+    variants: {
+      size: {
+        sm: "py-2 px-3",
+        md: "py-3 px-4",
+        lg: "py-4 px-5",
+      },
+    },
+
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export const collapseContainerVariants = cva([
+  "flex flex-col border rounded overflow-hidden",
+]);

package/src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,113 @@
+import React, { forwardRef, Ref, useEffect, useRef, useState } from "react";
+import { ChevronDownIcon } from "@heroicons/react/16/solid";
+import { CollapsibleProvider, useCollapsible } from "./CollapsibleContext";
+import { cn } from "@/utils/cn";
+import {
+  collapseButtonVariants,
+  collapseContainerVariants,
+  collapseIconVariants,
+  collapsePanelVariants,
+} from "./Collapsible.styles";
+
+const CollapsibleButton = forwardRef<
+  HTMLButtonElement,
+  {
+    children: React.ReactNode;
+    className?: string;
+    hideExpandIcon?: boolean;
+  }
+>(({ children, className, hideExpandIcon = false }, ref) => {
+  const { toggle, isExpand, size } = useCollapsible();
+
+  const collapseButtonClassName = collapseButtonVariants({ size });
+  const collapseIconClassName = collapseIconVariants({ isExpand, size });
+
+  return (
+    <button
+      onClick={toggle}
+      className={cn(collapseButtonClassName, className)}
+      ref={ref}
+    >
+      <span className="flex flex-1">{children}</span>
+      {!hideExpandIcon && (
+        <span className={cn(collapseIconClassName)}>
+          <ChevronDownIcon className={cn("size-full")} />
+        </span>
+      )}
+    </button>
+  );
+});
+
+CollapsibleButton.displayName = "CollapsibleButton";
+
+const CollapsiblePanel = forwardRef<
+  HTMLDivElement,
+  { children: React.ReactNode; className?: string }
+>(({ children, className }, ref) => {
+  const { isExpand, size } = useCollapsible();
+  const collapsePanelClassName = collapsePanelVariants({ size });
+
+  const [height, setHeight] = useState<string | number>("0px");
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setHeight(isExpand ? `${contentRef.current.scrollHeight}px` : "0px");
+    }
+  }, [isExpand, children]); // Add `children` to the dependency array to recalculate height on content change
+
+  return (
+    <div
+      ref={ref}
+      className={cn("overflow-hidden transition-all ease-in-out")}
+      style={{ height }}
+    >
+      <div ref={contentRef} className={cn(collapsePanelClassName, className)}>
+        {children}
+      </div>
+    </div>
+  );
+});
+
+CollapsiblePanel.displayName = "CollapsiblePanel";
+
+interface CollapsibleComponent
+  extends React.ForwardRefExoticComponent<
+    CollapsibleProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Button: typeof CollapsibleButton;
+  Panel: typeof CollapsiblePanel;
+}
+
+interface CollapsibleProps {
+  size?: "sm" | "md" | "lg";
+  children: React.ReactNode;
+  isExpand?: boolean;
+  className?: string;
+  onToggle?: (isExpand: boolean) => void;
+}
+
+const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(
+  ({ children, isExpand, size, className, onToggle }, ref) => {
+    const collapseContainerClassName = collapseContainerVariants();
+
+    return (
+      <CollapsibleProvider
+        size={size}
+        isExpandControlled={isExpand}
+        onToggle={onToggle}
+      >
+        <div ref={ref} className={cn(collapseContainerClassName, className)}>
+          {children}
+        </div>
+      </CollapsibleProvider>
+    );
+  }
+) as CollapsibleComponent;
+
+Collapsible.displayName = "Collapsible";
+
+Collapsible.Button = CollapsibleButton;
+Collapsible.Panel = CollapsiblePanel;
+
+export default Collapsible;

package/src/components/Collapsible/CollapsibleContext.tsx

@@ -0,0 +1,61 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useEffect,
+} from "react";
+
+interface CollapsibleContextProps {
+  size?: "sm" | "md" | "lg";
+  isExpand: boolean;
+  toggle: () => void;
+  setIsExpand: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const CollapsibleContext = createContext<CollapsibleContextProps | undefined>(
+  undefined
+);
+
+export const useCollapsible = (): CollapsibleContextProps => {
+  const context = useContext(CollapsibleContext);
+  if (!context) {
+    throw new Error("useCollapsible must be used within a CollapsibleProvider");
+  }
+  return context;
+};
+
+interface CollapsibleProviderProps {
+  size?: "sm" | "md" | "lg";
+  children: ReactNode;
+  isExpandControlled?: boolean;
+  onToggle?: (isExpand: boolean) => void;
+}
+
+export const CollapsibleProvider: React.FC<CollapsibleProviderProps> = ({
+  size,
+  children,
+  isExpandControlled,
+  onToggle,
+}) => {
+  const [isExpand, setIsExpand] = useState<boolean>(false);
+
+  const toggle = () => {
+    setIsExpand((prev) => !prev);
+    if (onToggle) onToggle(!isExpand);
+  };
+
+  useEffect(() => {
+    if (isExpandControlled !== undefined) {
+      setIsExpand(isExpandControlled);
+    }
+  }, [isExpandControlled]);
+
+  return (
+    <CollapsibleContext.Provider
+      value={{ size, isExpand, toggle, setIsExpand }}
+    >
+      {children}
+    </CollapsibleContext.Provider>
+  );
+};

package/src/components/Collapsible/index.ts

@@ -0,0 +1 @@
+export { default as Collapsible } from "./Collapsible";

package/src/index.ts

@@ -12,6 +12,7 @@ export { Input } from "./components/Input/Input";
 export { Navbar } from "./components/Navbar";
 export { default as ActionButton } from "./components/ActionButton/ActionButton";
 export { Avatar, AvatarGroup } from "./components/Avatar";
+export { Collapsible } from "./components/Collapsible";
 export * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";