@cryptlex/web-components 5.2.0 → 5.3.0-alpha01

package/lib/components/inputs/select.tsx

@@ -1,140 +0,0 @@
-"use client"
-import {
-  ListBox as AriaListBox,
-  ListBoxProps as AriaListBoxProps,
-  PopoverProps as AriaPopoverProps,
-  Select as AriaSelect,
-  SelectProps as AriaSelectProps,
-  SelectValue as AriaSelectValue,
-  SelectValueProps as AriaSelectValueProps,
-  composeRenderProps
-} from "react-aria-components"
-
-import { FormField, type FormFieldProps } from "lib/components/inputs/field"
-import type { SelectOption } from "lib/components/inputs/select-options"
-import { Button } from "lib/components/ui/button"
-import { useFieldContext } from "lib/utils/form-context"
-import { getFieldErrorMessage } from "lib/utils/form-hook"
-import { cn } from "lib/utils/primitives"
-import { ChevronDown } from "lucide-react"
-import {
-  ListBoxCollection,
-  ListBoxHeader,
-  ListBoxItem,
-} from "../ui/list-box"
-import { Popover } from "../ui/popover"
-
-const ASelect = AriaSelect
-export const SelectItem = ListBoxItem
-export const SelectHeader = ListBoxHeader
-export const SelectCollection = ListBoxCollection
-
-export const SelectValue = <T extends object>({
-  className,
-  ...props
-}: AriaSelectValueProps<T>) => (
-  <AriaSelectValue
-    className={composeRenderProps(className, (className) =>
-      cn(
-        "line-clamp-1 data-[placeholder]:text-muted-foreground",
-        /* Description */
-        "[&>[slot=description]]:hidden",
-        className
-      )
-    )}
-    {...props}
-  />
-)
-
-function SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof Button>) {
-  return (
-    <Button {...props}>
-      {composeRenderProps(children, (children) => (
-        <>
-          {children}
-          <ChevronDown aria-hidden="true" className="size-icon opacity-50" />
-        </>
-      ))}
-    </Button>
-  )
-}
-
-export function SelectPopover({ className, ...props }: AriaPopoverProps) {
-  return (
-    <Popover
-      className={composeRenderProps(className, (className) =>
-        cn("w-auto min-w-[--trigger-width]", className)
-      )}
-      {...props}
-    />
-  )
-}
-
-function SelectListBox<T extends object>({
-  className,
-  ...props
-}: AriaListBoxProps<T>) {
-  return (
-    <AriaListBox
-      className={composeRenderProps(className, (className) =>
-        cn(
-          "overflow-auto p-1 outline-none [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]",
-          className
-        )
-      )}
-      {...props}
-    />
-  )
-}
-
-export interface SingleSelectProps<T extends SelectOption> extends Omit<AriaSelectProps<T>, "children">, FormFieldProps {
-  items: Iterable<T>
-  children: React.ReactNode | ((item: T) => React.ReactNode)
-}
-
-export function SingleSelect<T extends SelectOption>({
-  label,
-  description,
-  errorMessage,
-  children,
-  className,
-  items,
-  ...props
-}: SingleSelectProps<T>) {
-  return (
-    <ASelect
-      className={composeRenderProps(className, (className) =>
-        cn("group form-field", className)
-      )}
-      {...props}
-    >
-      <FormField label={label} description={description} errorMessage={errorMessage}>
-        <SelectTrigger>
-          <SelectValue />
-        </SelectTrigger>
-        <SelectPopover>
-          <SelectListBox items={items}>{children}</SelectListBox>
-        </SelectPopover>
-      </FormField>
-    </ASelect>
-  )
-}
-
-
-type TfSingleSelectProps<T extends SelectOption> = Omit<SingleSelectProps<T>, "value" | "setValue" | 'children'>;
-
-export function TfSingleSelect<T extends SelectOption>({ ...props }: TfSingleSelectProps<T>) {
-  const field = useFieldContext<string>();
-
-  return (
-    <SingleSelect
-      selectedKey={field.state.value}
-      onSelectionChange={(e) => field.handleChange(e!.toString())}
-      onBlur={field.handleBlur}
-      errorMessage={getFieldErrorMessage(field)}
-      {...props}
-    >
-      {(item) => <SelectItem id={item.id} key={item.id}>{item.label}</SelectItem>}
-    </SingleSelect>
-  );
-}

