@dalexto/lexsys-registry 0.0.2

package/templates/primitives/Meter/Meter.types.ts

@@ -0,0 +1,45 @@
+import type { Ref } from "react"
+/**
+ * Meter.types.ts
+ *
+ * Public and internal types for Meter component.
+ */
+
+import type { ReactNode } from "react"
+import type { Meter as BaseMeter } from "@base-ui/react/meter"
+
+export type MeterSize = "sm" | "md" | "lg"
+
+export interface MeterProps extends Omit<
+  BaseMeter.Root.Props,
+  "className" | "size"
+> {
+  ref?: Ref<HTMLDivElement>
+  size?: MeterSize
+  label?: ReactNode
+  showValue?: boolean
+  className?: BaseMeter.Root.Props["className"]
+  trackClassName?: BaseMeter.Track.Props["className"]
+  indicatorClassName?: BaseMeter.Indicator.Props["className"]
+  labelClassName?: BaseMeter.Label.Props["className"]
+  valueClassName?: BaseMeter.Value.Props["className"]
+}
+
+export interface MeterTrackProps extends Omit<
+  BaseMeter.Track.Props,
+  "className" | "size"
+> {
+  size?: MeterSize
+  className?: BaseMeter.Track.Props["className"]
+}
+
+export interface MeterIndicatorProps extends Omit<
+  BaseMeter.Indicator.Props,
+  "className"
+> {
+  className?: BaseMeter.Indicator.Props["className"]
+}
+
+export type MeterValueProps = BaseMeter.Value.Props
+
+export type MeterLabelProps = BaseMeter.Label.Props

package/templates/primitives/Meter/Meter.variants.ts

