@questpie/admin 0.0.1

package/src/components/primitives/types.ts

@@ -0,0 +1,235 @@
+import type { ReactNode } from "react";
+
+// =============================================================================
+// Base Props (shared by all primitives)
+// =============================================================================
+
+export interface BasePrimitiveProps {
+	/** Unique identifier */
+	id?: string;
+	/** Placeholder text */
+	placeholder?: string;
+	/** Disabled state */
+	disabled?: boolean;
+	/** Read-only state */
+	readOnly?: boolean;
+	/** Additional class names */
+	className?: string;
+	/** aria-invalid for error state */
+	"aria-invalid"?: boolean;
+}
+
+// =============================================================================
+// Text Inputs
+// =============================================================================
+
+export interface TextInputProps extends BasePrimitiveProps {
+	value: string;
+	onChange: (value: string) => void;
+	type?: "text" | "email" | "password" | "url" | "tel" | "search";
+	maxLength?: number;
+	autoComplete?: string;
+}
+
+export interface NumberInputProps extends BasePrimitiveProps {
+	value: number | null;
+	onChange: (value: number | null) => void;
+	min?: number;
+	max?: number;
+	step?: number;
+	/** Show increment/decrement buttons */
+	showButtons?: boolean;
+}
+
+export interface TextareaInputProps extends BasePrimitiveProps {
+	value: string;
+	onChange: (value: string) => void;
+	rows?: number;
+	maxLength?: number;
+	autoResize?: boolean;
+}
+
+// =============================================================================
+// Select / Multi-Select
+// =============================================================================
+
+export interface SelectOption<TValue = string> {
+	value: TValue;
+	label: string;
+	disabled?: boolean;
+	icon?: ReactNode;
+}
+
+export interface SelectOptionGroup<TValue = string> {
+	label: string;
+	options: SelectOption<TValue>[];
+}
+
+export type SelectOptions<TValue = string> =
+	| SelectOption<TValue>[]
+	| SelectOptionGroup<TValue>[];
+
+/**
+ * Unified Select Input props
+ * - multiple: false (default) = single select (dropdown)
+ * - multiple: true = multi-select with chips
+ *
+ * Both modes support:
+ * - Static options array
+ * - Dynamic loading via loadOptions
+ * - Search/filtering
+ */
+export interface SelectInputProps<TValue = string> extends BasePrimitiveProps {
+	/** Selected value(s) */
+	value: TValue | TValue[] | null;
+	/** Change handler */
+	onChange: (value: TValue | TValue[] | null) => void;
+	/** Static options */
+	options?: SelectOptions<TValue>;
+	/** Dynamic options loader */
+	loadOptions?: (search: string) => Promise<SelectOption<TValue>[]>;
+	/** Allow multiple selections */
+	multiple?: boolean;
+	/** Allow clearing selection */
+	clearable?: boolean;
+	/** Max selections (for multiple mode) */
+	maxSelections?: number;
+	/** Debounce delay for loadOptions (ms) */
+	debounceMs?: number;
+	/** Loading state */
+	loading?: boolean;
+	/** Empty state message */
+	emptyMessage?: string;
+}
+
+// =============================================================================
+// Boolean Inputs
+// =============================================================================
+
+export interface ToggleInputProps extends BasePrimitiveProps {
+	value: boolean;
+	onChange: (value: boolean) => void;
+	/** Size variant */
+	size?: "sm" | "default" | "lg";
+}
+
+export interface CheckboxInputProps extends BasePrimitiveProps {
+	value: boolean;
+	onChange: (value: boolean) => void;
+	/** Indeterminate state */
+	indeterminate?: boolean;
+}
+
+export interface CheckboxGroupProps<TValue = string>
+	extends BasePrimitiveProps {
+	value: TValue[];
+	onChange: (value: TValue[]) => void;
+	options: SelectOption<TValue>[];
+	/** Layout direction */
+	orientation?: "horizontal" | "vertical";
+}
+
+export interface RadioGroupProps<TValue = string> extends BasePrimitiveProps {
+	value: TValue | null;
+	onChange: (value: TValue) => void;
+	options: SelectOption<TValue>[];
+	orientation?: "horizontal" | "vertical";
+}
+
+// =============================================================================
+// Date/Time Inputs
+// =============================================================================
+
+export interface DateInputProps extends BasePrimitiveProps {
+	value: Date | null;
+	onChange: (value: Date | null) => void;
+	/** Minimum date */
+	minDate?: Date;
+	/** Maximum date */
+	maxDate?: Date;
+	/** Date format display */
+	format?: string;
+}
+
+export interface DateTimeInputProps extends DateInputProps {
+	/** Time precision */
+	precision?: "minute" | "second";
+}
+
+export interface TimeInputProps extends BasePrimitiveProps {
+	value: string | null; // "HH:mm" or "HH:mm:ss"
+	onChange: (value: string | null) => void;
+	precision?: "minute" | "second";
+}
+
+export interface DateRangeInputProps extends BasePrimitiveProps {
+	value: { start: Date | null; end: Date | null };
+	onChange: (value: { start: Date | null; end: Date | null }) => void;
+	minDate?: Date;
+	maxDate?: Date;
+}
+
+// =============================================================================
+// Special Inputs
+// =============================================================================
+
+export interface TagInputProps extends BasePrimitiveProps {
+	value: string[];
+	onChange: (value: string[]) => void;
+	/** Suggestions for autocomplete */
+	suggestions?: string[];
+	/** Max tags */
+	maxTags?: number;
+	/** Allow duplicates */
+	allowDuplicates?: boolean;
+	/** Validation pattern */
+	pattern?: RegExp;
+}
+
+export interface ColorInputProps extends BasePrimitiveProps {
+	value: string; // hex color
+	onChange: (value: string) => void;
+	/** Preset colors */
+	presets?: string[];
+	/** Allow alpha */
+	alpha?: boolean;
+}
+
+export interface SliderInputProps extends BasePrimitiveProps {
+	value: number | [number, number];
+	onChange: (value: number | [number, number]) => void;
+	min: number;
+	max: number;
+	step?: number;
+	/** Show value label */
+	showValue?: boolean;
+}
+
+export interface JsonEditorProps extends BasePrimitiveProps {
+	value: unknown;
+	onChange: (value: unknown) => void;
+	/** Max height */
+	maxHeight?: string;
+	/** Line numbers */
+	showLineNumbers?: boolean;
+	/** Schema for validation */
+	schema?: unknown;
+}
+
+// =============================================================================
+// Utility Types
+// =============================================================================
+
+/** Check if options are grouped */
+export function isOptionGroup<T>(
+	option: SelectOption<T> | SelectOptionGroup<T>,
+): option is SelectOptionGroup<T> {
+	return "options" in option;
+}
+
+/** Flatten grouped options */
+export function flattenOptions<T>(
+	options: SelectOptions<T>,
+): SelectOption<T>[] {
+	return options.flatMap((opt) => (isOptionGroup(opt) ? opt.options : [opt]));
+}

