@dalexto/lexsys-registry 0.0.2

package/templates/primitives/Avatar/Avatar.types.ts

@@ -0,0 +1,31 @@
+import type { Ref } from "react"
+/**
+ * Avatar.types.ts
+ *
+ * Public and internal types for Avatar component.
+ */
+
+import type { Avatar as BaseAvatar } from "@base-ui/react/avatar"
+
+export type AvatarSize = "sm" | "md" | "lg"
+
+export type AvatarShape = "circle" | "square"
+
+export interface AvatarProps extends Omit<
+  BaseAvatar.Root.Props,
+  "className" | "size"
+> {
+  ref?: Ref<HTMLSpanElement>
+  size?: AvatarSize
+  shape?: AvatarShape
+  className?: BaseAvatar.Root.Props["className"]
+}
+
+export interface AvatarImageProps extends Omit<
+  BaseAvatar.Image.Props,
+  "className"
+> {
+  className?: BaseAvatar.Image.Props["className"]
+}
+
+export type AvatarFallbackProps = BaseAvatar.Fallback.Props

package/templates/primitives/Avatar/Avatar.variants.ts

@@ -0,0 +1,40 @@
+/**
+ * Avatar.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const avatarVariants = cva(
+  [
+    "inline-flex shrink-0 items-center justify-center overflow-hidden border border-(--lsys-avatar-border-color)",
+    "bg-(--lsys-avatar-background) text-(--lsys-avatar-foreground)",
+    "font-(--lsys-avatar-font-weight) leading-(--lsys-avatar-font-line-height)",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "size-(--lsys-avatar-size-sm) text-(length:--lsys-avatar-font-size-sm)",
+        md: "size-(--lsys-avatar-size-md) text-(length:--lsys-avatar-font-size-md)",
+        lg: "size-(--lsys-avatar-size-lg) text-(length:--lsys-avatar-font-size-lg)",
+      },
+      shape: {
+        circle: "rounded-(--lsys-avatar-radius-circle)",
+        square: "rounded-(--lsys-avatar-radius-square)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "circle",
+    },
+  },
+)
+
+export const avatarImageVariants = cva(
+  "size-full object-cover transition-opacity duration-(--lsys-avatar-transition-duration) ease-(--lsys-avatar-transition-easing) data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+)
+
+export const avatarFallbackVariants = cva(
+  "flex size-full items-center justify-center bg-(--lsys-avatar-fallback-background) text-(--lsys-avatar-fallback-foreground)",
+)

package/templates/primitives/Badge/Badge.tsx

@@ -0,0 +1,30 @@
+/**
+ * Badge.tsx
+ *
+ * Reference Badge component implementation.
+ */
+
+import type { BadgeProps } from "./Badge.types"
+import { badgeVariants } from "./Badge.variants"
+import { cn } from "@/lib/utils"
+
+const Badge = ({
+  ref,
+  variant,
+  appearance,
+  size,
+  className,
+  ...props
+}: BadgeProps) => {
+  return (
+    <span
+      ref={ref}
+      className={cn(badgeVariants({ variant, appearance, size }), className)}
+      {...props}
+    />
+  )
+}
+
+Badge.displayName = "Badge"
+
+export { Badge }

package/templates/primitives/Badge/Badge.types.ts

@@ -0,0 +1,30 @@
+import type { Ref } from "react"
+/**
+ * Badge.types.ts
+ *
+ * Public and internal types for Badge component.
+ */
+
+import type { HTMLAttributes } from "react"
+
+export type BadgeVariant =
+  | "neutral"
+  | "primary"
+  | "success"
+  | "warning"
+  | "danger"
+
+export type BadgeAppearance = "solid" | "outline"
+
+export type BadgeSize = "sm" | "md"
+
+export interface BadgeProps extends Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  "className"
+> {
+  ref?: Ref<HTMLSpanElement>
+  variant?: BadgeVariant
+  appearance?: BadgeAppearance
+  size?: BadgeSize
+  className?: string
+}

package/templates/primitives/Badge/Badge.variants.ts