@@ -0,0 +1,47 @@
+/**
+ * Meter.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const meterVariants = cva(
+  "grid gap-(--lsys-meter-gap) text-(length:--lsys-meter-label-font-size) leading-(--lsys-meter-label-font-line-height) text-(--lsys-meter-label-foreground)",
+)
+
+export const meterHeaderVariants = cva(
+  "flex items-center justify-between gap-(--lsys-meter-header-gap)",
+)
+
+export const meterLabelVariants = cva(
+  "font-(--lsys-meter-label-font-weight) text-(--lsys-meter-label-foreground)",
+)
+
+export const meterValueVariants = cva(
+  "font-(--lsys-meter-value-font-weight) text-(--lsys-meter-value-foreground)",
+)
+
+export const meterTrackVariants = cva(
+  "overflow-hidden rounded-(--lsys-meter-track-radius) bg-(--lsys-meter-track-background)",
+  {
+    variants: {
+      size: {
+        sm: "h-(--lsys-meter-track-height-sm)",
+        md: "h-(--lsys-meter-track-height-md)",
+        lg: "h-(--lsys-meter-track-height-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const meterIndicatorVariants = cva(
+  [
+    "h-full bg-(--lsys-meter-indicator-background) transition-transform",
+    "duration-(--lsys-meter-transition-duration) ease-(--lsys-meter-transition-easing)",
+    "data-[complete]:bg-(--lsys-meter-indicator-background-complete)",
+  ].join(" "),
+)

package/templates/primitives/NavigationMenu/NavigationMenu.tsx

@@ -0,0 +1,256 @@
+/**
+ * NavigationMenu.tsx
+ *
+ * Reference NavigationMenu component implementation.
+ */
+
+import { ChevronDown } from "lucide-react"
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu"
+import type {
+  NavigationMenuArrowProps,
+  NavigationMenuBackdropProps,
+  NavigationMenuContentProps,
+  NavigationMenuIconProps,
+  NavigationMenuItemProps,
+  NavigationMenuLinkProps,
+  NavigationMenuListProps,
+  NavigationMenuPopupProps,
+  NavigationMenuPortalProps,
+  NavigationMenuPositionerProps,
+  NavigationMenuProps,
+  NavigationMenuTriggerProps,
+  NavigationMenuViewportProps,
+} from "./NavigationMenu.types"
+import {
+  navigationMenuArrowVariants,
+  navigationMenuBackdropVariants,
+  navigationMenuContentVariants,
+  navigationMenuIconVariants,
+  navigationMenuItemVariants,
+  navigationMenuLinkVariants,
+  navigationMenuListVariants,
+  navigationMenuPopupVariants,
+  navigationMenuPositionerVariants,
+  navigationMenuRootVariants,
+  navigationMenuTriggerVariants,
+  navigationMenuViewportVariants,
+} from "./NavigationMenu.variants"
+import { mergeClassName } from "@/lib/utils"
+import { overlayPositionerSideOffset } from "@/lib/utils"
+
+const NavigationMenu = <Value = unknown,>({
+  className,
+  ...props
+}: NavigationMenuProps<Value>) => {
+  return (
+    <BaseNavigationMenu.Root
+      className={mergeClassName(navigationMenuRootVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+NavigationMenu.displayName = "NavigationMenu"
+
+const NavigationMenuList = ({
+  ref,
+  className,
+  ...props
+}: NavigationMenuListProps) => {
+  return (
+    <BaseNavigationMenu.List
+      ref={ref}
+      className={mergeClassName(navigationMenuListVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+NavigationMenuList.displayName = "NavigationMenuList"
+
+const NavigationMenuItem = ({
+  ref,
+  className,
+  ...props
+}: NavigationMenuItemProps) => {
+  return (
+    <BaseNavigationMenu.Item
+      ref={ref}
+      className={mergeClassName(navigationMenuItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+NavigationMenuItem.displayName = "NavigationMenuItem"
+
+const NavigationMenuContent = ({
+  ref,
+  className,
+  ...props
+}: NavigationMenuContentProps) => {
+  return (
+    <BaseNavigationMenu.Content
+      ref={ref}
+      className={mergeClassName(navigationMenuContentVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+NavigationMenuContent.displayName = "NavigationMenuContent"
+
+const NavigationMenuTrigger = ({
+  ref,
+  className,
+  ...props
+}: NavigationMenuTriggerProps) => {
+  return (
+    <BaseNavigationMenu.Trigger
+      ref={ref}
+      className={mergeClassName(navigationMenuTriggerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger"
+
+const NavigationMenuPortal = (props: NavigationMenuPortalProps) => {
+  return <BaseNavigationMenu.Portal {...props} />
+}
+
+NavigationMenuPortal.displayName = "NavigationMenuPortal"
+
+const NavigationMenuPositioner = ({
+  ref,
+  className,
+  sideOffset = overlayPositionerSideOffset,
+  ...props
+}: NavigationMenuPositionerProps) => {
+  return (
+    <BaseNavigationMenu.Positioner
+      ref={ref}
+      sideOffset={sideOffset}
+      className={mergeClassName(navigationMenuPositionerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+NavigationMenuPositioner.displayName = "NavigationMenuPositioner"
+
+const NavigationMenuViewport = ({
+  ref,
+  className,
+  ...props
+}: NavigationMenuViewportProps) => {
+  return (
+    <BaseNavigationMenu.Viewport
+      ref={ref}
+      className={mergeClassName(navigationMenuViewportVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+NavigationMenuViewport.displayName = "NavigationMenuViewport"
+
+const NavigationMenuBackdrop = ({
+  ref,
+  className,
+  ...props
+}: NavigationMenuBackdropProps) => {
+  return (
+    <BaseNavigationMenu.Backdrop
+      ref={ref}
+      className={mergeClassName(navigationMenuBackdropVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+NavigationMenuBackdrop.displayName = "NavigationMenuBackdrop"
+
+const NavigationMenuPopup = ({
+  ref,
+  className,
+  ...props
+}: NavigationMenuPopupProps) => {
+  return (
+    <BaseNavigationMenu.Popup
+      ref={ref}
+      className={mergeClassName(navigationMenuPopupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+NavigationMenuPopup.displayName = "NavigationMenuPopup"
+
+const NavigationMenuArrow = ({
+  ref,
+  className,
+  ...props
+}: NavigationMenuArrowProps) => {
+  return (
+    <BaseNavigationMenu.Arrow
+      ref={ref}
+      className={mergeClassName(navigationMenuArrowVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+NavigationMenuArrow.displayName = "NavigationMenuArrow"
+
+const NavigationMenuLink = ({
+  ref,
+  className,
+  ...props
+}: NavigationMenuLinkProps) => {
+  return (
+    <BaseNavigationMenu.Link
+      ref={ref}
+      className={mergeClassName(navigationMenuLinkVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+NavigationMenuLink.displayName = "NavigationMenuLink"
+
+const NavigationMenuIcon = ({
+  ref,
+  className,
+  children,
+  ...props
+}: NavigationMenuIconProps) => {
+  return (
+    <BaseNavigationMenu.Icon
+      ref={ref}
+      className={mergeClassName(navigationMenuIconVariants(), className)}
+      {...props}
+    >
+      {children ?? <ChevronDown aria-hidden="true" size={14} />}
+    </BaseNavigationMenu.Icon>
+  )
+}
+
+NavigationMenuIcon.displayName = "NavigationMenuIcon"
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuPortal,
+  NavigationMenuPositioner,
+  NavigationMenuViewport,
+  NavigationMenuBackdrop,
+  NavigationMenuPopup,
+  NavigationMenuArrow,
+  NavigationMenuLink,
+  NavigationMenuIcon,
+}

package/templates/primitives/NavigationMenu/NavigationMenu.types.ts

@@ -0,0 +1,58 @@
+import type { Ref } from "react"
+/**
+ * NavigationMenu.types.ts
+ *
+ * Public and internal types for NavigationMenu component.
+ */
+
+import type { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu"
+
+export type NavigationMenuProps<Value = unknown> =
+  BaseNavigationMenu.Root.Props<Value>
+
+export type NavigationMenuListProps = BaseNavigationMenu.List.Props & {
+  ref?: Ref<HTMLUListElement>
+}
+
+export type NavigationMenuItemProps = BaseNavigationMenu.Item.Props & {
+  ref?: Ref<HTMLLIElement>
+}
+
+export type NavigationMenuContentProps = BaseNavigationMenu.Content.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type NavigationMenuTriggerProps = BaseNavigationMenu.Trigger.Props & {
+  ref?: Ref<HTMLButtonElement>
+}
+
+export type NavigationMenuPortalProps = BaseNavigationMenu.Portal.Props
+
+export type NavigationMenuPositionerProps =
+  BaseNavigationMenu.Positioner.Props & {
+    ref?: Ref<HTMLDivElement>
+  }
+
+export type NavigationMenuViewportProps = BaseNavigationMenu.Viewport.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type NavigationMenuBackdropProps = BaseNavigationMenu.Backdrop.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type NavigationMenuPopupProps = BaseNavigationMenu.Popup.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type NavigationMenuArrowProps = BaseNavigationMenu.Arrow.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type NavigationMenuLinkProps = BaseNavigationMenu.Link.Props & {
+  ref?: Ref<HTMLAnchorElement>
+}
+
+export type NavigationMenuIconProps = BaseNavigationMenu.Icon.Props & {
+  ref?: Ref<HTMLSpanElement>
+}

package/templates/primitives/NavigationMenu/NavigationMenu.variants.ts

@@ -0,0 +1,40 @@
+/**
+ * NavigationMenu.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import {
+  menuArrowVariants,
+  menuBackdropVariants,
+  menuItemVariants,
+  menuPopupVariants,
+  menuPositionerVariants,
+  menuSubmenuTriggerIconVariants,
+  menuTriggerVariants,
+  menuViewportVariants,
+} from "../Menu/Menu.variants"
+
+export const navigationMenuBackdropVariants = menuBackdropVariants
+export const navigationMenuPositionerVariants = menuPositionerVariants
+export const navigationMenuPopupVariants = menuPopupVariants
+export const navigationMenuViewportVariants = menuViewportVariants
+export const navigationMenuArrowVariants = menuArrowVariants
+export const navigationMenuTriggerVariants = menuTriggerVariants
+export const navigationMenuLinkVariants = menuItemVariants
+export const navigationMenuIconVariants = menuSubmenuTriggerIconVariants
+
+export const navigationMenuRootVariants = cva(
+  "relative flex max-w-max flex-1 items-center justify-center",
+)
+
+export const navigationMenuListVariants = cva(
+  "flex flex-1 list-none items-center justify-center gap-(--lsys-menu-list-gap) p-(--lsys-menu-list-padding)",
+)
+
+export const navigationMenuItemVariants = cva("relative")
+
+export const navigationMenuContentVariants = cva(
+  "grid gap-(--lsys-menu-list-gap) p-(--lsys-menu-list-padding)",
+)

package/templates/primitives/NumberField/NumberField.tsx

@@ -0,0 +1,168 @@
+/**
+ * NumberField.tsx
+ *
+ * Reference NumberField component implementation.
+ */
+
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field"
+import type {
+  NumberFieldDecrementProps,
+  NumberFieldGroupProps,
+  NumberFieldIncrementProps,
+  NumberFieldInputProps,
+  NumberFieldProps,
+  NumberFieldScrubAreaCursorProps,
+  NumberFieldScrubAreaProps,
+} from "./NumberField.types"
+import {
+  numberFieldButtonVariants,
+  numberFieldGroupVariants,
+  numberFieldInputVariants,
+  numberFieldScrubAreaCursorVariants,
+  numberFieldScrubAreaVariants,
+  numberFieldVariants,
+} from "./NumberField.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const NumberField = ({ ref, className, ...props }: NumberFieldProps) => {
+  return (
+    <BaseNumberField.Root
+      ref={ref}
+      className={mergeClassName(numberFieldVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+NumberField.displayName = "NumberField"
+
+const NumberFieldGroup = ({
+  ref,
+  size,
+  className,
+  ...props
+}: NumberFieldGroupProps) => {
+  return (
+    <BaseNumberField.Group
+      ref={ref}
+      className={mergeClassName(numberFieldGroupVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+NumberFieldGroup.displayName = "NumberFieldGroup"
+
+const NumberFieldInput = ({
+  ref,
+  size,
+  className,
+  isInvalid,
+  ...props
+}: NumberFieldInputProps) => {
+  const baseInputProps: Omit<
+    NumberFieldInputProps,
+    "className" | "isInvalid" | "size"
+  > = isInvalid ? { ...props, "aria-invalid": true } : props
+
+  return (
+    <BaseNumberField.Input
+      ref={ref}
+      className={mergeClassName(numberFieldInputVariants({ size }), className)}
+      {...baseInputProps}
+    />
+  )
+}
+
+NumberFieldInput.displayName = "NumberFieldInput"
+
+const NumberFieldIncrement = ({
+  ref,
+  size,
+  className,
+  children,
+  ...props
+}: NumberFieldIncrementProps) => {
+  return (
+    <BaseNumberField.Increment
+      ref={ref}
+      className={mergeClassName(
+        numberFieldButtonVariants({ position: "increment", size }),
+        className,
+      )}
+      {...props}
+    >
+      {children ?? "+"}
+    </BaseNumberField.Increment>
+  )
+}
+
+NumberFieldIncrement.displayName = "NumberFieldIncrement"
+
+const NumberFieldDecrement = ({
+  ref,
+  size,
+  className,
+  children,
+  ...props
+}: NumberFieldDecrementProps) => {
+  return (
+    <BaseNumberField.Decrement
+      ref={ref}
+      className={mergeClassName(
+        numberFieldButtonVariants({ position: "decrement", size }),
+        className,
+      )}
+      {...props}
+    >
+      {children ?? "-"}
+    </BaseNumberField.Decrement>
+  )
+}
+
+NumberFieldDecrement.displayName = "NumberFieldDecrement"
+
+const NumberFieldScrubArea = ({
+  ref,
+  className,
+  ...props
+}: NumberFieldScrubAreaProps) => {
+  return (
+    <BaseNumberField.ScrubArea
+      ref={ref}
+      className={mergeClassName(numberFieldScrubAreaVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+NumberFieldScrubArea.displayName = "NumberFieldScrubArea"
+
+const NumberFieldScrubAreaCursor = ({
+  ref,
+  className,
+  ...props
+}: NumberFieldScrubAreaCursorProps) => {
+  return (
+    <BaseNumberField.ScrubAreaCursor
+      ref={ref}
+      className={mergeClassName(
+        numberFieldScrubAreaCursorVariants(),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+NumberFieldScrubAreaCursor.displayName = "NumberFieldScrubAreaCursor"
+
+export {
+  NumberField,
+  NumberFieldGroup,
+  NumberFieldInput,
+  NumberFieldIncrement,
+  NumberFieldDecrement,
+  NumberFieldScrubArea,
+  NumberFieldScrubAreaCursor,
+}

package/templates/primitives/NumberField/NumberField.types.ts

@@ -0,0 +1,51 @@
+import type { Ref } from "react"
+/**
+ * NumberField.types.ts
+ *
+ * Public and internal types for NumberField component.
+ */
+
+import type { NumberField as BaseNumberField } from "@base-ui/react/number-field"
+
+export type NumberFieldProps = BaseNumberField.Root.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export interface NumberFieldGroupProps extends Omit<
+  BaseNumberField.Group.Props,
+  "className"
+> {
+  size?: "sm" | "md" | "lg"
+  className?: BaseNumberField.Group.Props["className"]
+}
+
+export interface NumberFieldInputProps extends Omit<
+  BaseNumberField.Input.Props,
+  "aria-invalid" | "className" | "size"
+> {
+  size?: "sm" | "md" | "lg"
+  isInvalid?: boolean
+  "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling"
+  className?: BaseNumberField.Input.Props["className"]
+}
+
+export interface NumberFieldButtonProps extends Omit<
+  BaseNumberField.Increment.Props,
+  "className" | "size"
+> {
+  size?: "sm" | "md" | "lg"
+  className?: BaseNumberField.Increment.Props["className"]
+}
+
+export type NumberFieldIncrementProps = NumberFieldButtonProps
+export type NumberFieldDecrementProps = NumberFieldButtonProps
+
+export interface NumberFieldScrubAreaProps extends Omit<
+  BaseNumberField.ScrubArea.Props,
+  "className"
+> {
+  className?: BaseNumberField.ScrubArea.Props["className"]
+}
+
+export type NumberFieldScrubAreaCursorProps =
+  BaseNumberField.ScrubAreaCursor.Props