@hobenakicoffee/libraries 1.28.0 → 1.29.0

package/package.json

@@ -1,54 +1,18 @@
 {
   "name": "@hobenakicoffee/libraries",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "type": "module",
   "types": "src/index.ts",
   "exports": {
     ".": "./src/index.ts",
     "./components/turnstile-captcha": "./src/components/turnstile-captcha.tsx",
-    "./components/ui/alert": "./src/components/ui/alert.tsx",
-    "./components/ui/alert-dialog": "./src/components/ui/alert-dialog.tsx",
-    "./components/ui/avatar": "./src/components/ui/avatar.tsx",
-    "./components/ui/badge": "./src/components/ui/badge.tsx",
-    "./components/ui/breadcrumb": "./src/components/ui/breadcrumb.tsx",
-    "./components/ui/button": "./src/components/ui/button.tsx",
-    "./components/ui/button-group": "./src/components/ui/button-group.tsx",
-    "./components/ui/calendar": "./src/components/ui/calendar.tsx",
-    "./components/ui/card": "./src/components/ui/card.tsx",
-    "./components/ui/chart": "./src/components/ui/chart.tsx",
-    "./components/ui/checkbox": "./src/components/ui/checkbox.tsx",
-    "./components/ui/dialog": "./src/components/ui/dialog.tsx",
-    "./components/ui/drawer": "./src/components/ui/drawer.tsx",
-    "./components/ui/dropdown-menu": "./src/components/ui/dropdown-menu.tsx",
-    "./components/ui/empty": "./src/components/ui/empty.tsx",
-    "./components/ui/empty-minimal": "./src/components/ui/empty-minimal.tsx",
-    "./components/ui/field": "./src/components/ui/field.tsx",
-    "./components/ui/input": "./src/components/ui/input.tsx",
-    "./components/ui/input-group": "./src/components/ui/input-group.tsx",
-    "./components/ui/input-otp": "./src/components/ui/input-otp.tsx",
-    "./components/ui/item": "./src/components/ui/item.tsx",
-    "./components/ui/label": "./src/components/ui/label.tsx",
-    "./components/ui/popover": "./src/components/ui/popover.tsx",
-    "./components/ui/radio-group": "./src/components/ui/radio-group.tsx",
-    "./components/ui/select": "./src/components/ui/select.tsx",
-    "./components/ui/separator": "./src/components/ui/separator.tsx",
-    "./components/ui/sheet": "./src/components/ui/sheet.tsx",
-    "./components/ui/sidebar": "./src/components/ui/sidebar.tsx",
-    "./components/ui/skeleton": "./src/components/ui/skeleton.tsx",
-    "./components/ui/sonner": "./src/components/ui/sonner.tsx",
-    "./components/ui/spinner": "./src/components/ui/spinner.tsx",
-    "./components/ui/table": "./src/components/ui/table.tsx",
-    "./components/ui/tabs": "./src/components/ui/tabs.tsx",
-    "./components/ui/textarea": "./src/components/ui/textarea.tsx",
-    "./components/ui/toggle": "./src/components/ui/toggle.tsx",
-    "./components/ui/toggle-group": "./src/components/ui/toggle-group.tsx",
-    "./components/ui/tooltip": "./src/components/ui/tooltip.tsx",
     "./constants": "./src/constants/index.ts",
     "./lib/utils": "./src/lib/utils.ts",
     "./moderation": "./src/moderation/index.ts",
     "./providers/theme-provider": "./src/providers/theme-provider.tsx",
     "./types": "./src/types/index.ts",
     "./utils": "./src/utils/index.ts",
+    "./nuqs": "./src/nuqs/index.ts",
     "./scripts": "./src/scripts/index.ts"
   },
   "files": [
@@ -103,6 +67,7 @@
     "input-otp": "^1.4.2",
     "install": "^0.13.0",
     "next-themes": "^0.4.6",
+    "nuqs": "^2.8.9",
     "openai": "^6.22.0",
     "radix-ui": "^1.4.3",
     "react": "^19.2.4",
@@ -114,6 +79,7 @@
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
-    "vaul": "^1.1.2"
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6"
   }
 }

package/src/nuqs/common.ts

