@hitch42/applet 0.1.1-beta.1

package/scaffold/applet/src/client/components/ui/select.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import * as React from "react";
+import {
+  Button as ButtonPrimitive,
+  composeRenderProps,
+  Header as HeaderPrimitive,
+  ListBoxItem as ListBoxItemPrimitive,
+  ListBox as ListBoxPrimitive,
+  ListBoxSection as ListBoxSectionPrimitive,
+  Popover as PopoverPrimitive,
+  SearchField,
+  Select as SelectPrimitive,
+  SelectValue as SelectValuePrimitive,
+  Separator as SeparatorPrimitive,
+  type ListBoxProps,
+  type SearchFieldProps,
+  type ListBoxSectionProps as SelectGroupProps,
+  type SelectProps,
+  type SelectValueProps,
+} from "react-aria-components";
+
+import { cn } from "@/client/lib/utils";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@/client/components/ui/input-group";
+import { ChevronDownIcon, SearchIcon, CheckIcon } from "lucide-react";
+
+function Select<T extends object, M extends "single" | "multiple" = "single">({
+  className,
+  ...props
+}: SelectProps<T, M>) {
+  return <SelectPrimitive data-slot="select" className={cn("w-fit", className)} {...props} />;
+}
+
+function SelectGroup<T extends object>({ className, ...props }: SelectGroupProps<T>) {
+  return (
+    <ListBoxSectionPrimitive
+      data-slot="select-group"
+      className={cn("scroll-my-1.5 p-1", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectValue<T extends object>({ className, children, ...props }: SelectValueProps<T>) {
+  return (
+    <SelectValuePrimitive
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left data-placeholder:text-muted-foreground", className)}
+      {...props}
+    >
+      {typeof children === "function"
+        ? children
+        : ({ selectedItems, selectedText, defaultChildren }) =>
+            selectedItems.length > 1 ? selectedText : defaultChildren}
+    </SelectValuePrimitive>
+  );
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: Omit<React.ComponentProps<typeof ButtonPrimitive>, "children"> & {
+  children?: React.ReactNode;
+  size?: "sm" | "default";
+}) {
+  return (
+    <ButtonPrimitive
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-full items-center justify-between gap-1.5 rounded-2xl border border-transparent bg-input/50 px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] duration-200 outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </ButtonPrimitive>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  placement = "bottom",
+  offset = 4,
+  crossOffset = 0,
+  ...props
+}: Omit<React.ComponentProps<typeof PopoverPrimitive>, "className" | "children"> & {
+  className?: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <SelectPopover
+      className={className}
+      placement={placement}
+      offset={offset}
+      crossOffset={crossOffset}
+      {...props}
+    >
+      <SelectList>{children}</SelectList>
+    </SelectPopover>
+  );
+}
+
+function SelectPopover({
+  className,
+  children,
+  placement = "bottom start",
+  offset = 4,
+  crossOffset = 0,
+  ...props
+}: Omit<React.ComponentProps<typeof PopoverPrimitive>, "className" | "children"> & {
+  className?: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <PopoverPrimitive
+      data-slot="select-content"
+      placement={placement}
+      offset={offset}
+      crossOffset={crossOffset}
+      className={cn(
+        "relative isolate z-50 w-(--trigger-width) min-w-36 origin-(--trigger-anchor-point) overflow-hidden rounded-2xl bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 data-entering:animate-in data-entering:fade-in-0 data-entering:zoom-in-95 data-exiting:animate-out data-exiting:fade-out-0 data-exiting:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 **:data-[slot$=-item]:data-focused:bg-foreground/10 dark:ring-foreground/10",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </PopoverPrimitive>
+  );
+}
+
+function SelectList<T extends object>({ className, ...props }: ListBoxProps<T>) {
+  return (
+    <ListBoxPrimitive
+      data-slot="select-list"
+      className={cn(
+        "group/select-list max-h-[inherit] overflow-x-hidden overflow-y-auto p-0 outline-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SelectInput({ className, ...props }: SearchFieldProps) {
+  return (
+    <SearchField
+      {...props}
+      autoFocus
+      data-slot="select-input-wrapper"
+      className={cn("p-1 pb-0", className)}
+    >
+      <InputGroup>
+        <InputGroupInput
+          data-slot="select-input"
+          className="[&::-webkit-search-cancel-button]:hidden"
+        />
+        <InputGroupAddon>
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
+    </SearchField>
+  );
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof HeaderPrimitive>) {
+  return (
+    <HeaderPrimitive
+      data-slot="select-label"
+      className={cn("px-2 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ListBoxItemPrimitive>) {
+  return (
+    <ListBoxItemPrimitive
+      data-slot="select-item"
+      textValue={typeof children === "string" ? children : undefined}
+      className={cn(
+        "relative flex min-h-7 w-full cursor-default items-center gap-2 rounded-xl py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-focused:bg-accent data-focused:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      {composeRenderProps(children, (children, { isSelected }) => (
+        <>
+          <span className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">{children}</span>
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+            {isSelected ? <CheckIcon className="pointer-events-none" /> : null}
+          </span>
+        </>
+      ))}
+    </ListBoxItemPrimitive>
+  );
+}
+
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SeparatorPrimitive>) {
+  return (
+    <SeparatorPrimitive
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectEmpty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="select-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/select-list:flex",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectInput,
+  SelectItem,
+  SelectLabel,
+  SelectList,
+  SelectPopover,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  SelectEmpty,
+};

package/scaffold/applet/src/client/components/ui/separator.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Separator as SeparatorPrimitive } from "react-aria-components";
+
+import { cn } from "@/client/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive>) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "block shrink-0 border-0 bg-border aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=vertical]:w-px aria-[orientation=vertical]:self-stretch [:is(hr)]:h-px [:is(hr)]:w-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/scaffold/applet/src/client/components/ui/sheet.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import * as React from "react";
+import {
+  Heading,
+  ModalOverlay as ModalOverlayPrimitive,
+  Modal as ModalPrimitive,
+  Dialog as SheetPrimitive,
+  DialogTrigger as SheetTriggerPrimitive,
+  type ModalOverlayProps as ModalOverlayPrimitiveProps,
+  type DialogProps as SheetPrimitiveProps,
+  type DialogTriggerProps as SheetTriggerPrimitiveProps,
+} from "react-aria-components";
+
+import { cn } from "@/client/lib/utils";
+import { Button } from "@/client/components/ui/button";
+import { XIcon } from "lucide-react";
+
+function SheetTrigger({ ...props }: SheetTriggerPrimitiveProps) {
+  return <SheetTriggerPrimitive data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      slot="close"
+      data-slot="sheet-close"
+      variant={variant}
+      size={size}
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+function SheetOverlay({
+  className,
+  children,
+  ...props
+}: Omit<ModalOverlayPrimitiveProps, "className" | "children"> & {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <ModalOverlayPrimitive
+      data-slot="sheet-overlay"
+      isDismissable
+      className={cn(
+        "fixed inset-0 z-50 bg-black/30 transition-opacity duration-150 data-entering:opacity-0 data-exiting:opacity-0 supports-backdrop-filter:backdrop-blur-sm",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ModalOverlayPrimitive>
+  );
+}
+
+function Sheet({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: Omit<ModalOverlayPrimitiveProps, "className" | "children"> &
+  Pick<React.ComponentProps<typeof ModalPrimitive>, "isDismissable"> & {
+    className?: string;
+    children: React.ReactNode;
+    side?: "top" | "right" | "bottom" | "left";
+    showCloseButton?: boolean;
+  }) {
+  return (
+    <SheetOverlay {...props}>
+      <ModalPrimitive
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-xl transition duration-200 ease-in-out data-entering:opacity-0 data-exiting:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-entering:translate-y-[2.5rem] data-[side=bottom]:data-exiting:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-entering:translate-x-[-2.5rem] data-[side=left]:data-exiting:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-entering:translate-x-[2.5rem] data-[side=right]:data-exiting:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-entering:translate-y-[-2.5rem] data-[side=top]:data-exiting:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className,
+        )}
+      >
+        <SheetPrimitive
+          data-slot="sheet"
+          className="[display:inherit] h-full max-h-[inherit] [flex-direction:inherit] [gap:inherit] outline-none"
+        >
+          {children}
+          {showCloseButton && (
+            <SheetClose
+              variant="ghost"
+              className="absolute top-4 right-4 bg-secondary"
+              size="icon-sm"
+            >
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </SheetClose>
+          )}
+        </SheetPrimitive>
+      </ModalPrimitive>
+    </SheetOverlay>
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Sheet> & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}) {
+  return (
+    <Sheet className={className} side={side} showCloseButton={showCloseButton} {...props}>
+      {children}
+    </Sheet>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-6", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-6", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: Omit<React.ComponentProps<typeof Heading>, "slot">) {
+  return (
+    <Heading
+      slot="title"
+      data-slot="sheet-title"
+      className={cn("font-heading text-base font-medium text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({ className, ...props }: Omit<React.ComponentProps<"div">, "slot">) {
+  return (
+    <div
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  type SheetPrimitiveProps,
+  type SheetTriggerPrimitiveProps,
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

package/scaffold/applet/src/client/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/client/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-2xl bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/scaffold/applet/src/client/components/ui/spinner.tsx

@@ -0,0 +1,16 @@
+import { cn } from "@/client/lib/utils";
+import { Loader2Icon } from "lucide-react";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      data-slot="spinner"
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };

package/scaffold/applet/src/client/components/ui/switch.tsx

@@ -0,0 +1,41 @@
+import {
+  composeRenderProps,
+  Switch as SwitchPrimitive,
+  type SwitchProps as SwitchPrimitiveProps,
+} from "react-aria-components";
+
+import { cn } from "@/client/lib/utils";
+
+function Switch({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SwitchPrimitiveProps & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SwitchPrimitive
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-2xl border-2 transition-all outline-none not-data-selected:border-transparent not-data-selected:bg-input/90 group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-focus-visible:border-ring data-focus-visible:ring-3 data-focus-visible:ring-ring/30 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 data-[size=default]:h-5 data-[size=default]:w-8 data-[size=sm]:h-4 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary group-has-[:focus-visible]/field-label:data-checked:border-primary data-unchecked:border-transparent data-unchecked:bg-input/90 group-has-[:focus-visible]/field-label:data-unchecked:border-transparent data-selected:border-primary data-selected:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      {composeRenderProps(children, (children, { isSelected }) => (
+        <>
+          <span
+            data-slot="switch-thumb"
+            data-selected={isSelected || undefined}
+            className="pointer-events-none block rounded-2xl bg-background shadow-sm ring-0 transition-transform not-dark:bg-clip-padding not-data-selected:translate-x-0 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 dark:not-data-selected:bg-foreground data-checked:translate-x-[calc(100%-4px)] dark:data-checked:bg-primary-foreground data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground data-selected:translate-x-[calc(100%-4px)] dark:data-selected:bg-primary-foreground"
+          />
+          {children}
+        </>
+      ))}
+    </SwitchPrimitive>
+  );
+}
+
+export { Switch };

package/scaffold/applet/src/client/components/ui/table.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import * as React from "react";
+import {
+  Cell as CellPrimitive,
+  Column as ColumnPrimitive,
+  Row as RowPrimitive,
+  TableBody as TableBodyPrimitive,
+  TableFooter as TableFooterPrimitive,
+  TableHeader as TableHeaderPrimitive,
+  Table as TablePrimitive,
+  type CellProps,
+  type ColumnProps,
+  type RowProps,
+  type TableBodyProps,
+  type TableFooterProps,
+  type TableHeaderProps,
+  type TableProps,
+} from "react-aria-components";
+
+import { cn } from "@/client/lib/utils";
+
+function Table({ className, ...props }: TableProps) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <TablePrimitive
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader<T>({ className, ...props }: TableHeaderProps<T>) {
+  return (
+    <TableHeaderPrimitive
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody<T>({ className, ...props }: TableBodyProps<T>) {
+  return (
+    <TableBodyPrimitive
+      data-slot="table-body"
+      className={cn("data-empty:h-24 data-empty:text-center [&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter<T>({ className, ...props }: TableFooterProps<T>) {
+  return (
+    <TableFooterPrimitive
+      data-slot="table-footer"
+      className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow<T>({ className, ...props }: RowProps<T>) {
+  return (
+    <RowPrimitive
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted data-selected:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: ColumnProps) {
+  return (
+    <ColumnPrimitive
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([data-slot=checkbox])]:pr-0 [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: CellProps) {
+  return (
+    <CellPrimitive
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([data-slot=checkbox])]:pr-0 [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"figcaption">) {
+  return (
+    <figcaption
+      data-slot="table-caption"
+      className={cn("mt-4 text-center text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };