@dalexto/lexsys-registry 0.0.2

package/templates/primitives/Slider/Slider.types.ts

@@ -0,0 +1,51 @@
+import type { Ref } from "react"
+/**
+ * Slider.types.ts
+ *
+ * Public and internal types for Slider component.
+ */
+
+import type { Slider as BaseSlider } from "@base-ui/react/slider"
+
+export interface SliderProps extends Omit<
+  BaseSlider.Root.Props,
+  "className" | "children"
+> {
+  ref?: Ref<HTMLDivElement>
+  className?: BaseSlider.Root.Props["className"]
+  children?: BaseSlider.Root.Props["children"]
+}
+
+export interface SliderControlProps extends Omit<
+  BaseSlider.Control.Props,
+  "className" | "children"
+> {
+  className?: BaseSlider.Control.Props["className"]
+  children?: BaseSlider.Control.Props["children"]
+}
+
+export interface SliderTrackProps extends Omit<
+  BaseSlider.Track.Props,
+  "className" | "children"
+> {
+  className?: BaseSlider.Track.Props["className"]
+  children?: BaseSlider.Track.Props["children"]
+}
+
+export interface SliderIndicatorProps extends Omit<
+  BaseSlider.Indicator.Props,
+  "className"
+> {
+  className?: BaseSlider.Indicator.Props["className"]
+}
+
+export interface SliderThumbProps extends Omit<
+  BaseSlider.Thumb.Props,
+  "className"
+> {
+  className?: BaseSlider.Thumb.Props["className"]
+}
+
+export type SliderLabelProps = BaseSlider.Label.Props
+
+export type SliderValueProps = BaseSlider.Value.Props

package/templates/primitives/Slider/Slider.variants.ts

