@dalexto/lexsys-registry 0.0.2

package/templates/blocks/Sidebar/Sidebar.variants.ts

@@ -0,0 +1,84 @@
+/**
+ * Sidebar.variants.ts
+ *
+ * Variant classes for the Sidebar block.
+ */
+
+export const sidebarRootVariants = (): string => {
+  return "lsys-sidebar w-full shrink-0 md:h-full md:w-auto"
+}
+
+export const sidebarDesktopVariants = (): string => {
+  return "lsys-sidebar__desktop hidden h-full w-[var(--lsys-size-sidebar-width,16rem)] shrink-0 border-r border-[var(--lsys-border-default)] bg-[var(--lsys-color-background-subtle)] md:flex md:flex-col"
+}
+
+export const sidebarMobileTriggerVariants = (): string => {
+  return "lsys-sidebar__mobile-trigger sticky top-0 z-(--lsys-z-index-local) border-b border-[var(--lsys-border-default)] bg-[var(--lsys-color-background-base)] p-[var(--lsys-space-2)] md:hidden"
+}
+
+export const sidebarMobileHeaderVariants = (): string => {
+  return "lsys-sidebar__mobile-header min-w-0 flex-1"
+}
+
+export const sidebarBrandVariants = (): string => {
+  return "lsys-sidebar__brand border-b border-[var(--lsys-border-default)] px-[var(--lsys-space-4)] py-[var(--lsys-space-3)]"
+}
+
+export const sidebarNavVariants = (): string => {
+  return "lsys-sidebar__nav min-h-0 flex-1 p-[var(--lsys-space-2)]"
+}
+
+export const sidebarNavListVariants = (): string => {
+  return "lsys-sidebar__list m-0 flex list-none flex-col gap-[var(--lsys-space-1)] p-0"
+}
+
+export const sidebarNavItemVariants = (active?: boolean): string => {
+  const base = [
+    "lsys-sidebar__item",
+    "flex w-full items-center rounded-(--lsys-menu-item-radius)",
+    "px-(--lsys-menu-item-padding-x) py-(--lsys-menu-item-padding-y)",
+    "text-(length:--lsys-menu-item-font-size) font-(--lsys-menu-item-font-weight)",
+    "leading-(--lsys-menu-item-font-line-height) text-(--lsys-menu-item-foreground)",
+    "no-underline outline-none transition-colors",
+    "focus-visible:ring-(length:--lsys-menu-item-focus-ring-width) focus-visible:ring-(--lsys-menu-item-focus-ring-color)",
+    "focus-visible:ring-offset-(length:--lsys-menu-item-focus-ring-offset) focus-visible:ring-offset-(--lsys-menu-item-focus-ring-offset-color)",
+  ].join(" ")
+
+  if (active) {
+    return [
+      base,
+      "lsys-sidebar__item--active",
+      "bg-(--lsys-menu-item-checked-background) text-(--lsys-menu-item-checked-foreground)",
+      "hover:bg-(--lsys-action-primary-hover) hover:text-(--lsys-menu-item-checked-foreground)",
+    ].join(" ")
+  }
+
+  return [
+    base,
+    "hover:bg-(--lsys-action-secondary-hover) hover:text-(--lsys-color-text-primary)",
+  ].join(" ")
+}
+
+export const sidebarMainVariants = (): string => {
+  return "lsys-sidebar__drawer-content flex h-full min-h-0 flex-col"
+}
+
+export const sidebarDrawerFooterVariants = (): string => {
+  return "lsys-sidebar__drawer-footer border-t border-[var(--lsys-border-default)] p-[var(--lsys-space-2)]"
+}
+
+export const sidebarFooterVariants = (): string => {
+  return "lsys-sidebar__footer border-t border-[var(--lsys-border-default)] p-[var(--lsys-space-2)]"
+}
+
+export const sidebarGroupVariants = (): string => {
+  return "lsys-sidebar__group flex flex-col gap-[var(--lsys-space-1)]"
+}
+
+export const sidebarGroupLabelVariants = (): string => {
+  return "lsys-sidebar__group-label px-[var(--lsys-space-3)] py-[var(--lsys-space-1)] text-(length:--lsys-menu-group-label-font-size) font-(--lsys-menu-group-label-font-weight) leading-(--lsys-menu-group-label-font-line-height) text-(--lsys-menu-group-label-foreground)"
+}
+
+export const sidebarGroupContentVariants = (): string => {
+  return "lsys-sidebar__group-content flex flex-col gap-[var(--lsys-space-1)]"
+}

