infinity-ui-elements 1.0.3 → 1.0.5

package/src/components/Button/Button.tsx

@@ -1,308 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import { PulseLoader, ClipLoader } from "react-spinners";
-
-import { cn } from "../../lib/utils";
-
-const buttonVariants = cva(
-  "items-center gap-3 justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none",
-  {
-    variants: {
-      variant: {
-        primary:
-          "bg-action-fill-primary-default text-action-ink-on-primary-normal hover:bg-action-fill-primary-hover",
-        secondary:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        tertiary: "hover:bg-accent hover:text-accent-foreground",
-      },
-      color: {
-        primary: "",
-        positive: "",
-        negative: "",
-        notice: "",
-        info: "",
-        neutral: "",
-      },
-      size: {
-        xsmall: "md:h-[28px] px-3 text-xs rounded-medium",
-        small: "md:h-[32px] px-4 text-xs rounded-medium",
-        medium: "md:h-[36px] px-6 py-2 rounded-medium",
-        large: "md:h-[44px] px-6 text-base rounded-xlarge",
-      },
-      isIconOnly: {
-        true: "aspect-square p-0",
-        false: "",
-      },
-      isLoading: {
-        true: "cursor-not-allowed",
-        false: "",
-      },
-      isDisabled: {
-        true: "cursor-not-allowed",
-        false: "cursor-pointer",
-      },
-      isFullWidth: {
-        true: "flex w-full",
-        false: "flex w-fit",
-      },
-    },
-    compoundVariants: [
-      // Primary variant colors
-      {
-        variant: "primary",
-        color: "primary",
-        class: `bg-action-fill-primary-default text-action-ink-on-primary-normal 
-          hover:bg-action-fill-primary-hover 
-          disabled:bg-action-fill-primary-disabled
-          disabled:text-action-ink-primary-disabled
-          `,
-      },
-      {
-        variant: "primary",
-        color: "positive",
-        class: `bg-action-fill-positive-default text-action-ink-on-primary-normal 
-          hover:bg-action-fill-positive-hover 
-          disabled:bg-action-fill-primary-disabled
-          disabled:text-action-ink-primary-disabled
-          `,
-      },
-      {
-        variant: "primary",
-        color: "negative",
-        class: `bg-action-fill-negative-default text-action-ink-on-primary-normal 
-          hover:bg-action-fill-negative-hover 
-          disabled:bg-action-fill-negative-disabled
-          disabled:text-action-ink-negative-disabled
-          `,
-      },
-      {
-        variant: "primary",
-        color: "notice",
-        class: `bg-action-fill-notice-default text-action-ink-on-primary-normal 
-          hover:bg-action-fill-notice-hover 
-          disabled:bg-action-fill-notice-disabled
-          disabled:text-action-ink-notice-disabled
-          `,
-      },
-      {
-        variant: "primary",
-        color: "info",
-        class: `bg-action-fill-info-default text-action-ink-on-primary-normal 
-          hover:bg-action-fill-info-hover 
-          disabled:bg-action-fill-info-disabled
-          disabled:text-action-ink-info-disabled
-          `,
-      },
-      {
-        variant: "primary",
-        color: "neutral",
-        class: `bg-action-fill-neutral-default text-action-ink-on-primary-normal 
-          hover:bg-action-fill-neutral-hover 
-          disabled:bg-action-fill-neutral-disabled
-          disabled:text-action-ink-neutral-disabled
-          `,
-      },
-      // Secondary variant colors
-      {
-        variant: "secondary",
-        color: "primary",
-        class: `border-action-outline-info-faded text-action-ink-primary-normal hover:border-action-outline-info-faded-hover 
-          disabled:bg-action-outline-info-disabled
-          disabled:text-action-ink-primary-disabled
-          disabled:border-action-outline-primary-disabled
-          `,
-      },
-      {
-        variant: "secondary",
-        color: "positive",
-        class:
-          "border-action-outline-positive-faded text-action-ink-positive-normal hover:border-action-outline-positive-faded-hover disabled:bg-action-outline-positive-disabled",
-      },
-      {
-        variant: "secondary",
-        color: "negative",
-        class:
-          "border-action-outline-negative-faded text-action-ink-negative-normal hover:border-action-outline-negative-faded-hover disabled:bg-action-outline-negative-disabled",
-      },
-      {
-        variant: "secondary",
-        color: "notice",
-        class:
-          "border-action-outline-notice-faded text-action-ink-notice-normal hover:border-action-outline-notice-faded-hover disabled:bg-action-outline-notice-disabled",
-      },
-      {
-        variant: "secondary",
-        color: "info",
-        class:
-          "border-action-outline-info-faded text-action-ink-info-normal hover:border-action-outline-info-faded-hover disabled:bg-action-outline-info-disabled",
-      },
-      {
-        variant: "secondary",
-        color: "neutral",
-        class:
-          "border-action-outline-neutral-faded text-action-ink-neutral-normal hover:bg-action-outline-neutral-faded-hover",
-      },
-      // Tertiary variant colors
-      {
-        variant: "tertiary",
-        color: "primary",
-        class: `text-action-ink-primary-normal 
-          hover:bg-action-fill-primary-faded 
-          disabled:text-action-ink-on-primary-muted
-          `,
-      },
-      {
-        variant: "tertiary",
-        color: "positive",
-        class: `text-action-ink-positive-normal 
-          hover:bg-action-fill-positive-faded 
-          disabled:text-action-ink-on-positive-muted
-          `,
-      },
-      {
-        variant: "tertiary",
-        color: "negative",
-        class: `text-action-ink-negative-normal 
-          hover:bg-action-fill-negative-faded 
-          disabled:text-action-ink-on-negative-muted
-          `,
-      },
-      {
-        variant: "tertiary",
-        color: "notice",
-        class: `text-action-ink-notice-normal 
-          hover:bg-action-fill-notice-faded 
-          disabled:text-action-ink-on-notice-muted
-          `,
-      },
-      {
-        variant: "tertiary",
-        color: "info",
-        class: `text-action-ink-info-normal 
-          hover:bg-action-fill-info-faded 
-          disabled:text-action-ink-on-notice-muted
-          `,
-      },
-      {
-        variant: "tertiary",
-        color: "neutral",
-        class: `text-action-ink-neutral-normal 
-          hover:bg-action-fill-neutral-faded 
-          disabled:text-action-ink-on-notice-muted
-          `,
-      },
-      // Icon only sizing
-      {
-        isIconOnly: true,
-        size: "xsmall",
-        class: "h-7 w-7",
-      },
-      {
-        isIconOnly: true,
-        size: "small",
-        class: "h-8 w-8",
-      },
-      {
-        isIconOnly: true,
-        size: "medium",
-        class: "h-9 w-9",
-      },
-      {
-        isIconOnly: true,
-        size: "large",
-        class: "h-10 w-10",
-      },
-    ],
-    defaultVariants: {
-      variant: "primary",
-      color: "primary",
-      size: "medium",
-      isIconOnly: false,
-      isLoading: false,
-      isFullWidth: false,
-    },
-  }
-);
-
-export interface ButtonProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color">,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
-  isFullWidth?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant = "primary",
-      color = "primary",
-      size,
-      isIconOnly,
-      isLoading,
-      asChild = false,
-      leadingIcon,
-      trailingIcon,
-      isFullWidth = false,
-      children,
-      disabled,
-      ...props
-    },
-    ref
-  ) => {
-    const Comp = asChild ? Slot : "button";
-
-    const isDisabled = disabled || isLoading || false;
-
-    const buttonContent = (
-      <>
-        {isLoading && !isIconOnly && (
-          <PulseLoader
-            color={`var(--color-action-ink-${color}-normal)`}
-            size={10}
-          />
-        )}
-        {isLoading && isIconOnly && (
-          <ClipLoader
-            color={`var(--color-action-ink-${color}-normal)`}
-            size={20}
-          />
-        )}
-        {!isLoading && leadingIcon && (
-          <span className="mr-2">{leadingIcon}</span>
-        )}
-        {!isIconOnly && !isLoading && children}
-        {isIconOnly && !isLoading && children}
-        {!isLoading && trailingIcon && <span>{trailingIcon}</span>}
-      </>
-    );
-
-    return (
-      <Comp
-        className={cn(
-          buttonVariants({
-            variant,
-            color,
-            size,
-            isIconOnly,
-            isLoading,
-            isDisabled,
-            isFullWidth,
-          }),
-          className
-        )}
-        ref={ref}
-        disabled={isDisabled}
-        {...props}
-      >
-        {buttonContent}
-      </Comp>
-    );
-  }
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

package/src/components/Button/index.ts

@@ -1,2 +0,0 @@
-export { Button, buttonVariants } from "./Button";
-export type { ButtonProps } from "./Button";