@masaraxui/react 1.0.0

package/dist/components/list-box-item/list-box-item.js

@@ -0,0 +1,77 @@
+"use client";
+import { listboxItemVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { ListBoxItem } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+
+const ListBoxItemContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * ListBox Item Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ListBoxItemRoot = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => listboxItemVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(ListBoxItem, {
+    className: composeTwRenderProps(className, slots.item()),
+    "data-slot": "list-box-item",
+    ...props,
+    children: values => /*#__PURE__*/jsx(ListBoxItemContext, {
+      value: {
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ListBox Item Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const ListBoxItemIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(ListBoxItemContext);
+  const isSelected = state?.isSelected;
+  const content = typeof children === "function" ? children(state ?? {}) : children ? children : /*#__PURE__*/jsx("svg", {
+    "aria-hidden": "true",
+    "data-slot": "list-box-item-indicator--checkmark",
+    fill: "none",
+    role: "presentation",
+    stroke: "currentColor",
+    strokeDasharray: 22,
+    strokeDashoffset: isSelected ? 44 : 66,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    viewBox: "0 0 17 18",
+    children: /*#__PURE__*/jsx("polyline", {
+      points: "1 9 7 14 15 4"
+    })
+  });
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-slot": "list-box-item-indicator",
+    "data-visible": isSelected || undefined,
+    ...props,
+    children: content
+  });
+};
+
+export { ListBoxItemIndicator, ListBoxItemRoot };

package/dist/components/list-box-section/index.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+import { ListBoxSectionRoot } from "./list-box-section";
+export declare const ListBoxSection: ({ children, className, ...props }: import("./list-box-section").ListBoxSectionRootProps) => import("react/jsx-runtime").JSX.Element;
+export type ListBoxSection = {
+    Props: ComponentProps<typeof ListBoxSectionRoot>;
+};
+export { ListBoxSectionRoot };
+export type { ListBoxSectionRootProps, ListBoxSectionRootProps as ListBoxSectionProps, } from "./list-box-section";
+export { listboxSectionVariants } from "@masaraxui/styles";
+export type { ListBoxSectionVariants } from "@masaraxui/styles";

package/dist/components/list-box-section/index.js

@@ -0,0 +1,10 @@
+"use strict";
+import { ListBoxSectionRoot } from './list-box-section.js';
+export { listboxSectionVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ListBoxSection = ListBoxSectionRoot;
+
+export { ListBoxSection, ListBoxSectionRoot };

package/dist/components/list-box-section/list-box-section.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from "react";
+import { ListBoxSection as ListBoxSectionPrimitive } from "react-aria-components";
+interface ListBoxSectionRootProps extends ComponentPropsWithRef<typeof ListBoxSectionPrimitive> {
+    className?: string;
+}
+declare const ListBoxSectionRoot: ({ children, className, ...props }: ListBoxSectionRootProps) => import("react/jsx-runtime").JSX.Element;
+export { ListBoxSectionRoot };
+export type { ListBoxSectionRootProps };

package/dist/components/list-box-section/list-box-section.js

@@ -0,0 +1,22 @@
+"use client";
+import { listboxSectionVariants } from '@masaraxui/styles';
+import React__default from 'react';
+import { ListBoxSection } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+const ListBoxSectionRoot = ({
+  children,
+  className,
+  ...props
+}) => {
+  const styles = React__default.useMemo(() => listboxSectionVariants({
+    class: typeof className === "string" ? className : undefined
+  }), [className]);
+  return /*#__PURE__*/jsx(ListBoxSection, {
+    className: styles,
+    ...props,
+    children: children
+  });
+};
+
+export { ListBoxSectionRoot };

package/dist/components/menu/index.d.ts

@@ -0,0 +1,24 @@
+import type { MenuItemRoot } from "../menu-item";
+import type { MenuSectionRoot } from "../menu-section";
+import type { ComponentProps } from "react";
+import { MenuRoot } from "./menu";
+export declare const Menu: typeof MenuRoot & {
+    Root: typeof MenuRoot;
+    Item: (({ children, className, variant, ...props }: import("..").MenuItemRootProps) => import("react/jsx-runtime").JSX.Element) & {
+        Root: ({ children, className, variant, ...props }: import("..").MenuItemRootProps) => import("react/jsx-runtime").JSX.Element;
+        Indicator: ({ children, className, type, ...props }: import("..").MenuItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+        SubmenuIndicator: ({ children, className, ...props }: import("..").MenuItemSubmenuIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+    };
+    ItemIndicator: ({ children, className, type, ...props }: import("..").MenuItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Section: ({ children, className, ...props }: import("..").MenuSectionRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Menu<T extends object = object> = {
+    Props: ComponentProps<typeof MenuRoot<T>>;
+    RootProps: ComponentProps<typeof MenuRoot<T>>;
+    ItemProps: ComponentProps<typeof MenuItemRoot>;
+    SectionProps: ComponentProps<typeof MenuSectionRoot>;
+};
+export { MenuRoot };
+export type { MenuRootProps, MenuRootProps as MenuProps } from "./menu";
+export { menuVariants } from "@masaraxui/styles";
+export type { MenuVariants } from "@masaraxui/styles";

package/dist/components/menu/index.js

@@ -0,0 +1,18 @@
+"use strict";
+import { MenuItem } from '../menu-item/index.js';
+import { MenuSection } from '../menu-section/index.js';
+import { MenuRoot } from './menu.js';
+export { menuVariants } from '@masaraxui/styles';
+import { MenuItemIndicator } from '../menu-item/menu-item.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Menu = Object.assign(MenuRoot, {
+  Root: MenuRoot,
+  Item: MenuItem,
+  ItemIndicator: MenuItemIndicator,
+  Section: MenuSection
+});
+
+export { Menu, MenuRoot };

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,9 @@
+import type { MenuVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { Menu as MenuPrimitive } from "react-aria-components";
+interface MenuRootProps<T extends object> extends ComponentPropsWithRef<typeof MenuPrimitive<T>>, MenuVariants {
+    className?: string;
+}
+declare function MenuRoot<T extends object>({ className, ...props }: MenuRootProps<T>): import("react/jsx-runtime").JSX.Element;
+export { MenuRoot };
+export type { MenuRootProps };

package/dist/components/menu/menu.js

@@ -0,0 +1,20 @@
+"use client";
+import { menuVariants } from '@masaraxui/styles';
+import React__default from 'react';
+import { Menu } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+function MenuRoot({
+  className,
+  ...props
+}) {
+  const styles = React__default.useMemo(() => menuVariants(), []);
+  return /*#__PURE__*/jsx(Menu, {
+    className: composeTwRenderProps(className, styles),
+    "data-slot": "menu",
+    ...props
+  });
+}
+
+export { MenuRoot };

package/dist/components/menu-item/index.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { MenuItemIndicator, MenuItemRoot, MenuItemSubmenuIndicator } from "./menu-item";
+export declare const MenuItem: (({ children, className, variant, ...props }: import("./menu-item").MenuItemRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, variant, ...props }: import("./menu-item").MenuItemRootProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, type, ...props }: import("./menu-item").MenuItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    SubmenuIndicator: ({ children, className, ...props }: import("./menu-item").MenuItemSubmenuIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+};
+export type MenuItem = {
+    Props: ComponentProps<typeof MenuItemRoot>;
+    RootProps: ComponentProps<typeof MenuItemRoot>;
+    IndicatorProps: ComponentProps<typeof MenuItemIndicator>;
+    SubmenuIndicatorProps: ComponentProps<typeof MenuItemSubmenuIndicator>;
+};
+export { MenuItemRoot, MenuItemIndicator, MenuItemSubmenuIndicator };
+export type { MenuItemRootProps, MenuItemRootProps as MenuItemProps, MenuItemIndicatorProps, MenuItemSubmenuIndicatorProps, } from "./menu-item";
+export { menuItemVariants } from "@masaraxui/styles";
+export type { MenuItemVariants } from "@masaraxui/styles";

package/dist/components/menu-item/index.js

@@ -0,0 +1,14 @@
+"use strict";
+import { MenuItemRoot, MenuItemSubmenuIndicator, MenuItemIndicator } from './menu-item.js';
+export { menuItemVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const MenuItem = Object.assign(MenuItemRoot, {
+  Root: MenuItemRoot,
+  Indicator: MenuItemIndicator,
+  SubmenuIndicator: MenuItemSubmenuIndicator
+});
+
+export { MenuItem, MenuItemIndicator, MenuItemRoot, MenuItemSubmenuIndicator };

package/dist/components/menu-item/menu-item.d.ts

@@ -0,0 +1,20 @@
+import type { MenuItemVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { MenuItemRenderProps } from "react-aria-components";
+import React from "react";
+import { MenuItem as MenuItemPrimitive } from "react-aria-components";
+interface MenuItemRootProps extends ComponentPropsWithRef<typeof MenuItemPrimitive>, MenuItemVariants {
+    className?: string;
+}
+declare const MenuItemRoot: ({ children, className, variant, ...props }: MenuItemRootProps) => import("react/jsx-runtime").JSX.Element;
+interface MenuItemIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode | ((props: MenuItemRenderProps) => React.ReactNode);
+    type?: "checkmark" | "dot";
+}
+declare const MenuItemIndicator: ({ children, className, type, ...props }: MenuItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+interface MenuItemSubmenuIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode;
+}
+declare const MenuItemSubmenuIndicator: ({ children, className, ...props }: MenuItemSubmenuIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+export { MenuItemRoot, MenuItemIndicator, MenuItemSubmenuIndicator };
+export type { MenuItemRootProps, MenuItemIndicatorProps, MenuItemSubmenuIndicatorProps };

package/dist/components/menu-item/menu-item.js

@@ -0,0 +1,123 @@
+"use client";
+import { menuItemVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { MenuItem } from 'react-aria-components';
+import { IconChevronRight } from '../icons.js';
+import { jsx } from 'react/jsx-runtime';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+
+const MenuItemContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Menu Item Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const MenuItemRoot = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => menuItemVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(MenuItem, {
+    className: composeTwRenderProps(className, slots.item()),
+    "data-slot": "menu-item",
+    ...props,
+    children: values => /*#__PURE__*/jsx(MenuItemContext, {
+      value: {
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Menu Item Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const MenuItemIndicator = ({
+  children,
+  className,
+  type = "checkmark",
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(MenuItemContext);
+  const isSelected = state?.isSelected;
+  const content = typeof children === "function" ? children(state ?? {}) : children ? children : type === "dot" ? /*#__PURE__*/jsx("svg", {
+    "aria-hidden": "true",
+    "data-slot": "menu-item-indicator--dot",
+    fill: "currentColor",
+    fillRule: "evenodd",
+    role: "presentation",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/jsx("path", {
+      clipRule: "evenodd",
+      d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14",
+      fillRule: "evenodd"
+    })
+  }) : /*#__PURE__*/jsx("svg", {
+    "aria-hidden": "true",
+    "data-slot": "menu-item-indicator--checkmark",
+    fill: "none",
+    role: "presentation",
+    stroke: "currentColor",
+    strokeDasharray: 22,
+    strokeDashoffset: isSelected ? 44 : 66,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    viewBox: "0 0 17 18",
+    children: /*#__PURE__*/jsx("polyline", {
+      points: "1 9 7 14 15 4"
+    })
+  });
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-slot": "menu-item-indicator",
+    "data-type": type,
+    "data-visible": isSelected || undefined,
+    ...props,
+    children: content
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Menu Item Submenu Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const MenuItemSubmenuIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(MenuItemContext);
+  const hasSubmenu = state?.hasSubmenu;
+
+  // Only render if hasSubmenu is true
+  if (!hasSubmenu) {
+    return null;
+  }
+  const defaultContent = /*#__PURE__*/jsx(IconChevronRight, {});
+  const content = children ?? defaultContent;
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.submenuIndicator, className),
+    "data-slot": "submenu-indicator",
+    ...props,
+    children: content
+  });
+};
+
+export { MenuItemIndicator, MenuItemRoot, MenuItemSubmenuIndicator };

package/dist/components/menu-section/index.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+import { MenuSectionRoot } from "./menu-section";
+export declare const MenuSection: ({ children, className, ...props }: import("./menu-section").MenuSectionRootProps) => import("react/jsx-runtime").JSX.Element;
+export type MenuSection = {
+    Props: ComponentProps<typeof MenuSectionRoot>;
+};
+export { MenuSectionRoot };
+export type { MenuSectionRootProps, MenuSectionRootProps as MenuSectionProps } from "./menu-section";
+export { menuSectionVariants } from "@masaraxui/styles";
+export type { MenuSectionVariants } from "@masaraxui/styles";

package/dist/components/menu-section/index.js

@@ -0,0 +1,10 @@
+"use strict";
+import { MenuSectionRoot } from './menu-section.js';
+export { menuSectionVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const MenuSection = MenuSectionRoot;
+
+export { MenuSection, MenuSectionRoot };

package/dist/components/menu-section/menu-section.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from "react";
+import { MenuSection as MenuSectionPrimitive } from "react-aria-components";
+interface MenuSectionRootProps extends ComponentPropsWithRef<typeof MenuSectionPrimitive> {
+    className?: string;
+}
+declare const MenuSectionRoot: ({ children, className, ...props }: MenuSectionRootProps) => import("react/jsx-runtime").JSX.Element;
+export { MenuSectionRoot };
+export type { MenuSectionRootProps };

package/dist/components/menu-section/menu-section.js

@@ -0,0 +1,22 @@
+"use client";
+import { menuSectionVariants } from '@masaraxui/styles';
+import React__default from 'react';
+import { MenuSection } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+const MenuSectionRoot = ({
+  children,
+  className,
+  ...props
+}) => {
+  const styles = React__default.useMemo(() => menuSectionVariants({
+    class: typeof className === "string" ? className : undefined
+  }), [className]);
+  return /*#__PURE__*/jsx(MenuSection, {
+    className: styles,
+    ...props,
+    children: children
+  });
+};
+
+export { MenuSectionRoot };

package/dist/components/meter/index.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentProps } from "react";
+import { MeterFill, MeterOutput, MeterRoot, MeterTrack } from "./meter";
+export declare const Meter: {
+    ({ children, className, color, size, ...props }: import("./meter").MeterRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Root: {
+        ({ children, className, color, size, ...props }: import("./meter").MeterRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Output: {
+        ({ children, className, ...props }: import("./meter").MeterOutputProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Track: {
+        ({ children, className, ...props }: import("./meter").MeterTrackProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Fill: {
+        ({ className, style, ...props }: import("./meter").MeterFillProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type Meter = {
+    Props: ComponentProps<typeof MeterRoot>;
+    RootProps: ComponentProps<typeof MeterRoot>;
+    OutputProps: ComponentProps<typeof MeterOutput>;
+    TrackProps: ComponentProps<typeof MeterTrack>;
+    FillProps: ComponentProps<typeof MeterFill>;
+};
+export { MeterRoot, MeterOutput, MeterTrack, MeterFill };
+export type { MeterRootProps, MeterRootProps as MeterProps, MeterOutputProps, MeterTrackProps, MeterFillProps, } from "./meter";
+export { meterVariants } from "@masaraxui/styles";
+export type { MeterVariants } from "@masaraxui/styles";

package/dist/components/meter/index.js

@@ -0,0 +1,15 @@
+"use strict";
+import { MeterRoot, MeterFill, MeterTrack, MeterOutput } from './meter.js';
+export { meterVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Meter = Object.assign(MeterRoot, {
+  Root: MeterRoot,
+  Output: MeterOutput,
+  Track: MeterTrack,
+  Fill: MeterFill
+});
+
+export { Meter, MeterFill, MeterOutput, MeterRoot, MeterTrack };

package/dist/components/meter/meter.d.ts

@@ -0,0 +1,29 @@
+import type { MeterVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { Meter as MeterPrimitive } from "react-aria-components";
+interface MeterRootProps extends ComponentPropsWithRef<typeof MeterPrimitive>, MeterVariants {
+}
+declare const MeterRoot: {
+    ({ children, className, color, size, ...props }: MeterRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface MeterOutputProps extends ComponentPropsWithRef<"span"> {
+}
+declare const MeterOutput: {
+    ({ children, className, ...props }: MeterOutputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface MeterTrackProps extends ComponentPropsWithRef<"div"> {
+}
+declare const MeterTrack: {
+    ({ children, className, ...props }: MeterTrackProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface MeterFillProps extends ComponentPropsWithRef<"div"> {
+}
+declare const MeterFill: {
+    ({ className, style, ...props }: MeterFillProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { MeterRoot, MeterOutput, MeterTrack, MeterFill };
+export type { MeterRootProps, MeterOutputProps, MeterTrackProps, MeterFillProps };

package/dist/components/meter/meter.js

@@ -0,0 +1,108 @@
+"use client";
+import { meterVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { Meter } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+
+const MeterContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Meter Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const MeterRoot = ({
+  children,
+  className,
+  color,
+  size,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => meterVariants({
+    color,
+    size
+  }), [color, size]);
+  return /*#__PURE__*/jsx(Meter, {
+    "data-slot": "meter",
+    ...props,
+    className: composeTwRenderProps(className, slots.base()),
+    children: values => /*#__PURE__*/jsx(MeterContext, {
+      value: {
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+MeterRoot.displayName = "MasaraxUI.Meter";
+
+/* -------------------------------------------------------------------------------------------------
+ * Meter Output
+ * -----------------------------------------------------------------------------------------------*/
+
+const MeterOutput = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(MeterContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.output, className),
+    "data-slot": "meter-output",
+    ...props,
+    children: children ?? state?.valueText
+  });
+};
+MeterOutput.displayName = "MasaraxUI.Meter.Output";
+
+/* -------------------------------------------------------------------------------------------------
+ * Meter Track
+ * -----------------------------------------------------------------------------------------------*/
+
+const MeterTrack = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(MeterContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.track, className),
+    "data-slot": "meter-track",
+    ...props,
+    children: children
+  });
+};
+MeterTrack.displayName = "MasaraxUI.Meter.Track";
+
+/* -------------------------------------------------------------------------------------------------
+ * Meter Fill
+ * -----------------------------------------------------------------------------------------------*/
+
+const MeterFill = ({
+  className,
+  style,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(MeterContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.fill, className),
+    "data-slot": "meter-fill",
+    style: {
+      ...style,
+      width: `${state?.percentage ?? 0}%`
+    },
+    ...props
+  });
+};
+MeterFill.displayName = "MasaraxUI.Meter.Fill";
+
+export { MeterFill, MeterOutput, MeterRoot, MeterTrack };