@dalexto/lexsys-registry 0.0.2

package/templates/primitives/Select/Select.tsx

@@ -0,0 +1,319 @@
+/**
+ * Select.tsx
+ *
+ * Reference Select component implementation.
+ */
+
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import { Select as BaseSelect } from "@base-ui/react/select"
+import type {
+  SelectArrowProps,
+  SelectBackdropProps,
+  SelectGroupLabelProps,
+  SelectGroupProps,
+  SelectIconProps,
+  SelectItemIndicatorProps,
+  SelectItemProps,
+  SelectItemTextProps,
+  SelectLabelProps,
+  SelectListProps,
+  SelectPopupProps,
+  SelectPortalProps,
+  SelectPositionerProps,
+  SelectProps,
+  SelectScrollDownArrowProps,
+  SelectScrollUpArrowProps,
+  SelectTriggerProps,
+  SelectValueProps,
+} from "./Select.types"
+import {
+  selectArrowVariants,
+  selectBackdropVariants,
+  selectGroupLabelVariants,
+  selectGroupVariants,
+  selectIconVariants,
+  selectItemIndicatorVariants,
+  selectItemTextVariants,
+  selectItemVariants,
+  selectLabelVariants,
+  selectListVariants,
+  selectPopupVariants,
+  selectPositionerVariants,
+  selectScrollArrowVariants,
+  selectTriggerVariants,
+  selectValueVariants,
+} from "./Select.variants"
+import { mergeClassName } from "@/lib/utils"
+import { overlayPositionerSideOffset } from "@/lib/utils"
+
+const Select = <Value = string, Multiple extends boolean | undefined = false>(
+  props: SelectProps<Value, Multiple>,
+) => {
+  return <BaseSelect.Root {...props} />
+}
+
+Select.displayName = "Select"
+
+const SelectLabel = ({ ref, className, ...props }: SelectLabelProps) => {
+  return (
+    <BaseSelect.Label
+      ref={ref}
+      className={mergeClassName(selectLabelVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SelectLabel.displayName = "SelectLabel"
+
+const SelectTrigger = ({
+  ref,
+  size,
+  className,
+  ...props
+}: SelectTriggerProps) => {
+  return (
+    <BaseSelect.Trigger
+      ref={ref}
+      className={mergeClassName(selectTriggerVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+SelectTrigger.displayName = "SelectTrigger"
+
+const SelectValue = ({ ref, className, ...props }: SelectValueProps) => {
+  return (
+    <BaseSelect.Value
+      ref={ref}
+      className={mergeClassName(selectValueVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SelectValue.displayName = "SelectValue"
+
+const SelectIcon = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SelectIconProps) => {
+  return (
+    <BaseSelect.Icon
+      ref={ref}
+      className={mergeClassName(selectIconVariants(), className)}
+      {...props}
+    >
+      {children ?? <ChevronDown aria-hidden="true" size={16} />}
+    </BaseSelect.Icon>
+  )
+}
+
+SelectIcon.displayName = "SelectIcon"
+
+const SelectPortal = (props: SelectPortalProps) => {
+  return <BaseSelect.Portal {...props} />
+}
+
+SelectPortal.displayName = "SelectPortal"
+
+const SelectBackdrop = ({ ref, className, ...props }: SelectBackdropProps) => {
+  return (
+    <BaseSelect.Backdrop
+      ref={ref}
+      className={mergeClassName(selectBackdropVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SelectBackdrop.displayName = "SelectBackdrop"
+
+const SelectPositioner = ({
+  ref,
+  className,
+  alignItemWithTrigger = false,
+  sideOffset = overlayPositionerSideOffset,
+  ...props
+}: SelectPositionerProps) => {
+  return (
+    <BaseSelect.Positioner
+      ref={ref}
+      alignItemWithTrigger={alignItemWithTrigger}
+      sideOffset={sideOffset}
+      className={mergeClassName(selectPositionerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SelectPositioner.displayName = "SelectPositioner"
+
+const SelectPopup = ({ ref, className, ...props }: SelectPopupProps) => {
+  return (
+    <BaseSelect.Popup
+      ref={ref}
+      className={mergeClassName(selectPopupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SelectPopup.displayName = "SelectPopup"
+
+const SelectList = ({ ref, className, ...props }: SelectListProps) => {
+  return (
+    <BaseSelect.List
+      ref={ref}
+      className={mergeClassName(selectListVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SelectList.displayName = "SelectList"
+
+const SelectItem = ({ ref, className, ...props }: SelectItemProps) => {
+  return (
+    <BaseSelect.Item
+      ref={ref}
+      className={mergeClassName(selectItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SelectItem.displayName = "SelectItem"
+
+const SelectItemIndicator = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SelectItemIndicatorProps) => {
+  return (
+    <BaseSelect.ItemIndicator
+      ref={ref}
+      className={mergeClassName(selectItemIndicatorVariants(), className)}
+      {...props}
+    >
+      {children ?? <Check aria-hidden="true" size={14} />}
+    </BaseSelect.ItemIndicator>
+  )
+}
+
+SelectItemIndicator.displayName = "SelectItemIndicator"
+
+const SelectItemText = ({ ref, className, ...props }: SelectItemTextProps) => {
+  return (
+    <BaseSelect.ItemText
+      ref={ref}
+      className={mergeClassName(selectItemTextVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SelectItemText.displayName = "SelectItemText"
+
+const SelectArrow = ({ ref, className, ...props }: SelectArrowProps) => {
+  return (
+    <BaseSelect.Arrow
+      ref={ref}
+      className={mergeClassName(selectArrowVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SelectArrow.displayName = "SelectArrow"
+
+const SelectScrollUpArrow = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SelectScrollUpArrowProps) => {
+  return (
+    <BaseSelect.ScrollUpArrow
+      ref={ref}
+      className={mergeClassName(selectScrollArrowVariants(), className)}
+      {...props}
+    >
+      {children ?? <ChevronUp aria-hidden="true" size={16} />}
+    </BaseSelect.ScrollUpArrow>
+  )
+}
+
+SelectScrollUpArrow.displayName = "SelectScrollUpArrow"
+
+const SelectScrollDownArrow = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SelectScrollDownArrowProps) => {
+  return (
+    <BaseSelect.ScrollDownArrow
+      ref={ref}
+      className={mergeClassName(selectScrollArrowVariants(), className)}
+      {...props}
+    >
+      {children ?? <ChevronDown aria-hidden="true" size={16} />}
+    </BaseSelect.ScrollDownArrow>
+  )
+}
+
+SelectScrollDownArrow.displayName = "SelectScrollDownArrow"
+
+const SelectGroup = ({ ref, className, ...props }: SelectGroupProps) => {
+  return (
+    <BaseSelect.Group
+      ref={ref}
+      className={mergeClassName(selectGroupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SelectGroup.displayName = "SelectGroup"
+
+const SelectGroupLabel = ({
+  ref,
+  className,
+  ...props
+}: SelectGroupLabelProps) => {
+  return (
+    <BaseSelect.GroupLabel
+      ref={ref}
+      className={mergeClassName(selectGroupLabelVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SelectGroupLabel.displayName = "SelectGroupLabel"
+
+export {
+  Select,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+  SelectIcon,
+  SelectPortal,
+  SelectBackdrop,
+  SelectPositioner,
+  SelectPopup,
+  SelectList,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectArrow,
+  SelectScrollUpArrow,
+  SelectScrollDownArrow,
+  SelectGroup,
+  SelectGroupLabel,
+}

package/templates/primitives/Select/Select.types.ts

@@ -0,0 +1,74 @@
+import type { Ref } from "react"
+/**
+ * Select.types.ts
+ *
+ * Public and internal types for Select component.
+ */
+
+import type { Select as BaseSelect } from "@base-ui/react/select"
+
+export type SelectSize = "sm" | "md" | "lg"
+
+export type SelectProps<
+  Value = string,
+  Multiple extends boolean | undefined = false,
+> = BaseSelect.Root.Props<Value, Multiple>
+
+export type SelectLabelProps = BaseSelect.Label.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export interface SelectTriggerProps extends Omit<
+  BaseSelect.Trigger.Props,
+  "className" | "size"
+> {
+  size?: SelectSize
+  className?: BaseSelect.Trigger.Props["className"]
+}
+
+export interface SelectValueProps extends Omit<
+  BaseSelect.Value.Props,
+  "className"
+> {
+  className?: BaseSelect.Value.Props["className"]
+}
+
+export type SelectIconProps = BaseSelect.Icon.Props
+
+export type SelectPortalProps = BaseSelect.Portal.Props
+
+export type SelectBackdropProps = BaseSelect.Backdrop.Props
+
+export type SelectPositionerProps = BaseSelect.Positioner.Props
+
+export type SelectPopupProps = BaseSelect.Popup.Props
+
+export type SelectListProps = BaseSelect.List.Props
+
+export interface SelectItemProps extends Omit<
+  BaseSelect.Item.Props,
+  "className" | "ref"
+> {
+  ref?: Ref<HTMLDivElement>
+  className?: BaseSelect.Item.Props["className"]
+}
+
+export interface SelectItemIndicatorProps extends Omit<
+  BaseSelect.ItemIndicator.Props,
+  "className"
+> {
+  className?: BaseSelect.ItemIndicator.Props["className"]
+}
+
+export type SelectItemTextProps = BaseSelect.ItemText.Props
+
+export type SelectArrowProps = BaseSelect.Arrow.Props
+
+export type SelectScrollArrowProps = BaseSelect.ScrollDownArrow.Props
+
+export type SelectScrollUpArrowProps = SelectScrollArrowProps
+export type SelectScrollDownArrowProps = SelectScrollArrowProps
+
+export type SelectGroupProps = BaseSelect.Group.Props
+
+export type SelectGroupLabelProps = BaseSelect.GroupLabel.Props

package/templates/primitives/Select/Select.variants.ts

@@ -0,0 +1,94 @@
+/**
+ * Select.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const selectLabelVariants = cva(
+  "text-(length:--lsys-select-label-font-size) font-(--lsys-select-label-font-weight) leading-(--lsys-select-label-font-line-height) text-(--lsys-select-label-foreground)",
+)
+
+export const selectTriggerVariants = cva(
+  [
+    "inline-flex w-full min-w-0 items-center justify-between gap-(--lsys-select-trigger-gap) rounded-(--lsys-select-radius) border",
+    "border-(--lsys-select-border-color) bg-(--lsys-select-background) text-(--lsys-select-foreground)",
+    "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
+    "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
+    "outline-none data-[focused]:border-(--lsys-select-focus-border-color) data-[focused]:ring-(length:--lsys-select-focus-ring-width) data-[focused]:ring-(--lsys-select-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-select-focus-ring-offset) data-[focused]:ring-offset-(--lsys-select-focus-ring-offset-color)",
+    "data-[invalid]:border-(--lsys-select-invalid-border-color) data-[invalid]:ring-(length:--lsys-select-invalid-ring-width) data-[invalid]:ring-(--lsys-select-invalid-ring-color)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "h-(--lsys-select-height-sm) px-(--lsys-select-padding-x-sm) text-(length:--lsys-select-font-size-sm)",
+        md: "h-(--lsys-select-height-md) px-(--lsys-select-padding-x-md) text-(length:--lsys-select-font-size-md)",
+        lg: "h-(--lsys-select-height-lg) px-(--lsys-select-padding-x-lg) text-(length:--lsys-select-font-size-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const selectValueVariants = cva(
+  "min-w-0 flex-1 truncate text-left data-[placeholder]:text-(--lsys-select-placeholder-color)",
+)
+
+export const selectIconVariants = cva(
+  "inline-flex size-(--lsys-select-icon-size) shrink-0 items-center justify-center text-(--lsys-select-icon-foreground) transition-transform duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing) data-[open]:rotate-180",
+)
+
+export const selectBackdropVariants = cva(
+  "fixed inset-0 z-(--lsys-select-backdrop-z-index) bg-(--lsys-select-backdrop-background) opacity-(--lsys-select-backdrop-opacity) data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+)
+
+export const selectPositionerVariants = cva(
+  "z-(--lsys-select-positioner-z-index)",
+)
+
+export const selectPopupVariants = cva(
+  [
+    "min-w-[var(--anchor-width)] overflow-hidden rounded-(--lsys-select-radius) border",
+    "border-(--lsys-select-popup-border-color) bg-(--lsys-select-popup-background) text-(--lsys-select-popup-foreground) shadow-(--lsys-select-popup-shadow)",
+    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    "origin-[var(--transform-origin)] transition-[opacity,transform] duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
+  ].join(" "),
+)
+
+export const selectListVariants = cva(
+  "grid max-h-(--lsys-select-popup-max-height) gap-(--lsys-select-list-gap) overflow-y-auto p-(--lsys-select-list-padding)",
+)
+
+export const selectItemVariants = cva(
+  [
+    "relative flex min-w-0 cursor-default select-none items-center gap-(--lsys-select-item-gap) rounded-(--lsys-select-item-radius) px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y)",
+    "text-(length:--lsys-select-item-font-size) font-(--lsys-select-item-font-weight) leading-(--lsys-select-item-font-line-height) text-(--lsys-select-item-foreground) outline-none",
+    "data-[highlighted]:bg-(--lsys-select-item-highlight-background) data-[highlighted]:text-(--lsys-select-item-highlight-foreground)",
+    "data-[selected]:bg-(--lsys-select-item-selected-background) data-[selected]:text-(--lsys-select-item-selected-foreground)",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+)
+
+export const selectItemIndicatorVariants = cva(
+  "inline-flex size-(--lsys-select-item-indicator-size) shrink-0 items-center justify-center text-current",
+)
+
+export const selectItemTextVariants = cva("min-w-0 flex-1 truncate")
+
+export const selectArrowVariants = cva(
+  "size-(--lsys-select-arrow-size) rotate-45 border border-(--lsys-select-popup-border-color) bg-(--lsys-select-popup-background)",
+)
+
+export const selectScrollArrowVariants = cva(
+  "flex h-(--lsys-select-scroll-arrow-height) items-center justify-center text-(--lsys-select-icon-foreground)",
+)
+
+export const selectGroupVariants = cva("grid gap-(--lsys-select-group-gap)")
+
+export const selectGroupLabelVariants = cva(
+  "px-(--lsys-select-item-padding-x) py-(--lsys-select-group-label-padding-y) text-(length:--lsys-select-group-label-font-size) font-(--lsys-select-group-label-font-weight) leading-(--lsys-select-group-label-font-line-height) text-(--lsys-select-group-label-foreground)",
+)

package/templates/primitives/Separator/Separator.tsx

@@ -0,0 +1,30 @@
+/**
+ * Separator.tsx
+ *
+ * Reference Separator component implementation.
+ */
+
+import { Separator as BaseSeparator } from "@base-ui/react/separator"
+import type { SeparatorProps } from "./Separator.types"
+import { separatorVariants } from "./Separator.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Separator = ({
+  ref,
+  orientation = "horizontal",
+  className,
+  ...props
+}: SeparatorProps) => {
+  return (
+    <BaseSeparator
+      ref={ref}
+      orientation={orientation}
+      className={mergeClassName(separatorVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+Separator.displayName = "Separator"
+
+export { Separator }

package/templates/primitives/Separator/Separator.types.ts

@@ -0,0 +1,13 @@
+import type { Ref } from "react"
+/**
+ * Separator.types.ts
+ *
+ * Public and internal types for Separator component.
+ */
+
+import type { Separator as BaseSeparator } from "@base-ui/react/separator"
+
+export interface SeparatorProps extends Omit<BaseSeparator.Props, "className"> {
+  ref?: Ref<HTMLDivElement>
+  className?: BaseSeparator.Props["className"]
+}

package/templates/primitives/Separator/Separator.variants.ts

@@ -0,0 +1,19 @@
+/**
+ * Separator.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const separatorVariants = cva("shrink-0 bg-(--lsys-separator-color)", {
+  variants: {
+    orientation: {
+      horizontal: "h-(--lsys-separator-thickness) w-full",
+      vertical: "h-full w-(--lsys-separator-thickness)",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+})

package/templates/primitives/Slider/Slider.tsx

@@ -0,0 +1,124 @@
+/**
+ * Slider.tsx
+ *
+ * Reference Slider component implementation.
+ */
+
+import { Slider as BaseSlider } from "@base-ui/react/slider"
+import type {
+  SliderControlProps,
+  SliderIndicatorProps,
+  SliderLabelProps,
+  SliderProps,
+  SliderThumbProps,
+  SliderTrackProps,
+  SliderValueProps,
+} from "./Slider.types"
+import {
+  sliderControlVariants,
+  sliderIndicatorVariants,
+  sliderLabelVariants,
+  sliderThumbVariants,
+  sliderTrackVariants,
+  sliderValueVariants,
+  sliderVariants,
+} from "./Slider.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Slider = ({ ref, className, children, ...props }: SliderProps) => {
+  return (
+    <BaseSlider.Root
+      ref={ref}
+      className={mergeClassName(sliderVariants(), className)}
+      {...props}
+    >
+      {children}
+    </BaseSlider.Root>
+  )
+}
+
+Slider.displayName = "Slider"
+
+const SliderControl = ({
+  className,
+  children,
+  ...props
+}: SliderControlProps) => {
+  return (
+    <BaseSlider.Control
+      className={mergeClassName(sliderControlVariants(), className)}
+      {...props}
+    >
+      {children}
+    </BaseSlider.Control>
+  )
+}
+
+SliderControl.displayName = "SliderControl"
+
+const SliderTrack = ({ className, children, ...props }: SliderTrackProps) => {
+  return (
+    <BaseSlider.Track
+      className={mergeClassName(sliderTrackVariants(), className)}
+      {...props}
+    >
+      {children}
+    </BaseSlider.Track>
+  )
+}
+
+SliderTrack.displayName = "SliderTrack"
+
+const SliderIndicator = ({ className, ...props }: SliderIndicatorProps) => {
+  return (
+    <BaseSlider.Indicator
+      className={mergeClassName(sliderIndicatorVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SliderIndicator.displayName = "SliderIndicator"
+
+const SliderThumb = ({ className, ...props }: SliderThumbProps) => {
+  return (
+    <BaseSlider.Thumb
+      className={mergeClassName(sliderThumbVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SliderThumb.displayName = "SliderThumb"
+
+const SliderLabel = ({ className, ...props }: SliderLabelProps) => {
+  return (
+    <BaseSlider.Label
+      className={mergeClassName(sliderLabelVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SliderLabel.displayName = "SliderLabel"
+
+const SliderValue = ({ className, ...props }: SliderValueProps) => {
+  return (
+    <BaseSlider.Value
+      className={mergeClassName(sliderValueVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+SliderValue.displayName = "SliderValue"
+
+export {
+  Slider,
+  SliderControl,
+  SliderTrack,
+  SliderIndicator,
+  SliderThumb,
+  SliderLabel,
+  SliderValue,
+}