create-freakpunch 0.0.0-stage → 0.2.0

package/template/src/components/ui/skeleton.tsx

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

package/template/src/components/ui/sonner.tsx

@@ -0,0 +1,78 @@
+import { cn } from "@/lib/utils"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  TriangleAlertIcon,
+  OctagonXIcon,
+  Loader2Icon,
+} from "lucide-react"
+
+const Toaster = ({
+  className,
+  style,
+  icons,
+  toastOptions,
+  ...props
+}: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+  const classNames = toastOptions?.classNames
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className={cn("toaster group font-sans!", className)}
+      icons={{
+        success: <CircleCheckIcon className="size-4 text-blue-500" />,
+        info: <InfoIcon className="size-4 text-muted-foreground" />,
+        warning: <TriangleAlertIcon className="size-4 text-orange-500" />,
+        error: <OctagonXIcon className="size-4 text-destructive-foreground" />,
+        loading: (
+          <Loader2Icon className="size-4 animate-spin text-muted-foreground" />
+        ),
+        ...icons,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius-2xl)",
+          "--toast-icon-margin-start": "0px",
+          "--toast-icon-margin-end": "0px",
+          "--toast-svg-margin-start": "0px",
+          "--toast-svg-margin-end": "0px",
+          ...style,
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        ...toastOptions,
+        classNames: {
+          ...classNames,
+          toast: cn(
+            "cn-toast items-start! gap-3! text-sm! data-[styled=true]:border-0! data-[styled=true]:shadow-(--shadow-popover)! data-[styled=true]:ring-1 data-[styled=true]:ring-border data-[styled=true]:focus-visible:ring-2 data-[styled=true]:focus-visible:ring-ring/30 [&[data-styled=false]_[data-title]>*]:shadow-(--shadow-popover)",
+            classNames?.toast
+          ),
+          title: cn("leading-5!", classNames?.title),
+          description: cn(
+            "text-sm! leading-5! text-muted-foreground!",
+            classNames?.description
+          ),
+          icon: cn("mt-0.5", classNames?.icon),
+          actionButton: cn(
+            "h-6! rounded-md! bg-primary! px-2! text-xs! font-medium! text-primary-foreground! hover:bg-primary/90! focus-visible:ring-2 focus-visible:ring-ring/30 [[data-cancel]+&]:-ml-1.5!",
+            classNames?.actionButton
+          ),
+          cancelButton: cn(
+            "h-6! rounded-md! bg-fill-2! px-2! text-xs! font-medium! text-foreground! hover:bg-fill-3!",
+            classNames?.cancelButton
+          ),
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/template/src/components/ui/spinner.tsx

@@ -0,0 +1,42 @@
+import { cn } from "@/lib/utils"
+import { useTranslation } from "react-i18next"
+import { Loader2Icon } from "lucide-react"
+
+function Spinner({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"svg"> & {
+  /** `gradient`: a closed ring whose line fades around it, 1.5px at every size. */
+  variant?: "default" | "gradient"
+}) {
+  const { t } = useTranslation()
+  if (variant === "gradient") {
+    return (
+      <svg
+        data-slot="spinner"
+        data-variant="gradient"
+        role="status"
+        aria-label={t("a11y.loading")}
+        viewBox="0 0 24 24"
+        className={cn(
+          "size-4 shrink-0 animate-spin rounded-full bg-[conic-gradient(color-mix(in_oklab,currentColor_5%,transparent),color-mix(in_oklab,currentColor_50%,transparent))] mask-[radial-gradient(closest-side,transparent_calc(75%-1.25px),#000_calc(75%-0.5px),#000_calc(75%+0.5px),transparent_calc(75%+1.25px))]",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <Loader2Icon
+      data-slot="spinner"
+      role="status"
+      aria-label={t("a11y.loading")}
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

package/template/src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border-2 transition-all outline-none group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-5 data-[size=default]:w-8 data-[size=sm]:h-4 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary group-has-[:focus-visible]/field-label:data-checked:border-primary data-checked:focus-visible:border-primary data-unchecked:border-transparent data-unchecked:bg-fill-3 group-has-[:focus-visible]/field-label:data-unchecked:border-transparent data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-primary-foreground shadow-sm ring-0 transition-transform not-dark:bg-clip-padding group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-checked:translate-x-[calc(100%-4px)] data-unchecked:translate-x-0 data-unchecked:bg-linear-to-b data-unchecked:from-white/8 data-unchecked:to-transparent data-unchecked:to-70% dark:data-unchecked:bg-neutral-500"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/template/src/components/ui/table.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[:where(&)_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn(
+        "[&_tr:last-child]:border-0 [&_tr:last-child]:[--table-divider:0px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-fill-1 font-medium [&>tr]:last:border-b-0 [&>tr]:last:[--table-divider:0px] [&.border-t>tr:first-child]:[--table-divider-top:1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors [--table-divider-top:0px] [--table-divider:0px] hover:bg-fill-1 has-aria-expanded:bg-fill-1 data-[state=selected]:bg-fill-2 [&.border-b]:[--table-divider:1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-[calc(--spacing(10)-var(--table-divider,0px))] px-3 pt-2.5 pb-[calc(--spacing(2.5)-var(--table-divider,0px))] text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "px-3 pt-[calc(--spacing(2)-var(--table-divider-top,0px))] pb-[calc(--spacing(2)-var(--table-divider,0px))] align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn(
+        "mt-4 px-3 text-left text-sm text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/template/src/components/ui/tabs.tsx

@@ -0,0 +1,191 @@
+"use client"
+
+import * as React from "react"
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list relative isolate inline-flex w-fit items-center justify-center rounded-lg p-0.5 text-muted-foreground data-[variant=line]:rounded-none data-horizontal:h-8 data-horizontal:has-data-[layout=stacked]:h-auto data-horizontal:data-[size=lg]:h-9 data-vertical:h-fit data-vertical:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-fill-2",
+        secondary: "bg-transparent",
+        primary: "bg-transparent",
+        line: "bg-transparent",
+      },
+      size: {
+        default: "",
+        lg: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const tabsIndicatorVariants = cva("absolute -z-10", {
+  variants: {
+    variant: {
+      default:
+        "top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width) rounded-md bg-raised shadow-xs transition-[top,left,width,height] duration-200 ease-out motion-reduce:transition-none",
+      secondary:
+        "top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width) rounded-md bg-fill-2 transition-[top,left,width,height] duration-200 ease-out motion-reduce:transition-none",
+      primary:
+        "top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width) rounded-md bg-primary transition-[top,left,width,height] duration-200 ease-out motion-reduce:transition-none",
+      line: "bg-foreground [--tab-line-x:--spacing(2)] [--tab-line-y:--spacing(1)] group-has-data-[layout=stacked]/tabs-list:[--tab-line-x:--spacing(2.5)] group-has-data-[layout=stacked]/tabs-list:[--tab-line-y:--spacing(2)] group-data-[size=lg]/tabs-list:[--tab-line-x:--spacing(2.5)] group-data-[size=lg]/tabs-list:[--tab-line-y:--spacing(1.5)] data-horizontal:bottom-0 data-horizontal:left-[calc(var(--active-tab-left)+var(--tab-line-x))] data-horizontal:h-0.5 data-horizontal:w-[calc(var(--active-tab-width)-2*var(--tab-line-x))] data-vertical:top-[calc(var(--active-tab-top)+var(--tab-line-y))] data-vertical:right-0 data-vertical:h-[calc(var(--active-tab-height)-2*var(--tab-line-y))] data-vertical:w-0.5",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+function TabsList({
+  className,
+  variant = "default",
+  size = "default",
+  children,
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      data-size={size}
+      className={cn(tabsListVariants({ variant, size }), className)}
+      {...props}
+    >
+      {children}
+      <TabsPrimitive.Indicator
+        data-slot="tabs-indicator"
+        renderBeforeHydration
+        className={tabsIndicatorVariants({ variant })}
+      />
+    </TabsPrimitive.List>
+  )
+}
+
+const tabsTriggerVariants = cva(
+  "group/tabs-trigger relative inline-flex rounded-md border border-transparent! text-xs font-medium whitespace-nowrap text-muted-foreground transition-all hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/30 focus-visible:outline-1 focus-visible:outline-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 data-vertical:w-full [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      layout: {
+        inline:
+          "h-7 items-center justify-center gap-1 px-1.75 group-data-[size=lg]/tabs-list:h-8 group-data-[size=lg]/tabs-list:gap-1.5 group-data-[size=lg]/tabs-list:px-2.25 data-vertical:justify-start",
+        stacked:
+          "flex-col items-start justify-start gap-2 px-2.25 py-1.75 text-left",
+      },
+      align: {
+        start: "",
+        center: "",
+      },
+    },
+    compoundVariants: [
+      {
+        layout: "stacked",
+        align: "center",
+        class: "items-center text-center",
+      },
+    ],
+    defaultVariants: {
+      layout: "inline",
+      align: "start",
+    },
+  }
+)
+
+function TabsTrigger({
+  className,
+  layout = "inline",
+  align = "start",
+  ...props
+}: TabsPrimitive.Tab.Props & VariantProps<typeof tabsTriggerVariants>) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      data-layout={layout}
+      className={cn(
+        tabsTriggerVariants({ layout, align }),
+        "group-data-[variant=line]/tabs-list:rounded-none data-active:text-foreground group-data-[variant=primary]/tabs-list:data-active:text-primary-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** A secondary line in a trigger: an eyebrow above the label or a description under it. */
+function TabsTriggerDescription({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="tabs-trigger-description"
+      className={cn(
+        "text-2xs font-normal text-muted-foreground group-data-[variant=primary]/tabs-list:group-data-active/tabs-trigger:text-primary-foreground/70",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** A count after the label. */
+function TabsTriggerCount({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="tabs-trigger-count"
+      className={cn(
+        "font-normal text-muted-foreground tabular-nums group-data-[variant=primary]/tabs-list:group-data-active/tabs-trigger:text-primary-foreground/70",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsTriggerDescription,
+  TabsTriggerCount,
+  TabsContent,
+  tabsListVariants,
+}

package/template/src/components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full resize-none rounded-lg bg-field px-2.5 py-2 text-xs outline-1 -outline-offset-1 outline-field-border transition-[color,box-shadow,outline-color] duration-200 outline-solid placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/40 dark:aria-invalid:outline-destructive/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/template/src/components/ui/toggle-group.tsx

@@ -0,0 +1,94 @@
+import * as React from "react"
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
+import { type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 2,
+  orientation: "horizontal",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 2,
+  orientation = "horizontal",
+  style,
+  children,
+  ...props
+}: ToggleGroupPrimitive.Props &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }) {
+  const gap = { "--gap": spacing } as React.CSSProperties
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      orientation={orientation}
+      data-orientation={orientation}
+      style={
+        typeof style === "function"
+          ? (state) => ({ ...gap, ...style(state) })
+          : { ...gap, ...style }
+      }
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:data-horizontal:rounded-full data-vertical:flex-col data-vertical:items-stretch data-[spacing=0]:data-[variant=outline]:data-vertical:rounded-2xl",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation }}
+      >
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <TogglePrimitive
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-full group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-2xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-full group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-2xl group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:not-last:border-r-transparent group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:not-last:border-b-transparent",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </TogglePrimitive>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/template/src/components/ui/toggle.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center rounded-lg text-sm font-medium whitespace-nowrap transition-colors outline-none hover:bg-fill-1 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-fill-2 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-border bg-transparent",
+      },
+      size: {
+        default: "h-8 min-w-8 gap-1.5 px-3",
+        sm: "h-7 min-w-7 gap-1 rounded-md px-2.5",
+        lg: "h-9 min-w-9 gap-1.5 px-3.5",
+      },
+    },
+    compoundVariants: [
+      { variant: "outline", size: "default", class: "px-2.75" },
+      { variant: "outline", size: "sm", class: "px-2.25" },
+      { variant: "outline", size: "lg", class: "px-3.25" },
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }