@masaraxui/react 1.0.0

package/dist/components/table/index.js

@@ -0,0 +1,25 @@
+"use strict";
+import { TableRoot, TableScrollContainer, TableRow, TableResizableContainer, TableLoadMoreContent, TableLoadMoreItem, TableHeader, TableFooter, TableContent, TableColumnResizer, TableColumn, TableCollection, TableCell, TableBody } from './table.js';
+export { tableVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Table = Object.assign(TableRoot, {
+  Body: TableBody,
+  Cell: TableCell,
+  Collection: TableCollection,
+  Column: TableColumn,
+  ColumnResizer: TableColumnResizer,
+  Content: TableContent,
+  Footer: TableFooter,
+  Header: TableHeader,
+  LoadMore: TableLoadMoreItem,
+  LoadMoreContent: TableLoadMoreContent,
+  ResizableContainer: TableResizableContainer,
+  Root: TableRoot,
+  Row: TableRow,
+  ScrollContainer: TableScrollContainer
+});
+
+export { Table, TableBody, TableCell, TableCollection, TableColumn, TableColumnResizer, TableContent, TableFooter, TableHeader, TableLoadMoreContent, TableLoadMoreItem, TableResizableContainer, TableRoot, TableRow, TableScrollContainer };

package/dist/components/table/table.d.ts

@@ -0,0 +1,50 @@
+import type { TableVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { Cell as CellPrimitive, Collection as CollectionPrimitive, Column as ColumnPrimitive, ColumnResizer as ColumnResizerPrimitive, ResizableTableContainer as ResizableTableContainerPrimitive, Row as RowPrimitive, TableBody as TableBodyPrimitive, TableHeader as TableHeaderPrimitive, TableLoadMoreItem as TableLoadMoreItemPrimitive, Table as TablePrimitive } from "react-aria-components";
+interface TableRootProps extends ComponentPropsWithRef<"div">, TableVariants {
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const TableRoot: React.ForwardRefExoticComponent<Omit<TableRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface TableScrollContainerProps extends ComponentPropsWithRef<"div"> {
+}
+declare const TableScrollContainer: React.ForwardRefExoticComponent<Omit<TableScrollContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface TableContentProps extends Omit<ComponentPropsWithRef<typeof TablePrimitive>, "className"> {
+    className?: string;
+}
+declare function TableContent({ className, ...props }: TableContentProps): import("react/jsx-runtime").JSX.Element;
+interface TableHeaderProps<T extends object> extends ComponentPropsWithRef<typeof TableHeaderPrimitive<T>> {
+}
+declare function TableHeader<T extends object>({ className, ...props }: TableHeaderProps<T>): import("react/jsx-runtime").JSX.Element;
+interface TableColumnProps extends ComponentPropsWithRef<typeof ColumnPrimitive> {
+}
+declare const TableColumn: React.ForwardRefExoticComponent<Omit<TableColumnProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+interface TableBodyProps<T extends object> extends ComponentPropsWithRef<typeof TableBodyPrimitive<T>> {
+}
+declare function TableBody<T extends object>({ className, ...props }: TableBodyProps<T>): import("react/jsx-runtime").JSX.Element;
+interface TableRowProps<T extends object> extends ComponentPropsWithRef<typeof RowPrimitive<T>> {
+}
+declare function TableRow<T extends object>({ className, ...props }: TableRowProps<T>): import("react/jsx-runtime").JSX.Element;
+interface TableCellProps extends ComponentPropsWithRef<typeof CellPrimitive> {
+}
+declare const TableCell: React.ForwardRefExoticComponent<Omit<TableCellProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+interface TableFooterProps extends ComponentPropsWithRef<"div"> {
+    className?: string;
+}
+declare const TableFooter: React.ForwardRefExoticComponent<Omit<TableFooterProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface TableResizableContainerProps extends ComponentPropsWithRef<typeof ResizableTableContainerPrimitive> {
+}
+declare const TableResizableContainer: React.ForwardRefExoticComponent<Omit<TableResizableContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface TableColumnResizerProps extends ComponentPropsWithRef<typeof ColumnResizerPrimitive> {
+}
+declare const TableColumnResizer: React.ForwardRefExoticComponent<Omit<TableColumnResizerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface TableLoadMoreItemProps extends ComponentPropsWithRef<typeof TableLoadMoreItemPrimitive> {
+}
+declare const TableLoadMoreItem: React.ForwardRefExoticComponent<Omit<TableLoadMoreItemProps, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
+interface TableLoadMoreContentProps extends ComponentPropsWithRef<"div"> {
+}
+declare const TableLoadMoreContent: React.ForwardRefExoticComponent<Omit<TableLoadMoreContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TableCollection: typeof CollectionPrimitive;
+export { TableRoot, TableScrollContainer, TableContent, TableHeader, TableColumn, TableColumnResizer, TableBody, TableRow, TableCell, TableFooter, TableCollection, TableLoadMoreItem, TableLoadMoreContent, TableResizableContainer, };
+export type { TableRootProps, TableScrollContainerProps, TableContentProps, TableHeaderProps, TableColumnProps, TableColumnResizerProps, TableBodyProps, TableRowProps, TableCellProps, TableFooterProps, TableLoadMoreItemProps, TableLoadMoreContentProps, TableResizableContainerProps, };

package/dist/components/table/table.js

@@ -0,0 +1,283 @@
+"use client";
+import { tableVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { Collection, Row, ResizableTableContainer, TableLoadMoreItem as TableLoadMoreItem$1, TableHeader as TableHeader$1, Table, ColumnResizer, Column, Cell, TableBody as TableBody$1 } from 'react-aria-components';
+import { cx } from 'tailwind-variants';
+import { composeSlotClassName, composeTwRenderProps } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+
+const TableContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Table Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const TableRoot = /*#__PURE__*/React__default.forwardRef(({
+  children,
+  className,
+  variant,
+  ...props
+}, ref) => {
+  const slots = React__default.useMemo(() => tableVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(TableContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx("div", {
+      ref: ref,
+      className: slots.base({
+        className
+      }),
+      "data-slot": "table",
+      ...props,
+      children: children
+    })
+  });
+});
+TableRoot.displayName = "MasaraxUI.Table";
+
+/* -------------------------------------------------------------------------------------------------
+ * Table Scroll Container
+ * -----------------------------------------------------------------------------------------------*/
+
+const TableScrollContainer = /*#__PURE__*/React__default.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const {
+    slots
+  } = useContext(TableContext);
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    className: composeSlotClassName(slots?.scrollContainer, className),
+    "data-slot": "table-scroll-container",
+    ...props
+  });
+});
+TableScrollContainer.displayName = "MasaraxUI.Table.ScrollContainer";
+
+/* -------------------------------------------------------------------------------------------------
+ * Table Content
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableContent({
+  className,
+  ...props
+}) {
+  const {
+    slots
+  } = useContext(TableContext);
+  return /*#__PURE__*/jsx(Table, {
+    className: composeTwRenderProps(className, slots?.content()),
+    "data-slot": "table-content",
+    ...props
+  });
+}
+TableContent.displayName = "MasaraxUI.Table.Content";
+
+/* -------------------------------------------------------------------------------------------------
+ * Table Header
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableHeader({
+  className,
+  ...props
+}) {
+  const {
+    slots
+  } = useContext(TableContext);
+  return /*#__PURE__*/jsx(TableHeader$1, {
+    className: composeTwRenderProps(className, slots?.header()),
+    "data-slot": "table-header",
+    ...props
+  });
+}
+TableHeader.displayName = "MasaraxUI.Table.Header";
+
+/* -------------------------------------------------------------------------------------------------
+ * Table Column
+ * -----------------------------------------------------------------------------------------------*/
+
+const TableColumn = /*#__PURE__*/React__default.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const {
+    slots
+  } = useContext(TableContext);
+  return /*#__PURE__*/jsx(Column, {
+    ref: ref,
+    className: composeTwRenderProps(className, slots?.column()),
+    "data-slot": "table-column",
+    ...props
+  });
+});
+TableColumn.displayName = "MasaraxUI.Table.Column";
+
+/* -------------------------------------------------------------------------------------------------
+ * Table Body
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableBody({
+  className,
+  ...props
+}) {
+  const {
+    slots
+  } = useContext(TableContext);
+  return /*#__PURE__*/jsx(TableBody$1, {
+    className: composeTwRenderProps(className, slots?.body()),
+    "data-slot": "table-body",
+    ...props
+  });
+}
+TableBody.displayName = "MasaraxUI.Table.Body";
+
+/* -------------------------------------------------------------------------------------------------
+ * Table Row
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableRow({
+  className,
+  ...props
+}) {
+  const {
+    slots
+  } = useContext(TableContext);
+  return /*#__PURE__*/jsx(Row, {
+    className: composeTwRenderProps(className, slots?.row()),
+    "data-slot": "table-row",
+    ...props
+  });
+}
+TableRow.displayName = "MasaraxUI.Table.Row";
+
+/* -------------------------------------------------------------------------------------------------
+ * Table Cell
+ * -----------------------------------------------------------------------------------------------*/
+
+const TableCell = /*#__PURE__*/React__default.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const {
+    slots
+  } = useContext(TableContext);
+  return /*#__PURE__*/jsx(Cell, {
+    ref: ref,
+    className: composeTwRenderProps(className, slots?.cell()),
+    "data-slot": "table-cell",
+    ...props
+  });
+});
+TableCell.displayName = "MasaraxUI.Table.Cell";
+
+/* -------------------------------------------------------------------------------------------------
+ * Table Footer
+ * -----------------------------------------------------------------------------------------------*/
+
+const TableFooter = /*#__PURE__*/React__default.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const {
+    slots
+  } = useContext(TableContext);
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    className: composeSlotClassName(slots?.footer, className),
+    "data-slot": "table-footer",
+    ...props
+  });
+});
+TableFooter.displayName = "MasaraxUI.Table.Footer";
+
+/* -------------------------------------------------------------------------------------------------
+ * Table Resizable Container
+ * -----------------------------------------------------------------------------------------------*/
+
+const TableResizableContainer = /*#__PURE__*/React__default.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(ResizableTableContainer, {
+    ref: ref,
+    className: cx("table__resizable-container", className),
+    "data-slot": "table-resizable-container",
+    ...props
+  });
+});
+TableResizableContainer.displayName = "MasaraxUI.Table.ResizableContainer";
+
+/* -------------------------------------------------------------------------------------------------
+ * Table Column Resizer
+ * -----------------------------------------------------------------------------------------------*/
+
+const TableColumnResizer = /*#__PURE__*/React__default.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const {
+    slots
+  } = useContext(TableContext);
+  return /*#__PURE__*/jsx(ColumnResizer, {
+    ref: ref,
+    className: composeTwRenderProps(className, slots?.columnResizer()),
+    "data-slot": "table-column-resizer",
+    ...props
+  });
+});
+TableColumnResizer.displayName = "MasaraxUI.Table.ColumnResizer";
+
+/* -------------------------------------------------------------------------------------------------
+ * Table Load More Item
+ * -----------------------------------------------------------------------------------------------*/
+
+const TableLoadMoreItem = /*#__PURE__*/React__default.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const {
+    slots
+  } = useContext(TableContext);
+  return /*#__PURE__*/jsx(TableLoadMoreItem$1, {
+    ref: ref,
+    className: composeSlotClassName(slots?.loadMore, className),
+    "data-slot": "table-load-more",
+    ...props
+  });
+});
+TableLoadMoreItem.displayName = "MasaraxUI.Table.LoadMore";
+
+/* -------------------------------------------------------------------------------------------------
+ * Table Load More Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const TableLoadMoreContent = /*#__PURE__*/React__default.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const {
+    slots
+  } = useContext(TableContext);
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    className: composeSlotClassName(slots?.loadMoreContent, className),
+    "data-slot": "table-load-more-content",
+    ...props
+  });
+});
+TableLoadMoreContent.displayName = "MasaraxUI.Table.LoadMoreContent";
+
+/* -------------------------------------------------------------------------------------------------
+ * Exports
+ * -----------------------------------------------------------------------------------------------*/
+// Re-export Collection from React Aria for dynamic cell rendering within rows.
+// Users wrap their dynamic cells in <Table.Collection items={columns}> when they
+// need to render additional static cells (e.g. checkbox, drag handle) alongside
+// dynamic column-based cells.
+const TableCollection = Collection;
+
+export { TableBody, TableCell, TableCollection, TableColumn, TableColumnResizer, TableContent, TableFooter, TableHeader, TableLoadMoreContent, TableLoadMoreItem, TableResizableContainer, TableRoot, TableRow, TableScrollContainer };

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

