@rovula/ui 0.0.13 → 0.0.14

package/src/components/Avatar/AvatarGroup.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React, { Children, FC, ReactNode, cloneElement } from "react";
+import Avatar from "./Avatar";
+
+export type AvatarGroupProps = {
+  maxDisplay?: number;
+  borderWidth?: number;
+  borderColor?: string;
+  remainingText?: string;
+  children?: ReactNode;
+  remainingAvatar?: ReactNode;
+};
+
+const AvatarGroup: FC<AvatarGroupProps> = ({
+  borderWidth = 2,
+  borderColor = "white",
+  maxDisplay = 4,
+  children,
+  remainingText,
+  remainingAvatar,
+}) => {
+  const avatars = Children.toArray(children);
+  const displayAvatars = avatars.slice(0, maxDisplay);
+  const remainingCount = Math.max(0, avatars.length - maxDisplay);
+
+  const remainingComp =
+    remainingAvatar ||
+    cloneElement(displayAvatars[0] as React.ReactElement, {
+      style: { borderWidth, borderColor },
+      className: "relative z-0",
+      children: remainingText || `+${remainingCount}`,
+    });
+
+  return (
+    <div className="flex items-center -space-x-2">
+      {displayAvatars.map((avatar, index) => {
+        return (
+          <div
+            key={index}
+            className="relative"
+            style={{ zIndex: avatars.length - index }}
+          >
+            {cloneElement(avatar as React.ReactElement, {
+              style: { borderWidth, borderColor },
+            })}
+          </div>
+        );
+      })}
+      {remainingCount > 0 && remainingComp}
+    </div>
+  );
+};
+
+export default AvatarGroup;

package/src/components/Button/Button.styles.ts

@@ -56,12 +56,12 @@ export const buttonVariants = cva(
         color: "secondary",
         class: "text-secondary-foreground",
       },
-      {
-        variant: "solid",
-        disabled: true,
-        color: "secondary",
-        class: "text-white",
-      },
+      // {
+      //   variant: "solid",
+      //   disabled: true,
+      //   color: "secondary",
+      //   class: "text-white",
+      // },
       {
         variant: "solid",
         color: "tertiary",

package/src/components/Input/Input.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Input } from "./Input";
+import { Input, InputProps } from "./Input";
 
 const meta = {
   title: "Components/Input",
@@ -20,10 +20,10 @@ const meta = {
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 export const Default = {
   args: {
-    // label: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
     // fullwidth: true,
   },
   render: (args) => {
@@ -32,9 +32,11 @@ export const Default = {
       ...args,
     };
     return (
-      <div className="flex flex-row gap-4 w-full">
-        <Input type="email" placeholder="Email" />
+      <div className="flex flex-row gap-4">
+        <Input id="1" size="lg" placeholder="Email" {...args} />
+        <Input id="2" size="md" placeholder="Email" {...args} />
+        <Input id="3" size="sm" placeholder="Email" {...args} />
       </div>
     );
   },
-} satisfies StoryObj;
+} satisfies Story;

package/src/components/Input/Input.styles.tsx

@@ -0,0 +1,51 @@
+import { cva } from "class-variance-authority";
+
+export const inputVariants = cva(
+  [
+    "border-0 outline-none",
+    "p-1 flex w-auto h-fit box-border",
+    "peer text-black",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "p-2 px-3 typography-small1",
+        md: "py-2 px-3 typography-subtitile4",
+        lg: "p-4 typography-subtitile1",
+      },
+      rounded: {
+        none: "rounded-none",
+        normal: "rounded-xl",
+        full: "rounded-full",
+      },
+      variant: {
+        flat: "",
+        outline:
+          "ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-1 focus:ring-inset focus:ring-input-stroke-active",
+        underline:
+          "border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke",
+      },
+      hiddenPlaceholder: {
+        true: "placeholder:text-transparent",
+      },
+      fullwidth: {
+        true: "w-full",
+      },
+      disabled: {
+        true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+      },
+      error: {
+        true: "ring-error focus:ring-error",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "outline",
+      rounded: "normal",
+      fullwidth: false,
+      disabled: false,
+      error: false,
+      hiddenPlaceholder: true,
+    },
+  }
+);

package/src/components/Input/Input.tsx

@@ -1,20 +1,44 @@
-import * as React from "react";
+import React, { InputHTMLAttributes, forwardRef } from "react";
 
 import { cn } from "@/utils/cn";
+import { inputVariants } from "./Input.styles";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export type InputProps = {
+  size?: "sm" | "md" | "lg";
+  rounded?: "none" | "normal" | "full";
+  variant?: "flat" | "outline" | "underline";
+  fullwidth?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  hiddenPlaceholder?: boolean;
+  className?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size">;
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      type = "text",
+      size = "md",
+      variant = "outline",
+      fullwidth = false,
+      disabled = false,
+      error = false,
+      required = false,
+      hiddenPlaceholder = false,
+      ...props
+    },
+    ref
+  ) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          inputVariants({ size, variant, fullwidth, error, hiddenPlaceholder }),
           className
         )}
         ref={ref}
