@rovula/ui 0.1.2 → 0.1.4

package/package.json

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

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -9,6 +9,12 @@ const meta = {
   title: "Components/ActionButton",
   component: ActionButton,
   tags: ["autodocs"],
+  argTypes: {
+    shape: {
+      control: { type: "inline-radio" },
+      options: ["round", "capsule"],
+    },
+  },
   parameters: {
     layout: "fullscreen",
   },
@@ -22,14 +28,15 @@ const meta = {
 } satisfies Meta<typeof ActionButton>;
 
 export default meta;
+type Story = StoryObj<typeof ActionButton>;
 
 export const Default = {
   args: {
     variant: "solid",
     size: "md",
+    shape: "round",
   },
   render: (args) => {
-    console.log("args ", args);
     const props: typeof args = {
       ...args,
     };
@@ -41,155 +48,104 @@ export const Default = {
       </div>
     );
   },
-} satisfies StoryObj;
+} satisfies Story;
 
-export const Preview = {
-  args: {},
-  render: (args) => {
-    console.log("args ", args);
-    const props: typeof args = {
-      ...args,
-    };
-    return (
-      <div className="flex flex-col gap-2 w-full  p-20">
-        <div className="flex flex-row justify-between items-center">
-          <h6 className="w-[20px] text-white">Default:</h6>
-          <div className="flex flex-row gap-2 items-start ">
-            <ActionButton variant="solid" size="lg">
-              <Icon type="heroicons" name="arrows-up-down" />
-            </ActionButton>
-            <ActionButton variant="solid" size="md">
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="solid" size="sm">
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="solid" size="xs">
-              <ArrowsUpDownIcon />
-            </ActionButton>
-          </div>
-          <div className="flex flex-row gap-2 items-start">
-            <ActionButton variant="outline" size="lg">
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="outline" size="md">
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="outline" size="sm">
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="outline" size="xs">
-              <ArrowsUpDownIcon />
-            </ActionButton>
-          </div>
-          <div className="flex flex-row gap-2 items-start">
-            <ActionButton variant="icon" size="lg">
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="icon" size="md">
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="icon" size="sm">
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="icon" size="xs">
-              <ArrowsUpDownIcon />
-            </ActionButton>
-          </div>
-        </div>
+type ActionButtonVariant = "solid" | "outline" | "icon";
+type ActionButtonSize = "xxs" | "xs" | "sm" | "md" | "lg";
+type PreviewState = "default" | "hover" | "active" | "active-hover" | "disable";
 
-        <div className="flex flex-row justify-between">
-          <h6 className="w-[20px] text-white">Active:</h6>
-          <div className="flex flex-row gap-2 items-start">
-            <ActionButton variant="solid" size="lg" active>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="solid" size="md" active>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="solid" size="sm" active>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="solid" size="xs" active>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-          </div>
-          <div className="flex flex-row gap-2 items-start">
-            <ActionButton variant="outline" size="lg" active>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="outline" size="md" active>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="outline" size="sm" active>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="outline" size="xs" active>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-          </div>
-          <div className="flex flex-row gap-2 items-start">
-            <ActionButton variant="icon" size="lg" active>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="icon" size="md" active>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="icon" size="sm" active>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="icon" size="xs" active>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-          </div>
-        </div>
+const previewVariants: Array<{
+  label: string;
+  variant: ActionButtonVariant;
+  sizes: ActionButtonSize[];
+}> = [
+  { label: "Solid", variant: "solid", sizes: ["lg", "md", "sm"] },
+  { label: "Outline", variant: "outline", sizes: ["lg", "md", "sm"] },
+  { label: "Icon", variant: "icon", sizes: ["lg", "md", "sm", "xs", "xxs"] },
+];
 
-        <div className="flex flex-row justify-between">
-          <h6 className="w-[20px] text-white">Disabled:</h6>
-          <div className="flex flex-row gap-2 items-start">
-            <ActionButton variant="solid" size="lg" disabled>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="solid" size="md" disabled>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="solid" size="sm" disabled>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="solid" size="xs" disabled>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-          </div>
-          <div className="flex flex-row gap-2 items-start">
-            <ActionButton variant="outline" size="lg" disabled>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="outline" size="md" disabled>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="outline" size="sm" disabled>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="outline" size="xs" disabled>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-          </div>
-          <div className="flex flex-row gap-2 items-start">
-            <ActionButton variant="icon" size="lg" disabled>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="icon" size="md" disabled>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="icon" size="sm" disabled>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-            <ActionButton variant="icon" size="xs" disabled>
-              <ArrowsUpDownIcon />
-            </ActionButton>
-          </div>
-        </div>
-      </div>
-    );
+const previewStates: Array<{ label: string; key: PreviewState }> = [
+  { label: "Default", key: "default" },
+  { label: "Hover", key: "hover" },
+  { label: "Active", key: "active" },
+  { label: "Active - Hover", key: "active-hover" },
+  { label: "Disable", key: "disable" },
+];
+
+const forcedStateClassName: Record<
+  PreviewState,
+  Partial<Record<ActionButtonVariant, string>>
+> = {
+  default: {},
+  hover: {
+    solid:
+      "!bg-action-button-solid-hover !border-action-button-solid-hover !text-action-button-solid-hover !fill-action-button-solid-hover",
+    outline:
+      "!bg-action-button-outline-hover !ring-[var(--action-button-outline-hover-border)] !text-action-button-outline-hover !fill-action-button-outline-hover",
+    icon: "!bg-action-button-icon-hover !text-action-button-icon-hover !fill-action-button-icon-hover",
+  },
+  active: {},
+  "active-hover": {
+    solid:
+      "!bg-action-button-solid-active-hover !border-action-button-solid-active-hover !text-action-button-solid-active-hover !fill-action-button-solid-active-hover",
+    outline:
+      "!bg-action-button-outline-active-hover !ring-[var(--action-button-outline-active-hover-border)] !text-action-button-outline-active-hover !fill-action-button-outline-active-hover",
+    icon:
+      "!bg-action-button-icon-active-hover !text-action-button-icon-active-hover !fill-action-button-icon-active-hover",
   },
-} satisfies StoryObj;
+  disable: {},
+};
+
+const icon = <ArrowsUpDownIcon />;
+
+const renderPreview = (shape: "round" | "capsule") => (
+  <div className="bg-base-bg2 p-8 min-h-screen">
+    <div className="flex flex-col gap-6">
+      <h3 className="text-xl font-semibold tracking-wide text-text-white">Function button</h3>
+
+      {previewStates.map((state) => (
+        <div
+          key={state.key}
+          className="grid grid-cols-[120px_repeat(3,minmax(0,1fr))] items-stretch gap-4"
+        >
+          <span className="pt-3 text-sm font-semibold text-text-white">{state.label}</span>
+
+          {previewVariants.map((previewVariant) => (
+            <div
+              key={previewVariant.variant}
+              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">
+                {previewVariant.label}
+              </span>
+
+              <div className="mt-3 flex flex-wrap items-center gap-2">
+                {previewVariant.sizes.map((size) => (
+                  <ActionButton
+                    key={`${previewVariant.variant}-${size}-${state.key}`}
+                    variant={previewVariant.variant}
+                    size={size}
+                    shape={shape}
+                    active={state.key === "active" || state.key === "active-hover"}
+                    disabled={state.key === "disable"}
+                    className={forcedStateClassName[state.key][previewVariant.variant]}
+                  >
+                    {icon}
+                  </ActionButton>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+export const FigmaPreview = {
+  render: () => renderPreview("round"),
+} satisfies Story;
+
+export const FigmaPreviewCapsule = {
+  render: () => renderPreview("capsule"),
+} satisfies Story;

package/src/components/ActionButton/ActionButton.styles.ts

@@ -11,24 +11,28 @@ export const actionButtonVariants = cva(
           "active:bg-action-button-solid-pressed active:border-action-button-solid-pressed active:text-action-button-solid-pressed active:fill-action-button-solid-pressed",
         ],
         outline: [
-          "border",
-          "bg-action-button-outline-default border-action-button-outline-default text-action-button-outline-default fill-action-button-outline-default",
-          "hover:bg-action-button-outline-hover hover:border-action-button-outline-hover hover:text-action-button-outline-hover hover:fill-action-button-outline-hover",
-          "active:bg-action-button-outline-pressed active:border-action-button-outline-pressed active:text-action-button-outline-pressed active:fill-action-button-outline-pressed",
+          "ring-1 ring-inset",
+          "bg-action-button-outline-default text-action-button-outline-default fill-action-button-outline-default ring-[var(--action-button-outline-default-border)]",
+          "hover:bg-action-button-outline-hover hover:text-action-button-outline-hover hover:fill-action-button-outline-hover hover:ring-[var(--action-button-outline-hover-border)]",
+          "active:bg-action-button-outline-pressed active:text-action-button-outline-pressed active:fill-action-button-outline-pressed active:ring-[var(--action-button-outline-pressed-border)]",
         ],
         icon: [
-          "rounded-full",
           "bg-action-button-icon-default border-action-button-icon-default text-action-button-icon-default fill-action-button-icon-default",
           "hover:bg-action-button-icon-hover hover:border-action-button-icon-hover hover:text-action-button-icon-hover hover:fill-action-button-icon-hover",
           "active:bg-action-button-icon-pressed active:border-action-button-icon-pressed active:text-action-button-icon-pressed active:fill-action-button-icon-pressed",
         ],
       },
       size: {
+        xxs: "",
         xs: "",
         sm: "",
         md: "",
         lg: "",
       },
+      shape: {
+        round: "",
+        capsule: "",
+      },
       disabled: {
         false: "",
       },
@@ -50,9 +54,9 @@ export const actionButtonVariants = cva(
         variant: "outline",
         active: true,
         className: [
-          "bg-action-button-outline-active border-action-button-outline-active text-action-button-outline-active fill-action-button-outline-active",
-          "hover:bg-action-button-outline-active-hover hover:border-action-button-outline-active-hover hover:text-action-button-outline-active-hover hover:fill-action-button-outline-active-hover",
-          "active:bg-action-button-outline-active-pressed active:border-action-button-outline-active-pressed active:text-action-button-outline-active-pressed active:fill-action-button-outline-active-pressed",
+          "bg-action-button-outline-active text-action-button-outline-active fill-action-button-outline-active ring-[var(--action-button-outline-active-border)]",
+          "hover:bg-action-button-outline-active-hover hover:text-action-button-outline-active-hover hover:fill-action-button-outline-active-hover hover:ring-[var(--action-button-outline-active-hover-border)]",
+          "active:bg-action-button-outline-active-pressed active:text-action-button-outline-active-pressed active:fill-action-button-outline-active-pressed active:ring-[var(--action-button-outline-active-pressed-border)]",
         ],
       },
       {
@@ -67,42 +71,97 @@ export const actionButtonVariants = cva(
       {
         size: "lg",
         variant: ["solid", "outline"],
-        className: "px-lg py-md [&_svg]:size-[32px] rounded-md",
+        className: "px-[12px] py-[12px] [&_svg]:size-[32px]",
       },
       {
         size: "md",
         variant: ["solid", "outline"],
-        className: "px-md py-sm [&_svg]:size-[22px] rounded-md",
+        className: "px-[8px] py-[8px] [&_svg]:size-[22px]",
       },
       {
         size: "sm",
         variant: ["solid", "outline"],
-        className: "px-sm py-xs [&_svg]:size-[22px] rounded-sm",
+        className: "px-[4px] py-[4px] [&_svg]:size-[22px]",
       },
       {
         size: "xs",
         variant: ["solid", "outline"],
-        className: "px-xs py-xxs [&_svg]:size-[14px] rounded-xs",
+        className: "px-[2px] py-[2px] [&_svg]:size-[14px]",
       },
       {
         size: "lg",
         variant: "icon",
-        className: "px-lg py-lg [&_svg]:size-[32px] rounded-full",
+        className: "px-[12px] py-[12px] [&_svg]:size-[32px]",
       },
       {
         size: "md",
         variant: "icon",
-        className: "px-md py-md [&_svg]:size-[22px] rounded-full",
+        className: "px-[8px] py-[8px] [&_svg]:size-[22px]",
       },
       {
         size: "sm",
         variant: "icon",
-        className: "px-xs py-xs [&_svg]:size-[22px] rounded-full",
+        className: "px-[4px] py-[4px] [&_svg]:size-[22px]",
+      },
+      {
+        size: "xxs",
+        variant: "icon",
+        className: "px-[1px] py-[1px] [&_svg]:size-[12px]",
       },
       {
         size: "xs",
         variant: "icon",
-        className: "px-xxs py-xxs [&_svg]:size-[14px] rounded-full",
+        className: "px-[2px] py-[2px] [&_svg]:size-[14px]",
+      },
+      {
+        size: "lg",
+        shape: "round",
+        className: "rounded-[var(--function-button-l-round)]",
+      },
+      {
+        size: "md",
+        shape: "round",
+        className: "rounded-[var(--function-button-m-round)]",
+      },
+      {
+        size: "sm",
+        shape: "round",
+        className: "rounded-[var(--function-button-s-round)]",
+      },
+      {
+        size: "xs",
+        shape: "round",
+        className: "rounded-[var(--function-button-xs-round)]",
+      },
+      {
+        size: "xxs",
+        shape: "round",
+        className: "rounded-[var(--function-button-xxs-round)]",
+      },
+      {
+        size: "lg",
+        shape: "capsule",
+        className: "rounded-[var(--function-button-l-capsule)]",
+      },
+      {
+        size: "md",
+        shape: "capsule",
+        className: "rounded-[var(--function-button-m-capsule)]",
+      },
+      {
+        size: "sm",
+        shape: "capsule",
+        className: "rounded-[var(--function-button-s-capsule)]",
+      },
+      {
+        size: "xxs",
+        shape: "capsule",
+        className: "rounded-[var(--function-button-xxs-capsule)]",
+      },
+      {
+        size: "xs",
+        shape: "capsule",
+        className: "rounded-[var(--function-button-xs-capsule)]",
       },
       {
         variant: "solid",
@@ -117,7 +176,7 @@ export const actionButtonVariants = cva(
         disabled: true,
         className: [
           "pointer-events-none",
-          "bg-action-button-outline-disabled border-action-button-outline-disabled text-action-button-outline-disabled fill-action-button-outline-disabled",
+          "bg-action-button-outline-disabled text-action-button-outline-disabled fill-action-button-outline-disabled ring-[var(--action-button-outline-disabled-border)]",
         ],
       },
       {
@@ -132,8 +191,9 @@ export const actionButtonVariants = cva(
     defaultVariants: {
       size: "md",
       variant: "solid",
+      shape: "round",
       disabled: false,
       active: false,
     },
-  }
+  },
 );

package/src/components/ActionButton/ActionButton.tsx

@@ -4,7 +4,8 @@ import { actionButtonVariants } from "./ActionButton.styles";
 
 export type ActionButtonProps = {
   title?: string;
-  size?: "xs" | "sm" | "md" | "lg";
+  size?: "xxs" | "xs" | "sm" | "md" | "lg";
+  shape?: "round" | "capsule";
   variant?: "solid" | "outline" | "icon";
   disabled?: boolean;
   active?: boolean;
@@ -13,9 +14,13 @@ export type ActionButtonProps = {
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
-  ({ children, disabled, active, className, size, variant, ...props }, ref) => {
+  (
+    { children, disabled, active, className, size, shape, variant, ...props },
+    ref
+  ) => {
     const actionButtonClassname = actionButtonVariants({
       size,
+      shape,
       variant,
       active,
       disabled,

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

@@ -2,7 +2,8 @@ import { cva } from "class-variance-authority";
 
 export const buttonVariants = cva(
   [
-    "gap-2 font-bold inline-flex items-center justify-center outline-none transition ease-in-out duration-45",
+    "relative gap-2 font-bold inline-flex items-center justify-center outline-none transition ease-in-out duration-45",
+    "before:content-[''] before:absolute before:inset-0 before:rounded-[inherit] before:pointer-events-none before:border-0 before:border-inherit",
   ],
   {
     variants: {
@@ -58,14 +59,19 @@ export const buttonVariants = cva(
         ],
       },
       size: {
-        sm: "px-md py-1 [&_svg]:size-[18px] typography-buttonMS rounded-sm gap-1",
-        md: "px-lg py-2 [&_svg]:size-5 typography-buttonMS rounded-md",
-        lg: "px-xl py-4 [&_svg]:size-6 typography-buttonL rounded-md",
+        sm: "px-[12px] py-[4px] [&_svg]:size-[18px] typography-buttonMS gap-1",
+        md: "px-[16px] py-[8px] [&_svg]:size-5 typography-buttonMS",
+        lg: "px-[24px] py-[16px] [&_svg]:size-6 typography-buttonL",
+      },
+      shape: {
+        round: "",
+        capsule: "",
       },
       variant: {
-        solid: "border",
-        outline: "border bg-transparent",
+        solid: "before:border",
+        outline: "before:border bg-transparent",
         flat: "bg-transparent",
+        text: "bg-transparent",
         link: "bg-transparent underline underline-offset-4",
       },
       disabled: {
@@ -81,6 +87,36 @@ export const buttonVariants = cva(
       },
     },
     compoundVariants: [
+      {
+        size: "sm",
+        shape: "round",
+        className: "rounded-[var(--button-s-round)]",
+      },
+      {
+        size: "md",
+        shape: "round",
+        className: "rounded-[var(--button-m-round)]",
+      },
+      {
+        size: "lg",
+        shape: "round",
+        className: "rounded-[var(--button-l-round)]",
+      },
+      {
+        size: "sm",
+        shape: "capsule",
+        className: "rounded-[var(--button-s-capsule)]",
+      },
+      {
+        size: "md",
+        shape: "capsule",
+        className: "rounded-[var(--button-m-capsule)]",
+      },
+      {
+        size: "lg",
+        shape: "capsule",
+        className: "rounded-[var(--button-l-capsule)]",
+      },
       {
         variant: "outline",
         color: "primary",
@@ -93,7 +129,7 @@ export const buttonVariants = cva(
         ],
       },
       {
-        variant: ["flat", "link"],
+        variant: ["flat", "text", "link"],
         color: "primary",
         className: [
           "bg-button-primary-flat-default border-button-primary-flat-default text-button-primary-flat-default fill-button-primary-flat-default",
@@ -115,7 +151,7 @@ export const buttonVariants = cva(
         ],
       },
       {
-        variant: ["flat", "link"],
+        variant: ["flat", "text", "link"],
         color: "secondary",
         className: [
           "bg-button-secondary-flat-default border-button-secondary-flat-default text-button-secondary-flat-default fill-button-secondary-flat-default",
@@ -137,7 +173,7 @@ export const buttonVariants = cva(
         ],
       },
       {
-        variant: ["flat", "link"],
+        variant: ["flat", "text", "link"],
         color: "tertiary",
         className: [
           "bg-button-tertiary-flat-default border-button-tertiary-flat-default text-button-tertiary-flat-default fill-button-tertiary-flat-default",
@@ -159,7 +195,7 @@ export const buttonVariants = cva(
         ],
       },
       {
-        variant: ["flat", "link"],
+        variant: ["flat", "text", "link"],
         color: "info",
         className: [
           "bg-button-info-flat-default border-button-info-flat-default text-button-info-flat-default fill-button-info-flat-default",
@@ -181,7 +217,7 @@ export const buttonVariants = cva(
         ],
       },
       {
-        variant: ["flat", "link"],
+        variant: ["flat", "text", "link"],
         color: "success",
         className: [
           "bg-button-success-flat-default border-button-success-flat-default text-button-success-flat-default fill-button-success-flat-default",
@@ -203,7 +239,7 @@ export const buttonVariants = cva(
         ],
       },
       {
-        variant: ["flat", "link"],
+        variant: ["flat", "text", "link"],
         color: "warning",
         className: [
           "bg-button-warning-flat-default border-button-warning-flat-default text-button-warning-flat-default fill-button-warning-flat-default",
@@ -225,7 +261,7 @@ export const buttonVariants = cva(
         ],
       },
       {
-        variant: ["flat", "link"],
+        variant: ["flat", "text", "link"],
         color: "error",
         className: [
           "bg-button-error-flat-default border-button-error-flat-default text-button-error-flat-default fill-button-error-flat-default",
@@ -237,7 +273,7 @@ export const buttonVariants = cva(
       },
       // --- Disabled --
       {
-        variant: ["outline", "flat", "link"],
+        variant: ["outline", "flat", "text", "link"],
         disabled: true,
         className: [
           "bg-transparent border-disabled-outline text-disable-outline fill-disable-outline",
@@ -246,6 +282,7 @@ export const buttonVariants = cva(
     ],
     defaultVariants: {
       size: "md",
+      shape: "round",
       color: "primary",
       variant: "solid",
       fullwidth: true,