@dalexto/lexsys-registry 0.0.2

package/templates/primitives/PreviewCard/PreviewCard.types.ts

@@ -0,0 +1,42 @@
+import type { Ref } from "react"
+/**
+ * PreviewCard.types.ts
+ *
+ * Public and internal types for PreviewCard component.
+ */
+
+import type { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card"
+
+export type PreviewCardProps<Payload = unknown> =
+  BasePreviewCard.Root.Props<Payload>
+
+export type PreviewCardTriggerProps<Payload = unknown> =
+  BasePreviewCard.Trigger.Props<Payload> & {
+    ref?: Ref<HTMLElement>
+  }
+
+export type PreviewCardPortalProps = BasePreviewCard.Portal.Props
+
+export type PreviewCardPositionerProps = BasePreviewCard.Positioner.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type PreviewCardPopupProps = BasePreviewCard.Popup.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type PreviewCardArrowProps = BasePreviewCard.Arrow.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type PreviewCardBackdropProps = BasePreviewCard.Backdrop.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type PreviewCardViewportProps = BasePreviewCard.Viewport.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type PreviewCardHandle<Payload = unknown> = ReturnType<
+  typeof BasePreviewCard.createHandle<Payload>
+>

package/templates/primitives/PreviewCard/PreviewCard.variants.ts

@@ -0,0 +1,24 @@
+/**
+ * PreviewCard.variants.ts
+ *
+ * Reuses Popover token-backed classes for preview card surfaces.
+ */
+
+import { cva } from "class-variance-authority"
+import {
+  popoverArrowVariants,
+  popoverBackdropVariants,
+  popoverPopupVariants,
+  popoverPositionerVariants,
+  popoverViewportVariants,
+} from "../Popover/Popover.variants"
+
+export const previewCardBackdropVariants = popoverBackdropVariants
+export const previewCardPositionerVariants = popoverPositionerVariants
+export const previewCardPopupVariants = popoverPopupVariants
+export const previewCardArrowVariants = popoverArrowVariants
+export const previewCardViewportVariants = popoverViewportVariants
+
+export const previewCardTriggerVariants = cva(
+  "inline-flex outline-none focus-visible:ring-(length:--lsys-popover-focus-ring-width) focus-visible:ring-(--lsys-popover-focus-ring-color)",
+)

package/templates/primitives/Progress/Progress.tsx

@@ -0,0 +1,95 @@
+/**
+ * Progress.tsx
+ *
+ * Reference Progress component implementation.
+ */
+
+import { Progress as BaseProgress } from "@base-ui/react/progress"
+import type {
+  ProgressIndicatorProps,
+  ProgressLabelProps,
+  ProgressProps,
+  ProgressTrackProps,
+  ProgressValueProps,
+} from "./Progress.types"
+import {
+  progressIndicatorVariants,
+  progressLabelVariants,
+  progressTrackVariants,
+  progressValueVariants,
+  progressVariants,
+} from "./Progress.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Progress = ({ ref, className, children, ...props }: ProgressProps) => {
+  return (
+    <BaseProgress.Root
+      ref={ref}
+      className={mergeClassName(progressVariants(), className)}
+      {...props}
+    >
+      {children}
+    </BaseProgress.Root>
+  )
+}
+
+Progress.displayName = "Progress"
+
+const ProgressLabel = ({ className, ...props }: ProgressLabelProps) => {
+  return (
+    <BaseProgress.Label
+      className={mergeClassName(progressLabelVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ProgressLabel.displayName = "ProgressLabel"
+
+const ProgressTrack = ({
+  size = "md",
+  className,
+  children,
+  ...props
+}: ProgressTrackProps) => {
+  return (
+    <BaseProgress.Track
+      className={mergeClassName(progressTrackVariants({ size }), className)}
+      {...props}
+    >
+      {children}
+    </BaseProgress.Track>
+  )
+}
+
+ProgressTrack.displayName = "ProgressTrack"
+
+const ProgressIndicator = ({ className, ...props }: ProgressIndicatorProps) => {
+  return (
+    <BaseProgress.Indicator
+      className={mergeClassName(progressIndicatorVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ProgressIndicator.displayName = "ProgressIndicator"
+
+const ProgressValue = ({ className, ...props }: ProgressValueProps) => {
+  return (
+    <BaseProgress.Value
+      className={mergeClassName(progressValueVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ProgressValue.displayName = "ProgressValue"
+
+export {
+  Progress,
+  ProgressLabel,
+  ProgressTrack,
+  ProgressIndicator,
+  ProgressValue,
+}

package/templates/primitives/Progress/Progress.types.ts

@@ -0,0 +1,39 @@
+import type { Ref } from "react"
+/**
+ * Progress.types.ts
+ *
+ * Public and internal types for Progress component.
+ */
+
+import type { Progress as BaseProgress } from "@base-ui/react/progress"
+
+export type ProgressSize = "sm" | "md" | "lg"
+
+export interface ProgressProps extends Omit<
+  BaseProgress.Root.Props,
+  "className" | "children"
+> {
+  ref?: Ref<HTMLDivElement>
+  className?: BaseProgress.Root.Props["className"]
+  children?: BaseProgress.Root.Props["children"]
+}
+
+export interface ProgressTrackProps extends Omit<
+  BaseProgress.Track.Props,
+  "className" | "children"
+> {
+  size?: ProgressSize
+  className?: BaseProgress.Track.Props["className"]
+  children?: BaseProgress.Track.Props["children"]
+}
+
+export interface ProgressIndicatorProps extends Omit<
+  BaseProgress.Indicator.Props,
+  "className"
+> {
+  className?: BaseProgress.Indicator.Props["className"]
+}
+
+export type ProgressLabelProps = BaseProgress.Label.Props
+
+export type ProgressValueProps = BaseProgress.Value.Props

package/templates/primitives/Progress/Progress.variants.ts

@@ -0,0 +1,39 @@
+/**
+ * Progress.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const progressVariants = cva(
+  "grid gap-(--lsys-progress-gap) text-(length:--lsys-progress-label-font-size) leading-(--lsys-progress-label-font-line-height) text-(--lsys-progress-label-foreground)",
+)
+
+export const progressTrackVariants = cva(
+  "overflow-hidden rounded-(--lsys-progress-track-radius) bg-(--lsys-progress-track-background)",
+  {
+    variants: {
+      size: {
+        sm: "h-(--lsys-progress-track-height-sm)",
+        md: "h-(--lsys-progress-track-height-md)",
+        lg: "h-(--lsys-progress-track-height-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const progressIndicatorVariants = cva(
+  "h-full bg-(--lsys-progress-indicator-background) transition-transform duration-(--lsys-progress-transition-duration) ease-(--lsys-progress-transition-easing) data-[indeterminate]:animate-pulse",
+)
+
+export const progressLabelVariants = cva(
+  "text-(--lsys-progress-label-foreground)",
+)
+
+export const progressValueVariants = cva(
+  "font-(--lsys-meter-value-font-weight) text-(--lsys-meter-value-foreground)",
+)

package/templates/primitives/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,66 @@
+/**
+ * RadioGroup.tsx
+ *
+ * Reference RadioGroup component implementation.
+ */
+
+import { Radio } from "@base-ui/react/radio"
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group"
+import type { RadioGroupItemProps, RadioGroupProps } from "./RadioGroup.types"
+import {
+  radioGroupItemVariants,
+  radioGroupIndicatorVariants,
+  radioGroupLabelVariants,
+  radioGroupVariants,
+} from "./RadioGroup.variants"
+import { cn } from "@/lib/utils"
+import { mergeClassName } from "@/lib/utils"
+
+const RadioGroup = ({
+  ref,
+  orientation = "vertical",
+  className,
+  ...props
+}: RadioGroupProps) => {
+  return (
+    <BaseRadioGroup
+      ref={ref}
+      className={mergeClassName(radioGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+RadioGroup.displayName = "RadioGroup"
+
+const RadioGroupItem = ({
+  ref,
+  size,
+  className,
+  indicatorClassName,
+  labelClassName,
+  children,
+  ...props
+}: RadioGroupItemProps) => {
+  return (
+    <label className={cn(radioGroupLabelVariants(), labelClassName)}>
+      <Radio.Root
+        ref={ref}
+        className={mergeClassName(radioGroupItemVariants({ size }), className)}
+        {...props}
+      >
+        <Radio.Indicator
+          className={mergeClassName(
+            radioGroupIndicatorVariants({ size }),
+            indicatorClassName,
+          )}
+        />
+      </Radio.Root>
+      {children === undefined ? null : <span>{children}</span>}
+    </label>
+  )
+}
+
+RadioGroupItem.displayName = "RadioGroupItem"
+
+export { RadioGroup, RadioGroupItem }

package/templates/primitives/RadioGroup/RadioGroup.types.ts

@@ -0,0 +1,34 @@
+import type { Ref } from "react"
+/**
+ * RadioGroup.types.ts
+ *
+ * Public and internal types for RadioGroup component.
+ */
+
+import type { ReactNode } from "react"
+import type { Radio as BaseRadio } from "@base-ui/react/radio"
+import type { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group"
+
+export type RadioGroupOrientation = "horizontal" | "vertical"
+
+export type RadioGroupItemSize = "sm" | "md" | "lg"
+
+export interface RadioGroupProps<Value = string> extends Omit<
+  BaseRadioGroup.Props<Value>,
+  "className"
+> {
+  ref?: Ref<HTMLDivElement>
+  orientation?: RadioGroupOrientation
+  className?: BaseRadioGroup.Props<Value>["className"]
+}
+
+export interface RadioGroupItemProps<Value = string> extends Omit<
+  BaseRadio.Root.Props<Value>,
+  "className" | "children"
+> {
+  size?: RadioGroupItemSize
+  children?: ReactNode
+  className?: BaseRadio.Root.Props<Value>["className"]
+  indicatorClassName?: BaseRadio.Indicator.Props["className"]
+  labelClassName?: string
+}

package/templates/primitives/RadioGroup/RadioGroup.variants.ts

@@ -0,0 +1,59 @@
+/**
+ * RadioGroup.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const radioGroupVariants = cva("grid gap-(--lsys-radio-group-gap)", {
+  variants: {
+    orientation: {
+      horizontal: "grid-flow-col justify-start",
+      vertical: "grid-flow-row",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+export const radioGroupItemVariants = cva(
+  [
+    "inline-flex shrink-0 items-center justify-center rounded-(--lsys-radio-group-item-radius) border",
+    "border-(--lsys-radio-group-item-border-color) bg-(--lsys-radio-group-item-background) text-(--lsys-radio-group-item-foreground)",
+    "transition-colors duration-(--lsys-radio-group-transition-duration) ease-(--lsys-radio-group-transition-easing)",
+    "outline-none data-[checked]:border-(--lsys-radio-group-item-checked-border-color)",
+    "data-[focused]:ring-(length:--lsys-radio-group-focus-ring-width) data-[focused]:ring-(--lsys-radio-group-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-radio-group-focus-ring-offset) data-[focused]:ring-offset-(--lsys-radio-group-focus-ring-offset-color)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "size-(--lsys-radio-group-item-size-sm)",
+        md: "size-(--lsys-radio-group-item-size-md)",
+        lg: "size-(--lsys-radio-group-item-size-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const radioGroupLabelVariants = cva(
+  "inline-flex items-center gap-(--lsys-radio-group-label-gap) text-(length:--lsys-radio-group-label-font-size) font-(--lsys-radio-group-label-font-weight) leading-(--lsys-radio-group-label-font-line-height) text-(--lsys-radio-group-label-foreground)",
+)
+
+export const radioGroupIndicatorVariants = cva("rounded-full bg-current", {
+  variants: {
+    size: {
+      sm: "size-(--lsys-radio-group-indicator-size-sm)",
+      md: "size-(--lsys-radio-group-indicator-size-md)",
+      lg: "size-(--lsys-radio-group-indicator-size-lg)",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+})

package/templates/primitives/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,135 @@
+/**
+ * ScrollArea.tsx
+ *
+ * Reference ScrollArea component implementation.
+ */
+
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area"
+import type {
+  ScrollAreaContentProps,
+  ScrollAreaCornerProps,
+  ScrollAreaProps,
+  ScrollAreaScrollbarProps,
+  ScrollAreaThumbProps,
+  ScrollAreaViewportProps,
+} from "./ScrollArea.types"
+import {
+  scrollAreaContentVariants,
+  scrollAreaCornerVariants,
+  scrollAreaRootVariants,
+  scrollAreaScrollbarVariants,
+  scrollAreaThumbVariants,
+  scrollAreaViewportVariants,
+} from "./ScrollArea.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const ScrollArea = ({ ref, className, ...props }: ScrollAreaProps) => {
+  return (
+    <BaseScrollArea.Root
+      ref={ref}
+      className={mergeClassName(scrollAreaRootVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ScrollArea.displayName = "ScrollArea"
+
+const ScrollAreaViewport = ({
+  ref,
+  className,
+  ...props
+}: ScrollAreaViewportProps) => {
+  return (
+    <BaseScrollArea.Viewport
+      ref={ref}
+      className={mergeClassName(scrollAreaViewportVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ScrollAreaViewport.displayName = "ScrollAreaViewport"
+
+const ScrollAreaContent = ({
+  ref,
+  className,
+  ...props
+}: ScrollAreaContentProps) => {
+  return (
+    <BaseScrollArea.Content
+      ref={ref}
+      className={mergeClassName(scrollAreaContentVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ScrollAreaContent.displayName = "ScrollAreaContent"
+
+const ScrollAreaScrollbar = ({
+  ref,
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaScrollbarProps) => {
+  return (
+    <BaseScrollArea.Scrollbar
+      ref={ref}
+      orientation={orientation}
+      className={mergeClassName(
+        scrollAreaScrollbarVariants({ orientation }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar"
+
+const ScrollBar = ScrollAreaScrollbar
+
+ScrollBar.displayName = "ScrollBar"
+
+const ScrollAreaThumb = ({
+  ref,
+  className,
+  ...props
+}: ScrollAreaThumbProps) => {
+  return (
+    <BaseScrollArea.Thumb
+      ref={ref}
+      className={mergeClassName(scrollAreaThumbVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ScrollAreaThumb.displayName = "ScrollAreaThumb"
+
+const ScrollAreaCorner = ({
+  ref,
+  className,
+  ...props
+}: ScrollAreaCornerProps) => {
+  return (
+    <BaseScrollArea.Corner
+      ref={ref}
+      className={mergeClassName(scrollAreaCornerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ScrollAreaCorner.displayName = "ScrollAreaCorner"
+
+export {
+  ScrollArea,
+  ScrollAreaViewport,
+  ScrollAreaContent,
+  ScrollAreaScrollbar,
+  ScrollBar,
+  ScrollAreaThumb,
+  ScrollAreaCorner,
+}

package/templates/primitives/ScrollArea/ScrollArea.types.ts

@@ -0,0 +1,34 @@
+import type { Ref } from "react"
+/**
+ * ScrollArea.types.ts
+ *
+ * Public and internal types for ScrollArea component.
+ */
+
+import type { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area"
+
+export type ScrollAreaProps = BaseScrollArea.Root.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type ScrollAreaViewportProps = BaseScrollArea.Viewport.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type ScrollAreaContentProps = BaseScrollArea.Content.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type ScrollAreaScrollbarProps = BaseScrollArea.Scrollbar.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type ScrollBarProps = ScrollAreaScrollbarProps
+
+export type ScrollAreaThumbProps = BaseScrollArea.Thumb.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type ScrollAreaCornerProps = BaseScrollArea.Corner.Props & {
+  ref?: Ref<HTMLDivElement>
+}

package/templates/primitives/ScrollArea/ScrollArea.variants.ts

@@ -0,0 +1,38 @@
+/**
+ * ScrollArea.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const scrollAreaRootVariants = cva("relative overflow-hidden")
+
+export const scrollAreaViewportVariants = cva(
+  "size-full rounded-[inherit] outline-none",
+)
+
+export const scrollAreaContentVariants = cva("")
+
+export const scrollAreaScrollbarVariants = cva(
+  "flex touch-none select-none transition-colors",
+  {
+    variants: {
+      orientation: {
+        vertical:
+          "h-full w-(--lsys-scroll-area-scrollbar-size) border-l border-l-transparent p-(--lsys-scroll-area-scrollbar-padding)",
+        horizontal:
+          "h-(--lsys-scroll-area-scrollbar-size) flex-col border-t border-t-transparent p-(--lsys-scroll-area-scrollbar-padding)",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+)
+
+export const scrollAreaThumbVariants = cva(
+  "relative flex-1 rounded-(--lsys-scroll-area-thumb-radius) bg-(--lsys-scroll-area-thumb-background)",
+)
+
+export const scrollAreaCornerVariants = cva("bg-transparent")