package/src/components/ui/accordion.tsx

@@ -0,0 +1,72 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "../../lib/utils"
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("overflow-hidden rounded-md border flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("data-open:bg-muted/50 not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-left text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <CaretDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <CaretUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="data-open:animate-accordion-down data-closed:animate-accordion-up px-2 text-xs/relaxed overflow-hidden"
+      {...props}
+    >
+      <div
+        className={cn(
+          "pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/ui/avatar.tsx

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

package/src/components/ui/badge.tsx

@@ -0,0 +1,48 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const badgeVariants = cva(
+  "h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
+  {
+    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 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/20 dark:bg-input/30",
+        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",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ className, variant })),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/button.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border dark:bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        xs: "h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5",
+        sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4",
+        icon: "size-7 [&_svg:not([class*='size-'])]:size-3.5",
+        "icon-xs": "size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5",
+        "icon-sm": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-lg": "size-8 [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/card.tsx

@@ -0,0 +1,94 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-lg py-4 text-xs/relaxed ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg group/card flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-xs/relaxed", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("rounded-b-lg px-4 group-data-[size=sm]/card:px-3 [.border-t]:pt-4 group-data-[size=sm]/card:[.border-t]:pt-3 flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,27 @@
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+
+import { cn } from "../../lib/utils"
+import { CheckIcon } from "@phosphor-icons/react"
+
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+      >
+        <CheckIcon
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }