@eggspot/ui 0.0.0

package/src/components/Sheet.tsx

@@ -0,0 +1,147 @@
+"use client"
+
+import React from "react"
+import { Button } from "@eggspot/ui/components/Button"
+import { cn } from "@eggspot/ui/lib/utils"
+import { X } from "lucide-react"
+import {
+  Dialog as AriaDialog,
+  DialogProps as AriaDialogProps,
+  DialogTrigger as AriaDialogTrigger,
+  Heading as AriaHeading,
+  HeadingProps as AriaHeadingProps,
+  Modal as AriaModal,
+  ModalOverlay as AriaModalOverlay,
+  ModalOverlayProps as AriaModalOverlayProps,
+  composeRenderProps,
+} from "react-aria-components"
+
+const Sheet = AriaDialog
+
+const SheetTrigger = AriaDialogTrigger
+
+const SheetOverlay = ({
+  className,
+  isDismissable = true,
+  ...props
+}: AriaModalOverlayProps) => (
+  <AriaModalOverlay
+    isDismissable={isDismissable}
+    className={composeRenderProps(className, (className) =>
+      cn(
+        "fixed inset-0 z-50 bg-black/50 duration-300",
+        /* Exiting */
+        "data-[exiting]:animate-out data-[exiting]:fade-out-0",
+        /* Entering */
+        "data-[entering]:animate-in data-[entering]:fade-in-0",
+        className
+      )
+    )}
+    {...props}
+  />
+)
+
+interface SheetContentProps
+  extends Omit<React.ComponentProps<typeof AriaModal>, "children"> {
+  children?: AriaDialogProps["children"]
+  role?: AriaDialogProps["role"]
+  closeButton?: boolean
+  side?: "top" | "right" | "bottom" | "left"
+}
+
+const SheetContent = ({
+  className,
+  children,
+  role,
+  closeButton = true,
+  side = "right",
+  ...props
+}: SheetContentProps) => (
+  <SheetOverlay>
+    <AriaModal
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "bg-gray-1 data-[entering]:animate-in data-[exiting]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition duration-300 ease-in-out",
+          side === "right" &&
+            "data-[exiting]:slide-out-to-right data-[entering]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[exiting]:slide-out-to-left data-[entering]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[exiting]:slide-out-to-top data-[entering]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[exiting]:slide-out-to-bottom data-[entering]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )
+      )}
+      {...props}
+    >
+      <AriaDialog
+        role={role}
+        className={cn("grid h-full gap-4", "h-full outline-none")}
+      >
+        {composeRenderProps(children, (children, renderProps) => (
+          <>
+            {children}
+            {closeButton && (
+              <Button
+                onClick={renderProps.close}
+                mode="icon"
+                variant="ghost"
+                tooltip="Close"
+                tooltipDelay={2000}
+                className="absolute top-2.5 right-2.5"
+              >
+                <X className="text-gray-11 size-4!" />
+                <span className="sr-only">Close</span>
+              </Button>
+            )}
+          </>
+        ))}
+      </AriaDialog>
+    </AriaModal>
+  </SheetOverlay>
+)
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />
+)
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+
+const SheetTitle = ({ className, ...props }: AriaHeadingProps) => (
+  <AriaHeading
+    slot="title"
+    className={cn("text-gray-11 font-semibold", className)}
+    {...props}
+  />
+)
+
+const SheetDescription = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) => (
+  <p className={cn("text-gray-11 text-sm", className)} {...props} />
+)
+
+export {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetTitle,
+  SheetTrigger,
+}
+export type { SheetContentProps }

