@rovula/ui 0.0.19 → 0.0.21

package/src/components/Dropdown/Dropdown.tsx

@@ -55,7 +55,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
   (
     {
       id,
-      options,
+      options = [],
       value,
       label,
       size = "md",
@@ -115,7 +115,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
     }, [options, filterMode, textValue]);
 
     const renderOptions = () => (
-      <ul className="absolute mt-1 w-full bg-white border border-gray-300 rounded-md shadow-md z-10 max-h-60 overflow-y-auto">
+      <ul className="absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto">
         {optionsFiltered.map((option) => {
           if (option.renderLabel) {
             return (
@@ -135,8 +135,10 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
             <li
               key={option.value}
               onMouseDown={() => handleOptionClick(option)}
-              className={`px-4 py-2 hover:bg-gray-100 cursor-pointer ${
-                selectedOption?.value === option.value ? " bg-gray-200" : ""
+              className={`px-4 py-2 hover:bg-primary-hover-bg cursor-pointer ${
+                selectedOption?.value === option.value
+                  ? "bg-base-popup-highligh"
+                  : ""
               }`}
             >
               {option.label}
@@ -208,6 +210,14 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
     return (
       <div className={`relative ${fullwidth ? "w-full" : ""}`}>
         <TextInput
+          hasClearIcon={false}
+          endIcon={
+            <div className={iconWrapperVariant({ size })}>
+              <ChevronDownIcon
+                className={dropdownIconVariant({ size, isFocus: isFocused })}
+              />
+            </div>
+          }
           {...props}
           ref={ref}
           readOnly={!filterMode}
@@ -225,19 +235,11 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           required={required}
           id={_id}
           disabled={disabled}
-          hasClearIcon={false}
           size={size}
           className={customInputVariant({ size })}
           onFocus={handleOnFocus}
           onBlur={handleOnBlur}
           onKeyDown={handleOnKeyDown}
-          endIcon={
-            <div className={iconWrapperVariant({ size })}>
-              <ChevronDownIcon
-                className={dropdownIconVariant({ size, isFocus: isFocused })}
-              />
-            </div>
-          }
         />
         {isFocused && renderOptions()}
       </div>

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

@@ -11,7 +11,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-5 flex w-full ">
         <Story />
       </div>
     ),
@@ -24,7 +24,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default = {
   args: {
-    // fullwidth: true,
+    // disabled: true,
+    // value: "Aaaaa",
   },
   render: (args) => {
     console.log("args ", args);

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

@@ -4,7 +4,7 @@ export const inputVariants = cva(
   [
     "border-0 outline-none",
     "p-1 flex w-auto h-fit box-border",
-    "peer text-black",
+    "peer text-input-filled-text placeholder:text-input-default-text bg-transparent caret-primary",
   ],
   {
     variants: {
@@ -20,10 +20,13 @@ export const inputVariants = cva(
       },
       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",
+        outline: [
+          "ring-1 ring-inset ring-input-default-stroke",
+          "hover:ring-input-active-stroke hover:text-input-filled-text",
+          "focus:ring-1 focus:ring-inset focus:ring-input-active-stroke focus:text-input-filled-text active:text-input-filled-text",
+        ],
         underline:
-          "border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke",
+          "border-b-2 border-input-default-stroke transition-colors hover:border-input-active-stroke focus:border-input-default-stroke",
       },
       hiddenPlaceholder: {
         true: "placeholder:text-transparent",
@@ -32,10 +35,14 @@ export const inputVariants = cva(
         true: "w-full",
       },
       disabled: {
-        true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+        true: [
+          "text-input-disable-text ring-input-disable-stroke bg-input-disable-bg placeholder:text-input-disable-text",
+          "hover:text-input-disable-text hover:ring-input-disable-stroke hover:bg-input-disable-bg hover:placeholder:text-input-disable-text",
+          "active:text-input-disable-text active:ring-input-disable-stroke active:bg-input-disable-bg active:placeholder:text-input-disable-text",
+        ],
       },
       error: {
-        true: "ring-error focus:ring-error",
+        true: "ring-input-error focus:ring-input-error",
       },
     },
     defaultVariants: {

package/src/components/Input/Input.tsx

@@ -34,7 +34,14 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          inputVariants({ size, variant, fullwidth, error, hiddenPlaceholder }),
+          inputVariants({
+            size,
+            variant,
+            fullwidth,
+            error,
+            hiddenPlaceholder,
+            disabled,
+          }),
           className
         )}
         ref={ref}

package/src/components/Loading/Loading.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Loading from "./Loading";
+
+const meta = {
+  title: "Components/Loading",
+  component: Loading,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Loading>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    // Loading: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex items-center space-x-2">
+          <Loading {...props} />
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Loading/Loading.tsx

@@ -0,0 +1,72 @@
+import { cn } from "@/utils/cn";
+import React from "react";
+
+type LoadingProps = {
+  size?: number;
+  color?: string;
+  trackColor?: string;
+  strokeWidth?: number;
+  percentage?: number;
+  animate?: boolean;
+  className?: string;
+  progressClassName?: string;
+  trackClassName?: string;
+};
+
+const Loading: React.FC<LoadingProps> = ({
+  size = 16,
+  color = "",
+  trackColor = "",
+  strokeWidth = 2,
+  percentage = 75,
+  animate = true,
+  className,
+  progressClassName,
+  trackClassName,
+}) => {
+  const radius = (size - strokeWidth * 2) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (percentage / 100) * circumference;
+
+  return (
+    <svg
+      className={cn(
+        {
+          "animate-spin": animate,
+        },
+        className
+      )}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox={`0 0 ${size} ${size}`}
+      width={size}
+      height={size}
+      role="status"
+      aria-live="polite"
+    >
+      <circle
+        className={cn("text-[var(--loading-track-color)]", trackClassName)}
+        style={{ ...(trackColor ? { color: trackColor } : {}) }}
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+      />
+      <circle
+        className={cn("text-[var(--loading-process-color)]", progressClassName)}
+        style={{ ...(color ? { color: color } : {}) }}
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeDasharray={circumference}
+        strokeDashoffset={offset}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+
+export default Loading;

package/src/components/Popover/Popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-72 rounded-md border bg-popup-background border-none overflow-hidden p-0 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-72 rounded-md border bg-base-popup-highlight border-none overflow-hidden p-0 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import ProgressBar from "./ProgressBar";
+
+const meta = {
+  title: "Components/ProgressBar",
+  component: ProgressBar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="p-4 space-y-4 w-full">
+        <ProgressBar {...props} />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Preview = {
+  args: {},
+  render: (args) => {
+    console.log("args ", args);
+    const [progress, setProgress] = useState(0);
+
+    useEffect(() => {
+      const timer = setInterval(() => {
+        setProgress((prevProgress) =>
+          prevProgress >= 100 ? 0 : prevProgress + 10
+        );
+      }, 1000);
+
+      return () => {
+        clearInterval(timer);
+      };
+    }, []);
+
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="p-4 space-y-4 w-full">
+        {/* Single color progress bar */}
+        <ProgressBar
+          progress={progress}
+          color="#3b82f6"
+          animationDuration={0.7}
+        />
+
+        {/* Gradient progress bar */}
+        <ProgressBar
+          progress={progress}
+          gradientStart="#8a8a8a"
+          gradientEnd="#c0c0c0"
+          animationDuration={0.7}
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,62 @@
+import { cn } from "@/utils/cn";
+import React, { useEffect, useState } from "react";
+
+type ProgressBarProps = {
+  progress?: number;
+  color?: string;
+  gradientStart?: string;
+  gradientEnd?: string;
+  animationDuration?: number;
+  height?: number;
+  trackClassName?: string;
+  progressClassName?: string;
+};
+
+const ProgressBar: React.FC<ProgressBarProps> = ({
+  progress = 0,
+  color,
+  gradientStart,
+  gradientEnd,
+  animationDuration = 0.5,
+  height = 8,
+  trackClassName,
+  progressClassName,
+}) => {
+  const [width, setWidth] = useState<number>(0);
+
+  useEffect(() => {
+    setWidth(progress);
+  }, [progress]);
+
+  const getBackgroundStyle = (): string | undefined => {
+    if (gradientStart && gradientEnd) {
+      return `linear-gradient(to right, ${gradientStart}, ${gradientEnd})`;
+    }
+
+    return color;
+  };
+
+  return (
+    <div
+      className={cn(
+        "w-full bg-grey2-transparent-16 rounded-full overflow-hidden",
+        trackClassName
+      )}
+      style={{ height: `${height}px` }}
+    >
+      <div
+        className={cn(
+          "h-full rounded-full transition-all ease-out bg-primary",
+          progressClassName
+        )}
+        style={{
+          width: `${width}%`,
+          background: getBackgroundStyle(),
+          transition: `width ${animationDuration}s ease-out`,
+        }}
+      />
+    </div>
+  );
+};
+
+export default ProgressBar;

package/src/components/RadioGroup/RadioGroup.tsx

@@ -27,11 +27,11 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border text-primary disabled:fill-secondary-110 ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-secondary-110",
+        "aspect-square h-4 w-4 rounded-full border text-primary disabled:fill-state-disable-solid ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:state-disable-solid",
         {
           "border-primary-30 data-[state=checked]:border-primary":
             !props.disabled,
-          "border-secondary-110 data-disabled:border-secondary-110 text-secondary-110 fill-secondary-110":
+          "border-state-disable-solid data-disabled:border-state-disable-solid text-state-disable-solid fill-state-disable-solid":
             props.disabled,
         },
         className

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

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Search } from "./Search";
-import { error } from "console";
+import { Options } from "../Dropdown/Dropdown";
 
 const meta = {
   title: "Components/Search",
@@ -21,24 +21,24 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+const options: Options[] = new Array(100).fill("").map((__, index) => ({
+  value: `option${index + 1}`,
+  label: `Option ${index + 1}`,
+}));
 
 export const Default = {
   args: {
-    error: false,
-    // fullwidth: true,
+    label: "Choose an option:",
+    fullwidth: true,
+    options,
   },
   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 className="flex flex-row gap-4 w-full">
+        <Search id="1" size="lg" options={options} {...args} />
+        <Search id="2" size="md" options={options} {...args} />
+        <Search id="3" size="sm" options={options} {...args} />
       </div>
     );
   },
-} satisfies Story;
+} satisfies StoryObj;

package/src/components/Search/Search.tsx

@@ -1,25 +1,20 @@
-import React from "react";
-import { Input } from "../Input/Input";
-import { Label } from "../Label/Label";
+import React, { forwardRef } from "react";
+import Dropdown, { DropdownProps } from "../Dropdown/Dropdown";
 
-type SearchProps = {};
+export type SearchProps = DropdownProps;
 
-function Search(props: any) {
+const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
   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>
+    <Dropdown
+      {...props}
+      ref={ref}
+      hasClearIcon
+      hasSearchIcon
+      label="Search"
+      endIcon={null}
+      filterMode
+    />
   );
-}
+});
 
 export { Search };

package/src/components/Text/Text.stories.tsx

@@ -43,8 +43,12 @@ const variant: any = [
   "small1",
   "small2",
   "small3",
+  "small4",
+  "small5",
   "label1",
   "label2",
+  "buttonL",
+  "buttonMS",
 ];
 
 const color = [
@@ -68,12 +72,10 @@ export const Default = {
         {variant.map((value: any) => (
           <div key={value} className="flex flex-row ">
             <div className="w-[200px]">
-              <Text variant={value} color="primary">
-                {value}
-              </Text>
+              <Text variant={value}>{value}</Text>
             </div>
             <div className="w-full">
-              <Text variant={value} color="primary">
+              <Text variant={value}>
                 Lorem ipsum dolor sit amet, adipiscing elit.
               </Text>
             </div>

package/src/components/Text/Text.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@/utils/cn";
 import React, { FC, forwardRef } from "react";
+import { cva } from "class-variance-authority";
 
 export type TextProps = {
   variant?:
@@ -22,8 +23,12 @@ export type TextProps = {
     | "small1"
     | "small2"
     | "small3"
+    | "small4"
+    | "small5"
     | "label1"
-    | "label2";
+    | "label2"
+    | "buttonL"
+    | "buttonMS";
   color?:
     | "primary"
     | "secondary"
@@ -39,18 +44,37 @@ export type TextProps = {
   id?: string;
 };
 
+const textVariants = cva(["text-foreground"], {
+  variants: {
+    color: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      success: "text-success",
+      tertiary: "text-tertiary",
+      info: "text-info",
+      warning: "text-warning",
+      error: "text-error",
+    },
+  },
+});
+
+// TODO font, fontBold, elipt
 const Text = forwardRef<TextProps["tag"], TextProps>(
   ({
     variant = "body1",
     tag: Tag = "p",
     children,
-    className,
+    className = "",
     color,
     style,
   }) => {
     return (
       <Tag
-        className={cn(`typography-${variant} text-${color}`, className)}
+        className={cn(
+          `typography-${variant}`,
+          textVariants({ color }),
+          className
+        )}
         style={style}
       >
         {children}

package/src/components/TextInput/TextInput.stories.tsx

@@ -14,7 +14,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full bg-[rgb(var(--other-bg-2))]">
+      <div className="p-5 flex w-full bg-[rgb(var(--base-bg-2))] ">
         <Story />
       </div>
     ),
@@ -92,7 +92,8 @@ export const CustomLabel = {
 export const FuctionInput = {
   args: {
     label: "Placeholder Text",
-    disabled: false,
+    value: "dsdsds",
+    disabled: true,
   },
   render: (args) => {
     console.log("args ", args);