@telepix-lab/telepix-ui 0.3.2 → 0.3.3

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/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.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 &&
@@ -3585,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 &&
@@ -3610,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";
@@ -3634,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 }));
 });
 
@@ -3704,7 +3704,7 @@ var defaultAttributes = {
  */
 
 
-const Icon = React.forwardRef(
+const Icon = react.forwardRef(
   ({
     color = "currentColor",
     size = 24,
@@ -3714,7 +3714,7 @@ const Icon = React.forwardRef(
     children,
     iconNode,
     ...rest
-  }, ref) => React.createElement(
+  }, ref) => react.createElement(
     "svg",
     {
       ref,
@@ -3728,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]
     ]
   )
@@ -3743,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(
@@ -3810,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);

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;

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.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;

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.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 &&
@@ -3583,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 &&
@@ -3608,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";
@@ -3632,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 }));
 });
 
@@ -3808,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);

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/package.json

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