@eggspot/ui 0.0.2 → 0.0.3

package/src/components/Button.tsx

@@ -1,249 +0,0 @@
-"use client"
-
-import { countdownMachine } from "@eggspot/ui/components/Button.machine"
-import {
-  ButtonVariantProps,
-  buttonVariants,
-} from "@eggspot/ui/components/Button.variants"
-import { Center, Float } from "@eggspot/ui/components/Layout"
-import { Spinner } from "@eggspot/ui/components/Spinner"
-import { Tooltip, TooltipTrigger } from "@eggspot/ui/components/Tooltip"
-import { cn, formatCount } from "@eggspot/ui/lib/utils"
-import { useMachine } from "@xstate/react"
-import { cva } from "class-variance-authority"
-import { Slot } from "radix-ui"
-import {
-  Button as AriaButton,
-  Focusable,
-  PressEvent,
-  type ButtonProps as AriaButtonProps,
-} from "react-aria-components"
-
-interface CommonButtonProps
-  extends AriaButtonProps,
-    React.RefAttributes<HTMLButtonElement>,
-    ButtonVariantProps {
-  /* If true, the button will be rendered as a child */
-  asChild?: boolean
-
-  /** If true, the button will show a loading state */
-  isLoading?: boolean
-
-  /** The delay of the tooltip */
-  tooltipDelay?: number
-
-  /** The test id of the button */
-  testId?: string
-
-  /** If true, the button will show a badge */
-  withBadge?: boolean
-
-  /** The badge number of the button */
-  badgeNumber?: number
-}
-
-interface IconButtonProps extends CommonButtonProps {
-  mode: "icon"
-
-  /** Tooltip text for the button. */
-  tooltip?: string
-
-  /** The placement of the tooltip */
-  tooltipPlacement?: "top" | "bottom" | "left" | "right"
-}
-interface DefaultButtonProps extends CommonButtonProps {
-  mode?: "default"
-
-  /** Optional tooltip for default buttons */
-  tooltip?: string
-
-  /** The left icon of the button */
-  leftIcon?: React.ReactNode
-
-  /** The right icon of the button */
-  rightIcon?: React.ReactNode
-
-  /** If provided, the button will show a countdown */
-  countdown?: number
-
-  /** The placement of the tooltip */
-  tooltipPlacement?: "top" | "bottom" | "left" | "right"
-}
-
-type ButtonProps = IconButtonProps | DefaultButtonProps
-
-function Button(props: ButtonProps) {
-  const {
-    mode,
-    size,
-    intent,
-    variant = "solid",
-    className,
-    fullWidth,
-    asChild = false,
-    isLoading = false,
-    children,
-    isDisabled,
-    tooltip,
-    tooltipDelay = 0,
-    tooltipPlacement = "bottom",
-    withBadge,
-    badgeNumber,
-    testId,
-    onPress,
-    ...restProps
-  } = props
-
-  const isDefault = mode === "default" || mode === undefined
-  const defaultIntent = variant === "solid" ? "primary" : "secondary"
-
-  const leftIcon = isDefault ? props.leftIcon : undefined
-  const rightIcon = isDefault ? props.rightIcon : undefined
-
-  // countdown and state machine setup
-  const hasCountdown = isDefault && props.countdown !== undefined
-  const initialCount = isDefault ? props.countdown : undefined
-  const [state, send] = useMachine(countdownMachine, {
-    input: {
-      initialCount: initialCount || 0,
-    },
-  })
-
-  const count = state.context.count
-  const isCounting = hasCountdown && state.matches("Counting")
-  const countdownProps = hasCountdown
-    ? {
-        onPress: (e: PressEvent) => {
-          send({ type: "START" })
-          onPress?.(e)
-        },
-      }
-    : {}
-
-  // rendering
-  const Comp = (asChild ? Slot.Root : AriaButton) as any
-  const isLoadingOrDisabled = isLoading || isDisabled || isCounting
-
-  const ariaProps: AriaButtonProps = asChild
-    ? {}
-    : {
-        isPending: isLoading,
-        isDisabled: isLoadingOrDisabled,
-      }
-
-  const button = (
-    <Comp
-      type="button"
-      aria-label={tooltip}
-      data-testid={testId}
-      data-has-right-element={!!rightIcon}
-      data-has-left-element={!!leftIcon}
-      className={cn(
-        buttonVariants({
-          mode,
-          size,
-          intent: intent || defaultIntent,
-          variant,
-          className,
-          fullWidth,
-        })
-      )}
-      {...ariaProps}
-      {...countdownProps}
-      {...restProps}
-    >
-      {isLoading && (
-        <Center className="spinner absolute inset-0 text-transparent">
-          <Spinner />
-        </Center>
-      )}
-
-      {/* badge */}
-      {withBadge && (
-        <Float position="top-right">
-          <ButtonBadge
-            badgeNumber={badgeNumber || 0}
-            className="border-gray-1 border"
-          />
-        </Float>
-      )}
-
-      {/* left icon */}
-      {leftIcon}
-
-      {/* children */}
-      <Slot.Slottable>{children as React.ReactNode}</Slot.Slottable>
-
-      {/* countdown  */}
-      {hasCountdown && isCounting && (
-        <ButtonBadge
-          intent="secondary"
-          badgeNumber={count}
-          maxVisibleNumber={99}
-        />
-      )}
-
-      {/* right icon */}
-      {rightIcon}
-    </Comp>
-  )
-
-  if (tooltip) {
-    return (
-      <TooltipTrigger delay={tooltipDelay} closeDelay={100}>
-        {asChild ? <Focusable>{button}</Focusable> : button}
-        <Tooltip style={{ zIndex: 100000000 }} placement={tooltipPlacement}>
-          {tooltip}
-        </Tooltip>
-      </TooltipTrigger>
-    )
-  }
-
-  return button
-}
-
-const badgeVariants = cva(
-  "bg-error-9 flex min-h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] leading-[14px] text-white",
-  {
-    variants: {
-      intent: {
-        primary: "bg-accent-9",
-        secondary: "bg-gray-9",
-        danger: "bg-error-9",
-      },
-    },
-    defaultVariants: {
-      intent: "danger",
-    },
-  }
-)
-
-interface ButtonBadgeProps {
-  badgeNumber?: number
-  className?: string
-  maxVisibleNumber?: number
-  intent?: "primary" | "secondary" | "danger"
-}
-
-function ButtonBadge({
-  badgeNumber,
-  className,
-  maxVisibleNumber = 9,
-  intent,
-}: ButtonBadgeProps) {
-  return (
-    <div
-      className={cn(
-        badgeVariants({ intent }),
-        badgeNumber && badgeNumber > maxVisibleNumber && "pr-[3px]",
-        !badgeNumber && "min-h-3 min-w-3",
-        className
-      )}
-    >
-      {badgeNumber ? formatCount(badgeNumber, maxVisibleNumber) : ""}
-    </div>
-  )
-}
-
-export { Button, ButtonBadge, buttonVariants }
-export type { ButtonProps }