package/lib/components/inputs/textfield.tsx

@@ -1,96 +0,0 @@
-import {
-  Input as AriaInput,
-  InputProps as AriaInputProps,
-  TextArea as AriaTextArea,
-  TextAreaProps as AriaTextAreaProps,
-  TextField as AriaTextField,
-  TextFieldProps as AriaTextFieldProps,
-  composeRenderProps
-} from "react-aria-components"
-
-
-import { useFieldContext } from "lib/utils/form-context"
-import { getFieldErrorMessage } from "lib/utils/form-hook"
-import { cn } from "lib/utils/primitives"
-import { FormField, type FormFieldProps } from "./field"
-
-const ATextField = AriaTextField
-
-function Input({ className, ...props }: AriaInputProps) {
-  return (
-    <AriaInput
-      className={composeRenderProps(className, (className) =>
-        cn(
-          "flex input-dim w-full border border-input bg-card ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground",
-          /* Disabled */
-          "disabled-muted",
-          /* Focused */
-          "focus-ring",
-          className
-        )
-      )}
-      {...props}
-    />
-  )
-}
-
-function TextArea({ className, ...props }: AriaTextAreaProps) {
-  return (
-    <AriaTextArea
-      className={composeRenderProps(className, (className) =>
-        cn(
-          "flex min-h-32 w-full border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground",
-          /* Focused */
-          "focus-ring",
-          /* Disabled */
-          "disabled-muted",
-          className
-        )
-      )}
-      {...props}
-    />
-  )
-}
-
-export interface TextFieldProps extends AriaTextFieldProps, FormFieldProps {
-  textArea?: boolean
-}
-
-export function TextField({
-  label,
-  description,
-  errorMessage,
-  textArea,
-  className,
-  ...props
-}: TextFieldProps) {
-  return (
-    <ATextField
-      className={composeRenderProps(className, (className) =>
-        cn("group form-field", className)
-      )}
-      {...props}
-    >
-      <FormField label={label} errorMessage={errorMessage} description={description}>
-        {textArea ? <TextArea /> : <Input />}
-      </FormField>
-    </ATextField>
-  )
-}
-
-export function TfTextField({ isDisabled, ...props }: React.ComponentProps<typeof TextField>) {
-  const field = useFieldContext<string>();
-
-  return (
-    <TextField
-      isDisabled={isDisabled || field.form.state.isSubmitting}
-      value={field.state.value}
-      id={field.name}
-      name={field.name}
-      onBlur={field.handleBlur}
-      onChange={field.handleChange}
-      errorMessage={getFieldErrorMessage(field)}
-      {...props} />)
-}
-
-

package/lib/components/key-value-card/key-value-card.tsx

