@eggspot/ui 0.0.0 → 0.0.3

package/src/components/Layout.tsx

@@ -1,129 +0,0 @@
-/**
- * @deprecated This file is deprecated and should not be used in new code.
- * All components in this file (HStack, VStack, Stack, Spacer, Center, Circle, Square, Float) are deprecated.
- */
-
-import { cn } from "@eggspot/ui/lib/utils"
-import { cva, VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
-
-interface LayoutProps extends React.ComponentProps<"div"> {
-  asChild?: boolean
-}
-
-/**
- * @deprecated This component is deprecated and should not be used in new code.
- */
-function HStack({ className, asChild, ...props }: LayoutProps) {
-  const Comp = asChild ? Slot.Root : "div"
-
-  return (
-    <Comp className={cn("flex items-center gap-2", className)} {...props} />
-  )
-}
-
-/**
- * @deprecated This component is deprecated and should not be used in new code.
- */
-function VStack({ className, asChild, ...props }: LayoutProps) {
-  const Comp = asChild ? Slot.Root : "div"
-
-  return (
-    <Comp
-      className={cn("flex flex-col items-center gap-2", className)}
-      {...props}
-    />
-  )
-}
-
-/**
- * @deprecated This component is deprecated and should not be used in new code.
- */
-function Stack({ className, asChild, ...props }: LayoutProps) {
-  const Comp = asChild ? Slot.Root : "div"
-
-  return <Comp className={cn("flex flex-col gap-2", className)} {...props} />
-}
-
-/**
- * @deprecated This component is deprecated and should not be used in new code.
- */
-function Spacer({ className, asChild, ...props }: LayoutProps) {
-  const Comp = asChild ? Slot.Root : "div"
-
-  return <Comp className={cn("flex-1", className)} {...props} />
-}
-
-/**
- * @deprecated This component is deprecated and should not be used in new code.
- */
-function Center({ className, asChild, ...props }: LayoutProps) {
-  const Comp = asChild ? Slot.Root : "div"
-
-  return (
-    <Comp
-      className={cn("flex items-center justify-center", className)}
-      {...props}
-    />
-  )
-}
-
-/**
- * @deprecated This component is deprecated and should not be used in new code.
- */
-function Circle({ className, asChild, ...props }: LayoutProps) {
-  const Comp = asChild ? Slot.Root : "div"
-
-  return (
-    <Comp
-      className={cn(
-        "flex size-4 items-center justify-center rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-/**
- * @deprecated This component is deprecated and should not be used in new code.
- */
-function Square({ className, asChild, ...props }: LayoutProps) {
-  const Comp = asChild ? Slot.Root : "div"
-
-  return (
-    <Comp
-      className={cn("flex size-4 items-center justify-center", className)}
-      {...props}
-    />
-  )
-}
-
-const floatVariants = cva("absolute z-[1]", {
-  variants: {
-    position: {
-      ["top-right"]: "top-0 right-0 translate-x-1/2 -translate-y-1/2",
-      ["top-left"]: "top-0 left-0 -translate-x-1/2 -translate-y-1/2",
-      ["bottom-right"]: "right-0 bottom-0 translate-x-1/2 translate-y-1/2",
-      ["bottom-left"]: "bottom-0 left-0 -translate-x-1/2 translate-y-1/2",
-    },
-  },
-  defaultVariants: {
-    position: "top-right",
-  },
-})
-
-interface FloatProps
-  extends React.ComponentProps<"div">,
-    VariantProps<typeof floatVariants> {}
-
-/**
- * @deprecated This component is deprecated and should not be used in new code.
- */
-function Float({ className, position, ...props }: FloatProps) {
-  return (
-    <div className={cn(floatVariants({ position, className }))} {...props} />
-  )
-}
-
-export { Center, Circle, Float, HStack, Spacer, Square, Stack, VStack }

package/src/components/ListBox.tsx

@@ -1,97 +0,0 @@
-"use client"
-
-import { cn } from "@eggspot/ui/lib/utils"
-import { Check } from "lucide-react"
-import {
-  Collection as AriaCollection,
-  Header as AriaHeader,
-  ListBox as AriaListBox,
-  ListBoxItem as AriaListBoxItem,
-  ListBoxItemProps as AriaListBoxItemProps,
-  ListBoxProps as AriaListBoxProps,
-  ListBoxSection as AriaListBoxSection,
-  composeRenderProps,
-} from "react-aria-components"
-
-const ListBoxSection = AriaListBoxSection
-
-const ListBoxCollection = AriaCollection
-
-function ListBox<T extends object>({
-  className,
-  ...props
-}: AriaListBoxProps<T>) {
-  return (
-    <AriaListBox
-      className={composeRenderProps(className, (className) =>
-        cn(
-          className,
-          "group bg-popover text-gray-12 overflow-auto rounded-md border p-1 shadow-md outline-none",
-          /* Empty */
-          "data-[empty]:p-6 data-[empty]:text-center data-[empty]:text-sm"
-        )
-      )}
-      {...props}
-    />
-  )
-}
-
-const ListBoxItem = <T extends object>({
-  className,
-  children,
-  ...props
-}: AriaListBoxItemProps<T>) => {
-  return (
-    <AriaListBoxItem
-      textValue={
-        props.textValue || (typeof children === "string" ? children : undefined)
-      }
-      className={composeRenderProps(className, (className) =>
-        cn(
-          "relative flex w-full cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none",
-          /* Disabled */
-          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-          /* Focused */
-          "data-[focused]:bg-accent-2 data-[focused]:text-accent-9",
-          /* Hovered */
-          "data-[hovered]:bg-accent-2 data-[hovered]:text-accent-9",
-          /* Selection */
-          "data-[selection-mode]:pl-8",
-          className
-        )
-      )}
-      {...props}
-    >
-      {composeRenderProps(children, (children, renderProps) => (
-        <>
-          {renderProps.isSelected && (
-            <span className="absolute left-2 flex size-4 items-center justify-center">
-              <Check className="size-4" />
-            </span>
-          )}
-          {children}
-        </>
-      ))}
-    </AriaListBoxItem>
-  )
-}
-
-function ListBoxHeader({
-  className,
-  ...props
-}: React.ComponentProps<typeof AriaHeader>) {
-  return (
-    <AriaHeader
-      className={cn("py-1.5 pr-2 pl-8 text-sm font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  ListBox,
-  ListBoxCollection,
-  ListBoxHeader,
-  ListBoxItem,
-  ListBoxSection,
-}

package/src/components/Menu.tsx

@@ -1,152 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ListBoxCollection,
-  ListBoxSection,
-} from "@eggspot/ui/components/ListBox"
-import { Popover } from "@eggspot/ui/components/Popover"
-import { cn } from "@eggspot/ui/lib/utils"
-import { Check, ChevronRight, Circle } from "lucide-react"
-import {
-  Header as AriaHeader,
-  Keyboard as AriaKeyboard,
-  Menu as AriaMenu,
-  MenuItem as AriaMenuItem,
-  MenuItemProps as AriaMenuItemProps,
-  MenuProps as AriaMenuProps,
-  MenuTrigger as AriaMenuTrigger,
-  Separator as AriaSeparator,
-  SeparatorProps as AriaSeparatorProps,
-  SubmenuTrigger as AriaSubmenuTrigger,
-  composeRenderProps,
-  PopoverProps,
-} from "react-aria-components"
-
-const MenuTrigger = AriaMenuTrigger
-
-const MenuSubTrigger = AriaSubmenuTrigger
-
-const MenuSection = ListBoxSection
-
-const MenuCollection = ListBoxCollection
-
-function MenuPopover({ className, ...props }: PopoverProps) {
-  return (
-    <Popover
-      className={composeRenderProps(className, (className) =>
-        cn("w-auto", className)
-      )}
-      {...props}
-    />
-  )
-}
-
-const Menu = <T extends object>({ className, ...props }: AriaMenuProps<T>) => (
-  <AriaMenu
-    className={cn(
-      "max-h-[inherit] overflow-auto rounded-md p-1.5 outline-0 [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]",
-      className
-    )}
-    {...props}
-  />
-)
-
-const MenuItem = ({ children, className, ...props }: AriaMenuItemProps) => (
-  <AriaMenuItem
-    textValue={
-      props.textValue || (typeof children === "string" ? children : undefined)
-    }
-    className={composeRenderProps(className, (className) =>
-      cn(
-        "text-gray-12 relative flex cursor-pointer items-center gap-2.5 rounded-sm px-2.5 py-1.5 text-sm outline-none select-none",
-        /* Disabled */
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        /* Focused */
-        "data-[focused]:bg-gray-3",
-        /* Selection Mode */
-        "data-[selection-mode]:pl-8",
-        className
-      )
-    )}
-    {...props}
-  >
-    {composeRenderProps(children, (children, renderProps) => (
-      <>
-        <span className="absolute left-2 flex size-4 items-center justify-center">
-          {renderProps.isSelected && (
-            <>
-              {renderProps.selectionMode == "single" && (
-                <Circle className="size-2 fill-current" />
-              )}
-              {renderProps.selectionMode == "multiple" && (
-                <Check className="size-4" />
-              )}
-            </>
-          )}
-        </span>
-
-        {children}
-
-        {renderProps.hasSubmenu && (
-          <ChevronRight className="text-gray-11 ml-auto size-4" />
-        )}
-      </>
-    ))}
-  </AriaMenuItem>
-)
-
-interface MenuHeaderProps extends React.ComponentProps<typeof AriaHeader> {
-  inset?: boolean
-  separator?: boolean
-}
-
-const MenuHeader = ({
-  className,
-  inset,
-  separator = true,
-  ...props
-}: MenuHeaderProps) => (
-  <AriaHeader
-    className={cn(
-      "px-3 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      separator && "border-b-border -mx-1 mb-1 border-b pb-2.5",
-      className
-    )}
-    {...props}
-  />
-)
-
-const MenuSeparator = ({ className, ...props }: AriaSeparatorProps) => (
-  <AriaSeparator
-    className={cn("bg-gray-6 -mx-1 my-1 h-px", className)}
-    {...props}
-  />
-)
-
-const MenuKeyboard = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof AriaKeyboard>) => {
-  return (
-    <AriaKeyboard
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Menu,
-  MenuCollection,
-  MenuHeader,
-  MenuItem,
-  MenuKeyboard,
-  MenuPopover,
-  MenuSection,
-  MenuSeparator,
-  MenuSubTrigger,
-  MenuTrigger,
-}
-export type { MenuHeaderProps }

package/src/components/NativeSelect.tsx

@@ -1,77 +0,0 @@
-import * as React from "react"
-import { cn } from "@eggspot/ui/lib/utils"
-import { cva } from "class-variance-authority"
-import { ChevronDownIcon } from "lucide-react"
-
-const nativeSelectVariants = cva(
-  [
-    "placeholder:text-gray-11 text-gray-12 h-8 w-full min-w-0 appearance-none rounded-md bg-transparent px-3 pr-7 text-sm font-medium transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
-    "ring-inset focus-visible:ring-2",
-    "aria-invalid:ring-error-9 aria-invalid:border-error-9",
-  ],
-  {
-    variants: {
-      variant: {
-        outline: "bg-gray-2 border-gray-7 hover:not-disabled:bg-gray-3 border",
-        minimal: "bg-gray-3 hover:not-disabled:bg-gray-4",
-        ghost: "hover:not-disabled:bg-gray-3 bg-transparent",
-      },
-      size: {
-        sm: "h-7 pl-2.5 [&_select-icon]:right-2.5",
-        md: "h-8",
-      },
-    },
-    defaultVariants: {
-      variant: "outline",
-      size: "md",
-    },
-  }
-)
-
-type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
-  variant?: "outline" | "minimal" | "ghost"
-  size?: "sm" | "md"
-}
-
-function NativeSelect({
-  className,
-  variant,
-  size = "md",
-  ...props
-}: NativeSelectProps) {
-  return (
-    <div
-      className="group/native-select relative w-fit has-[select:disabled]:opacity-50"
-      data-slot="native-select-wrapper"
-    >
-      <select
-        data-slot="native-select"
-        className={cn(nativeSelectVariants({ variant, size }), className)}
-        {...props}
-      />
-      <ChevronDownIcon
-        className="select-icon text-gray-12 pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 opacity-50 select-none"
-        data-slot="native-select-icon"
-      />
-    </div>
-  )
-}
-
-function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
-  return <option data-slot="native-select-option" {...props} />
-}
-
-function NativeSelectOptGroup({
-  className,
-  ...props
-}: React.ComponentProps<"optgroup">) {
-  return (
-    <optgroup
-      data-slot="native-select-optgroup"
-      className={cn(className)}
-      {...props}
-    />
-  )
-}
-
-export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }

package/src/components/NumberInput.tsx

@@ -1,114 +0,0 @@
-"use client"
-
-import { FieldGroup } from "@eggspot/ui/components/Field"
-import { Label } from "@eggspot/ui/components/Label"
-import { Separator } from "@eggspot/ui/components/Separator"
-import { cn } from "@eggspot/ui/lib/utils"
-import { ChevronDown, ChevronUp } from "lucide-react"
-import {
-  Button as AriaButton,
-  ButtonProps as AriaButtonProps,
-  Input as AriaInput,
-  InputProps as AriaInputProps,
-  NumberField as AriaNumberField,
-  NumberFieldProps as AriaNumberFieldProps,
-  composeRenderProps,
-} from "react-aria-components"
-
-function NumberFieldInput({ className, ...props }: AriaInputProps) {
-  return (
-    <AriaInput
-      inputMode="numeric"
-      className={composeRenderProps(className, (className) =>
-        cn(
-          "placeholder:text-gray-11 w-fit min-w-0 flex-1 border-transparent pr-2 outline-0 [&::-webkit-search-cancel-button]:hidden",
-          className
-        )
-      )}
-      {...props}
-    />
-  )
-}
-
-function NumberFieldSteppers({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn("absolute right-0 flex items-center", className)}
-      {...props}
-    >
-      <Separator orientation="vertical" className="h-5" />
-      <div className="flex flex-col pr-0.5">
-        <NumberFieldStepper slot="increment" aria-label="Increment">
-          <ChevronUp aria-hidden className="size-4 translate-y-px" />
-        </NumberFieldStepper>
-        <NumberFieldStepper slot="decrement" aria-label="Decrement">
-          <ChevronDown aria-hidden className="size-4 -translate-y-px" />
-        </NumberFieldStepper>
-      </div>
-    </div>
-  )
-}
-
-function NumberFieldStepper({ className, ...props }: AriaButtonProps) {
-  return (
-    <AriaButton
-      className={composeRenderProps(className, (className) =>
-        cn(
-          "flex items-center justify-center px-1 transition-colors",
-          "[&>svg]:text-gray-11 w-auto grow",
-          /** Hover */
-          "data-hovered:[&>svg]:text-gray-12",
-          /** Pressed */
-          "data-pressed:scale-95",
-          className
-        )
-      )}
-      {...props}
-    />
-  )
-}
-
-interface NumberInputProps extends AriaNumberFieldProps {
-  showStepper?: boolean
-  placeholder?: string
-  label?: string
-  withAsterisk?: boolean
-  tooltip?: React.ReactNode
-}
-
-function NumberInput({
-  className,
-  showStepper = false,
-  placeholder,
-  label,
-  withAsterisk,
-  tooltip,
-  formatOptions,
-  ...props
-}: NumberInputProps) {
-  return (
-    <AriaNumberField
-      formatOptions={{ useGrouping: false, ...formatOptions }}
-      className={composeRenderProps(className, (className) =>
-        cn("group flex flex-col gap-2", className)
-      )}
-      {...props}
-    >
-      {label && (
-        <Label withAsterisk={withAsterisk} tooltip={tooltip}>
-          {label}
-        </Label>
-      )}
-      <FieldGroup>
-        <NumberFieldInput placeholder={placeholder} />
-        {showStepper && <NumberFieldSteppers />}
-      </FieldGroup>
-    </AriaNumberField>
-  )
-}
-
-export { NumberInput }
-export type { NumberInputProps }

package/src/components/Popover.tsx

@@ -1,44 +0,0 @@
-"use client"
-
-import { cn } from "@eggspot/ui/lib/utils"
-import {
-  Dialog as AriaDialog,
-  DialogProps as AriaDialogProps,
-  DialogTrigger as AriaDialogTrigger,
-  Popover as AriaPopover,
-  PopoverProps as AriaPopoverProps,
-  composeRenderProps,
-} from "react-aria-components"
-
-const PopoverTrigger = AriaDialogTrigger
-
-const Popover = ({
-  className,
-  offset = 4,
-  animateIn = true,
-  animateOut = true,
-  ...props
-}: AriaPopoverProps & { animateIn?: boolean; animateOut?: boolean }) => (
-  <AriaPopover
-    offset={offset}
-    className={composeRenderProps(className, (className) =>
-      cn(
-        "bg-gray-2 text-gray-12 z-50 rounded-lg border shadow-lg outline-none",
-        /* Entering */
-        animateIn && "data-[entering]:animate-in data-[entering]:fade-in-0",
-        /* Exiting */
-        animateOut && "data-[exiting]:animate-out data-[exiting]:fade-out-0",
-        /* Placement */
-        "data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2",
-        className
-      )
-    )}
-    {...props}
-  />
-)
-
-function PopoverDialog({ className, ...props }: AriaDialogProps) {
-  return <AriaDialog className={cn("p-3.5 outline-0", className)} {...props} />
-}
-
-export { Popover, PopoverDialog, PopoverTrigger }

package/src/components/Provider.tsx

@@ -1,22 +0,0 @@
-"use client"
-
-import { ConfirmDialog } from "@eggspot/ui/components/ConfirmDialog"
-import { Toaster } from "@eggspot/ui/components/Sonner"
-
-interface UIProviderProps {
-  children?: React.ReactNode
-  locale?: string
-}
-
-/**
- * The UIProvider component supplies locale and theme context to the application, as well as toaster and confirm dialog functionality.
- */
-export function UIProvider({ children }: UIProviderProps) {
-  return (
-    <>
-      {children}
-      <Toaster />
-      <ConfirmDialog />
-    </>
-  )
-}