@a2v2ai/uikit 0.0.36 → 0.0.38

package/Select/Select.tsx

@@ -0,0 +1,230 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { cva } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+import { Typography } from "../Typography/Typography";
+import { Label } from "../Label/Label";
+import { type TextVariant, type TextColor } from "../lib/typography-types";
+
+type SelectTriggerSize = "small" | "regular" | "large";
+type SelectTriggerVariant = "default" | "error";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const selectTriggerVariants = cva(
+  "flex w-full items-center justify-between whitespace-nowrap border bg-white text-main-950 ring-offset-white placeholder:text-grey-400 focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+  {
+    variants: {
+      size: {
+        small: "h-8 px-3 text-sm rounded-md",
+        regular: "h-9 px-3 text-sm rounded-lg",
+        large: "h-10 px-3 text-base rounded-lg",
+      },
+      variant: {
+        default: "border-grey-300 focus:ring-main-950",
+        error: "border-error-500 focus:ring-error-200",
+      },
+    },
+    defaultVariants: {
+      size: "regular",
+      variant: "default",
+    },
+  }
+);
+
+export interface SelectTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+  size?: SelectTriggerSize;
+  variant?: SelectTriggerVariant;
+  label?: string;
+  labelVariant?: TextVariant;
+  labelColor?: TextColor;
+  error?: string;
+}
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(
+  (
+    {
+      className,
+      size,
+      variant,
+      label,
+      labelVariant = "body2",
+      labelColor = "main-800",
+      error,
+      children,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const computedVariant = error ? "error" : variant;
+
+    return (
+      <div className="flex flex-col gap-2 w-full">
+        {label && (
+          <Label htmlFor={id} variant={labelVariant} color={labelColor}>
+            {label}
+          </Label>
+        )}
+        <SelectPrimitive.Trigger
+          ref={ref}
+          id={id}
+          className={cn(
+            selectTriggerVariants({ size, variant: computedVariant }),
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <SelectPrimitive.Icon asChild>
+            <ChevronDown className="size-4 opacity-50" />
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+        {error && (
+          <Typography variant="caption" color="error-600" className="mt-1">
+            {error}
+          </Typography>
+        )}
+      </div>
+    );
+  }
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="size-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="size-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-grey-200 bg-white text-main-950 shadow-md 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",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold text-grey-500", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-grey-100 focus:text-main-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex size-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="size-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-grey-100", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  selectTriggerVariants,
+};
+export type { SelectTriggerSize, SelectTriggerVariant };

package/Separator/Separator.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Separator } from "./Separator"
+
+const meta: Meta<typeof Separator> = {
+  title: "Components/Separator",
+  component: Separator,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    orientation: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "The orientation of the separator",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <div className="space-y-1">
+        <h4 className="text-sm font-medium leading-none text-white">Radix Primitives</h4>
+        <p className="text-sm text-grey-400">An open-source UI component library.</p>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex h-5 items-center space-x-4 text-sm text-grey-400">
+        <div>Blog</div>
+        <Separator orientation="vertical" />
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Source</div>
+      </div>
+    </div>
+  ),
+}
+
+export const Horizontal: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <p className="text-sm text-grey-400">Above separator</p>
+      <Separator className="my-4" />
+      <p className="text-sm text-grey-400">Below separator</p>
+    </div>
+  ),
+}
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-5 items-center space-x-4 text-sm text-grey-400">
+      <div>First</div>
+      <Separator orientation="vertical" />
+      <div>Second</div>
+      <Separator orientation="vertical" />
+      <div>Third</div>
+    </div>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex  gap={8}>
+      <Typography variant="h4" className="text-white">Separator Orientations</Typography>
+
+      <Flex  gap={4}>
+        <Typography variant="body2" className="text-grey-400">Horizontal</Typography>
+        <div className="w-[300px] bg-white p-4 rounded-lg">
+          <p className="text-sm text-main-950">Section 1</p>
+          <Separator className="my-3" />
+          <p className="text-sm text-main-950">Section 2</p>
+          <Separator className="my-3" />
+          <p className="text-sm text-main-950">Section 3</p>
+        </div>
+      </Flex>
+
+      <Flex  gap={4}>
+        <Typography variant="body2" className="text-grey-400">Vertical</Typography>
+        <div className="bg-white p-4 rounded-lg">
+          <div className="flex h-5 items-center space-x-4 text-sm">
+            <div>Home</div>
+            <Separator orientation="vertical" />
+            <div>Products</div>
+            <Separator orientation="vertical" />
+            <div>About</div>
+            <Separator orientation="vertical" />
+            <div>Contact</div>
+          </div>
+        </div>
+      </Flex>
+
+      <Flex  gap={4}>
+        <Typography variant="body2" className="text-grey-400">In List</Typography>
+        <div className="w-[200px] bg-white rounded-lg">
+          <div className="p-3 text-sm">Item 1</div>
+          <Separator />
+          <div className="p-3 text-sm">Item 2</div>
+          <Separator />
+          <div className="p-3 text-sm">Item 3</div>
+        </div>
+      </Flex>
+    </Flex>
+  ),
+}

package/Separator/Separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "../lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-grey-200",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }