@pixpilot/shadcn-ui 0.10.0 → 0.11.0

package/dist/ScaledPreview.cjs

@@ -0,0 +1,44 @@
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/ScaledPreview.tsx
+const DEFAULT_BASE_SIZE = {
+	width: 1e3,
+	height: 1e3
+};
+const DEFAULT_PADDING = 0;
+const PADDING_SIDES = 2;
+const ScaledPreview = ({ baseSize = DEFAULT_BASE_SIZE, scaleFactor, previewBoxSize, padding = DEFAULT_PADDING, forceScale, children,...rest }) => {
+	const calculatedPreviewBoxSize = previewBoxSize || {
+		width: scaleFactor * baseSize.width,
+		height: scaleFactor * baseSize.height
+	};
+	const calculatedScale = Math.min((calculatedPreviewBoxSize.width - padding * PADDING_SIDES) / baseSize.width, (calculatedPreviewBoxSize.height - padding * PADDING_SIDES) / baseSize.height);
+	const finalScale = forceScale ?? calculatedScale;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...rest,
+		style: {
+			width: calculatedPreviewBoxSize.width,
+			height: calculatedPreviewBoxSize.height,
+			position: "relative",
+			...rest.style
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "absolute top-1/2 left-1/2",
+			style: {
+				width: baseSize.width,
+				height: baseSize.height,
+				transform: `translate(-50%, -50%) scale(${finalScale})`,
+				transformOrigin: "center"
+			},
+			children
+		})
+	});
+};
+ScaledPreview.displayName = "ScaledPreview";
+
+//#endregion
+exports.ScaledPreview = ScaledPreview;

package/dist/ScaledPreview.d.cts

@@ -0,0 +1,23 @@
+import React from "react";
+
+//#region src/ScaledPreview.d.ts
+interface ScaledPreviewSize {
+  width: number;
+  height: number;
+}
+interface ScaledPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Base content dimensions. Defaults to 1000×1000. */
+  baseSize?: ScaledPreviewSize;
+  /** Scale factor for preview box (e.g., 0.5 = 50% of baseSize). */
+  scaleFactor: number;
+  /** Explicit preview box size. If provided, ignores scaleFactor. */
+  previewBoxSize?: ScaledPreviewSize;
+  /** Padding in pixels (reduces available space for content scaling). */
+  padding?: number;
+  /** Manual content scale override (bypasses automatic fit calculation). */
+  forceScale?: number;
+  children: React.ReactNode;
+}
+declare const ScaledPreview: React.FC<ScaledPreviewProps>;
+//#endregion
+export { ScaledPreview, ScaledPreviewProps, ScaledPreviewSize };

package/dist/ScaledPreview.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+
+//#region src/ScaledPreview.d.ts
+interface ScaledPreviewSize {
+  width: number;
+  height: number;
+}
+interface ScaledPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Base content dimensions. Defaults to 1000×1000. */
+  baseSize?: ScaledPreviewSize;
+  /** Scale factor for preview box (e.g., 0.5 = 50% of baseSize). */
+  scaleFactor: number;
+  /** Explicit preview box size. If provided, ignores scaleFactor. */
+  previewBoxSize?: ScaledPreviewSize;
+  /** Padding in pixels (reduces available space for content scaling). */
+  padding?: number;
+  /** Manual content scale override (bypasses automatic fit calculation). */
+  forceScale?: number;
+  children: React.ReactNode;
+}
+declare const ScaledPreview: React.FC<ScaledPreviewProps>;
+//#endregion
+export { ScaledPreview, ScaledPreviewProps, ScaledPreviewSize };