@@ -0,0 +1,12 @@
+import { type inferParserType, parseAsJson, parseAsStringLiteral } from "nuqs";
+import { z } from "zod";
+
+export const parseAsSortOrder = parseAsStringLiteral(["asc", "desc"]);
+export type SortOrder = inferParserType<typeof parseAsSortOrder>;
+
+export const parseAsDateRange = parseAsJson(
+  z.object({
+    from: z.date(),
+    to: z.date().optional(),
+  })
+);

package/src/nuqs/index.ts

@@ -0,0 +1,2 @@
+export * from "./common";
+export * from "./transactions";

package/src/nuqs/transactions.ts

@@ -0,0 +1,31 @@
+import {
+  type inferParserType,
+  parseAsArrayOf,
+  parseAsStringLiteral,
+} from "nuqs";
+import {
+  PaymentProviders,
+  PaymentStatuses,
+  PaymentTypes,
+  ServiceTypes,
+} from "@/constants";
+import { parseAsDateRange, parseAsSortOrder } from "./common";
+
+export const transactionsFilterParsers = {
+  statuses: parseAsArrayOf(
+    parseAsStringLiteral(Object.values(PaymentStatuses))
+  ),
+  types: parseAsArrayOf(parseAsStringLiteral(Object.values(PaymentTypes))),
+  serviceTypes: parseAsArrayOf(
+    parseAsStringLiteral(Object.values(ServiceTypes))
+  ),
+  providers: parseAsArrayOf(
+    parseAsStringLiteral(Object.values(PaymentProviders))
+  ),
+  dateRange: parseAsDateRange,
+  amountSort: parseAsSortOrder,
+};
+
+export type TransactionFilters = inferParserType<
+  typeof transactionsFilterParsers
+>;

package/src/components/ui/alert-dialog.tsx

@@ -1,196 +0,0 @@
-import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
-import type * as React from "react";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  );
-}
-
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  );
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      className={cn(
-        "data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-closed:animate-out data-open:animate-in supports-backdrop-filter:backdrop-blur-xs",
-        className
-      )}
-      data-slot="alert-dialog-overlay"
-      {...props}
-    />
-  );
-}
-
-function AlertDialogContent({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
-  size?: "default" | "sm";
-}) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        className={cn(
-          "data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-background p-6 outline-none ring-1 ring-foreground/10 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-closed:animate-out data-open:animate-in data-[size=default]:sm:max-w-lg",
-          className
-        )}
-        data-size={size}
-        data-slot="alert-dialog-content"
-        {...props}
-      />
-    </AlertDialogPortal>
-  );
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
-        className
-      )}
-      data-slot="alert-dialog-header"
-      {...props}
-    />
-  );
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      data-slot="alert-dialog-footer"
-      {...props}
-    />
-  );
-}
-
-function AlertDialogMedia({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
-        className
-      )}
-      data-slot="alert-dialog-media"
-      {...props}
-    />
-  );
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      className={cn(
-        "font-medium text-lg sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
-        className
-      )}
-      data-slot="alert-dialog-title"
-      {...props}
-    />
-  );
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      className={cn(
-        "text-balance text-muted-foreground text-sm md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
-      )}
-      data-slot="alert-dialog-description"
-      {...props}
-    />
-  );
-}
-
-function AlertDialogAction({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
-  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
-  return (
-    <Button asChild size={size} variant={variant}>
-      <AlertDialogPrimitive.Action
-        className={cn(className)}
-        data-slot="alert-dialog-action"
-        {...props}
-      />
-    </Button>
-  );
-}
-
-function AlertDialogCancel({
-  className,
-  variant = "outline",
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
-  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
-  return (
-    <Button asChild size={size} variant={variant}>
-      <AlertDialogPrimitive.Cancel
-        className={cn(className)}
-        data-slot="alert-dialog-cancel"
-        {...props}
-      />
-    </Button>
-  );
-}
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-};

package/src/components/ui/alert.tsx

@@ -1,76 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-3 py-3 text-left text-xs has-data-[slot=alert-action]:relative has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 has-data-[slot=alert-action]:pr-18 *:[svg:not([class*='size-'])]:size-4 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "border-destructive/15 bg-destructive/5 text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      className={cn(alertVariants({ variant }), className)}
-      data-slot="alert"
-      role="alert"
-      {...props}
-    />
-  );
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
-        className
-      )}
-      data-slot="alert-title"
-      {...props}
-    />
-  );
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "text-balance text-muted-foreground text-sm md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
-        className
-      )}
-      data-slot="alert-description"
-      {...props}
-    />
-  );
-}
-
-function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn("absolute top-2.5 right-3", className)}
-      data-slot="alert-action"
-      {...props}
-    />
-  );
-}
-
-export { Alert, AlertTitle, AlertDescription, AlertAction };

