@cryptlex/web-components 5.2.0 → 5.3.0-alpha01

package/lib/components/ui/calendar.tsx

@@ -1,220 +0,0 @@
-import { getLocalTimeZone, today } from "@internationalized/date"
-import * as React from "react"
-import {
-  Calendar as AriaCalendar,
-  CalendarCell as AriaCalendarCell,
-  CalendarCellProps as AriaCalendarCellProps,
-  CalendarGrid as AriaCalendarGrid,
-  CalendarGridBody as AriaCalendarGridBody,
-  CalendarGridBodyProps as AriaCalendarGridBodyProps,
-  CalendarGridHeader as AriaCalendarGridHeader,
-  CalendarGridProps as AriaCalendarGridProps,
-  CalendarHeaderCell as AriaCalendarHeaderCell,
-  CalendarHeaderCellProps as AriaCalendarHeaderCellProps,
-  CalendarProps as AriaCalendarProps,
-  DateValue as AriaDateValue,
-  Heading as AriaHeading,
-  RangeCalendar as AriaRangeCalendar,
-  RangeCalendarProps as AriaRangeCalendarProps,
-  RangeCalendarStateContext as AriaRangeCalendarStateContext,
-  composeRenderProps,
-  Text,
-  useLocale
-} from "react-aria-components"
-
-import { Button, buttonVariants } from "lib/components/ui/button"
-import { cn } from "lib/utils/primitives"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-
-export function CalendarHeading(props: React.HTMLAttributes<HTMLElement>) {
-  let { direction } = useLocale()
-
-  return (
-    <header className="flex w-full items-center gap-1 px-1 pb-4" {...props}>
-      <Button
-        slot="previous"
-        size='none'
-        className={cn(
-          "size-7 bg-transparent p-0 opacity-50",
-          /* Hover */
-          "data-[hovered]:opacity-100"
-        )}
-      >
-        {direction === "rtl" ? (
-          <ChevronRight aria-hidden />
-        ) : (
-          <ChevronLeft aria-hidden />
-        )}
-      </Button>
-      <AriaHeading className="grow text-center text-sm font-medium" />
-      <Button
-        slot="next"
-        className={cn(
-          "size-7 bg-transparent p-0 opacity-50",
-          /* Hover */
-          "data-[hovered]:opacity-100"
-        )}
-      >
-        {direction === "rtl" ? (
-          <ChevronLeft aria-hidden />
-        ) : (
-          <ChevronRight aria-hidden />
-        )}
-      </Button>
-    </header>
-  )
-}
-
-export function CalendarGrid({ className, ...props }: AriaCalendarGridProps) {
-  return (
-    <AriaCalendarGrid
-      className={cn(
-        " border-separate border-spacing-x-0 border-spacing-y-1 ",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export const CalendarGridHeader = AriaCalendarGridHeader;
-
-export function CalendarHeaderCell({
-  className,
-  ...props
-}: AriaCalendarHeaderCellProps) {
-  return (
-    <AriaCalendarHeaderCell
-      className={cn(
-        "w-9 text-xs font-normal text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export function CalendarGridBody({
-  className,
-  ...props
-}: AriaCalendarGridBodyProps) {
-  return (
-    <AriaCalendarGridBody className={cn("[&>tr>td]:p-0", className)} {...props} />
-  )
-}
-
-export function CalendarCell({ className, ...props }: AriaCalendarCellProps) {
-  const isRange = Boolean(React.useContext(AriaRangeCalendarStateContext))
-  return (
-    <AriaCalendarCell
-      className={composeRenderProps(className, (className, renderProps) =>
-        cn(
-          buttonVariants({ variant: "ghost", size: 'none' }),
-          "relative flex size-9 items-center justify-center p-0 text-sm font-normal",
-          /* Disabled */
-          renderProps.isDisabled && "text-muted-foreground opacity-50",
-          /* Selected */
-          renderProps.isSelected &&
-          "bg-primary text-primary-foreground data-[focused]:bg-primary  data-[focused]:text-primary-foreground",
-          /* Hover */
-          renderProps.isHovered &&
-          renderProps.isSelected &&
-          (renderProps.isSelectionStart ||
-            renderProps.isSelectionEnd ||
-            !isRange) &&
-          "data-[hovered]:bg-primary data-[hovered]:text-primary-foreground",
-          /* Selection Start/End */
-          renderProps.isSelected &&
-          isRange &&
-          !renderProps.isSelectionStart &&
-          !renderProps.isSelectionEnd &&
-          "rounded-none bg-accent text-accent-foreground",
-          /* Outside Month */
-          renderProps.isOutsideMonth &&
-          "text-muted-foreground opacity-50 data-[selected]:bg-accent/50 data-[selected]:text-muted-foreground data-[selected]:opacity-30",
-          /* Current Date */
-          renderProps.date.compare(today(getLocalTimeZone())) === 0 &&
-          !renderProps.isSelected &&
-          "bg-accent text-accent-foreground",
-          /* Unavailable Date */
-          renderProps.isUnavailable && "cursor-default text-destructive ",
-          renderProps.isInvalid &&
-          "bg-destructive text-destructive-foreground data-[focused]:bg-destructive data-[hovered]:bg-destructive data-[focused]:text-destructive-foreground data-[hovered]:text-destructive-foreground",
-          className
-        )
-      )}
-      {...props}
-    />
-  )
-}
-
-interface CalendarProps<T extends AriaDateValue>
-  extends AriaCalendarProps<T> {
-  errorMessage?: string
-}
-
-export function Calendar<T extends AriaDateValue>({
-  errorMessage,
-  className,
-  ...props
-}: CalendarProps<T>) {
-  return (
-    <AriaCalendar
-      className={composeRenderProps(className, (className) =>
-        cn("w-fit", className)
-      )}
-      {...props}
-    >
-      <CalendarHeading />
-      <CalendarGrid>
-        <CalendarGridHeader>
-          {(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
-        </CalendarGridHeader>
-        <CalendarGridBody>
-          {(date) => <CalendarCell date={date} />}
-        </CalendarGridBody>
-      </CalendarGrid>
-      {errorMessage && (
-        <Text className="text-sm text-destructive" slot="errorMessage">
-          {errorMessage}
-        </Text>
-      )}
-    </AriaCalendar>
-  )
-}
-
-interface RangeCalendarProps<T extends AriaDateValue>
-  extends AriaRangeCalendarProps<T> {
-  errorMessage?: string
-}
-
-export function RangeCalendar<T extends AriaDateValue>({
-  errorMessage,
-  className,
-  ...props
-}: RangeCalendarProps<T>) {
-  return (
-    <AriaRangeCalendar
-      className={composeRenderProps(className, (className) =>
-        cn("w-fit", className)
-      )}
-      {...props}
-    >
-      <CalendarHeading />
-      <CalendarGrid>
-        <CalendarGridHeader>
-          {(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
-        </CalendarGridHeader>
-        <CalendarGridBody>
-          {(date) => <CalendarCell date={date} />}
-        </CalendarGridBody>
-      </CalendarGrid>
-      {errorMessage && (
-        <Text slot="errorMessage" className="text-sm text-destructive">
-          {errorMessage}
-        </Text>
-      )}
-    </AriaRangeCalendar>
-  )
-}
-

package/lib/components/ui/card.tsx

@@ -1,58 +0,0 @@
-import { cn } from "lib/utils/primitives";
-import type * as React from "react";
-
-export function Card({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			className={cn(
-				"flex flex-col p-icon border border-border bg-card text-card-foreground",
-				className,
-			)}
-			{...props}
-		/>
-	);
-}
-
-export function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			className={cn("flex flex-col gap-y-1 pb-icon shrink-0", className)}
-			{...props}
-		/>
-	);
-}
-
-
-export function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
-	return (
-		<h3 className={cn("h4 leading-none", className)} {...props} />
-	);
-}
-
-
-export function CardDescription({
-	className,
-	...props
-}: React.ComponentProps<"p">) {
-	return (
-		<p className={cn("caption", className)} {...props} />
-	);
-}
-
-export function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div className={cn("grow body", className)} {...props} />
-	);
-}
-
-
-export function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			className={cn("flex items-center w-full pt-icon gap-2 justify-end", className)}
-			{...props}
-		/>
-	);
-}
-
-

package/lib/components/ui/dialog.tsx

@@ -1,172 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-import * as React from "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"
-
-import { Button } from "lib/components/ui/button"
-import { cn } from "lib/utils/primitives"
-import { X } from "lucide-react"
-
-const sheetVariants = cva(
-  [
-    "fixed z-50 gap-4 bg-popover transition ease-in-out",
-    "data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0",
-  ],
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm",
-      },
-    },
-  }
-)
-
-export const DialogTrigger = AriaDialogTrigger
-
-export const DialogOverlay = ({
-  className,
-  isDismissable = true,
-  ...props
-}: AriaModalOverlayProps) => (
-  <AriaModalOverlay
-    isDismissable={isDismissable}
-    className={composeRenderProps(className, (className) =>
-      cn(
-        "fixed inset-0 z-50 bg-card/20",
-        /* Exiting */
-        "data-[exiting]:duration-100 data-[exiting]:animate-out",
-        /* Entering */
-        "data-[entering]:animate-in",
-        className
-      )
-    )}
-    {...props}
-  />
-)
-
-export interface DialogContentProps
-  extends Omit<React.ComponentProps<typeof AriaModal>, "children">,
-  VariantProps<typeof sheetVariants> {
-  children?: AriaDialogProps["children"]
-  role?: AriaDialogProps["role"]
-  closeButton?: boolean
-}
-
-export function DialogContent({
-  className,
-  children,
-  side,
-  role,
-  closeButton = true,
-  ...props
-}: DialogContentProps) {
-  return (
-    <AriaModal
-      className={composeRenderProps(className, (className) =>
-        cn(
-          side
-            ? sheetVariants({ side, className: "h-full p-6" })
-            : ["fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-popover p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full"],
-          className
-        )
-      )}
-      {...props}
-    >
-      <AriaDialog
-        role={role}
-        className={cn(!side && "grid h-full gap-4 relative", "h-full outline-none")}
-      >
-        {composeRenderProps(children, (children, renderProps) => (
-          <>
-            {children}
-            {closeButton && (
-              <div className="absolute right-1 top-1">
-                <Button
-                  size={'icon'}
-                  variant={'destructive'}
-                  onPress={renderProps.close}
-                  className="opacity-70 transition-opacity data-[hovered]:opacity-100"
-                >
-                  <X />
-                  <span className="sr-only">Close</span>
-                </Button>
-              </div>
-            )}
-          </>
-        ))}
-      </AriaDialog>
-    </AriaModal>
-  )
-}
-
-export function DialogHeader({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col gap-y-2 text-center sm:text-left",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export function DialogFooter({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export function DialogTitle({ className, ...props }: AriaHeadingProps) {
-  return (
-    <AriaHeading
-      slot="title"
-      className={cn(
-        "text-lg font-semibold leading-none tracking-tight",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export function DialogDescription({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLParagraphElement>) {
-  return (
-    <p
-      className={cn(
-        "flex flex-col gap-y-1 text-center sm:text-left",
-        className
-      )}
-      {...props}
-    />
-  )
-}

package/lib/components/ui/disclosure.tsx

@@ -1,113 +0,0 @@
-import { ChevronDownIcon } from "lucide-react"
-import React, { useContext } from "react"
-import {
-  Disclosure as AriaDisclosure,
-  DisclosureGroup as AriaDisclosureGroup,
-  DisclosureGroupProps as AriaDisclosureGroupProps,
-  DisclosurePanel as AriaDisclosurePanel,
-  DisclosurePanelProps as AriaDisclosurePanelProps,
-  DisclosureProps as AriaDisclosureProps,
-  Button,
-  ButtonProps,
-  composeRenderProps,
-  DisclosureGroupStateContext,
-  Heading,
-} from "react-aria-components"
-
-import { cn } from "lib/utils/primitives"
-
-export interface DisclosureProps extends AriaDisclosureProps {
-  children: React.ReactNode
-}
-
-export function Disclosure({ children, className, ...props }: DisclosureProps) {
-  let isInGroup = useContext(DisclosureGroupStateContext) !== null
-  return (
-    <AriaDisclosure
-      {...props}
-      className={composeRenderProps(className, (className, _) =>
-        cn(
-          "group min-w-64",
-          isInGroup && "border-0 border-b last:border-b-0",
-          className
-        )
-      )}
-    >
-      {children}
-    </AriaDisclosure>
-  )
-}
-
-export interface DisclosureHeaderProps {
-  children: React.ReactNode
-  className?: ButtonProps["className"]
-}
-
-export function DisclosureHeader({ children, className }: DisclosureHeaderProps) {
-  return (
-    <Heading className="flex">
-      <Button
-        slot="trigger"
-        className={composeRenderProps(className, (className) => {
-          return cn(
-            "group flex flex-1 items-center justify-between rounded-md py-4 font-medium ring-offset-background transition-all hover:underline",
-            "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-            "data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2",
-            "outline-none",
-            className
-          )
-        })}
-      >
-        {children}
-        <ChevronDownIcon
-          aria-hidden
-          className={cn(
-            "size-4 shrink-0 transition-transform duration-200",
-            "group-data-[expanded]:rotate-180",
-            "group-data-[disabled]:opacity-50"
-          )}
-        />
-      </Button>
-    </Heading>
-  )
-}
-
-export interface DisclosurePanelProps extends AriaDisclosurePanelProps {
-  children: React.ReactNode
-}
-
-export function DisclosurePanel({
-  children,
-  className,
-  ...props
-}: DisclosurePanelProps) {
-  return (
-    <AriaDisclosurePanel
-      {...props}
-      className={"overflow-hidden text-sm transition-all"}
-    >
-      <div className={cn("pb-4 pt-0", className)}>{children}</div>
-    </AriaDisclosurePanel>
-  )
-}
-
-export interface DisclosureGroupProps extends AriaDisclosureGroupProps {
-  children: React.ReactNode
-}
-
-export function DisclosureGroup({
-  children,
-  className,
-  ...props
-}: DisclosureGroupProps) {
-  return (
-    <AriaDisclosureGroup
-      {...props}
-      className={composeRenderProps(className, (className, _) =>
-        cn("", className)
-      )}
-    >
-      {children}
-    </AriaDisclosureGroup>
-  )
-}

package/lib/components/ui/list-box.tsx

@@ -1,86 +0,0 @@
-import {
-  Collection as AriaCollection,
-  Header as AriaHeader,
-  ListBox as AriaListBox,
-  ListBoxItem as AriaListBoxItem,
-  ListBoxItemProps as AriaListBoxItemProps,
-  ListBoxProps as AriaListBoxProps,
-  composeRenderProps
-} from "react-aria-components"
-
-import { cn } from "lib/utils/primitives"
-import { Check } from "lucide-react"
-
-
-export const ListBoxCollection = AriaCollection
-
-export function ListBox<T extends object>({
-  className,
-  ...props
-}: AriaListBoxProps<T>) {
-  return (
-    <AriaListBox
-      className={composeRenderProps(className, (className) =>
-        cn(
-          className,
-          "group overflow-auto border bg-popover p-1 text-popover-foreground shadow-md outline-none",
-          /* Empty */
-          "data-[empty]:p-6 data-[empty]:text-center data-[empty]:text-sm"
-        )
-      )}
-      {...props}
-    />
-  )
-}
-
-export function 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 select-none items-center px-2 py-1.5 text-sm outline-none",
-          /* Disabled */
-          "disabled-muted",
-          /* Focused */
-          "data-[focused]:bg-accent data-[focused]:text-accent-foreground",
-          /* Hovered */
-          "data-[hovered]:bg-accent data-[hovered]:text-accent-foreground",
-          /* Selection */
-          "data-[selection-mode]:pl-input",
-          className
-        )
-      )}
-      {...props}
-    >
-      {composeRenderProps(children, (children, renderProps) => (
-        <>
-          {renderProps.isSelected && (
-            <span className="absolute left-2 flex size-icon items-center justify-center">
-              <Check className="size-icon" />
-            </span>
-          )}
-          {children}
-        </>
-      ))}
-    </AriaListBoxItem>
-  )
-}
-
-export function ListBoxHeader({
-  className,
-  ...props
-}: React.ComponentProps<typeof AriaHeader>) {
-  return (
-    <AriaHeader
-      className={cn("py-1.5 pl-input pr-2 text-sm font-semibold", className)}
-      {...props}
-    />
-  )
-}

package/lib/components/ui/loader.tsx

@@ -1,10 +0,0 @@
-import { cn } from "lib/utils/primitives";
-import { Loader2 } from "lucide-react";
-
-interface LoaderProps {
-	className?: string; // Define props interface
-}
-
-export function Loader({ className }: LoaderProps) {
-	return <Loader2 className={cn(`animate-spin size-icon`, className)} />;
-}