@dalexto/lexsys-registry 0.0.2

package/templates/primitives/Drawer/Drawer.variants.ts

@@ -0,0 +1,175 @@
+/**
+ * Drawer.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const drawerTriggerVariants = cva(
+  [
+    "inline-flex h-(--lsys-drawer-trigger-height) items-center justify-center rounded-(--lsys-drawer-trigger-radius)",
+    "bg-(--lsys-drawer-trigger-background) px-(--lsys-drawer-trigger-padding-x) text-(--lsys-drawer-trigger-foreground)",
+    "text-(length:--lsys-drawer-trigger-font-size) font-(--lsys-drawer-trigger-font-weight) leading-(--lsys-drawer-trigger-font-line-height)",
+    "transition-colors duration-(--lsys-drawer-transition-duration) ease-(--lsys-drawer-transition-easing)",
+    "outline-none hover:bg-(--lsys-drawer-trigger-hover-background) focus-visible:ring-(length:--lsys-drawer-focus-ring-width) focus-visible:ring-(--lsys-drawer-focus-ring-color) focus-visible:ring-offset-(length:--lsys-drawer-focus-ring-offset) focus-visible:ring-offset-(--lsys-drawer-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+)
+
+export const drawerIndentBackgroundVariants = cva(
+  "fixed inset-0 z-(--lsys-drawer-indent-z-index) bg-(--lsys-drawer-indent-background) opacity-0 transition-opacity duration-(--lsys-drawer-transition-duration) ease-(--lsys-drawer-transition-easing) data-[active]:opacity-100",
+)
+
+export const drawerIndentVariants = cva(
+  "min-h-(--lsys-drawer-viewport-max-height) origin-top overflow-hidden transition-[border-radius,transform] duration-(--lsys-drawer-transition-duration) ease-(--lsys-drawer-transition-easing) data-[active]:scale-(--lsys-drawer-indent-scale) data-[active]:rounded-(--lsys-drawer-indent-radius)",
+)
+
+export const drawerBackdropVariants = cva(
+  [
+    "fixed inset-0 z-(--lsys-drawer-backdrop-z-index) bg-(--lsys-drawer-backdrop-background) opacity-(--lsys-drawer-backdrop-opacity)",
+    "transition-opacity duration-(--lsys-drawer-transition-duration) ease-(--lsys-drawer-transition-easing)",
+    "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+  ].join(" "),
+)
+
+export const drawerViewportVariants = cva(
+  "fixed inset-0 z-(--lsys-drawer-viewport-z-index) flex overflow-hidden p-(--lsys-drawer-viewport-padding)",
+  {
+    variants: {
+      side: {
+        bottom: "items-end justify-center",
+        top: "items-start justify-center",
+        right: "items-stretch justify-end",
+        left: "items-stretch justify-start",
+      },
+    },
+    defaultVariants: {
+      side: "bottom",
+    },
+  },
+)
+
+export const drawerPopupVariants = cva(
+  [
+    "relative flex bg-(--lsys-drawer-popup-background) text-(--lsys-drawer-popup-foreground) shadow-(--lsys-drawer-popup-shadow) outline-none",
+    "border border-(--lsys-drawer-popup-border-color) transition-[opacity,transform] duration-[calc(var(--lsys-drawer-transition-duration)*var(--drawer-swipe-strength,1))] ease-(--lsys-drawer-transition-easing)",
+    "data-[swiping]:transition-none",
+  ].join(" "),
+  {
+    variants: {
+      side: {
+        bottom:
+          "max-h-[calc(var(--lsys-drawer-viewport-max-height)-(var(--lsys-drawer-viewport-padding)*2))] w-[min(calc(100vw-(var(--lsys-drawer-viewport-inset)*2)),var(--lsys-drawer-popup-max-width))] translate-y-[calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px))] rounded-t-(--lsys-drawer-popup-radius) data-[ending-style]:translate-y-full data-[starting-style]:translate-y-full",
+        top: "max-h-[calc(var(--lsys-drawer-viewport-max-height)-(var(--lsys-drawer-viewport-padding)*2))] w-[min(calc(100vw-(var(--lsys-drawer-viewport-inset)*2)),var(--lsys-drawer-popup-max-width))] translate-y-[var(--drawer-swipe-movement-y,0px)] rounded-b-(--lsys-drawer-popup-radius) data-[ending-style]:-translate-y-full data-[starting-style]:-translate-y-full",
+        right:
+          "h-full max-w-[calc(100vw-(var(--lsys-drawer-viewport-inset)*2))] translate-x-[var(--drawer-swipe-movement-x,0px)] rounded-l-(--lsys-drawer-popup-radius) data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full",
+        left: "h-full max-w-[calc(100vw-(var(--lsys-drawer-viewport-inset)*2))] translate-x-[var(--drawer-swipe-movement-x,0px)] rounded-r-(--lsys-drawer-popup-radius) data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full",
+      },
+      size: {
+        sm: "",
+        md: "",
+        lg: "",
+        full: "",
+      },
+    },
+    compoundVariants: [
+      {
+        side: ["bottom", "top"],
+        size: "sm",
+        class: "min-h-(--lsys-drawer-popup-height-sm)",
+      },
+      {
+        side: ["bottom", "top"],
+        size: "md",
+        class: "min-h-(--lsys-drawer-popup-height-md)",
+      },
+      {
+        side: ["bottom", "top"],
+        size: "lg",
+        class: "min-h-(--lsys-drawer-popup-height-lg)",
+      },
+      {
+        side: ["bottom", "top"],
+        size: "full",
+        class:
+          "min-h-[calc(var(--lsys-drawer-viewport-max-height)-(var(--lsys-drawer-viewport-padding)*2))]",
+      },
+      {
+        side: ["left", "right"],
+        size: "sm",
+        class: "w-(--lsys-drawer-popup-width-sm)",
+      },
+      {
+        side: ["left", "right"],
+        size: "md",
+        class: "w-(--lsys-drawer-popup-width-md)",
+      },
+      {
+        side: ["left", "right"],
+        size: "lg",
+        class: "w-(--lsys-drawer-popup-width-lg)",
+      },
+      {
+        side: ["left", "right"],
+        size: "full",
+        class: "w-[calc(100vw-(var(--lsys-drawer-viewport-inset)*2))]",
+      },
+    ],
+    defaultVariants: {
+      side: "bottom",
+      size: "md",
+    },
+  },
+)
+
+export const drawerContentVariants = cva(
+  "grid flex-1 content-start gap-(--lsys-drawer-content-gap) overflow-auto p-(--lsys-drawer-content-padding)",
+)
+
+export const drawerHandleVariants = cva(
+  "mx-auto mt-(--lsys-drawer-handle-margin-top) h-(--lsys-drawer-handle-height) w-(--lsys-drawer-handle-width) shrink-0 rounded-(--lsys-drawer-handle-radius) bg-(--lsys-drawer-handle-background)",
+)
+
+export const drawerSwipeAreaVariants = cva(
+  "fixed z-(--lsys-drawer-handle-z-index) data-[disabled]:pointer-events-none data-[disabled]:opacity-0",
+  {
+    variants: {
+      side: {
+        bottom: "inset-x-0 bottom-0 h-(--lsys-drawer-swipe-area-size)",
+        top: "inset-x-0 top-0 h-(--lsys-drawer-swipe-area-size)",
+        right: "inset-y-0 right-0 w-(--lsys-drawer-swipe-area-size)",
+        left: "inset-y-0 left-0 w-(--lsys-drawer-swipe-area-size)",
+      },
+    },
+    defaultVariants: {
+      side: "bottom",
+    },
+  },
+)
+
+export const drawerTitleVariants = cva(
+  "pr-(--lsys-drawer-title-padding-end) text-(length:--lsys-drawer-title-font-size) font-(--lsys-drawer-title-font-weight) leading-(--lsys-drawer-title-font-line-height) text-(--lsys-drawer-title-foreground)",
+)
+
+export const drawerDescriptionVariants = cva(
+  "text-(length:--lsys-drawer-description-font-size) font-(--lsys-drawer-description-font-weight) leading-(--lsys-drawer-description-font-line-height) text-(--lsys-drawer-description-foreground)",
+)
+
+export const drawerCloseVariants = cva(
+  [
+    "absolute right-(--lsys-drawer-close-inset) top-(--lsys-drawer-close-inset) inline-flex size-(--lsys-drawer-close-size) items-center justify-center rounded-(--lsys-drawer-close-radius)",
+    "text-(--lsys-drawer-close-foreground) outline-none transition-colors duration-(--lsys-drawer-transition-duration) ease-(--lsys-drawer-transition-easing)",
+    "hover:bg-(--lsys-drawer-close-hover-background) focus-visible:ring-(length:--lsys-drawer-focus-ring-width) focus-visible:ring-(--lsys-drawer-focus-ring-color) focus-visible:ring-offset-(length:--lsys-drawer-focus-ring-offset) focus-visible:ring-offset-(--lsys-drawer-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+)
+
+export const drawerCloseInlineVariants = cva(
+  [
+    "relative inline-flex w-auto items-center outline-none",
+    "focus-visible:ring-(length:--lsys-drawer-focus-ring-width) focus-visible:ring-(--lsys-drawer-focus-ring-color) focus-visible:ring-offset-(length:--lsys-drawer-focus-ring-offset) focus-visible:ring-offset-(--lsys-drawer-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+)

package/templates/primitives/Field/Field.tsx

@@ -0,0 +1,132 @@
+/**
+ * Field.tsx
+ *
+ * Reference Field component implementation.
+ */
+
+import { Field as BaseField } from "@base-ui/react/field"
+import type {
+  FieldControlProps,
+  FieldDescriptionProps,
+  FieldErrorProps,
+  FieldItemProps,
+  FieldLabelProps,
+  FieldProps,
+  FieldValidityProps,
+} from "./Field.types"
+import {
+  fieldControlVariants,
+  fieldDescriptionVariants,
+  fieldErrorVariants,
+  fieldItemVariants,
+  fieldLabelVariants,
+  fieldVariants,
+} from "./Field.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Field = ({ ref, className, ...props }: FieldProps) => {
+  return (
+    <BaseField.Root
+      ref={ref}
+      className={mergeClassName(fieldVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+Field.displayName = "Field"
+
+const FieldLabel = ({ ref, className, ...props }: FieldLabelProps) => {
+  return (
+    <BaseField.Label
+      ref={ref}
+      className={mergeClassName(fieldLabelVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+FieldLabel.displayName = "FieldLabel"
+
+const FieldControl = ({
+  ref,
+  variant,
+  size,
+  className,
+  isInvalid,
+  ...props
+}: FieldControlProps) => {
+  const baseControlProps: Omit<
+    FieldControlProps,
+    "className" | "isInvalid" | "size" | "variant"
+  > = isInvalid ? { ...props, "aria-invalid": true } : props
+
+  return (
+    <BaseField.Control
+      ref={ref}
+      className={mergeClassName(
+        fieldControlVariants({ variant, size }),
+        className,
+      )}
+      {...baseControlProps}
+    />
+  )
+}
+
+FieldControl.displayName = "FieldControl"
+
+const FieldDescription = ({
+  ref,
+  className,
+  ...props
+}: FieldDescriptionProps) => {
+  return (
+    <BaseField.Description
+      ref={ref}
+      className={mergeClassName(fieldDescriptionVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+FieldDescription.displayName = "FieldDescription"
+
+const FieldItem = ({ ref, className, ...props }: FieldItemProps) => {
+  return (
+    <BaseField.Item
+      ref={ref}
+      className={mergeClassName(fieldItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+FieldItem.displayName = "FieldItem"
+
+const FieldError = ({ ref, className, ...props }: FieldErrorProps) => {
+  return (
+    <BaseField.Error
+      ref={ref}
+      className={mergeClassName(fieldErrorVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+FieldError.displayName = "FieldError"
+
+const FieldValidity = (props: FieldValidityProps) => {
+  return <BaseField.Validity {...props} />
+}
+
+FieldValidity.displayName = "FieldValidity"
+
+export {
+  Field,
+  FieldLabel,
+  FieldControl,
+  FieldDescription,
+  FieldItem,
+  FieldError,
+  FieldValidity,
+}

package/templates/primitives/Field/Field.types.ts

@@ -0,0 +1,43 @@
+import type { Ref } from "react"
+/**
+ * Field.types.ts
+ *
+ * Public and internal types for Field component.
+ */
+
+import type { Field as BaseField } from "@base-ui/react/field"
+
+export interface FieldProps extends Omit<BaseField.Root.Props, "className"> {
+  ref?: Ref<HTMLDivElement>
+  className?: BaseField.Root.Props["className"]
+}
+
+export type FieldLabelProps = BaseField.Label.Props
+
+export type FieldControlVariant = "default" | "ghost"
+
+export type FieldControlSize = "sm" | "md" | "lg"
+
+export interface FieldControlProps extends Omit<
+  BaseField.Control.Props,
+  "aria-invalid" | "className" | "size"
+> {
+  variant?: FieldControlVariant
+  size?: FieldControlSize
+  isInvalid?: boolean
+  "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling"
+  className?: BaseField.Control.Props["className"]
+}
+
+export interface FieldDescriptionProps extends Omit<
+  BaseField.Description.Props,
+  "className"
+> {
+  className?: BaseField.Description.Props["className"]
+}
+
+export type FieldItemProps = BaseField.Item.Props
+
+export type FieldErrorProps = BaseField.Error.Props
+
+export type FieldValidityProps = BaseField.Validity.Props

package/templates/primitives/Field/Field.variants.ts

@@ -0,0 +1,77 @@
+/**
+ * Field.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const fieldVariants = cva(
+  [
+    "grid gap-(--lsys-field-gap) text-(--lsys-field-foreground)",
+    "data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+)
+
+export const fieldLabelVariants = cva(
+  [
+    "w-fit text-(length:--lsys-field-label-font-size) font-(--lsys-field-label-font-weight) leading-(--lsys-field-label-font-line-height) tracking-(--lsys-field-label-font-letter-spacing)",
+    "text-(--lsys-field-label-foreground) data-[invalid]:text-(--lsys-field-label-invalid-foreground) data-[disabled]:cursor-not-allowed",
+  ].join(" "),
+)
+
+export const fieldControlVariants = cva(
+  [
+    "flex w-full min-w-0 border bg-(--lsys-field-control-background) text-(--lsys-field-control-foreground)",
+    "rounded-(--lsys-field-control-radius) border-(--lsys-field-control-border-color)",
+    "font-(family-name:--lsys-field-control-font-family) font-(--lsys-field-control-font-weight) leading-(--lsys-field-control-font-line-height) tracking-(--lsys-field-control-font-letter-spacing)",
+    "placeholder:text-(--lsys-field-control-placeholder-color)",
+    "transition-colors duration-(--lsys-field-transition-duration) ease-(--lsys-field-transition-easing)",
+    "outline-none focus-visible:border-(--lsys-field-control-focus-border-color) focus-visible:ring-(length:--lsys-field-control-focus-ring-width) focus-visible:ring-(--lsys-field-control-focus-ring-color) focus-visible:ring-offset-(length:--lsys-field-control-focus-ring-offset) focus-visible:ring-offset-(--lsys-field-control-focus-ring-offset-color)",
+    "data-[invalid]:border-(--lsys-field-control-invalid-border-color) data-[invalid]:ring-(--lsys-field-control-invalid-ring-color) aria-invalid:border-(--lsys-field-control-invalid-border-color) aria-invalid:ring-(--lsys-field-control-invalid-ring-color)",
+    "disabled:cursor-not-allowed",
+    disabledStateClasses,
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "",
+        ghost:
+          "border-transparent bg-transparent focus-visible:bg-(--lsys-field-control-background)",
+      },
+      size: {
+        sm: "h-(--lsys-field-control-height-sm) px-(--lsys-field-control-padding-x-sm) text-(length:--lsys-field-control-font-size-sm)",
+        md: "h-(--lsys-field-control-height-md) px-(--lsys-field-control-padding-x-md) text-(length:--lsys-field-control-font-size-md)",
+        lg: "h-(--lsys-field-control-height-lg) px-(--lsys-field-control-padding-x-lg) text-(length:--lsys-field-control-font-size-lg)",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  },
+)
+
+export const fieldDescriptionVariants = cva(
+  [
+    "m-0 text-(length:--lsys-field-description-font-size) font-(--lsys-field-description-font-weight) leading-(--lsys-field-description-font-line-height) tracking-(--lsys-field-description-font-letter-spacing)",
+    "text-(--lsys-field-description-foreground) data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+)
+
+export const fieldItemVariants = cva(
+  [
+    "grid gap-(--lsys-field-item-gap)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+)
+
+export const fieldErrorVariants = cva(
+  [
+    "m-0 text-(length:--lsys-field-error-font-size) font-(--lsys-field-error-font-weight) leading-(--lsys-field-error-font-line-height) tracking-(--lsys-field-error-font-letter-spacing)",
+    "text-(--lsys-field-error-foreground) data-[disabled]:opacity-(--lsys-opacity-disabled)",
+    "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+    "transition-opacity duration-(--lsys-field-transition-duration) ease-(--lsys-field-transition-easing)",
+  ].join(" "),
+)

package/templates/primitives/Fieldset/Fieldset.tsx

@@ -0,0 +1,36 @@
+/**
+ * Fieldset.tsx
+ *
+ * Reference Fieldset component implementation.
+ */
+
+import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset"
+import type { FieldsetLegendProps, FieldsetProps } from "./Fieldset.types"
+import { fieldsetLegendVariants, fieldsetVariants } from "./Fieldset.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Fieldset = ({ ref, variant, className, ...props }: FieldsetProps) => {
+  return (
+    <BaseFieldset.Root
+      ref={ref}
+      className={mergeClassName(fieldsetVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+Fieldset.displayName = "Fieldset"
+
+const FieldsetLegend = ({ ref, className, ...props }: FieldsetLegendProps) => {
+  return (
+    <BaseFieldset.Legend
+      ref={ref}
+      className={mergeClassName(fieldsetLegendVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+FieldsetLegend.displayName = "FieldsetLegend"
+
+export { Fieldset, FieldsetLegend }

package/templates/primitives/Fieldset/Fieldset.types.ts

@@ -0,0 +1,26 @@
+import type { Ref } from "react"
+/**
+ * Fieldset.types.ts
+ *
+ * Public and internal types for Fieldset component.
+ */
+
+import type { Fieldset as BaseFieldset } from "@base-ui/react/fieldset"
+
+export type FieldsetVariant = "surface" | "plain"
+
+export interface FieldsetProps extends Omit<
+  BaseFieldset.Root.Props,
+  "className"
+> {
+  ref?: Ref<HTMLFieldSetElement>
+  variant?: FieldsetVariant
+  className?: BaseFieldset.Root.Props["className"]
+}
+
+export interface FieldsetLegendProps extends Omit<
+  BaseFieldset.Legend.Props,
+  "className"
+> {
+  className?: BaseFieldset.Legend.Props["className"]
+}

package/templates/primitives/Fieldset/Fieldset.variants.ts

@@ -0,0 +1,37 @@
+/**
+ * Fieldset.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const fieldsetVariants = cva(
+  [
+    "m-0 grid min-w-0 gap-(--lsys-fieldset-gap) rounded-(--lsys-fieldset-radius)",
+    "border border-(--lsys-fieldset-border-color) p-(--lsys-fieldset-padding)",
+    "bg-(--lsys-fieldset-background) text-(--lsys-fieldset-foreground)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        surface: "",
+        plain:
+          "border-transparent bg-transparent p-0 shadow-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
+      },
+    },
+    defaultVariants: {
+      variant: "surface",
+    },
+  },
+)
+
+export const fieldsetLegendVariants = cva(
+  [
+    "mb-(--lsys-fieldset-legend-margin-bottom) text-(length:--lsys-fieldset-legend-font-size)",
+    "font-(--lsys-fieldset-legend-font-weight) leading-(--lsys-fieldset-legend-font-line-height)",
+    "tracking-(--lsys-fieldset-legend-font-letter-spacing) text-(--lsys-fieldset-legend-foreground)",
+    "data-[disabled]:cursor-not-allowed",
+  ].join(" "),
+)

package/templates/primitives/Form/Form.tsx

@@ -0,0 +1,24 @@
+/**
+ * Form.tsx
+ *
+ * Reference Form component implementation.
+ */
+
+import { Form as BaseForm } from "@base-ui/react/form"
+import type { FormProps } from "./Form.types"
+import { formVariants } from "./Form.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Form = ({ ref, className, ...props }: FormProps) => {
+  return (
+    <BaseForm
+      ref={ref}
+      className={mergeClassName(formVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+Form.displayName = "Form"
+
+export { Form }

package/templates/primitives/Form/Form.types.ts

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

package/templates/primitives/Form/Form.variants.ts

@@ -0,0 +1,11 @@
+/**
+ * Form.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const formVariants = cva(
+  "grid gap-(--lsys-form-gap) text-(--lsys-form-foreground)",
+)

package/templates/primitives/Input/Input.tsx

@@ -0,0 +1,36 @@
+/**
+ * Input.tsx
+ *
+ * Reference Input component implementation.
+ */
+
+import { Input as BaseInput } from "@base-ui/react/input"
+import type { InputProps } from "./Input.types"
+import { inputVariants } from "./Input.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Input = ({
+  ref,
+  variant,
+  size,
+  className,
+  isInvalid,
+  ...props
+}: InputProps) => {
+  const baseInputProps: Omit<
+    InputProps,
+    "className" | "isInvalid" | "size" | "variant"
+  > = isInvalid ? { ...props, "aria-invalid": true } : props
+
+  return (
+    <BaseInput
+      ref={ref}
+      className={mergeClassName(inputVariants({ variant, size }), className)}
+      {...baseInputProps}
+    />
+  )
+}
+
+Input.displayName = "Input"
+
+export { Input }

package/templates/primitives/Input/Input.types.ts

@@ -0,0 +1,27 @@
+import type { Ref } from "react"
+/**
+ * Input.types.ts
+ *
+ * Public and internal types for Input component.
+ */
+
+import type { Input as BaseInput } from "@base-ui/react/input"
+
+type InputAriaInvalid = boolean | "true" | "false" | "grammar" | "spelling"
+type InputClassName = BaseInput.Props["className"]
+
+export type InputVariant = "default" | "ghost"
+
+export type InputSize = "sm" | "md" | "lg"
+
+export interface InputProps extends Omit<
+  BaseInput.Props,
+  "aria-invalid" | "className" | "size"
+> {
+  ref?: Ref<HTMLInputElement>
+  variant?: InputVariant
+  size?: InputSize
+  isInvalid?: boolean
+  "aria-invalid"?: InputAriaInvalid
+  className?: InputClassName
+}