package/src/components/ui/avatar.tsx

@@ -1,110 +0,0 @@
-import { Avatar as AvatarPrimitive } from "radix-ui";
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Avatar({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
-  size?: "default" | "sm" | "lg";
-}) {
-  return (
-    <AvatarPrimitive.Root
-      className={cn(
-        "group/avatar relative flex size-8 shrink-0 select-none rounded-full after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
-        className
-      )}
-      data-size={size}
-      data-slot="avatar"
-      {...props}
-    />
-  );
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      className={cn(
-        "aspect-square size-full rounded-full object-cover",
-        className
-      )}
-      data-slot="avatar-image"
-      {...props}
-    />
-  );
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
-        className
-      )}
-      data-slot="avatar-fallback"
-      {...props}
-    />
-  );
-}
-
-function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      className={cn(
-        "absolute right-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background",
-        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
-        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
-        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
-        className
-      )}
-      data-slot="avatar-badge"
-      {...props}
-    />
-  );
-}
-
-function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "group/avatar-group flex -gap-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
-        className
-      )}
-      data-slot="avatar-group"
-      {...props}
-    />
-  );
-}
-
-function AvatarGroupCount({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
-        className
-      )}
-      data-slot="avatar-group-count"
-      {...props}
-    />
-  );
-}
-
-export {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarGroupCount,
-  AvatarBadge,
-};

package/src/components/ui/badge.tsx

@@ -1,49 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "radix-ui";
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const badgeVariants = cva(
-  "group/badge inline-flex h-6 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-4xl px-2 py-1 font-normal text-xs uppercase ring-1 transition-all transition-colors focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-ring has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive:
-          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline:
-          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-function Badge({
-  className,
-  variant = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "span";
-
-  return (
-    <Comp
-      className={cn(badgeVariants({ variant }), className)}
-      data-slot="badge"
-      data-variant={variant}
-      {...props}
-    />
-  );
-}
-
-export { Badge, badgeVariants };

package/src/components/ui/breadcrumb.tsx

@@ -1,122 +0,0 @@
-import {
-  ArrowRight01Icon,
-  MoreHorizontalCircle01Icon,
-} from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { Slot } from "radix-ui";
-import type * as React from "react";
-import { cn } from "@/lib/utils";
-
-function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
-  return (
-    <nav
-      aria-label="breadcrumb"
-      className={cn(className)}
-      data-slot="breadcrumb"
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
-  return (
-    <ol
-      className={cn(
-        "wrap-break-word flex flex-wrap items-center gap-1.5 text-muted-foreground text-sm sm:gap-2.5",
-        className
-      )}
-      data-slot="breadcrumb-list"
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      className={cn("inline-flex items-center gap-1.5", className)}
-      data-slot="breadcrumb-item"
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbLink({
-  asChild,
-  className,
-  ...props
-}: React.ComponentProps<"a"> & {
-  asChild?: boolean;
-}) {
-  const Comp = asChild ? Slot.Root : "a";
-
-  return (
-    <Comp
-      className={cn("transition-colors hover:text-foreground", className)}
-      data-slot="breadcrumb-link"
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      aria-current="page"
-      aria-disabled="true"
-      className={cn("font-normal text-foreground", className)}
-      data-slot="breadcrumb-page"
-      role="link"
-      {...props}
-    />
-  );
-}
-
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
-  return (
-    <li
-      aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
-      data-slot="breadcrumb-separator"
-      role="presentation"
-      {...props}
-    >
-      {children ?? <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} />}
-    </li>
-  );
-}
-
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      aria-hidden="true"
-      className={cn(
-        "flex size-5 items-center justify-center [&>svg]:size-4",
-        className
-      )}
-      data-slot="breadcrumb-ellipsis"
-      role="presentation"
-      {...props}
-    >
-      <HugeiconsIcon icon={MoreHorizontalCircle01Icon} strokeWidth={2} />
-      <span className="sr-only">More</span>
-    </span>
-  );
-}
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-};