@a2v2ai/uikit 0.0.38 → 0.0.39

package/Select/Select.tsx

@@ -1,230 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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 }