@cryptlex/web-components 5.1.0 → 5.2.0

package/lib/components/ui/calendar.tsx

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

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

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

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

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

@@ -0,0 +1,10 @@
+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)} />;
+}