@pixpilot/shadcn-ui 1.23.0 → 1.24.0

package/dist/ColorPickerBase/color-palette/PaletteSwatch.cjs

@@ -8,7 +8,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/color-palette/PaletteSwatch.tsx
-const ColorPickerPaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
+const ColorPickerPaletteSwatch = ({ id, color, onSelect, className, selectedValue }) => {
 	const colorValue = color?.value ?? "rgb(0,0,0,0)";
 	const colorLabel = color?.label;
 	const normalizeColor = (0, react.useCallback)((value) => {
@@ -27,6 +27,7 @@ const ColorPickerPaletteSwatch = ({ color, onSelect, className, selectedValue })
 		if (onSelect) onSelect(colorValue);
 	}, [colorValue, onSelect]);
 	const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.ColorPickerPaletteButton, {
+		id,
 		style: {
 			backgroundImage: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
 			backgroundSize: "auto, 8px 8px"

package/dist/ColorPickerBase/color-palette/PaletteSwatch.d.cts

@@ -2,6 +2,7 @@ import { PresetColor } from "../types.cjs";
 
 //#region src/ColorPickerBase/color-palette/PaletteSwatch.d.ts
 declare const ColorPickerPaletteSwatch: React.FC<{
+  id?: string;
   color?: PresetColor;
   onSelect?: (color: string) => void;
   className?: string;

package/dist/ColorPickerBase/color-palette/PaletteSwatch.d.ts

@@ -2,6 +2,7 @@ import { PresetColor } from "../types.js";
 
 //#region src/ColorPickerBase/color-palette/PaletteSwatch.d.ts
 declare const ColorPickerPaletteSwatch: React.FC<{
+  id?: string;
   color?: PresetColor;
   onSelect?: (color: string) => void;
   className?: string;

package/dist/ColorPickerBase/color-palette/PaletteSwatch.js

@@ -4,7 +4,7 @@ import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/color-palette/PaletteSwatch.tsx
-const ColorPickerPaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
+const ColorPickerPaletteSwatch = ({ id, color, onSelect, className, selectedValue }) => {
 	const colorValue = color?.value ?? "rgb(0,0,0,0)";
 	const colorLabel = color?.label;
 	const normalizeColor = useCallback((value) => {
@@ -23,6 +23,7 @@ const ColorPickerPaletteSwatch = ({ color, onSelect, className, selectedValue })
 		if (onSelect) onSelect(colorValue);
 	}, [colorValue, onSelect]);
 	const button = /* @__PURE__ */ jsx(ColorPickerPaletteButton, {
+		id,
 		style: {
 			backgroundImage: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
 			backgroundSize: "auto, 8px 8px"

package/dist/ColorPickerBase/color-picker-context.d.cts

@@ -2,6 +2,7 @@ import React from "react";
 
 //#region src/ColorPickerBase/color-picker-context.d.ts
 interface ColorPickerContextStates {
+  id?: string;
   isPickerOpen: boolean;
   value: string;
   onValueChange: (value: string) => void;

package/dist/ColorPickerBase/color-picker-context.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 
 //#region src/ColorPickerBase/color-picker-context.d.ts
 interface ColorPickerContextStates {
+  id?: string;
   isPickerOpen: boolean;
   value: string;
   onValueChange: (value: string) => void;

package/dist/ColorPickerBase/types.d.cts

@@ -12,6 +12,7 @@ interface ColorPickerContentWrapperProps extends React.ComponentProps<typeof Col
   width?: number | string;
 }
 type ColorPickerContentProps = Required<Pick<ColorPickerBaseProps, 'onValueChange' | 'presetColors' | 'sections'>> & {
+  id?: string;
   currentValue: string;
   contentProps?: Partial<ColorPickerContentWrapperProps>;
 };
@@ -34,6 +35,7 @@ interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'chil
     value?: string;
     onValueChange: (value: string) => void;
     isPickerOpen: boolean;
+    id?: string;
   }) => React.ReactNode);
 }
 interface ColorPickerResetOptions {

package/dist/ColorPickerBase/types.d.ts

@@ -12,6 +12,7 @@ interface ColorPickerContentWrapperProps extends React.ComponentProps<typeof Col
   width?: number | string;
 }
 type ColorPickerContentProps = Required<Pick<ColorPickerBaseProps, 'onValueChange' | 'presetColors' | 'sections'>> & {
+  id?: string;
   currentValue: string;
   contentProps?: Partial<ColorPickerContentWrapperProps>;
 };
@@ -34,6 +35,7 @@ interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'chil
     value?: string;
     onValueChange: (value: string) => void;
     isPickerOpen: boolean;
+    id?: string;
   }) => React.ReactNode);
 }
 interface ColorPickerResetOptions {

package/dist/ColorSelect.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_get_id = require('./utils/get-id.cjs');
 const require_use_select_keyboard = require('./hooks/use-select-keyboard.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
@@ -9,7 +10,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorSelect.tsx
 function ColorSelect(props) {
-	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, id,...restProps } = props;
 	const [uncontrolledOpen, setUncontrolledOpen] = react.default.useState(false);
 	const open = openProp ?? uncontrolledOpen;
 	const handleOpenChange = (nextOpen) => {
@@ -32,6 +33,7 @@ function ColorSelect(props) {
 		onOpenChange: handleOpenChange,
 		...restProps,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectTrigger, {
+			id,
 			className: "w-full",
 			onKeyDown: handleTriggerKeyDown,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectValue, {
@@ -47,6 +49,7 @@ function ColorSelect(props) {
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectContent, {
 			...contentProps,
 			children: options?.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectItem, {
+				id: require_get_id.getId(id, `option-${option.value}`),
 				value: option.value,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-2",

package/dist/ColorSelect.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 import { Select, SelectContent } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
 
@@ -8,6 +8,7 @@ interface ColorSelectOption {
   value: string;
 }
 type BaseColorSelectProps = {
+  id?: string;
   options?: ColorSelectOption[];
   contentProps?: React.ComponentProps<typeof SelectContent>;
   value?: string;
@@ -15,6 +16,6 @@ type BaseColorSelectProps = {
   placeholder?: string;
   keyboardMode?: 'cycle' | 'dropdown';
 } & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
-declare function ColorSelect(props: BaseColorSelectProps): react_jsx_runtime7.JSX.Element;
+declare function ColorSelect(props: BaseColorSelectProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 export { BaseColorSelectProps, ColorSelect, ColorSelectOption };

package/dist/ColorSelect.d.ts

@@ -8,6 +8,7 @@ interface ColorSelectOption {
   value: string;
 }
 type BaseColorSelectProps = {
+  id?: string;
   options?: ColorSelectOption[];
   contentProps?: React.ComponentProps<typeof SelectContent>;
   value?: string;

package/dist/ColorSelect.js

@@ -1,3 +1,4 @@
+import { getId } from "./utils/get-id.js";
 import { useSelectKeyboard } from "./hooks/use-select-keyboard.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@pixpilot/shadcn";
 import React from "react";
@@ -5,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorSelect.tsx
 function ColorSelect(props) {
-	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp, id,...restProps } = props;
 	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
 	const open = openProp ?? uncontrolledOpen;
 	const handleOpenChange = (nextOpen) => {
@@ -28,6 +29,7 @@ function ColorSelect(props) {
 		onOpenChange: handleOpenChange,
 		...restProps,
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			id,
 			className: "w-full",
 			onKeyDown: handleTriggerKeyDown,
 			children: /* @__PURE__ */ jsx(SelectValue, {
@@ -43,6 +45,7 @@ function ColorSelect(props) {
 		}), /* @__PURE__ */ jsx(SelectContent, {
 			...contentProps,
 			children: options?.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				id: getId(id, `option-${option.value}`),
 				value: option.value,
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",

package/dist/Combobox.cjs

@@ -2,6 +2,7 @@
 
 
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_get_id = require('./utils/get-id.cjs');
 const require_CommandOptionList = require('./CommandOptionList.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
@@ -15,7 +16,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 //#region src/Combobox.tsx
 const DEFAULT_OPTIONS = [];
 const Combobox = (props) => {
-	const { value = "", onChange, options = DEFAULT_OPTIONS, placeholder = "Select option...", searchPlaceholder = "Search...", emptyText = "No option found.",...commandProps } = props;
+	const { value = "", onChange, options = DEFAULT_OPTIONS, placeholder = "Select option...", searchPlaceholder = "Search...", emptyText = "No option found.", id,...commandProps } = props;
 	const [open, setOpen] = (0, react.useState)(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
 		open,
@@ -23,6 +24,7 @@ const Combobox = (props) => {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+				id,
 				variant: "outline",
 				role: "combobox",
 				"aria-expanded": open,
@@ -34,7 +36,11 @@ const Combobox = (props) => {
 			style: { width: "var(--radix-popover-trigger-width)" },
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Command, {
 				...commandProps,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandInput, { placeholder: searchPlaceholder }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CommandOptionList.CommandOptionList, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandInput, {
+					id: require_get_id.getId(id, "search-input"),
+					placeholder: searchPlaceholder
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CommandOptionList.CommandOptionList, {
+					id,
 					options,
 					value,
 					onChange: (val) => {

package/dist/Combobox.d.cts

@@ -4,6 +4,7 @@ import React, { ComponentProps } from "react";
 
 //#region src/Combobox.d.ts
 type ComboboxProps = {
+  id?: string;
   value?: string;
   onChange?: (value: string) => void;
   options?: CommandOptionListItem[];

package/dist/Combobox.d.ts

@@ -4,6 +4,7 @@ import React, { ComponentProps } from "react";
 
 //#region src/Combobox.d.ts
 type ComboboxProps = {
+  id?: string;
   value?: string;
   onChange?: (value: string) => void;
   options?: CommandOptionListItem[];

package/dist/Combobox.js

@@ -1,6 +1,7 @@
 'use client';
 
 
+import { getId } from "./utils/get-id.js";
 import { CommandOptionList } from "./CommandOptionList.js";
 import { Button, Command, CommandInput, Popover, PopoverContent, PopoverTrigger } from "@pixpilot/shadcn";
 import { ChevronsUpDown } from "lucide-react";
@@ -10,7 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Combobox.tsx
 const DEFAULT_OPTIONS = [];
 const Combobox = (props) => {
-	const { value = "", onChange, options = DEFAULT_OPTIONS, placeholder = "Select option...", searchPlaceholder = "Search...", emptyText = "No option found.",...commandProps } = props;
+	const { value = "", onChange, options = DEFAULT_OPTIONS, placeholder = "Select option...", searchPlaceholder = "Search...", emptyText = "No option found.", id,...commandProps } = props;
 	const [open, setOpen] = useState(false);
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
@@ -18,6 +19,7 @@ const Combobox = (props) => {
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs(Button, {
+				id,
 				variant: "outline",
 				role: "combobox",
 				"aria-expanded": open,
@@ -29,7 +31,11 @@ const Combobox = (props) => {
 			style: { width: "var(--radix-popover-trigger-width)" },
 			children: /* @__PURE__ */ jsxs(Command, {
 				...commandProps,
-				children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }), /* @__PURE__ */ jsx(CommandOptionList, {
+				children: [/* @__PURE__ */ jsx(CommandInput, {
+					id: getId(id, "search-input"),
+					placeholder: searchPlaceholder
+				}), /* @__PURE__ */ jsx(CommandOptionList, {
+					id,
 					options,
 					value,
 					onChange: (val) => {

package/dist/CommandOptionList.cjs

@@ -2,6 +2,7 @@
 
 
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_get_id = require('./utils/get-id.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let lucide_react = require("lucide-react");
@@ -11,8 +12,9 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/CommandOptionList.tsx
 const CommandOptionList = (props) => {
-	const { options, value, onChange, emptyText = "No option found." } = props;
+	const { id, options, value, onChange, emptyText = "No option found." } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.CommandList, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandEmpty, { children: emptyText }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandGroup, { children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.CommandItem, {
+		id: require_get_id.getId(id, `option-${option.value}`),
 		value: option.value,
 		onSelect: (currentValue) => {
 			onChange?.(currentValue === value ? "" : currentValue);

package/dist/CommandOptionList.js

@@ -1,14 +1,16 @@
 'use client';
 
 
+import { getId } from "./utils/get-id.js";
 import { CommandEmpty, CommandGroup, CommandItem, CommandList, cn } from "@pixpilot/shadcn";
 import { Check } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/CommandOptionList.tsx
 const CommandOptionList = (props) => {
-	const { options, value, onChange, emptyText = "No option found." } = props;
+	const { id, options, value, onChange, emptyText = "No option found." } = props;
 	return /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsx(CommandItem, {
+		id: getId(id, `option-${option.value}`),
 		value: option.value,
 		onSelect: (currentValue) => {
 			onChange?.(currentValue === value ? "" : currentValue);

package/dist/ContentCard.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import { Card } from "@pixpilot/shadcn";
 import React, { ReactNode } from "react";
 
@@ -8,7 +8,7 @@ interface SectionCardProps extends React.ComponentProps<typeof Card> {
   children: ReactNode;
   marginBottom?: boolean;
 }
-declare function ContentCard(props: SectionCardProps): react_jsx_runtime5.JSX.Element;
+declare function ContentCard(props: SectionCardProps): react_jsx_runtime3.JSX.Element;
 declare namespace ContentCard {
   var displayName: string;
 }

package/dist/ContentCard.d.ts

@@ -1,6 +1,6 @@
 import { Card } from "@pixpilot/shadcn";
 import React, { ReactNode } from "react";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/ContentCard.d.ts
 interface SectionCardProps extends React.ComponentProps<typeof Card> {
@@ -8,7 +8,7 @@ interface SectionCardProps extends React.ComponentProps<typeof Card> {
   children: ReactNode;
   marginBottom?: boolean;
 }
-declare function ContentCard(props: SectionCardProps): react_jsx_runtime5.JSX.Element;
+declare function ContentCard(props: SectionCardProps): react_jsx_runtime3.JSX.Element;
 declare namespace ContentCard {
   var displayName: string;
 }

package/dist/DatePicker.cjs

@@ -13,10 +13,11 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/DatePicker.tsx
 function DatePicker(props) {
-	const { value, onChange, placeholder = "Pick a date",...calendarProps } = props;
+	const { id, value, onChange, placeholder = "Pick a date",...calendarProps } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+			id,
 			variant: "outline",
 			className: (0, __pixpilot_shadcn.cn)("w-full justify-start text-left font-normal", !value && "text-muted-foreground"),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarIcon, { className: "mr-2 h-4 w-4" }), value ? value.toLocaleDateString() : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: placeholder })]

package/dist/DatePicker.d.cts

@@ -1,14 +1,15 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 import { Calendar } from "@pixpilot/shadcn";
 import { ComponentProps } from "react";
 
 //#region src/DatePicker.d.ts
 type DatePickerProps = {
+  id?: string;
   value?: Date;
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
 } & Omit<ComponentProps<typeof Calendar>, 'selected' | 'onSelect' | 'mode'>;
-declare function DatePicker(props: DatePickerProps): react_jsx_runtime6.JSX.Element;
+declare function DatePicker(props: DatePickerProps): react_jsx_runtime4.JSX.Element;
 declare namespace DatePicker {
   var displayName: string;
 }

package/dist/DatePicker.d.ts

@@ -1,14 +1,15 @@
 import { Calendar } from "@pixpilot/shadcn";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/DatePicker.d.ts
 type DatePickerProps = {
+  id?: string;
   value?: Date;
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
 } & Omit<ComponentProps<typeof Calendar>, 'selected' | 'onSelect' | 'mode'>;
-declare function DatePicker(props: DatePickerProps): react_jsx_runtime6.JSX.Element;
+declare function DatePicker(props: DatePickerProps): react_jsx_runtime4.JSX.Element;
 declare namespace DatePicker {
   var displayName: string;
 }

package/dist/DatePicker.js

@@ -8,10 +8,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/DatePicker.tsx
 function DatePicker(props) {
-	const { value, onChange, placeholder = "Pick a date",...calendarProps } = props;
+	const { id, value, onChange, placeholder = "Pick a date",...calendarProps } = props;
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs(Button, {
+			id,
 			variant: "outline",
 			className: cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground"),
 			children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), value ? value.toLocaleDateString() : /* @__PURE__ */ jsx("span", { children: placeholder })]

package/dist/IconToggle.cjs

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
-const require_ToggleButton = require('./ToggleButton.cjs');
 const require_svg = require('./utils/svg.cjs');
+const require_ToggleButton = require('./ToggleButton.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let react = require("react");

package/dist/IconToggle.js

@@ -1,5 +1,5 @@
-import { ToggleButton } from "./ToggleButton.js";
 import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.js";
+import { ToggleButton } from "./ToggleButton.js";
 import { cn } from "@pixpilot/shadcn";
 import React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/Rating.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_get_id = require('./utils/get-id.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let lucide_react = require("lucide-react");
@@ -124,7 +125,7 @@ function RatingButton({ index, className,...props }) {
 		}) : null]
 	});
 }
-function Rating({ value: valueProp, defaultValue, onValueChange, options: optionsProp, max: maxProp = DEFAULT_MAX_RATING, iconType = "star", size = "default", readOnly = false, disabled = false, name, required, color = "default", className, children,...props }) {
+function Rating({ value: valueProp, defaultValue, onValueChange, options: optionsProp, max: maxProp = DEFAULT_MAX_RATING, iconType = "star", size = "default", readOnly = false, disabled = false, name, required, color = "default", className, children, id,...props }) {
 	const isControlled = valueProp !== void 0;
 	const [internalValue, setInternalValue] = react.useState(defaultValue ?? 0);
 	const [hoverIndex, setHoverIndex] = react.useState(0);
@@ -185,12 +186,16 @@ function Rating({ value: valueProp, defaultValue, onValueChange, options: option
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingContext, {
 		value: contextValue,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			id: require_get_id.getId(id, "rating-group"),
 			role: "radiogroup",
 			tabIndex: 0,
 			className: (0, __pixpilot_shadcn.cn)(ratingVariants({ size }), className),
 			onMouseLeave: handleMouseLeave,
 			...props,
-			children: [children ?? Array.from({ length: max }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingButton, { index: index + 1 }, index)), hasNameText ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			children: [children ?? Array.from({ length: max }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingButton, {
+				id: index === 0 ? id : require_get_id.getId(id, `option-${index + 1}`),
+				index: index + 1
+			}, index)), hasNameText ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				type: "hidden",
 				name: nameTextOrEmpty,
 				value: value || "",

package/dist/Rating.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 import * as class_variance_authority_types0 from "class-variance-authority/types";
@@ -10,7 +10,7 @@ interface RatingOption {
   value: number;
 }
 declare const ratingVariants: (props?: ({
-  size?: "sm" | "default" | "lg" | "xl" | null | undefined;
+  size?: "default" | "sm" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type RatingSize = VariantProps<typeof ratingVariants>['size'];
 type IconType = 'star' | 'circle';
@@ -35,7 +35,7 @@ declare function RatingButton({
   index,
   className,
   ...props
-}: RatingButtonProps): react_jsx_runtime0.JSX.Element;
+}: RatingButtonProps): react_jsx_runtime5.JSX.Element;
 declare function Rating({
   value: valueProp,
   defaultValue,
@@ -51,7 +51,8 @@ declare function Rating({
   color,
   className,
   children,
+  id,
   ...props
-}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime0.JSX.Element;
+}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps };

package/dist/Rating.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import * as class_variance_authority_types0 from "class-variance-authority/types";
 
@@ -10,7 +10,7 @@ interface RatingOption {
   value: number;
 }
 declare const ratingVariants: (props?: ({
-  size?: "sm" | "default" | "lg" | "xl" | null | undefined;
+  size?: "default" | "sm" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type RatingSize = VariantProps<typeof ratingVariants>['size'];
 type IconType = 'star' | 'circle';
@@ -35,7 +35,7 @@ declare function RatingButton({
   index,
   className,
   ...props
-}: RatingButtonProps): react_jsx_runtime3.JSX.Element;
+}: RatingButtonProps): react_jsx_runtime5.JSX.Element;
 declare function Rating({
   value: valueProp,
   defaultValue,
@@ -51,7 +51,8 @@ declare function Rating({
   color,
   className,
   children,
+  id,
   ...props
-}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime3.JSX.Element;
+}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps };

package/dist/Rating.js

@@ -1,3 +1,4 @@
+import { getId } from "./utils/get-id.js";
 import { cn } from "@pixpilot/shadcn";
 import { Circle, Star } from "lucide-react";
 import * as React$1 from "react";
@@ -118,7 +119,7 @@ function RatingButton({ index, className,...props }) {
 		}) : null]
 	});
 }
-function Rating({ value: valueProp, defaultValue, onValueChange, options: optionsProp, max: maxProp = DEFAULT_MAX_RATING, iconType = "star", size = "default", readOnly = false, disabled = false, name, required, color = "default", className, children,...props }) {
+function Rating({ value: valueProp, defaultValue, onValueChange, options: optionsProp, max: maxProp = DEFAULT_MAX_RATING, iconType = "star", size = "default", readOnly = false, disabled = false, name, required, color = "default", className, children, id,...props }) {
 	const isControlled = valueProp !== void 0;
 	const [internalValue, setInternalValue] = React$1.useState(defaultValue ?? 0);
 	const [hoverIndex, setHoverIndex] = React$1.useState(0);
@@ -179,12 +180,16 @@ function Rating({ value: valueProp, defaultValue, onValueChange, options: option
 	return /* @__PURE__ */ jsx(RatingContext, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsxs("div", {
+			id: getId(id, "rating-group"),
 			role: "radiogroup",
 			tabIndex: 0,
 			className: cn(ratingVariants({ size }), className),
 			onMouseLeave: handleMouseLeave,
 			...props,
-			children: [children ?? Array.from({ length: max }, (_, index) => /* @__PURE__ */ jsx(RatingButton, { index: index + 1 }, index)), hasNameText ? /* @__PURE__ */ jsx("input", {
+			children: [children ?? Array.from({ length: max }, (_, index) => /* @__PURE__ */ jsx(RatingButton, {
+				id: index === 0 ? id : getId(id, `option-${index + 1}`),
+				index: index + 1
+			}, index)), hasNameText ? /* @__PURE__ */ jsx("input", {
 				type: "hidden",
 				name: nameTextOrEmpty,
 				value: value || "",

package/dist/Select.cjs

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
-const require_use_select_keyboard = require('./hooks/use-select-keyboard.cjs');
 const require_get_id = require('./utils/get-id.cjs');
+const require_use_select_keyboard = require('./hooks/use-select-keyboard.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let lucide_react = require("lucide-react");

package/dist/Select.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 import { Select, SelectContent } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
 
@@ -51,6 +51,6 @@ type BaseSelectProps = {
   required?: boolean;
   className?: string;
 } & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children' | 'disabled' | 'name' | 'required'>;
-declare function Select$1(props: BaseSelectProps): react_jsx_runtime4.JSX.Element;
+declare function Select$1(props: BaseSelectProps): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { Select$1 as Select, SelectContentProps, SelectOption };

package/dist/Select.js

@@ -1,5 +1,5 @@
-import { useSelectKeyboard } from "./hooks/use-select-keyboard.js";
 import { getId } from "./utils/get-id.js";
+import { useSelectKeyboard } from "./hooks/use-select-keyboard.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, cn } from "@pixpilot/shadcn";
 import { XIcon } from "lucide-react";
 import React from "react";