@@ -0,0 +1,81 @@
+/**
+ * Badge.variants.ts
+ *
+ * Defines Badge visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+const neutralSolid =
+  "border-(--lsys-badge-neutral-border-color) bg-(--lsys-badge-neutral-background) text-(--lsys-badge-neutral-foreground)"
+
+const neutralOutline =
+  "border-(--lsys-badge-neutral-border-color) bg-(--lsys-badge-outline-background) text-(--lsys-badge-neutral-foreground)"
+
+const primarySolid =
+  "border-(--lsys-badge-primary-border-color) bg-(--lsys-badge-primary-background) text-(--lsys-badge-primary-foreground)"
+
+const primaryOutline =
+  "border-(--lsys-badge-primary-border-color) bg-(--lsys-badge-outline-background) text-(--lsys-badge-primary-border-color)"
+
+const dangerSolid =
+  "border-(--lsys-badge-danger-border-color) bg-(--lsys-badge-danger-background) text-(--lsys-badge-danger-foreground)"
+
+const dangerOutline =
+  "border-(--lsys-badge-danger-border-color) bg-(--lsys-badge-outline-background) text-(--lsys-badge-danger-border-color)"
+
+const successSolid =
+  "border-(--lsys-color-feedback-success-foreground) bg-(--lsys-color-feedback-success-background) text-(--lsys-color-feedback-success-foreground)"
+
+const successOutline =
+  "border-(--lsys-color-feedback-success-foreground) bg-(--lsys-badge-outline-background) text-(--lsys-color-feedback-success-foreground)"
+
+const warningSolid =
+  "border-(--lsys-color-feedback-warning-foreground) bg-(--lsys-color-feedback-warning-background) text-(--lsys-color-feedback-warning-foreground)"
+
+const warningOutline =
+  "border-(--lsys-color-feedback-warning-foreground) bg-(--lsys-badge-outline-background) text-(--lsys-color-feedback-warning-foreground)"
+
+export const badgeVariants = cva(
+  [
+    "inline-flex items-center justify-center whitespace-nowrap border",
+    "rounded-(--lsys-badge-radius) font-(--lsys-badge-font-weight) leading-(--lsys-badge-font-line-height)",
+    "transition-colors duration-(--lsys-badge-transition-duration) ease-(--lsys-badge-transition-easing)",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        neutral: "",
+        primary: "",
+        success: "",
+        warning: "",
+        danger: "",
+      },
+      appearance: {
+        solid: "",
+        outline: "",
+      },
+      size: {
+        sm: "h-(--lsys-badge-height-sm) px-(--lsys-badge-padding-x-sm) text-(length:--lsys-badge-font-size-sm)",
+        md: "h-(--lsys-badge-height-md) px-(--lsys-badge-padding-x-md) text-(length:--lsys-badge-font-size-md)",
+      },
+    },
+    compoundVariants: [
+      { variant: "neutral", appearance: "solid", class: neutralSolid },
+      { variant: "neutral", appearance: "outline", class: neutralOutline },
+      { variant: "primary", appearance: "solid", class: primarySolid },
+      { variant: "primary", appearance: "outline", class: primaryOutline },
+      { variant: "success", appearance: "solid", class: successSolid },
+      { variant: "success", appearance: "outline", class: successOutline },
+      { variant: "warning", appearance: "solid", class: warningSolid },
+      { variant: "warning", appearance: "outline", class: warningOutline },
+      { variant: "danger", appearance: "solid", class: dangerSolid },
+      { variant: "danger", appearance: "outline", class: dangerOutline },
+    ],
+    defaultVariants: {
+      variant: "neutral",
+      appearance: "solid",
+      size: "md",
+    },
+  },
+)

package/templates/primitives/Button/Button.tsx

@@ -0,0 +1,53 @@
+/**
+ * Button.tsx
+ *
+ * Reference Button component implementation.
+ */
+
+import { Button as BaseButton } from "@base-ui/react/button"
+import type { ButtonProps } from "./Button.types"
+import { buttonVariants } from "./Button.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Button = ({
+  ref,
+  variant,
+  size,
+  className,
+  isLoading,
+  children,
+  disabled,
+  focusableWhenDisabled,
+  type,
+  ...props
+}: ButtonProps) => {
+  const isDisabled = isLoading || disabled
+
+  return (
+    <BaseButton
+      ref={ref}
+      type={type ?? "button"}
+      className={mergeClassName(buttonVariants({ variant, size }), className)}
+      disabled={Boolean(isDisabled)}
+      focusableWhenDisabled={isLoading ? true : Boolean(focusableWhenDisabled)}
+      aria-busy={isLoading ? true : undefined}
+      {...props}
+    >
+      {isLoading ? (
+        <span className="inline-flex items-center gap-2">
+          <span
+            aria-hidden="true"
+            className="size-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent"
+          />
+          {children ?? "Loading"}
+        </span>
+      ) : (
+        children
+      )}
+    </BaseButton>
+  )
+}
+
+Button.displayName = "Button"
+
+export { Button }

