@dalexto/lexsys-registry 0.0.2

package/templates/primitives/Input/Input.variants.ts

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

package/templates/primitives/Menu/Menu.tsx

@@ -0,0 +1,352 @@
+/**
+ * Menu.tsx
+ *
+ * Reference Menu component implementation.
+ */
+
+import { Check, ChevronRight } from "lucide-react"
+import { Menu as BaseMenu } from "@base-ui/react/menu"
+import type {
+  MenuArrowProps,
+  MenuBackdropProps,
+  MenuCheckboxItemIndicatorProps,
+  MenuCheckboxItemProps,
+  MenuGroupLabelProps,
+  MenuGroupProps,
+  MenuItemProps,
+  MenuLinkItemProps,
+  MenuPopupProps,
+  MenuPortalProps,
+  MenuPositionerProps,
+  MenuProps,
+  MenuRadioGroupProps,
+  MenuRadioItemIndicatorProps,
+  MenuRadioItemProps,
+  MenuSeparatorProps,
+  MenuSubmenuRootProps,
+  MenuSubmenuTriggerProps,
+  MenuTriggerProps,
+  MenuViewportProps,
+} from "./Menu.types"
+import {
+  menuArrowVariants,
+  menuBackdropVariants,
+  menuGroupLabelVariants,
+  menuGroupVariants,
+  menuItemIndicatorVariants,
+  menuItemTextVariants,
+  menuItemVariants,
+  menuPopupVariants,
+  menuPositionerVariants,
+  menuSeparatorVariants,
+  menuSubmenuTriggerIconVariants,
+  menuTriggerVariants,
+  menuViewportVariants,
+} from "./Menu.variants"
+import { mergeClassName } from "@/lib/utils"
+import { overlayPositionerSideOffset } from "@/lib/utils"
+
+const horizontalMenuSides = new Set<NonNullable<MenuPositionerProps["side"]>>([
+  "left",
+  "right",
+  "inline-start",
+  "inline-end",
+])
+
+const popupCollisionAvoidance = {
+  fallbackAxisSide: "end",
+} as const
+
+const Menu = <Payload = unknown,>(props: MenuProps<Payload>) => {
+  return <BaseMenu.Root {...props} />
+}
+
+Menu.displayName = "Menu"
+
+const MenuTrigger = ({ ref, className, ...props }: MenuTriggerProps) => {
+  return (
+    <BaseMenu.Trigger
+      ref={ref}
+      className={mergeClassName(menuTriggerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MenuTrigger.displayName = "MenuTrigger"
+
+const MenuPortal = (props: MenuPortalProps) => {
+  return <BaseMenu.Portal {...props} />
+}
+
+MenuPortal.displayName = "MenuPortal"
+
+const MenuBackdrop = ({ ref, className, ...props }: MenuBackdropProps) => {
+  return (
+    <BaseMenu.Backdrop
+      ref={ref}
+      className={mergeClassName(menuBackdropVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MenuBackdrop.displayName = "MenuBackdrop"
+
+const MenuPositioner = ({
+  ref,
+  className,
+  sideOffset = overlayPositionerSideOffset,
+  side,
+  collisionAvoidance,
+  ...props
+}: MenuPositionerProps) => {
+  const resolvedCollisionAvoidance =
+    collisionAvoidance ??
+    (side && horizontalMenuSides.has(side)
+      ? popupCollisionAvoidance
+      : undefined)
+
+  return (
+    <BaseMenu.Positioner
+      ref={ref}
+      sideOffset={sideOffset}
+      side={side}
+      collisionAvoidance={resolvedCollisionAvoidance}
+      className={mergeClassName(menuPositionerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MenuPositioner.displayName = "MenuPositioner"
+
+const MenuPopup = ({ ref, className, ...props }: MenuPopupProps) => {
+  return (
+    <BaseMenu.Popup
+      ref={ref}
+      className={mergeClassName(menuPopupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MenuPopup.displayName = "MenuPopup"
+
+const MenuArrow = ({ ref, className, ...props }: MenuArrowProps) => {
+  return (
+    <BaseMenu.Arrow
+      ref={ref}
+      className={mergeClassName(menuArrowVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MenuArrow.displayName = "MenuArrow"
+
+const MenuViewport = ({ ref, className, ...props }: MenuViewportProps) => {
+  return (
+    <BaseMenu.Viewport
+      ref={ref}
+      className={mergeClassName(menuViewportVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MenuViewport.displayName = "MenuViewport"
+
+const MenuItem = ({ ref, className, ...props }: MenuItemProps) => {
+  return (
+    <BaseMenu.Item
+      ref={ref}
+      className={mergeClassName(menuItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MenuItem.displayName = "MenuItem"
+
+const MenuLinkItem = ({ ref, className, ...props }: MenuLinkItemProps) => {
+  return (
+    <BaseMenu.LinkItem
+      ref={ref}
+      className={mergeClassName(menuItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MenuLinkItem.displayName = "MenuLinkItem"
+
+const MenuCheckboxItem = ({
+  ref,
+  className,
+  ...props
+}: MenuCheckboxItemProps) => {
+  return (
+    <BaseMenu.CheckboxItem
+      ref={ref}
+      className={mergeClassName(menuItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MenuCheckboxItem.displayName = "MenuCheckboxItem"
+
+const MenuCheckboxItemIndicator = ({
+  ref,
+  className,
+  children,
+  ...props
+}: MenuCheckboxItemIndicatorProps) => {
+  return (
+    <BaseMenu.CheckboxItemIndicator
+      ref={ref}
+      className={mergeClassName(menuItemIndicatorVariants(), className)}
+      {...props}
+    >
+      {children ?? <Check aria-hidden="true" size={14} />}
+    </BaseMenu.CheckboxItemIndicator>
+  )
+}
+
+MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator"
+
+const MenuRadioGroup = ({ ref, className, ...props }: MenuRadioGroupProps) => {
+  return (
+    <BaseMenu.RadioGroup
+      ref={ref}
+      className={mergeClassName(menuGroupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MenuRadioGroup.displayName = "MenuRadioGroup"
+
+const MenuRadioItem = ({ ref, className, ...props }: MenuRadioItemProps) => {
+  return (
+    <BaseMenu.RadioItem
+      ref={ref}
+      className={mergeClassName(menuItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MenuRadioItem.displayName = "MenuRadioItem"
+
+const MenuRadioItemIndicator = ({
+  ref,
+  className,
+  children,
+  ...props
+}: MenuRadioItemIndicatorProps) => {
+  return (
+    <BaseMenu.RadioItemIndicator
+      ref={ref}
+      className={mergeClassName(menuItemIndicatorVariants(), className)}
+      {...props}
+    >
+      {children ?? <Check aria-hidden="true" size={14} />}
+    </BaseMenu.RadioItemIndicator>
+  )
+}
+
+MenuRadioItemIndicator.displayName = "MenuRadioItemIndicator"
+
+const MenuGroup = ({ ref, className, ...props }: MenuGroupProps) => {
+  return (
+    <BaseMenu.Group
+      ref={ref}
+      className={mergeClassName(menuGroupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MenuGroup.displayName = "MenuGroup"
+
+const MenuGroupLabel = ({ ref, className, ...props }: MenuGroupLabelProps) => {
+  return (
+    <BaseMenu.GroupLabel
+      ref={ref}
+      className={mergeClassName(menuGroupLabelVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MenuGroupLabel.displayName = "MenuGroupLabel"
+
+const MenuSeparator = ({ ref, className, ...props }: MenuSeparatorProps) => {
+  return (
+    <BaseMenu.Separator
+      ref={ref}
+      className={mergeClassName(menuSeparatorVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MenuSeparator.displayName = "MenuSeparator"
+
+const MenuSubmenuRoot = (props: MenuSubmenuRootProps) => {
+  return <BaseMenu.SubmenuRoot {...props} />
+}
+
+MenuSubmenuRoot.displayName = "MenuSubmenuRoot"
+
+const MenuSubmenuTrigger = ({
+  ref,
+  className,
+  children,
+  ...props
+}: MenuSubmenuTriggerProps) => {
+  return (
+    <BaseMenu.SubmenuTrigger
+      ref={ref}
+      className={mergeClassName(menuTriggerVariants(), className)}
+      {...props}
+    >
+      <span className={menuItemTextVariants()}>{children}</span>
+      <span className={menuSubmenuTriggerIconVariants()}>
+        <ChevronRight aria-hidden="true" size={14} />
+      </span>
+    </BaseMenu.SubmenuTrigger>
+  )
+}
+
+MenuSubmenuTrigger.displayName = "MenuSubmenuTrigger"
+
+const createMenuHandle = BaseMenu.createHandle
+
+export {
+  Menu,
+  MenuTrigger,
+  MenuPortal,
+  MenuBackdrop,
+  MenuPositioner,
+  MenuPopup,
+  MenuArrow,
+  MenuViewport,
+  MenuItem,
+  MenuLinkItem,
+  MenuCheckboxItem,
+  MenuCheckboxItemIndicator,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuRadioItemIndicator,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuSeparator,
+  MenuSubmenuRoot,
+  MenuSubmenuTrigger,
+  createMenuHandle,
+}
+
+export type { MenuHandle } from "./Menu.types"

package/templates/primitives/Menu/Menu.types.ts

@@ -0,0 +1,56 @@
+import type { Ref } from "react"
+/**
+ * Menu.types.ts
+ *
+ * Public and internal types for Menu component.
+ */
+
+import type { Menu as BaseMenu } from "@base-ui/react/menu"
+
+export type MenuProps<Payload = unknown> = BaseMenu.Root.Props<Payload>
+
+export type MenuHandle<Payload = unknown> = BaseMenu.Handle<Payload>
+
+export type MenuTriggerProps<Payload = unknown> =
+  BaseMenu.Trigger.Props<Payload> & {
+    ref?: Ref<HTMLButtonElement>
+  }
+
+export type MenuPortalProps = BaseMenu.Portal.Props
+
+export type MenuBackdropProps = BaseMenu.Backdrop.Props
+
+export type MenuPositionerProps = BaseMenu.Positioner.Props
+
+export type MenuPopupProps = BaseMenu.Popup.Props
+
+export type MenuArrowProps = BaseMenu.Arrow.Props
+
+export type MenuViewportProps = BaseMenu.Viewport.Props
+
+export interface MenuItemProps extends Omit<BaseMenu.Item.Props, "className"> {
+  className?: BaseMenu.Item.Props["className"]
+}
+
+export type MenuLinkItemProps = BaseMenu.LinkItem.Props
+
+export type MenuCheckboxItemProps = BaseMenu.CheckboxItem.Props
+
+export type MenuCheckboxItemIndicatorProps =
+  BaseMenu.CheckboxItemIndicator.Props
+
+export type MenuRadioGroupProps = BaseMenu.RadioGroup.Props
+
+export type MenuRadioItemProps = BaseMenu.RadioItem.Props
+
+export type MenuRadioItemIndicatorProps = BaseMenu.RadioItemIndicator.Props
+
+export type MenuGroupProps = BaseMenu.Group.Props
+
+export type MenuGroupLabelProps = BaseMenu.GroupLabel.Props
+
+export type MenuSeparatorProps = BaseMenu.Separator.Props
+
+export type MenuSubmenuRootProps = BaseMenu.SubmenuRoot.Props
+
+export type MenuSubmenuTriggerProps = BaseMenu.SubmenuTrigger.Props

package/templates/primitives/Menu/Menu.variants.ts

@@ -0,0 +1,73 @@
+/**
+ * Menu.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const menuTriggerVariants = cva(
+  [
+    "inline-flex min-w-0 items-center justify-center gap-(--lsys-menu-trigger-gap) rounded-(--lsys-menu-trigger-radius) border",
+    "h-(--lsys-menu-trigger-height) border-(--lsys-menu-trigger-border-color) bg-(--lsys-menu-trigger-background) px-(--lsys-menu-trigger-padding-x)",
+    "text-(length:--lsys-menu-trigger-font-size) font-(--lsys-menu-trigger-font-weight) leading-(--lsys-menu-trigger-font-line-height) text-(--lsys-menu-trigger-foreground)",
+    "transition-colors duration-(--lsys-menu-transition-duration) ease-(--lsys-menu-transition-easing)",
+    "outline-none data-[popup-open]:border-(--lsys-menu-trigger-open-border-color) data-[popup-open]:bg-(--lsys-menu-trigger-open-background)",
+    "data-[focused]:border-(--lsys-menu-focus-border-color) data-[focused]:ring-(length:--lsys-menu-focus-ring-width) data-[focused]:ring-(--lsys-menu-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-menu-focus-ring-offset) data-[focused]:ring-offset-(--lsys-menu-focus-ring-offset-color)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+)
+
+export const menuBackdropVariants = cva(
+  "fixed inset-0 z-(--lsys-menu-backdrop-z-index) bg-(--lsys-menu-backdrop-background) opacity-(--lsys-menu-backdrop-opacity) data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+)
+
+export const menuPositionerVariants = cva("z-(--lsys-menu-positioner-z-index)")
+
+export const menuPopupVariants = cva(
+  [
+    "min-w-[var(--anchor-width)] max-w-(--lsys-menu-popup-max-width) rounded-(--lsys-menu-radius) border",
+    "border-(--lsys-menu-popup-border-color) bg-(--lsys-menu-popup-background) text-(--lsys-menu-popup-foreground) shadow-(--lsys-menu-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-menu-transition-duration) ease-(--lsys-menu-transition-easing)",
+  ].join(" "),
+)
+
+export const menuViewportVariants = cva(
+  "grid max-h-(--lsys-menu-viewport-max-height) gap-(--lsys-menu-list-gap) overflow-y-auto p-(--lsys-menu-list-padding)",
+)
+
+export const menuItemVariants = cva(
+  [
+    "relative flex min-w-0 cursor-default select-none items-center gap-(--lsys-menu-item-gap) rounded-(--lsys-menu-item-radius)",
+    "px-(--lsys-menu-item-padding-x) py-(--lsys-menu-item-padding-y) text-(length:--lsys-menu-item-font-size) font-(--lsys-menu-item-font-weight) leading-(--lsys-menu-item-font-line-height)",
+    "text-(--lsys-menu-item-foreground) outline-none",
+    "data-[highlighted]:bg-(--lsys-menu-item-highlight-background) data-[highlighted]:text-(--lsys-menu-item-highlight-foreground)",
+    "data-[checked]:bg-(--lsys-menu-item-checked-background) data-[checked]:text-(--lsys-menu-item-checked-foreground)",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+)
+
+export const menuItemTextVariants = cva("min-w-0 flex-1 truncate")
+
+export const menuItemIndicatorVariants = cva(
+  "inline-flex size-(--lsys-menu-item-indicator-size) shrink-0 items-center justify-center text-current",
+)
+
+export const menuSubmenuTriggerIconVariants = cva(
+  "ml-auto inline-flex size-(--lsys-menu-submenu-icon-size) shrink-0 items-center justify-center text-current",
+)
+
+export const menuArrowVariants = cva(
+  "size-(--lsys-menu-arrow-size) rotate-45 border border-(--lsys-menu-popup-border-color) bg-(--lsys-menu-popup-background)",
+)
+
+export const menuGroupVariants = cva("grid gap-(--lsys-menu-group-gap)")
+
+export const menuGroupLabelVariants = cva(
+  "px-(--lsys-menu-item-padding-x) py-(--lsys-menu-group-label-padding-y) text-(length:--lsys-menu-group-label-font-size) font-(--lsys-menu-group-label-font-weight) leading-(--lsys-menu-group-label-font-line-height) text-(--lsys-menu-group-label-foreground)",
+)
+
+export const menuSeparatorVariants = cva(
+  "my-(--lsys-menu-separator-margin-y) h-px bg-(--lsys-menu-separator-background)",
+)

package/templates/primitives/Menubar/Menubar.tsx

@@ -0,0 +1,25 @@
+/**
+ * Menubar.tsx
+ *
+ * Reference Menubar component implementation.
+ */
+
+import { Menubar as BaseMenubar } from "@base-ui/react/menubar"
+import type { MenubarProps } from "./Menubar.types"
+import { menubarVariants } from "./Menubar.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Menubar = ({ ref, className, orientation, ...props }: MenubarProps) => {
+  return (
+    <BaseMenubar
+      ref={ref}
+      orientation={orientation}
+      className={mergeClassName(menubarVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+Menubar.displayName = "Menubar"
+
+export { Menubar }

package/templates/primitives/Menubar/Menubar.types.ts

@@ -0,0 +1,12 @@
+import type { Ref } from "react"
+/**
+ * Menubar.types.ts
+ *
+ * Public and internal types for Menubar component.
+ */
+
+import type { MenubarProps as BaseMenubarProps } from "@base-ui/react/menubar"
+
+export type MenubarProps = BaseMenubarProps & {
+  ref?: Ref<HTMLDivElement>
+}

package/templates/primitives/Menubar/Menubar.variants.ts

@@ -0,0 +1,22 @@
+/**
+ * Menubar.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const menubarVariants = cva(
+  "flex items-center gap-(--lsys-menu-list-gap) rounded-(--lsys-menu-radius) border border-(--lsys-menu-trigger-border-color) bg-(--lsys-menu-trigger-background) p-(--lsys-menu-list-padding)",
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row",
+        vertical: "flex-col",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+)

package/templates/primitives/Meter/Meter.tsx

@@ -0,0 +1,123 @@
+/**
+ * Meter.tsx
+ *
+ * Reference Meter component implementation.
+ */
+
+import { Meter as BaseMeter } from "@base-ui/react/meter"
+import type {
+  MeterIndicatorProps,
+  MeterLabelProps,
+  MeterProps,
+  MeterTrackProps,
+  MeterValueProps,
+} from "./Meter.types"
+import {
+  meterHeaderVariants,
+  meterIndicatorVariants,
+  meterLabelVariants,
+  meterTrackVariants,
+  meterValueVariants,
+  meterVariants,
+} from "./Meter.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Meter = ({
+  ref,
+  size,
+  label,
+  showValue,
+  children,
+  className,
+  trackClassName,
+  indicatorClassName,
+  labelClassName,
+  valueClassName,
+  ...props
+}: MeterProps) => {
+  if (children !== undefined) {
+    return (
+      <BaseMeter.Root
+        ref={ref}
+        className={mergeClassName(meterVariants(), className)}
+        {...props}
+      >
+        {children}
+      </BaseMeter.Root>
+    )
+  }
+
+  return (
+    <BaseMeter.Root
+      ref={ref}
+      className={mergeClassName(meterVariants(), className)}
+      {...props}
+    >
+      {label === undefined && showValue !== true ? null : (
+        <div className={meterHeaderVariants()}>
+          {label === undefined ? null : (
+            <MeterLabel className={labelClassName}>{label}</MeterLabel>
+          )}
+          {showValue === true ? (
+            <MeterValue className={valueClassName} />
+          ) : null}
+        </div>
+      )}
+      <MeterTrack size={size} className={trackClassName}>
+        <MeterIndicator className={indicatorClassName} />
+      </MeterTrack>
+    </BaseMeter.Root>
+  )
+}
+
+Meter.displayName = "Meter"
+
+const MeterTrack = ({ ref, size, className, ...props }: MeterTrackProps) => {
+  return (
+    <BaseMeter.Track
+      ref={ref}
+      className={mergeClassName(meterTrackVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+MeterTrack.displayName = "MeterTrack"
+
+const MeterIndicator = ({ ref, className, ...props }: MeterIndicatorProps) => {
+  return (
+    <BaseMeter.Indicator
+      ref={ref}
+      className={mergeClassName(meterIndicatorVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MeterIndicator.displayName = "MeterIndicator"
+
+const MeterValue = ({ ref, className, ...props }: MeterValueProps) => {
+  return (
+    <BaseMeter.Value
+      ref={ref}
+      className={mergeClassName(meterValueVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MeterValue.displayName = "MeterValue"
+
+const MeterLabel = ({ ref, className, ...props }: MeterLabelProps) => {
+  return (
+    <BaseMeter.Label
+      ref={ref}
+      className={mergeClassName(meterLabelVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+MeterLabel.displayName = "MeterLabel"
+
+export { Meter, MeterTrack, MeterIndicator, MeterValue, MeterLabel }