package/dist/ScaledPreview.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ScaledPreview.tsx
+const DEFAULT_BASE_SIZE = {
+	width: 1e3,
+	height: 1e3
+};
+const DEFAULT_PADDING = 0;
+const PADDING_SIDES = 2;
+const ScaledPreview = ({ baseSize = DEFAULT_BASE_SIZE, scaleFactor, previewBoxSize, padding = DEFAULT_PADDING, forceScale, children,...rest }) => {
+	const calculatedPreviewBoxSize = previewBoxSize || {
+		width: scaleFactor * baseSize.width,
+		height: scaleFactor * baseSize.height
+	};
+	const calculatedScale = Math.min((calculatedPreviewBoxSize.width - padding * PADDING_SIDES) / baseSize.width, (calculatedPreviewBoxSize.height - padding * PADDING_SIDES) / baseSize.height);
+	const finalScale = forceScale ?? calculatedScale;
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		style: {
+			width: calculatedPreviewBoxSize.width,
+			height: calculatedPreviewBoxSize.height,
+			position: "relative",
+			...rest.style
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: "absolute top-1/2 left-1/2",
+			style: {
+				width: baseSize.width,
+				height: baseSize.height,
+				transform: `translate(-50%, -50%) scale(${finalScale})`,
+				transformOrigin: "center"
+			},
+			children
+		})
+	});
+};
+ScaledPreview.displayName = "ScaledPreview";
+
+//#endregion
+export { ScaledPreview };

package/dist/index.cjs

@@ -32,8 +32,10 @@ const require_Pagination = require('./pagination/Pagination.cjs');
 require('./pagination/index.cjs');
 const require_RichTextEditor = require('./rich-text-editor/RichTextEditor.cjs');
 require('./rich-text-editor/index.cjs');
+const require_ScaledPreview = require('./ScaledPreview.cjs');
 const require_Select = require('./Select.cjs');
 const require_Slider = require('./Slider.cjs');
+const require_TabsContext = require('./tabs/TabsContext.cjs');
 const require_TabsList = require('./tabs/TabsList.cjs');
 const require_TabsTrigger = require('./tabs/TabsTrigger.cjs');
 require('./tabs/index.cjs');
@@ -70,10 +72,12 @@ exports.LayoutMain = require_LayoutMain.LayoutMain;
 exports.LoadingOverlay = require_LoadingOverlay.LoadingOverlay;
 exports.Pagination = require_Pagination.Pagination;
 exports.RichTextEditor = require_RichTextEditor.RichTextEditor;
+exports.ScaledPreview = require_ScaledPreview.ScaledPreview;
 exports.Select = require_Select.Select;
 exports.Slider = require_Slider.Slider;
 exports.Tabs = __pixpilot_shadcn.Tabs;
 exports.TabsContent = __pixpilot_shadcn.TabsContent;
+exports.TabsContext = require_TabsContext.TabsContext;
 exports.TabsList = require_TabsList.TabsList;
 exports.TabsTrigger = require_TabsTrigger.TabsTrigger;
 exports.TagsInput = require_tags_input.TagsInput;
@@ -87,6 +91,7 @@ exports.toastInfo = require_toast.toastInfo;
 exports.toastSuccess = require_toast.toastSuccess;
 exports.toastWarning = require_toast.toastWarning;
 exports.useMediaQuery = require_use_media_query.useMediaQuery;