+        disabled={disabled}
         {...props}
       />
     );

package/src/components/Label/Label.styles.ts

@@ -0,0 +1,61 @@
+import { cva } from "class-variance-authority";
+
+export const labelVariant = cva(
+  [
+    "block duration-450 transition-all px-[2px] text-input-text peer-focus:text-input-text-active",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "typography-small1",
+        md: "typography-subtitile4",
+        lg: "typography-subtitile1",
+      },
+      disabled: {
+        true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled peer-disabled:cursor-not-allowed",
+      },
+      error: {
+        true: "ring-error",
+      },
+      isFloatable: {
+        true: "absolute peer-focus:text-input-text-active peer-focus:bg-input-label-background",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        size: "sm",
+        isFloatable: true,
+        className: [
+          "left-3 -top-1.5 typography-label2 bg-input-label-background",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label2",
+        ],
+      },
+      {
+        size: "md",
+        isFloatable: true,
+        className: [
+          "left-3 -top-1.5 typography-label1 bg-input-label-background",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label1",
+        ],
+      },
+      {
+        size: "lg",
+        isFloatable: true,
+        className: [
+          "left-4 -top-1.5 typography-label1 bg-input-label-background",
+          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label1",
+        ],
+      },
+    ],
+    defaultVariants: {
+      size: "md",
+      disabled: false,
+      error: false,
+      isFloatable: false,
+    },
+  }
+);

package/src/components/Label/Label.tsx

@@ -2,25 +2,31 @@
 
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/utils/cn";
-
-const labelVariants = cva(
-  "typography-label1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
+import { labelVariant } from "./Label.styles";
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+    VariantProps<typeof labelVariant>
 >(({ className, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
-    className={cn(labelVariants(), className)}
+    className={cn(
+      labelVariant({
+        size: props.size,
+        disabled: props.disabled,
+        error: props.error,
+        isFloatable: props.isFloatable,
+      }),
+      className
+    )}
     {...props}
   />
 ));
+
 Label.displayName = LabelPrimitive.Root.displayName;
 
 export { Label };

package/src/components/Navbar/Navbar.stories.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Checkbox } from "../Checkbox/Checkbox";
+import Navbar from "./Navbar";
+
+const meta = {
+  title: "Components/Navbar",
+  component: Navbar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 w-full h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Navbar>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Navbar
+          leftNav={
+            <ul className="flex gap-2">
+              <li>link 1</li>
+              <li>link 2</li>
+              <li>link 3</li>
+            </ul>
+          }
+          center={<>Center text</>}
+          rightNav={
+            <ul className="flex gap-2">
+              <li>sss 1</li>
+              <li>ddd 2</li>
+              <li>vvvv 3</li>
+            </ul>
+          }
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Custom = {
+  args: {},
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Navbar
+          className="px-8"
+          leftNav={
+            <ul className="flex gap-2">
+              <li>link 1</li>
+              <li>link 2</li>
+              <li>link 3</li>
+            </ul>
+          }
+          center={<>Center text</>}
+          rightNav={
+            <ul className="flex gap-2">
+              <li>sss 1</li>
+              <li>ddd 2</li>
+              <li>vvvv 3</li>
+            </ul>
+          }
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,56 @@
+import { cn } from "@/utils/cn";
+import React, { FC, ReactNode } from "react";
+
+type NavbarProps = {
+  position?: "static" | "sticky";
+  children?: ReactNode;
+  leftNav?: ReactNode;
+  rightNav?: ReactNode;
+  center?: ReactNode;
+  container?: boolean;
+  className?: string;
+};
+
+const Navbar: FC<NavbarProps> = ({
+  children,
+  className,
+  center,
+  leftNav,
+  rightNav,
+  position,
+  container = false,
+}) => {
+  return (
+    <header
+      className={cn(
+        "w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitile2 border-solid border-b-2 bg-[rgb(var(--navbar-bg-color))] text-[rgb(var(--navbar-text-color))] border-b-[rgb(var(--navbar-border-color))]",
+        { position },
+        className
+      )}
+    >
+      <div
+        className={cn("mx-auto flex h-full justify-between items-center", {
+          container,
+        })}
+      >
+        {children || (
+          <>
+            <nav className="flex w-1/2 gap-x-[var(--navbar-gap)] text-xl">
+              {leftNav}
+            </nav>
+
+            <div className="flex flex-shrink-0 flex-wrap justify-center">
+              {center}
+            </div>
+
+            <nav className="flex w-1/2 justify-end gap-x-[var(--navbar-gap)] text-xl">
+              {rightNav}
+            </nav>
+          </>
+        )}
+      </div>
+    </header>
+  );
+};
+
+export default Navbar;

package/src/components/Search/Search.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Search } from "./Search";
+import { error } from "console";
+
+const meta = {
+  title: "Components/Search",
+  component: Search,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Search>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {
+    error: false,
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4">
+        <Search id="1" size="lg" placeholder="Search" {...args} />
+        <Search id="2" size="md" placeholder="Search" {...args} />
+        <Search id="3" size="sm" placeholder="Search" {...args} />
+      </div>
+    );
+  },
+} satisfies Story;

package/src/components/Search/Search.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Input } from "../Input/Input";
+import { Label } from "../Label/Label";
+
+type SearchProps = {};
+
+function Search(props: any) {
+  return (
+    <div className=" relative">
+      <Input {...props} hiddenPlaceholder />
+      <Label
+        htmlFor={props.id}
+        size={props.size}
+        disabled={props.disabled}
+        error={props.error}
+        className={props.labelClassname ?? ""}
+        isFloatable={true}
+      >
+        Search
+      </Label>
+    </div>
+  );
+}
+
+export { Search };

