@dalexto/lexsys-registry 0.0.6 → 0.1.0

package/templates/primitives/DatePicker/DatePicker.types.ts

@@ -0,0 +1,52 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, Ref } from "react"
+/**
+ * DatePicker.types.ts
+ *
+ * Public and internal types for DatePicker component.
+ */
+
+import type { InputProps } from "../Input/Input.types"
+import type {
+  PopoverProps,
+  PopoverTriggerProps,
+} from "../Popover/Popover.types"
+
+export type DatePickerProps<Payload = unknown> = PopoverProps<Payload>
+
+export type DatePickerTriggerProps<Payload = unknown> =
+  PopoverTriggerProps<Payload>
+
+export type DatePickerInputProps = InputProps
+
+export interface DatePickerContentProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "className"
+> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+}
+
+export interface DatePickerCalendarProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "className" | "onSelect"
+> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  value?: Date
+  defaultMonth?: Date
+  month?: Date
+  onMonthChange?: (month: Date) => void
+  onSelect?: (date: Date) => void
+}
+
+export interface DatePickerDayProps extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "className"
+> {
+  ref?: Ref<HTMLButtonElement>
+  className?: string
+  date: Date
+  isSelected?: boolean
+  isOutside?: boolean
+  isToday?: boolean
+}

package/templates/primitives/DatePicker/DatePicker.variants.ts