+exports.useTabsContext = require_TabsContext.useTabsContext;
 Object.defineProperty(exports, 'useTheme', {
   enumerable: true,
   get: function () {

package/dist/index.d.cts

@@ -34,11 +34,14 @@ import { Pagination, PaginationProps } from "./pagination/Pagination.cjs";
 import "./pagination/index.cjs";
 import { RichTextEditor, RichTextEditorProps, ToolbarOption } from "./rich-text-editor/RichTextEditor.cjs";
 import "./rich-text-editor/index.cjs";
+import { ScaledPreview, ScaledPreviewProps, ScaledPreviewSize } from "./ScaledPreview.cjs";
 import { Select, SelectOption } from "./Select.cjs";
 import { Slider, SliderProps } from "./Slider.cjs";
 import { Tabs } from "./tabs/Tabs.cjs";
 import { TabsContent } from "./tabs/TabsContent.cjs";
-import { TabsList, TabsListProps, TabsListVariant } from "./tabs/TabsList.cjs";
+import { BaseTabsTriggerProps, TabsVariant } from "./tabs/types.cjs";
+import { TabsContext, TabsContextValue, useTabsContext } from "./tabs/TabsContext.cjs";
+import { TabsList, TabsListProps } from "./tabs/TabsList.cjs";
 import { TabsTrigger, TabsTriggerProps } from "./tabs/TabsTrigger.cjs";
 import "./tabs/index.cjs";
 import { TagsInput, TagsInputProps } from "./tags-input.cjs";
@@ -48,4 +51,4 @@ import { ThemeToggle } from "./ThemeToggle.cjs";
 import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.cjs";
 import "./toast/index.cjs";
 import { cn } from "@pixpilot/shadcn";
-export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, Select, SelectOption, SingleFileUploadProps, Slider, SliderProps, Tabs, TabsContent, TabsList, TabsListProps, TabsListVariant, TabsTrigger, TabsTriggerProps, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderProps, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };

package/dist/index.d.ts

@@ -35,11 +35,14 @@ import { Pagination, PaginationProps } from "./pagination/Pagination.js";
 import "./pagination/index.js";
 import { RichTextEditor, RichTextEditorProps, ToolbarOption } from "./rich-text-editor/RichTextEditor.js";
 import "./rich-text-editor/index.js";
+import { ScaledPreview, ScaledPreviewProps, ScaledPreviewSize } from "./ScaledPreview.js";
 import { Select, SelectOption } from "./Select.js";
 import { Slider, SliderProps } from "./Slider.js";
 import { Tabs } from "./tabs/Tabs.js";
 import { TabsContent } from "./tabs/TabsContent.js";
-import { TabsList, TabsListProps, TabsListVariant } from "./tabs/TabsList.js";
+import { BaseTabsTriggerProps, TabsVariant } from "./tabs/types.js";
+import { TabsContext, TabsContextValue, useTabsContext } from "./tabs/TabsContext.js";
+import { TabsList, TabsListProps } from "./tabs/TabsList.js";
 import { TabsTrigger, TabsTriggerProps } from "./tabs/TabsTrigger.js";
 import "./tabs/index.js";
 import { TagsInput, TagsInputProps } from "./tags-input.js";
@@ -49,4 +52,4 @@ import { ThemeToggle } from "./ThemeToggle.js";
 import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.js";
 import "./toast/index.js";
 import { cn } from "@pixpilot/shadcn";
-export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, Select, SelectOption, SingleFileUploadProps, Slider, SliderProps, Tabs, TabsContent, TabsList, TabsListProps, TabsListVariant, TabsTrigger, TabsTriggerProps, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderProps, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };

package/dist/index.js

@@ -31,10 +31,12 @@ import { Pagination } from "./pagination/Pagination.js";
 import "./pagination/index.js";
 import { RichTextEditor } from "./rich-text-editor/RichTextEditor.js";
 import "./rich-text-editor/index.js";
+import { ScaledPreview } from "./ScaledPreview.js";
 import { Select } from "./Select.js";
 import { Slider } from "./Slider.js";
 import { Tabs } from "./tabs/Tabs.js";
 import { TabsContent } from "./tabs/TabsContent.js";
+import { TabsContext, useTabsContext } from "./tabs/TabsContext.js";
 import { TabsList } from "./tabs/TabsList.js";
 import { TabsTrigger } from "./tabs/TabsTrigger.js";
 import "./tabs/index.js";
@@ -46,4 +48,4 @@ import { DEFAULT_ALERT_DURATION, toast, toastError, toastInfo, toastSuccess, toa
 import "./toast/index.js";
 import { cn } from "@pixpilot/shadcn";
 
-export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, Select, Slider, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, ThemeProvider, ThemeToggle, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTheme };
+export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeProvider, ThemeToggle, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };

package/dist/tabs/TabsContext.cjs

@@ -0,0 +1,13 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/tabs/TabsContext.tsx
+const TabsContext = react.default.createContext(void 0);
+function useTabsContext() {
+	return react.default.use(TabsContext);
+}
+
+//#endregion
+exports.TabsContext = TabsContext;
+exports.useTabsContext = useTabsContext;

package/dist/tabs/TabsContext.d.cts

@@ -0,0 +1,11 @@
+import { TabsVariant } from "./types.cjs";
+import React from "react";
+
+//#region src/tabs/TabsContext.d.ts
+interface TabsContextValue {
+  variant?: TabsVariant;
+}
+declare const TabsContext: React.Context<TabsContextValue | undefined>;
+declare function useTabsContext(): TabsContextValue | undefined;
+//#endregion
+export { TabsContext, TabsContextValue, useTabsContext };

package/dist/tabs/TabsContext.d.ts

@@ -0,0 +1,11 @@
+import { TabsVariant } from "./types.js";
+import React from "react";
+
+//#region src/tabs/TabsContext.d.ts
+interface TabsContextValue {
+  variant?: TabsVariant;
+}
+declare const TabsContext: React.Context<TabsContextValue | undefined>;
+declare function useTabsContext(): TabsContextValue | undefined;
+//#endregion
+export { TabsContext, TabsContextValue, useTabsContext };

package/dist/tabs/TabsContext.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+//#region src/tabs/TabsContext.tsx
+const TabsContext = React.createContext(void 0);
+function useTabsContext() {
+	return React.use(TabsContext);
+}
+
+//#endregion
+export { TabsContext, useTabsContext };

package/dist/tabs/TabsList.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_TabsContext = require('./TabsContext.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let react = require("react");
@@ -8,14 +9,23 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/tabs/TabsList.tsx
 const TabsList = (props) => {
-	const { variant,...rest } = props;
-	if (variant === "underline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TabsList, {
-		...rest,
-		className: "bg-transparent p-0 h-auto rounded-none border-b border-border"
+	const { variant, children,...rest } = props;
+	const contextValue = react.default.useMemo(() => ({ variant }), [variant]);
+	if (variant === "underline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TabsContext.TabsContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TabsList, {
+			...rest,
+			className: "bg-transparent p-0 h-auto rounded-none border-b border-border",
+			children
+		})
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TabsList, {
-		...rest,
-		variant
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TabsContext.TabsContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TabsList, {
+			...rest,
+			variant,
+			children
+		})
 	});
 };
 

package/dist/tabs/TabsList.d.cts

@@ -1,11 +1,11 @@
+import { TabsVariant } from "./types.cjs";
 import { TabsList } from "@pixpilot/shadcn";
 import React from "react";
 
 //#region src/tabs/TabsList.d.ts
-type TabsListVariant = 'default' | 'underline' | 'outline' | 'ghost' | 'pill';
 interface TabsListProps extends Omit<React.ComponentProps<typeof TabsList>, 'variant'> {
-  variant?: TabsListVariant;
+  variant?: TabsVariant;
 }
 declare const TabsList$1: React.FC<TabsListProps>;
 //#endregion
-export { TabsList$1 as TabsList, TabsListProps, TabsListVariant };
+export { TabsList$1 as TabsList, TabsListProps };

package/dist/tabs/TabsList.d.ts

@@ -1,11 +1,11 @@
+import { TabsVariant } from "./types.js";
 import { TabsList } from "@pixpilot/shadcn";
 import React from "react";
 
 //#region src/tabs/TabsList.d.ts
-type TabsListVariant = 'default' | 'underline' | 'outline' | 'ghost' | 'pill';
 interface TabsListProps extends Omit<React.ComponentProps<typeof TabsList>, 'variant'> {
-  variant?: TabsListVariant;
+  variant?: TabsVariant;
 }
 declare const TabsList$1: React.FC<TabsListProps>;
 //#endregion
