@pixpilot/shadcn-ui 0.16.1 → 0.17.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-inline/FileUploadInline.d.cts

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.cjs";
-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_runtime7 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_runtime7.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_runtime8 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_runtime8.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/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.17.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",