@@ -0,0 +1,76 @@
+/**
+ * DatePicker.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const datePickerContentVariants = cva("p-0")
+
+export const datePickerCalendarVariants = cva(
+  "flex w-(--lex-date-picker-calendar-width) flex-col gap-(--lex-date-picker-calendar-gap) rounded-(--lex-date-picker-calendar-radius) border border-(--lex-date-picker-calendar-border-color) bg-(--lex-date-picker-calendar-background) p-(--lex-date-picker-calendar-padding) text-(--lex-date-picker-calendar-foreground)",
+)
+
+export const datePickerHeaderVariants = cva(
+  "flex items-center justify-between gap-(--lex-date-picker-calendar-gap)",
+)
+
+export const datePickerMonthLabelVariants = cva(
+  "font-(--lex-date-picker-header-font-weight) text-(length:--lex-date-picker-header-font-size) leading-(--lex-date-picker-header-font-line-height) text-(--lex-date-picker-header-foreground)",
+)
+
+export const datePickerNavButtonVariants = cva(
+  [
+    "inline-flex h-(--lex-date-picker-nav-size) w-(--lex-date-picker-nav-size) items-center justify-center rounded-(--lex-date-picker-nav-radius)",
+    "text-(--lex-date-picker-nav-foreground) transition-colors duration-(--lex-date-picker-transition-duration) ease-(--lex-date-picker-transition-easing)",
+    "outline-none hover:bg-(--lex-date-picker-nav-hover-background) hover:text-(--lex-date-picker-nav-hover-foreground)",
+    "focus-visible:ring-(length:--lex-date-picker-focus-ring-width) focus-visible:ring-(--lex-date-picker-focus-ring-color) focus-visible:ring-offset-(length:--lex-date-picker-focus-ring-offset) focus-visible:ring-offset-(--lex-date-picker-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+)
+
+export const datePickerWeekdaysVariants = cva(
+  "grid grid-cols-7 gap-(--lex-space-1)",
+)
+
+export const datePickerWeekdayVariants = cva(
+  "text-center text-(length:--lex-date-picker-weekday-font-size) font-(--lex-date-picker-weekday-font-weight) leading-(--lex-date-picker-weekday-font-line-height) text-(--lex-date-picker-weekday-foreground)",
+)
+
+export const datePickerGridVariants = cva(
+  "grid grid-cols-7 gap-(--lex-space-1)",
+)
+
+export const datePickerDayVariants = cva(
+  [
+    "inline-flex h-(--lex-date-picker-day-size) w-(--lex-date-picker-day-size) items-center justify-center rounded-(--lex-date-picker-day-radius)",
+    "bg-(--lex-date-picker-day-background) text-(length:--lex-date-picker-day-font-size) font-(--lex-date-picker-day-font-weight) leading-(--lex-date-picker-day-font-line-height)",
+    "transition-colors duration-(--lex-date-picker-transition-duration) ease-(--lex-date-picker-transition-easing)",
+    "outline-none hover:bg-(--lex-date-picker-day-hover-background)",
+    "focus-visible:ring-(length:--lex-date-picker-focus-ring-width) focus-visible:ring-(--lex-date-picker-focus-ring-color) focus-visible:ring-offset-(length:--lex-date-picker-focus-ring-offset) focus-visible:ring-offset-(--lex-date-picker-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+  {
+    variants: {
+      isSelected: {
+        true: "bg-(--lex-date-picker-day-selected-background) text-(--lex-date-picker-day-selected-foreground) hover:bg-(--lex-date-picker-day-selected-background)",
+        false: "text-(--lex-date-picker-day-foreground)",
+      },
+      isOutside: {
+        true: "text-(--lex-date-picker-day-outside-foreground)",
+        false: "",
+      },
+      isToday: {
+        true: "border border-(--lex-date-picker-day-today-border-color)",
+        false: "border border-transparent",
+      },
+    },
+    defaultVariants: {
+      isSelected: false,
+      isOutside: false,
+      isToday: false,
+    },
+  },
+)

package/templates/primitives/Pagination/Pagination.tsx

@@ -0,0 +1,160 @@
+/**
+ * Pagination.tsx
+ *
+ * Reference Pagination component implementation.
+ */
+
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import type {
+  PaginationContentProps,
+  PaginationEllipsisProps,
+  PaginationItemProps,
+  PaginationLinkProps,
+  PaginationNextProps,
+  PaginationPreviousProps,
+  PaginationProps,
+} from "./Pagination.types"
+import {
+  paginationContentVariants,
+  paginationEllipsisVariants,
+  paginationItemVariants,
+  paginationLinkVariants,
+  paginationRootVariants,
+} from "./Pagination.variants"
+import { cn } from "@/lib/utils"
+
+const Pagination = ({ ref, className, ...props }: PaginationProps) => {
+  return (
+    <nav
+      ref={ref}
+      aria-label="pagination"
+      className={cn(paginationRootVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+Pagination.displayName = "Pagination"
+
+const PaginationContent = ({
+  ref,
+  className,
+  ...props
+}: PaginationContentProps) => {
+  return (
+    <ul
+      ref={ref}
+      className={cn(paginationContentVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = ({ ref, className, ...props }: PaginationItemProps) => {
+  return (
+    <li
+      ref={ref}
+      className={cn(paginationItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PaginationItem.displayName = "PaginationItem"
+
+const PaginationLink = ({
+  ref,
+  className,
+  isActive,
+  size,
+  ...props
+}: PaginationLinkProps) => {
+  return (
+    <a
+      ref={ref}
+      aria-current={isActive ? "page" : undefined}
+      className={cn(paginationLinkVariants({ isActive, size }), className)}
+      {...props}
+    />
+  )
+}
+
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  ref,
+  className,
+  children,
+  size = "md",
+  ...props
+}: PaginationPreviousProps) => {
+  return (
+    <PaginationLink
+      ref={ref}
+      aria-label="Go to previous page"
+      size={size}
+      className={cn("gap-(--lex-space-1) px-(--lex-space-2)", className)}
+      {...props}
+    >
+      <ChevronLeft aria-hidden="true" size={16} />
+      {children ?? <span>Previous</span>}
+    </PaginationLink>
+  )
+}
+
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  ref,
+  className,
+  children,
+  size = "md",
+  ...props
+}: PaginationNextProps) => {
+  return (
+    <PaginationLink
+      ref={ref}
+      aria-label="Go to next page"
+      size={size}
+      className={cn("gap-(--lex-space-1) px-(--lex-space-2)", className)}
+      {...props}
+    >
+      {children ?? <span>Next</span>}
+      <ChevronRight aria-hidden="true" size={16} />
+    </PaginationLink>
+  )
+}
+
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  ref,
+  className,
+  ...props
+}: PaginationEllipsisProps) => {
+  return (
+    <span
+      ref={ref}
+      aria-hidden="true"
+      className={cn(paginationEllipsisVariants(), className)}
+      {...props}
+    >
+      <MoreHorizontal size={16} />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

package/templates/primitives/Pagination/Pagination.types.ts

@@ -0,0 +1,54 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, Ref } from "react"
+/**
+ * Pagination.types.ts
+ *
+ * Public and internal types for Pagination component.
+ */
+
+export type PaginationSize = "sm" | "md"
+
+export interface PaginationProps extends Omit<
+  HTMLAttributes<HTMLElement>,
+  "className"
+> {
+  ref?: Ref<HTMLElement>
+  className?: string
+}
+
+export interface PaginationContentProps extends Omit<
+  HTMLAttributes<HTMLUListElement>,
+  "className"
+> {
+  ref?: Ref<HTMLUListElement>
+  className?: string
+}
+
+export interface PaginationItemProps extends Omit<
+  HTMLAttributes<HTMLLIElement>,
+  "className"
+> {
+  ref?: Ref<HTMLLIElement>
+  className?: string
+}
+
+export interface PaginationLinkProps extends Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  "className"
+> {
+  ref?: Ref<HTMLAnchorElement>
+  className?: string
+  isActive?: boolean
+  size?: PaginationSize
+}
+
+export type PaginationPreviousProps = PaginationLinkProps
+
+export type PaginationNextProps = PaginationLinkProps
+
+export interface PaginationEllipsisProps extends Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  "className"
+> {
+  ref?: Ref<HTMLSpanElement>
+  className?: string
+}

package/templates/primitives/Pagination/Pagination.variants.ts

@@ -0,0 +1,47 @@
+/**
+ * Pagination.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const paginationRootVariants = cva("mx-auto flex w-full justify-center")
+
+export const paginationContentVariants = cva(
+  "flex flex-row flex-wrap items-center gap-(--lex-pagination-gap)",
+)
+
+export const paginationItemVariants = cva("inline-flex items-center")
+
+export const paginationLinkVariants = cva(
+  [
+    "inline-flex items-center justify-center border border-(--lex-pagination-link-border-color) bg-(--lex-pagination-link-background)",
+    "text-(--lex-pagination-link-foreground) transition-colors duration-(--lex-pagination-transition-duration) ease-(--lex-pagination-transition-easing)",
+    "rounded-(--lex-pagination-link-radius) font-(--lex-pagination-link-font-weight) leading-(--lex-pagination-link-font-line-height)",
+    "outline-none hover:bg-(--lex-pagination-link-hover-background)",
+    "focus-visible:ring-(length:--lex-pagination-focus-ring-width) focus-visible:ring-(--lex-pagination-focus-ring-color) focus-visible:ring-offset-(length:--lex-pagination-focus-ring-offset) focus-visible:ring-offset-(--lex-pagination-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+  {
+    variants: {
+      isActive: {
+        true: "border-(--lex-pagination-link-active-background) bg-(--lex-pagination-link-active-background) text-(--lex-pagination-link-active-foreground) hover:bg-(--lex-pagination-link-active-background)",
+        false: "",
+      },
+      size: {
+        sm: "h-(--lex-pagination-link-height-sm) min-w-(--lex-pagination-link-height-sm) px-(--lex-pagination-link-padding-x-sm) text-(length:--lex-pagination-link-font-size-sm)",
+        md: "h-(--lex-pagination-link-height-md) min-w-(--lex-pagination-link-height-md) px-(--lex-pagination-link-padding-x-md) text-(length:--lex-pagination-link-font-size-md)",
+      },
+    },
+    defaultVariants: {
+      isActive: false,
+      size: "md",
+    },
+  },
+)
+
+export const paginationEllipsisVariants = cva(
+  "inline-flex h-(--lex-pagination-ellipsis-size) w-(--lex-pagination-ellipsis-size) items-center justify-center text-(--lex-pagination-ellipsis-foreground)",
+)

package/templates/primitives/Toolbar/Toolbar.variants.ts

@@ -8,7 +8,7 @@ import { cva } from "class-variance-authority"
 import { disabledStateClasses } from "@/lib/utils"
 
 export const toolbarRootVariants = cva(
-  "flex items-center gap-(--lex-button-padding-x-sm) rounded-(--lex-button-radius) border border-(--lex-button-secondary-border-color) bg-(--lex-button-secondary-background) p-(--lex-button-padding-x-sm)",
+  "flex items-center gap-(--lex-toolbar-root-gap) rounded-(--lex-toolbar-radius) border border-(--lex-toolbar-root-border-color) bg-(--lex-toolbar-root-background) p-(--lex-toolbar-root-padding)",
   {
     variants: {
       orientation: {
@@ -23,7 +23,7 @@ export const toolbarRootVariants = cva(
 )
 
 export const toolbarGroupVariants = cva(
-  "flex items-center gap-(--lex-space-1)",
+  "flex items-center gap-(--lex-toolbar-group-gap)",
   {
     variants: {
       orientation: {
@@ -39,31 +39,31 @@ export const toolbarGroupVariants = cva(
 
 export const toolbarButtonVariants = cva(
   [
-    "inline-flex h-(--lex-button-height-sm) items-center justify-center rounded-(--lex-button-radius) border border-transparent px-(--lex-button-padding-x-sm)",
-    "text-(length:--lex-button-font-size-sm) font-(--lex-button-font-weight) leading-(--lex-button-font-line-height) text-(--lex-button-secondary-foreground)",
-    "transition-colors duration-(--lex-button-transition-duration) ease-(--lex-button-transition-easing)",
-    "outline-none hover:bg-(--lex-button-secondary-hover-background) focus-visible:ring-(length:--lex-button-focus-ring-width) focus-visible:ring-(--lex-button-focus-ring-color) focus-visible:ring-offset-(length:--lex-button-focus-ring-offset) focus-visible:ring-offset-(--lex-button-focus-ring-offset-color)",
+    "inline-flex h-(--lex-toolbar-button-height) items-center justify-center rounded-(--lex-toolbar-radius) border border-transparent px-(--lex-toolbar-button-padding-x)",
+    "text-(length:--lex-toolbar-button-font-size) font-(--lex-toolbar-button-font-weight) leading-(--lex-toolbar-button-font-line-height) text-(--lex-toolbar-button-foreground)",
+    "transition-colors duration-(--lex-toolbar-transition-duration) ease-(--lex-toolbar-transition-easing)",
+    "outline-none hover:bg-(--lex-toolbar-button-hover-background) focus-visible:ring-(length:--lex-toolbar-button-focus-ring-width) focus-visible:ring-(--lex-toolbar-button-focus-ring-color) focus-visible:ring-offset-(length:--lex-toolbar-button-focus-ring-offset) focus-visible:ring-offset-(--lex-toolbar-button-focus-ring-offset-color)",
     disabledStateClasses,
   ].join(" "),
 )
 
 export const toolbarLinkVariants = cva(
   [
-    "inline-flex h-(--lex-button-height-sm) items-center justify-center rounded-(--lex-button-radius) px-(--lex-button-padding-x-sm)",
-    "text-(length:--lex-button-font-size-sm) font-(--lex-button-font-weight) leading-(--lex-button-font-line-height) text-(--lex-button-secondary-foreground)",
-    "transition-colors duration-(--lex-button-transition-duration) ease-(--lex-button-transition-easing)",
-    "outline-none hover:bg-(--lex-button-secondary-hover-background) focus-visible:ring-(length:--lex-button-focus-ring-width) focus-visible:ring-(--lex-button-focus-ring-color) focus-visible:ring-offset-(length:--lex-button-focus-ring-offset) focus-visible:ring-offset-(--lex-button-focus-ring-offset-color)",
+    "inline-flex h-(--lex-toolbar-link-height) items-center justify-center rounded-(--lex-toolbar-radius) px-(--lex-toolbar-link-padding-x)",
+    "text-(length:--lex-toolbar-link-font-size) font-(--lex-toolbar-link-font-weight) leading-(--lex-toolbar-link-font-line-height) text-(--lex-toolbar-link-foreground)",
+    "transition-colors duration-(--lex-toolbar-transition-duration) ease-(--lex-toolbar-transition-easing)",
+    "outline-none hover:bg-(--lex-toolbar-link-hover-background) focus-visible:ring-(length:--lex-toolbar-link-focus-ring-width) focus-visible:ring-(--lex-toolbar-link-focus-ring-color) focus-visible:ring-offset-(length:--lex-toolbar-link-focus-ring-offset) focus-visible:ring-offset-(--lex-toolbar-link-focus-ring-offset-color)",
     disabledStateClasses,
   ].join(" "),
 )
 
 export const toolbarInputVariants = cva(
   [
-    "h-(--lex-input-height-sm) min-w-0 rounded-(--lex-input-radius) border border-(--lex-input-border-color) bg-(--lex-input-background) px-(--lex-input-padding-x-sm)",
-    "text-(length:--lex-input-font-size-sm) font-(family-name:--lex-input-font-family) font-(--lex-input-font-weight) leading-(--lex-input-font-line-height) text-(--lex-input-foreground)",
-    "placeholder:text-(--lex-input-placeholder-color)",
-    "transition-colors duration-(--lex-input-transition-duration) ease-(--lex-input-transition-easing)",
-    "outline-none focus-visible:border-(--lex-input-focus-border-color) focus-visible:ring-(length:--lex-input-focus-ring-width) focus-visible:ring-(--lex-input-focus-ring-color) focus-visible:ring-offset-(length:--lex-input-focus-ring-offset) focus-visible:ring-offset-(--lex-input-focus-ring-offset-color)",
+    "h-(--lex-toolbar-input-height) min-w-0 rounded-(--lex-toolbar-input-radius) border border-(--lex-toolbar-input-border-color) bg-(--lex-toolbar-input-background) px-(--lex-toolbar-input-padding-x)",
+    "text-(length:--lex-toolbar-input-font-size) font-(family-name:--lex-toolbar-input-font-family) font-(--lex-toolbar-input-font-weight) leading-(--lex-toolbar-input-font-line-height) text-(--lex-toolbar-input-foreground)",
+    "placeholder:text-(--lex-toolbar-input-placeholder-color)",
+    "transition-colors duration-(--lex-toolbar-transition-duration) ease-(--lex-toolbar-transition-easing)",
+    "outline-none focus-visible:border-(--lex-toolbar-input-focus-border-color) focus-visible:ring-(length:--lex-toolbar-input-focus-ring-width) focus-visible:ring-(--lex-toolbar-input-focus-ring-color) focus-visible:ring-offset-(length:--lex-toolbar-input-focus-ring-offset) focus-visible:ring-offset-(--lex-toolbar-input-focus-ring-offset-color)",
     disabledStateClasses,
   ].join(" "),
 )

package/templates/styles/theme.css

@@ -3,7 +3,7 @@
  *
  * Generated by @dalexto/lexsys-tokens.
  * Manual changes will be overwritten.
- * Last generated: 2026-06-06T10:34:21.106Z
+ * Last generated: 2026-06-06T12:57:40.698Z
  */
 
 :root {