@pixpilot/shadcn-ui 0.16.1 → 0.18.0

package/dist/Select.cjs

@@ -8,7 +8,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/Select.tsx
 function Select(props) {
-	const { options, value = "", onChange, placeholder,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps,...restProps } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Select, {
 		value,
 		onValueChange: onChange,
@@ -16,10 +16,13 @@ function Select(props) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectTrigger, {
 			className: "w-full",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectValue, { placeholder })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectContent, { children: options?.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectItem, {
-			value: String(option.value),
-			children: option.label
-		}, option.value)) })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectContent, {
+			...contentProps,
+			children: options?.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectItem, {
+				value: String(option.value),
+				children: option.label
+			}, option.value))
+		})]
 	});
 }
 

package/dist/Select.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime3 from "react/jsx-runtime";
-import { Select } from "@pixpilot/shadcn";
-import { ComponentProps } from "react";
+import { Select, SelectContent } from "@pixpilot/shadcn";
+import React, { ComponentProps } from "react";
 
 //#region src/Select.d.ts
 interface SelectOption {
@@ -9,6 +9,7 @@ interface SelectOption {
 }
 type BaseSelectProps = {
   options?: SelectOption[];
+  contentProps?: React.ComponentProps<typeof SelectContent>;
   value?: string;
   onChange?: (value: string) => void;
   placeholder?: string;

package/dist/Select.d.ts

@@ -1,5 +1,5 @@
-import { Select } from "@pixpilot/shadcn";
-import { ComponentProps } from "react";
+import { Select, SelectContent } from "@pixpilot/shadcn";
+import React, { ComponentProps } from "react";
 import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/Select.d.ts
@@ -9,6 +9,7 @@ interface SelectOption {
 }
 type BaseSelectProps = {
   options?: SelectOption[];
+  contentProps?: React.ComponentProps<typeof SelectContent>;
   value?: string;
   onChange?: (value: string) => void;
   placeholder?: string;

package/dist/Select.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/Select.tsx
 function Select$1(props) {
-	const { options, value = "", onChange, placeholder,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps,...restProps } = props;
 	return /* @__PURE__ */ jsxs(Select, {
 		value,
 		onValueChange: onChange,
@@ -12,10 +12,13 @@ function Select$1(props) {
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
 			className: "w-full",
 			children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
-		}), /* @__PURE__ */ jsx(SelectContent, { children: options?.map((option) => /* @__PURE__ */ jsx(SelectItem, {
-			value: String(option.value),
-			children: option.label
-		}, option.value)) })]
+		}), /* @__PURE__ */ jsx(SelectContent, {
+			...contentProps,
+			children: options?.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: String(option.value),
+				children: option.label
+			}, option.value))
+		})]
 	});
 }
 

package/dist/file-upload/FileUpload.d.ts

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/file-upload/FileUpload.d.ts
-declare function FileUpload(props: FileUploadProps): react_jsx_runtime6.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { FileUpload };

package/dist/file-upload-inline/FileUploadInline.d.ts

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.js";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/file-upload-inline/FileUploadInline.d.ts
 /**
  * FileUploadInline - An inline file upload component using FileUpload primitives
  */
-declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime7.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { FileUploadInline };

package/dist/icon-selector/icon-picker-content.cjs

@@ -1,4 +1,6 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_Input = require('../input/Input.cjs');
+require('../input/index.cjs');
 const require_LoadingOverlay = require('../LoadingOverlay.cjs');
 const require_use_async_providers = require('./use-async-providers.cjs');
 const require_virtualized_icon_grid = require('./virtualized-icon-grid.cjs');
@@ -84,7 +86,7 @@ const IconPickerContent = ({ providers: providersProp, onChange, onSelect, maxHe
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "relative",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Input, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.Input, {
 					placeholder: "Search icons...",
 					value: searchQuery,
 					onChange: (e) => setSearchQuery(e.target.value),

package/dist/icon-selector/icon-picker-content.js

@@ -1,7 +1,9 @@
+import { Input as Input$1 } from "../input/Input.js";
+import "../input/index.js";
 import { LoadingOverlay } from "../LoadingOverlay.js";
 import { useAsyncProviders } from "./use-async-providers.js";
 import virtualized_icon_grid_default from "./virtualized-icon-grid.js";
-import { Input, Tabs, TabsContent, TabsList, TabsTrigger } from "@pixpilot/shadcn";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@pixpilot/shadcn";
 import { X } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -79,7 +81,7 @@ const IconPickerContent = ({ providers: providersProp, onChange, onSelect, maxHe
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "relative",
-				children: [/* @__PURE__ */ jsx(Input, {
+				children: [/* @__PURE__ */ jsx(Input$1, {
 					placeholder: "Search icons...",
 					value: searchQuery,
 					onChange: (e) => setSearchQuery(e.target.value),

package/dist/index.cjs

@@ -24,6 +24,8 @@ const require_FileUploadInline = require('./file-upload-inline/FileUploadInline.
 require('./file-upload-inline/index.cjs');
 const require_use_media_query = require('./hooks/use-media-query.cjs');
 require('./hooks/index.cjs');
+const require_Input = require('./input/Input.cjs');
+require('./input/index.cjs');
 const require_LoadingOverlay = require('./LoadingOverlay.cjs');
 const require_IconPicker = require('./icon-selector/IconPicker.cjs');
 require('./icon-selector/index.cjs');
@@ -40,6 +42,7 @@ const require_ScaledPreview = require('./ScaledPreview.cjs');
 const require_Select = require('./Select.cjs');
 const require_Slider = require('./slider/Slider.cjs');
 const require_SliderInput = require('./slider/SliderInput.cjs');
+const require_SliderSelect = require('./slider/SliderSelect.cjs');
 require('./slider/index.cjs');
 const require_TabsContext = require('./tabs/TabsContext.cjs');
 const require_TabsList = require('./tabs/TabsList.cjs');
@@ -73,6 +76,7 @@ exports.DialogProvider = require_DialogProvider.DialogProvider;
 exports.FileUpload = require_FileUpload.FileUpload;
 exports.FileUploadInline = require_FileUploadInline.FileUploadInline;
 exports.IconPicker = require_IconPicker.IconPicker;
+exports.Input = require_Input.Input;
 exports.Layout = require_Layout.Layout;
 exports.LayoutFooter = require_LayoutFooter.LayoutFooter;
 exports.LayoutHeader = require_LayoutHeader.LayoutHeader;
@@ -84,6 +88,7 @@ exports.ScaledPreview = require_ScaledPreview.ScaledPreview;
 exports.Select = require_Select.Select;
 exports.Slider = require_Slider.Slider;
 exports.SliderInput = require_SliderInput.SliderInput;
+exports.SliderSelect = require_SliderSelect.SliderSelect;
 exports.Tabs = __pixpilot_shadcn.Tabs;
 exports.TabsContent = __pixpilot_shadcn.TabsContent;
 exports.TabsContext = require_TabsContext.TabsContext;

package/dist/index.d.cts

@@ -27,6 +27,8 @@ import { useMediaQuery } from "./hooks/use-media-query.cjs";
 import { IconProvider, IconProviderLoader, IconProviderProps } from "./icon-selector/types.cjs";
 import { IconPicker, IconPickerProps, IconPickerVariant } from "./icon-selector/IconPicker.cjs";
 import "./icon-selector/index.cjs";
+import { Input, InputProps } from "./input/Input.cjs";
+import "./input/index.cjs";
 import { Layout, LayoutProps } from "./layout/Layout.cjs";
 import { LayoutFooter, LayoutFooterProps } from "./layout/LayoutFooter.cjs";
 import { LayoutHeader, LayoutHeaderProps } from "./layout/LayoutHeader.cjs";
@@ -41,6 +43,7 @@ import { ScaledPreview, ScaledPreviewProps, ScaledPreviewSize } from "./ScaledPr
 import { Select, SelectOption } from "./Select.cjs";
 import { Slider, SliderProps } from "./slider/Slider.cjs";
 import { SliderInput, SliderInputProps } from "./slider/SliderInput.cjs";
+import { SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue } from "./slider/SliderSelect.cjs";
 import "./slider/index.cjs";
 import { Tabs } from "./tabs/Tabs.cjs";
 import { TabsContent } from "./tabs/TabsContent.cjs";
@@ -56,4 +59,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, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, 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, SliderInput, SliderInputProps, 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 };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, 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, Input, InputProps, 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, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, 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

@@ -30,6 +30,8 @@ import "./hooks/index.js";
 import { IconProvider, IconProviderLoader, IconProviderProps } from "./icon-selector/types.js";
 import { IconPicker, IconPickerProps, IconPickerVariant } from "./icon-selector/IconPicker.js";
 import "./icon-selector/index.js";
+import { Input, InputProps } from "./input/Input.js";
+import "./input/index.js";
 import { Layout, LayoutProps } from "./layout/Layout.js";
 import { LayoutFooter, LayoutFooterProps } from "./layout/LayoutFooter.js";
 import { LayoutHeader, LayoutHeaderProps } from "./layout/LayoutHeader.js";
@@ -44,6 +46,7 @@ import { ScaledPreview, ScaledPreviewProps, ScaledPreviewSize } from "./ScaledPr
 import { Select, SelectOption } from "./Select.js";
 import { Slider, SliderProps } from "./slider/Slider.js";
 import { SliderInput, SliderInputProps } from "./slider/SliderInput.js";
+import { SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue } from "./slider/SliderSelect.js";
 import "./slider/index.js";
 import { Tabs } from "./tabs/Tabs.js";
 import { TabsContent } from "./tabs/TabsContent.js";
@@ -59,4 +62,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, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, 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, SliderInput, SliderInputProps, 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 };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, 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, Input, InputProps, 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, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, 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

@@ -23,6 +23,8 @@ import { FileUploadInline } from "./file-upload-inline/FileUploadInline.js";
 import "./file-upload-inline/index.js";
 import { useMediaQuery } from "./hooks/use-media-query.js";
 import "./hooks/index.js";
+import { Input } from "./input/Input.js";
+import "./input/index.js";
 import { LoadingOverlay } from "./LoadingOverlay.js";
 import { IconPicker } from "./icon-selector/IconPicker.js";
 import "./icon-selector/index.js";
@@ -39,6 +41,7 @@ import { ScaledPreview } from "./ScaledPreview.js";
 import { Select } from "./Select.js";
 import { Slider } from "./slider/Slider.js";
 import { SliderInput } from "./slider/SliderInput.js";
+import { SliderSelect } from "./slider/SliderSelect.js";
 import "./slider/index.js";
 import { Tabs } from "./tabs/Tabs.js";
 import { TabsContent } from "./tabs/TabsContent.js";
@@ -54,4 +57,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, ColorPicker, ColorPickerBase, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeProvider, ThemeToggle, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerBase, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeProvider, ThemeToggle, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };

package/dist/input/Input.cjs

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+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/input/Input.tsx
+function Input(props) {
+	const { prefix, suffix, groupClassName, prefixClassName, suffixClassName, className, disabled,...restProps } = props;
+	if (prefix == null && suffix == null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Input, {
+		className,
+		disabled,
+		...restProps
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.InputGroup, {
+		className: (0, __pixpilot_shadcn.cn)(groupClassName),
+		"data-disabled": disabled ? "true" : void 0,
+		children: [
+			prefix != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
+				align: "inline-start",
+				className: prefixClassName,
+				children: prefix
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupInput, {
+				className,
+				disabled,
+				...restProps
+			}),
+			suffix != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
+				align: "inline-end",
+				className: suffixClassName,
+				children: suffix
+			}) : null
+		]
+	});
+}
+
+//#endregion
+exports.Input = Input;

package/dist/input/Input.d.cts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime8 from "react/jsx-runtime";
+import { InputProps } from "@pixpilot/shadcn";
+import * as React$1 from "react";
+
+//#region src/input/Input.d.ts
+type InputProps$1 = InputProps & {
+  prefix?: React$1.ReactNode;
+  suffix?: React$1.ReactNode;
+  groupClassName?: string;
+  prefixClassName?: string;
+  suffixClassName?: string;
+};
+declare function Input(props: InputProps$1): react_jsx_runtime8.JSX.Element;
+//#endregion
+export { Input, InputProps$1 as InputProps };

package/dist/input/Input.d.ts

@@ -0,0 +1,15 @@
+import { InputProps } from "@pixpilot/shadcn";
+import * as React$1 from "react";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+
+//#region src/input/Input.d.ts
+type InputProps$1 = InputProps & {
+  prefix?: React$1.ReactNode;
+  suffix?: React$1.ReactNode;
+  groupClassName?: string;
+  prefixClassName?: string;
+  suffixClassName?: string;
+};
+declare function Input$1(props: InputProps$1): react_jsx_runtime6.JSX.Element;
+//#endregion
+export { Input$1 as Input, InputProps$1 as InputProps };

package/dist/input/Input.js

@@ -0,0 +1,37 @@
+import { Input, InputGroup, InputGroupAddon, InputGroupInput, cn } from "@pixpilot/shadcn";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/input/Input.tsx
+function Input$1(props) {
+	const { prefix, suffix, groupClassName, prefixClassName, suffixClassName, className, disabled,...restProps } = props;
+	if (prefix == null && suffix == null) return /* @__PURE__ */ jsx(Input, {
+		className,
+		disabled,
+		...restProps
+	});
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		className: cn(groupClassName),
+		"data-disabled": disabled ? "true" : void 0,
+		children: [
+			prefix != null ? /* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "inline-start",
+				className: prefixClassName,
+				children: prefix
+			}) : null,
+			/* @__PURE__ */ jsx(InputGroupInput, {
+				className,
+				disabled,
+				...restProps
+			}),
+			suffix != null ? /* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "inline-end",
+				className: suffixClassName,
+				children: suffix
+			}) : null
+		]
+	});
+}
+
+//#endregion
+export { Input$1 as Input };

package/dist/input/index.cjs

@@ -0,0 +1 @@
+const require_Input = require('./Input.cjs');

package/dist/input/index.d.cts

@@ -0,0 +1 @@
+import { Input, InputProps } from "./Input.cjs";

package/dist/input/index.d.ts

@@ -0,0 +1 @@
+import { Input, InputProps } from "./Input.js";

package/dist/input/index.js

@@ -0,0 +1 @@
+import { Input } from "./Input.js";

package/dist/layout/Layout.cjs

@@ -7,8 +7,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/layout/Layout.tsx
-const Layout = react.default.forwardRef(({ className,...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const Layout = react.default.forwardRef(({ className, as: Component = "div",...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		ref,
 		className: (0, __pixpilot_shadcn.cn)("flex w-full flex-col overflow-hidden", "h-dvh", "max-h-full", className),
 		...props

package/dist/layout/Layout.d.cts

@@ -1,7 +1,9 @@
 import React from "react";
 
 //#region src/layout/Layout.d.ts
-interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
 declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Layout, LayoutProps };

package/dist/layout/Layout.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 
 //#region src/layout/Layout.d.ts
-interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
 declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Layout, LayoutProps };

package/dist/layout/Layout.js

@@ -3,8 +3,8 @@ import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/layout/Layout.tsx
-const Layout = React.forwardRef(({ className,...props }, ref) => {
-	return /* @__PURE__ */ jsx("div", {
+const Layout = React.forwardRef(({ className, as: Component = "div",...props }, ref) => {
+	return /* @__PURE__ */ jsx(Component, {
 		ref,
 		className: cn("flex w-full flex-col overflow-hidden", "h-dvh", "max-h-full", className),
 		...props

package/dist/layout/LayoutFooter.cjs

@@ -7,7 +7,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/layout/LayoutFooter.tsx
-const LayoutFooter = react.default.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const LayoutFooter = react.default.forwardRef(({ className, as: Component = "div",...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 	...props,
 	className: (0, __pixpilot_shadcn.cn)(className),
 	ref

package/dist/layout/LayoutFooter.d.cts

@@ -1,7 +1,9 @@
 import React from "react";
 
 //#region src/layout/LayoutFooter.d.ts
-interface LayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface LayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
 declare const LayoutFooter: React.ForwardRefExoticComponent<LayoutFooterProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { LayoutFooter, LayoutFooterProps };

package/dist/layout/LayoutFooter.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 
 //#region src/layout/LayoutFooter.d.ts
-interface LayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface LayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
 declare const LayoutFooter: React.ForwardRefExoticComponent<LayoutFooterProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { LayoutFooter, LayoutFooterProps };

package/dist/layout/LayoutFooter.js

@@ -3,7 +3,7 @@ import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/layout/LayoutFooter.tsx
-const LayoutFooter = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const LayoutFooter = React.forwardRef(({ className, as: Component = "div",...props }, ref) => /* @__PURE__ */ jsx(Component, {
 	...props,
 	className: cn(className),
 	ref

package/dist/layout/LayoutHeader.cjs

@@ -7,7 +7,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/layout/LayoutHeader.tsx
-const LayoutHeader = react.default.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const LayoutHeader = react.default.forwardRef(({ className, as: Component = "div",...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 	...props,
 	className: (0, __pixpilot_shadcn.cn)(className),
 	ref

package/dist/layout/LayoutHeader.d.cts

@@ -1,7 +1,9 @@
 import React from "react";
 
 //#region src/layout/LayoutHeader.d.ts
-interface LayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface LayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
 declare const LayoutHeader: React.ForwardRefExoticComponent<LayoutHeaderProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { LayoutHeader, LayoutHeaderProps };

package/dist/layout/LayoutHeader.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 
 //#region src/layout/LayoutHeader.d.ts
-interface LayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface LayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
 declare const LayoutHeader: React.ForwardRefExoticComponent<LayoutHeaderProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { LayoutHeader, LayoutHeaderProps };

package/dist/layout/LayoutHeader.js

@@ -3,7 +3,7 @@ import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/layout/LayoutHeader.tsx
-const LayoutHeader = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const LayoutHeader = React.forwardRef(({ className, as: Component = "div",...props }, ref) => /* @__PURE__ */ jsx(Component, {
 	...props,
 	className: cn(className),
 	ref

package/dist/layout/LayoutMain.cjs

@@ -7,8 +7,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/layout/LayoutMain.tsx
-const LayoutMain = react.default.forwardRef(({ autoScroll = true, className,...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
+const LayoutMain = react.default.forwardRef(({ autoScroll = true, className, as: Component = "div",...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		ref,
 		className: (0, __pixpilot_shadcn.cn)("flex-1", { "overflow-auto": autoScroll }, className),
 		...props

package/dist/layout/LayoutMain.d.cts

@@ -1,9 +1,10 @@
 import React from "react";
 
 //#region src/layout/LayoutMain.d.ts
-interface LayoutMainProps extends React.HTMLAttributes<HTMLElement> {
+interface LayoutMainProps extends React.HTMLAttributes<HTMLDivElement> {
   autoScroll?: boolean;
+  as?: React.ElementType;
 }
-declare const LayoutMain: React.ForwardRefExoticComponent<LayoutMainProps & React.RefAttributes<HTMLElement>>;
+declare const LayoutMain: React.ForwardRefExoticComponent<LayoutMainProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { LayoutMain, LayoutMainProps };

package/dist/layout/LayoutMain.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 
 //#region src/layout/LayoutMain.d.ts
-interface LayoutMainProps extends React.HTMLAttributes<HTMLElement> {
+interface LayoutMainProps extends React.HTMLAttributes<HTMLDivElement> {
   autoScroll?: boolean;
+  as?: React.ElementType;
 }
-declare const LayoutMain: React.ForwardRefExoticComponent<LayoutMainProps & React.RefAttributes<HTMLElement>>;
+declare const LayoutMain: React.ForwardRefExoticComponent<LayoutMainProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { LayoutMain, LayoutMainProps };

package/dist/layout/LayoutMain.js

@@ -3,8 +3,8 @@ import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/layout/LayoutMain.tsx
-const LayoutMain = React.forwardRef(({ autoScroll = true, className,...props }, ref) => {
-	return /* @__PURE__ */ jsx("main", {
+const LayoutMain = React.forwardRef(({ autoScroll = true, className, as: Component = "div",...props }, ref) => {
+	return /* @__PURE__ */ jsx(Component, {
 		ref,
 		className: cn("flex-1", { "overflow-auto": autoScroll }, className),
 		...props

package/dist/slider/SliderInput.cjs

@@ -1,13 +1,15 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_use_controlled = require('../hooks/src/use-controlled.cjs');
 require('../hooks/src/index.cjs');
+const require_Input = require('../input/Input.cjs');
 const require_Slider = require('./Slider.cjs');
-let __pixpilot_shadcn = require("@pixpilot/shadcn");
-__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+require('../index.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);
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 
 //#region src/slider/SliderInput.tsx
 function clampNumber(input, min, max) {
@@ -56,7 +58,7 @@ const SliderInput = (props) => {
 			disabled,
 			value: currentValue,
 			onValueChange: handleValueChange
-		}), showInput && Array.isArray(currentValue) && currentValue.map((v, i) => /* @__PURE__ */ (0, react.createElement)(__pixpilot_shadcn.Input, {
+		}), showInput && Array.isArray(currentValue) && currentValue.map((v, i) => /* @__PURE__ */ (0, react.createElement)(require_Input.Input, {
 			id: id ?? `${id}-input-${i}`,
 			disabled,
 			...input,

package/dist/slider/SliderInput.d.cts

@@ -1,10 +1,12 @@
+import { InputProps } from "../input/Input.cjs";
 import { Slider } from "./Slider.cjs";
+import "../index.cjs";
 import React from "react";
 
 //#region src/slider/SliderInput.d.ts
 interface SliderInputProps extends React.ComponentProps<typeof Slider> {
   showInput?: boolean;
-  input?: React.ComponentProps<'input'>;
+  input?: InputProps;
   slider?: {
     className?: string;
   };

package/dist/slider/SliderInput.d.ts

@@ -1,10 +1,12 @@
+import { InputProps } from "../input/Input.js";
 import { Slider } from "./Slider.js";
+import "../index.js";
 import React from "react";
 
 //#region src/slider/SliderInput.d.ts
 interface SliderInputProps extends React.ComponentProps<typeof Slider> {
   showInput?: boolean;
-  input?: React.ComponentProps<'input'>;
+  input?: InputProps;
   slider?: {
     className?: string;
   };

package/dist/slider/SliderInput.js

@@ -1,7 +1,8 @@
 import useControlled from "../hooks/src/use-controlled.js";
 import "../hooks/src/index.js";
-import { Slider as Slider$1 } from "./Slider.js";
-import { Input, cn } from "@pixpilot/shadcn";
+import { Input } from "../input/Input.js";
+import { Slider } from "./Slider.js";
+import { cn } from "../index.js";
 import React, { createElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -42,7 +43,7 @@ const SliderInput = (props) => {
 		id,
 		className: "flex items-center gap-2",
 		style,
-		children: [/* @__PURE__ */ jsx(Slider$1, {
+		children: [/* @__PURE__ */ jsx(Slider, {
 			...rest,
 			className: slider?.className,
 			id: id ?? `${id}-slider`,

package/dist/slider/SliderSelect.cjs

@@ -0,0 +1,99 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_use_controlled = require('../hooks/src/use-controlled.cjs');
+require('../hooks/src/index.cjs');
+const require_Select = require('../Select.cjs');
+const require_Slider = require('./Slider.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+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/slider/SliderSelect.tsx
+function normalizeOptions(options) {
+	return options.map((option) => {
+		if (typeof option === "object" && option !== null && "value" in option) return {
+			value: option.value,
+			label: option.label ?? String(option.value)
+		};
+		return {
+			value: option,
+			label: String(option)
+		};
+	});
+}
+const SliderSelect = (props) => {
+	const { options, value: valueProp, defaultValue, onValueChange, disabled, id, className, style, showSelect = true, select, slider,...rest } = props;
+	const { containerClassName: selectContainerClassName,...selectProps } = select ?? {};
+	const normalizedOptions = react.default.useMemo(() => normalizeOptions(options), [options]);
+	const hasOptions = normalizedOptions.length > 0;
+	const [currentValue, setCurrentValue] = require_use_controlled.default({
+		controlled: valueProp,
+		default: react.default.useMemo(() => {
+			if (defaultValue !== void 0) return defaultValue;
+			if (valueProp !== void 0) return valueProp;
+			return hasOptions ? normalizedOptions[0].value : "";
+		}, [
+			defaultValue,
+			valueProp,
+			hasOptions,
+			normalizedOptions
+		]),
+		name: "SliderSelect",
+		state: "value"
+	});
+	const currentIndex = react.default.useMemo(() => {
+		const idx = normalizedOptions.findIndex((o) => o.value === currentValue);
+		return idx >= 0 ? idx : 0;
+	}, [currentValue, normalizedOptions]);
+	const handleOptionChange = (nextValue) => {
+		setCurrentValue(nextValue);
+		onValueChange?.(nextValue);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		id,
+		className: (0, __pixpilot_shadcn.cn)("flex items-center gap-2", className),
+		style,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Slider.Slider, {
+			...rest,
+			className: slider?.className,
+			id: id != null ? `${id}-slider` : void 0,
+			min: 0,
+			max: Math.max(0, normalizedOptions.length - 1),
+			step: 1,
+			disabled: disabled || !hasOptions,
+			value: [currentIndex],
+			onValueChange: (next) => {
+				const index = next[0] ?? 0;
+				const option = normalizedOptions[Math.max(0, Math.min(index, normalizedOptions.length - 1))];
+				if (!option) return;
+				handleOptionChange(option.value);
+			}
+		}), showSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, __pixpilot_shadcn.cn)("w-28", selectContainerClassName),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Select.Select, {
+				...selectProps,
+				contentProps: {
+					position: "item-aligned",
+					...selectProps.contentProps
+				},
+				options: normalizedOptions.map((o) => ({
+					value: o.value,
+					label: o.label
+				})),
+				value: String(currentValue ?? ""),
+				onChange: (v) => {
+					const matched = normalizedOptions.find((o) => String(o.value) === v);
+					if (!matched) return;
+					handleOptionChange(matched.value);
+				},
+				disabled: disabled || !hasOptions
+			})
+		})]
+	});
+};
+SliderSelect.displayName = "SliderSelect";
+
+//#endregion
+exports.SliderSelect = SliderSelect;

package/dist/slider/SliderSelect.d.cts

@@ -0,0 +1,27 @@
+import { Select } from "../Select.cjs";
+import { Slider } from "./Slider.cjs";
+import React, { ComponentProps } from "react";
+
+//#region src/slider/SliderSelect.d.ts
+type SliderSelectValue = string | number;
+type SliderSelectOption = SliderSelectValue | {
+  value: SliderSelectValue;
+  label?: string;
+};
+type SliderSelectSelectProps = Omit<ComponentProps<typeof Select>, 'options' | 'value' | 'onChange'> & {
+  containerClassName?: string;
+};
+interface SliderSelectProps extends Omit<ComponentProps<typeof Slider>, 'min' | 'max' | 'step' | 'value' | 'defaultValue' | 'onValueChange'> {
+  options: SliderSelectOption[];
+  value?: SliderSelectValue;
+  defaultValue?: SliderSelectValue;
+  onValueChange?: (value: SliderSelectValue) => void;
+  showSelect?: boolean;
+  select?: SliderSelectSelectProps;
+  slider?: {
+    className?: string;
+  };
+}
+declare const SliderSelect: React.FC<SliderSelectProps>;
+//#endregion
+export { SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue };

package/dist/slider/SliderSelect.d.ts

@@ -0,0 +1,27 @@
+import { Select } from "../Select.js";
+import { Slider } from "./Slider.js";
+import React, { ComponentProps } from "react";
+
+//#region src/slider/SliderSelect.d.ts
+type SliderSelectValue = string | number;
+type SliderSelectOption = SliderSelectValue | {
+  value: SliderSelectValue;
+  label?: string;
+};
+type SliderSelectSelectProps = Omit<ComponentProps<typeof Select>, 'options' | 'value' | 'onChange'> & {
+  containerClassName?: string;
+};
+interface SliderSelectProps extends Omit<ComponentProps<typeof Slider>, 'min' | 'max' | 'step' | 'value' | 'defaultValue' | 'onValueChange'> {
+  options: SliderSelectOption[];
+  value?: SliderSelectValue;
+  defaultValue?: SliderSelectValue;
+  onValueChange?: (value: SliderSelectValue) => void;
+  showSelect?: boolean;
+  select?: SliderSelectSelectProps;
+  slider?: {
+    className?: string;
+  };
+}
+declare const SliderSelect: React.FC<SliderSelectProps>;
+//#endregion
+export { SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue };

package/dist/slider/SliderSelect.js

@@ -0,0 +1,95 @@
+import useControlled from "../hooks/src/use-controlled.js";
+import "../hooks/src/index.js";
+import { Select as Select$1 } from "../Select.js";
+import { Slider as Slider$1 } from "./Slider.js";
+import { cn } from "@pixpilot/shadcn";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/slider/SliderSelect.tsx
+function normalizeOptions(options) {
+	return options.map((option) => {
+		if (typeof option === "object" && option !== null && "value" in option) return {
+			value: option.value,
+			label: option.label ?? String(option.value)
+		};
+		return {
+			value: option,
+			label: String(option)
+		};
+	});
+}
+const SliderSelect = (props) => {
+	const { options, value: valueProp, defaultValue, onValueChange, disabled, id, className, style, showSelect = true, select, slider,...rest } = props;
+	const { containerClassName: selectContainerClassName,...selectProps } = select ?? {};
+	const normalizedOptions = React.useMemo(() => normalizeOptions(options), [options]);
+	const hasOptions = normalizedOptions.length > 0;
+	const [currentValue, setCurrentValue] = useControlled({
+		controlled: valueProp,
+		default: React.useMemo(() => {
+			if (defaultValue !== void 0) return defaultValue;
+			if (valueProp !== void 0) return valueProp;
+			return hasOptions ? normalizedOptions[0].value : "";
+		}, [
+			defaultValue,
+			valueProp,
+			hasOptions,
+			normalizedOptions
+		]),
+		name: "SliderSelect",
+		state: "value"
+	});
+	const currentIndex = React.useMemo(() => {
+		const idx = normalizedOptions.findIndex((o) => o.value === currentValue);
+		return idx >= 0 ? idx : 0;
+	}, [currentValue, normalizedOptions]);
+	const handleOptionChange = (nextValue) => {
+		setCurrentValue(nextValue);
+		onValueChange?.(nextValue);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: cn("flex items-center gap-2", className),
+		style,
+		children: [/* @__PURE__ */ jsx(Slider$1, {
+			...rest,
+			className: slider?.className,
+			id: id != null ? `${id}-slider` : void 0,
+			min: 0,
+			max: Math.max(0, normalizedOptions.length - 1),
+			step: 1,
+			disabled: disabled || !hasOptions,
+			value: [currentIndex],
+			onValueChange: (next) => {
+				const index = next[0] ?? 0;
+				const option = normalizedOptions[Math.max(0, Math.min(index, normalizedOptions.length - 1))];
+				if (!option) return;
+				handleOptionChange(option.value);
+			}
+		}), showSelect && /* @__PURE__ */ jsx("div", {
+			className: cn("w-28", selectContainerClassName),
+			children: /* @__PURE__ */ jsx(Select$1, {
+				...selectProps,
+				contentProps: {
+					position: "item-aligned",
+					...selectProps.contentProps
+				},
+				options: normalizedOptions.map((o) => ({
+					value: o.value,
+					label: o.label
+				})),
+				value: String(currentValue ?? ""),
+				onChange: (v) => {
+					const matched = normalizedOptions.find((o) => String(o.value) === v);
+					if (!matched) return;
+					handleOptionChange(matched.value);
+				},
+				disabled: disabled || !hasOptions
+			})
+		})]
+	});
+};
+SliderSelect.displayName = "SliderSelect";
+
+//#endregion
+export { SliderSelect };

package/dist/slider/index.cjs

@@ -1,2 +1,3 @@
 const require_Slider = require('./Slider.cjs');
 const require_SliderInput = require('./SliderInput.cjs');
+const require_SliderSelect = require('./SliderSelect.cjs');

package/dist/slider/index.d.cts

@@ -1,2 +1,3 @@
 import { Slider, SliderProps } from "./Slider.cjs";
-import { SliderInput, SliderInputProps } from "./SliderInput.cjs";
+import { SliderInput, SliderInputProps } from "./SliderInput.cjs";
+import { SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue } from "./SliderSelect.cjs";

package/dist/slider/index.d.ts

@@ -1,2 +1,3 @@
 import { Slider, SliderProps } from "./Slider.js";
-import { SliderInput, SliderInputProps } from "./SliderInput.js";
+import { SliderInput, SliderInputProps } from "./SliderInput.js";
+import { SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue } from "./SliderSelect.js";

package/dist/slider/index.js

@@ -1,2 +1,3 @@
 import { Slider } from "./Slider.js";
 import { SliderInput } from "./SliderInput.js";
+import { SliderSelect } from "./SliderSelect.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.16.1",
+  "version": "0.18.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -44,7 +44,7 @@
     "pretty-bytes": "^7.1.0",
     "react-responsive": "^10.0.1",
     "sonner": "2.0.7",
-    "@pixpilot/shadcn": "0.6.1"
+    "@pixpilot/shadcn": "0.7.0"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.14",