@hobenakicoffee/libraries 1.11.0 → 1.12.0

package/README.md

@@ -1,6 +1,6 @@
 # @hobenakicoffee/libraries
 
-Framework-agnostic shared constants and utilities for “হবে নাকি Coffee?” projects.
+Framework-agnostic shared constants and utilities for "হবে নাকি Coffee?" projects.
 
 ## Installation
 
@@ -47,9 +47,9 @@ import {
 
 ### Utilities
 
-| Entrypoint                        | Function exports                                                                                                                                                                                                                       |
-| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@hobenakicoffee/libraries/utils` | `formatAmount`, `formatSignedAmount`, `formatDate`, `formatToPlainText`, `formatMetadataKey`, `getSocialUrl`, `getUserPageLink`, `openInNewWindow`, `shareToFacebook`, `shareToInstagram`, `shareToLinkedIn`, `shareToX`, `printQrSvg` |
+| Entrypoint                        | Function exports                                                                                                                                                                                                                                    |
+| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@hobenakicoffee/libraries/utils` | `checkModeration`, `formatAmount`, `formatSignedAmount`, `formatDate`, `formatNumber`, `formatToPlainText`, `getSocialHandle`, `getSocialUrl`, `getUserNameInitials`, `getUserPageLink`, `openInNewWindow`, `shareToFacebook`, `shareToInstagram`, `shareToLinkedIn`, `shareToX`, `printQrSvg`, `toHumanReadable`, `validatePhoneNumber` |
 
 ## Local development
 
@@ -97,10 +97,14 @@ src/
     services.ts
     index.ts
   utils/
+    check-moderation.ts
     format-amount.ts
     format-date.ts
+    format-number.ts
     format-plain-text.ts
     get-social-handle.ts
+    get-social-link.ts
+    get-user-name-initials.ts
     get-user-page-link.ts
     open-to-new-window.ts
     post-to-facebook.ts
@@ -108,7 +112,24 @@ src/
     post-to-linkedin.ts
     post-to-x.ts
     qr-svg-utils.ts
+    to-human-readable.ts
+    validate-phone-number.ts
     index.ts
+  moderation/
+    normalizer.ts
+    profanity-service.ts
+    index.ts
+  types/
+    supabase.ts
+    index.ts
+  lib/
+    utils.ts
+  providers/
+    theme-provider.tsx
+  components/
+    ui/
+      ... (Radix UI based components)
+    turnstile-captcha.tsx
 ```
 
 ## Release & publish

package/package.json

@@ -1,14 +1,54 @@
 {
   "name": "@hobenakicoffee/libraries",
-  "version": "1.11.0",
+  "version": "1.12.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",
-    "./utils": "./src/utils/index.ts",
-    "./types": "./src/types/index.ts"
+    "./providers/theme-provider": "./src/providers/theme-provider.tsx",
+    "./types": "./src/types/index.ts",
+    "./utils": "./src/utils/index.ts"
   },
   "files": [
     "src",
@@ -16,27 +56,62 @@
     "package.json"
   ],
   "scripts": {
-    "build": "bun build src/index.ts --outdir dist --target node",
-    "dev": "bun --watch src/index.ts",
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
     "test": "bun test",
     "test:watch": "bun test --watch",
     "typecheck": "tsc --noEmit",
     "lint": "bun run typecheck",
+    "format": "ultracite fix",
+    "format:check": "ultracite check",
+    "format:doctor": "ultracite doctor",
     "clean": "rm -rf dist",
-    "prepublishOnly": "bun run test"
+    "prepublishOnly": "bun run test",
+    "check": "ultracite check",
+    "fix": "ultracite fix",
+    "prepare": "lefthook install"
   },
   "devDependencies": {
-    "@types/bun": "latest"
+    "@biomejs/biome": "2.4.0",
+    "@types/bun": "latest",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "lefthook": "^2.1.1",
+    "ultracite": "7.2.3",
+    "vite": "^7.3.1",
+    "vite-tsconfig-paths": "^6.1.1"
   },
   "peerDependencies": {
-    "typescript": "^5"
+    "typescript": "^5.9.3"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
+    "@fontsource-variable/noto-sans-bengali": "^5.2.11",
+    "@hugeicons/core-free-icons": "^3.1.1",
+    "@hugeicons/react": "^1.1.5",
+    "@marsidev/react-turnstile": "^1.4.2",
+    "@tailwindcss/vite": "^4.2.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "glin-profanity": "^3.3.0",
+    "input-otp": "^1.4.2",
+    "install": "^0.13.0",
+    "next-themes": "^0.4.6",
     "openai": "^6.22.0",
-    "sonner": "^2.0.7"
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.4",
+    "react-day-picker": "^9.13.2",
+    "react-dom": "^19.2.4",
+    "recharts": "^2.15.4",
+    "shadcn": "^3.8.5",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.1",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2"
   }
 }

package/src/App.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { Button } from "./components/ui/button";
+import { Calendar } from "./components/ui/calendar";
+
+const App = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+
+  return (
+    <div className="flex min-h-dvh flex-col gap-y-6 p-5 md:p-8">
+      <h1 className="font-bold text-lg">Welcome to library playground!</h1>
+      <p>This is the core library package for "হবে নাকি Coffee?" projects.</p>
+
+      <div>
+        <Button>Click me</Button>
+
+        <Calendar
+          captionLayout="dropdown"
+          className="rounded-lg border"
+          mode="single"
+          onSelect={setDate}
+          selected={date}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default App;

package/src/components/turnstile-captcha.tsx

@@ -0,0 +1,47 @@
+import { Turnstile, type TurnstileInstance } from "@marsidev/react-turnstile";
+import { useRef } from "react";
+import { useTheme } from "@/providers/theme-provider";
+
+interface TurnstileCaptchaProps {
+  onError?: (error: string) => void;
+  onTokenChange: (token: string) => void;
+}
+
+export function TurnstileCaptcha({
+  onTokenChange,
+  onError,
+}: TurnstileCaptchaProps) {
+  const { theme } = useTheme();
+  const turnstileRef = useRef<TurnstileInstance | null>(null);
+
+  function handleSuccess(token: string) {
+    onTokenChange(token);
+  }
+
+  function handleExpire() {
+    onTokenChange("");
+    onError?.("CAPTCHA has expired. Please verify again.");
+  }
+
+  function handleError() {
+    onTokenChange("");
+    onError?.("CAPTCHA verification failed. Please try again.");
+  }
+
+  return (
+    <div className="rounded-xl border border-input bg-input">
+      <Turnstile
+        className="overflow-hidden rounded-[calc(var(--radius)+5px)]"
+        onError={handleError}
+        onExpire={handleExpire}
+        onSuccess={handleSuccess}
+        options={{
+          theme: theme === "system" ? "auto" : theme,
+          size: "flexible",
+        }}
+        ref={turnstileRef}
+        siteKey={import.meta.env.VITE_TURNSTILE_SITE_KEY || ""}
+      />
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,110 @@
+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,
+};