@telepix-lab/telepix-ui 0.4.4 → 0.4.7

package/dist/cjs/client.js

@@ -12347,8 +12347,8 @@ const DialogTrigger = (props) => {
 };
 const DialogPortal = Portal$3;
 const DialogClose = Close;
-const DialogContent = ({ className, children, ...rest }) => {
-    return (jsxRuntime.jsxs(Portal$3, { children: [jsxRuntime.jsx(Overlay, { className: "fixed top-0 bottom-0 left-0 right-0 bg-pure-black-50 inset-0 z-[1000] animate-fade-in" }), jsxRuntime.jsxs(Content$1, { className: cn("fixed top-1/2 left-1/2 z-[1001] transform -translate-x-1/2 -translate-y-1/2 animate-content-fade-in", className), ...rest, children: [jsxRuntime.jsx(Title, { "data-slot": "dialog-title", ...rest, children: jsxRuntime.jsx(Root$4, {}) }), jsxRuntime.jsx(Description, {}), jsxRuntime.jsx(Card, { children: children })] })] }));
+const DialogContent = ({ className, overlayClassName, children, ...rest }) => {
+    return (jsxRuntime.jsxs(Portal$3, { children: [jsxRuntime.jsx(Overlay, { className: cn("fixed top-0 bottom-0 left-0 right-0 bg-pure-black-50 inset-0 z-[1000] animate-fade-in", overlayClassName) }), jsxRuntime.jsxs(Content$1, { className: cn("fixed top-1/2 left-1/2 z-[1001] transform -translate-x-1/2 -translate-y-1/2 animate-content-fade-in", className), ...rest, children: [jsxRuntime.jsx(Title, { "data-slot": "dialog-title", ...rest, children: jsxRuntime.jsx(Root$4, {}) }), jsxRuntime.jsx(Description, {}), jsxRuntime.jsx(Card, { children: children })] })] }));
 };
 const DialogDescription = (props) => {
     return jsxRuntime.jsx(CardBody, { ...props, children: props.children });
@@ -12402,9 +12402,9 @@ const SelectTrigger = ({ placeholder, variant = "outline", size = "regular", ico
             "py-1.5 px-2 text-body font-medium leading-body-compact gap-2", size === SELECT_TRIGGER_SIZES.LARGE &&
             "py-3 px-4 text-base leading-base-compact font-medium gap-3", className), ...otherProps, children: [icon && jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: icon }), jsxRuntime.jsx(Value, { placeholder: placeholder }), jsxRuntime.jsx(Icon$1, { className: "flex items-center justify-center", children: jsxRuntime.jsx(CaretDownIcon, {}) })] }));
 };
-const SelectContent = ({ children, viewportClassName, ...rest }) => {
+const SelectContent = ({ children, viewportClassName, viewportWrapperClassName, ...rest }) => {
     const { className, position, sideOffset, ...otherProps } = rest;
-    return (jsxRuntime.jsx(Portal$1, { children: jsxRuntime.jsx(Content2$1, { position: "popper", sideOffset: 7, className: cn("p-2 min-w-[var(--radix-select-trigger-width)] border border-border-overlay rounded-lg bg-page-l1 shadow-medium", className), asChild: true, ...otherProps, children: jsxRuntime.jsx("div", { className: "z-10", children: jsxRuntime.jsx(Viewport, { className: cn("flex flex-col gap-1", viewportClassName), children: children }) }) }) }));
+    return (jsxRuntime.jsx(Portal$1, { children: jsxRuntime.jsx(Content2$1, { position: "popper", sideOffset: 7, className: cn("p-2 min-w-[var(--radix-select-trigger-width)] border border-border-overlay rounded-lg bg-page-l1 shadow-medium", className), asChild: true, ...otherProps, children: jsxRuntime.jsx("div", { className: cn("z-10", viewportWrapperClassName), children: jsxRuntime.jsx(Viewport, { className: cn("flex flex-col gap-1", viewportClassName), children: children }) }) }) }));
 };
 const SelectGroup = Group;
 const SelectLabel = (props) => {
@@ -12804,7 +12804,7 @@ const DataTable = ({ config, data, emptyMessage, onRowClick, enableSelection = f
         delete itemWithoutRandomId.randomId;
         onRowClick?.(itemWithoutRandomId);
     };
-    return (jsxRuntime.jsxs(Table, { className: classNames?.table, ref: refs?.tableRef, children: [jsxRuntime.jsx(TableHeader, { className: classNames?.header, ref: refs?.headerRef, children: config.map((col) => (jsxRuntime.jsx(TableHead, { style: { minWidth: col.minWidth, maxWidth: col.maxWidth }, className: classNames?.head, ref: refs?.headRef, children: col.header }, col.header))) }), jsxRuntime.jsx(TableBody, { className: classNames?.body, ref: refs?.bodyRef, children: rowData.length > 0 ? (rowData.map((item, index) => (jsxRuntime.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) => (jsxRuntime.jsx(TableCell, { className: classNames?.cell, ref: refs?.cellRef, showTooltip: col.showTooltip, children: col.renderFn(item) || "-" }, colIndex))) }, index)))) : emptyMessage ? (jsxRuntime.jsx(TableRow, { ref: refs?.rowRef, className: classNames?.row, children: jsxRuntime.jsx(TableCell, { colSpan: config.length, className: classNames?.cell, ref: refs?.cellRef, children: emptyMessage }) })) : null })] }));
+    return (jsxRuntime.jsxs(Table, { className: classNames?.table, ref: refs?.tableRef, children: [jsxRuntime.jsx(TableHeader, { className: classNames?.header, ref: refs?.headerRef, children: config.map((col) => (jsxRuntime.jsx(TableHead, { style: { minWidth: col.minWidth, maxWidth: col.maxWidth }, className: classNames?.head, ref: refs?.headRef, children: col.header }, col.header))) }), jsxRuntime.jsx(TableBody, { className: classNames?.body, ref: refs?.bodyRef, children: rowData.length > 0 ? (rowData.map((item, index) => (jsxRuntime.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) => (jsxRuntime.jsx(TableCell, { className: classNames?.cell, ref: refs?.cellRef, showTooltip: col.showTooltip, style: { minWidth: col.minWidth, maxWidth: col.maxWidth }, children: col.renderFn(item) || "-" }, colIndex))) }, index)))) : emptyMessage ? (jsxRuntime.jsx(TableRow, { ref: refs?.rowRef, className: classNames?.row, children: jsxRuntime.jsx(TableCell, { colSpan: config.length, className: classNames?.cell, ref: refs?.cellRef, children: emptyMessage }) })) : null })] }));
 };
 
 const InteractiveListItemContext = React.createContext({

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

@@ -29,7 +29,12 @@ export declare const Dialog: React.FC<DialogRadix.DialogProps>;
 export declare const DialogTrigger: (props: React.ComponentProps<typeof DialogRadix.Trigger>) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogPortal: React.FC<DialogRadix.DialogPortalProps>;
 export declare const DialogClose: React.FC<DialogRadix.DialogCloseProps>;
-export declare const DialogContent: ({ className, children, ...rest }: React.ComponentProps<typeof DialogRadix.Content>) => import("react/jsx-runtime").JSX.Element;
+export interface DialogContentProps extends React.ComponentProps<typeof DialogRadix.Content> {
+    overlayClassName?: string;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const DialogContent: ({ className, overlayClassName, children, ...rest }: DialogContentProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogDescription: (props: React.ComponentProps<typeof CardBody>) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogHeader: ({ className, ...rest }: React.ComponentProps<typeof CardHeader>) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogFooter: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -37,9 +37,10 @@ export declare const SelectTrigger: {
 interface SelectContent extends React.ComponentProps<typeof SelectRadix.Content> {
     children: React.ReactNode;
     viewportClassName?: string;
+    viewportWrapperClassName?: string;
 }
 export declare const SelectContent: {
-    ({ children, viewportClassName, ...rest }: SelectContent): import("react/jsx-runtime").JSX.Element;
+    ({ children, viewportClassName, viewportWrapperClassName, ...rest }: SelectContent): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const SelectGroup: React.ForwardRefExoticComponent<SelectRadix.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/client.d.ts

@@ -95,7 +95,12 @@ declare const Dialog: React$1.FC<Dialog$1.DialogProps>;
 declare const DialogTrigger: (props: React$1.ComponentProps<typeof Dialog$1.Trigger>) => react_jsx_runtime.JSX.Element;
 declare const DialogPortal: React$1.FC<Dialog$1.DialogPortalProps>;
 declare const DialogClose: React$1.FC<Dialog$1.DialogCloseProps>;
-declare const DialogContent: ({ className, children, ...rest }: React$1.ComponentProps<typeof Dialog$1.Content>) => react_jsx_runtime.JSX.Element;
+interface DialogContentProps extends React$1.ComponentProps<typeof Dialog$1.Content> {
+    overlayClassName?: string;
+    className?: string;
+    children: React$1.ReactNode;
+}
+declare const DialogContent: ({ className, overlayClassName, children, ...rest }: DialogContentProps) => react_jsx_runtime.JSX.Element;
 declare const DialogDescription: (props: React$1.ComponentProps<typeof CardBody>) => react_jsx_runtime.JSX.Element;
 declare const DialogHeader: ({ className, ...rest }: React$1.ComponentProps<typeof CardHeader>) => react_jsx_runtime.JSX.Element;
 declare const DialogFooter: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -148,9 +153,10 @@ declare const SelectTrigger: {
 interface SelectContent extends React__default.ComponentProps<typeof Select$1.Content> {
     children: React__default.ReactNode;
     viewportClassName?: string;
+    viewportWrapperClassName?: string;
 }
 declare const SelectContent: {
-    ({ children, viewportClassName, ...rest }: SelectContent): react_jsx_runtime.JSX.Element;
+    ({ children, viewportClassName, viewportWrapperClassName, ...rest }: SelectContent): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const SelectGroup: any;

package/dist/esm/client.js

@@ -12327,8 +12327,8 @@ const DialogTrigger = (props) => {
 };
 const DialogPortal = Portal$3;
 const DialogClose = Close;
-const DialogContent = ({ className, children, ...rest }) => {
-    return (jsxs(Portal$3, { children: [jsx(Overlay, { className: "fixed top-0 bottom-0 left-0 right-0 bg-pure-black-50 inset-0 z-[1000] animate-fade-in" }), jsxs(Content$1, { className: cn("fixed top-1/2 left-1/2 z-[1001] transform -translate-x-1/2 -translate-y-1/2 animate-content-fade-in", className), ...rest, children: [jsx(Title, { "data-slot": "dialog-title", ...rest, children: jsx(Root$4, {}) }), jsx(Description, {}), jsx(Card, { children: children })] })] }));
+const DialogContent = ({ className, overlayClassName, children, ...rest }) => {
+    return (jsxs(Portal$3, { children: [jsx(Overlay, { className: cn("fixed top-0 bottom-0 left-0 right-0 bg-pure-black-50 inset-0 z-[1000] animate-fade-in", overlayClassName) }), jsxs(Content$1, { className: cn("fixed top-1/2 left-1/2 z-[1001] transform -translate-x-1/2 -translate-y-1/2 animate-content-fade-in", className), ...rest, children: [jsx(Title, { "data-slot": "dialog-title", ...rest, children: jsx(Root$4, {}) }), jsx(Description, {}), jsx(Card, { children: children })] })] }));
 };
 const DialogDescription = (props) => {
     return jsx(CardBody, { ...props, children: props.children });
@@ -12382,9 +12382,9 @@ const SelectTrigger = ({ placeholder, variant = "outline", size = "regular", ico
             "py-1.5 px-2 text-body font-medium leading-body-compact gap-2", size === SELECT_TRIGGER_SIZES.LARGE &&
             "py-3 px-4 text-base leading-base-compact font-medium gap-3", className), ...otherProps, children: [icon && jsx("div", { className: "flex items-center justify-center", children: icon }), jsx(Value, { placeholder: placeholder }), jsx(Icon$1, { className: "flex items-center justify-center", children: jsx(CaretDownIcon, {}) })] }));
 };
-const SelectContent = ({ children, viewportClassName, ...rest }) => {
+const SelectContent = ({ children, viewportClassName, viewportWrapperClassName, ...rest }) => {
     const { className, position, sideOffset, ...otherProps } = rest;
-    return (jsx(Portal$1, { children: jsx(Content2$1, { position: "popper", sideOffset: 7, className: cn("p-2 min-w-[var(--radix-select-trigger-width)] border border-border-overlay rounded-lg bg-page-l1 shadow-medium", className), asChild: true, ...otherProps, children: jsx("div", { className: "z-10", children: jsx(Viewport, { className: cn("flex flex-col gap-1", viewportClassName), children: children }) }) }) }));
+    return (jsx(Portal$1, { children: jsx(Content2$1, { position: "popper", sideOffset: 7, className: cn("p-2 min-w-[var(--radix-select-trigger-width)] border border-border-overlay rounded-lg bg-page-l1 shadow-medium", className), asChild: true, ...otherProps, children: jsx("div", { className: cn("z-10", viewportWrapperClassName), children: jsx(Viewport, { className: cn("flex flex-col gap-1", viewportClassName), children: children }) }) }) }));
 };
 const SelectGroup = Group;
 const SelectLabel = (props) => {
@@ -12784,7 +12784,7 @@ const DataTable = ({ config, data, emptyMessage, onRowClick, enableSelection = f
         delete itemWithoutRandomId.randomId;
         onRowClick?.(itemWithoutRandomId);
     };
-    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 })] }));
+    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, style: { minWidth: col.minWidth, maxWidth: col.maxWidth }, 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 = createContext({

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

@@ -29,7 +29,12 @@ export declare const Dialog: React.FC<DialogRadix.DialogProps>;
 export declare const DialogTrigger: (props: React.ComponentProps<typeof DialogRadix.Trigger>) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogPortal: React.FC<DialogRadix.DialogPortalProps>;
 export declare const DialogClose: React.FC<DialogRadix.DialogCloseProps>;
-export declare const DialogContent: ({ className, children, ...rest }: React.ComponentProps<typeof DialogRadix.Content>) => import("react/jsx-runtime").JSX.Element;
+export interface DialogContentProps extends React.ComponentProps<typeof DialogRadix.Content> {
+    overlayClassName?: string;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const DialogContent: ({ className, overlayClassName, children, ...rest }: DialogContentProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogDescription: (props: React.ComponentProps<typeof CardBody>) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogHeader: ({ className, ...rest }: React.ComponentProps<typeof CardHeader>) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogFooter: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -37,9 +37,10 @@ export declare const SelectTrigger: {
 interface SelectContent extends React.ComponentProps<typeof SelectRadix.Content> {
     children: React.ReactNode;
     viewportClassName?: string;
+    viewportWrapperClassName?: string;
 }
 export declare const SelectContent: {
-    ({ children, viewportClassName, ...rest }: SelectContent): import("react/jsx-runtime").JSX.Element;
+    ({ children, viewportClassName, viewportWrapperClassName, ...rest }: SelectContent): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const SelectGroup: React.ForwardRefExoticComponent<SelectRadix.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;

package/package.json

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