package/src/components/Text/Text.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@/utils/cn";
 import React, { FC, forwardRef } from "react";
 
 export type TextProps = {
@@ -49,7 +50,7 @@ const Text = forwardRef<TextProps["tag"], TextProps>(
   }) => {
     return (
       <Tag
-        className={`typography-${variant} text-${color} ${className}`}
+        className={cn(`typography-${variant} text-${color}`, className)}
         style={style}
       >
         {children}

package/src/components/ThemeToggle.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+
+const ThemeToggle = () => {
+  const [theme, setTheme] = useState("default");
+
+  const toggleTheme = () => {
+    if (theme === "default") {
+      document.documentElement.classList.add("xspector");
+      setTheme("xspector");
+    } else {
+      document.documentElement.classList.remove("xspector");
+      setTheme("default");
+    }
+  };
+
+  return <button onClick={toggleTheme}>Toggle Theme</button>;
+};
+
+export default ThemeToggle;

package/src/theme/global.css

@@ -128,6 +128,10 @@
     --error-default: var(--error-100);
     --error-foreground: var(--white);
 
+    --main-transparent-primary: 1 1 68;
+    --main-transparent-secondary: 234 241 255;
+    --main-transparent-tertiary: 47 78 255;
+
     /* Button */
     --btn-rounded-sm: 10px;
     --btn-rounded-md: 12px;
@@ -162,6 +166,13 @@
     --popup-overlay: 0 0 0;
     --popup-overlay-alpha: 0.48;
     --popup-rounded: 24px;
+
+    /* Navbar */
+    --navbar-height: 58px;
+    --navbar-bg-color: var(--primary-default);
+    --navbar-text-color: var(--primary-foreground);
+    --navbar-border-color: var(--primary-foreground);
+    --navbar-gap: 16px;
   
     /* TODO for shadcn, wait for refactor */
     /* --background: 0 0% 100%; */

package/src/theme/presets/colors.js

@@ -141,6 +141,34 @@ module.exports = {
           DEFAULT: "rgb(var(--error-100) / <alpha-value>)",
           foreground: "rgb(var(--error-foreground) / <alpha-value>)",
         },
+        main: {
+          transparent: {
+            primary: {
+              8: "rgb(var(--main-transparent-primary) / 0.8)",
+              12: "rgb(var(--main-transparent-primary) / 0.12)",
+              16: "rgb(var(--main-transparent-primary) / 0.16)",
+              24: "rgb(var(--main-transparent-primary) / 0.24)",
+              32: "rgb(var(--main-transparent-primary) / 0.32)",
+              48: "rgb(var(--main-transparent-primary) / 0.48)",
+            },
+            secondary: {
+              8: "rgb(var(--main-transparent-secondary) / 0.8)",
+              12: "rgb(var(--main-transparent-secondary) / 0.12)",
+              16: "rgb(var(--main-transparent-secondary) / 0.16)",
+              24: "rgb(var(--main-transparent-secondary) / 0.24)",
+              32: "rgb(var(--main-transparent-secondary) / 0.32)",
+              48: "rgb(var(--main-transparent-secondary) / 0.48)",
+            },
+            tertiary: {
+              8: "rgb(var(--main-transparent-tertiary) / 0.8)",
+              12: "rgb(var(--main-transparent-tertiary) / 0.12)",
+              16: "rgb(var(--main-transparent-tertiary) / 0.16)",
+              24: "rgb(var(--main-transparent-tertiary) / 0.24)",
+              32: "rgb(var(--main-transparent-tertiary) / 0.32)",
+              48: "rgb(var(--main-transparent-tertiary) / 0.48)",
+            },
+          },
+        },
         // Component color
         input: {
           text: {