@dalexto/lexsys-registry 0.0.6 → 0.1.0

package/templates/blocks/StatsCard/StatsCard.tsx

@@ -0,0 +1,132 @@
+/**
+ * StatsCard.tsx
+ *
+ * Reference StatsCard block — compound Card metric summary.
+ */
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/primitives/Card"
+import type {
+  StatsCardContentProps,
+  StatsCardDescriptionProps,
+  StatsCardFooterProps,
+  StatsCardHeaderProps,
+  StatsCardProps,
+  StatsCardTitleProps,
+  StatsCardTrendProps,
+  StatsCardValueProps,
+} from "./StatsCard.types"
+import {
+  statsCardClasses,
+  statsCardTrendClasses,
+  statsCardValueClasses,
+} from "./StatsCard.variants"
+import { cn } from "@/lib/utils"
+
+const StatsCard = ({
+  ref,
+  variant,
+  className,
+  children,
+  ...cardProps
+}: StatsCardProps) => {
+  return (
+    <Card
+      ref={ref}
+      variant={variant}
+      className={cn(statsCardClasses(), className)}
+      {...cardProps}
+    >
+      {children}
+    </Card>
+  )
+}
+
+StatsCard.displayName = "StatsCard"
+
+const StatsCardHeader = ({
+  ref,
+  className,
+  ...props
+}: StatsCardHeaderProps) => {
+  return <CardHeader ref={ref} className={className} {...props} />
+}
+
+StatsCardHeader.displayName = "StatsCardHeader"
+
+const StatsCardTitle = ({ ref, className, ...props }: StatsCardTitleProps) => {
+  return <CardTitle ref={ref} className={className} {...props} />
+}
+
+StatsCardTitle.displayName = "StatsCardTitle"
+
+const StatsCardDescription = ({
+  ref,
+  className,
+  ...props
+}: StatsCardDescriptionProps) => {
+  return <CardDescription ref={ref} className={className} {...props} />
+}
+
+StatsCardDescription.displayName = "StatsCardDescription"
+
+const StatsCardContent = ({
+  ref,
+  className,
+  ...props
+}: StatsCardContentProps) => {
+  return <CardContent ref={ref} className={className} {...props} />
+}
+
+StatsCardContent.displayName = "StatsCardContent"
+
+const StatsCardValue = ({ ref, className, ...props }: StatsCardValueProps) => {
+  return (
+    <p
+      ref={ref}
+      className={cn(statsCardValueClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+StatsCardValue.displayName = "StatsCardValue"
+
+const StatsCardTrend = ({ ref, className, ...props }: StatsCardTrendProps) => {
+  return (
+    <span
+      ref={ref}
+      className={cn(statsCardTrendClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+StatsCardTrend.displayName = "StatsCardTrend"
+
+const StatsCardFooter = ({
+  ref,
+  className,
+  ...props
+}: StatsCardFooterProps) => {
+  return <CardFooter ref={ref} className={className} {...props} />
+}
+
+StatsCardFooter.displayName = "StatsCardFooter"
+
+export {
+  StatsCard,
+  StatsCardHeader,
+  StatsCardTitle,
+  StatsCardDescription,
+  StatsCardContent,
+  StatsCardValue,
+  StatsCardTrend,
+  StatsCardFooter,
+}

package/templates/blocks/StatsCard/StatsCard.types.ts

@@ -0,0 +1,43 @@
+/**
+ * StatsCard.types.ts
+ *
+ * Public types for the StatsCard block.
+ */
+
+import type { HTMLAttributes, ReactNode, Ref } from "react"
+import type {
+  CardContentProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardProps,
+  CardTitleProps,
+} from "@/components/primitives/Card"
+
+export interface StatsCardProps extends Omit<CardProps, "children"> {
+  ref?: Ref<HTMLDivElement>
+  className?: CardProps["className"]
+  children?: ReactNode
+}
+
+export type StatsCardHeaderProps = CardHeaderProps
+
+export type StatsCardTitleProps = CardTitleProps
+
+export type StatsCardDescriptionProps = CardDescriptionProps
+
+export type StatsCardContentProps = CardContentProps
+
+export interface StatsCardValueProps extends HTMLAttributes<HTMLParagraphElement> {
+  ref?: Ref<HTMLParagraphElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface StatsCardTrendProps extends HTMLAttributes<HTMLSpanElement> {
+  ref?: Ref<HTMLSpanElement>
+  className?: string
+  children?: ReactNode
+}
+
+export type StatsCardFooterProps = CardFooterProps

package/templates/blocks/StatsCard/StatsCard.variants.ts

@@ -0,0 +1,28 @@
+/**
+ * StatsCard.variants.ts
+ *
+ * Variant classes for the StatsCard block.
+ */
+
+export const statsCardClasses = (): string => {
+  return "lex-stats-card"
+}
+
+export const statsCardValueClasses = (): string => {
+  return [
+    "lex-stats-card__value",
+    "text-(length:--lex-typography-heading-md-font-size)",
+    "font-(--lex-typography-heading-md-font-weight)",
+    "leading-(--lex-typography-heading-md-font-line-height)",
+    "text-(--lex-color-text-primary)",
+    "m-0",
+  ].join(" ")
+}
+
+export const statsCardTrendClasses = (): string => {
+  return [
+    "lex-stats-card__trend",
+    "text-(length:--lex-typography-body-xs-font-size)",
+    "text-(--lex-color-text-secondary)",
+  ].join(" ")
+}

package/templates/primitives/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,142 @@
+/**
+ * Breadcrumb.tsx
+ *
+ * Reference Breadcrumb component implementation.
+ */
+
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import type {
+  BreadcrumbEllipsisProps,
+  BreadcrumbItemProps,
+  BreadcrumbLinkProps,
+  BreadcrumbListProps,
+  BreadcrumbPageProps,
+  BreadcrumbProps,
+  BreadcrumbSeparatorProps,
+} from "./Breadcrumb.types"
+import {
+  breadcrumbEllipsisVariants,
+  breadcrumbItemVariants,
+  breadcrumbLinkVariants,
+  breadcrumbListVariants,
+  breadcrumbPageVariants,
+  breadcrumbRootVariants,
+  breadcrumbSeparatorVariants,
+} from "./Breadcrumb.variants"
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = ({ ref, className, ...props }: BreadcrumbProps) => {
+  return (
+    <nav
+      ref={ref}
+      aria-label="breadcrumb"
+      className={cn(breadcrumbRootVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = ({ ref, className, ...props }: BreadcrumbListProps) => {
+  return (
+    <ol
+      ref={ref}
+      className={cn(breadcrumbListVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = ({ ref, className, ...props }: BreadcrumbItemProps) => {
+  return (
+    <li
+      ref={ref}
+      className={cn(breadcrumbItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = ({ ref, className, ...props }: BreadcrumbLinkProps) => {
+  return (
+    <a
+      ref={ref}
+      className={cn(breadcrumbLinkVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = ({ ref, className, ...props }: BreadcrumbPageProps) => {
+  return (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn(breadcrumbPageVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  ref,
+  className,
+  children,
+  ...props
+}: BreadcrumbSeparatorProps) => {
+  return (
+    <span
+      ref={ref}
+      role="presentation"
+      aria-hidden="true"
+      className={cn(breadcrumbSeparatorVariants(), className)}
+      {...props}
+    >
+      {children ?? <ChevronRight size={14} />}
+    </span>
+  )
+}
+
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  ref,
+  className,
+  ...props
+}: BreadcrumbEllipsisProps) => {
+  return (
+    <span
+      ref={ref}
+      role="presentation"
+      aria-hidden="true"
+      className={cn(breadcrumbEllipsisVariants(), className)}
+      {...props}
+    >
+      <MoreHorizontal size={14} />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

package/templates/primitives/Breadcrumb/Breadcrumb.types.ts

@@ -0,0 +1,62 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, Ref } from "react"
+/**
+ * Breadcrumb.types.ts
+ *
+ * Public and internal types for Breadcrumb component.
+ */
+
+export interface BreadcrumbProps extends Omit<
+  HTMLAttributes<HTMLElement>,
+  "className"
+> {
+  ref?: Ref<HTMLElement>
+  className?: string
+}
+
+export interface BreadcrumbListProps extends Omit<
+  HTMLAttributes<HTMLOListElement>,
+  "className"
+> {
+  ref?: Ref<HTMLOListElement>
+  className?: string
+}
+
+export interface BreadcrumbItemProps extends Omit<
+  HTMLAttributes<HTMLLIElement>,
+  "className"
+> {
+  ref?: Ref<HTMLLIElement>
+  className?: string
+}
+
+export interface BreadcrumbLinkProps extends Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  "className"
+> {
+  ref?: Ref<HTMLAnchorElement>
+  className?: string
+}
+
+export interface BreadcrumbPageProps extends Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  "className"
+> {
+  ref?: Ref<HTMLSpanElement>
+  className?: string
+}
+
+export interface BreadcrumbSeparatorProps extends Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  "className"
+> {
+  ref?: Ref<HTMLSpanElement>
+  className?: string
+}
+
+export interface BreadcrumbEllipsisProps extends Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  "className"
+> {
+  ref?: Ref<HTMLSpanElement>
+  className?: string
+}

package/templates/primitives/Breadcrumb/Breadcrumb.variants.ts

@@ -0,0 +1,37 @@
+/**
+ * Breadcrumb.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const breadcrumbRootVariants = cva("w-full")
+
+export const breadcrumbListVariants = cva(
+  "flex flex-wrap items-center gap-(--lex-breadcrumb-list-gap) break-words text-(length:--lex-breadcrumb-link-font-size) leading-(--lex-breadcrumb-link-font-line-height)",
+)
+
+export const breadcrumbItemVariants = cva(
+  "inline-flex items-center gap-(--lex-breadcrumb-item-gap)",
+)
+
+export const breadcrumbLinkVariants = cva(
+  [
+    "text-(--lex-breadcrumb-link-foreground) font-(--lex-breadcrumb-link-font-weight) transition-colors duration-(--lex-breadcrumb-transition-duration) ease-(--lex-breadcrumb-transition-easing)",
+    "hover:text-(--lex-breadcrumb-link-hover-foreground)",
+    "outline-none focus-visible:underline",
+  ].join(" "),
+)
+
+export const breadcrumbPageVariants = cva(
+  "font-(--lex-breadcrumb-page-font-weight) text-(--lex-breadcrumb-page-foreground)",
+)
+
+export const breadcrumbSeparatorVariants = cva(
+  "inline-flex items-center text-(--lex-breadcrumb-separator-foreground)",
+)
+
+export const breadcrumbEllipsisVariants = cva(
+  "inline-flex h-(--lex-breadcrumb-ellipsis-size) w-(--lex-breadcrumb-ellipsis-size) items-center justify-center text-(--lex-breadcrumb-ellipsis-foreground)",
+)

package/templates/primitives/DatePicker/DatePicker.tsx

@@ -0,0 +1,263 @@
+/**
+ * DatePicker.tsx
+ *
+ * Reference DatePicker component implementation.
+ */
+
+import { useState } from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { Input } from "../Input/Input"
+import {
+  Popover,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverPopup,
+  PopoverTrigger,
+} from "../Popover/Popover"
+import type {
+  DatePickerCalendarProps,
+  DatePickerContentProps,
+  DatePickerDayProps,
+  DatePickerInputProps,
+  DatePickerProps,
+  DatePickerTriggerProps,
+} from "./DatePicker.types"
+import {
+  datePickerCalendarVariants,
+  datePickerContentVariants,
+  datePickerDayVariants,
+  datePickerGridVariants,
+  datePickerHeaderVariants,
+  datePickerMonthLabelVariants,
+  datePickerNavButtonVariants,
+  datePickerWeekdayVariants,
+  datePickerWeekdaysVariants,
+} from "./DatePicker.variants"
+import { cn } from "@/lib/utils"
+
+const WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] as const
+
+const isSameDay = (left: Date, right: Date): boolean => {
+  return (
+    left.getFullYear() === right.getFullYear() &&
+    left.getMonth() === right.getMonth() &&
+    left.getDate() === right.getDate()
+  )
+}
+
+const buildCalendarDays = (
+  month: Date,
+): Array<{ date: Date; inMonth: boolean }> => {
+  const year = month.getFullYear()
+  const monthIndex = month.getMonth()
+  const firstDay = new Date(year, monthIndex, 1)
+  const lastDay = new Date(year, monthIndex + 1, 0)
+  const startOffset = firstDay.getDay()
+  const days: Array<{ date: Date; inMonth: boolean }> = []
+
+  for (let offset = startOffset - 1; offset >= 0; offset -= 1) {
+    days.push({
+      date: new Date(year, monthIndex, -offset),
+      inMonth: false,
+    })
+  }
+
+  for (let day = 1; day <= lastDay.getDate(); day += 1) {
+    days.push({
+      date: new Date(year, monthIndex, day),
+      inMonth: true,
+    })
+  }
+
+  while (days.length % 7 !== 0) {
+    const trailingDay = days.length - startOffset - lastDay.getDate() + 1
+    days.push({
+      date: new Date(year, monthIndex + 1, trailingDay),
+      inMonth: false,
+    })
+  }
+
+  return days
+}
+
+const formatMonthLabel = (month: Date): string => {
+  return month.toLocaleString("default", { month: "long", year: "numeric" })
+}
+
+const DatePicker = <Payload = unknown,>(props: DatePickerProps<Payload>) => {
+  return <Popover {...props} />
+}
+
+DatePicker.displayName = "DatePicker"
+
+const DatePickerTrigger = <Payload = unknown,>({
+  ref,
+  ...props
+}: DatePickerTriggerProps<Payload>) => {
+  return <PopoverTrigger ref={ref} {...props} />
+}
+
+DatePickerTrigger.displayName = "DatePickerTrigger"
+
+const DatePickerInput = ({
+  ref,
+  className,
+  ...props
+}: DatePickerInputProps) => {
+  return <Input ref={ref} className={className} {...props} />
+}
+
+DatePickerInput.displayName = "DatePickerInput"
+
+const DatePickerContent = ({
+  ref,
+  className,
+  children,
+  ...props
+}: DatePickerContentProps) => {
+  return (
+    <PopoverPortal>
+      <PopoverPositioner>
+        <PopoverPopup
+          ref={ref}
+          className={cn(datePickerContentVariants(), className)}
+          {...props}
+        >
+          {children}
+        </PopoverPopup>
+      </PopoverPositioner>
+    </PopoverPortal>
+  )
+}
+
+DatePickerContent.displayName = "DatePickerContent"
+
+const DatePickerDay = ({
+  ref,
+  className,
+  date,
+  isSelected,
+  isOutside,
+  isToday,
+  type = "button",
+  ...props
+}: DatePickerDayProps) => {
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(
+        datePickerDayVariants({ isSelected, isOutside, isToday }),
+        className,
+      )}
+      {...props}
+    >
+      {date.getDate()}
+    </button>
+  )
+}
+
+DatePickerDay.displayName = "DatePickerDay"
+
+const DatePickerCalendar = ({
+  ref,
+  className,
+  value,
+  defaultMonth,
+  month,
+  onMonthChange,
+  onSelect,
+  ...props
+}: DatePickerCalendarProps) => {
+  const [internalMonth, setInternalMonth] = useState(
+    () => defaultMonth ?? value ?? new Date(),
+  )
+  const viewedMonth = month ?? internalMonth
+  const today = new Date()
+  const days = buildCalendarDays(viewedMonth)
+
+  const setMonth = (nextMonth: Date) => {
+    if (month === undefined) {
+      setInternalMonth(nextMonth)
+    }
+    onMonthChange?.(nextMonth)
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(datePickerCalendarVariants(), className)}
+      {...props}
+    >
+      <div className={datePickerHeaderVariants()}>
+        <button
+          type="button"
+          aria-label="Previous month"
+          className={datePickerNavButtonVariants()}
+          onClick={() =>
+            setMonth(
+              new Date(
+                viewedMonth.getFullYear(),
+                viewedMonth.getMonth() - 1,
+                1,
+              ),
+            )
+          }
+        >
+          <ChevronLeft aria-hidden="true" size={16} />
+        </button>
+        <div className={datePickerMonthLabelVariants()}>
+          {formatMonthLabel(viewedMonth)}
+        </div>
+        <button
+          type="button"
+          aria-label="Next month"
+          className={datePickerNavButtonVariants()}
+          onClick={() =>
+            setMonth(
+              new Date(
+                viewedMonth.getFullYear(),
+                viewedMonth.getMonth() + 1,
+                1,
+              ),
+            )
+          }
+        >
+          <ChevronRight aria-hidden="true" size={16} />
+        </button>
+      </div>
+
+      <div className={datePickerWeekdaysVariants()}>
+        {WEEKDAY_LABELS.map((label) => (
+          <span key={label} className={datePickerWeekdayVariants()}>
+            {label}
+          </span>
+        ))}
+      </div>
+
+      <div className={datePickerGridVariants()}>
+        {days.map(({ date, inMonth }) => (
+          <DatePickerDay
+            key={date.toISOString()}
+            date={date}
+            isOutside={!inMonth}
+            isSelected={value ? isSameDay(date, value) : false}
+            isToday={isSameDay(date, today)}
+            onClick={() => onSelect?.(date)}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+DatePickerCalendar.displayName = "DatePickerCalendar"
+
+export {
+  DatePicker,
+  DatePickerTrigger,
+  DatePickerInput,
+  DatePickerContent,
+  DatePickerCalendar,
+  DatePickerDay,
+}