package/src/components/Button.variants.tsx

@@ -1,186 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-
-export const buttonVariants = cva(
-  [
-    "text-gray-12 ring-offset-gray-1 relative inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-md text-sm font-medium whitespace-nowrap no-underline transition-[transform,background-color] duration-100 select-none",
-    /* SVGs */
-    "[&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:stroke-2",
-    /* Pressed */
-    "active:transform-[scale(0.98)]",
-    /* Disabled */
-    "disabled:cursor-not-allowed disabled:opacity-55",
-    /* Loading */
-    "data-pending:text-transparent data-pending:[&>.spinner]:text-white",
-    /* Focus Visible */
-    "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
-    /* Resets */
-    "focus-visible:outline-none",
-  ],
-  {
-    variants: {
-      mode: {
-        default: "",
-        icon: "",
-      },
-      size: {
-        sm: [
-          "h-7 px-2 text-[13px]",
-          /* Optically align elements */
-          "data-[has-left-element=true]:pl-1.5 data-[has-right-element=true]:pr-1.5",
-        ],
-        md: [
-          "h-8 px-3 py-2",
-          /* Optically align elements */
-          "data-[has-left-element=true]:pl-2 data-[has-right-element=true]:pr-2",
-        ],
-        lg: [
-          "h-10 gap-2 px-4",
-          /* Optically align elements */
-          "data-[has-left-element=true]:pl-[10px] data-[has-right-element=true]:pr-[10px]",
-        ],
-      },
-      intent: {
-        primary: "ring-accent-7",
-        secondary: "ring-gray-7",
-        danger: "ring-error-7",
-      },
-      variant: {
-        solid: "",
-        outline: "",
-        ghost: "",
-        minimal: "",
-      },
-      fullWidth: {
-        true: "w-full",
-      },
-    },
-    compoundVariants: [
-      /* Primary */
-      {
-        variant: "solid",
-        intent: "primary",
-        className: [
-          "bg-accent-9 text-accent-contrast hover:not-disabled:bg-accent-10",
-          "border border-black/5 dark:border-white/10",
-        ],
-      },
-      {
-        variant: "outline",
-        intent: "primary",
-        className: [
-          "bg-accent-2 border-accent-7 text-accent-11 hover:not-disabled:bg-accent-3 border",
-          "data-pending:[&>.spinner]:text-accent-11",
-        ],
-      },
-      {
-        variant: "ghost",
-        intent: "primary",
-        className: [
-          "text-accent-11 hover:not-disabled:bg-accent-3",
-          "data-pending:[&>.spinner]:text-accent-11 data-pending:bg-accent-3",
-        ],
-      },
-      {
-        variant: "minimal",
-        intent: "primary",
-        className: [
-          "text-accent-11 bg-accent-3 hover:not-disabled:bg-accent-4",
-          "data-pending:[&>.spinner]:text-accent-11",
-        ],
-      },
-
-      /* Secondary */
-      {
-        variant: "solid",
-        intent: "secondary",
-        className: [
-          "bg-gray-3 border-gray-3 hover:not-disabled:bg-gray-4 hover:not-disabled:border-gray-4 border",
-          "data-pending:[&>.spinner]:text-gray-11",
-        ],
-      },
-      {
-        variant: "outline",
-        intent: "secondary",
-        className: [
-          "bg-gray-2 border-gray-7 hover:not-disabled:bg-gray-3 border",
-          "data-pending:[&>.spinner]:text-gray-11",
-        ],
-      },
-      {
-        variant: "ghost",
-        intent: "secondary",
-        className: [
-          "hover:not-disabled:bg-gray-3",
-          "data-pending:[&>.spinner]:text-gray-11 data-pending:bg-gray-3",
-        ],
-      },
-      {
-        variant: "minimal",
-        intent: "secondary",
-        className: [
-          "bg-gray-3 hover:not-disabled:bg-gray-4",
-          "data-pending:[&>.spinner]:text-gray-11",
-        ],
-      },
-
-      /* Danger */
-      {
-        variant: "solid",
-        intent: "danger",
-        className: [
-          "bg-error-9 hover:not-disabled:bg-error-10 text-white",
-          "border border-black/5 dark:border-white/10",
-        ],
-      },
-      {
-        variant: "outline",
-        intent: "danger",
-        className: [
-          "bg-error-2 text-error-11 border-error-7 hover:not-disabled:bg-error-3 border",
-          "data-pending:[&>.spinner]:text-error-11",
-        ],
-      },
-      {
-        variant: "ghost",
-        intent: "danger",
-        className: [
-          "text-error-11 hover:not-disabled:bg-error-3",
-          "data-pending:[&>.spinner]:text-error-11 data-pending:bg-error-3",
-        ],
-      },
-      {
-        variant: "minimal",
-        intent: "danger",
-        className: [
-          "text-error-11 bg-error-3 hover:not-disabled:bg-error-4",
-          "data-pending:[&>.spinner]:text-error-11",
-        ],
-      },
-
-      /* Mode */
-      {
-        mode: "icon",
-        size: "sm",
-        className: ["size-7 [&_svg]:size-4"],
-      },
-      {
-        mode: "icon",
-        size: "md",
-        className: ["size-8 [&_svg]:size-[18px]"],
-      },
-      {
-        mode: "icon",
-        size: "lg",
-        className: ["size-10 [&_svg]:size-5"],
-      },
-    ],
-    defaultVariants: {
-      variant: "solid",
-      intent: "primary",
-      size: "md",
-      mode: "default",
-    },
-  }
-)
-
-export type ButtonVariantProps = VariantProps<typeof buttonVariants>

package/src/components/ButtonGroup.tsx

@@ -1,56 +0,0 @@
-import { Separator } from "@eggspot/ui/components/Separator"
-import { cn } from "@eggspot/ui/lib/utils"
-import { cva, type VariantProps } from "class-variance-authority"
-
-const buttonGroupVariants = cva(
-  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>input]:flex-1",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-        vertical:
-          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
-  }
-)
-
-function ButtonGroup({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="button-group"
-      data-orientation={orientation}
-      className={cn(buttonGroupVariants({ orientation }), className)}
-      {...props}
-    />
-  )
-}
-
-function ButtonGroupSeparator({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="button-group-separator"
-      orientation={orientation}
-      className={cn(
-        "bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { ButtonGroup, ButtonGroupSeparator, buttonGroupVariants }