@dalexto/lexsys-registry 0.0.6 → 0.1.0

package/templates/blocks/DataTable/DataTable.types.ts

@@ -0,0 +1,74 @@
+/**
+ * DataTable.types.ts
+ *
+ * Public types for the DataTable block.
+ */
+
+import type { HTMLAttributes, ReactNode, Ref } from "react"
+import type {
+  PaginationContentProps,
+  PaginationEllipsisProps,
+  PaginationItemProps,
+  PaginationLinkProps,
+  PaginationNextProps,
+  PaginationPreviousProps,
+  PaginationProps,
+} from "@/components/primitives/Pagination"
+import type {
+  TableBodyProps,
+  TableCaptionProps,
+  TableCellProps,
+  TableFooterProps,
+  TableHeadProps,
+  TableHeaderProps,
+  TableProps,
+  TableRowProps,
+} from "@/components/primitives/Table"
+
+export interface DataTableProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export type DataTableTableProps = TableProps
+
+export type DataTableHeaderProps = TableHeaderProps
+
+export type DataTableBodyProps = TableBodyProps
+
+export type DataTableFooterProps = TableFooterProps
+
+export type DataTableRowProps = TableRowProps
+
+export type DataTableHeadProps = TableHeadProps
+
+export type DataTableCellProps = TableCellProps
+
+export type DataTableCaptionProps = TableCaptionProps
+
+export interface DataTableToolbarProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface DataTablePaginationBarProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export type DataTablePaginationProps = PaginationProps
+
+export type DataTablePaginationContentProps = PaginationContentProps
+
+export type DataTablePaginationItemProps = PaginationItemProps
+
+export type DataTablePaginationLinkProps = PaginationLinkProps
+
+export type DataTablePaginationPreviousProps = PaginationPreviousProps
+
+export type DataTablePaginationNextProps = PaginationNextProps
+
+export type DataTablePaginationEllipsisProps = PaginationEllipsisProps

package/templates/blocks/DataTable/DataTable.variants.ts

@@ -0,0 +1,23 @@
+/**
+ * DataTable.variants.ts
+ *
+ * Variant classes for the DataTable block.
+ */
+
+export const dataTableClasses = (): string => {
+  return ["lex-data-table", "flex w-full flex-col gap-(--lex-space-4)"].join(
+    " ",
+  )
+}
+
+export const dataTableFooterClasses = (): string => {
+  return [
+    "lex-data-table__footer",
+    "flex flex-col gap-(--lex-space-3)",
+    "sm:flex-row sm:items-center sm:justify-between",
+  ].join(" ")
+}
+
+export const dataTablePaginationClasses = (): string => {
+  return "lex-data-table__pagination"
+}

package/templates/blocks/FilterToolbar/FilterToolbar.tsx