package/templates/primitives/Accordion/Accordion.tsx

@@ -0,0 +1,102 @@
+/**
+ * Accordion.tsx
+ *
+ * Reference Accordion component implementation.
+ */
+
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion"
+import type {
+  AccordionHeaderProps,
+  AccordionItemProps,
+  AccordionPanelProps,
+  AccordionProps,
+  AccordionTriggerProps,
+} from "./Accordion.types"
+import {
+  accordionHeaderVariants,
+  accordionItemVariants,
+  accordionPanelVariants,
+  accordionTriggerVariants,
+  accordionVariants,
+} from "./Accordion.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Accordion = ({ ref, className, ...props }: AccordionProps) => {
+  return (
+    <BaseAccordion.Root
+      ref={ref}
+      className={mergeClassName(accordionVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+Accordion.displayName = "Accordion"
+
+const AccordionItem = ({ ref, className, ...props }: AccordionItemProps) => {
+  return (
+    <BaseAccordion.Item
+      ref={ref}
+      className={mergeClassName(accordionItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionHeader = ({
+  ref,
+  className,
+  ...props
+}: AccordionHeaderProps) => {
+  return (
+    <BaseAccordion.Header
+      ref={ref}
+      className={mergeClassName(accordionHeaderVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AccordionHeader.displayName = "AccordionHeader"
+
+const AccordionTrigger = ({
+  ref,
+  className,
+  children,
+  ...props
+}: AccordionTriggerProps) => {
+  return (
+    <BaseAccordion.Trigger
+      ref={ref}
+      className={mergeClassName(accordionTriggerVariants(), className)}
+      {...props}
+    >
+      <span>{children}</span>
+      <span aria-hidden="true">+</span>
+    </BaseAccordion.Trigger>
+  )
+}
+
+AccordionTrigger.displayName = "AccordionTrigger"
+
+const AccordionPanel = ({ ref, className, ...props }: AccordionPanelProps) => {
+  return (
+    <BaseAccordion.Panel
+      ref={ref}
+      className={mergeClassName(accordionPanelVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AccordionPanel.displayName = "AccordionPanel"
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionHeader,
+  AccordionTrigger,
+  AccordionPanel,
+}

package/templates/primitives/Accordion/Accordion.types.ts

@@ -0,0 +1,20 @@
+import type { Ref } from "react"
+/**
+ * Accordion.types.ts
+ *
+ * Public and internal types for Accordion component.
+ */
+
+import type { Accordion as BaseAccordion } from "@base-ui/react/accordion"
+
+export type AccordionProps = BaseAccordion.Root.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type AccordionItemProps = BaseAccordion.Item.Props
+
+export type AccordionHeaderProps = BaseAccordion.Header.Props
+
+export type AccordionTriggerProps = BaseAccordion.Trigger.Props
+
+export type AccordionPanelProps = BaseAccordion.Panel.Props

package/templates/primitives/Accordion/Accordion.variants.ts

@@ -0,0 +1,32 @@
+/**
+ * Accordion.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const accordionVariants = cva(
+  "grid overflow-hidden rounded-(--lsys-accordion-radius) border border-(--lsys-accordion-border-color) bg-(--lsys-accordion-background) text-(--lsys-accordion-foreground)",
+)
+
+export const accordionItemVariants = cva(
+  "border-b border-(--lsys-accordion-item-border-color) last:border-b-0",
+)
+
+export const accordionHeaderVariants = cva("flex")
+
+export const accordionTriggerVariants = cva(
+  [
+    "flex w-full items-center justify-between px-(--lsys-accordion-trigger-padding-x) py-(--lsys-accordion-trigger-padding-y) text-left",
+    "text-(length:--lsys-accordion-trigger-font-size) font-(--lsys-accordion-trigger-font-weight) leading-(--lsys-accordion-trigger-font-line-height) text-(--lsys-accordion-foreground)",
+    "transition-colors duration-(--lsys-accordion-transition-duration) ease-(--lsys-accordion-transition-easing)",
+    "outline-none hover:bg-(--lsys-accordion-trigger-background-hover) focus-visible:ring-(length:--lsys-accordion-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lsys-accordion-focus-ring-color)",
+    disabledStateClasses,
+  ].join(" "),
+)
+
+export const accordionPanelVariants = cva(
+  "px-(--lsys-accordion-panel-padding-x) pb-(--lsys-accordion-panel-padding-bottom) text-(length:--lsys-accordion-panel-font-size) leading-(--lsys-accordion-panel-font-line-height) text-(--lsys-accordion-panel-foreground)",
+)

package/templates/primitives/Alert/Alert.tsx

@@ -0,0 +1,62 @@
+/**
+ * Alert.tsx
+ *
+ * Reference Alert component implementation.
+ */
+
+import type {
+  AlertDescriptionProps,
+  AlertProps,
+  AlertTitleProps,
+} from "./Alert.types"
+import {
+  alertDescriptionClassName,
+  alertTitleClassName,
+  alertVariants,
+} from "./Alert.variants"
+import { cn } from "@/lib/utils"
+
+const Alert = ({
+  ref,
+  variant,
+  className,
+  role = "alert",
+  ...props
+}: AlertProps) => {
+  return (
+    <div
+      ref={ref}
+      role={role}
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+Alert.displayName = "Alert"
+
+const AlertTitle = ({ ref, className, ...props }: AlertTitleProps) => {
+  return (
+    <h3 ref={ref} className={cn(alertTitleClassName, className)} {...props} />
+  )
+}
+
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = ({
+  ref,
+  className,
+  ...props
+}: AlertDescriptionProps) => {
+  return (
+    <p
+      ref={ref}
+      className={cn(alertDescriptionClassName, className)}
+      {...props}
+    />
+  )
+}
+
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

package/templates/primitives/Alert/Alert.types.ts

@@ -0,0 +1,35 @@
+import type { Ref } from "react"
+/**
+ * Alert.types.ts
+ *
+ * Public and internal types for Alert component.
+ */
+
+import type { HTMLAttributes } from "react"
+
+export type AlertVariant = "neutral" | "primary" | "danger"
+
+export interface AlertProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "className"
+> {
+  ref?: Ref<HTMLDivElement>
+  variant?: AlertVariant
+  className?: string
+}
+
+export interface AlertTitleProps extends Omit<
+  HTMLAttributes<HTMLHeadingElement>,
+  "className"
+> {
+  ref?: Ref<HTMLHeadingElement>
+  className?: string
+}
+
+export interface AlertDescriptionProps extends Omit<
+  HTMLAttributes<HTMLParagraphElement>,
+  "className"
+> {
+  ref?: Ref<HTMLParagraphElement>
+  className?: string
+}

package/templates/primitives/Alert/Alert.variants.ts

@@ -0,0 +1,41 @@
+/**
+ * Alert.variants.ts
+ *
+ * Defines Alert visual slots using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+const neutralVariant =
+  "border-(--lsys-alert-neutral-border-color) bg-(--lsys-alert-neutral-background) text-(--lsys-alert-neutral-foreground)"
+
+const primaryVariant =
+  "border-(--lsys-alert-primary-border-color) bg-(--lsys-alert-primary-background) text-(--lsys-alert-primary-foreground)"
+
+const dangerVariant =
+  "border-(--lsys-alert-danger-border-color) bg-(--lsys-alert-danger-background) text-(--lsys-alert-danger-foreground)"
+
+export const alertVariants = cva(
+  [
+    "grid gap-(--lsys-alert-gap) rounded-(--lsys-alert-radius) border p-(--lsys-alert-padding)",
+    "transition-colors duration-(--lsys-alert-transition-duration) ease-(--lsys-alert-transition-easing)",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        neutral: neutralVariant,
+        primary: primaryVariant,
+        danger: dangerVariant,
+      },
+    },
+    defaultVariants: {
+      variant: "neutral",
+    },
+  },
+)
+
+export const alertTitleClassName =
+  "text-(length:--lsys-alert-title-font-size) font-(--lsys-alert-title-font-weight) leading-(--lsys-alert-title-font-line-height)"
+
+export const alertDescriptionClassName =
+  "text-(length:--lsys-alert-description-font-size) leading-(--lsys-alert-description-font-line-height) text-(--lsys-alert-description-foreground)"

package/templates/primitives/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,168 @@
+/**
+ * AlertDialog.tsx
+ *
+ * Reference AlertDialog component implementation.
+ */
+
+import { X } from "lucide-react"
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog"
+import type {
+  AlertDialogBackdropProps,
+  AlertDialogCloseProps,
+  AlertDialogDescriptionProps,
+  AlertDialogPopupProps,
+  AlertDialogPortalProps,
+  AlertDialogProps,
+  AlertDialogTitleProps,
+  AlertDialogTriggerProps,
+  AlertDialogViewportProps,
+} from "./AlertDialog.types"
+import {
+  alertDialogBackdropVariants,
+  alertDialogCloseVariants,
+  alertDialogDescriptionVariants,
+  alertDialogPopupVariants,
+  alertDialogTitleVariants,
+  alertDialogTriggerVariants,
+  alertDialogViewportVariants,
+} from "./AlertDialog.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const AlertDialog = <Payload = unknown,>(props: AlertDialogProps<Payload>) => {
+  return <BaseAlertDialog.Root {...props} />
+}
+
+AlertDialog.displayName = "AlertDialog"
+
+const AlertDialogTrigger = ({
+  ref,
+  className,
+  ...props
+}: AlertDialogTriggerProps) => {
+  return (
+    <BaseAlertDialog.Trigger
+      ref={ref}
+      className={mergeClassName(alertDialogTriggerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AlertDialogTrigger.displayName = "AlertDialogTrigger"
+
+const AlertDialogPortal = (props: AlertDialogPortalProps) => {
+  return <BaseAlertDialog.Portal {...props} />
+}
+
+AlertDialogPortal.displayName = "AlertDialogPortal"
+
+const AlertDialogBackdrop = ({
+  ref,
+  className,
+  ...props
+}: AlertDialogBackdropProps) => {
+  return (
+    <BaseAlertDialog.Backdrop
+      ref={ref}
+      className={mergeClassName(alertDialogBackdropVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AlertDialogBackdrop.displayName = "AlertDialogBackdrop"
+
+const AlertDialogViewport = ({
+  ref,
+  className,
+  ...props
+}: AlertDialogViewportProps) => {
+  return (
+    <BaseAlertDialog.Viewport
+      ref={ref}
+      className={mergeClassName(alertDialogViewportVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AlertDialogViewport.displayName = "AlertDialogViewport"
+
+const AlertDialogPopup = ({
+  ref,
+  className,
+  ...props
+}: AlertDialogPopupProps) => {
+  return (
+    <BaseAlertDialog.Popup
+      ref={ref}
+      className={mergeClassName(alertDialogPopupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AlertDialogPopup.displayName = "AlertDialogPopup"
+
+const AlertDialogTitle = ({
+  ref,
+  className,
+  ...props
+}: AlertDialogTitleProps) => {
+  return (
+    <BaseAlertDialog.Title
+      ref={ref}
+      className={mergeClassName(alertDialogTitleVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AlertDialogTitle.displayName = "AlertDialogTitle"
+
+const AlertDialogDescription = ({
+  ref,
+  className,
+  ...props
+}: AlertDialogDescriptionProps) => {
+  return (
+    <BaseAlertDialog.Description
+      ref={ref}
+      className={mergeClassName(alertDialogDescriptionVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+AlertDialogDescription.displayName = "AlertDialogDescription"
+
+const AlertDialogClose = ({
+  ref,
+  className,
+  children,
+  ...props
+}: AlertDialogCloseProps) => {
+  return (
+    <BaseAlertDialog.Close
+      ref={ref}
+      className={mergeClassName(alertDialogCloseVariants(), className)}
+      {...props}
+    >
+      {children ?? <X aria-hidden="true" size={16} />}
+    </BaseAlertDialog.Close>
+  )
+}
+
+AlertDialogClose.displayName = "AlertDialogClose"
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPortal,
+  AlertDialogBackdrop,
+  AlertDialogViewport,
+  AlertDialogPopup,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogClose,
+}

package/templates/primitives/AlertDialog/AlertDialog.types.ts

@@ -0,0 +1,30 @@
+import type { Ref } from "react"
+/**
+ * AlertDialog.types.ts
+ *
+ * Public and internal types for AlertDialog component.
+ */
+
+import type { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog"
+
+export type AlertDialogProps<Payload = unknown> =
+  BaseAlertDialog.Root.Props<Payload>
+
+export type AlertDialogTriggerProps<Payload = unknown> =
+  BaseAlertDialog.Trigger.Props<Payload> & {
+    ref?: Ref<HTMLButtonElement>
+  }
+
+export type AlertDialogPortalProps = BaseAlertDialog.Portal.Props
+
+export type AlertDialogBackdropProps = BaseAlertDialog.Backdrop.Props
+
+export type AlertDialogViewportProps = BaseAlertDialog.Viewport.Props
+
+export type AlertDialogPopupProps = BaseAlertDialog.Popup.Props
+
+export type AlertDialogTitleProps = BaseAlertDialog.Title.Props
+
+export type AlertDialogDescriptionProps = BaseAlertDialog.Description.Props
+
+export type AlertDialogCloseProps = BaseAlertDialog.Close.Props

package/templates/primitives/AlertDialog/AlertDialog.variants.ts

@@ -0,0 +1,57 @@
+/**
+ * AlertDialog.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const alertDialogTriggerVariants = cva(
+  [
+    "inline-flex h-(--lsys-alert-dialog-trigger-height) items-center justify-center rounded-(--lsys-alert-dialog-trigger-radius)",
+    "bg-(--lsys-alert-dialog-trigger-background) px-(--lsys-alert-dialog-trigger-padding-x) text-(--lsys-alert-dialog-trigger-foreground)",
+    "text-(length:--lsys-alert-dialog-trigger-font-size) font-(--lsys-alert-dialog-trigger-font-weight) leading-(--lsys-alert-dialog-trigger-font-line-height)",
+    "transition-colors duration-(--lsys-alert-dialog-transition-duration) ease-(--lsys-alert-dialog-transition-easing)",
+    "outline-none hover:bg-(--lsys-alert-dialog-trigger-hover-background) focus-visible:ring-(length:--lsys-alert-dialog-focus-ring-width) focus-visible:ring-(--lsys-alert-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lsys-alert-dialog-focus-ring-offset) focus-visible:ring-offset-(--lsys-alert-dialog-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+)
+
+export const alertDialogBackdropVariants = cva(
+  [
+    "fixed inset-0 z-(--lsys-alert-dialog-backdrop-z-index) bg-(--lsys-alert-dialog-backdrop-background) opacity-(--lsys-alert-dialog-backdrop-opacity)",
+    "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+    "transition-opacity duration-(--lsys-alert-dialog-transition-duration) ease-(--lsys-alert-dialog-transition-easing)",
+  ].join(" "),
+)
+
+export const alertDialogViewportVariants = cva(
+  "fixed inset-0 z-(--lsys-alert-dialog-viewport-z-index) grid place-items-center overflow-y-auto p-(--lsys-alert-dialog-viewport-padding)",
+)
+
+export const alertDialogPopupVariants = cva(
+  [
+    "grid w-[min(calc(100vw-(var(--lsys-alert-dialog-viewport-inset)*2)),var(--lsys-alert-dialog-popup-max-width))] gap-(--lsys-alert-dialog-popup-gap) rounded-(--lsys-alert-dialog-popup-radius) border",
+    "border-(--lsys-alert-dialog-popup-border-color) bg-(--lsys-alert-dialog-popup-background) p-(--lsys-alert-dialog-popup-padding) text-(--lsys-alert-dialog-popup-foreground) shadow-(--lsys-alert-dialog-popup-shadow)",
+    "outline-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    "transition-[opacity,transform] duration-(--lsys-alert-dialog-transition-duration) ease-(--lsys-alert-dialog-transition-easing)",
+  ].join(" "),
+)
+
+export const alertDialogTitleVariants = cva(
+  "pr-(--lsys-alert-dialog-title-padding-end) text-(length:--lsys-alert-dialog-title-font-size) font-(--lsys-alert-dialog-title-font-weight) leading-(--lsys-alert-dialog-title-font-line-height) text-(--lsys-alert-dialog-title-foreground)",
+)
+
+export const alertDialogDescriptionVariants = cva(
+  "text-(length:--lsys-alert-dialog-description-font-size) font-(--lsys-alert-dialog-description-font-weight) leading-(--lsys-alert-dialog-description-font-line-height) text-(--lsys-alert-dialog-description-foreground)",
+)
+
+export const alertDialogCloseVariants = cva(
+  [
+    "absolute right-(--lsys-alert-dialog-close-inset) top-(--lsys-alert-dialog-close-inset) inline-flex size-(--lsys-alert-dialog-close-size) items-center justify-center rounded-(--lsys-alert-dialog-close-radius)",
+    "text-(--lsys-alert-dialog-close-foreground) outline-none transition-colors duration-(--lsys-alert-dialog-transition-duration) ease-(--lsys-alert-dialog-transition-easing)",
+    "hover:bg-(--lsys-alert-dialog-close-hover-background) focus-visible:ring-(length:--lsys-alert-dialog-focus-ring-width) focus-visible:ring-(--lsys-alert-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lsys-alert-dialog-focus-ring-offset) focus-visible:ring-offset-(--lsys-alert-dialog-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+)