@alfredmouelle/create-stack 0.1.0

package/_stack/apps/tanstack-base/src/components/ui/date-picker.tsx

@@ -0,0 +1,83 @@
+import { format, isValid, parseISO } from 'date-fns'
+import { CalendarIcon, X } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from '~/components/ui/button'
+import { Calendar } from '~/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover'
+import { toISODate } from '~/lib/date'
+import { cn } from '~/lib/utils'
+
+interface DatePickerProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+}
+
+export function DatePicker({
+  value,
+  onChange,
+  placeholder = 'Pick a date',
+  disabled,
+  className,
+}: DatePickerProps) {
+  const [open, setOpen] = useState(false)
+  const parsed = value ? parseISO(value) : undefined
+  const date = parsed && isValid(parsed) ? parsed : undefined
+
+  const clear = () => {
+    onChange('')
+    setOpen(false)
+  }
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <div className={cn('group relative w-full', className)}>
+        <PopoverTrigger asChild>
+          <Button
+            className={cn(
+              'w-full cursor-pointer justify-start px-3 text-left font-normal',
+              !date && 'text-muted-foreground',
+            )}
+            disabled={disabled}
+            variant="outline"
+          >
+            <CalendarIcon
+              className={cn(
+                'mr-2 size-4 opacity-50 transition-opacity',
+                date && !disabled && 'group-hover:opacity-0',
+              )}
+            />
+            {date ? format(date, 'PPP') : <span>{placeholder}</span>}
+          </Button>
+        </PopoverTrigger>
+
+        {date && !disabled && (
+          <button
+            aria-label="Clear date"
+            className="absolute top-1/2 left-3 z-10 flex size-4 -translate-y-1/2 cursor-pointer items-center justify-center text-muted-foreground opacity-0 transition-opacity hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100"
+            onClick={clear}
+            type="button"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>
+
+      <PopoverContent align="start" className="w-auto p-0">
+        <Calendar
+          autoFocus
+          mode="single"
+          onSelect={(selected) => {
+            if (selected) {
+              onChange(toISODate(selected))
+              setOpen(false)
+            }
+          }}
+          selected={date}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}

package/_stack/apps/tanstack-base/src/components/ui/date-range-picker.tsx

@@ -0,0 +1,136 @@
+import { format, parseISO } from 'date-fns'
+import { CalendarRange, X } from 'lucide-react'
+import { type ComponentProps, useState } from 'react'
+import type { DateRange } from 'react-day-picker'
+import { Button } from '~/components/ui/button'
+import { Calendar } from '~/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover'
+import { toISODate } from '~/lib/date'
+import { cn } from '~/lib/utils'
+
+export interface DateRangeValue {
+  from: string
+  to: string
+}
+
+interface DateRangePickerProps {
+  value: DateRangeValue | null
+  onChange: (value: DateRangeValue | null) => void
+  placeholder?: string
+  numberOfMonths?: number
+  align?: ComponentProps<typeof PopoverContent>['align']
+  triggerVariant?: ComponentProps<typeof Button>['variant']
+  triggerClassName?: string
+  formatLabel?: (value: DateRangeValue) => string
+}
+
+const defaultFormatLabel = (value: DateRangeValue) =>
+  `${format(parseISO(value.from), 'd MMM')} – ${format(parseISO(value.to), 'd MMM')}`
+
+export function DateRangePicker({
+  value,
+  onChange,
+  placeholder = 'Plage de dates',
+  numberOfMonths = 2,
+  align = 'end',
+  triggerVariant = 'outline',
+  triggerClassName,
+  formatLabel = defaultFormatLabel,
+}: DateRangePickerProps) {
+  const [open, setOpen] = useState(false)
+  const [draft, setDraft] = useState<DateRange | undefined>()
+  const hasValue = value !== null
+
+  const handleOpenChange = (next: boolean) => {
+    if (next) {
+      setDraft(value ? { from: parseISO(value.from), to: parseISO(value.to) } : undefined)
+    }
+    setOpen(next)
+  }
+
+  const applyDraft = () => {
+    if (!(draft?.from && draft.to)) return
+    onChange({
+      from: toISODate(draft.from),
+      to: toISODate(draft.to),
+    })
+    setOpen(false)
+  }
+
+  const reset = () => {
+    setDraft(undefined)
+    onChange(null)
+    setOpen(false)
+  }
+
+  return (
+    <Popover onOpenChange={handleOpenChange} open={open}>
+      <div className="group relative inline-flex shrink-0">
+        <PopoverTrigger asChild>
+          <Button
+            className={cn('cursor-pointer', triggerClassName)}
+            size="sm"
+            variant={hasValue ? 'secondary' : triggerVariant}
+          >
+            <CalendarRange
+              className={cn('transition-opacity', hasValue && 'group-hover:opacity-0')}
+            />
+            {hasValue ? formatLabel(value) : placeholder}
+          </Button>
+        </PopoverTrigger>
+
+        {hasValue && (
+          <button
+            aria-label="Clear range"
+            className="absolute top-1/2 left-3 z-10 flex size-4 -translate-y-1/2 cursor-pointer items-center justify-center text-muted-foreground opacity-0 transition-opacity hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100"
+            onClick={(event) => {
+              event.stopPropagation()
+              reset()
+            }}
+            type="button"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>
+      <PopoverContent align={align} className="w-auto p-0">
+        <Calendar
+          autoFocus
+          mode="range"
+          numberOfMonths={numberOfMonths}
+          onSelect={setDraft}
+          selected={draft}
+        />
+        <div className="flex items-center justify-between gap-2 border-t p-2">
+          <Button
+            className="cursor-pointer"
+            disabled={!(hasValue || draft?.from)}
+            onClick={reset}
+            size="sm"
+            variant="ghost"
+          >
+            Réinitialiser
+          </Button>
+          <div className="flex gap-2">
+            <Button
+              className="cursor-pointer"
+              onClick={() => setOpen(false)}
+              size="sm"
+              variant="ghost"
+            >
+              Annuler
+            </Button>
+            <Button
+              className="cursor-pointer"
+              disabled={!(draft?.from && draft.to)}
+              onClick={applyDraft}
+              size="sm"
+            >
+              Appliquer
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/_stack/apps/tanstack-base/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,246 @@
+'use client'
+
+import { CheckIcon, ChevronRightIcon } from 'lucide-react'
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui'
+import type * as React from 'react'
+import { cn } from '~/lib/utils'
+
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  className,
+  align = 'start',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        align={align}
+        className={cn(
+          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 relative z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) animate-none! overflow-y-auto overflow-x-hidden rounded-3xl bg-popover/70 p-1.5 text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 data-closed:animate-out data-open:animate-in data-[state=closed]:overflow-hidden **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[variant=destructive]:**:text-accent-foreground! **:data-[variant=destructive]:text-accent-foreground! **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[variant=destructive]:focus:bg-foreground/10! dark:ring-foreground/10',
+          className,
+        )}
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default select-none items-center gap-2.5 rounded-2xl px-3 py-2 font-medium text-sm outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:text-destructive",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="dropdown-menu-item"
+      data-variant={variant}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      checked={checked}
+      className={cn(
+        "relative flex cursor-default select-none items-center gap-2.5 rounded-2xl py-2 pr-8 pl-3 font-medium text-sm outline-hidden focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-9.5 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="dropdown-menu-checkbox-item"
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      className={cn(
+        "relative flex cursor-default select-none items-center gap-2.5 rounded-2xl py-2 pr-8 pl-3 font-medium text-sm outline-hidden focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-9.5 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="dropdown-menu-radio-item"
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      className={cn('px-3 py-2.5 text-muted-foreground text-xs data-inset:pl-9.5', className)}
+      data-inset={inset}
+      data-slot="dropdown-menu-label"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      className={cn('-mx-1.5 my-1.5 h-px bg-border/50', className)}
+      data-slot="dropdown-menu-separator"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        'ml-auto text-muted-foreground text-xs tracking-widest group-focus/dropdown-menu-item:text-accent-foreground',
+        className,
+      )}
+      data-slot="dropdown-menu-shortcut"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      className={cn(
+        "flex cursor-default select-none items-center gap-2 rounded-2xl px-3 py-2 font-medium text-sm outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-open:bg-accent data-inset:pl-9.5 data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="dropdown-menu-sub-trigger"
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      className={cn(
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 relative z-50 min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) animate-none! overflow-hidden rounded-3xl bg-popover/70 p-1.5 text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 data-closed:animate-out data-open:animate-in **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[variant=destructive]:**:text-accent-foreground! **:data-[variant=destructive]:text-accent-foreground! **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[variant=destructive]:focus:bg-foreground/10! dark:ring-foreground/10',
+        className,
+      )}
+      data-slot="dropdown-menu-sub-content"
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+}

package/_stack/apps/tanstack-base/src/components/ui/input-group.tsx

@@ -0,0 +1,97 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import type { ComponentProps } from 'react'
+import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
+import { cn } from '~/lib/utils'
+
+function InputGroup({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'group/input-group relative flex h-9 w-full min-w-0 items-center rounded-4xl border border-transparent bg-input/50 outline-none transition-[color,box-shadow,background-color] has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
+        className,
+      )}
+      data-slot="input-group"
+      role="group"
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text select-none items-center justify-center gap-2 py-2 font-medium text-muted-foreground text-sm group-data-[disabled=true]/input-group:opacity-50 [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        'inline-start': 'order-first pl-3 has-[>button]:-ml-1',
+        'inline-end': 'order-last pr-3 has-[>button]:-mr-1',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  },
+)
+
+function InputGroupAddon({
+  className,
+  align = 'inline-start',
+  ...props
+}: ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      data-align={align}
+      data-slot="input-group-addon"
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest('button')) return
+        e.currentTarget.parentElement?.querySelector('input')?.focus()
+      }}
+      role="group"
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-muted-foreground text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({ className, ...props }: ComponentProps<'input'>) {
+  return (
+    <Input
+      className={cn(
+        'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent',
+        className,
+      )}
+      data-slot="input-group-control"
+      {...props}
+    />
+  )
+}
+
+function InputGroupButton({
+  className,
+  type = 'button',
+  variant = 'ghost',
+  ...props
+}: ComponentProps<typeof Button>) {
+  return (
+    <Button
+      className={cn('flex items-center gap-2 rounded-4xl text-sm shadow-none', className)}
+      type={type}
+      variant={variant}
+      {...props}
+    />
+  )
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText }

package/_stack/apps/tanstack-base/src/components/ui/input.tsx

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react'
+import { cn } from '~/lib/utils'
+
+function Input({ className, type, ...props }: ComponentProps<'input'>) {
+  return (
+    <input
+      className={cn(
+        'h-9 w-full min-w-0 rounded-3xl border border-transparent bg-input/50 px-3 py-1 text-base outline-none transition-[color,box-shadow,background-color] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+        className,
+      )}
+      data-slot="input"
+      type={type}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/_stack/apps/tanstack-base/src/components/ui/label.tsx

@@ -0,0 +1,18 @@
+import { Label as LabelPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { cn } from '~/lib/utils'
+
+function Label({ className, ...props }: ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      className={cn(
+        'flex select-none items-center gap-2 font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50',
+        className,
+      )}
+      data-slot="label"
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/_stack/apps/tanstack-base/src/components/ui/popover.tsx

@@ -0,0 +1,74 @@
+import { Popover as PopoverPrimitive } from 'radix-ui'
+import type * as React from 'react'
+
+import { cn } from '~/lib/utils'
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        align={align}
+        className={cn(
+          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-3xl bg-popover p-4 text-popover-foreground text-sm shadow-lg outline-hidden ring-1 ring-foreground/5 duration-100 data-closed:animate-out data-open:animate-in dark:ring-foreground/10',
+          className,
+        )}
+        data-slot="popover-content"
+        sideOffset={sideOffset}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('flex flex-col gap-1 text-sm', className)}
+      data-slot="popover-header"
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+  return (
+    <div className={cn('font-medium text-base', className)} data-slot="popover-title" {...props} />
+  )
+}
+
+function PopoverDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      className={cn('text-muted-foreground', className)}
+      data-slot="popover-description"
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}

package/_stack/apps/tanstack-base/src/components/ui/skeleton.tsx

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