-export { TabsList$1 as TabsList, TabsListProps, TabsListVariant };
+export { TabsList$1 as TabsList, TabsListProps };

package/dist/tabs/TabsList.js

@@ -1,17 +1,27 @@
+import { TabsContext } from "./TabsContext.js";
 import { TabsList } from "@pixpilot/shadcn";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/tabs/TabsList.tsx
 const TabsList$1 = (props) => {
-	const { variant,...rest } = props;
-	if (variant === "underline") return /* @__PURE__ */ jsx(TabsList, {
-		...rest,
-		className: "bg-transparent p-0 h-auto rounded-none border-b border-border"
+	const { variant, children,...rest } = props;
+	const contextValue = React.useMemo(() => ({ variant }), [variant]);
+	if (variant === "underline") return /* @__PURE__ */ jsx(TabsContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(TabsList, {
+			...rest,
+			className: "bg-transparent p-0 h-auto rounded-none border-b border-border",
+			children
+		})
 	});
-	return /* @__PURE__ */ jsx(TabsList, {
-		...rest,
-		variant
+	return /* @__PURE__ */ jsx(TabsContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(TabsList, {
+			...rest,
+			variant,
+			children
+		})
 	});
 };
 

package/dist/tabs/TabsTrigger.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_TabsContext = require('./TabsContext.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let react = require("react");
@@ -8,7 +9,9 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/tabs/TabsTrigger.tsx
 const TabsTrigger = (props) => {
-	const { variant,...rest } = props;
+	const { variant: propVariant,...rest } = props;
+	const context = require_TabsContext.useTabsContext();
+	const variant = propVariant || context?.variant;
 	const underlineClasses = (0, __pixpilot_shadcn.cn)("data-[state=active]:border-primary m-0 mb-[-1px] rounded-none border-0 border-b-2 bg-transparent py-2 px-3 shadow-none");
 	if (variant === "underline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TabsTrigger, {
 		...rest,

package/dist/tabs/TabsTrigger.d.cts

@@ -1,9 +1,9 @@
-import { BaseTabsTriggerProps, TabsTriggerVariant } from "./types.cjs";
+import { BaseTabsTriggerProps, TabsVariant } from "./types.cjs";
 import React from "react";
 
 //#region src/tabs/TabsTrigger.d.ts
 interface TabsTriggerProps extends Omit<BaseTabsTriggerProps, 'variant'> {
-  variant?: TabsTriggerVariant;
+  variant?: TabsVariant;
 }
 declare const TabsTrigger: React.FC<TabsTriggerProps>;
 //#endregion

package/dist/tabs/TabsTrigger.d.ts

@@ -1,9 +1,9 @@
-import { BaseTabsTriggerProps, TabsTriggerVariant } from "./types.js";
+import { BaseTabsTriggerProps, TabsVariant } from "./types.js";
 import React from "react";
 
 //#region src/tabs/TabsTrigger.d.ts
 interface TabsTriggerProps extends Omit<BaseTabsTriggerProps, 'variant'> {
-  variant?: TabsTriggerVariant;
+  variant?: TabsVariant;
 }
 declare const TabsTrigger: React.FC<TabsTriggerProps>;
 //#endregion

package/dist/tabs/TabsTrigger.js

@@ -1,10 +1,13 @@
+import { useTabsContext } from "./TabsContext.js";
 import { TabsTrigger, cn } from "@pixpilot/shadcn";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/tabs/TabsTrigger.tsx
 const TabsTrigger$1 = (props) => {
-	const { variant,...rest } = props;
+	const { variant: propVariant,...rest } = props;
+	const context = useTabsContext();
+	const variant = propVariant || context?.variant;
 	const underlineClasses = cn("data-[state=active]:border-primary m-0 mb-[-1px] rounded-none border-0 border-b-2 bg-transparent py-2 px-3 shadow-none");
 	if (variant === "underline") return /* @__PURE__ */ jsx(TabsTrigger, {
 		...rest,

package/dist/tabs/index.cjs

@@ -1,6 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 require('./Tabs.cjs');
 require('./TabsContent.cjs');
+const require_TabsContext = require('./TabsContext.cjs');
 const require_TabsList = require('./TabsList.cjs');
 const require_TabsTrigger = require('./TabsTrigger.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");

package/dist/tabs/index.d.cts

@@ -1,4 +1,6 @@
 import { Tabs } from "./Tabs.cjs";
 import { TabsContent } from "./TabsContent.cjs";
-import { TabsList, TabsListProps, TabsListVariant } from "./TabsList.cjs";
+import { BaseTabsTriggerProps, TabsVariant } from "./types.cjs";
+import { TabsContext, TabsContextValue, useTabsContext } from "./TabsContext.cjs";
+import { TabsList, TabsListProps } from "./TabsList.cjs";
 import { TabsTrigger, TabsTriggerProps } from "./TabsTrigger.cjs";

package/dist/tabs/index.d.ts

@@ -1,4 +1,6 @@
 import { Tabs } from "./Tabs.js";
 import { TabsContent } from "./TabsContent.js";
-import { TabsList, TabsListProps, TabsListVariant } from "./TabsList.js";
+import { BaseTabsTriggerProps, TabsVariant } from "./types.js";
+import { TabsContext, TabsContextValue, useTabsContext } from "./TabsContext.js";
+import { TabsList, TabsListProps } from "./TabsList.js";
 import { TabsTrigger, TabsTriggerProps } from "./TabsTrigger.js";

package/dist/tabs/index.js

@@ -1,4 +1,5 @@
 import { Tabs } from "./Tabs.js";
 import { TabsContent } from "./TabsContent.js";
+import { TabsContext, useTabsContext } from "./TabsContext.js";
 import { TabsList } from "./TabsList.js";
 import { TabsTrigger } from "./TabsTrigger.js";

package/dist/tabs/types.d.cts

@@ -2,6 +2,6 @@ import { TabsTrigger } from "@pixpilot/shadcn";
 
 //#region src/tabs/types.d.ts
 type BaseTabsTriggerProps = React.ComponentProps<typeof TabsTrigger>;
-type TabsTriggerVariant = 'default' | 'underline' | BaseTabsTriggerProps['variant'];
+type TabsVariant = 'default' | 'underline' | BaseTabsTriggerProps['variant'];
 //#endregion
-export { BaseTabsTriggerProps, TabsTriggerVariant };
+export { BaseTabsTriggerProps, TabsVariant };

package/dist/tabs/types.d.ts

@@ -2,6 +2,6 @@ import { TabsTrigger } from "@pixpilot/shadcn";
 
 //#region src/tabs/types.d.ts
 type BaseTabsTriggerProps = React.ComponentProps<typeof TabsTrigger>;
-type TabsTriggerVariant = 'default' | 'underline' | BaseTabsTriggerProps['variant'];
+type TabsVariant = 'default' | 'underline' | BaseTabsTriggerProps['variant'];
 //#endregion
-export { BaseTabsTriggerProps, TabsTriggerVariant };
+export { BaseTabsTriggerProps, TabsVariant };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -58,10 +58,10 @@
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
     "@internal/eslint-config": "0.3.0",
-    "@internal/prettier-config": "0.0.1",
-    "@internal/tsconfig": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
-    "@internal/vitest-config": "0.1.0"
+    "@internal/tsconfig": "0.1.0",
+    "@internal/vitest-config": "0.1.0",
+    "@internal/prettier-config": "0.0.1"
   },
   "prettier": "@internal/prettier-config",
   "scripts": {