package/templates/primitives/Button/Button.types.ts

@@ -0,0 +1,25 @@
+import type { Ref } from "react"
+/**
+ * Button.types.ts
+ *
+ * Public and internal types for Button component.
+ */
+
+import type { Button as BaseButton } from "@base-ui/react/button"
+
+export type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "ghost"
+  | "outline"
+  | "danger"
+
+export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl"
+
+export interface ButtonProps extends Omit<BaseButton.Props, "className"> {
+  ref?: Ref<HTMLButtonElement>
+  variant?: ButtonVariant
+  size?: ButtonSize
+  isLoading?: boolean
+  className?: BaseButton.Props["className"]
+}

package/templates/primitives/Button/Button.variants.ts

@@ -0,0 +1,69 @@
+/**
+ * Button.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { busyStateClasses, disabledStateClasses } from "@/lib/utils"
+
+export const buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center whitespace-nowrap border border-transparent",
+    "rounded-(--lsys-button-radius) font-(family-name:--lsys-button-font-family) font-(--lsys-button-font-weight)",
+    "transition-colors duration-(--lsys-button-transition-duration) ease-(--lsys-button-transition-easing)",
+    "outline-none focus-visible:ring-(length:--lsys-button-focus-ring-width) focus-visible:ring-(--lsys-button-focus-ring-color) focus-visible:ring-offset-(length:--lsys-button-focus-ring-offset) focus-visible:ring-offset-(--lsys-button-focus-ring-offset-color)",
+    disabledStateClasses,
+    busyStateClasses,
+    "text-(length:--lsys-button-font-size-md)",
+    "leading-(--lsys-button-font-line-height)",
+    "tracking-(--lsys-button-font-letter-spacing)",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        primary:
+          "border-(--lsys-button-primary-border-color) bg-(--lsys-button-primary-background) text-(--lsys-button-primary-foreground) hover:bg-(--lsys-button-primary-hover-background)",
+        secondary:
+          "border-(--lsys-button-secondary-border-color) bg-(--lsys-button-secondary-background) text-(--lsys-button-secondary-foreground) hover:bg-(--lsys-button-secondary-hover-background)",
+        ghost:
+          "border-transparent bg-transparent text-(--lsys-button-secondary-foreground) hover:bg-(--lsys-button-secondary-hover-background)",
+        outline:
+          "border-(--lsys-button-secondary-border-color) bg-transparent text-(--lsys-button-secondary-foreground) hover:bg-(--lsys-button-secondary-hover-background)",
+        danger:
+          "border-(--lsys-button-danger-border-color) bg-(--lsys-button-danger-background) text-(--lsys-button-danger-foreground) hover:bg-(--lsys-button-danger-hover-background)",
+      },
+      size: {
+        xs: [
+          "h-(--lsys-button-height-xs)",
+          "px-(--lsys-button-padding-x-xs)",
+          "text-(length:--lsys-button-font-size-xs)",
+        ],
+        sm: [
+          "h-(--lsys-button-height-sm)",
+          "px-(--lsys-button-padding-x-sm)",
+          "text-(length:--lsys-button-font-size-sm)",
+        ],
+        md: [
+          "h-(--lsys-button-height-md)",
+          "px-(--lsys-button-padding-x-md)",
+          "text-(length:--lsys-button-font-size-md)",
+        ],
+        lg: [
+          "h-(--lsys-button-height-lg)",
+          "px-(--lsys-button-padding-x-lg)",
+          "text-(length:--lsys-button-font-size-lg)",
+        ],
+        xl: [
+          "h-(--lsys-button-height-xl)",
+          "px-(--lsys-button-padding-x-xl)",
+          "text-(length:--lsys-button-font-size-xl)",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  },
+)

package/templates/primitives/Card/Card.tsx

@@ -0,0 +1,85 @@
+/**
+ * Card.tsx
+ *
+ * Reference Card component implementation.
+ */
+
+import type {
+  CardContentProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardProps,
+  CardTitleProps,
+} from "./Card.types"
+import {
+  cardContentClassName,
+  cardDescriptionClassName,
+  cardFooterClassName,
+  cardHeaderClassName,
+  cardTitleClassName,
+  cardVariants,
+} from "./Card.variants"
+import { cn } from "@/lib/utils"
+
+const Card = ({ ref, variant, className, ...props }: CardProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(cardVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+Card.displayName = "Card"
+
+const CardHeader = ({ ref, className, ...props }: CardHeaderProps) => {
+  return (
+    <div ref={ref} className={cn(cardHeaderClassName, className)} {...props} />
+  )
+}
+
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = ({ ref, className, ...props }: CardTitleProps) => {
+  return (
+    <h3 ref={ref} className={cn(cardTitleClassName, className)} {...props} />
+  )
+}
+
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = ({
+  ref,
+  className,
+  ...props
+}: CardDescriptionProps) => {
+  return (
+    <p
+      ref={ref}
+      className={cn(cardDescriptionClassName, className)}
+      {...props}
+    />
+  )
+}
+
+CardDescription.displayName = "CardDescription"
+
+const CardContent = ({ ref, className, ...props }: CardContentProps) => {
+  return (
+    <div ref={ref} className={cn(cardContentClassName, className)} {...props} />
+  )
+}
+
+CardContent.displayName = "CardContent"
+
+const CardFooter = ({ ref, className, ...props }: CardFooterProps) => {
+  return (
+    <div ref={ref} className={cn(cardFooterClassName, className)} {...props} />
+  )
+}
+
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }

package/templates/primitives/Card/Card.types.ts

@@ -0,0 +1,54 @@
+import type { Ref } from "react"
+/**
+ * Card.types.ts
+ *
+ * Public and internal types for Card component.
+ */
+
+import type { HTMLAttributes } from "react"
+
+export type CardVariant =
+  | "surface"
+  | "muted"
+  | "default"
+  | "outlined"
+  | "elevated"
+  | "ghost"
+
+export interface CardProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "className"
+> {
+  ref?: Ref<HTMLDivElement>
+  variant?: CardVariant
+  className?: string
+}
+
+export interface CardSectionProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "className"
+> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+}
+
+export type CardHeaderProps = CardSectionProps
+
+export interface CardTitleProps extends Omit<
+  HTMLAttributes<HTMLHeadingElement>,
+  "className"
+> {
+  ref?: Ref<HTMLHeadingElement>
+  className?: string
+}
+
+export interface CardDescriptionProps extends Omit<
+  HTMLAttributes<HTMLParagraphElement>,
+  "className"
+> {
+  ref?: Ref<HTMLParagraphElement>
+  className?: string
+}
+
+export type CardContentProps = CardSectionProps
+export type CardFooterProps = CardSectionProps

