@rovula/ui 0.0.15 → 0.0.17

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

@@ -14,7 +14,7 @@ declare const meta: {
         fallback?: React.ReactNode;
         icon?: React.ReactNode;
         children?: React.ReactNode;
-        size?: "sm" | "md" | "lg" | "xxs" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xxs" | undefined;
         rounded?: "none" | "normal" | "full" | undefined;
         className?: string | undefined;
         imageClassName?: string | undefined;
@@ -27,7 +27,7 @@ declare const meta: {
         text?: string | undefined;
         icon?: React.ReactNode;
         children?: React.ReactNode;
-        size?: "sm" | "md" | "lg" | "xxs" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xxs" | undefined;
         rounded?: "none" | "normal" | "full" | undefined;
         className?: string | undefined;
         imageClassName?: string | undefined;
@@ -40,7 +40,7 @@ declare const meta: {
         text?: string | undefined;
         fallback?: React.ReactNode;
         children?: React.ReactNode;
-        size?: "sm" | "md" | "lg" | "xxs" | "xs" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xxs" | undefined;
         rounded?: "none" | "normal" | "full" | undefined;
         className?: string | undefined;
         imageClassName?: string | undefined;

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

@@ -1,4 +1,4 @@
 export declare const avatarVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xxs" | "xs" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xxs" | null | undefined;
     rounded?: "none" | "normal" | "full" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -8,7 +8,9 @@ export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 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

@@ -176,6 +176,16 @@ type NavbarProps = {
 };
 declare const Navbar: FC<NavbarProps>;
 
+declare const ActionButton: React__default.ForwardRefExoticComponent<{
+    title?: string | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | undefined;
+    variant?: "solid" | "outline" | "icon" | undefined;
+    disabled?: boolean | undefined;
+    active?: boolean | undefined;
+    children?: React__default.ReactNode;
+    className?: string | undefined;
+} & React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>>;
+
 type BaseAvatarProps = {
     imageUrl?: string;
     text?: string;
@@ -215,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>>;
@@ -281,4 +313,4 @@ declare const getTimestampUTC: (date: Date) => number;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { 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

@@ -10,7 +10,9 @@ export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 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

@@ -628,28 +628,44 @@ video {
   /* #161C24 */
   --grey-default: var(--grey-100);
   --grey-foreground: var(--white);
+  --info-lighter: 208 242 255;
+  --info-light: 116 202 255;
   --info-100: 41 152 255;
   /* #2998FF */
   --info-120: 33 122 204;
   /* #217ACC */
+  --info-dark: 12 83 183;
+  --info-darker: 4 41 122;
   --info-default: var(--info-100);
   --info-foreground: var(--white);
+  --success-lighter: 233 252 212;
+  --success-light: 170 242 127;
   --success-100: 84 214 44;
   /* #54D62C */
   --success-120: 67 171 35;
   /* #43AB23 */
+  --success-dark: 34 154 22;
+  --success-darker:8 102 13;
   --success-default: var(--success-100);
   --success-foreground: var(--white);
+  --warning-lighter: 255 247 205;
+  --warning-light:255 225 106;
   --warning-100: 255 193 7;
   /* #FFC107 */
   --warning-120: 204 154 6;
   /* #CC9A06 */
+  --warning-dark: 183 129 3;
+  --warning-darker: 122 79 1;
   --warning-default: var(--warning-100);
   --warning-foreground: var(--white);
+  --error-lighter: 255 231 217;
+  --error-light: 255 164 141;
   --error-100: 255 77 53;
   /* #FF4D35 */
   --error-120: 204 62 42;
   /* #CC3E2A */
+  --error-dark: 183 33 54;
+  --error-darker: 122 12 46;
   --error-default: var(--error-100);
   --error-foreground: var(--white);
   --main-transparent-primary: 1 1 68;
@@ -1046,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;
 }
@@ -1287,6 +1313,10 @@ body {
   flex-wrap: wrap;
 }
 
+.content-center {
+  align-content: center;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1574,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));
@@ -1763,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;
@@ -2233,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);
@@ -2251,6 +2299,10 @@ body {
   transition-duration: 150ms;
 }
 
+.delay-150 {
+  transition-delay: 150ms;
+}
+
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -2436,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));
@@ -2588,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/dist/theme/global.css

@@ -108,23 +108,39 @@
     --grey-default: var(--grey-100);
     --grey-foreground: var(--white);
   
+    --info-lighter: 208 242 255;
+    --info-light: 116 202 255;
     --info-100: 41 152 255; /* #2998FF */
     --info-120: 33 122 204; /* #217ACC */
+    --info-dark: 12 83 183;
+    --info-darker: 4 41 122;
     --info-default: var(--info-100);
     --info-foreground: var(--white);
     
+    --success-lighter: 233 252 212;
+    --success-light: 170 242 127;
     --success-100: 84 214 44; /* #54D62C */
     --success-120: 67 171 35; /* #43AB23 */
+    --success-dark: 34 154 22;
+    --success-darker:8 102 13;
     --success-default: var(--success-100);
     --success-foreground: var(--white);
     
+    --warning-lighter: 255 247 205;
+    --warning-light:255 225 106;
     --warning-100: 255 193 7; /* #FFC107 */
     --warning-120: 204 154 6; /* #CC9A06 */
+    --warning-dark: 183 129 3;
+    --warning-darker: 122 79 1;
     --warning-default: var(--warning-100);
     --warning-foreground: var(--white);
     
+    --error-lighter: 255 231 217;
+    --error-light: 255 164 141;
     --error-100: 255 77 53; /* #FF4D35 */
     --error-120: 204 62 42; /* #CC3E2A */
+    --error-dark: 183 33 54;
+    --error-darker: 122 12 46;
     --error-default: var(--error-100);
     --error-foreground: var(--white);
 

package/dist/theme/presets/colors.js

@@ -118,26 +118,42 @@ module.exports = {
           foreground: "rgb(var(--grey2-foreground) / <alpha-value>)",
         },
         info: {
+          lighter: "rgb(var(--info-lighter)) / <alpha-value>)",
+          light: "rgb(var(--info-light)) / <alpha-value>)",
           100: "rgb(var(--info-100)) / <alpha-value>)",
           120: "rgb(var(--info-120)) / <alpha-value>)",
+          dark: "rgb(var(--info-dark)) / <alpha-value>)",
+          darker: "rgb(var(--info-darker)) / <alpha-value>)",
           DEFAULT: "rgb(var(--info-default) / <alpha-value>)",
           foreground: "rgb(var(--info-foreground) / <alpha-value>)",
         },
         success: {
+          lighter: "rgb(var(--success-lighter)) / <alpha-value>)",
+          light: "rgb(var(--success-light)) / <alpha-value>)",
           100: "rgb(var(--success-100)) / <alpha-value>)",
           120: "rgb(var(--success-120)) / <alpha-value>)",
+          dark: "rgb(var(--success-dark)) / <alpha-value>)",
+          darker: "rgb(var(--success-darker)) / <alpha-value>)",
           DEFAULT: "rgb(var(--success-default) / <alpha-value>)",
           foreground: "rgb(var(--success-foreground) / <alpha-value>)",
         },
         warning: {
+          lighter: "rgb(var(--warning-lighter)) / <alpha-value>)",
+          light: "rgb(var(--warning-light)) / <alpha-value>)",
           100: "rgb(var(--warning-100) / <alpha-value>)",
           120: "rgb(var(--warning-120) / <alpha-value>)",
+          dark: "rgb(var(--warning-dark)) / <alpha-value>)",
+          darker: "rgb(var(--warning-darker)) / <alpha-value>)",
           DEFAULT: "rgb(var(--warning-default) / <alpha-value>)",
           foreground: "rgb(var(--warning-foreground) / <alpha-value>)",
         },
         error: {
+          lighter: "rgb(var(--error-lighter)) / <alpha-value>)",
+          light: "rgb(var(--error-light)) / <alpha-value>)",
           100: "rgb(var(--error-100) / <alpha-value>)",
           120: "rgb(var(--error-120) / <alpha-value>)",
+          dark: "rgb(var(--error-dark)) / <alpha-value>)",
+          darker: "rgb(var(--error-darker)) / <alpha-value>)",
           DEFAULT: "rgb(var(--error-100) / <alpha-value>)",
           foreground: "rgb(var(--error-foreground) / <alpha-value>)",
         },

package/package.json

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

package/src/components/ActionButton/ActionButton.tsx

@@ -1,5 +1,3 @@
-"use-client";
-
 import { cn } from "@/utils/cn";
 import React, { forwardRef } from "react";
 import { actionButtonVariants } from "./ActionButton.styles";

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",
+]);