package/src/components/Sonner.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import { Button } from "@eggspot/ui/components/Button"
+import {
+  AlertTriangleIcon,
+  CircleCheckIcon,
+  CircleXIcon,
+  InfoIcon,
+  XIcon,
+} from "lucide-react"
+import { toast as sonnerToast, Toaster, ToastT } from "sonner"
+
+interface ToastProps {
+  id: string | number
+  title: string
+  description?: React.ReactNode
+  variant?: "success" | "error" | "info" | "warning" | "neutral"
+}
+
+/** A fully custom toast that still maintains the animations and interactions. */
+function Toast(props: ToastProps) {
+  const { title, description, id, variant = "neutral" } = props
+
+  return (
+    <div className="group bg-gray-2 text-gray-12 relative flex min-h-[64px] w-full items-center gap-3 rounded-xl border px-4 py-2.5 pr-7 shadow-lg md:w-[364px]">
+      <ToastIcon variant={variant} />
+      <div className="flex flex-1 items-center">
+        <div className="w-full">
+          <p className="text-gray-12 text-sm font-semibold">{title}</p>
+          {description && (
+            <div className="text-gray-11 mt-0.5 text-sm">{description}</div>
+          )}
+        </div>
+      </div>
+      <Button
+        size="sm"
+        mode="icon"
+        variant="ghost"
+        onClick={() => sonnerToast.dismiss(id)}
+        className="absolute top-1.5 right-1.5 opacity-0 transition-opacity group-hover:opacity-100"
+      >
+        <XIcon className="text-gray-11 h-4 w-4" />
+      </Button>
+    </div>
+  )
+}
+
+function ToastIcon({ variant }: { variant: ToastProps["variant"] }) {
+  if (variant === "neutral") {
+    return null
+  }
+
+  return (
+    <>
+      {variant === "success" && (
+        <CircleCheckIcon className="text-success-9 size-5" />
+      )}
+      {variant === "error" && <CircleXIcon className="text-error-9 size-5" />}
+      {variant === "info" && <InfoIcon className="text-info-9 size-5" />}
+      {variant === "warning" && (
+        <AlertTriangleIcon className="text-warning-9 size-5" />
+      )}
+    </>
+  )
+}
+
+function createToast(variant: ToastProps["variant"]) {
+  return (
+    props: Omit<ToastProps, "id" | "variant">,
+    options: Pick<ToastT, "position" | "duration"> = {}
+  ) => {
+    return sonnerToast.custom(
+      (id) => <Toast id={id} variant={variant} {...props} />,
+      {
+        position: "bottom-right",
+        ...options,
+      }
+    )
+  }
+}
+
+const success = createToast("success")
+const error = createToast("error")
+const info = createToast("info")
+const warning = createToast("warning")
+const neutral = createToast("neutral")
+
+const toast = {
+  success,
+  error,
+  info,
+  warning,
+  neutral,
+}
+
+export { toast, Toaster }

package/src/components/Spinner.tsx

@@ -0,0 +1,30 @@
+import { cn } from "@eggspot/ui/lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      aria-hidden="true"
+      className={cn("size-5 animate-spin", className)}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+        className="opacity-25"
+      ></circle>
+      <path
+        fill="currentColor"
+        d="M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12zm2 5.291A7.96 7.96 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938z"
+        className="opacity-75"
+      ></path>
+    </svg>
+  )
+}
+
+export { Spinner }

package/src/components/Switch.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { cn } from "@eggspot/ui/lib/utils"
+import {
+  Switch as AriaSwitch,
+  SwitchProps as AriaSwitchProps,
+  composeRenderProps,
+} from "react-aria-components"
+
+const Switch = ({ children, className, ...props }: AriaSwitchProps) => (
+  <AriaSwitch
+    className={composeRenderProps(className, (className) =>
+      cn(
+        "group inline-flex items-center gap-2 text-sm leading-none font-medium data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70",
+        className
+      )
+    )}
+    {...props}
+  >
+    {composeRenderProps(children, (children) => (
+      <>
+        <div
+          className={cn(
+            "peer border-gray-7 inline-flex h-5.5 w-11 shrink-0 cursor-pointer items-center rounded-full border transition-colors",
+            /* Focus Visible */
+            "group-data-[focus-visible]:ring-ring group-data-[focus-visible]:ring-offset-gray-1 group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-offset-2 group-data-[focus-visible]:outline-none",
+            /* Disabled */
+            "group-data-disabled:cursor-not-allowed group-data-disabled:opacity-50",
+            /* Selected */
+            "bg-gray-3 group-data-selected:bg-accent-9 group-data-selected:border-accent-9",
+            /* Readonly */
+            "group-data-readonly:cursor-default",
+            /* Resets */
+            "focus-visible:outline-none"
+          )}
+        >
+          <div
+            className={cn(
+              "bg-gray-9 pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform",
+              /* Selected */
+              "group-data-selected:bg-accent-contrast translate-x-[3px] group-data-selected:translate-x-[24px]"
+            )}
+          />
+        </div>
+        {children}
+      </>
+    ))}
+  </AriaSwitch>
+)
+
+export { Switch }

