@dalexto/lexsys-registry 0.0.2

package/templates/primitives/Checkbox/Checkbox.variants.ts

@@ -0,0 +1,39 @@
+/**
+ * Checkbox.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const checkboxVariants = cva(
+  [
+    "inline-flex shrink-0 items-center justify-center rounded-(--lsys-checkbox-radius) border",
+    "border-(--lsys-checkbox-border-color) bg-(--lsys-checkbox-background) text-(--lsys-checkbox-foreground)",
+    "transition-colors duration-(--lsys-checkbox-transition-duration) ease-(--lsys-checkbox-transition-easing)",
+    "outline-none data-[checked]:border-(--lsys-checkbox-checked-border-color) data-[checked]:bg-(--lsys-checkbox-checked-background) data-[checked]:text-(--lsys-checkbox-checked-foreground)",
+    "data-[indeterminate]:border-(--lsys-checkbox-checked-border-color) data-[indeterminate]:bg-(--lsys-checkbox-checked-background)",
+    "data-[focused]:ring-(length:--lsys-checkbox-focus-ring-width) data-[focused]:ring-(--lsys-checkbox-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-checkbox-focus-ring-offset) data-[focused]:ring-offset-(--lsys-checkbox-focus-ring-offset-color)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "size-(--lsys-checkbox-size-sm) text-(length:--lsys-checkbox-indicator-font-size-sm)",
+        md: "size-(--lsys-checkbox-size-md) text-(length:--lsys-checkbox-indicator-font-size-md)",
+        lg: "size-(--lsys-checkbox-size-lg) text-(length:--lsys-checkbox-indicator-font-size-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const checkboxLabelVariants = cva(
+  "inline-flex items-center gap-(--lsys-checkbox-label-gap) text-(length:--lsys-checkbox-label-font-size) font-(--lsys-checkbox-label-font-weight) leading-(--lsys-checkbox-label-font-line-height) text-(--lsys-checkbox-label-foreground)",
+)
+
+export const checkboxIndicatorVariants = cva(
+  "leading-(--lsys-checkbox-label-font-line-height)",
+)

package/templates/primitives/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,32 @@
+/**
+ * CheckboxGroup.tsx
+ *
+ * Reference CheckboxGroup component implementation.
+ */
+
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group"
+import type { CheckboxGroupProps } from "./CheckboxGroup.types"
+import { checkboxGroupVariants } from "./CheckboxGroup.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const CheckboxGroup = ({
+  ref,
+  orientation = "vertical",
+  className,
+  ...props
+}: CheckboxGroupProps) => {
+  return (
+    <BaseCheckboxGroup
+      ref={ref}
+      className={mergeClassName(
+        checkboxGroupVariants({ orientation }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+CheckboxGroup.displayName = "CheckboxGroup"
+
+export { CheckboxGroup }

package/templates/primitives/CheckboxGroup/CheckboxGroup.types.ts

@@ -0,0 +1,17 @@
+import type { Ref } from "react"
+/**
+ * CheckboxGroup.types.ts
+ *
+ * Public and internal types for CheckboxGroup component.
+ */
+
+import type { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group"
+
+export interface CheckboxGroupProps extends Omit<
+  BaseCheckboxGroup.Props,
+  "className"
+> {
+  ref?: Ref<HTMLDivElement>
+  orientation?: "horizontal" | "vertical"
+  className?: BaseCheckboxGroup.Props["className"]
+}

package/templates/primitives/CheckboxGroup/CheckboxGroup.variants.ts

@@ -0,0 +1,25 @@
+/**
+ * CheckboxGroup.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const checkboxGroupVariants = cva(
+  [
+    "grid gap-(--lsys-checkbox-label-gap) text-(length:--lsys-checkbox-label-font-size) font-(--lsys-checkbox-label-font-weight) leading-(--lsys-checkbox-label-font-line-height) text-(--lsys-checkbox-label-foreground)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+  {
+    variants: {
+      orientation: {
+        horizontal: "grid-flow-col justify-start",
+        vertical: "grid-flow-row",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+)

package/templates/primitives/Collapsible/Collapsible.tsx

@@ -0,0 +1,74 @@
+/**
+ * Collapsible.tsx
+ *
+ * Reference Collapsible component implementation.
+ */
+
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible"
+import { Plus } from "lucide-react"
+import type {
+  CollapsiblePanelProps,
+  CollapsibleProps,
+  CollapsibleTriggerProps,
+} from "./Collapsible.types"
+import {
+  collapsiblePanelVariants,
+  collapsibleTriggerVariants,
+  collapsibleVariants,
+} from "./Collapsible.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Collapsible = ({
+  ref,
+  variant,
+  className,
+  ...props
+}: CollapsibleProps) => {
+  return (
+    <BaseCollapsible.Root
+      ref={ref}
+      className={mergeClassName(collapsibleVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+Collapsible.displayName = "Collapsible"
+
+const CollapsibleTrigger = ({
+  ref,
+  className,
+  children,
+  ...props
+}: CollapsibleTriggerProps) => {
+  return (
+    <BaseCollapsible.Trigger
+      ref={ref}
+      className={mergeClassName(collapsibleTriggerVariants(), className)}
+      {...props}
+    >
+      <span>{children}</span>
+      <Plus aria-hidden="true" />
+    </BaseCollapsible.Trigger>
+  )
+}
+
+CollapsibleTrigger.displayName = "CollapsibleTrigger"
+
+const CollapsiblePanel = ({
+  ref,
+  className,
+  ...props
+}: CollapsiblePanelProps) => {
+  return (
+    <BaseCollapsible.Panel
+      ref={ref}
+      className={mergeClassName(collapsiblePanelVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+CollapsiblePanel.displayName = "CollapsiblePanel"
+
+export { Collapsible, CollapsibleTrigger, CollapsiblePanel }

package/templates/primitives/Collapsible/Collapsible.types.ts

@@ -0,0 +1,28 @@
+import type { Ref } from "react"
+/**
+ * Collapsible.types.ts
+ *
+ * Public and internal types for Collapsible component.
+ */
+
+import type { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible"
+
+export type CollapsibleVariant = "surface" | "plain"
+
+export interface CollapsibleProps extends Omit<
+  BaseCollapsible.Root.Props,
+  "className"
+> {
+  ref?: Ref<HTMLDivElement>
+  variant?: CollapsibleVariant
+  className?: BaseCollapsible.Root.Props["className"]
+}
+
+export interface CollapsibleTriggerProps extends Omit<
+  BaseCollapsible.Trigger.Props,
+  "className"
+> {
+  className?: BaseCollapsible.Trigger.Props["className"]
+}
+
+export type CollapsiblePanelProps = BaseCollapsible.Panel.Props

package/templates/primitives/Collapsible/Collapsible.variants.ts

@@ -0,0 +1,44 @@
+/**
+ * Collapsible.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const collapsibleVariants = cva(
+  "grid rounded-(--lsys-collapsible-radius) text-(--lsys-collapsible-foreground)",
+  {
+    variants: {
+      variant: {
+        surface:
+          "border border-(--lsys-collapsible-border-color) bg-(--lsys-collapsible-background)",
+        plain: "bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "surface",
+    },
+  },
+)
+
+export const collapsibleTriggerVariants = cva(
+  [
+    "flex w-full items-center justify-between gap-(--lsys-collapsible-trigger-gap) px-(--lsys-collapsible-trigger-padding-x) py-(--lsys-collapsible-trigger-padding-y) text-left",
+    "text-(length:--lsys-collapsible-trigger-font-size) font-(--lsys-collapsible-trigger-font-weight) leading-(--lsys-collapsible-trigger-font-line-height)",
+    "transition-colors duration-(--lsys-collapsible-transition-duration) ease-(--lsys-collapsible-transition-easing)",
+    "outline-none hover:bg-(--lsys-collapsible-trigger-background-hover) focus-visible:ring-(length:--lsys-collapsible-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lsys-collapsible-focus-ring-color)",
+    disabledStateClasses,
+    "[&>svg]:size-(--lsys-collapsible-trigger-icon-size) [&>svg]:transition-transform data-[panel-open]:[&>svg]:rotate-45",
+  ].join(" "),
+)
+
+export const collapsiblePanelVariants = cva(
+  [
+    "overflow-hidden px-(--lsys-collapsible-panel-padding-x) pb-(--lsys-collapsible-panel-padding-bottom)",
+    "text-(length:--lsys-collapsible-panel-font-size) leading-(--lsys-collapsible-panel-font-line-height) text-(--lsys-collapsible-panel-foreground)",
+    "transition-[height,opacity] duration-(--lsys-collapsible-transition-duration) ease-(--lsys-collapsible-transition-easing)",
+    "data-[starting-style]:h-0 data-[starting-style]:opacity-0 data-[ending-style]:h-0 data-[ending-style]:opacity-0",
+  ].join(" "),
+)

package/templates/primitives/Combobox/Combobox.tsx

@@ -0,0 +1,450 @@
+/**
+ * Combobox.tsx
+ *
+ * Reference Combobox component implementation.
+ */
+
+import { Check, ChevronDown, X } from "lucide-react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import type {
+  ComboboxArrowProps,
+  ComboboxBackdropProps,
+  ComboboxChipProps,
+  ComboboxChipRemoveProps,
+  ComboboxChipsProps,
+  ComboboxClearProps,
+  ComboboxCollectionProps,
+  ComboboxEmptyProps,
+  ComboboxGroupLabelProps,
+  ComboboxGroupProps,
+  ComboboxIconProps,
+  ComboboxInputGroupProps,
+  ComboboxInputProps,
+  ComboboxItemIndicatorProps,
+  ComboboxItemProps,
+  ComboboxLabelProps,
+  ComboboxListProps,
+  ComboboxPopupProps,
+  ComboboxPortalProps,
+  ComboboxPositionerProps,
+  ComboboxProps,
+  ComboboxRowProps,
+  ComboboxSeparatorProps,
+  ComboboxStatusProps,
+  ComboboxTriggerProps,
+  ComboboxValueProps,
+} from "./Combobox.types"
+import {
+  comboboxArrowVariants,
+  comboboxBackdropVariants,
+  comboboxChipRemoveVariants,
+  comboboxChipVariants,
+  comboboxChipsVariants,
+  comboboxClearVariants,
+  comboboxEmptyVariants,
+  comboboxGroupLabelVariants,
+  comboboxGroupVariants,
+  comboboxIconVariants,
+  comboboxInputGroupVariants,
+  comboboxInputVariants,
+  comboboxItemIndicatorVariants,
+  comboboxItemVariants,
+  comboboxLabelVariants,
+  comboboxListVariants,
+  comboboxPopupVariants,
+  comboboxPositionerVariants,
+  comboboxRowVariants,
+  comboboxSeparatorVariants,
+  comboboxStatusVariants,
+  comboboxTriggerVariants,
+} from "./Combobox.variants"
+import { mergeClassName } from "@/lib/utils"
+import { overlayPositionerSideOffset } from "@/lib/utils"
+
+const Combobox = <Value = string, Multiple extends boolean | undefined = false>(
+  props: ComboboxProps<Value, Multiple>,
+) => {
+  return <BaseCombobox.Root {...props} />
+}
+
+Combobox.displayName = "Combobox"
+
+const ComboboxLabel = ({ ref, className, ...props }: ComboboxLabelProps) => {
+  return (
+    <BaseCombobox.Label
+      ref={ref}
+      className={mergeClassName(comboboxLabelVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxLabel.displayName = "ComboboxLabel"
+
+const ComboboxTrigger = ({
+  ref,
+  size,
+  className,
+  ...props
+}: ComboboxTriggerProps) => {
+  return (
+    <BaseCombobox.Trigger
+      ref={ref}
+      className={mergeClassName(comboboxTriggerVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxTrigger.displayName = "ComboboxTrigger"
+
+const ComboboxInputGroup = ({
+  ref,
+  size,
+  className,
+  ...props
+}: ComboboxInputGroupProps) => {
+  return (
+    <BaseCombobox.InputGroup
+      ref={ref}
+      className={mergeClassName(
+        comboboxInputGroupVariants({ size }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+ComboboxInputGroup.displayName = "ComboboxInputGroup"
+
+const ComboboxInput = ({
+  ref,
+  size,
+  className,
+  ...props
+}: ComboboxInputProps) => {
+  return (
+    <BaseCombobox.Input
+      ref={ref}
+      className={mergeClassName(comboboxInputVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxInput.displayName = "ComboboxInput"
+
+const ComboboxValue = (props: ComboboxValueProps) => {
+  return <BaseCombobox.Value {...props} />
+}
+
+ComboboxValue.displayName = "ComboboxValue"
+
+const ComboboxIcon = ({
+  ref,
+  className,
+  children,
+  ...props
+}: ComboboxIconProps) => {
+  return (
+    <BaseCombobox.Icon
+      ref={ref}
+      className={mergeClassName(comboboxIconVariants(), className)}
+      {...props}
+    >
+      {children ?? <ChevronDown aria-hidden="true" size={16} />}
+    </BaseCombobox.Icon>
+  )
+}
+
+ComboboxIcon.displayName = "ComboboxIcon"
+
+const ComboboxClear = ({
+  ref,
+  className,
+  children,
+  ...props
+}: ComboboxClearProps) => {
+  return (
+    <BaseCombobox.Clear
+      ref={ref}
+      className={mergeClassName(comboboxClearVariants(), className)}
+      {...props}
+    >
+      {children ?? <X aria-hidden="true" size={14} />}
+    </BaseCombobox.Clear>
+  )
+}
+
+ComboboxClear.displayName = "ComboboxClear"
+
+const ComboboxPortal = (props: ComboboxPortalProps) => {
+  return <BaseCombobox.Portal {...props} />
+}
+
+ComboboxPortal.displayName = "ComboboxPortal"
+
+const ComboboxBackdrop = ({
+  ref,
+  className,
+  ...props
+}: ComboboxBackdropProps) => {
+  return (
+    <BaseCombobox.Backdrop
+      ref={ref}
+      className={mergeClassName(comboboxBackdropVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxBackdrop.displayName = "ComboboxBackdrop"
+
+const ComboboxPositioner = ({
+  ref,
+  className,
+  sideOffset = overlayPositionerSideOffset,
+  ...props
+}: ComboboxPositionerProps) => {
+  return (
+    <BaseCombobox.Positioner
+      ref={ref}
+      sideOffset={sideOffset}
+      className={mergeClassName(comboboxPositionerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxPositioner.displayName = "ComboboxPositioner"
+
+const ComboboxPopup = ({ ref, className, ...props }: ComboboxPopupProps) => {
+  return (
+    <BaseCombobox.Popup
+      ref={ref}
+      className={mergeClassName(comboboxPopupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxPopup.displayName = "ComboboxPopup"
+
+const ComboboxList = ({ ref, className, ...props }: ComboboxListProps) => {
+  return (
+    <BaseCombobox.List
+      ref={ref}
+      className={mergeClassName(comboboxListVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxList.displayName = "ComboboxList"
+
+const ComboboxItem = ({ ref, className, ...props }: ComboboxItemProps) => {
+  return (
+    <BaseCombobox.Item
+      ref={ref}
+      className={mergeClassName(comboboxItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxItem.displayName = "ComboboxItem"
+
+const ComboboxItemIndicator = ({
+  ref,
+  className,
+  children,
+  ...props
+}: ComboboxItemIndicatorProps) => {
+  return (
+    <BaseCombobox.ItemIndicator
+      ref={ref}
+      className={mergeClassName(comboboxItemIndicatorVariants(), className)}
+      {...props}
+    >
+      {children ?? <Check aria-hidden="true" size={14} />}
+    </BaseCombobox.ItemIndicator>
+  )
+}
+
+ComboboxItemIndicator.displayName = "ComboboxItemIndicator"
+
+const ComboboxArrow = ({ ref, className, ...props }: ComboboxArrowProps) => {
+  return (
+    <BaseCombobox.Arrow
+      ref={ref}
+      className={mergeClassName(comboboxArrowVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxArrow.displayName = "ComboboxArrow"
+
+const ComboboxGroup = ({ ref, className, ...props }: ComboboxGroupProps) => {
+  return (
+    <BaseCombobox.Group
+      ref={ref}
+      className={mergeClassName(comboboxGroupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxGroup.displayName = "ComboboxGroup"
+
+const ComboboxGroupLabel = ({
+  ref,
+  className,
+  ...props
+}: ComboboxGroupLabelProps) => {
+  return (
+    <BaseCombobox.GroupLabel
+      ref={ref}
+      className={mergeClassName(comboboxGroupLabelVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxGroupLabel.displayName = "ComboboxGroupLabel"
+
+const ComboboxEmpty = ({ ref, className, ...props }: ComboboxEmptyProps) => {
+  return (
+    <BaseCombobox.Empty
+      ref={ref}
+      className={mergeClassName(comboboxEmptyVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxEmpty.displayName = "ComboboxEmpty"
+
+const ComboboxStatus = ({ ref, className, ...props }: ComboboxStatusProps) => {
+  return (
+    <BaseCombobox.Status
+      ref={ref}
+      className={mergeClassName(comboboxStatusVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxStatus.displayName = "ComboboxStatus"
+
+const ComboboxChips = ({ ref, className, ...props }: ComboboxChipsProps) => {
+  return (
+    <BaseCombobox.Chips
+      ref={ref}
+      className={mergeClassName(comboboxChipsVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxChips.displayName = "ComboboxChips"
+
+const ComboboxChip = ({ ref, className, ...props }: ComboboxChipProps) => {
+  return (
+    <BaseCombobox.Chip
+      ref={ref}
+      className={mergeClassName(comboboxChipVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxChip.displayName = "ComboboxChip"
+
+const ComboboxChipRemove = ({
+  ref,
+  className,
+  children,
+  ...props
+}: ComboboxChipRemoveProps) => {
+  return (
+    <BaseCombobox.ChipRemove
+      ref={ref}
+      className={mergeClassName(comboboxChipRemoveVariants(), className)}
+      {...props}
+    >
+      {children ?? <X aria-hidden="true" size={12} />}
+    </BaseCombobox.ChipRemove>
+  )
+}
+
+ComboboxChipRemove.displayName = "ComboboxChipRemove"
+
+const ComboboxRow = ({ ref, className, ...props }: ComboboxRowProps) => {
+  return (
+    <BaseCombobox.Row
+      ref={ref}
+      className={mergeClassName(comboboxRowVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxRow.displayName = "ComboboxRow"
+
+const ComboboxCollection = (props: ComboboxCollectionProps) => {
+  return <BaseCombobox.Collection {...props} />
+}
+
+ComboboxCollection.displayName = "ComboboxCollection"
+
+const ComboboxSeparator = ({
+  ref,
+  className,
+  ...props
+}: ComboboxSeparatorProps) => {
+  return (
+    <BaseCombobox.Separator
+      ref={ref}
+      className={mergeClassName(comboboxSeparatorVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ComboboxSeparator.displayName = "ComboboxSeparator"
+
+const useComboboxFilter = BaseCombobox.useFilter
+const useComboboxFilteredItems = BaseCombobox.useFilteredItems
+
+export {
+  Combobox,
+  ComboboxLabel,
+  ComboboxTrigger,
+  ComboboxInputGroup,
+  ComboboxInput,
+  ComboboxValue,
+  ComboboxIcon,
+  ComboboxClear,
+  ComboboxPortal,
+  ComboboxBackdrop,
+  ComboboxPositioner,
+  ComboboxPopup,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxArrow,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxEmpty,
+  ComboboxStatus,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipRemove,
+  ComboboxRow,
+  ComboboxCollection,
+  ComboboxSeparator,
+  useComboboxFilter,
+  useComboboxFilteredItems,
+}