@rovula/ui 0.0.14 → 0.0.16

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

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { AvatarImage } from "./AvatarBase";
 type BaseAvatarProps = {
     imageUrl?: string;
     text?: string;
@@ -13,20 +12,20 @@ type BaseAvatarProps = {
     fallbackClassName?: string;
     style?: React.CSSProperties;
 };
-type AvatarText = {
+type AvatarTextProps = {
     text: string;
     type: "text";
 } & BaseAvatarProps;
-type AvatarImage = {
+type AvatarImageProps = {
     imageUrl: string;
     fallback: React.ReactNode;
     type: "image";
 } & BaseAvatarProps;
-type AvatarIcon = {
+type AvatarIconProps = {
     icon: string;
     type: "icon";
 } & BaseAvatarProps;
-export type AvatarProps = AvatarText | AvatarImage | AvatarIcon;
+export type AvatarProps = AvatarTextProps | AvatarImageProps | AvatarIconProps;
 export declare const formatAvatarName: (text: string) => string;
 declare const Avatar: React.FC<AvatarProps>;
 export default Avatar;

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

@@ -0,0 +1,3 @@
+import Avatar from "./Avatar";
+import AvatarGroup from "./AvatarGroup";
+export { Avatar, AvatarGroup };

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

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from "react";
-type NavbarProps = {
+export type NavbarProps = {
     position?: "static" | "sticky";
     children?: ReactNode;
     leftNav?: ReactNode;

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

@@ -1,15 +1,7 @@
 import React from "react";
 declare const meta: {
     title: string;
-    component: React.FC<{
-        position?: "static" | "sticky" | undefined;
-        children?: React.ReactNode;
-        leftNav?: React.ReactNode;
-        rightNav?: React.ReactNode;
-        center?: React.ReactNode;
-        container?: boolean | undefined;
-        className?: string | undefined;
-    }>;
+    component: React.FC<import("./Navbar").NavbarProps>;
     tags: string[];
     parameters: {
         layout: string;

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

@@ -0,0 +1,2 @@
+import Navbar from "./Navbar";
+export { Navbar };

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

@@ -7,6 +7,9 @@ export { default as Dropdown } from "./components/Dropdown/Dropdown";
 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 * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";
@@ -14,5 +17,8 @@ export * from "./components/AlertDialog/AlertDialog";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
+export type { NavbarProps } from "./components/Navbar/Navbar";
+export type { AvatarProps } from "./components/Avatar/Avatar";
+export type { AvatarGroupProps } from "./components/Avatar/AvatarGroup";
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
 export { cn } from "./utils/cn";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactElement, ReactNode } from 'react';
+import React__default, { ReactElement, ReactNode, FC } from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -165,6 +165,66 @@ declare const Input: React__default.ForwardRefExoticComponent<{
     className?: string | undefined;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & React__default.RefAttributes<HTMLInputElement>>;
 
+type NavbarProps = {
+    position?: "static" | "sticky";
+    children?: ReactNode;
+    leftNav?: ReactNode;
+    rightNav?: ReactNode;
+    center?: ReactNode;
+    container?: boolean;
+    className?: string;
+};
+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;
+    fallback?: React.ReactNode;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    size?: "xxs" | "xs" | "sm" | "md" | "lg";
+    rounded?: "full" | "normal" | "none";
+    className?: string;
+    imageClassName?: string;
+    fallbackClassName?: string;
+    style?: React.CSSProperties;
+};
+type AvatarTextProps = {
+    text: string;
+    type: "text";
+} & BaseAvatarProps;
+type AvatarImageProps = {
+    imageUrl: string;
+    fallback: React.ReactNode;
+    type: "image";
+} & BaseAvatarProps;
+type AvatarIconProps = {
+    icon: string;
+    type: "icon";
+} & BaseAvatarProps;
+type AvatarProps = AvatarTextProps | AvatarImageProps | AvatarIconProps;
+declare const Avatar: React.FC<AvatarProps>;
+
+type AvatarGroupProps = {
+    maxDisplay?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    remainingText?: string;
+    children?: ReactNode;
+    remainingAvatar?: ReactNode;
+};
+declare const AvatarGroup: FC<AvatarGroupProps>;
+
 declare const Table: React.ForwardRefExoticComponent<{
     rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
 } & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
@@ -231,4 +291,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, Button, type ButtonProps, Checkbox, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, type DropdownProps, Input, type InputProps, Label, 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, 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

@@ -9,6 +9,9 @@ export { default as Dropdown } from "./components/Dropdown/Dropdown";
 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 * 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;

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.14",
+  "version": "0.0.16",
   "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/Avatar/Avatar.tsx

@@ -19,23 +19,23 @@ type BaseAvatarProps = {
   style?: React.CSSProperties;
 };
 
-type AvatarText = {
+type AvatarTextProps = {
   text: string;
   type: "text";
 } & BaseAvatarProps;
 
-type AvatarImage = {
+type AvatarImageProps = {
   imageUrl: string;
   fallback: React.ReactNode;
   type: "image";
 } & BaseAvatarProps;
 
-type AvatarIcon = {
+type AvatarIconProps = {
   icon: string;
   type: "icon";
 } & BaseAvatarProps;
 
-export type AvatarProps = AvatarText | AvatarImage | AvatarIcon;
+export type AvatarProps = AvatarTextProps | AvatarImageProps | AvatarIconProps;
 
 export const formatAvatarName = (text: string) => {
   if (!text.length) return "-";

package/src/components/Avatar/index.ts

@@ -0,0 +1,4 @@
+import Avatar from "./Avatar";
+import AvatarGroup from "./AvatarGroup";
+
+export { Avatar, AvatarGroup };

package/src/components/Navbar/Navbar.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/utils/cn";
 import React, { FC, ReactNode } from "react";
 
-type NavbarProps = {
+export type NavbarProps = {
   position?: "static" | "sticky";
   children?: ReactNode;
   leftNav?: ReactNode;

package/src/components/Navbar/index.ts

@@ -0,0 +1,3 @@
+import Navbar from "./Navbar";
+
+export { Navbar };

package/src/index.ts

@@ -9,6 +9,9 @@ export { default as Dropdown } from "./components/Dropdown/Dropdown";
 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 * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";
@@ -18,6 +21,9 @@ export * from "./components/AlertDialog/AlertDialog";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
+export type { NavbarProps } from "./components/Navbar/Navbar";
+export type { AvatarProps } from "./components/Avatar/Avatar";
+export type { AvatarGroupProps } from "./components/Avatar/AvatarGroup";
 
 // UTILS
 export {

package/src/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/src/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>)",
         },