package/src/components/Text.tsx

@@ -0,0 +1,35 @@
+import { cn } from "@eggspot/ui/lib/utils"
+import { cva, VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+const textVariants = cva("", {
+  variants: {
+    variant: {
+      body1: "text-base",
+      body2: "text-sm",
+      caption: "text-xs",
+      overline: "text-gray-11 text-xs",
+    },
+  },
+  defaultVariants: {
+    variant: "body1",
+  },
+})
+interface TextProps
+  extends React.ComponentProps<"p">,
+    VariantProps<typeof textVariants> {
+  asChild?: boolean
+}
+
+export function Text({
+  className,
+  asChild = false,
+  variant,
+  ...props
+}: TextProps) {
+  const Comp = asChild ? Slot.Root : "p"
+
+  return (
+    <Comp className={cn(textVariants({ variant, className }))} {...props} />
+  )
+}

package/src/components/Tooltip.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import React from "react"
+import { cva } from "class-variance-authority"
+import {
+  Tooltip as AriaTooltip,
+  TooltipProps as AriaTooltipProps,
+  TooltipTrigger as AriaTooltipTrigger,
+  composeRenderProps,
+  OverlayArrow,
+} from "react-aria-components"
+
+export const TooltipTrigger = AriaTooltipTrigger
+
+export interface TooltipProps extends Omit<AriaTooltipProps, "children"> {
+  children: React.ReactNode
+}
+
+const styles = cva(
+  [
+    "bg-gray-2 max-w-lg",
+    "group rounded-md border px-2 py-1 text-sm drop-shadow-lg will-change-transform",
+  ],
+  {
+    variants: {
+      isEntering: {
+        true: 'animate-in fade-in data-[placement="bottom"]:slide-in-from-top-20 data-[placement="top"]:slide-in-from-bottom-20 data-[placement="left"]:slide-in-from-right-20 data-[placement="right"]:slide-in-from-left-20 duration-200 ease-out',
+      },
+      isExiting: {
+        true: 'animate-out fade-out data-[placement="bottom"]:slide-out-to-top-20 data-[placement="top"]:slide-out-to-bottom-20 data-[placement="left"]:slide-out-to-right-20 data-[placement="right"]:slide-out-to-left-20 duration-150 ease-in',
+      },
+    },
+  }
+)
+
+export function Tooltip({ children, ...props }: TooltipProps) {
+  return (
+    <AriaTooltip
+      {...props}
+      offset={10}
+      className={composeRenderProps(props.className, (className, renderProps) =>
+        styles({ ...renderProps, className })
+      )}
+    >
+      <OverlayArrow>
+        <svg
+          width={8}
+          height={8}
+          viewBox="0 0 8 8"
+          className='fill-gray-2 stroke-gray-6 group-data-[placement="bottom"]:rotate-180 group-data-[placement="left"]:-rotate-90 group-data-[placement="right"]:rotate-90'
+        >
+          <path d="M0 0 L4 4 L8 0" />
+        </svg>
+      </OverlayArrow>
+      {children}
+    </AriaTooltip>
+  )
+}

package/src/consts/config.ts

@@ -0,0 +1,2 @@
+export const MIN_YEAR = 1970
+export const MAX_YEAR_FROM_NOW = 20

package/src/lib/utils.ts

@@ -0,0 +1,10 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatCount(num: number, max = 9): string {
+  return num > max ? `${max}+` : num.toString()
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@workspace/typescript-config/react-library.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@eggspot/ui/*": ["./src/*"]
+    }
+  },
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}

package/tsconfig.lint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@workspace/typescript-config/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src", "turbo"],
+  "exclude": ["node_modules", "dist"]
+}