@@ -0,0 +1,126 @@
+/**
+ * FilterToolbar.tsx
+ *
+ * Reference FilterToolbar block — compound Toolbar filter row.
+ */
+
+import { Button } from "@/components/primitives/Button"
+import { Input } from "@/components/primitives/Input"
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/primitives/Select"
+import { Toolbar, ToolbarGroup } from "@/components/primitives/Toolbar"
+import type {
+  FilterToolbarButtonProps,
+  FilterToolbarGroupProps,
+  FilterToolbarProps,
+  FilterToolbarSearchProps,
+  FilterToolbarSelectProps,
+  FilterToolbarSelectTriggerProps,
+  FilterToolbarSelectValueProps,
+} from "./FilterToolbar.types"
+import {
+  filterToolbarClasses,
+  filterToolbarSearchClasses,
+  filterToolbarSelectTriggerClasses,
+} from "./FilterToolbar.variants"
+import { cn } from "@/lib/utils"
+
+const FilterToolbar = ({
+  ref,
+  className,
+  orientation = "horizontal",
+  ...props
+}: FilterToolbarProps) => {
+  return (
+    <Toolbar
+      ref={ref}
+      orientation={orientation}
+      className={cn(filterToolbarClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+FilterToolbar.displayName = "FilterToolbar"
+
+const FilterToolbarGroup = ({
+  ref,
+  className,
+  ...props
+}: FilterToolbarGroupProps) => {
+  return <ToolbarGroup ref={ref} className={className} {...props} />
+}
+
+FilterToolbarGroup.displayName = "FilterToolbarGroup"
+
+const FilterToolbarSearch = ({
+  ref,
+  className,
+  ...props
+}: FilterToolbarSearchProps) => {
+  return (
+    <Input
+      ref={ref}
+      className={cn(filterToolbarSearchClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+FilterToolbarSearch.displayName = "FilterToolbarSearch"
+
+const FilterToolbarButton = ({
+  ref,
+  className,
+  ...props
+}: FilterToolbarButtonProps) => {
+  return <Button ref={ref} className={className} {...props} />
+}
+
+FilterToolbarButton.displayName = "FilterToolbarButton"
+
+const FilterToolbarSelect = <Value = string,>(
+  props: FilterToolbarSelectProps<Value>,
+) => {
+  return <Select {...props} />
+}
+
+FilterToolbarSelect.displayName = "FilterToolbarSelect"
+
+const FilterToolbarSelectTrigger = ({
+  ref,
+  className,
+  ...props
+}: FilterToolbarSelectTriggerProps) => {
+  return (
+    <SelectTrigger
+      ref={ref}
+      className={cn(filterToolbarSelectTriggerClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+FilterToolbarSelectTrigger.displayName = "FilterToolbarSelectTrigger"
+
+const FilterToolbarSelectValue = ({
+  className,
+  ...props
+}: FilterToolbarSelectValueProps) => {
+  return <SelectValue className={className} {...props} />
+}
+
+FilterToolbarSelectValue.displayName = "FilterToolbarSelectValue"
+
+export {
+  FilterToolbar,
+  FilterToolbarGroup,
+  FilterToolbarSearch,
+  FilterToolbarButton,
+  FilterToolbarSelect,
+  FilterToolbarSelectTrigger,
+  FilterToolbarSelectValue,
+}

package/templates/blocks/FilterToolbar/FilterToolbar.types.ts

@@ -0,0 +1,31 @@
+/**
+ * FilterToolbar.types.ts
+ *
+ * Public types for the FilterToolbar block.
+ */
+
+import type { ButtonProps } from "@/components/primitives/Button"
+import type { InputProps } from "@/components/primitives/Input"
+import type {
+  SelectProps,
+  SelectTriggerProps,
+  SelectValueProps,
+} from "@/components/primitives/Select"
+import type {
+  ToolbarGroupProps,
+  ToolbarProps,
+} from "@/components/primitives/Toolbar"
+
+export type FilterToolbarProps = ToolbarProps
+
+export type FilterToolbarGroupProps = ToolbarGroupProps
+
+export type FilterToolbarSearchProps = InputProps
+
+export type FilterToolbarButtonProps = ButtonProps
+
+export type FilterToolbarSelectProps<Value = string> = SelectProps<Value>
+
+export type FilterToolbarSelectTriggerProps = SelectTriggerProps
+
+export type FilterToolbarSelectValueProps = SelectValueProps

package/templates/blocks/FilterToolbar/FilterToolbar.variants.ts

@@ -0,0 +1,24 @@
+/**
+ * FilterToolbar.variants.ts
+ *
+ * Variant classes for the FilterToolbar block.
+ */
+
+export const filterToolbarClasses = (): string => {
+  return [
+    "lex-filter-toolbar",
+    "flex flex-wrap items-center gap-(--lex-space-2)",
+    "rounded-(--lex-radius-control)",
+    "border border-(--lex-border-default)",
+    "bg-(--lex-color-background-subtle)",
+    "p-(--lex-space-2)",
+  ].join(" ")
+}
+
+export const filterToolbarSearchClasses = (): string => {
+  return "lex-filter-toolbar__search min-w-(--lex-size-filter-toolbar-search-min-width,12rem) flex-1"
+}
+
+export const filterToolbarSelectTriggerClasses = (): string => {
+  return "lex-filter-toolbar__select min-w-(--lex-size-filter-toolbar-select-min-width,8rem)"
+}

package/templates/blocks/PageHeader/PageHeader.tsx

@@ -0,0 +1,215 @@
+/**
+ * PageHeader.tsx
+ *
+ * Reference PageHeader block — compound page title surface with breadcrumb and actions.
+ */
+
+import { Button } from "@/components/primitives/Button"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/primitives/Breadcrumb"
+import type {
+  PageHeaderActionProps,
+  PageHeaderActionsProps,
+  PageHeaderBreadcrumbItemProps,
+  PageHeaderBreadcrumbLinkProps,
+  PageHeaderBreadcrumbListProps,
+  PageHeaderBreadcrumbPageProps,
+  PageHeaderBreadcrumbProps,
+  PageHeaderBreadcrumbSeparatorProps,
+  PageHeaderDescriptionProps,
+  PageHeaderHeadingProps,
+  PageHeaderProps,
+  PageHeaderTitleProps,
+  PageHeaderTopProps,
+} from "./PageHeader.types"
+import {
+  pageHeaderActionsClasses,
+  pageHeaderBreadcrumbClasses,
+  pageHeaderClasses,
+  pageHeaderDescriptionClasses,
+  pageHeaderHeadingClasses,
+  pageHeaderTitleClasses,
+  pageHeaderTopClasses,
+} from "./PageHeader.variants"
+import { cn } from "@/lib/utils"
+
+const PageHeader = ({ ref, className, ...props }: PageHeaderProps) => {
+  return (
+    <header
+      ref={ref}
+      className={cn(pageHeaderClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+PageHeader.displayName = "PageHeader"
+
+const PageHeaderTop = ({ ref, className, ...props }: PageHeaderTopProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(pageHeaderTopClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+PageHeaderTop.displayName = "PageHeaderTop"
+
+const PageHeaderBreadcrumb = ({
+  ref,
+  className,
+  ...props
+}: PageHeaderBreadcrumbProps) => {
+  return (
+    <Breadcrumb
+      ref={ref}
+      className={cn(pageHeaderBreadcrumbClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+PageHeaderBreadcrumb.displayName = "PageHeaderBreadcrumb"
+
+const PageHeaderBreadcrumbList = ({
+  className,
+  ...props
+}: PageHeaderBreadcrumbListProps) => {
+  return <BreadcrumbList className={className} {...props} />
+}
+
+PageHeaderBreadcrumbList.displayName = "PageHeaderBreadcrumbList"
+
+const PageHeaderBreadcrumbItem = ({
+  className,
+  ...props
+}: PageHeaderBreadcrumbItemProps) => {
+  return <BreadcrumbItem className={className} {...props} />
+}
+
+PageHeaderBreadcrumbItem.displayName = "PageHeaderBreadcrumbItem"
+
+const PageHeaderBreadcrumbLink = ({
+  className,
+  ...props
+}: PageHeaderBreadcrumbLinkProps) => {
+  return <BreadcrumbLink className={className} {...props} />
+}
+
+PageHeaderBreadcrumbLink.displayName = "PageHeaderBreadcrumbLink"
+
+const PageHeaderBreadcrumbPage = ({
+  className,
+  ...props
+}: PageHeaderBreadcrumbPageProps) => {
+  return <BreadcrumbPage className={className} {...props} />
+}
+
+PageHeaderBreadcrumbPage.displayName = "PageHeaderBreadcrumbPage"
+
+const PageHeaderBreadcrumbSeparator = ({
+  className,
+  ...props
+}: PageHeaderBreadcrumbSeparatorProps) => {
+  return <BreadcrumbSeparator className={className} {...props} />
+}
+
+PageHeaderBreadcrumbSeparator.displayName = "PageHeaderBreadcrumbSeparator"
+
+const PageHeaderHeading = ({
+  ref,
+  className,
+  ...props
+}: PageHeaderHeadingProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(pageHeaderHeadingClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+PageHeaderHeading.displayName = "PageHeaderHeading"
+
+const PageHeaderTitle = ({
+  ref,
+  className,
+  ...props
+}: PageHeaderTitleProps) => {
+  return (
+    <h1
+      ref={ref}
+      className={cn(pageHeaderTitleClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+PageHeaderTitle.displayName = "PageHeaderTitle"
+
+const PageHeaderDescription = ({
+  ref,
+  className,
+  ...props
+}: PageHeaderDescriptionProps) => {
+  return (
+    <p
+      ref={ref}
+      className={cn(pageHeaderDescriptionClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+PageHeaderDescription.displayName = "PageHeaderDescription"
+
+const PageHeaderActions = ({
+  ref,
+  className,
+  ...props
+}: PageHeaderActionsProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(pageHeaderActionsClasses(), className)}
+      {...props}
+    />
+  )
+}
+
+PageHeaderActions.displayName = "PageHeaderActions"
+
+const PageHeaderAction = ({
+  ref,
+  className,
+  ...props
+}: PageHeaderActionProps) => {
+  return <Button ref={ref} className={className} {...props} />
+}
+
+PageHeaderAction.displayName = "PageHeaderAction"
+
+export {
+  PageHeader,
+  PageHeaderTop,
+  PageHeaderBreadcrumb,
+  PageHeaderBreadcrumbList,
+  PageHeaderBreadcrumbItem,
+  PageHeaderBreadcrumbLink,
+  PageHeaderBreadcrumbPage,
+  PageHeaderBreadcrumbSeparator,
+  PageHeaderHeading,
+  PageHeaderTitle,
+  PageHeaderDescription,
+  PageHeaderActions,
+  PageHeaderAction,
+}

package/templates/blocks/PageHeader/PageHeader.types.ts

@@ -0,0 +1,66 @@
+/**
+ * PageHeader.types.ts
+ *
+ * Public types for the PageHeader block.
+ */
+
+import type { HTMLAttributes, ReactNode, Ref } from "react"
+import type { ButtonProps } from "@/components/primitives/Button"
+import type {
+  BreadcrumbItemProps,
+  BreadcrumbLinkProps,
+  BreadcrumbListProps,
+  BreadcrumbPageProps,
+  BreadcrumbProps,
+  BreadcrumbSeparatorProps,
+} from "@/components/primitives/Breadcrumb"
+
+export interface PageHeaderProps extends HTMLAttributes<HTMLElement> {
+  ref?: Ref<HTMLElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface PageHeaderTopProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export type PageHeaderBreadcrumbProps = BreadcrumbProps
+
+export type PageHeaderBreadcrumbListProps = BreadcrumbListProps
+
+export type PageHeaderBreadcrumbItemProps = BreadcrumbItemProps
+
+export type PageHeaderBreadcrumbLinkProps = BreadcrumbLinkProps
+
+export type PageHeaderBreadcrumbPageProps = BreadcrumbPageProps
+
+export type PageHeaderBreadcrumbSeparatorProps = BreadcrumbSeparatorProps
+
+export interface PageHeaderHeadingProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface PageHeaderTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+  ref?: Ref<HTMLHeadingElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface PageHeaderDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+  ref?: Ref<HTMLParagraphElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface PageHeaderActionsProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export type PageHeaderActionProps = ButtonProps

package/templates/blocks/PageHeader/PageHeader.variants.ts

@@ -0,0 +1,48 @@
+/**
+ * PageHeader.variants.ts
+ *
+ * Variant classes for the PageHeader block.
+ */
+
+export const pageHeaderClasses = (): string => {
+  return [
+    "lex-page-header",
+    "flex flex-col gap-(--lex-space-4)",
+    "border-b border-(--lex-border-default) pb-(--lex-space-4)",
+  ].join(" ")
+}
+
+export const pageHeaderTopClasses = (): string => {
+  return "lex-page-header__top flex flex-col gap-(--lex-space-3)"
+}
+
+export const pageHeaderHeadingClasses = (): string => {
+  return "lex-page-header__heading flex flex-col gap-(--lex-space-1)"
+}
+
+export const pageHeaderTitleClasses = (): string => {
+  return [
+    "lex-page-header__title",
+    "m-0 text-(length:--lex-typography-heading-lg-font-size)",
+    "font-(--lex-typography-heading-lg-font-weight)",
+    "leading-(--lex-typography-heading-lg-font-line-height)",
+    "text-(--lex-color-text-primary)",
+  ].join(" ")
+}
+
+export const pageHeaderDescriptionClasses = (): string => {
+  return [
+    "lex-page-header__description",
+    "m-0 text-(length:--lex-typography-body-sm-font-size)",
+    "leading-(--lex-typography-body-sm-font-line-height)",
+    "text-(--lex-color-text-secondary)",
+  ].join(" ")
+}
+
+export const pageHeaderActionsClasses = (): string => {
+  return "lex-page-header__actions flex flex-wrap items-center gap-(--lex-space-2)"
+}
+
+export const pageHeaderBreadcrumbClasses = (): string => {
+  return "lex-page-header__breadcrumb"
+}