@dalexto/lexsys-registry 0.0.2

package/templates/primitives/ContextMenu/ContextMenu.variants.ts

@@ -0,0 +1,39 @@
+/**
+ * ContextMenu.variants.ts
+ *
+ * Reuses Menu variant classes for context menu surfaces and items.
+ */
+
+import { cva } from "class-variance-authority"
+import {
+  menuArrowVariants,
+  menuBackdropVariants,
+  menuGroupLabelVariants,
+  menuGroupVariants,
+  menuItemIndicatorVariants,
+  menuItemTextVariants,
+  menuItemVariants,
+  menuPopupVariants,
+  menuPositionerVariants,
+  menuSeparatorVariants,
+  menuSubmenuTriggerIconVariants,
+  menuTriggerVariants,
+} from "../Menu/Menu.variants"
+
+export const contextMenuBackdropVariants = menuBackdropVariants
+export const contextMenuPositionerVariants = menuPositionerVariants
+export const contextMenuPopupVariants = menuPopupVariants
+export const contextMenuArrowVariants = menuArrowVariants
+export const contextMenuItemVariants = menuItemVariants
+export const contextMenuItemIndicatorVariants = menuItemIndicatorVariants
+export const contextMenuItemTextVariants = menuItemTextVariants
+export const contextMenuGroupVariants = menuGroupVariants
+export const contextMenuGroupLabelVariants = menuGroupLabelVariants
+export const contextMenuSeparatorVariants = menuSeparatorVariants
+export const contextMenuSubmenuTriggerVariants = menuTriggerVariants
+export const contextMenuSubmenuTriggerIconVariants =
+  menuSubmenuTriggerIconVariants
+
+export const contextMenuTriggerVariants = cva(
+  "outline-none focus-visible:ring-(length:--lsys-menu-focus-ring-width) focus-visible:ring-(--lsys-menu-focus-ring-color)",
+)

package/templates/primitives/Dialog/Dialog.tsx

