Add vendor creation

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/src/Atoms/Badge/Badge.tsx

@@ -31,7 +31,7 @@ const badge = tv({
         },
     },
     defaultVariants: {
-        size: "md",
+        size: "sm",
     },
 });
 

packages/ui/src/Atoms/Button/Button.tsx

@@ -8,7 +8,7 @@ import { Link } from "react-router";
 import { tv, type VariantProps } from "tailwind-variants";
 
 const button = tv({
-    base: "flex items-center justify-center gap-[6px] px-3 py-2 rounded-full cursor-pointer text-sm font-medium h-8",
+    base: "flex items-center justify-center gap-[6px] px-3 py-2 rounded-full cursor-pointer text-sm font-medium h-8 focus:outline-none",
     variants: {
         variant: {
             primary:

packages/ui/src/Atoms/Dropdown/Dropdown.tsx

@@ -7,21 +7,24 @@ import { IconDotGrid1x3Horizontal } from "../Icons/IconDotGrid1x3Horizontal.tsx"
 import { Button } from "../Button/Button.tsx";
 
 type Props = PropsWithChildren<{
-    toggle: ReactNode;
+    toggle?: ReactNode;
     className?: string;
+    open?: boolean;
 }>;
 
-export function Dropdown({ children, toggle, className }: Props) {
+export const dropdown = tv({
+    base: "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 origin-[--radix-dropdown-menu-content-transform-origin] z-50 p-2 shadow-mid min-w-[8rem] bg-level-1 overflow-y-auto overflow-x-hidden rounded-2xl border-border-low",
+});
+
+export function Dropdown({ children, toggle, className, open }: Props) {
     return (
-        <DropdownMenu.Root>
-            <DropdownMenu.Trigger asChild>{toggle}</DropdownMenu.Trigger>
+        <DropdownMenu.Root open={open}>
+            {toggle && (
+                <DropdownMenu.Trigger asChild>{toggle}</DropdownMenu.Trigger>
+            )}
             <DropdownMenu.Portal>
                 <DropdownMenu.Content
-                    className={clsx(
-                        "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 origin-[--radix-dropdown-menu-content-transform-origin]",
-                        "z-50 p-2 shadow-mid min-w-[8rem] bg-level-1 overflow-y-auto overflow-x-hidden rounded-2xl border-border-low",
-                        className,
-                    )}
+                    className={dropdown({ className })}
                     sideOffset={5}
                 >
                     {children}
@@ -47,8 +50,8 @@ type DropdownItemProps = PropsWithChildren<{
 }> &
     ComponentProps<typeof DropdownMenu.Item>;
 
-const dropdownItem = tv({
-    base: "text-txt-primary flex items-center gap-2 hover:bg-tertiary-hover active:bg-tertiary-pressed cursor-pointer p-2",
+export const dropdownItem = tv({
+    base: "text-txt-primary flex items-center gap-2 hover:bg-tertiary-hover active:bg-tertiary-pressed data-active-item:bg-tertiary-pressed cursor-pointer p-2",
     variants: {
         variant: {
             primary: "text-txt-primary",

packages/ui/src/Atoms/Input/Input.tsx

@@ -7,7 +7,7 @@ type Props = {
 } & InputHTMLAttributes<HTMLInputElement>;
 
 export const input = tv({
-    base: "py-[6px] bg-secondary border border-border-mid rounded-[10px] hover:border-border-strong focus:shadow-focus text-sm px-3 w-full bg-secondary disabled:bg-transparent",
+    base: "py-[6px] bg-secondary border border-border-mid rounded-[10px] hover:border-border-strong focus:shadow-focus text-sm px-3 w-full bg-secondary disabled:bg-transparent focus:outline-none",
     variants: {
         invalid: {
             true: "border-border-danger",

packages/ui/src/Atoms/Select/Select.tsx

@@ -85,9 +85,6 @@ const findSelectedOption = (
     children: unknown[],
     condition: (c: { props: Record<string, unknown> }) => boolean,
 ): ReactNode => {
-    if (children.length === 1) {
-        debugger;
-    }
     const selectedOptions = children.find(
         // @ts-expect-error We know that the children are ReactElements with props
         (c) => isValidElement(c) && condition(c),

packages/ui/src/Atoms/Spinner/Spinner.stories.tsx

@@ -0,0 +1,12 @@
+import { Spinner } from "./Spinner";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Atoms/Spinner",
+    component: Spinner,
+    argTypes: {},
+} satisfies Meta<typeof Spinner>;
+
+type Story = StoryObj<typeof Spinner>;
+
+export const Default: Story = {};

packages/ui/src/Atoms/Spinner/Spinner.tsx

@@ -0,0 +1,12 @@
+import clsx from "clsx";
+
+type Props = { size: number; className?: string };
+
+export function Spinner({ size = 16, className }: Props) {
+    return (
+        <div
+            className={clsx("animate-spin rounded-full border-b-2", className)}
+            style={{ width: size, height: size, borderColor: "currentColor" }}
+        />
+    );
+}