@@ -0,0 +1,38 @@
+/**
+ * Slider.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const sliderVariants = cva("grid gap-(--lsys-slider-gap)")
+
+export const sliderControlVariants = cva(
+  "relative flex touch-none items-center py-(--lsys-slider-control-padding-y) data-[disabled]:opacity-(--lsys-opacity-disabled)",
+)
+
+export const sliderTrackVariants = cva(
+  "relative h-(--lsys-slider-track-height) w-full overflow-hidden rounded-(--lsys-slider-track-radius) bg-(--lsys-slider-track-background)",
+)
+
+export const sliderIndicatorVariants = cva(
+  "h-full bg-(--lsys-slider-indicator-background)",
+)
+
+export const sliderThumbVariants = cva(
+  [
+    "block size-(--lsys-slider-thumb-size) rounded-(--lsys-slider-thumb-radius) border border-(--lsys-slider-thumb-border-color) bg-(--lsys-slider-thumb-background) shadow-sm",
+    "outline-none transition-colors duration-(--lsys-slider-transition-duration) ease-(--lsys-slider-transition-easing)",
+    "focus-visible:ring-(length:--lsys-slider-focus-ring-width) focus-visible:ring-(--lsys-slider-focus-ring-color) focus-visible:ring-offset-(length:--lsys-slider-focus-ring-offset) focus-visible:ring-offset-(--lsys-slider-focus-ring-offset-color)",
+    "data-[disabled]:cursor-not-allowed",
+  ].join(" "),
+)
+
+export const sliderLabelVariants = cva(
+  "font-(--lsys-meter-label-font-weight) text-(length:--lsys-meter-label-font-size) leading-(--lsys-meter-label-font-line-height) text-(--lsys-meter-label-foreground)",
+)
+
+export const sliderValueVariants = cva(
+  "font-(--lsys-meter-value-font-weight) text-(--lsys-meter-value-foreground)",
+)

package/templates/primitives/Switch/Switch.tsx

@@ -0,0 +1,61 @@
+/**
+ * Switch.tsx
+ *
+ * Reference Switch component implementation.
+ */
+
+import { createContext, useContext } from "react"
+import { Switch as BaseSwitch } from "@base-ui/react/switch"
+import type { SwitchProps, SwitchSize, SwitchThumbProps } from "./Switch.types"
+import { switchThumbVariants, switchVariants } from "./Switch.variants"
+import { mergeClassName } from "@/lib/utils"
+
+interface SwitchContextValue {
+  size: SwitchSize
+}
+
+const SwitchContext = createContext<SwitchContextValue>({ size: "md" })
+
+const useSwitchContext = () => useContext(SwitchContext)
+
+const Switch = ({
+  ref,
+  size = "md",
+  className,
+  children,
+  ...props
+}: SwitchProps) => {
+  return (
+    <SwitchContext.Provider value={{ size }}>
+      <BaseSwitch.Root
+        ref={ref}
+        className={mergeClassName(switchVariants({ size }), className)}
+        {...props}
+      >
+        {children}
+      </BaseSwitch.Root>
+    </SwitchContext.Provider>
+  )
+}
+
+Switch.displayName = "Switch"
+
+const SwitchThumb = ({ ref, size, className, ...props }: SwitchThumbProps) => {
+  const context = useSwitchContext()
+  const resolvedSize = size ?? context.size
+
+  return (
+    <BaseSwitch.Thumb
+      ref={ref}
+      className={mergeClassName(
+        switchThumbVariants({ size: resolvedSize }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+SwitchThumb.displayName = "SwitchThumb"
+
+export { Switch, SwitchThumb }

package/templates/primitives/Switch/Switch.types.ts

@@ -0,0 +1,29 @@
+import type { Ref } from "react"
+/**
+ * Switch.types.ts
+ *
+ * Public and internal types for Switch component.
+ */
+
+import type { Switch as BaseSwitch } from "@base-ui/react/switch"
+
+export type SwitchSize = "sm" | "md" | "lg"
+
+export interface SwitchProps extends Omit<
+  BaseSwitch.Root.Props,
+  "className" | "children"
+> {
+  ref?: Ref<HTMLElement>
+  size?: SwitchSize
+  className?: BaseSwitch.Root.Props["className"]
+  children?: BaseSwitch.Root.Props["children"]
+}
+
+export interface SwitchThumbProps extends Omit<
+  BaseSwitch.Thumb.Props,
+  "className"
+> {
+  ref?: Ref<HTMLElement>
+  size?: SwitchSize
+  className?: BaseSwitch.Thumb.Props["className"]
+}

package/templates/primitives/Switch/Switch.variants.ts

@@ -0,0 +1,48 @@
+/**
+ * Switch.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const switchVariants = cva(
+  [
+    "inline-flex shrink-0 cursor-pointer items-center rounded-(--lsys-switch-radius) border border-transparent bg-(--lsys-switch-background) p-(--lsys-switch-padding)",
+    "transition-colors duration-(--lsys-switch-transition-duration) ease-(--lsys-switch-transition-easing)",
+    "outline-none data-[checked]:bg-(--lsys-switch-checked-background)",
+    "data-[focused]:ring-(length:--lsys-switch-focus-ring-width) data-[focused]:ring-(--lsys-switch-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-switch-focus-ring-offset) data-[focused]:ring-offset-(--lsys-switch-focus-ring-offset-color)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "h-(--lsys-switch-height-sm) w-(--lsys-switch-width-sm)",
+        md: "h-(--lsys-switch-height-md) w-(--lsys-switch-width-md)",
+        lg: "h-(--lsys-switch-height-lg) w-(--lsys-switch-width-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const switchThumbVariants = cva(
+  [
+    "block rounded-(--lsys-switch-thumb-radius) bg-(--lsys-switch-thumb-background) shadow-sm ring-0",
+    "transition-transform duration-(--lsys-switch-transition-duration) ease-(--lsys-switch-transition-easing)",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "size-(--lsys-switch-thumb-size-sm) data-[checked]:translate-x-(--lsys-switch-thumb-translate-sm)",
+        md: "size-(--lsys-switch-thumb-size-md) data-[checked]:translate-x-(--lsys-switch-thumb-translate-md)",
+        lg: "size-(--lsys-switch-thumb-size-lg) data-[checked]:translate-x-(--lsys-switch-thumb-translate-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)

package/templates/primitives/Tabs/Tabs.tsx

@@ -0,0 +1,70 @@
+/**
+ * Tabs.tsx
+ *
+ * Reference Tabs component implementation.
+ */
+
+import { Tabs as BaseTabs } from "@base-ui/react/tabs"
+import type {
+  TabsListProps,
+  TabsPanelProps,
+  TabsProps,
+  TabsTabProps,
+} from "./Tabs.types"
+import {
+  tabsListVariants,
+  tabsPanelVariants,
+  tabsRootVariants,
+  tabsTabVariants,
+} from "./Tabs.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Tabs = ({ ref, className, ...props }: TabsProps) => {
+  return (
+    <BaseTabs.Root
+      ref={ref}
+      className={mergeClassName(tabsRootVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+Tabs.displayName = "Tabs"
+
+const TabsList = ({ ref, className, ...props }: TabsListProps) => {
+  return (
+    <BaseTabs.List
+      ref={ref}
+      className={mergeClassName(tabsListVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+TabsList.displayName = "TabsList"
+
+const TabsTab = ({ ref, className, ...props }: TabsTabProps) => {
+  return (
+    <BaseTabs.Tab
+      ref={ref}
+      className={mergeClassName(tabsTabVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+TabsTab.displayName = "TabsTab"
+
+const TabsPanel = ({ ref, className, ...props }: TabsPanelProps) => {
+  return (
+    <BaseTabs.Panel
+      ref={ref}
+      className={mergeClassName(tabsPanelVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+TabsPanel.displayName = "TabsPanel"
+
+export { Tabs, TabsList, TabsTab, TabsPanel }

package/templates/primitives/Tabs/Tabs.types.ts

@@ -0,0 +1,23 @@
+import type { Ref } from "react"
+/**
+ * Tabs.types.ts
+ *
+ * Public and internal types for Tabs component.
+ */
+
+import type { Tabs as BaseTabs } from "@base-ui/react/tabs"
+
+export interface TabsProps extends Omit<BaseTabs.Root.Props, "className"> {
+  ref?: Ref<HTMLDivElement>
+  className?: BaseTabs.Root.Props["className"]
+}
+
+export interface TabsListProps extends Omit<BaseTabs.List.Props, "className"> {
+  className?: BaseTabs.List.Props["className"]
+}
+
+export interface TabsTabProps extends Omit<BaseTabs.Tab.Props, "className"> {
+  className?: BaseTabs.Tab.Props["className"]
+}
+
+export type TabsPanelProps = BaseTabs.Panel.Props

package/templates/primitives/Tabs/Tabs.variants.ts

@@ -0,0 +1,29 @@
+/**
+ * Tabs.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const tabsRootVariants = cva("grid gap-(--lsys-tabs-gap)")
+
+export const tabsListVariants = cva(
+  "inline-flex w-fit items-center rounded-(--lsys-tabs-list-radius) bg-(--lsys-tabs-list-background) p-(--lsys-tabs-list-padding)",
+)
+
+export const tabsTabVariants = cva(
+  [
+    "inline-flex items-center justify-center rounded-(--lsys-tabs-tab-radius) px-(--lsys-tabs-tab-padding-x) py-(--lsys-tabs-tab-padding-y)",
+    "text-(length:--lsys-tabs-tab-font-size) font-(--lsys-tabs-tab-font-weight) leading-(--lsys-tabs-tab-font-line-height) text-(--lsys-tabs-tab-foreground)",
+    "transition-colors duration-(--lsys-tabs-transition-duration) ease-(--lsys-tabs-transition-easing)",
+    "outline-none data-[active]:bg-(--lsys-tabs-tab-active-background) data-[active]:text-(--lsys-tabs-tab-active-foreground) data-[active]:shadow-sm",
+    "focus-visible:ring-(length:--lsys-tabs-focus-ring-width) focus-visible:ring-(--lsys-tabs-focus-ring-color)",
+    disabledStateClasses,
+  ].join(" "),
+)
+
+export const tabsPanelVariants = cva(
+  "text-(length:--lsys-tabs-panel-font-size) leading-(--lsys-tabs-panel-font-line-height) text-(--lsys-tabs-panel-foreground) outline-none focus-visible:ring-(length:--lsys-tabs-focus-ring-width) focus-visible:ring-(--lsys-tabs-focus-ring-color)",
+)

package/templates/primitives/Textarea/Textarea.tsx

@@ -0,0 +1,42 @@
+/**
+ * Textarea.tsx
+ *
+ * Reference Textarea component implementation.
+ */
+
+import { Field as BaseField } from "@base-ui/react/field"
+import type { TextareaProps } from "./Textarea.types"
+import { textareaVariants } from "./Textarea.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Textarea = ({
+  ref,
+  variant,
+  size,
+  resize,
+  rows,
+  className,
+  isInvalid,
+  ...props
+}: TextareaProps) => {
+  const baseTextareaProps: Omit<
+    TextareaProps,
+    "className" | "isInvalid" | "resize" | "rows" | "size" | "variant"
+  > = isInvalid ? { ...props, "aria-invalid": true } : props
+
+  return (
+    <BaseField.Control
+      ref={ref}
+      className={mergeClassName(
+        textareaVariants({ variant, size, resize }),
+        className,
+      )}
+      render={<textarea rows={rows} />}
+      {...baseTextareaProps}
+    />
+  )
+}
+
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/templates/primitives/Textarea/Textarea.types.ts

@@ -0,0 +1,31 @@
+import type { Ref } from "react"
+/**
+ * Textarea.types.ts
+ *
+ * Public and internal types for Textarea component.
+ */
+
+import type { Field as BaseField } from "@base-ui/react/field"
+
+type TextareaAriaInvalid = boolean | "true" | "false" | "grammar" | "spelling"
+type TextareaClassName = BaseField.Control.Props["className"]
+
+export type TextareaVariant = "default" | "ghost"
+
+export type TextareaSize = "sm" | "md" | "lg"
+
+export type TextareaResize = "none" | "vertical" | "both"
+
+export interface TextareaProps extends Omit<
+  BaseField.Control.Props,
+  "aria-invalid" | "className" | "ref" | "render" | "size" | "type"
+> {
+  ref?: Ref<HTMLTextAreaElement>
+  variant?: TextareaVariant
+  size?: TextareaSize
+  resize?: TextareaResize
+  rows?: number
+  isInvalid?: boolean
+  "aria-invalid"?: TextareaAriaInvalid
+  className?: TextareaClassName
+}

package/templates/primitives/Textarea/Textarea.variants.ts

@@ -0,0 +1,46 @@
+/**
+ * Textarea.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const textareaVariants = cva(
+  [
+    "flex w-full min-w-0 border bg-(--lsys-textarea-background) text-(--lsys-textarea-foreground)",
+    "rounded-(--lsys-textarea-radius) border-(--lsys-textarea-border-color)",
+    "font-(family-name:--lsys-textarea-font-family) font-(--lsys-textarea-font-weight) leading-(--lsys-textarea-font-line-height) tracking-(--lsys-textarea-font-letter-spacing)",
+    "placeholder:text-(--lsys-textarea-placeholder-color)",
+    "transition-colors duration-(--lsys-textarea-transition-duration) ease-(--lsys-textarea-transition-easing)",
+    "outline-none focus-visible:border-(--lsys-textarea-focus-border-color) focus-visible:ring-(length:--lsys-textarea-focus-ring-width) focus-visible:ring-(--lsys-textarea-focus-ring-color) focus-visible:ring-offset-(length:--lsys-textarea-focus-ring-offset) focus-visible:ring-offset-(--lsys-textarea-focus-ring-offset-color)",
+    "disabled:cursor-not-allowed",
+    disabledStateClasses,
+    "aria-invalid:border-(--lsys-textarea-invalid-border-color) aria-invalid:ring-(--lsys-textarea-invalid-ring-color) data-[invalid]:border-(--lsys-textarea-invalid-border-color) data-[invalid]:ring-(--lsys-textarea-invalid-ring-color)",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "",
+        ghost:
+          "border-transparent bg-transparent focus-visible:bg-(--lsys-textarea-background)",
+      },
+      size: {
+        sm: "min-h-(--lsys-textarea-min-height-sm) px-(--lsys-textarea-padding-x-sm) py-(--lsys-textarea-padding-y-sm) text-(length:--lsys-textarea-font-size-sm)",
+        md: "min-h-(--lsys-textarea-min-height-md) px-(--lsys-textarea-padding-x-md) py-(--lsys-textarea-padding-y-md) text-(length:--lsys-textarea-font-size-md)",
+        lg: "min-h-(--lsys-textarea-min-height-lg) px-(--lsys-textarea-padding-x-lg) py-(--lsys-textarea-padding-y-lg) text-(length:--lsys-textarea-font-size-lg)",
+      },
+      resize: {
+        none: "resize-none",
+        vertical: "resize-y",
+        both: "resize",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      resize: "vertical",
+    },
+  },
+)

package/templates/primitives/Toast/Toast.tsx

@@ -0,0 +1,195 @@
+/**
+ * Toast.tsx
+ *
+ * Reference Toast component implementation.
+ */
+
+import { X } from "lucide-react"
+import { Toast as BaseToast } from "@base-ui/react/toast"
+import type {
+  ToastActionProps,
+  ToastArrowProps,
+  ToastCloseProps,
+  ToastContentProps,
+  ToastDescriptionProps,
+  ToastPortalProps,
+  ToastPositionerProps,
+  ToastProps,
+  ToastProviderProps,
+  ToastTitleProps,
+  ToastViewportProps,
+} from "./Toast.types"
+import {
+  toastActionVariants,
+  toastArrowVariants,
+  toastCloseVariants,
+  toastContentVariants,
+  toastDescriptionVariants,
+  toastPositionerVariants,
+  toastTitleVariants,
+  toastVariants,
+  toastViewportVariants,
+} from "./Toast.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const ToastProvider = (props: ToastProviderProps) => {
+  return <BaseToast.Provider {...props} />
+}
+
+ToastProvider.displayName = "ToastProvider"
+
+const ToastPortal = ({ ref, ...props }: ToastPortalProps) => {
+  return <BaseToast.Portal ref={ref} {...props} />
+}
+
+ToastPortal.displayName = "ToastPortal"
+
+const ToastViewport = ({
+  ref,
+  placement,
+  className,
+  ...props
+}: ToastViewportProps) => {
+  return (
+    <BaseToast.Viewport
+      ref={ref}
+      className={mergeClassName(
+        toastViewportVariants({ placement }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+ToastViewport.displayName = "ToastViewport"
+
+const Toast = ({ ref, className, ...props }: ToastProps) => {
+  return (
+    <BaseToast.Root
+      ref={ref}
+      className={mergeClassName(toastVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+Toast.displayName = "Toast"
+
+const ToastPositioner = ({
+  ref,
+  className,
+  ...props
+}: ToastPositionerProps) => {
+  return (
+    <BaseToast.Positioner
+      ref={ref}
+      className={mergeClassName(toastPositionerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ToastPositioner.displayName = "ToastPositioner"
+
+const ToastContent = ({ ref, className, ...props }: ToastContentProps) => {
+  return (
+    <BaseToast.Content
+      ref={ref}
+      className={mergeClassName(toastContentVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ToastContent.displayName = "ToastContent"
+
+const ToastArrow = ({ ref, className, ...props }: ToastArrowProps) => {
+  return (
+    <BaseToast.Arrow
+      ref={ref}
+      className={mergeClassName(toastArrowVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ToastArrow.displayName = "ToastArrow"
+
+const ToastTitle = ({ ref, className, ...props }: ToastTitleProps) => {
+  return (
+    <BaseToast.Title
+      ref={ref}
+      className={mergeClassName(toastTitleVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ToastTitle.displayName = "ToastTitle"
+
+const ToastDescription = ({
+  ref,
+  className,
+  ...props
+}: ToastDescriptionProps) => {
+  return (
+    <BaseToast.Description
+      ref={ref}
+      className={mergeClassName(toastDescriptionVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ToastDescription.displayName = "ToastDescription"
+
+const ToastAction = ({ ref, className, ...props }: ToastActionProps) => {
+  return (
+    <BaseToast.Action
+      ref={ref}
+      className={mergeClassName(toastActionVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ToastAction.displayName = "ToastAction"
+
+const ToastClose = ({
+  ref,
+  className,
+  children,
+  ...props
+}: ToastCloseProps) => {
+  return (
+    <BaseToast.Close
+      ref={ref}
+      className={mergeClassName(toastCloseVariants(), className)}
+      {...props}
+    >
+      {children ?? <X aria-hidden="true" size={16} />}
+    </BaseToast.Close>
+  )
+}
+
+ToastClose.displayName = "ToastClose"
+
+const useToastManager = BaseToast.useToastManager
+const createToastManager = BaseToast.createToastManager
+
+export {
+  ToastProvider,
+  ToastPortal,
+  ToastViewport,
+  Toast,
+  ToastPositioner,
+  ToastContent,
+  ToastArrow,
+  ToastTitle,
+  ToastDescription,
+  ToastAction,
+  ToastClose,
+  useToastManager,
+  createToastManager,
+}