@rovula/ui 0.1.1 → 0.1.3

package/src/components/Button/Button.tsx

@@ -6,6 +6,7 @@ import Loading from "../Loading/Loading";
 export type ButtonProps = {
   title?: string;
   size?: "sm" | "md" | "lg";
+  shape?: "round" | "capsule";
   color?:
   | "primary"
   | "secondary"
@@ -14,7 +15,7 @@ export type ButtonProps = {
   | "info"
   | "warning"
   | "error";
-  variant?: "solid" | "outline" | "flat" | "link";
+  variant?: "solid" | "outline" | "flat" | "text" | "link";
   disabled?: boolean;
   isLoading?: boolean;
   fullwidth?: boolean;
@@ -27,6 +28,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       size = "md",
+      shape = "round",
       color = "primary",
       variant = "solid",
       title,
@@ -52,7 +54,14 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         data-loading={isLoading || undefined}
         tabIndex={isDisabled ? -1 : 0}
         className={cn(
-          buttonVariants({ size, color, variant, disabled, fullwidth }),
+          buttonVariants({
+            size,
+            shape,
+            color,
+            variant,
+            disabled,
+            fullwidth,
+          }),
           className
         )}
         disabled={isDisabled}

package/src/components/Button/Buttons.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import { ArrowsUpDownIcon } from "@heroicons/react/16/solid";
 
 import Button from "./Button";
 
@@ -8,6 +9,12 @@ const meta = {
   title: "Components/Button",
   component: Button,
   tags: ["autodocs"],
+  argTypes: {
+    shape: {
+      control: { type: "inline-radio" },
+      options: ["round", "capsule"],
+    },
+  },
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: "fullscreen",
@@ -29,6 +36,7 @@ export const Solid = {
     title: "Button",
     disabled: false,
     isLoading: false,
+    shape: "round",
   },
   render: (args) => {
     const props: typeof args = {
@@ -55,6 +63,7 @@ export const Outline = {
     variant: "outline",
     disabled: false,
     isLoading: false,
+    shape: "round",
   },
   render: (args) => {
     const props: typeof args = {
@@ -81,6 +90,34 @@ export const Flat = {
     variant: "flat",
     disabled: false,
     isLoading: false,
+    shape: "round",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+      className: "capitalize",
+    };
+    return (
+      <div className="flex gap-2">
+        <Button color="primary" {...props} title="primary" />
+        <Button color="secondary" {...props} title="secondary" />
+        <Button color="tertiary" {...props} title="tertiary" />
+        <Button color="info" {...props} title="info" />
+        <Button color="success" {...props} title="success" />
+        <Button color="warning" {...props} title="warning" />
+        <Button color="error" {...props} title="error" />
+      </div>
+    );
+  },
+} satisfies Story;
+
+export const Text = {
+  args: {
+    title: "Button",
+    variant: "text",
+    disabled: false,
+    isLoading: false,
+    shape: "round",
   },
   render: (args) => {
     const props: typeof args = {
@@ -107,6 +144,7 @@ export const Link = {
     variant: "link",
     disabled: false,
     isLoading: false,
+    shape: "round",
   },
   render: (args) => {
     const props: typeof args = {
@@ -126,3 +164,200 @@ export const Link = {
     );
   },
 } satisfies Story;
+
+export const ShapePreview = {
+  args: {
+    variant: "solid",
+    color: "primary",
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-2">
+        <span className="w-20 typography-subtitile4">Round</span>
+        <Button {...args} shape="round" size="lg" title="Large" />
+        <Button {...args} shape="round" size="md" title="Medium" />
+        <Button {...args} shape="round" size="sm" title="Small" />
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="w-20 typography-subtitile4">Capsule</span>
+        <Button {...args} shape="capsule" size="lg" title="Large" />
+        <Button {...args} shape="capsule" size="md" title="Medium" />
+        <Button {...args} shape="capsule" size="sm" title="Small" />
+      </div>
+    </div>
+  ),
+} satisfies Story;
+
+const previewColors: Array<
+  "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error"
+> = ["primary", "secondary", "tertiary", "info", "success", "warning", "error"];
+const previewSizes: Array<"lg" | "md" | "sm"> = ["lg", "md", "sm"];
+const previewSizeLabel: Record<(typeof previewSizes)[number], string> = {
+  lg: "Large",
+  md: "Medium",
+  sm: "Small",
+};
+const previewStyles: Array<{ label: string; variant: "solid" | "outline" | "text"; }> =
+  [
+    { label: "Solid", variant: "solid" },
+    { label: "Outline", variant: "outline" },
+    { label: "Text", variant: "text" },
+  ];
+
+const icon = <ArrowsUpDownIcon />;
+const previewStates = [
+  { label: "Default", isLoading: false, disabled: false },
+  { label: "Loading", isLoading: true, disabled: false },
+  { label: "Disable", isLoading: false, disabled: true },
+];
+
+export const FigmaPreview = {
+  render: () => (
+    <div className="bg-base-bg2 p-8 min-h-screen">
+      <div className="flex flex-col gap-10">
+        {previewColors.map((color) => (
+          <div key={color} className="flex flex-col gap-2">
+            <h3 className="text-xl font-semibold tracking-wide text-text-white capitalize">
+              {color} btn
+            </h3>
+
+            {previewStates.map((state) => (
+              <div
+                key={state.label}
+                className="grid grid-cols-[repeat(3,minmax(0,1fr))] items-stretch gap-2"
+              >
+                {/* <span className="pt-3 text-sm font-semibold text-text-white">
+                  {state.label}
+                </span> */}
+
+                {previewStyles.map((style) => (
+                  <div
+                    key={style.label}
+                    className="h-full rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-3"
+                  >
+                    <span className="text-xs font-semibold tracking-wide text-text-white uppercase">
+                      {style.label} ({state.label})
+                    </span>
+
+                    <div className="mt-3 flex flex-col gap-2">
+                      {previewSizes.map((size) => (
+                        <div key={size} className="flex items-center gap-2">
+                          <Button
+                            color={color}
+                            variant={style.variant}
+                            size={size}
+                            title={previewSizeLabel[size]}
+                            startIcon={icon}
+                            isLoading={state.isLoading}
+                            disabled={state.disabled}
+                            fullwidth={false}
+                          />
+                          <Button
+                            color={color}
+                            variant={style.variant}
+                            size={size}
+                            title={previewSizeLabel[size]}
+                            isLoading={state.isLoading}
+                            disabled={state.disabled}
+                            fullwidth={false}
+                          />
+                          <Button
+                            color={color}
+                            variant={style.variant}
+                            size={size}
+                            title={previewSizeLabel[size]}
+                            endIcon={icon}
+                            isLoading={state.isLoading}
+                            disabled={state.disabled}
+                            fullwidth={false}
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+} satisfies Story;
+
+export const FigmaPreviewCapsule = {
+  render: () => (
+    <div className="bg-base-bg2 p-8 min-h-screen">
+      <div className="flex flex-col gap-10">
+        {previewColors.map((color) => (
+          <div key={color} className="flex flex-col gap-4">
+            <h3 className="text-xl font-semibold tracking-wide text-text-white capitalize">
+              {color} btn
+            </h3>
+
+            {previewStates.map((state) => (
+              <div
+                key={state.label}
+                className="grid grid-cols-[repeat(3,minmax(0,1fr))] items-stretch gap-4"
+              >
+                {/* <span className="pt-3 text-sm font-semibold text-text-white">
+                  {state.label}
+                </span> */}
+
+                {previewStyles.map((style) => (
+                  <div
+                    key={style.label}
+                    className="h-full rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-3"
+                  >
+                    <span className="text-xs font-semibold tracking-wide text-text-white uppercase">
+                      {style.label} ({state.label})
+                    </span>
+
+                    <div className="mt-3 flex flex-col gap-2">
+                      {previewSizes.map((size) => (
+                        <div key={size} className="flex items-center gap-2">
+                          <Button
+                            color={color}
+                            variant={style.variant}
+                            size={size}
+                            shape="capsule"
+                            title={previewSizeLabel[size]}
+                            startIcon={icon}
+                            isLoading={state.isLoading}
+                            disabled={state.disabled}
+                            fullwidth={false}
+                          />
+                          <Button
+                            color={color}
+                            variant={style.variant}
+                            size={size}
+                            shape="capsule"
+                            title={previewSizeLabel[size]}
+                            isLoading={state.isLoading}
+                            disabled={state.disabled}
+                            fullwidth={false}
+                          />
+                          <Button
+                            color={color}
+                            variant={style.variant}
+                            size={size}
+                            shape="capsule"
+                            title={previewSizeLabel[size]}
+                            endIcon={icon}
+                            isLoading={state.isLoading}
+                            disabled={state.disabled}
+                            fullwidth={false}
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+} satisfies Story;

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import type { CheckedState } from "@radix-ui/react-checkbox";
 import { Checkbox } from "./Checkbox";
 
 const meta = {
@@ -19,6 +20,7 @@ const meta = {
 } satisfies Meta<typeof Checkbox>;
 
 export default meta;
+type Story = StoryObj<typeof Checkbox>;
 
 export const Default = {
   args: {
@@ -43,7 +45,7 @@ export const Default = {
       </div>
     );
   },
-} satisfies StoryObj;
+} satisfies Story;
 
 export const WithText = {
   args: {},
@@ -68,9 +70,9 @@ export const WithText = {
       </div>
     );
   },
-} satisfies StoryObj;
+} satisfies Story;
 
-export const Diabled = {
+export const Disabled = {
   args: {},
   render: (args) => {
     const props: typeof args = {
@@ -88,4 +90,48 @@ export const Diabled = {
       </div>
     );
   },
-} satisfies StoryObj;
+} satisfies Story;
+
+type CheckboxPreviewRow = {
+  label: string;
+  checked: CheckedState;
+  disabled?: boolean;
+  className?: string;
+};
+
+const checkboxPreviewRows: CheckboxPreviewRow[] = [
+  { label: "Default", checked: false },
+  { label: "Hover", checked: false, className: "!border-function-default-hover" },
+  { label: "Disable", checked: false, disabled: true },
+  { label: "Checked", checked: true },
+  {
+    label: "Checked - Hover",
+    checked: true,
+    className:
+      "!data-[state=checked]:border-function-active-hover !data-[state=checked]:bg-function-active-hover",
+  },
+  { label: "Checked - Disable", checked: true, disabled: true },
+  { label: "Indeterminate", checked: "indeterminate" },
+  {
+    label: "Indeterminate - Hover",
+    checked: "indeterminate",
+    className:
+      "!data-[state=indeterminate]:border-function-active-hover !data-[state=indeterminate]:bg-function-active-hover",
+  },
+  { label: "Indeterminate - Disable", checked: "indeterminate", disabled: true },
+];
+
+export const FigmaPreview = {
+  render: () => (
+    <div className="bg-base-bg2 p-8 min-h-screen">
+      <div className="mx-auto flex w-full max-w-[360px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6">
+        {checkboxPreviewRows.map((row) => (
+          <div key={row.label} className="grid grid-cols-[160px_16px] items-center gap-4">
+            <span className="text-sm font-medium text-text-white">{row.label}</span>
+            <Checkbox checked={row.checked} disabled={row.disabled} className={row.className} />
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+} satisfies Story;

package/src/components/Checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 
-import { CheckIcon } from "@heroicons/react/16/solid";
+import { CheckIcon, MinusIcon } from "@heroicons/react/16/solid";
 
 import { cn } from "@/utils/cn";
 
@@ -14,25 +14,29 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer size-4 shrink-0 rounded-[var(--spacing-spacing-xxs,2px)] border border-function-default-solid ring-offset-background",
+      "peer size-4 shrink-0 cursor-pointer rounded-[var(--spacing-spacing-xxs,2px)] border border-function-default-solid ring-offset-background",
       "hover:border-function-default-hover",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "disabled:cursor-not-allowed disabled:border-state-disable-solid disabled:text-state-disable-outline",
+      "disabled:cursor-not-allowed disabled:border-state-disable-solid disabled:text-state-disable-outline disabled:data-[state=checked]:bg-state-disable-solid disabled:data-[state=indeterminate]:bg-state-disable-solid",
       {
-        "data-[state=checked]:border-function-active-solid data-[state=checked]:bg-function-active-solid data-[state=checked]:text-function-active-icon":
+        "data-[state=checked]:border-function-active-solid data-[state=checked]:bg-function-active-solid data-[state=checked]:text-function-active-icon data-[state=indeterminate]:border-function-active-solid data-[state=indeterminate]:bg-function-active-solid data-[state=indeterminate]:text-function-active-icon":
           !props.disabled,
-        "hover:data-[state=checked]:border-function-active-hover hover:data-[state=checked]:bg-function-active-hover":
+        "hover:data-[state=checked]:border-function-active-hover hover:data-[state=checked]:bg-function-active-hover hover:data-[state=indeterminate]:border-function-active-hover hover:data-[state=indeterminate]:bg-function-active-hover":
           !props.disabled,
-        "bg-state-disable-solid": props.checked && props.disabled,
       },
       className
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
+      className={cn(
+        "flex size-[14px] items-center justify-center text-current",
+        "[&[data-state=checked]_.checkbox-check-icon]:block",
+        "[&[data-state=indeterminate]_.checkbox-minus-icon]:block"
+      )}
     >
-      <CheckIcon className="size-4" />
+      <CheckIcon className="checkbox-check-icon hidden size-[14px]" />
+      <MinusIcon className="checkbox-minus-icon hidden size-[14px]" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

package/src/components/InputFilter/InputFilter.styles.ts

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 export const filterIconVariant = cva(
   [
     // Base styles
-    "absolute contents items-center justify-center cursor-pointer",
+    "absolute flex items-center justify-center cursor-pointer",
 
     // Border styles
     "border-l border-l-input-default-stroke",
@@ -70,5 +70,5 @@ export const filterIconVariant = cva(
       active: false,
       disabled: false,
     },
-  }
+  },
 );

package/src/components/InputFilter/InputFilter.tsx

@@ -179,13 +179,12 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
                     value: option.value,
                     label: option.label,
                     handleOnClick: () => handleOptionClick(option),
-                    className: `p-4 typography-subtitile4 hover:bg-gray-100 cursor-pointer  flex items-center gap-3 ${
-                      selectedOptions.some(
-                        (selected) => selected.value === option.value
-                      )
-                        ? "bg-gray-200"
-                        : ""
-                    }`,
+                    className: `p-4 typography-subtitile4 hover:bg-gray-100 cursor-pointer  flex items-center gap-3 ${selectedOptions.some(
+                      (selected) => selected.value === option.value
+                    )
+                      ? "bg-gray-200"
+                      : ""
+                      }`,
                   })}
                 </Fragment>
               );
@@ -194,13 +193,12 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
               <li
                 key={option.value}
                 onMouseDown={() => handleOptionClick(option)}
-                className={`p-4 typography-subtitile4 hover:bg-primary-hover-bg cursor-pointer  flex items-center gap-3 ${
-                  selectedOptions.some(
-                    (selected) => selected.value === option.value
-                  )
-                    ? "bg-base-popup-highlight"
-                    : ""
-                }`}
+                className={`p-4 typography-subtitile4 hover:bg-primary-hover-bg cursor-pointer  flex items-center gap-3 ${selectedOptions.some(
+                  (selected) => selected.value === option.value
+                )
+                  ? "bg-base-popup-highlight"
+                  : ""
+                  }`}
               >
                 <Checkbox
                   checked={selectedOptions.some(
@@ -272,17 +270,16 @@ const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
         <TextInput
           hasClearIcon={false}
           endIcon={
-            <div className={filterIconClassName}>
-              <Icon
-                type="heroicons"
-                name="adjustments-horizontal"
-                variant="outline"
-                color="inherit"
-                stroke="inherit"
-                fill="transparent"
-              />
-            </div>
+            <Icon
+              type="heroicons"
+              name="adjustments-horizontal"
+              variant="outline"
+              color="inherit"
+              stroke="inherit"
+              fill="transparent"
+            />
           }
+          classes={{ endIconWrapper: filterIconClassName }}
           {...props}
           ref={ref}
           readOnly={!filterMode}

package/src/components/PasswordInput/PasswordInput.tsx

@@ -26,8 +26,8 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
     };
 
     const toggleIcon = visible
-      ? showIcon ?? <Icon name="eye" type="lucide" size="inherit" className="size-full" aria-label="Hide password" />
-      : hideIcon ?? <Icon name="eye-closed" type="lucide" size="inherit" className="size-full" aria-label="Show password" />;
+      ? showIcon ?? <Icon name="eye" type="lucide" size="inherit" className="size-full stroke-input-default-stroke hover:stroke-input-active-stroke" aria-label="Hide password" />
+      : hideIcon ?? <Icon name="eye-closed" type="lucide" size="inherit" className="size-full stroke-input-default-stroke hover:stroke-input-active-stroke" aria-label="Show password" />;
 
     return (
       <TextInput

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -19,6 +19,7 @@ const meta = {
 } satisfies Meta<typeof RadioGroup>;
 
 export default meta;
+type Story = StoryObj<typeof RadioGroup>;
 
 export const Default = {
   args: {
@@ -43,9 +44,9 @@ export const Default = {
       </div>
     );
   },
-} satisfies StoryObj;
+} satisfies Story;
 
-export const Diabled = {
+export const Disabled = {
   args: {
     disabled: true,
   },
@@ -68,7 +69,7 @@ export const Diabled = {
       </div>
     );
   },
-} satisfies StoryObj;
+} satisfies Story;
 
 export const Horizontal = {
   args: {
@@ -95,4 +96,42 @@ export const Horizontal = {
       </RadioGroup>
     );
   },
-} satisfies StoryObj;
+} satisfies Story;
+
+type RadioPreviewRow = {
+  label: string;
+  checked: boolean;
+  disabled?: boolean;
+  className?: string;
+};
+
+const radioPreviewRows: RadioPreviewRow[] = [
+  { label: "Default", checked: false },
+  { label: "Hover", checked: false, className: "!border-function-default-hover" },
+  { label: "Disable", checked: false, disabled: true },
+  { label: "Checked", checked: true },
+  {
+    label: "Checked - Hover",
+    checked: true,
+    className:
+      "!data-[state=checked]:border-function-active-hover !data-[state=checked]:text-function-active-hover",
+  },
+  { label: "Checked - Disable", checked: true, disabled: true },
+];
+
+export const FigmaPreview = {
+  render: () => (
+    <div className="bg-base-bg2 p-8 min-h-screen">
+      <div className="mx-auto flex w-full max-w-[360px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6">
+        {radioPreviewRows.map((row) => (
+          <div key={row.label} className="grid grid-cols-[160px_16px] items-center gap-4">
+            <span className="text-sm font-medium text-text-white">{row.label}</span>
+            <RadioGroup defaultValue={row.checked ? "option" : undefined} disabled={row.disabled}>
+              <RadioGroupItem value="option" className={row.className} />
+            </RadioGroup>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+} satisfies Story;

package/src/components/RadioGroup/RadioGroup.tsx

@@ -24,7 +24,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square box-border size-4 rounded-full border border-function-default-solid text-function-default-solid",
+        "aspect-square box-border size-4 cursor-pointer rounded-full border border-function-default-solid text-function-default-solid",
         "hover:border-function-default-hover",
         "focus:outline-none",
         // Disabled state styles

package/src/components/TextArea/TextArea.styles.ts

@@ -203,7 +203,7 @@ export const clearIconVariant = cva(
 );
 
 export const helperTextVariant = cva(
-  ["text-small1 flex flex-row items-center gap-1"],
+  ["typography-small1 flex flex-row items-center gap-1"],
   {
     variants: {
       size: {