@eggspot/ui 0.0.2 → 0.0.3

package/src/components/Sheet.tsx

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

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

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

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

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

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

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

package/src/lib/utils.ts

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

@@ -1,27 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "display": "Default",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@eggspot/ui/*": ["./src/*"]
-    },
-    "declaration": true,
-    "declarationMap": true,
-    "esModuleInterop": true,
-    "incremental": false,
-    "isolatedModules": true,
-    "lib": ["es2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "moduleDetection": "force",
-    "moduleResolution": "bundler",
-    "noUncheckedIndexedAccess": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "target": "ES2022",
-    "jsx": "react-jsx"
-  },
-  "include": ["."],
-  "exclude": ["node_modules", "dist"]
-}

package/tsconfig.lint.json

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