@telepix-lab/telepix-ui 0.3.1 → 0.3.3

package/dist/cjs/autocomplete/index.d.ts

@@ -1,4 +1,4 @@
-interface AutocompleteProps<T> {
+export interface AutocompleteProps<T> {
     placeholder?: string;
     data: T[];
     value?: string;
@@ -13,4 +13,3 @@ interface AutocompleteProps<T> {
     itemClassName?: string;
 }
 export declare const Autocomplete: <T>({ placeholder, data, value, displayValue, onSelect, onChange, noResultsMessage, maxResults, debounceTime, wrapperClassName, contentClassName, itemClassName, }: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/cjs/checkbox/index.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { Checkbox as CheckboxRadix } from "radix-ui";
 interface CheckboxProps extends CheckboxRadix.CheckboxProps {
     label?: string;
@@ -20,5 +19,5 @@ interface CheckboxProps extends CheckboxRadix.CheckboxProps {
  * />
  * ```
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/cjs/client.d.ts

@@ -1,16 +1,31 @@
 export { RadioGroup, RadioItem } from "./radio-group";
+export type { RadioGroupOrientation } from "./radio-group/types";
 export { Checkbox } from "./checkbox";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, } from "./dialog";
 export { Select, SelectTrigger, SelectContent, SelectGroup, SelectLabel, SelectSeparator, SelectItem, } from "./select";
+export { SELECT_TRIGGER_SIZES, SELECT_TRIGGER_VARIANTS } from "./select/types";
+export type { SelectTriggerSize, SelectTriggerVariant } from "./select/types";
 export { VerticalMenus, VerticalMenu } from "./vertical-menu";
+export { VERTICAL_MENU_SIZES, VERTICAL_MENU_VARIANTS, } from "./vertical-menu/types";
+export type { VerticalMenuSize, VerticalMenuVariant, } from "./vertical-menu/types";
 export { HorizontalTabs, HorizontalTab } from "./horizontal-tab";
+export { HORIZONTAL_TAB_SIZES } from "./horizontal-tab/types";
+export type { HorizontalTabSize } from "./horizontal-tab/types";
 export { ModeTabs, ModeTab } from "./mode-tab";
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipArrow, TooltipHeader, TooltipDescription, TooltipFooter, } from "./tooltip";
+export { TOOLTIP_SHORT_VARIANTS, TOOLTIP_SHORT_SIZES } from "./tooltip/types";
+export type { TooltipShortSize, TooltipShortVariant } from "./tooltip/types";
 export { MultipleSelect, MultipleSelectTrigger, MultipleSelectContent, MultipleSelectValue, } from "./multiple-select";
+export { MULTIPLE_SELECT_SIZES } from "./multiple-select/types";
+export type { MultipleSelectSize } from "./multiple-select/types";
 export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, } from "./table";
 export { DataTable } from "./data-table";
+export type { DataTableConfig, DataTableProps } from "./data-table";
 export { InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, } from "./interactive-list-item";
 export { Calendar } from "./calendar";
+export type { CalendarProps } from "./calendar";
 export { DatePicker } from "./date-picker";
+export type { DatePickerProps } from "./date-picker";
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuArrow, ContextMenuLabel, ContextMenuItem, ContextMenuGroup, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuSeparator, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuItemIndicator, } from "./context-menu";
 export { Autocomplete } from "./autocomplete";
+export type { AutocompleteProps } from "./autocomplete";

package/dist/cjs/client.js

@@ -12970,12 +12970,14 @@ exports.DialogFooter = DialogFooter;
 exports.DialogHeader = DialogHeader;
 exports.DialogPortal = DialogPortal;
 exports.DialogTrigger = DialogTrigger;
+exports.HORIZONTAL_TAB_SIZES = HORIZONTAL_TAB_SIZES;
 exports.HorizontalTab = HorizontalTab;
 exports.HorizontalTabs = HorizontalTabs;
 exports.InteractiveListItem = InteractiveListItem;
 exports.InteractiveListItemActions = InteractiveListItemActions;
 exports.InteractiveListItemContent = InteractiveListItemContent;
 exports.InteractiveListItemIcon = InteractiveListItemIcon;
+exports.MULTIPLE_SELECT_SIZES = MULTIPLE_SELECT_SIZES;
 exports.ModeTab = ModeTab;
 exports.ModeTabs = ModeTabs;
 exports.MultipleSelect = MultipleSelect;
@@ -12984,6 +12986,8 @@ exports.MultipleSelectTrigger = MultipleSelectTrigger;
 exports.MultipleSelectValue = MultipleSelectValue;
 exports.RadioGroup = RadioGroup;
 exports.RadioItem = RadioItem;
+exports.SELECT_TRIGGER_SIZES = SELECT_TRIGGER_SIZES;
+exports.SELECT_TRIGGER_VARIANTS = SELECT_TRIGGER_VARIANTS;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
@@ -12991,6 +12995,8 @@ exports.SelectItem = SelectItem;
 exports.SelectLabel = SelectLabel;
 exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
+exports.TOOLTIP_SHORT_SIZES = TOOLTIP_SHORT_SIZES;
+exports.TOOLTIP_SHORT_VARIANTS = TOOLTIP_SHORT_VARIANTS;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCell = TableCell;
@@ -13004,5 +13010,7 @@ exports.TooltipDescription = TooltipDescription;
 exports.TooltipFooter = TooltipFooter;
 exports.TooltipHeader = TooltipHeader;
 exports.TooltipTrigger = TooltipTrigger;
+exports.VERTICAL_MENU_SIZES = VERTICAL_MENU_SIZES;
+exports.VERTICAL_MENU_VARIANTS = VERTICAL_MENU_VARIANTS;
 exports.VerticalMenu = VerticalMenu;
 exports.VerticalMenus = VerticalMenus;

package/dist/cjs/data-table/index.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
+import { ReactNode, Ref } from "react";
 /** table 기반 config로 테이블 완성 component */
 interface TableInfo<T> {
     header: string;
-    renderFn: (item: T) => React.ReactNode;
+    renderFn: (item: T) => ReactNode;
     minWidth?: number;
     maxWidth?: number;
     showTooltip?: boolean;
@@ -24,12 +24,12 @@ export interface DataTableProps<T> {
         cell?: string;
     };
     refs?: {
-        tableRef?: React.Ref<HTMLTableElement>;
-        headerRef?: React.Ref<HTMLTableRowElement>;
-        bodyRef?: React.Ref<HTMLTableSectionElement>;
-        rowRef?: React.Ref<HTMLTableRowElement>;
-        cellRef?: React.Ref<HTMLTableCellElement>;
-        headRef?: React.Ref<HTMLTableCellElement>;
+        tableRef?: Ref<HTMLTableElement>;
+        headerRef?: Ref<HTMLTableRowElement>;
+        bodyRef?: Ref<HTMLTableSectionElement>;
+        rowRef?: Ref<HTMLTableRowElement>;
+        cellRef?: Ref<HTMLTableCellElement>;
+        headRef?: Ref<HTMLTableCellElement>;
     };
 }
 export declare const DataTable: <T extends object>({ config, data, emptyMessage, onRowClick, enableSelection, shouldLastBorderRender, classNames, refs, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/index.d.ts

@@ -1,7 +1,15 @@
 export { Button } from "./button";
+export { BUTTON_SIZES, BUTTON_VARIANTS } from "./button/types";
+export type { ButtonSize, ButtonVariant } from "./button/types";
 export { Text } from "./text";
+export { TEXT_SIZES, TEXT_VARIANTS, TEXT_ALIGNMENTS, FONT_WEIGHTS, } from "./text/types";
+export type { TextSize, FontWeight, TextAlignment, TextVariant, } from "./text/types";
 export { Input } from "./input";
+export { INPUT_SIZES } from "./input/types";
+export type { InputSize } from "./input/types";
 export { TextArea } from "./textarea";
 export { Card, CardBody, CardContent, CardFooter, CardHeader } from "./card";
 export { Tag } from "./tag";
+export { TAG_SIZES, TAG_VARIANTS } from "./tag/types";
+export type { TagSize, TagVariant } from "./tag/types";
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./pagination";

package/dist/cjs/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 
 const BUTTON_SIZES = {
     REGULAR: "regular",
@@ -3327,7 +3327,7 @@ function cn(...inputs) {
  * </Button>
  * ```
  */
-const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, ...rest }, ref) => {
+const Button = react.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, ...rest }, ref) => {
     return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", size === BUTTON_SIZES.SMALL &&
             "h-7 py-0 px-1.5 text-label leading-label-compact", size === BUTTON_SIZES.REGULAR &&
             "h-9 py-0 px-2 text-body leading-body-compact", size === BUTTON_SIZES.LARGE &&
@@ -3341,6 +3341,33 @@ const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWid
 });
 Button.displayName = "Button";
 
+const TEXT_SIZES = {
+    XSMALL: "xsmall",
+    LABEL: "label",
+    BODY: "body",
+    BASE: "base",
+    LARGE: "large",
+    XLARGE: "xl",
+    XXLARGE: "xxl",
+    XXXLARGE: "xxxl",
+    XXXXLARGE: "xxxxl",
+};
+const FONT_WEIGHTS = {
+    THIN: "thin",
+    EXTRALIGHT: "extralight",
+    LIGHT: "light",
+    REGULAR: "regular",
+    MEDIUM: "medium",
+    SEMIBOLD: "semibold",
+    BOLD: "bold",
+    EXTRABOLD: "extrabold",
+};
+const TEXT_ALIGNMENTS = {
+    LEFT: "left",
+    CENTER: "center",
+    RIGHT: "right",
+    JUSTIFY: "justify",
+};
 const TEXT_VARIANTS = {
     BOLD3XLARGEBOLD: "bold3XLargeBold",
     BOLD2XLARGEBOLDCOMPACT: "bold2XLargeBoldCompact",
@@ -3558,7 +3585,7 @@ const INPUT_SIZES = {
  * />
  * ```
  */
-const Input = React.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, ...rest }, ref) => {
+const Input = react.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, ...rest }, ref) => {
     return (jsxRuntime.jsxs("div", { "aria-disabled": rest.disabled, className: cn("flex itesm-center justify-center rounded-lg bg-fill-mono-default hover:bg-fill-mono-hovered focus-within:bg-fill-mono-default border border-border-bound focus-within:border-border-focused has-[input:disabled]:border-transparent", size === INPUT_SIZES.REGULAR &&
             "py-1.5 px-2 text-body leading-body-compact font-medium gap-2", size === INPUT_SIZES.LARGE &&
             "py-[11px] px-4 text-base leading-base-compact font-medium gap-3", wrapperClassName), children: [leftIcon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center", children: leftIcon })), jsxRuntime.jsx("input", { ref: ref, className: cn("border-none outline-none p-0 flex-1 bg-transparent text-comp-mono-default placeholder:text-comp-mono-subtle-default hover:placeholder:text-comp-mono-subtle-hovered focus:placeholder:text-comp-mono-subtle-selected disabled:text-comp-disabled disabled:placeholder:text-comp-disabled", size === INPUT_SIZES.REGULAR &&
@@ -3583,7 +3610,7 @@ Input.displayName = "Input";
  * />
  * ```
  */
-const TextArea = React.forwardRef((rest, ref) => {
+const TextArea = react.forwardRef((rest, ref) => {
     return (jsxRuntime.jsx("div", { className: "py-3 px-4 flex-1 h-full", children: jsxRuntime.jsx("textarea", { ref: ref, className: cn("w-full h-full flex-1 p-0 text-body leading-body font-medium border-none resize-none outline-none text-comp-mono-default disabled:text-comp-disabled disabled:placeholder:text-comp-disabled placeholder:text-comp-mono-subtle-default", rest.className), ...rest }) }));
 });
 TextArea.displayName = "TextArea";
@@ -3607,19 +3634,19 @@ TextArea.displayName = "TextArea";
  *   </CardFooter>
  * </Card>
  */
-const Card = React.forwardRef(({ className, ...rest }, ref) => {
+const Card = react.forwardRef(({ className, ...rest }, ref) => {
     return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: cn("flex flex-col rounded-2xl border border-border-divider bg-page-l0", className), children: rest.children }));
 });
-const CardBody = React.forwardRef(({ className, ...rest }, ref) => {
+const CardBody = react.forwardRef(({ className, ...rest }, ref) => {
     return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: cn("p-6", className), children: rest.children }));
 });
-const CardHeader = React.forwardRef(({ className, ...rest }, ref) => {
+const CardHeader = react.forwardRef(({ className, ...rest }, ref) => {
     return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: cn("text-comp-mono-default font-bold text-xl leading-xl-compact mb-2", className), children: rest.children }));
 });
-const CardContent = React.forwardRef((rest, ref) => {
+const CardContent = react.forwardRef((rest, ref) => {
     return (jsxRuntime.jsx("div", { ...rest, ref: ref, children: rest.children }));
 });
-const CardFooter = React.forwardRef(({ className, ...rest }, ref) => {
+const CardFooter = react.forwardRef(({ className, ...rest }, ref) => {
     return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: cn("py-4 px-6", className), children: rest.children }));
 });
 
@@ -3677,7 +3704,7 @@ var defaultAttributes = {
  */
 
 
-const Icon = React.forwardRef(
+const Icon = react.forwardRef(
   ({
     color = "currentColor",
     size = 24,
@@ -3687,7 +3714,7 @@ const Icon = React.forwardRef(
     children,
     iconNode,
     ...rest
-  }, ref) => React.createElement(
+  }, ref) => react.createElement(
     "svg",
     {
       ref,
@@ -3701,7 +3728,7 @@ const Icon = React.forwardRef(
       ...rest
     },
     [
-      ...iconNode.map(([tag, attrs]) => React.createElement(tag, attrs)),
+      ...iconNode.map(([tag, attrs]) => react.createElement(tag, attrs)),
       ...Array.isArray(children) ? children : [children]
     ]
   )
@@ -3716,8 +3743,8 @@ const Icon = React.forwardRef(
 
 
 const createLucideIcon = (iconName, iconNode) => {
-  const Component = React.forwardRef(
-    ({ className, ...props }, ref) => React.createElement(Icon, {
+  const Component = react.forwardRef(
+    ({ className, ...props }, ref) => react.createElement(Icon, {
       ref,
       iconNode,
       className: mergeClasses(
@@ -3783,8 +3810,8 @@ const __iconNode = [
 ];
 const X = createLucideIcon("x", __iconNode);
 
-const Tag = React.forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, ...props }, ref) => {
-    const [isSelected, setIsSelected] = React.useState(false);
+const Tag = react.forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, ...props }, ref) => {
+    const [isSelected, setIsSelected] = react.useState(false);
     const handleClick = (event) => {
         setIsSelected((prev) => !prev);
         onClick?.(event);
@@ -3810,6 +3837,15 @@ const Tag = React.forwardRef(({ icon, value, variant = "filled", size = "regular
 });
 Tag.displayName = "Tag";
 
+const TAG_VARIANTS = {
+    FILLED: "filled",
+    ACCENT: "accent",
+};
+const TAG_SIZES = {
+    REGULAR: "regular",
+    SMALL: "small",
+};
+
 const Pagination = ({ className, ...rest }) => {
     return (jsxRuntime.jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto my-0 flex justify-center w-full", className), ...rest }));
 };
@@ -3832,12 +3868,16 @@ const PaginationEllipsis = ({ className, ...rest }) => {
     return (jsxRuntime.jsx("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex items-center justify-center size-9 rounded-md hover:bg-fill-mono-hovered", className), ...rest, children: jsxRuntime.jsx(Ellipsis, { className: "size-4 stroke-comp-mono-subtle-default" }) }));
 };
 
+exports.BUTTON_SIZES = BUTTON_SIZES;
+exports.BUTTON_VARIANTS = BUTTON_VARIANTS;
 exports.Button = Button;
 exports.Card = Card;
 exports.CardBody = CardBody;
 exports.CardContent = CardContent;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
+exports.FONT_WEIGHTS = FONT_WEIGHTS;
+exports.INPUT_SIZES = INPUT_SIZES;
 exports.Input = Input;
 exports.Pagination = Pagination;
 exports.PaginationContent = PaginationContent;
@@ -3846,6 +3886,11 @@ exports.PaginationItem = PaginationItem;
 exports.PaginationLink = PaginationLink;
 exports.PaginationNext = PaginationNext;
 exports.PaginationPrevious = PaginationPrevious;
+exports.TAG_SIZES = TAG_SIZES;
+exports.TAG_VARIANTS = TAG_VARIANTS;
+exports.TEXT_ALIGNMENTS = TEXT_ALIGNMENTS;
+exports.TEXT_SIZES = TEXT_SIZES;
+exports.TEXT_VARIANTS = TEXT_VARIANTS;
 exports.Tag = Tag;
 exports.Text = Text;
 exports.TextArea = TextArea;

package/dist/cjs/radio-group/index.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { RadioGroup as RadioGroupRadix } from "radix-ui";
 import { RadioGroupOrientation } from "./types";
 interface RadioGroupProps extends RadioGroupRadix.RadioGroupProps {
@@ -22,12 +21,12 @@ interface RadioGroupProps extends RadioGroupRadix.RadioGroupProps {
  * </RadioGroup>
  * ```
  */
-export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 interface RadioItemProps extends RadioGroupRadix.RadioGroupItemProps {
     label?: string;
     labelClassName?: string;
     wrapperClassName?: string;
     className?: string;
 }
-export declare const RadioItem: React.ForwardRefExoticComponent<RadioItemProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const RadioItem: import("react").ForwardRefExoticComponent<RadioItemProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/client.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default from 'react';
+import React__default, { ReactNode, Ref } from 'react';
 import { RadioGroup as RadioGroup$1, Checkbox as Checkbox$1, Dialog as Dialog$1, Select as Select$1, Tooltip as Tooltip$1, Popover, ContextMenu as ContextMenu$1 } from 'radix-ui';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DayPicker, DateRange } from 'react-day-picker';
@@ -31,14 +31,14 @@ interface RadioGroupProps extends RadioGroup$1.RadioGroupProps {
  * </RadioGroup>
  * ```
  */
-declare const RadioGroup: React__default.ForwardRefExoticComponent<RadioGroupProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 interface RadioItemProps extends RadioGroup$1.RadioGroupItemProps {
     label?: string;
     labelClassName?: string;
     wrapperClassName?: string;
     className?: string;
 }
-declare const RadioItem: React__default.ForwardRefExoticComponent<RadioItemProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const RadioItem: React$1.ForwardRefExoticComponent<RadioItemProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 interface CheckboxProps extends Checkbox$1.CheckboxProps {
     label?: string;
@@ -60,7 +60,7 @@ interface CheckboxProps extends Checkbox$1.CheckboxProps {
  * />
  * ```
  */
-declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 type CardProps = React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 declare const CardBody: React__default.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
@@ -305,7 +305,7 @@ declare const TableCell: React__default.ForwardRefExoticComponent<Omit<TableCell
 /** table 기반 config로 테이블 완성 component */
 interface TableInfo<T> {
     header: string;
-    renderFn: (item: T) => React__default.ReactNode;
+    renderFn: (item: T) => ReactNode;
     minWidth?: number;
     maxWidth?: number;
     showTooltip?: boolean;
@@ -327,12 +327,12 @@ interface DataTableProps<T> {
         cell?: string;
     };
     refs?: {
-        tableRef?: React__default.Ref<HTMLTableElement>;
-        headerRef?: React__default.Ref<HTMLTableRowElement>;
-        bodyRef?: React__default.Ref<HTMLTableSectionElement>;
-        rowRef?: React__default.Ref<HTMLTableRowElement>;
-        cellRef?: React__default.Ref<HTMLTableCellElement>;
-        headRef?: React__default.Ref<HTMLTableCellElement>;
+        tableRef?: Ref<HTMLTableElement>;
+        headerRef?: Ref<HTMLTableRowElement>;
+        bodyRef?: Ref<HTMLTableSectionElement>;
+        rowRef?: Ref<HTMLTableRowElement>;
+        cellRef?: Ref<HTMLTableCellElement>;
+        headRef?: Ref<HTMLTableCellElement>;
     };
 }
 declare const DataTable: <T extends object>({ config, data, emptyMessage, onRowClick, enableSelection, shouldLastBorderRender, classNames, refs, }: DataTableProps<T>) => react_jsx_runtime.JSX.Element;
@@ -399,4 +399,4 @@ interface AutocompleteProps<T> {
 }
 declare const Autocomplete: <T>({ placeholder, data, value, displayValue, onSelect, onChange, noResultsMessage, maxResults, debounceTime, wrapperClassName, contentClassName, itemClassName, }: AutocompleteProps<T>) => react_jsx_runtime.JSX.Element;
 
-export { Autocomplete, Calendar, Checkbox, ContextMenu, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, HorizontalTab, HorizontalTabs, InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, ModeTab, ModeTabs, MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue, RadioGroup, RadioItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tooltip, TooltipArrow, TooltipContent, TooltipDescription, TooltipFooter, TooltipHeader, TooltipTrigger, VerticalMenu, VerticalMenus };
+export { Autocomplete, type AutocompleteProps, Calendar, type CalendarProps, Checkbox, ContextMenu, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, type DataTableConfig, type DataTableProps, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, HORIZONTAL_TAB_SIZES, HorizontalTab, type HorizontalTabSize, HorizontalTabs, InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, MULTIPLE_SELECT_SIZES, ModeTab, ModeTabs, MultipleSelect, MultipleSelectContent, type MultipleSelectSize, MultipleSelectTrigger, MultipleSelectValue, RadioGroup, type RadioGroupOrientation, RadioItem, SELECT_TRIGGER_SIZES, SELECT_TRIGGER_VARIANTS, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, type SelectTriggerSize, type SelectTriggerVariant, TOOLTIP_SHORT_SIZES, TOOLTIP_SHORT_VARIANTS, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tooltip, TooltipArrow, TooltipContent, TooltipDescription, TooltipFooter, TooltipHeader, type TooltipShortSize, type TooltipShortVariant, TooltipTrigger, VERTICAL_MENU_SIZES, VERTICAL_MENU_VARIANTS, VerticalMenu, type VerticalMenuSize, type VerticalMenuVariant, VerticalMenus };

package/dist/esm/autocomplete/index.d.ts

@@ -1,4 +1,4 @@
-interface AutocompleteProps<T> {
+export interface AutocompleteProps<T> {
     placeholder?: string;
     data: T[];
     value?: string;
@@ -13,4 +13,3 @@ interface AutocompleteProps<T> {
     itemClassName?: string;
 }
 export declare const Autocomplete: <T>({ placeholder, data, value, displayValue, onSelect, onChange, noResultsMessage, maxResults, debounceTime, wrapperClassName, contentClassName, itemClassName, }: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/esm/checkbox/index.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { Checkbox as CheckboxRadix } from "radix-ui";
 interface CheckboxProps extends CheckboxRadix.CheckboxProps {
     label?: string;
@@ -20,5 +19,5 @@ interface CheckboxProps extends CheckboxRadix.CheckboxProps {
  * />
  * ```
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/esm/client.d.ts

@@ -1,16 +1,31 @@
 export { RadioGroup, RadioItem } from "./radio-group";
+export type { RadioGroupOrientation } from "./radio-group/types";
 export { Checkbox } from "./checkbox";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, } from "./dialog";
 export { Select, SelectTrigger, SelectContent, SelectGroup, SelectLabel, SelectSeparator, SelectItem, } from "./select";
+export { SELECT_TRIGGER_SIZES, SELECT_TRIGGER_VARIANTS } from "./select/types";
+export type { SelectTriggerSize, SelectTriggerVariant } from "./select/types";
 export { VerticalMenus, VerticalMenu } from "./vertical-menu";
+export { VERTICAL_MENU_SIZES, VERTICAL_MENU_VARIANTS, } from "./vertical-menu/types";
+export type { VerticalMenuSize, VerticalMenuVariant, } from "./vertical-menu/types";
 export { HorizontalTabs, HorizontalTab } from "./horizontal-tab";
+export { HORIZONTAL_TAB_SIZES } from "./horizontal-tab/types";
+export type { HorizontalTabSize } from "./horizontal-tab/types";
 export { ModeTabs, ModeTab } from "./mode-tab";
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipArrow, TooltipHeader, TooltipDescription, TooltipFooter, } from "./tooltip";
+export { TOOLTIP_SHORT_VARIANTS, TOOLTIP_SHORT_SIZES } from "./tooltip/types";
+export type { TooltipShortSize, TooltipShortVariant } from "./tooltip/types";
 export { MultipleSelect, MultipleSelectTrigger, MultipleSelectContent, MultipleSelectValue, } from "./multiple-select";
+export { MULTIPLE_SELECT_SIZES } from "./multiple-select/types";
+export type { MultipleSelectSize } from "./multiple-select/types";
 export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, } from "./table";
 export { DataTable } from "./data-table";
+export type { DataTableConfig, DataTableProps } from "./data-table";
 export { InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, } from "./interactive-list-item";
 export { Calendar } from "./calendar";
+export type { CalendarProps } from "./calendar";
 export { DatePicker } from "./date-picker";
+export type { DatePickerProps } from "./date-picker";
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuArrow, ContextMenuLabel, ContextMenuItem, ContextMenuGroup, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuSeparator, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuItemIndicator, } from "./context-menu";
 export { Autocomplete } from "./autocomplete";
+export type { AutocompleteProps } from "./autocomplete";

package/dist/esm/client.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, useLayoutEffect, forwardRef, createElement, createContext, useContext, useEffect, useRef, useCallback } from 'react';
+import React__default, { useState, useLayoutEffect, forwardRef, createElement, createContext, useId as useId$1, useContext, useEffect, useMemo, useRef, useCallback } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import { DayPicker } from 'react-day-picker';
@@ -11871,13 +11871,13 @@ const RadioGroupContext = createContext({ value: "", disabled: false });
  * </RadioGroup>
  * ```
  */
-const RadioGroup = React__default.forwardRef(({ className, orientation = "vertical", ...rest }, ref) => {
+const RadioGroup = forwardRef(({ className, orientation = "vertical", ...rest }, ref) => {
     const { disabled, children, value, ...restProps } = rest;
     return (jsx(RadioGroupContext, { value: { value: value ?? "", disabled: disabled ?? false }, children: jsx(Root2$1, { ...restProps, ref: ref, className: cn("flex flex-col gap-3", orientation === RADIO_GROUP_ORIENTAIONS.HORIZONTAL && "flex-row", className), children: children }) }));
 });
-const RadioItem = React__default.forwardRef(({ label, labelClassName, wrapperClassName, ...rest }, ref) => {
+const RadioItem = forwardRef(({ label, labelClassName, wrapperClassName, ...rest }, ref) => {
     const { id, value, disabled, className, ...restProps } = rest;
-    const randomId = id ?? React__default.useId();
+    const randomId = id ?? useId$1();
     const isSelected = useContext(RadioGroupContext).value === value;
     const isDisabled = useContext(RadioGroupContext).disabled || disabled || false;
     return (jsxs("div", { className: cn("flex items-center gap-1.5 cursor-pointer bg-transparent border-none", wrapperClassName), children: [jsx(Item2, { ...restProps, id: randomId, ref: ref, value: value, disabled: isDisabled, className: cn("bg-transparent border-none p-0 flex items-center outline-none justify-center cursor-pointer", className), children: isDisabled ? (jsx(CircleBackslashIcon, { className: "stroke-comp-disabled" })) : isSelected ? (jsx(RadiobuttonIcon, { className: "stroke-comp-mono-selected" })) : (jsx(CircleIcon, { className: "stroke-comp-mono-default" })) }), label && (jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", isDisabled && "text-comp-disabled cursor-default", isSelected && "text-comp-mono-selected", labelClassName), htmlFor: randomId, children: label }))] }));
@@ -12102,13 +12102,13 @@ const X = createLucideIcon("x", __iconNode);
  * />
  * ```
  */
-const Checkbox = React__default.forwardRef(({ label, labelClassName, wrapperClassName, ...rest }, ref) => {
+const Checkbox = forwardRef(({ label, labelClassName, wrapperClassName, ...rest }, ref) => {
     const { checked: isChecked, defaultChecked, id, disabled, className, onCheckedChange: onChange, } = rest;
-    const [checked, setChecked] = React__default.useState(isChecked ?? defaultChecked);
+    const [checked, setChecked] = useState(isChecked ?? defaultChecked);
     useEffect(() => {
         setChecked(isChecked ?? defaultChecked);
     }, [isChecked, defaultChecked]);
-    const randomId = React__default.useId();
+    const randomId = useId$1();
     const checkboxIconClass = cn("size-4 fill-transparent stroke-comp-mono-default", checked && "stroke-comp-mono-selected", disabled && "stroke-comp-disabled cursor-default");
     const renderCheckboxIcon = (checked, disabled) => {
         if (disabled) {
@@ -12146,19 +12146,19 @@ Checkbox.displayName = "Checkbox";
  *   </CardFooter>
  * </Card>
  */
-const Card = React__default.forwardRef(({ className, ...rest }, ref) => {
+const Card = forwardRef(({ className, ...rest }, ref) => {
     return (jsx("div", { ...rest, ref: ref, className: cn("flex flex-col rounded-2xl border border-border-divider bg-page-l0", className), children: rest.children }));
 });
-const CardBody = React__default.forwardRef(({ className, ...rest }, ref) => {
+const CardBody = forwardRef(({ className, ...rest }, ref) => {
     return (jsx("div", { ...rest, ref: ref, className: cn("p-6", className), children: rest.children }));
 });
-const CardHeader = React__default.forwardRef(({ className, ...rest }, ref) => {
+const CardHeader = forwardRef(({ className, ...rest }, ref) => {
     return (jsx("div", { ...rest, ref: ref, className: cn("text-comp-mono-default font-bold text-xl leading-xl-compact mb-2", className), children: rest.children }));
 });
-React__default.forwardRef((rest, ref) => {
+forwardRef((rest, ref) => {
     return (jsx("div", { ...rest, ref: ref, children: rest.children }));
 });
-const CardFooter = React__default.forwardRef(({ className, ...rest }, ref) => {
+const CardFooter = forwardRef(({ className, ...rest }, ref) => {
     return (jsx("div", { ...rest, ref: ref, className: cn("py-4 px-6", className), children: rest.children }));
 });
 
@@ -12285,8 +12285,8 @@ const VerticalMenusContext = createContext({
     disabled: false,
     setSelectedMenu: () => { },
 });
-const VerticalMenus = React__default.forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
-    const [selectedMenu, setSelectedMenu] = React__default.useState(value || "");
+const VerticalMenus = forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
+    const [selectedMenu, setSelectedMenu] = useState(value || "");
     useEffect(() => {
         if (!onValueChange)
             return;
@@ -12298,7 +12298,7 @@ const VerticalMenus = React__default.forwardRef(({ disabled, value, onValueChang
             setSelectedMenu,
         }, children: jsx("div", { ref: ref, className: cn("flex flex-col w-full gap-2 p-2", className), ...rest, children: rest.children }) }));
 });
-const VerticalMenu = React__default.forwardRef(({ disabled, value, label, icon, variant = "accent", size = "regular", ...rest }, ref) => {
+const VerticalMenu = forwardRef(({ disabled, value, label, icon, variant = "accent", size = "regular", ...rest }, ref) => {
     const context = useContext(VerticalMenusContext);
     const isSelected = context.value === value;
     const isDisabled = context.disabled || disabled || false;
@@ -12359,14 +12359,14 @@ const HorizontalTab = React__default.forwardRef(({ value, label, className, icon
         `, isSelected && "text-comp-mono-subtle-selected font-bold", className), onClick: handleClick, disabled: isDisabled, "data-selected": isSelected, ...rest, children: [jsxs("div", { className: cn("flex items-center justify-center gap-2", size === HORIZONTAL_TAB_SIZES.SMALL && "py-1 px-2", size === HORIZONTAL_TAB_SIZES.REGULAR && "py-2.5 px-2"), children: [icon && (jsx("span", { className: cn("flex items-center justify-center size-5", size === HORIZONTAL_TAB_SIZES.SMALL && "size-4"), children: icon })), label] }), jsx("div", { className: cn("bg-comp-mono-subtle-default mt-[3px] h-[1px] w-full", isSelected && "bg-comp-mono-subtle-selected h-0.5 mt-0.5"), "data-selected": isSelected })] }));
 });
 
-const ModeTabContext = React__default.createContext({
+const ModeTabContext = createContext({
     value: "",
     disabled: false,
     setSelectedTab: () => { },
 });
-const ModeTabs = React__default.forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
-    const [selectedTab, setSelectedTab] = React__default.useState(value || "");
-    React__default.useEffect(() => {
+const ModeTabs = forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
+    const [selectedTab, setSelectedTab] = useState(value || "");
+    useEffect(() => {
         if (!onValueChange)
             return;
         onValueChange(selectedTab);
@@ -12377,8 +12377,8 @@ const ModeTabs = React__default.forwardRef(({ disabled, value, onValueChange, cl
             setSelectedTab,
         }, children: jsx("div", { ref: ref, className: cn("flex items-center w-full bg-page-l2 rounded-lg p-1 box-content", className), ...rest, children: rest.children }) }));
 });
-const ModeTab = React__default.forwardRef(({ label, icon, value, className, ...rest }, ref) => {
-    const { value: selectedTab, disabled, setSelectedTab, } = React__default.useContext(ModeTabContext);
+const ModeTab = forwardRef(({ label, icon, value, className, ...rest }, ref) => {
+    const { value: selectedTab, disabled, setSelectedTab, } = useContext(ModeTabContext);
     const isSelected = selectedTab === value;
     const isDisabled = disabled || rest.disabled;
     const handleClick = () => {
@@ -12420,21 +12420,21 @@ const TooltipContent = ({ type, ...rest }) => {
                 "py-1.5 px-2 text-label leading-label-compact font-medium", className), ...otherProps, children: rest.children }) }));
 };
 const TooltipArrow = Arrow2;
-const TooltipHeader = React__default.forwardRef((props, ref) => {
+const TooltipHeader = forwardRef((props, ref) => {
     const { className, ...otherProps } = props;
     return (jsx("div", { className: cn("text-base leading-base-compact font-medium text-comp-mono-default", className), ...otherProps, ref: ref, children: props.children }));
 });
-const TooltipDescription = React__default.forwardRef((props, ref) => {
+const TooltipDescription = forwardRef((props, ref) => {
     const { className, ...otherProps } = props;
     return (jsx("div", { className: cn("text-body leading-body font-normal text-comp-mono-subtle-default", className), ...otherProps, ref: ref, children: props.children }));
 });
-const TooltipFooter = React__default.forwardRef((props, ref) => {
+const TooltipFooter = forwardRef((props, ref) => {
     const { className, ...otherProps } = props;
     return (jsx("div", { className: cn("flex items-center justify-between pt-4", className), ...otherProps, ref: ref, children: props.children }));
 });
 
-const Tag = React__default.forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, ...props }, ref) => {
-    const [isSelected, setIsSelected] = React__default.useState(false);
+const Tag = forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, ...props }, ref) => {
+    const [isSelected, setIsSelected] = useState(false);
     const handleClick = (event) => {
         setIsSelected((prev) => !prev);
         onClick?.(event);
@@ -12484,7 +12484,7 @@ const INPUT_SIZES = {
  * />
  * ```
  */
-const Input = React__default.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, ...rest }, ref) => {
+const Input = forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, ...rest }, ref) => {
     return (jsxs("div", { "aria-disabled": rest.disabled, className: cn("flex itesm-center justify-center rounded-lg bg-fill-mono-default hover:bg-fill-mono-hovered focus-within:bg-fill-mono-default border border-border-bound focus-within:border-border-focused has-[input:disabled]:border-transparent", size === INPUT_SIZES.REGULAR &&
             "py-1.5 px-2 text-body leading-body-compact font-medium gap-2", size === INPUT_SIZES.LARGE &&
             "py-[11px] px-4 text-base leading-base-compact font-medium gap-3", wrapperClassName), children: [leftIcon && (jsx("span", { className: "flex items-center justify-center", children: leftIcon })), jsx("input", { ref: ref, className: cn("border-none outline-none p-0 flex-1 bg-transparent text-comp-mono-default placeholder:text-comp-mono-subtle-default hover:placeholder:text-comp-mono-subtle-hovered focus:placeholder:text-comp-mono-subtle-selected disabled:text-comp-disabled disabled:placeholder:text-comp-disabled", size === INPUT_SIZES.REGULAR &&
@@ -12498,16 +12498,16 @@ const MULTIPLE_SELECT_SIZES = {
     LARGE: "large",
 };
 
-const MultipleSelectContext = React__default.createContext({
+const MultipleSelectContext = createContext({
     isOpen: false,
     values: [],
     disabled: false,
     setSelectedValues: () => { },
     setIsOpen: () => { },
 });
-const MultipleSelect = React__default.forwardRef(({ open, onOpenChange, disabled, value, onValueChange, className, children, ...rest }, ref) => {
-    const [isOpen, setIsOpen] = React__default.useState(open || false);
-    const [selectedValues, setSelectedValues] = React__default.useState([]);
+const MultipleSelect = forwardRef(({ open, onOpenChange, disabled, value, onValueChange, className, children, ...rest }, ref) => {
+    const [isOpen, setIsOpen] = useState(open || false);
+    const [selectedValues, setSelectedValues] = useState([]);
     useEffect(() => {
         setIsOpen(open || false);
     }, [open]);
@@ -12527,9 +12527,9 @@ const MultipleSelect = React__default.forwardRef(({ open, onOpenChange, disabled
             setIsOpen: onTriggerOpenChange,
         }, children: jsx("div", { ref: ref, className: cn("relative", className), ...rest, children: children }) }));
 });
-const MultipleSelectTrigger = React__default.forwardRef(({ size = "regular", children, ...rest }, ref) => {
+const MultipleSelectTrigger = forwardRef(({ size = "regular", children, ...rest }, ref) => {
     const { className, onClick, ...otherProps } = rest;
-    const { disabled, values, isOpen, setIsOpen } = React__default.useContext(MultipleSelectContext);
+    const { disabled, values, isOpen, setIsOpen } = useContext(MultipleSelectContext);
     const handleTriggerClick = (e) => {
         e.stopPropagation();
         if (disabled)
@@ -12540,9 +12540,9 @@ const MultipleSelectTrigger = React__default.forwardRef(({ size = "regular", chi
     };
     return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between rounded-lg cursor-pointer border border-border-bound bg-fill-mono-default hover:bg-fill-mono-hovered", values.length > 0 && "border-border-focused", disabled && "border-none cursor-not-allowed", size === MULTIPLE_SELECT_SIZES.REGULAR && "py-1.5 px-3 gap-1", size === MULTIPLE_SELECT_SIZES.LARGE && "py-3 pr-4 pl-3 gap-2", className), "data-disabled": disabled, "data-selected": values.length > 0, onClick: handleTriggerClick, ...otherProps, children: [children, jsx("span", { className: "flex items-center justify-center size-4", children: jsx(ChevronDown, { size: 16 }) })] }));
 });
-const MultipleSelectValue = React__default.forwardRef(({ placeholder, className, ...rest }, ref) => {
-    const { values, disabled, setSelectedValues } = React__default.useContext(MultipleSelectContext);
-    const [content, setContent] = React__default.useState(null);
+const MultipleSelectValue = forwardRef(({ placeholder, className, ...rest }, ref) => {
+    const { values, disabled, setSelectedValues } = useContext(MultipleSelectContext);
+    const [content, setContent] = useState(null);
     const composedRefs = useComposedRefs(ref, (node) => setContent(node));
     const onDeleteClick = (value, e) => {
         e.stopPropagation();
@@ -12553,9 +12553,9 @@ const MultipleSelectValue = React__default.forwardRef(({ placeholder, className,
             "--select-content-width": `${content?.offsetWidth}px`,
         }, className: cn("flex-1 flex gap-1 flex-wrap", className), ...rest, children: values?.length > 0 ? (values.map((val) => (jsx(Tag, { value: { id: val.value, label: val.label }, disabled: disabled, className: "max-w-[var(--select-content-width)]", onDeleteClick: onDeleteClick }, val.value)))) : (jsx("span", { "data-disabled": disabled, className: "text-comp-mono-subtle-default text-body leading-body-compact font-medium", children: placeholder || "Select options" })) }));
 });
-const MultipleSelectContent = React__default.forwardRef(({ useSearch, options: optionsProps, indicator, className, ...rest }, ref) => {
-    const { isOpen, setIsOpen } = React__default.useContext(MultipleSelectContext);
-    const [content, setContent] = React__default.useState(null);
+const MultipleSelectContent = forwardRef(({ useSearch, options: optionsProps, indicator, className, ...rest }, ref) => {
+    const { isOpen, setIsOpen } = useContext(MultipleSelectContext);
+    const [content, setContent] = useState(null);
     const composedRefs = useComposedRefs(ref, (node) => setContent(node));
     const [options, setOptions] = useState(optionsProps);
     useEffect(() => {
@@ -12572,7 +12572,7 @@ const MultipleSelectContent = React__default.forwardRef(({ useSearch, options: o
         const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchValue));
         setOptions(filteredOptions);
     };
-    React__default.useEffect(() => {
+    useEffect(() => {
         const handleMouseUp = (event) => {
             if (!content?.contains(event.target)) {
                 setIsOpen(false);
@@ -12583,7 +12583,7 @@ const MultipleSelectContent = React__default.forwardRef(({ useSearch, options: o
             document.removeEventListener("mouseup", handleMouseUp);
         };
     }, [setIsOpen, content]);
-    React__default.useEffect(() => {
+    useEffect(() => {
         const close = () => setIsOpen(false);
         window.addEventListener("blur", close);
         window.addEventListener("resize", close);
@@ -12594,8 +12594,8 @@ const MultipleSelectContent = React__default.forwardRef(({ useSearch, options: o
     }, [setIsOpen]);
     return (isOpen && (jsxs("div", { ref: composedRefs, className: cn("flex-1 absolute top-[calc(100%+4px)] left-0 z-[1000] w-[calc(100%-16px)] bg-page-l1 rounded-xl shadow-medium p-2 border border-border-overlay", className), ...rest, children: [useSearch && (jsx("div", { className: "pb-2 mb-2 border-b border-b-border-divider", children: jsx(Input, { onChange: handleSearchChange, leftIcon: jsx(MagnifyingGlassIcon, { width: 20, height: 20 }), placeholder: "Enter any characters..." }) })), jsx("ul", { className: "p-0 m-0 flex flex-col gap-1 list-none", children: options.map((option) => (jsx(MultipleSelectItem, { option: option, indicator: indicator }, option.value))) })] })));
 });
-const MultipleSelectItem = React__default.forwardRef(({ option, indicator, className, ...rest }, ref) => {
-    const { values, setSelectedValues } = React__default.useContext(MultipleSelectContext);
+const MultipleSelectItem = forwardRef(({ option, indicator, className, ...rest }, ref) => {
+    const { values, setSelectedValues } = useContext(MultipleSelectContext);
     const isSelected = values.some((val) => val.value === option.value);
     const handleClick = (e) => {
         e.stopPropagation();
@@ -12610,28 +12610,28 @@ const MultipleSelectItem = React__default.forwardRef(({ option, indicator, class
             "bg-fill-disabled text-comp-disabled cursor-not-allowed", className), onClick: handleClick, ...rest, children: [jsx("span", { className: "flex-1 overflow-ellipsis overflow-x-hidden whitespace-nowrap text-inherit text-size-inherit leading-inherit font-inherit", children: option.label }), indicator && isSelected && (jsx("span", { className: "flex items-center justify-center size-4", children: indicator }))] }));
 });
 
-const Table = React__default.forwardRef(({ className, ...rest }, ref) => {
+const Table = forwardRef(({ className, ...rest }, ref) => {
     return (jsx("table", { ref: ref, className: cn("w-full relative border-collapse", className), ...rest }));
 });
-const TableHeader = React__default.forwardRef(({ className, ...rest }, ref) => {
+const TableHeader = forwardRef(({ className, ...rest }, ref) => {
     return (jsx("thead", { children: jsx("tr", { ref: ref, className: cn("border-b border-b-border-divider bg-page-l1", className), ...rest }) }));
 });
-const TableBody = React__default.forwardRef(({ ...rest }, ref) => {
+const TableBody = forwardRef(({ ...rest }, ref) => {
     return jsx("tbody", { ref: ref, ...rest });
 });
-const TableRow = React__default.forwardRef(({ isSelected, shouldLastBorderRender = true, className, ...rest }, ref) => {
+const TableRow = forwardRef(({ isSelected, shouldLastBorderRender = true, className, ...rest }, ref) => {
     return (jsx("tr", { ref: ref, "data-selected": isSelected, "data-last-border": shouldLastBorderRender, className: cn("border-b border-border-divider hover:bg-fill-mono-hovered", isSelected && "bg-fill-mono-selected", !shouldLastBorderRender && "last:border-b-0", className), ...rest }));
 });
-const TableHead = React__default.forwardRef(({ className, children, ...rest }, ref) => {
+const TableHead = forwardRef(({ className, children, ...rest }, ref) => {
     return (jsx("th", { ref: ref, className: cn("text-body leading-body font-medium py-5 pr-0 pl-9 last:pr-9 align-middle text-comp-mono-subtle-default text-left", className), ...rest, children: jsx("div", { className: "overflow-hidden overflow-ellipsis whitespace-nowrap", children: children }) }));
 });
-const TableCell = React__default.forwardRef(({ className, children, showTooltip, ...rest }, ref) => {
+const TableCell = forwardRef(({ className, children, showTooltip, ...rest }, ref) => {
     return (jsx("td", { ref: ref, className: cn("text-body leading-body font-medium py-5 pr-0 pl-9 last:pr-9 align-middle text-comp-mono-default", className), ...rest, children: showTooltip ? (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { className: "overflow-hidden overflow-ellipsis whitespace-nowrap", children: children }) }), jsx(TooltipContent, { type: "short", side: "bottom", sideOffset: 10, children: children })] })) : (jsx("div", { className: "overflow-hidden overflow-ellipsis whitespace-nowrap", children: children })) }));
 });
 
 const DataTable = ({ config, data, emptyMessage, onRowClick, enableSelection = false, shouldLastBorderRender = true, classNames, refs, }) => {
-    const [selectedRow, setSelectedRow] = React__default.useState(undefined);
-    const rowData = React__default.useMemo(() => {
+    const [selectedRow, setSelectedRow] = useState(undefined);
+    const rowData = useMemo(() => {
         return data.map((item) => ({
             ...item,
             randomId: crypto.randomUUID(),
@@ -12648,20 +12648,20 @@ const DataTable = ({ config, data, emptyMessage, onRowClick, enableSelection = f
     return (jsxs(Table, { className: classNames?.table, ref: refs?.tableRef, children: [jsx(TableHeader, { className: classNames?.header, ref: refs?.headerRef, children: config.map((col) => (jsx(TableHead, { style: { minWidth: col.minWidth, maxWidth: col.maxWidth }, className: classNames?.head, ref: refs?.headRef, children: col.header }, col.header))) }), jsx(TableBody, { className: classNames?.body, ref: refs?.bodyRef, children: rowData.length > 0 ? (rowData.map((item, index) => (jsx(TableRow, { id: item.randomId, onClick: () => handleRowClick(item, item.randomId), isSelected: selectedRow === item.randomId, shouldLastBorderRender: shouldLastBorderRender, className: classNames?.row, ref: refs?.rowRef, children: config.map((col, colIndex) => (jsx(TableCell, { className: classNames?.cell, ref: refs?.cellRef, showTooltip: col.showTooltip, children: col.renderFn(item) || "-" }, colIndex))) }, index)))) : emptyMessage ? (jsx(TableRow, { ref: refs?.rowRef, className: classNames?.row, children: jsx(TableCell, { colSpan: config.length, className: classNames?.cell, ref: refs?.cellRef, children: emptyMessage }) })) : null })] }));
 };
 
-const InteractiveListItemContext = React__default.createContext({
+const InteractiveListItemContext = createContext({
     disabled: false,
 });
-const InteractiveListItem = React__default.forwardRef(({ isSelected, disabled, showHoverActions = true, children, className, ...rest }, ref) => {
+const InteractiveListItem = forwardRef(({ isSelected, disabled, showHoverActions = true, children, className, ...rest }, ref) => {
     return (jsx(InteractiveListItemContext, { value: { disabled: !!disabled }, children: jsx("div", { ref: ref, "data-selected": isSelected, "data-disabled": disabled, "data-hover-actions": showHoverActions, className: cn("flex items-center gap-1 p-1.5 rounded-sm cursor-pointer text-comp-mono-default bg-fill-mono-default border border-transparent hover:bg-fill-mono-hovered active:bg-fill-mono-pressed", isSelected && "bg-fill-mono-selected border-border-selected", disabled &&
                 "cursor-not-allowed text-comp-disabled bg-fill-disabled", className), ...rest, children: children }) }));
 });
-const InteractiveListItemIcon = React__default.forwardRef(({ children, className, ...props }, ref) => {
+const InteractiveListItemIcon = forwardRef(({ children, className, ...props }, ref) => {
     return (jsx("span", { className: cn("flex items-center justify-center size-6 p-1", className), ...props, ref: ref, children: children }));
 });
-const InteractiveListItemContent = React__default.forwardRef(({ children, className, ...rest }, ref) => {
+const InteractiveListItemContent = forwardRef(({ children, className, ...rest }, ref) => {
     return (jsx("div", { className: cn("grow text-inherit leading-body-compact font-medium text-body", className), ...rest, ref: ref, children: children }));
 });
-const InteractiveListItemActions = React__default.forwardRef(({ children, className, ...props }, ref) => {
+const InteractiveListItemActions = forwardRef(({ children, className, ...props }, ref) => {
     return (jsx("div", { className: cn("flex items-center justify-center gap-2", className), ...props, ref: ref, children: children }));
 });
 
@@ -12715,7 +12715,7 @@ const BUTTON_VARIANTS = {
  * </Button>
  * ```
  */
-const Button = React__default.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, ...rest }, ref) => {
+const Button = forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, ...rest }, ref) => {
     return (jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", size === BUTTON_SIZES.SMALL &&
             "h-7 py-0 px-1.5 text-label leading-label-compact", size === BUTTON_SIZES.REGULAR &&
             "h-9 py-0 px-2 text-body leading-body-compact", size === BUTTON_SIZES.LARGE &&
@@ -12739,8 +12739,8 @@ var dayjs_minExports = dayjs_min.exports;
 var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
 
 const DatePicker = ({ size = "regular", placeholder = "Pick a date", format = "YYYY. MM. DD.", value, mode = "single", onChange, isInstantClose = false, open: openProp, onOpenChange: onOpenChangeProp, disabled, ...rest }) => {
-    const [inputValue, setInputValue] = React__default.useState(value);
-    const [open, setOpen] = React__default.useState(openProp || false);
+    const [inputValue, setInputValue] = useState(value);
+    const [open, setOpen] = useState(openProp || false);
     const handleSelect = (date) => {
         if (mode === "single") {
             const value = date;
@@ -12922,4 +12922,4 @@ const Autocomplete = ({ placeholder, data, value, displayValue, onSelect, onChan
                     : undefined }), showSuggestions && (jsx("ul", { id: "autocomplete-suggestions", role: "listbox", className: cn("absolute top-calc(100%-10px) left-0 z-[20] p-2 bg-page-l1 shadow-medium border border-border-overlay rounded-lg w-[calc(100%-16px)]", contentClassName), children: filteredResults.length > 0 ? (filteredResults.map((item, index) => (jsx(AutocompleteContentItem, { item: item, index: index, highlightedIndex: highlightedIndex, onClick: handleItemClick, displayValue: displayValue, inputValue: inputValue, className: itemClassName }, displayValue(item) + index)))) : (jsx("li", { "data-no-results": true, className: "rounded-sm p-2 bg-fill-mono-default text-comp-mono-default text-body leading-body-compact font-medium list-none text-center", children: noResultsMessage })) }))] }));
 };
 
-export { Autocomplete, Calendar, Checkbox, ContextMenu, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, HorizontalTab, HorizontalTabs, InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, ModeTab, ModeTabs, MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue, RadioGroup, RadioItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tooltip, TooltipArrow, TooltipContent, TooltipDescription, TooltipFooter, TooltipHeader, TooltipTrigger, VerticalMenu, VerticalMenus };
+export { Autocomplete, Calendar, Checkbox, ContextMenu, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, HORIZONTAL_TAB_SIZES, HorizontalTab, HorizontalTabs, InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, MULTIPLE_SELECT_SIZES, ModeTab, ModeTabs, MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue, RadioGroup, RadioItem, SELECT_TRIGGER_SIZES, SELECT_TRIGGER_VARIANTS, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, TOOLTIP_SHORT_SIZES, TOOLTIP_SHORT_VARIANTS, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tooltip, TooltipArrow, TooltipContent, TooltipDescription, TooltipFooter, TooltipHeader, TooltipTrigger, VERTICAL_MENU_SIZES, VERTICAL_MENU_VARIANTS, VerticalMenu, VerticalMenus };

package/dist/esm/data-table/index.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
+import { ReactNode, Ref } from "react";
 /** table 기반 config로 테이블 완성 component */
 interface TableInfo<T> {
     header: string;
-    renderFn: (item: T) => React.ReactNode;
+    renderFn: (item: T) => ReactNode;
     minWidth?: number;
     maxWidth?: number;
     showTooltip?: boolean;
@@ -24,12 +24,12 @@ export interface DataTableProps<T> {
         cell?: string;
     };
     refs?: {
-        tableRef?: React.Ref<HTMLTableElement>;
-        headerRef?: React.Ref<HTMLTableRowElement>;
-        bodyRef?: React.Ref<HTMLTableSectionElement>;
-        rowRef?: React.Ref<HTMLTableRowElement>;
-        cellRef?: React.Ref<HTMLTableCellElement>;
-        headRef?: React.Ref<HTMLTableCellElement>;
+        tableRef?: Ref<HTMLTableElement>;
+        headerRef?: Ref<HTMLTableRowElement>;
+        bodyRef?: Ref<HTMLTableSectionElement>;
+        rowRef?: Ref<HTMLTableRowElement>;
+        cellRef?: Ref<HTMLTableCellElement>;
+        headRef?: Ref<HTMLTableCellElement>;
     };
 }
 export declare const DataTable: <T extends object>({ config, data, emptyMessage, onRowClick, enableSelection, shouldLastBorderRender, classNames, refs, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/index.d.ts

@@ -1,7 +1,15 @@
 export { Button } from "./button";
+export { BUTTON_SIZES, BUTTON_VARIANTS } from "./button/types";
+export type { ButtonSize, ButtonVariant } from "./button/types";
 export { Text } from "./text";
+export { TEXT_SIZES, TEXT_VARIANTS, TEXT_ALIGNMENTS, FONT_WEIGHTS, } from "./text/types";
+export type { TextSize, FontWeight, TextAlignment, TextVariant, } from "./text/types";
 export { Input } from "./input";
+export { INPUT_SIZES } from "./input/types";
+export type { InputSize } from "./input/types";
 export { TextArea } from "./textarea";
 export { Card, CardBody, CardContent, CardFooter, CardHeader } from "./card";
 export { Tag } from "./tag";
+export { TAG_SIZES, TAG_VARIANTS } from "./tag/types";
+export type { TagSize, TagVariant } from "./tag/types";
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./pagination";

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { forwardRef, createElement } from 'react';
+import { forwardRef, createElement, useState } from 'react';
 
 const BUTTON_SIZES = {
     REGULAR: "regular",
@@ -3325,7 +3325,7 @@ function cn(...inputs) {
  * </Button>
  * ```
  */
-const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, ...rest }, ref) => {
+const Button = forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, ...rest }, ref) => {
     return (jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", size === BUTTON_SIZES.SMALL &&
             "h-7 py-0 px-1.5 text-label leading-label-compact", size === BUTTON_SIZES.REGULAR &&
             "h-9 py-0 px-2 text-body leading-body-compact", size === BUTTON_SIZES.LARGE &&
@@ -3339,6 +3339,33 @@ const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWid
 });
 Button.displayName = "Button";
 
+const TEXT_SIZES = {
+    XSMALL: "xsmall",
+    LABEL: "label",
+    BODY: "body",
+    BASE: "base",
+    LARGE: "large",
+    XLARGE: "xl",
+    XXLARGE: "xxl",
+    XXXLARGE: "xxxl",
+    XXXXLARGE: "xxxxl",
+};
+const FONT_WEIGHTS = {
+    THIN: "thin",
+    EXTRALIGHT: "extralight",
+    LIGHT: "light",
+    REGULAR: "regular",
+    MEDIUM: "medium",
+    SEMIBOLD: "semibold",
+    BOLD: "bold",
+    EXTRABOLD: "extrabold",
+};
+const TEXT_ALIGNMENTS = {
+    LEFT: "left",
+    CENTER: "center",
+    RIGHT: "right",
+    JUSTIFY: "justify",
+};
 const TEXT_VARIANTS = {
     BOLD3XLARGEBOLD: "bold3XLargeBold",
     BOLD2XLARGEBOLDCOMPACT: "bold2XLargeBoldCompact",
@@ -3556,7 +3583,7 @@ const INPUT_SIZES = {
  * />
  * ```
  */
-const Input = React.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, ...rest }, ref) => {
+const Input = forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, ...rest }, ref) => {
     return (jsxs("div", { "aria-disabled": rest.disabled, className: cn("flex itesm-center justify-center rounded-lg bg-fill-mono-default hover:bg-fill-mono-hovered focus-within:bg-fill-mono-default border border-border-bound focus-within:border-border-focused has-[input:disabled]:border-transparent", size === INPUT_SIZES.REGULAR &&
             "py-1.5 px-2 text-body leading-body-compact font-medium gap-2", size === INPUT_SIZES.LARGE &&
             "py-[11px] px-4 text-base leading-base-compact font-medium gap-3", wrapperClassName), children: [leftIcon && (jsx("span", { className: "flex items-center justify-center", children: leftIcon })), jsx("input", { ref: ref, className: cn("border-none outline-none p-0 flex-1 bg-transparent text-comp-mono-default placeholder:text-comp-mono-subtle-default hover:placeholder:text-comp-mono-subtle-hovered focus:placeholder:text-comp-mono-subtle-selected disabled:text-comp-disabled disabled:placeholder:text-comp-disabled", size === INPUT_SIZES.REGULAR &&
@@ -3581,7 +3608,7 @@ Input.displayName = "Input";
  * />
  * ```
  */
-const TextArea = React.forwardRef((rest, ref) => {
+const TextArea = forwardRef((rest, ref) => {
     return (jsx("div", { className: "py-3 px-4 flex-1 h-full", children: jsx("textarea", { ref: ref, className: cn("w-full h-full flex-1 p-0 text-body leading-body font-medium border-none resize-none outline-none text-comp-mono-default disabled:text-comp-disabled disabled:placeholder:text-comp-disabled placeholder:text-comp-mono-subtle-default", rest.className), ...rest }) }));
 });
 TextArea.displayName = "TextArea";
@@ -3605,19 +3632,19 @@ TextArea.displayName = "TextArea";
  *   </CardFooter>
  * </Card>
  */
-const Card = React.forwardRef(({ className, ...rest }, ref) => {
+const Card = forwardRef(({ className, ...rest }, ref) => {
     return (jsx("div", { ...rest, ref: ref, className: cn("flex flex-col rounded-2xl border border-border-divider bg-page-l0", className), children: rest.children }));
 });
-const CardBody = React.forwardRef(({ className, ...rest }, ref) => {
+const CardBody = forwardRef(({ className, ...rest }, ref) => {
     return (jsx("div", { ...rest, ref: ref, className: cn("p-6", className), children: rest.children }));
 });
-const CardHeader = React.forwardRef(({ className, ...rest }, ref) => {
+const CardHeader = forwardRef(({ className, ...rest }, ref) => {
     return (jsx("div", { ...rest, ref: ref, className: cn("text-comp-mono-default font-bold text-xl leading-xl-compact mb-2", className), children: rest.children }));
 });
-const CardContent = React.forwardRef((rest, ref) => {
+const CardContent = forwardRef((rest, ref) => {
     return (jsx("div", { ...rest, ref: ref, children: rest.children }));
 });
-const CardFooter = React.forwardRef(({ className, ...rest }, ref) => {
+const CardFooter = forwardRef(({ className, ...rest }, ref) => {
     return (jsx("div", { ...rest, ref: ref, className: cn("py-4 px-6", className), children: rest.children }));
 });
 
@@ -3781,8 +3808,8 @@ const __iconNode = [
 ];
 const X = createLucideIcon("x", __iconNode);
 
-const Tag = React.forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, ...props }, ref) => {
-    const [isSelected, setIsSelected] = React.useState(false);
+const Tag = forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, ...props }, ref) => {
+    const [isSelected, setIsSelected] = useState(false);
     const handleClick = (event) => {
         setIsSelected((prev) => !prev);
         onClick?.(event);
@@ -3808,6 +3835,15 @@ const Tag = React.forwardRef(({ icon, value, variant = "filled", size = "regular
 });
 Tag.displayName = "Tag";
 
+const TAG_VARIANTS = {
+    FILLED: "filled",
+    ACCENT: "accent",
+};
+const TAG_SIZES = {
+    REGULAR: "regular",
+    SMALL: "small",
+};
+
 const Pagination = ({ className, ...rest }) => {
     return (jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto my-0 flex justify-center w-full", className), ...rest }));
 };
@@ -3830,4 +3866,4 @@ const PaginationEllipsis = ({ className, ...rest }) => {
     return (jsx("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex items-center justify-center size-9 rounded-md hover:bg-fill-mono-hovered", className), ...rest, children: jsx(Ellipsis, { className: "size-4 stroke-comp-mono-subtle-default" }) }));
 };
 
-export { Button, Card, CardBody, CardContent, CardFooter, CardHeader, Input, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Tag, Text, TextArea };
+export { BUTTON_SIZES, BUTTON_VARIANTS, Button, Card, CardBody, CardContent, CardFooter, CardHeader, FONT_WEIGHTS, INPUT_SIZES, Input, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, TAG_SIZES, TAG_VARIANTS, TEXT_ALIGNMENTS, TEXT_SIZES, TEXT_VARIANTS, Tag, Text, TextArea };

package/dist/esm/radio-group/index.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { RadioGroup as RadioGroupRadix } from "radix-ui";
 import { RadioGroupOrientation } from "./types";
 interface RadioGroupProps extends RadioGroupRadix.RadioGroupProps {
@@ -22,12 +21,12 @@ interface RadioGroupProps extends RadioGroupRadix.RadioGroupProps {
  * </RadioGroup>
  * ```
  */
-export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 interface RadioItemProps extends RadioGroupRadix.RadioGroupItemProps {
     label?: string;
     labelClassName?: string;
     wrapperClassName?: string;
     className?: string;
 }
-export declare const RadioItem: React.ForwardRefExoticComponent<RadioItemProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const RadioItem: import("react").ForwardRefExoticComponent<RadioItemProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/index.d.ts

@@ -243,4 +243,4 @@ declare const PaginationPrevious: ({ className, ...rest }: React.ComponentProps<
 declare const PaginationNext: ({ className, ...rest }: React.ComponentProps<typeof PaginationLink>) => react_jsx_runtime.JSX.Element;
 declare const PaginationEllipsis: ({ className, ...rest }: React.ComponentProps<"span">) => react_jsx_runtime.JSX.Element;
 
-export { Button, Card, CardBody, CardContent, CardFooter, CardHeader, Input, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Tag, Text, TextArea };
+export { BUTTON_SIZES, BUTTON_VARIANTS, Button, type ButtonSize, type ButtonVariant, Card, CardBody, CardContent, CardFooter, CardHeader, FONT_WEIGHTS, type FontWeight, INPUT_SIZES, Input, type InputSize, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, TAG_SIZES, TAG_VARIANTS, TEXT_ALIGNMENTS, TEXT_SIZES, TEXT_VARIANTS, Tag, type TagSize, type TagVariant, Text, type TextAlignment, TextArea, type TextSize, type TextVariant };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telepix-lab/telepix-ui",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "A UI kit for TelePIX",
   "types": "./dist/index.d.ts",
   "exports": {