package/templates/primitives/Card/Card.variants.ts

@@ -0,0 +1,46 @@
+/**
+ * Card.variants.ts
+ *
+ * Defines Card visual slots using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const cardVariants = cva(
+  [
+    "rounded-(--lsys-card-radius) border border-(--lsys-card-border-color)",
+    "bg-(--lsys-card-background) text-(--lsys-card-foreground) transition-colors",
+    "duration-(--lsys-card-transition-duration) ease-(--lsys-card-transition-easing)",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        surface: "",
+        muted: "bg-(--lsys-card-muted-background)",
+        default: "",
+        outlined: "border-(--lsys-border-strong)",
+        elevated:
+          "border-transparent shadow-(--lsys-elevation-shadow-raised-box-shadow)",
+        ghost: "border-transparent bg-transparent shadow-none",
+      },
+    },
+    defaultVariants: {
+      variant: "surface",
+    },
+  },
+)
+
+export const cardHeaderClassName =
+  "grid gap-(--lsys-card-gap-sm) p-(--lsys-card-padding) pb-(--lsys-card-header-padding-bottom)"
+
+export const cardTitleClassName =
+  "text-(length:--lsys-card-title-font-size) font-(--lsys-card-title-font-weight) leading-(--lsys-card-title-font-line-height) tracking-(--lsys-card-title-font-letter-spacing) text-(--lsys-card-title-foreground)"
+
+export const cardDescriptionClassName =
+  "text-(length:--lsys-card-description-font-size) leading-(--lsys-card-description-font-line-height) text-(--lsys-card-description-foreground)"
+
+export const cardContentClassName =
+  "p-(--lsys-card-padding) pt-(--lsys-card-content-padding-top) text-(length:--lsys-card-content-font-size) leading-(--lsys-card-content-font-line-height)"
+
+export const cardFooterClassName =
+  "flex items-center gap-(--lsys-card-gap-md) p-(--lsys-card-padding) pt-(--lsys-card-footer-padding-top)"

package/templates/primitives/Checkbox/Checkbox.tsx

@@ -0,0 +1,72 @@
+/**
+ * Checkbox.tsx
+ *
+ * Reference Checkbox component implementation.
+ */
+
+import { createContext, useContext } from "react"
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox"
+import type {
+  CheckboxIndicatorProps,
+  CheckboxProps,
+  CheckboxSize,
+} from "./Checkbox.types"
+import {
+  checkboxIndicatorVariants,
+  checkboxVariants,
+} from "./Checkbox.variants"
+import { mergeClassName } from "@/lib/utils"
+
+interface CheckboxContextValue {
+  size: CheckboxSize
+  indeterminate?: boolean
+}
+
+const CheckboxContext = createContext<CheckboxContextValue>({ size: "md" })
+
+const useCheckboxContext = () => useContext(CheckboxContext)
+
+const Checkbox = ({
+  ref,
+  size = "md",
+  className,
+  children,
+  indeterminate,
+  ...props
+}: CheckboxProps) => {
+  return (
+    <CheckboxContext.Provider value={{ size, indeterminate }}>
+      <BaseCheckbox.Root
+        ref={ref}
+        className={mergeClassName(checkboxVariants({ size }), className)}
+        indeterminate={indeterminate}
+        {...props}
+      >
+        {children}
+      </BaseCheckbox.Root>
+    </CheckboxContext.Provider>
+  )
+}
+
+Checkbox.displayName = "Checkbox"
+
+const CheckboxIndicator = ({
+  className,
+  children,
+  ...props
+}: CheckboxIndicatorProps) => {
+  const { indeterminate } = useCheckboxContext()
+
+  return (
+    <BaseCheckbox.Indicator
+      className={mergeClassName(checkboxIndicatorVariants(), className)}
+      {...props}
+    >
+      {children ?? (indeterminate ? "-" : "✓")}
+    </BaseCheckbox.Indicator>
+  )
+}
+
+CheckboxIndicator.displayName = "CheckboxIndicator"
+
+export { Checkbox, CheckboxIndicator }

package/templates/primitives/Checkbox/Checkbox.types.ts

@@ -0,0 +1,28 @@
+import type { Ref } from "react"
+/**
+ * Checkbox.types.ts
+ *
+ * Public and internal types for Checkbox component.
+ */
+
+import type { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox"
+
+export type CheckboxSize = "sm" | "md" | "lg"
+
+export interface CheckboxProps extends Omit<
+  BaseCheckbox.Root.Props,
+  "className" | "children"
+> {
+  ref?: Ref<HTMLElement>
+  size?: CheckboxSize
+  className?: BaseCheckbox.Root.Props["className"]
+  children?: BaseCheckbox.Root.Props["children"]
+}
+
+export interface CheckboxIndicatorProps extends Omit<
+  BaseCheckbox.Indicator.Props,
+  "className" | "children"
+> {
+  className?: BaseCheckbox.Indicator.Props["className"]
+  children?: BaseCheckbox.Indicator.Props["children"]
+}