@@ -0,0 +1,148 @@
+/**
+ * Dialog.tsx
+ *
+ * Reference Dialog component implementation.
+ */
+
+import { X } from "lucide-react"
+import { Dialog as BaseDialog } from "@base-ui/react/dialog"
+import type {
+  DialogBackdropProps,
+  DialogCloseProps,
+  DialogDescriptionProps,
+  DialogPopupProps,
+  DialogPortalProps,
+  DialogProps,
+  DialogTitleProps,
+  DialogTriggerProps,
+  DialogViewportProps,
+} from "./Dialog.types"
+import {
+  dialogBackdropVariants,
+  dialogCloseVariants,
+  dialogDescriptionVariants,
+  dialogPopupVariants,
+  dialogTitleVariants,
+  dialogTriggerVariants,
+  dialogViewportVariants,
+} from "./Dialog.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Dialog = <Payload = unknown,>(props: DialogProps<Payload>) => {
+  return <BaseDialog.Root {...props} />
+}
+
+Dialog.displayName = "Dialog"
+
+const DialogTrigger = ({ ref, className, ...props }: DialogTriggerProps) => {
+  return (
+    <BaseDialog.Trigger
+      ref={ref}
+      className={mergeClassName(dialogTriggerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+DialogTrigger.displayName = "DialogTrigger"
+
+const DialogPortal = (props: DialogPortalProps) => {
+  return <BaseDialog.Portal {...props} />
+}
+
+DialogPortal.displayName = "DialogPortal"
+
+const DialogBackdrop = ({ ref, className, ...props }: DialogBackdropProps) => {
+  return (
+    <BaseDialog.Backdrop
+      ref={ref}
+      className={mergeClassName(dialogBackdropVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+DialogBackdrop.displayName = "DialogBackdrop"
+
+const DialogViewport = ({ ref, className, ...props }: DialogViewportProps) => {
+  return (
+    <BaseDialog.Viewport
+      ref={ref}
+      className={mergeClassName(dialogViewportVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+DialogViewport.displayName = "DialogViewport"
+
+const DialogPopup = ({ ref, className, ...props }: DialogPopupProps) => {
+  return (
+    <BaseDialog.Popup
+      ref={ref}
+      className={mergeClassName(dialogPopupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+DialogPopup.displayName = "DialogPopup"
+
+const DialogTitle = ({ ref, className, ...props }: DialogTitleProps) => {
+  return (
+    <BaseDialog.Title
+      ref={ref}
+      className={mergeClassName(dialogTitleVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+DialogTitle.displayName = "DialogTitle"
+
+const DialogDescription = ({
+  ref,
+  className,
+  ...props
+}: DialogDescriptionProps) => {
+  return (
+    <BaseDialog.Description
+      ref={ref}
+      className={mergeClassName(dialogDescriptionVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+DialogDescription.displayName = "DialogDescription"
+
+const DialogClose = ({
+  ref,
+  className,
+  children,
+  ...props
+}: DialogCloseProps) => {
+  return (
+    <BaseDialog.Close
+      ref={ref}
+      className={mergeClassName(dialogCloseVariants(), className)}
+      {...props}
+    >
+      {children ?? <X aria-hidden="true" size={16} />}
+    </BaseDialog.Close>
+  )
+}
+
+DialogClose.displayName = "DialogClose"
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogBackdrop,
+  DialogViewport,
+  DialogPopup,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+}

package/templates/primitives/Dialog/Dialog.types.ts

@@ -0,0 +1,29 @@
+import type { Ref } from "react"
+/**
+ * Dialog.types.ts
+ *
+ * Public and internal types for Dialog component.
+ */
+
+import type { Dialog as BaseDialog } from "@base-ui/react/dialog"
+
+export type DialogProps<Payload = unknown> = BaseDialog.Root.Props<Payload>
+
+export type DialogTriggerProps<Payload = unknown> =
+  BaseDialog.Trigger.Props<Payload> & {
+    ref?: Ref<HTMLButtonElement>
+  }
+
+export type DialogPortalProps = BaseDialog.Portal.Props
+
+export type DialogBackdropProps = BaseDialog.Backdrop.Props
+
+export type DialogViewportProps = BaseDialog.Viewport.Props
+
+export type DialogPopupProps = BaseDialog.Popup.Props
+
+export type DialogTitleProps = BaseDialog.Title.Props
+
+export type DialogDescriptionProps = BaseDialog.Description.Props
+
+export type DialogCloseProps = BaseDialog.Close.Props

package/templates/primitives/Dialog/Dialog.variants.ts

@@ -0,0 +1,56 @@
+/**
+ * Dialog.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const dialogTriggerVariants = cva(
+  [
+    "inline-flex h-(--lsys-dialog-trigger-height) items-center justify-center rounded-(--lsys-dialog-trigger-radius)",
+    "bg-(--lsys-dialog-trigger-background) px-(--lsys-dialog-trigger-padding-x) text-(--lsys-dialog-trigger-foreground)",
+    "text-(length:--lsys-dialog-trigger-font-size) font-(--lsys-dialog-trigger-font-weight) leading-(--lsys-dialog-trigger-font-line-height)",
+    "transition-colors duration-(--lsys-dialog-transition-duration) ease-(--lsys-dialog-transition-easing)",
+    "outline-none hover:bg-(--lsys-dialog-trigger-hover-background) focus-visible:ring-(length:--lsys-dialog-focus-ring-width) focus-visible:ring-(--lsys-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lsys-dialog-focus-ring-offset) focus-visible:ring-offset-(--lsys-dialog-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+)
+export const dialogBackdropVariants = cva(
+  [
+    "fixed inset-0 z-(--lsys-dialog-backdrop-z-index) bg-(--lsys-dialog-backdrop-background) opacity-(--lsys-dialog-backdrop-opacity)",
+    "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+    "transition-opacity duration-(--lsys-dialog-transition-duration) ease-(--lsys-dialog-transition-easing)",
+  ].join(" "),
+)
+
+export const dialogViewportVariants = cva(
+  "fixed inset-0 z-(--lsys-dialog-viewport-z-index) grid place-items-center overflow-y-auto p-(--lsys-dialog-viewport-padding)",
+)
+
+export const dialogPopupVariants = cva(
+  [
+    "grid w-[min(calc(100vw-(var(--lsys-dialog-viewport-inset)*2)),var(--lsys-dialog-popup-max-width))] gap-(--lsys-dialog-popup-gap) rounded-(--lsys-dialog-popup-radius) border",
+    "border-(--lsys-dialog-popup-border-color) bg-(--lsys-dialog-popup-background) p-(--lsys-dialog-popup-padding) text-(--lsys-dialog-popup-foreground) shadow-(--lsys-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-dialog-transition-duration) ease-(--lsys-dialog-transition-easing)",
+  ].join(" "),
+)
+
+export const dialogTitleVariants = cva(
+  "pr-(--lsys-dialog-title-padding-end) text-(length:--lsys-dialog-title-font-size) font-(--lsys-dialog-title-font-weight) leading-(--lsys-dialog-title-font-line-height) text-(--lsys-dialog-title-foreground)",
+)
+
+export const dialogDescriptionVariants = cva(
+  "text-(length:--lsys-dialog-description-font-size) font-(--lsys-dialog-description-font-weight) leading-(--lsys-dialog-description-font-line-height) text-(--lsys-dialog-description-foreground)",
+)
+
+export const dialogCloseVariants = cva(
+  [
+    "absolute right-(--lsys-dialog-close-inset) top-(--lsys-dialog-close-inset) inline-flex size-(--lsys-dialog-close-size) items-center justify-center rounded-(--lsys-dialog-close-radius)",
+    "text-(--lsys-dialog-close-foreground) outline-none transition-colors duration-(--lsys-dialog-transition-duration) ease-(--lsys-dialog-transition-easing)",
+    "hover:bg-(--lsys-dialog-close-hover-background) focus-visible:ring-(length:--lsys-dialog-focus-ring-width) focus-visible:ring-(--lsys-dialog-focus-ring-color) focus-visible:ring-offset-(length:--lsys-dialog-focus-ring-offset) focus-visible:ring-offset-(--lsys-dialog-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+)

package/templates/primitives/Drawer/Drawer.tsx

@@ -0,0 +1,266 @@
+/**
+ * Drawer.tsx
+ *
+ * Reference Drawer component implementation.
+ */
+
+import { X } from "lucide-react"
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer"
+import type {
+  DrawerBackdropProps,
+  DrawerCloseProps,
+  DrawerContentProps,
+  DrawerDescriptionProps,
+  DrawerHandleIndicatorProps,
+  DrawerIndentBackgroundProps,
+  DrawerIndentProps,
+  DrawerPopupProps,
+  DrawerPortalProps,
+  DrawerProps,
+  DrawerProviderProps,
+  DrawerSwipeAreaProps,
+  DrawerTitleProps,
+  DrawerTriggerProps,
+  DrawerViewportProps,
+} from "./Drawer.types"
+import {
+  drawerBackdropVariants,
+  drawerCloseVariants,
+  drawerCloseInlineVariants,
+  drawerContentVariants,
+  drawerDescriptionVariants,
+  drawerHandleVariants,
+  drawerIndentBackgroundVariants,
+  drawerIndentVariants,
+  drawerPopupVariants,
+  drawerSwipeAreaVariants,
+  drawerTitleVariants,
+  drawerTriggerVariants,
+  drawerViewportVariants,
+} from "./Drawer.variants"
+import { cn } from "@/lib/utils"
+import { mergeClassName } from "@/lib/utils"
+
+const Drawer = <Payload = unknown,>(props: DrawerProps<Payload>) => {
+  return <BaseDrawer.Root {...props} />
+}
+
+Drawer.displayName = "Drawer"
+
+const DrawerProvider = (props: DrawerProviderProps) => {
+  return <BaseDrawer.Provider {...props} />
+}
+
+DrawerProvider.displayName = "DrawerProvider"
+
+const DrawerTrigger = ({ ref, className, ...props }: DrawerTriggerProps) => {
+  return (
+    <BaseDrawer.Trigger
+      ref={ref}
+      className={mergeClassName(drawerTriggerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+DrawerTrigger.displayName = "DrawerTrigger"
+
+const DrawerPortal = (props: DrawerPortalProps) => {
+  return <BaseDrawer.Portal {...props} />
+}
+
+DrawerPortal.displayName = "DrawerPortal"
+
+const DrawerIndentBackground = ({
+  ref,
+  className,
+  ...props
+}: DrawerIndentBackgroundProps) => {
+  return (
+    <BaseDrawer.IndentBackground
+      ref={ref}
+      className={mergeClassName(drawerIndentBackgroundVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+DrawerIndentBackground.displayName = "DrawerIndentBackground"
+
+const DrawerIndent = ({ ref, className, ...props }: DrawerIndentProps) => {
+  return (
+    <BaseDrawer.Indent
+      ref={ref}
+      className={mergeClassName(drawerIndentVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+DrawerIndent.displayName = "DrawerIndent"
+
+const DrawerBackdrop = ({ ref, className, ...props }: DrawerBackdropProps) => {
+  return (
+    <BaseDrawer.Backdrop
+      ref={ref}
+      className={mergeClassName(drawerBackdropVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+DrawerBackdrop.displayName = "DrawerBackdrop"
+
+const DrawerViewport = ({
+  ref,
+  side,
+  className,
+  ...props
+}: DrawerViewportProps) => {
+  return (
+    <BaseDrawer.Viewport
+      ref={ref}
+      className={mergeClassName(drawerViewportVariants({ side }), className)}
+      {...props}
+    />
+  )
+}
+
+DrawerViewport.displayName = "DrawerViewport"
+
+const DrawerPopup = ({
+  ref,
+  side,
+  size,
+  className,
+  ...props
+}: DrawerPopupProps) => {
+  return (
+    <BaseDrawer.Popup
+      ref={ref}
+      className={mergeClassName(drawerPopupVariants({ side, size }), className)}
+      {...props}
+    />
+  )
+}
+
+DrawerPopup.displayName = "DrawerPopup"
+
+const DrawerContent = ({ ref, className, ...props }: DrawerContentProps) => {
+  return (
+    <BaseDrawer.Content
+      ref={ref}
+      className={mergeClassName(drawerContentVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHandleIndicator = ({
+  className,
+  ...props
+}: DrawerHandleIndicatorProps) => {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(drawerHandleVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+DrawerHandleIndicator.displayName = "DrawerHandleIndicator"
+
+const DrawerSwipeArea = ({
+  ref,
+  side,
+  className,
+  ...props
+}: DrawerSwipeAreaProps) => {
+  return (
+    <BaseDrawer.SwipeArea
+      ref={ref}
+      className={mergeClassName(drawerSwipeAreaVariants({ side }), className)}
+      {...props}
+    />
+  )
+}
+
+DrawerSwipeArea.displayName = "DrawerSwipeArea"
+
+const DrawerTitle = ({ ref, className, ...props }: DrawerTitleProps) => {
+  return (
+    <BaseDrawer.Title
+      ref={ref}
+      className={mergeClassName(drawerTitleVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+DrawerTitle.displayName = "DrawerTitle"
+
+const DrawerDescription = ({
+  ref,
+  className,
+  ...props
+}: DrawerDescriptionProps) => {
+  return (
+    <BaseDrawer.Description
+      ref={ref}
+      className={mergeClassName(drawerDescriptionVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+DrawerDescription.displayName = "DrawerDescription"
+
+const DrawerClose = ({
+  ref,
+  appearance = "icon",
+  className,
+  children,
+  ...props
+}: DrawerCloseProps) => {
+  return (
+    <BaseDrawer.Close
+      ref={ref}
+      className={mergeClassName(
+        appearance === "inline"
+          ? drawerCloseInlineVariants()
+          : drawerCloseVariants(),
+        className,
+      )}
+      {...props}
+    >
+      {children ??
+        (appearance === "icon" ? <X aria-hidden="true" size={16} /> : null)}
+    </BaseDrawer.Close>
+  )
+}
+
+DrawerClose.displayName = "DrawerClose"
+
+const createDrawerHandle = BaseDrawer.createHandle
+
+export {
+  Drawer,
+  DrawerProvider,
+  DrawerIndentBackground,
+  DrawerIndent,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerBackdrop,
+  DrawerViewport,
+  DrawerPopup,
+  DrawerContent,
+  DrawerHandleIndicator,
+  DrawerSwipeArea,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerClose,
+  createDrawerHandle,
+}

package/templates/primitives/Drawer/Drawer.types.ts

@@ -0,0 +1,77 @@
+import type { Ref } from "react"
+/**
+ * Drawer.types.ts
+ *
+ * Public and internal types for Drawer component.
+ */
+
+import type { HTMLAttributes } from "react"
+import type { Drawer as BaseDrawer } from "@base-ui/react/drawer"
+
+export type DrawerSide = "bottom" | "top" | "right" | "left"
+export type DrawerSize = "sm" | "md" | "lg" | "full"
+
+export type DrawerProps<Payload = unknown> = BaseDrawer.Root.Props<Payload>
+export type DrawerProviderProps = BaseDrawer.Provider.Props
+export type DrawerPortalProps = BaseDrawer.Portal.Props
+export type DrawerHandle<Payload = unknown> = BaseDrawer.Handle<Payload>
+
+export type DrawerTriggerProps<Payload = unknown> =
+  BaseDrawer.Trigger.Props<Payload> & {
+    ref?: Ref<HTMLButtonElement>
+  }
+
+export type DrawerIndentBackgroundProps = BaseDrawer.IndentBackground.Props
+
+export type DrawerIndentProps = BaseDrawer.Indent.Props
+
+export type DrawerBackdropProps = BaseDrawer.Backdrop.Props
+
+export interface DrawerViewportProps extends Omit<
+  BaseDrawer.Viewport.Props,
+  "className"
+> {
+  side?: DrawerSide
+  className?: BaseDrawer.Viewport.Props["className"]
+}
+
+export interface DrawerPopupProps extends Omit<
+  BaseDrawer.Popup.Props,
+  "className" | "size"
+> {
+  side?: DrawerSide
+  size?: DrawerSize
+  className?: BaseDrawer.Popup.Props["className"]
+}
+
+export interface DrawerContentProps extends Omit<
+  BaseDrawer.Content.Props,
+  "className"
+> {
+  className?: BaseDrawer.Content.Props["className"]
+}
+
+export type DrawerHandleIndicatorProps = HTMLAttributes<HTMLDivElement>
+
+export interface DrawerSwipeAreaProps extends Omit<
+  BaseDrawer.SwipeArea.Props,
+  "className"
+> {
+  side?: DrawerSide
+  className?: BaseDrawer.SwipeArea.Props["className"]
+}
+
+export interface DrawerTitleProps extends Omit<
+  BaseDrawer.Title.Props,
+  "className"
+> {
+  className?: BaseDrawer.Title.Props["className"]
+}
+
+export type DrawerDescriptionProps = BaseDrawer.Description.Props
+
+export type DrawerCloseAppearance = "icon" | "inline"
+
+export interface DrawerCloseProps extends BaseDrawer.Close.Props {
+  appearance?: DrawerCloseAppearance
+}