@@ -1,115 +0,0 @@
-import { formatDate } from "lib/components/data-table/table-commons";
-import { Badge } from "lib/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "lib/components/ui/card";
-import { Skeleton } from "lib/components/ui/skeleton";
-
-// Utility type to handle nested keys (dot notation) in any object
-type NestedKeyOf<T> = T extends object
-	? {
-		[K in keyof T]: K extends string | number
-		? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}`
-		: never;
-	}[keyof T]
-	: never;
-
-// DisplayField type that works with nested keys
-export type DisplayField<T> = {
-	display: string;
-	accessor: NestedKeyOf<T>;
-	type?:
-	| "text"
-	| "badge"
-	| "boolean"
-	| "date"
-	| "yesno"
-	| "copyButton"
-	| "link"; // Field types
-	transform?: (value: any) => React.ReactNode;
-};
-
-export interface KeyValueCardProps<T> {
-	data: T; // Ensure data is of type T
-	label: string;
-	fields: DisplayField<T>[];
-	className?: string;
-}
-
-export const KeyValueCard = <T extends {}>({
-	data,
-	label,
-	fields,
-}: KeyValueCardProps<T>) => {
-	const renderValue = (field: DisplayField<T>, value: any) => {
-		if (field.transform) {
-			return field.transform(value);
-		}
-		if (value === undefined || value === null) {
-			return "-";
-		}
-		switch (field.type) {
-			case "date":
-				return <span>{formatDate(value)}</span>;
-			case "yesno":
-				return <span>{value ? "Yes" : "No"}</span>;
-			case "badge":
-				return (
-					<div className="flex flex-wrap gap-1">
-						{Array.isArray(value)
-							? value.map((item, index) => (
-								<Badge key={index}>
-									{typeof item === "object" ? item?.name || item?.id : item}
-								</Badge>
-							))
-							: value}
-					</div>
-				);
-
-			case "boolean":
-				return <span>{value.toString()}</span>;
-			default:
-				return <span>{value}</span>;
-		}
-	};
-
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>{label}</CardTitle>
-			</CardHeader>
-			<CardContent>
-				<div className="flex flex-col gap-2">
-					{data
-						? fields.map((field) => {
-							// TODO: improve this
-							const value = field.accessor
-								? field.accessor
-									.split(".")
-									.reduce(
-										(obj, key) =>
-											obj && key in obj ? obj[key] : undefined,
-										data as Record<string, any>,
-									)
-								: null;
-
-							return (
-								<div
-									key={field.display}
-									className="flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0"
-								>
-									<p className="text-sm flex w-full justify-start col-span-1">
-										{field.display}
-									</p>
-									<div className="text-sm flex w-full justify-start text-wrap break-all">
-										{renderValue(field, value)}
-									</div>
-								</div>
-							);
-						})
-						: fields.map((_, index) => (
-							<Skeleton key={index} className="h-12 w-full" />
-						))}
-				</div>
-			</CardContent>
-		</Card>
-	);
-};

package/lib/components/ui/alert.tsx

@@ -1,32 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "lib/utils/primitives";
-import { type LucideIcon } from "lucide-react";
-
-export const alertVariants = cva(
-    `transition-colors border border-dotted p-2 text-foreground text-sm inline-flex items-start gap-2`,
-    {
-        variants: {
-            variant: {
-                destructive: "bg-destructive-foreground/20 text-destructive border-destructive",
-                success: "bg-success-foreground/20 text-success border-success",
-                muted: "bg-muted-foreground/20 text-muted border-muted",
-            },
-        },
-        defaultVariants: {
-            variant: "muted",
-        },
-    },
-);
-
-export function Alert({ children, className, variant, icon: Icon, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants> & {
-    icon?: LucideIcon
-}) {
-
-    return (
-        <div role="alert" className={cn(alertVariants({ variant }), className)} {...props}>
-            {Icon && <Icon className="size-icon mt-1" />}
-            <span className="w-full">
-                {children}
-            </span>
-        </div>)
-}

package/lib/components/ui/avatar.tsx

@@ -1,22 +0,0 @@
-import { cn } from "lib/utils/primitives";
-import type * as React from "react";
-
-interface InitialString {
-	initials: string[2];
-}
-export interface AvatarProps
-	extends Omit<React.ComponentProps<"div">, "children">,
-	InitialString { }
-export function Avatar({ className, initials, ...props }: AvatarProps) {
-	return (
-		<div
-			className={cn(
-				"relative text-xs font-mono font-bold flex items-center leading-none justify-center bg-accent text-accent-foreground select-none size-input shrink-0 overflow-hidden rounded-full",
-				className,
-			)}
-			{...props}
-		>
-			{initials}
-		</div>
-	);
-}

package/lib/components/ui/badge.tsx

@@ -1,19 +0,0 @@
-import { cn } from "lib/utils/primitives";
-import type * as React from "react";
-
-export function Badge({ className, children, ...props }: React.ComponentProps<"span">) {
-	return (
-		<span
-			className={cn(
-				"text-muted leading-none text-sm px-1 inline-flex items-center justify-center select-none bg-card border h-input focus:outline-hidden focus:ring-1 focus:ring-ring",
-				className,
-			)}
-			{...props}
-		>
-			{/* Contents */}
-			<span>
-				{children}
-			</span>
-		</span>
-	);
-}

package/lib/components/ui/breadcrumbs.tsx

@@ -1,104 +0,0 @@
-import {
-  Breadcrumb as AriaBreadcrumb,
-  BreadcrumbProps as AriaBreadcrumbProps,
-  Breadcrumbs as AriaBreadcrumbs,
-  BreadcrumbsProps as AriaBreadcrumbsProps,
-  Link as AriaLink,
-  LinkProps as AriaLinkProps,
-  composeRenderProps,
-} from "react-aria-components"
-
-import { cn } from "lib/utils/primitives"
-import { ChevronRight, DotSquare } from "lucide-react"
-
-export function Breadcrumbs<T extends object>({
-  className,
-  ...props
-}: AriaBreadcrumbsProps<T>) {
-  return (
-    <AriaBreadcrumbs
-      className={cn(
-        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export function BreadcrumbItem({ className, ...props }: AriaBreadcrumbProps) {
-  return (
-    <AriaBreadcrumb
-      className={cn("inline-flex items-center gap-1.5 sm:gap-2.5", className)}
-      {...props}
-    />
-  )
-}
-
-export function BreadcrumbLink({ className, ...props }: AriaLinkProps) {
-  return (
-    <AriaLink
-      className={composeRenderProps(className, (className) =>
-        cn(
-          "transition-colors",
-          /* Hover */
-          "data-[hovered]:text-foreground",
-          /* Disabled */
-          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-          /* Current */
-          "data-[current]:pointer-events-auto data-[current]:opacity-100",
-          className
-        )
-      )}
-      {...props}
-    />
-  )
-}
-
-export function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      role="presentation"
-      aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
-      {...props}
-    >
-      {children || <ChevronRight />}
-    </span>
-  )
-}
-
-export function BreadcrumbEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      role="presentation"
-      aria-hidden="true"
-      className={cn("flex size-9 items-center justify-center", className)}
-      {...props}
-    >
-      <DotSquare className="size-4" />
-      <span className="sr-only">More</span>
-    </span>
-  )
-}
-
-interface BreadcrumbPageProps extends Omit<AriaLinkProps, "href"> { }
-
-export function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps) {
-  return (
-    <AriaLink
-      className={composeRenderProps(className, (className) =>
-        cn("font-normal text-foreground", className)
-      )}
-      {...props}
-    />
-  )
-}
-

package/lib/components/ui/button.tsx

@@ -1,66 +0,0 @@
-"use client"
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "lib/utils/primitives";
-import {
-	Button as AriaButton,
-	composeRenderProps,
-	type ButtonProps as AriaButtonProps,
-} from "react-aria-components";
-import { Loader } from "./loader";
-
-export const buttonVariants = cva(
-	"btn inline-flex gap-1 text-ellipsis overflow-hidden items-center justify-center font-medium transition-colors",
-	{
-		variants: {
-			variant: {
-				primary: "btn-primary",
-				secondary: "btn-secondary",
-				destructive: "btn-destructive",
-				neutral: "btn-neutral",
-				ghost: "btn-ghost",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-			size: {
-				default: "input-dim",
-				icon: "size-input",
-				none: ""
-			},
-		},
-		defaultVariants: {
-			variant: "neutral",
-			size: "default",
-		},
-	},
-);
-
-export type ButtonProps = AriaButtonProps & VariantProps<typeof buttonVariants> & {
-	ref?: React.Ref<HTMLButtonElement>
-	active?: boolean
-}
-
-export function Button({ className: additionalClasses, variant, size, children, isPending, active, ...props }: ButtonProps) {
-	return (
-		<AriaButton
-			{...props}
-			className={composeRenderProps(additionalClasses, (className) =>
-				cn(
-					buttonVariants({
-						variant,
-						size,
-						className,
-					}),
-					additionalClasses
-				)
-			)}
-		>
-			{composeRenderProps(children, (children) => (<>
-				{isPending && <Loader />}
-				{!isPending && <>
-					{children}
-					{/* TODO active indication */}
-				</>}
-			</>))}
-		</AriaButton>
-	)
-}
-