@rovula/ui 0.0.16 → 0.0.17

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/types/components/Collapsible/index.d.ts

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

package/dist/cjs/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/components/Collapsible/Collapsible.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, 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";
+var CollapsibleButton = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.hideExpandIcon, hideExpandIcon = _b === void 0 ? false : _b;
+    var _c = useCollapsible(), toggle = _c.toggle, isExpand = _c.isExpand, size = _c.size;
+    var collapseButtonClassName = collapseButtonVariants({ size: size });
+    var collapseIconClassName = collapseIconVariants({ isExpand: isExpand, size: size });
+    return (_jsxs("button", { onClick: toggle, className: cn(collapseButtonClassName, className), ref: ref, children: [_jsx("span", { className: "flex flex-1", children: children }), !hideExpandIcon && (_jsx("span", { className: cn(collapseIconClassName), children: _jsx(ChevronDownIcon, { className: cn("size-full") }) }))] }));
+});
+CollapsibleButton.displayName = "CollapsibleButton";
+var CollapsiblePanel = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className;
+    var _b = useCollapsible(), isExpand = _b.isExpand, size = _b.size;
+    var collapsePanelClassName = collapsePanelVariants({ size: size });
+    var _c = useState("0px"), height = _c[0], setHeight = _c[1];
+    var contentRef = useRef(null);
+    useEffect(function () {
+        if (contentRef.current) {
+            setHeight(isExpand ? "".concat(contentRef.current.scrollHeight, "px") : "0px");
+        }
+    }, [isExpand, children]); // Add `children` to the dependency array to recalculate height on content change
+    return (_jsx("div", { ref: ref, className: cn("overflow-hidden transition-all ease-in-out"), style: { height: height }, children: _jsx("div", { ref: contentRef, className: cn(collapsePanelClassName, className), children: children }) }));
+});
+CollapsiblePanel.displayName = "CollapsiblePanel";
+var Collapsible = forwardRef(function (_a, ref) {
+    var children = _a.children, isExpand = _a.isExpand, size = _a.size, className = _a.className, onToggle = _a.onToggle;
+    var collapseContainerClassName = collapseContainerVariants();
+    return (_jsx(CollapsibleProvider, { size: size, isExpandControlled: isExpand, onToggle: onToggle, children: _jsx("div", { ref: ref, className: cn(collapseContainerClassName, className), children: children }) }));
+});
+Collapsible.displayName = "Collapsible";
+Collapsible.Button = CollapsibleButton;
+Collapsible.Panel = CollapsiblePanel;
+export default Collapsible;

package/dist/components/Collapsible/Collapsible.stories.js

@@ -0,0 +1,44 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import Collapsible from "./Collapsible";
+var meta = {
+    title: "Components/Collapsible",
+    component: Collapsible,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+var Test = function () {
+    useEffect(function () {
+        console.log("Mont");
+        return function () {
+            console.log("UnMont");
+        };
+    }, []);
+    return _jsx("p", { children: "This is the content of section 1." });
+};
+export var Default = {
+    args: {
+        size: "md",
+    },
+    render: function (args) {
+        var props = __assign({}, args);
+        return (_jsxs("div", { className: "flex flex-col gap-1 w-full ", children: [_jsxs(Collapsible, __assign({ isExpand: true }, props, { children: [_jsx(Collapsible.Button, { children: "Section 1" }), _jsx(Collapsible.Panel, { children: "This is the content of section 1." })] })), _jsxs(Collapsible, { children: [_jsx(Collapsible.Button, { children: "Section 2" }), _jsx(Collapsible.Panel, { children: _jsx("p", { children: "This is the content of section 2." }) })] }), _jsxs(Collapsible, { children: [_jsx(Collapsible.Button, { children: "Section 3" }), _jsx(Collapsible.Panel, { children: _jsx("p", { children: "This is the content of section 3." }) })] })] }));
+    },
+};

package/dist/components/Collapsible/Collapsible.styles.js

@@ -0,0 +1,47 @@
+import { cva } from "class-variance-authority";
+export var 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 var 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 var 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 var collapseContainerVariants = cva([
+    "flex flex-col border rounded overflow-hidden",
+]);

package/dist/components/Collapsible/CollapsibleContext.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, } from "react";
+var CollapsibleContext = createContext(undefined);
+export var useCollapsible = function () {
+    var context = useContext(CollapsibleContext);
+    if (!context) {
+        throw new Error("useCollapsible must be used within a CollapsibleProvider");
+    }
+    return context;
+};
+export var CollapsibleProvider = function (_a) {
+    var size = _a.size, children = _a.children, isExpandControlled = _a.isExpandControlled, onToggle = _a.onToggle;
+    var _b = useState(false), isExpand = _b[0], setIsExpand = _b[1];
+    var toggle = function () {
+        setIsExpand(function (prev) { return !prev; });
+        if (onToggle)
+            onToggle(!isExpand);
+    };
+    useEffect(function () {
+        if (isExpandControlled !== undefined) {
+            setIsExpand(isExpandControlled);
+        }
+    }, [isExpandControlled]);
+    return (_jsx(CollapsibleContext.Provider, { value: { size: size, isExpand: isExpand, toggle: toggle, setIsExpand: setIsExpand }, children: children }));
+};

package/dist/components/Collapsible/index.js

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

package/dist/esm/bundle.css

@@ -896,10 +896,18 @@ video {
   width: 1.5rem;
   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;
 }
@@ -1079,6 +1087,9 @@ video {
 .flex-wrap {
   flex-wrap: wrap;
 }
+.content-center {
+  align-content: center;
+}
 .items-center {
   align-items: center;
 }
@@ -1301,6 +1312,10 @@ video {
   --tw-bg-opacity: 1;
   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));
@@ -1448,6 +1463,10 @@ video {
   padding-left: 1rem;
   padding-right: 1rem;
 }
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1824,6 +1843,13 @@ video {
 .filter {
   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);
@@ -1839,6 +1865,9 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.delay-150 {
+  transition-delay: 150ms;
+}
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -1990,6 +2019,10 @@ video {
   --tw-bg-opacity: 1;
   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));
@@ -2109,14 +2142,26 @@ video {
   outline: 2px solid transparent;
   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;
 }