@@ -0,0 +1,25 @@
+import type { ComponentProps } from "react";
+import { Tab, TabIndicator, TabList, TabListContainer, TabPanel, TabSeparator, TabsRoot } from "./tabs";
+export declare const Tabs: (({ children, className, orientation, variant, ...props }: import("./tabs").TabsRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, orientation, variant, ...props }: import("./tabs").TabsRootProps) => import("react/jsx-runtime").JSX.Element;
+    ListContainer: ({ children, className, ...props }: import("./tabs").TabListContainerProps) => import("react/jsx-runtime").JSX.Element;
+    List: ({ children, className, ...props }: import("./tabs").TabListProps) => import("react/jsx-runtime").JSX.Element;
+    Tab: ({ children, className, ...props }: import("./tabs").TabProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ className, ...props }: import("./tabs").TabIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({ className, ...props }: import("./tabs").TabSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+    Panel: ({ children, className, ...props }: import("./tabs").TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Tabs = {
+    Props: ComponentProps<typeof TabsRoot>;
+    RootProps: ComponentProps<typeof TabsRoot>;
+    ListContainer: ComponentProps<typeof TabListContainer>;
+    ListProps: ComponentProps<typeof TabList>;
+    TabProps: ComponentProps<typeof Tab>;
+    IndicatorProps: ComponentProps<typeof TabIndicator>;
+    SeparatorProps: ComponentProps<typeof TabSeparator>;
+    PanelProps: ComponentProps<typeof TabPanel>;
+};
+export { TabsRoot, TabListContainer, TabList, Tab, TabIndicator, TabSeparator, TabPanel };
+export type { TabsRootProps, TabsRootProps as TabsProps, TabListContainerProps, TabListProps, TabProps, TabIndicatorProps, TabSeparatorProps, TabPanelProps, } from "./tabs";
+export { tabsVariants } from "@masaraxui/styles";
+export type { TabsVariants } from "@masaraxui/styles";

package/dist/components/tabs/index.js

@@ -0,0 +1,18 @@
+"use strict";
+import { TabsRoot, TabPanel, TabSeparator, TabIndicator, Tab, TabList, TabListContainer } from './tabs.js';
+export { tabsVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Tabs = Object.assign(TabsRoot, {
+  Root: TabsRoot,
+  ListContainer: TabListContainer,
+  List: TabList,
+  Tab,
+  Indicator: TabIndicator,
+  Separator: TabSeparator,
+  Panel: TabPanel
+});
+
+export { Tab, TabIndicator, TabList, TabListContainer, TabPanel, TabSeparator, Tabs, TabsRoot };

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,37 @@
+import type { TabsVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { SelectionIndicator as SelectionIndicatorPrimitive, TabList as TabListPrimitive, TabPanel as TabPanelPrimitive, Tab as TabPrimitive, Tabs as TabsPrimitive } from "react-aria-components";
+interface TabsRootProps extends ComponentPropsWithRef<typeof TabsPrimitive>, TabsVariants {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const TabsRoot: ({ children, className, orientation, variant, ...props }: TabsRootProps) => import("react/jsx-runtime").JSX.Element;
+interface TabListContainerProps extends ComponentPropsWithRef<"div"> {
+    className?: string;
+}
+declare const TabListContainer: ({ children, className, ...props }: TabListContainerProps) => import("react/jsx-runtime").JSX.Element;
+interface TabListProps extends ComponentPropsWithRef<typeof TabListPrimitive<object>> {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const TabList: ({ children, className, ...props }: TabListProps) => import("react/jsx-runtime").JSX.Element;
+interface TabProps extends ComponentPropsWithRef<typeof TabPrimitive> {
+    className?: string;
+}
+declare const Tab: ({ children, className, ...props }: TabProps) => import("react/jsx-runtime").JSX.Element;
+interface TabIndicatorProps extends ComponentPropsWithRef<typeof SelectionIndicatorPrimitive> {
+    className?: string;
+}
+declare const TabIndicator: ({ className, ...props }: TabIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+interface TabPanelProps extends Omit<ComponentPropsWithRef<typeof TabPanelPrimitive>, "children"> {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const TabPanel: ({ children, className, ...props }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+interface TabSeparatorProps extends ComponentPropsWithRef<"span"> {
+    className?: string;
+}
+declare const TabSeparator: ({ className, ...props }: TabSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export { TabsRoot, TabListContainer, TabList, Tab, TabIndicator, TabPanel, TabSeparator };
+export type { TabsRootProps, TabListContainerProps, TabListProps, TabProps, TabIndicatorProps, TabPanelProps, TabSeparatorProps, };

package/dist/components/tabs/tabs.js

@@ -0,0 +1,156 @@
+"use client";
+import { tabsVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { Tabs, TabPanel as TabPanel$1, SelectionIndicator, Tab as Tab$1, TabList as TabList$1 } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+
+const TabsContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Tabs Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabsRoot = ({
+  children,
+  className,
+  orientation = "horizontal",
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => tabsVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(TabsContext, {
+    value: {
+      orientation,
+      slots
+    },
+    children: /*#__PURE__*/jsx(Tabs, {
+      ...props,
+      className: composeTwRenderProps(className, slots.base()),
+      "data-slot": "tabs",
+      orientation: orientation,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tabs List Container
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabListContainer = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.tabListContainer, className),
+    "data-slot": "tabs-list-container",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tabs List
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabList = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx(TabList$1, {
+    ...props,
+    className: composeTwRenderProps(className, slots?.tabList()),
+    "data-slot": "tabs-list",
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tab
+ * -----------------------------------------------------------------------------------------------*/
+
+const Tab = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx(Tab$1, {
+    ...props,
+    className: composeTwRenderProps(className, slots?.tab()),
+    "data-slot": "tabs-tab",
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tab Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabIndicator = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx(SelectionIndicator, {
+    className: composeSlotClassName(slots?.tabIndicator, className),
+    "data-slot": "tabs-indicator",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tab Panel
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabPanel = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx(TabPanel$1, {
+    ...props,
+    className: composeTwRenderProps(className, slots?.tabPanel()),
+    "data-slot": "tabs-panel",
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tab Separator
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabSeparator = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.separator, className),
+    "data-slot": "tabs-separator",
+    ...props
+  });
+};
+
+export { Tab, TabIndicator, TabList, TabListContainer, TabPanel, TabSeparator, TabsRoot };

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

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { TagRemoveButton, TagRoot } from "./tag";
+export declare const Tag: (({ children, className, ...restProps }: import("./tag").TagRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, ...restProps }: import("./tag").TagRootProps) => import("react/jsx-runtime").JSX.Element;
+    RemoveButton: ({ children, className, ...restProps }: import("./tag").TagRemoveButtonProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Tag = {
+    Props: ComponentProps<typeof TagRoot>;
+    RootProps: ComponentProps<typeof TagRoot>;
+    RemoveButtonProps: ComponentProps<typeof TagRemoveButton>;
+};
+export { TagRoot, TagRemoveButton };
+export type { TagRootProps, TagRemoveButtonProps } from "./tag";
+export { tagVariants } from "@masaraxui/styles";
+export type { TagVariants } from "@masaraxui/styles";

package/dist/components/tag/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { TagRoot, TagRemoveButton } from './tag.js';
+export { tagVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Tag = Object.assign(TagRoot, {
+  Root: TagRoot,
+  RemoveButton: TagRemoveButton
+});
+
+export { Tag, TagRemoveButton, TagRoot };

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,14 @@
+import type { TagVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { Button as ButtonPrimitive } from "react-aria-components";
+import React from "react";
+import { Tag as TagPrimitive } from "react-aria-components";
+interface TagRootProps extends ComponentPropsWithRef<typeof TagPrimitive>, TagVariants {
+}
+declare const TagRoot: ({ children, className, ...restProps }: TagRootProps) => import("react/jsx-runtime").JSX.Element;
+type TagRemoveButtonProps = ComponentPropsWithRef<typeof ButtonPrimitive> & {
+    children?: React.ReactNode;
+};
+declare const TagRemoveButton: ({ children, className, ...restProps }: TagRemoveButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { TagRoot, TagRemoveButton };
+export type { TagRootProps, TagRemoveButtonProps };