@stampui/blocks 1.0.0

package/src/components/core/avatar.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const avatarStyles = cva(
+  "relative flex shrink-0 overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        xs: "h-6 w-6 text-[10px]",
+        sm: "h-8 w-8 text-xs",
+        md: "h-10 w-10 text-sm",
+        lg: "h-12 w-12 text-base",
+        xl: "h-16 w-16 text-lg",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+)
+
+export interface AvatarProps
+  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
+    VariantProps<typeof avatarStyles> {}
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  AvatarProps
+>(({ className, size, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cx(avatarStyles({ size }), className)}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cx("aspect-square h-full w-full object-cover", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cx(
+      "flex h-full w-full items-center justify-center rounded-full",
+      "bg-surface-3 text-muted-foreground font-medium",
+      className,
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  max?: number
+  children: React.ReactNode
+}
+
+function AvatarGroup({ children, max, className, ...props }: AvatarGroupProps) {
+  const childArray = React.Children.toArray(children)
+  const shown = max ? childArray.slice(0, max) : childArray
+  const overflow = max ? childArray.length - max : 0
+
+  return (
+    <div className={cx("flex -space-x-2", className)} {...props}>
+      {shown}
+      {overflow > 0 && (
+        <div className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-surface-3 border-2 border-background text-xs font-medium text-muted-foreground">
+          +{overflow}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup }

package/src/components/core/badge.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const badgeStyles = cva(
+  "inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium tracking-wide transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-surface-2 text-foreground border border-border",
+        secondary: "bg-surface-2 text-muted-foreground border border-border-soft",
+        success: "bg-green-950/60 text-green-400 border border-green-900/50",
+        warning: "bg-yellow-950/60 text-yellow-400 border border-yellow-900/50",
+        danger: "bg-red-950/60 text-red-400 border border-red-900/50",
+        info: "bg-blue-950/60 text-blue-400 border border-blue-900/50",
+        outline: "bg-transparent text-muted-foreground border border-border",
+        neutral: "bg-surface-2 text-muted-foreground border border-border-soft",
+        free: "bg-surface-2 text-muted-foreground border border-border-soft",
+        pro: "bg-surface-3 text-foreground border border-border-strong",
+        new: "bg-surface-raised text-foreground border border-border",
+        signal: "bg-surface-3 text-foreground border border-border-strong",
+        locked: "bg-surface-3 text-muted-foreground border border-border",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeStyles> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <span className={cx(badgeStyles({ variant }), className)} {...props} />
+  )
+}

package/src/components/core/breadcrumb.tsx

@@ -0,0 +1,63 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export function Breadcrumb({ className, ...props }: React.ComponentPropsWithoutRef<"nav">) {
+  return <nav aria-label="breadcrumb" className={className} {...props} />
+}
+
+export function BreadcrumbList({ className, ...props }: React.ComponentPropsWithoutRef<"ol">) {
+  return (
+    <ol className={cx("flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground", className)} {...props} />
+  )
+}
+
+export function BreadcrumbItem({ className, ...props }: React.ComponentPropsWithoutRef<"li">) {
+  return <li className={cx("inline-flex items-center gap-1.5", className)} {...props} />
+}
+
+export function BreadcrumbLink({
+  className,
+  asChild,
+  ...props
+}: React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "a"
+  return (
+    <Comp className={cx("transition-colors hover:text-foreground", className)} {...props} />
+  )
+}
+
+export function BreadcrumbPage({ className, ...props }: React.ComponentPropsWithoutRef<"span">) {
+  return (
+    <span
+      role="link"
+      aria-current="page"
+      aria-disabled="true"
+      className={cx("font-medium text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export function BreadcrumbSeparator({ children, className }: { children?: React.ReactNode; className?: string }) {
+  return (
+    <li role="presentation" aria-hidden="true" className={cx("text-muted-foreground", className)}>
+      {children ?? <ChevronRight className="h-3.5 w-3.5" />}
+    </li>
+  )
+}
+
+export function BreadcrumbEllipsis({ className, ...props }: React.ComponentPropsWithoutRef<"span">) {
+  return (
+    <span
+      role="presentation"
+      aria-hidden="true"
+      className={cx("flex h-9 w-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="h-4 w-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}

package/src/components/core/button-group.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical"
+}
+
+export function ButtonGroup({
+  className,
+  orientation = "horizontal",
+  ...props
+}: ButtonGroupProps) {
+  return (
+    <div
+      role="group"
+      data-orientation={orientation}
+      className={cx(
+        "inline-flex",
+        orientation === "horizontal"
+          ? [
+              "flex-row",
+              "[&>*:not(:first-child)]:border-l-0",
+              "[&>*:not(:first-child)]:rounded-l-none",
+              "[&>*:not(:last-child)]:rounded-r-none",
+            ]
+          : [
+              "flex-col",
+              "[&>*:not(:first-child)]:border-t-0",
+              "[&>*:not(:first-child)]:rounded-t-none",
+              "[&>*:not(:last-child)]:rounded-b-none",
+            ],
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/src/components/core/button.tsx

@@ -0,0 +1,110 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+/**
+ * Floyka Button Component
+ *
+ * Design tokens used (defined in globals.css / tailwind.config):
+ *   --foreground        #FAFAFA  (primary text)
+ *   --background        #070708  (main bg)
+ *   --surface-2         #09090B  (raised surface)
+ *   --border            #23252A  (default border)
+ *   --border-strong     slightly brighter graphite
+ *   --muted-foreground  dimmed text
+ *
+ * Variants follow Floyka design rules:
+ *   - primary  → white bg / dark text (the only "colored" action)
+ *   - outline  → transparent bg / border / foreground text
+ *   - ghost    → transparent bg / muted text, subtle hover
+ *   - danger   → danger-tinted surface, used for destructive actions
+ *
+ * All variants:
+ *   - rounded-lg (12px radius per design rules)
+ *   - no glow, no thick borders, no scale animations
+ *   - 150-200ms ease-out transitions
+ *   - focus-visible ring uses ring-border-strong (NOT blue/neon)
+ */
+
+const buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap",
+    "rounded-lg text-sm font-medium",
+    "transition-all duration-[150ms] ease-out",
+    "outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-40",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  ],
+  {
+    variants: {
+      size: {
+        sm:        "h-8 px-3 text-xs rounded-md gap-1.5",
+        md:        "h-9 px-4",
+        lg:        "h-10 px-5 text-base",
+        icon:      "h-9 w-9 rounded-lg",
+        "icon-sm": "h-8 w-8 rounded-md",
+      },
+      variant: {
+        /** Primary — white bg, dark text. The strongest CTA. */
+        primary:
+          "bg-foreground text-background hover:bg-foreground/90",
+
+        /** Outline — bordered, transparent. Secondary actions. */
+        outline:
+          "border border-border bg-transparent text-foreground hover:bg-surface-2 hover:border-border-strong",
+
+        /** Ghost — no border, no bg. Nav actions, icon rows. */
+        ghost:
+          "bg-transparent text-muted-foreground hover:bg-surface-2 hover:text-foreground",
+
+        /** Danger — destructive action. Subtle tinted surface. */
+        danger:
+          "bg-transparent border border-border text-foreground hover:bg-red-950/40 hover:border-red-900/50",
+
+        /** Rounded — pill-shaped outline. Decorative / marketing CTAs. */
+        rounded:
+          "border border-border bg-transparent text-foreground hover:bg-surface-2 hover:border-border-strong rounded-full",
+
+        /** Dashed — dashed border. Draft states, placeholder actions. */
+        dashed:
+          "border border-dashed border-border bg-transparent text-muted-foreground hover:bg-surface-2 hover:text-foreground hover:border-border-strong",
+
+        /** Dashed Rounded — pill shape with dashed border. */
+        "dashed-rounded":
+          "border border-dashed border-border bg-transparent text-muted-foreground hover:bg-surface-2 hover:text-foreground hover:border-border-strong rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  /**
+   * When true, the button renders as a `Slot` — allowing you to pass any
+   * child element (e.g. `<a>` or Next.js `<Link>`) while keeping all
+   * button styles applied.
+   */
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        ref={ref}
+        className={cx(buttonVariants({ variant, size, className }))}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/src/components/core/calendar.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+const MONTHS = ["January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December"]
+const DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
+
+function getDaysInMonth(year: number, month: number) {
+  return new Date(year, month + 1, 0).getDate()
+}
+
+function getFirstDayOfMonth(year: number, month: number) {
+  return new Date(year, month, 1).getDay()
+}
+
+function isSameDay(a: Date, b: Date) {
+  return a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+}
+
+function isToday(date: Date) {
+  return isSameDay(date, new Date())
+}
+
+export interface CalendarProps {
+  selected?: Date
+  onSelect?: (date: Date) => void
+  disabled?: (date: Date) => boolean
+  fromDate?: Date
+  toDate?: Date
+  className?: string
+  initialMonth?: Date
+}
+
+export function Calendar({
+  selected,
+  onSelect,
+  disabled,
+  fromDate,
+  toDate,
+  className,
+  initialMonth,
+}: CalendarProps) {
+  const today = new Date()
+  const [viewYear, setViewYear] = React.useState(
+    initialMonth?.getFullYear() ?? selected?.getFullYear() ?? today.getFullYear()
+  )
+  const [viewMonth, setViewMonth] = React.useState(
+    initialMonth?.getMonth() ?? selected?.getMonth() ?? today.getMonth()
+  )
+
+  function prevMonth() {
+    if (viewMonth === 0) { setViewMonth(11); setViewYear(viewYear - 1) }
+    else setViewMonth(viewMonth - 1)
+  }
+
+  function nextMonth() {
+    if (viewMonth === 11) { setViewMonth(0); setViewYear(viewYear + 1) }
+    else setViewMonth(viewMonth + 1)
+  }
+
+  const daysInMonth = getDaysInMonth(viewYear, viewMonth)
+  const firstDay = getFirstDayOfMonth(viewYear, viewMonth)
+  const cells: (Date | null)[] = [
+    ...Array(firstDay).fill(null),
+    ...Array.from({ length: daysInMonth }, (_, i) => new Date(viewYear, viewMonth, i + 1)),
+  ]
+  while (cells.length % 7 !== 0) cells.push(null)
+
+  function isDisabled(date: Date) {
+    if (disabled?.(date)) return true
+    if (fromDate && date < fromDate) return true
+    if (toDate && date > toDate) return true
+    return false
+  }
+
+  return (
+    <div className={cx("w-full select-none p-3", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-3">
+        <button
+          type="button"
+          onClick={prevMonth}
+          className="flex h-7 w-7 items-center justify-center rounded-md border border-border text-muted-foreground hover:bg-surface-2 hover:text-foreground transition-colors"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </button>
+        <span className="text-sm font-medium">
+          {MONTHS[viewMonth]} {viewYear}
+        </span>
+        <button
+          type="button"
+          onClick={nextMonth}
+          className="flex h-7 w-7 items-center justify-center rounded-md border border-border text-muted-foreground hover:bg-surface-2 hover:text-foreground transition-colors"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </button>
+      </div>
+
+      {/* Day headers */}
+      <div className="grid grid-cols-7 mb-1">
+        {DAYS.map((d) => (
+          <div key={d} className="flex h-8 items-center justify-center text-xs font-medium text-muted-foreground">
+            {d}
+          </div>
+        ))}
+      </div>
+
+      {/* Day cells */}
+      <div className="grid grid-cols-7 gap-y-0.5">
+        {cells.map((date, i) => {
+          if (!date) return <div key={`empty-${i}`} />
+          const sel = selected && isSameDay(date, selected)
+          const tod = isToday(date)
+          const dis = isDisabled(date)
+          return (
+            <button
+              key={date.toISOString()}
+              type="button"
+              disabled={dis}
+              onClick={() => !dis && onSelect?.(date)}
+              className={cx(
+                "flex h-8 w-full items-center justify-center rounded-md text-sm transition-colors",
+                "disabled:pointer-events-none disabled:opacity-30",
+                sel
+                  ? "bg-foreground text-background font-medium"
+                  : tod
+                    ? "border border-border font-medium text-foreground hover:bg-surface-2"
+                    : "text-foreground hover:bg-surface-2"
+              )}
+            >
+              {date.getDate()}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/core/card.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cx } from "@/lib/cx"
+
+const cardStyles = cva(
+  "flex flex-col rounded-xl overflow-hidden text-card-foreground",
+  {
+    variants: {
+      variant: {
+        surface: "bg-card border border-border",
+        elevated: "bg-surface-2 border border-border-strong",
+        command: "bg-surface-3 border border-border-strong",
+        preview: "bg-surface-2 border border-dashed border-border-soft",
+        muted: "bg-muted border border-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "surface",
+    },
+  }
+)
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardStyles> {}
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div ref={ref} className={cx(cardStyles({ variant }), className)} {...props} />
+  )
+)
+Card.displayName = "Card"
+
+export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cx("px-6 py-5 flex flex-col gap-1.5", className)} {...props} />
+  )
+)
+CardHeader.displayName = "CardHeader"
+
+export const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cx("text-base font-semibold leading-tight text-foreground", className)} {...props} />
+  )
+)
+CardTitle.displayName = "CardTitle"
+
+export const CardBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cx("px-6 pb-6 flex-1", className)} {...props} />
+  )
+)
+CardBody.displayName = "CardBody"
+
+export const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cx("px-6 py-4 bg-muted/10 border-t border-border/50 flex items-center", className)} {...props} />
+  )
+)
+CardFooter.displayName = "CardFooter"