@goplusvn/core 0.1.0 → 0.1.1

package/src/ui/feedback/index.tsx

@@ -0,0 +1,183 @@
+// @goerp/core/ui/feedback
+// Feedback components (Toast, Dialog, Loading, etc.)
+
+// ============================================================================
+// Dialog (Re-exported from primitives)
+// ============================================================================
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from "../primitives";
+
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "../../utils";
+import { buttonVariants } from "../primitives";
+
+export * from "./progress";
+export * from "./sheet";
+export * from "./alert";
+export * from "./context-menu";
+export * from "./drawer";
+export * from "./sonner";
+
+export * from "./error-dialog";
+
+export function AlertDialog({
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+export function AlertDialogTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger
+      data-slot="alert-dialog-trigger"
+      className={cn("cursor-pointer", className)}
+      {...props}
+    />
+  );
+}
+
+export function AlertDialogPortal({
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+export function AlertDialogOverlay({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function AlertDialogContent({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] grid bg-background translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+export function AlertDialogHeader({
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "flex flex-col space-y-2 text-center sm:text-left",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function AlertDialogFooter({
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function AlertDialogTitle({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+export function AlertDialogDescription({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function AlertDialogAction({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+export function AlertDialogCancel({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(
+        buttonVariants({ variant: "outline" }),
+        "mt-2 sm:mt-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/ui/feedback/progress.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import type { ComponentProps } from "react";
+import { cn } from "../../utils";
+
+export function Progress({
+  className,
+  value,
+  max,
+  ...props
+}: ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative h-2 w-full overflow-hidden rounded-lg bg-primary/20",
+        className,
+      )}
+      max={max}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="h-full w-full flex-1 bg-primary transition-all"
+        style={{
+          transform: `translateX(-${100 - ((value || 0) / (max || 100)) * 100}%)`,
+        }}
+      />
+    </ProgressPrimitive.Root>
+  );
+}

package/src/ui/feedback/sheet.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import type { ComponentProps } from "react";
+import { cn } from "../../utils";
+
+export function Sheet({
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+export function SheetTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return (
+    <SheetPrimitive.Trigger
+      data-slot="sheet-trigger"
+      className={cn("cursor-pointer", className)}
+      {...props}
+    />
+  );
+}
+
+export function SheetClose({
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+export function SheetPortal({
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+export function SheetOverlay({
+  className,
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-72 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-72 border-s data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        start:
+          "inset-y-0 start-0 h-full w-72 border-e data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left data-[state=closed]:rtl:slide-out-to-right data-[state=open]:rtl:slide-in-from-right sm:max-w-sm",
+        end: "inset-y-0 end-0 h-full w-72 border-s data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right data-[state=closed]:rtl:slide-out-to-left data-[state=open]:rtl:slide-in-from-left sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+type SheetContentProps = ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left" | "start" | "end";
+};
+
+export function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: SheetContentProps) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(sheetVariants({ side }), className)}
+        {...props}
+      >
+        {children}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+export function SheetHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col space-y-1", className)}
+      {...props}
+    />
+  );
+}
+
+export function SheetFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function SheetTitle({
+  className,
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-lg font-semibold text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function SheetDescription({
+  className,
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}

package/src/ui/feedback/sonner.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Toaster as Sonner } from "sonner";
+
+import type { ComponentProps } from "react";
+
+import { useSettings } from "../../hooks";
+
+type ToasterProps = ComponentProps<typeof Sonner>;
+
+export function Toaster({ ...props }: ToasterProps) {
+  const { settings } = useSettings();
+
+  const mode = settings.mode;
+
+  return (
+    <Sonner
+      theme={mode as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      richColors
+      closeButton
+      {...props}
+    />
+  );
+}

package/src/ui/forms/command.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import type { ComponentProps } from "react";
+import { cn } from "../../utils";
+import { Dialog, DialogContent } from "../feedback";
+
+export function Command({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+interface CommandDialogProps extends ComponentProps<typeof Dialog> {
+  commandProps?: ComponentProps<typeof Command>;
+}
+
+export function CommandDialog({
+  children,
+  commandProps,
+  ...props
+}: CommandDialogProps) {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command
+          className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+          {...commandProps}
+        >
+          {children as any}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function CommandInput({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex items-center border-b px-3"
+    >
+      <Search className="me-2 size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+export function CommandList({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] overflow-y-auto overflow-x-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CommandEmpty({
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+export function CommandGroup({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CommandSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+export function CommandItem({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "cursor-pointer relative flex gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CommandShortcut({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ms-auto text-sm tracking-widest text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/ui/forms/date-picker.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "../../utils";
+
+import { Button } from "../primitives";
+import {
+  Calendar,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../primitives/client";
+
+type DatePickerProps = Omit<
+  ComponentProps<typeof Calendar>,
+  "mode" | "selected" | "onSelect"
+> & {
+  value?: Date;
+  onValueChange?: (date?: Date) => void;
+  formatStr?: string;
+  popoverContentClassName?: string;
+  popoverContentOptions?: ComponentProps<typeof PopoverContent>;
+  buttonClassName?: string;
+  buttonOptions?: ComponentProps<typeof Button>;
+  placeholder?: string;
+};
+
+export function DatePicker({
+  value,
+  onValueChange,
+  formatStr = "yyyy-MM-dd",
+  popoverContentClassName,
+  popoverContentOptions,
+  buttonClassName,
+  buttonOptions,
+  placeholder = "Pick date",
+  ...props
+}: DatePickerProps) {
+  return (
+    <Popover modal>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn("w-full px-3 text-start font-normal", buttonClassName)}
+          {...buttonOptions}
+        >
+          {value ? (
+            <span>{format(value, formatStr)}</span>
+          ) : (
+            <span className="text-muted-foreground">{placeholder}</span>
+          )}
+          <CalendarIcon className="shrink-0 h-4 w-4 ms-auto text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn("w-auto p-0", popoverContentClassName)}
+        align="start"
+        {...popoverContentOptions}
+      >
+        <Calendar
+          mode="single"
+          selected={value}
+          onSelect={onValueChange}
+          {...props}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/ui/forms/date-range-picker.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+
+import type { ComponentProps } from "react";
+import type { DateRange } from "react-day-picker";
+
+import { cn } from "../../utils";
+
+import { Button } from "../primitives";
+import { Calendar } from "../primitives/client";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/client";
+
+type DateRangePickerProps = Omit<
+  ComponentProps<typeof Calendar>,
+  "mode" | "selected" | "onSelect"
+> & {
+  value?: DateRange;
+  onValueChange?: (date?: DateRange) => void;
+  formatStr?: string;
+  popoverContentClassName?: string;
+  popoverContentOptions?: ComponentProps<typeof PopoverContent>;
+  buttonClassName?: string;
+  buttonOptions?: ComponentProps<typeof Button>;
+  placeholder?: string;
+};
+
+export function DateRangePicker({
+  value,
+  onValueChange,
+  formatStr = "yyyy-MM-dd",
+  popoverContentClassName,
+  popoverContentOptions,
+  buttonClassName,
+  buttonOptions,
+  placeholder = "Pick date",
+  ...props
+}: DateRangePickerProps) {
+  return (
+    <Popover modal>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn("w-full px-3 text-start font-normal", buttonClassName)}
+          {...buttonOptions}
+        >
+          {value?.from ? (
+            value.to ? (
+              <span>
+                {format(value.from, formatStr)} to {format(value.to, formatStr)}
+              </span>
+            ) : (
+              <span>{format(value.from, formatStr)}</span>
+            )
+          ) : (
+            <span className="text-muted-foreground">{placeholder}</span>
+          )}
+          <CalendarIcon className="ms-auto h-4 w-4 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn("w-auto p-0", popoverContentClassName)}
+        align="start"
+        {...popoverContentOptions}
+      >
+        <Calendar
+          mode="range"
+          selected={value}
+          onSelect={onValueChange}
+          {...props}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}