@nattstack/ui 0.0.87 → 0.0.89

package/dist/components/button/button.css

@@ -167,7 +167,7 @@
 
   .button-module_variant_secondary_4nLWdW {
     --color-text: #000;
-    background-color: var(--color-bg-shell-outer);
+    background-color: var(--color-bg-shell-inner);
     box-shadow: inset 0 0 0 1px var(--color-border);
     color: var(--color-text);
   }

package/dist/components/button/button.js

@@ -15,6 +15,7 @@ function Button(props) {
 			size,
 			variant
 		}),
+		"data-slot": "button",
 		disabled: isDisabled || isLoading,
 		type: "button",
 		...rest,

package/dist/components/button-link/button-link.js

@@ -11,6 +11,7 @@ function ButtonLink(props) {
 			size,
 			variant
 		}),
+		"data-slot": "button-link",
 		...rest,
 		children: [
 			iconStart,

package/dist/components/checkbox/checkbox-icon.js

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 function CheckboxIcon(props) {
 	const { ...rest } = props;
 	return /* @__PURE__ */ jsx("svg", {
+		"data-slot": "checkbox-icon",
 		fill: "none",
 		height: "24",
 		viewBox: "0 0 24 24",

package/dist/components/checkbox/checkbox.js

@@ -9,6 +9,7 @@ function Checkbox$1(props) {
 	const combinedClassName = checkboxVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
 		className: combinedClassName,
+		"data-slot": "checkbox",
 		...rest,
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
 			className: checkbox_module_default.indicator,

package/dist/components/column/column.js

@@ -6,6 +6,7 @@ function Column(props) {
 	const { alignItems = void 0, as = "div", className: customClassName = "", flexWrap = void 0, gap = void 0, gapX = void 0, gapY = void 0, justifyContent = void 0, style: customStyle, ...rest } = props;
 	return createElement(as, {
 		className: columnVariants({ className: customClassName }),
+		"data-slot": "column",
 		style: {
 			...customStyle,
 			...gap === void 0 ? {} : { gap },

package/dist/components/icon-button/icon-button.js

@@ -17,6 +17,7 @@ function IconButton(props) {
 			className,
 			size
 		})),
+		"data-slot": "icon-button",
 		disabled: isDisabled || isLoading,
 		type: "button",
 		...rest,

package/dist/components/index.d.ts

@@ -26,6 +26,13 @@ import { MenuViewport, MenuViewportProps } from "./menu/menu-viewport.js";
 import { OTPField, otpFieldVariants } from "./otp-field/otp-field.js";
 import { OTPFieldInput, otpFieldInputVariants } from "./otp-field/otp-field-input.js";
 import { Row, RowProps, rowVariants } from "./row/row.js";
+import { Select, SelectProps } from "./select/select.js";
+import { SelectContent, SelectContentProps, selectContentVariants } from "./select/select-content.js";
+import { SelectGroup, SelectGroupProps, selectGroupVariants } from "./select/select-group.js";
+import { SelectGroupLabel, SelectGroupLabelProps, selectGroupLabelVariants } from "./select/select-group-label.js";
+import { SelectItem, SelectItemProps, selectItemVariants } from "./select/select-item.js";
+import { SelectSeparator, SelectSeparatorProps, selectSeparatorVariants } from "./select/select-separator.js";
+import { SelectTrigger, SelectTriggerProps, selectTriggerVariants } from "./select/select-trigger.js";
 import { Spacer, SpacerProps, spacerVariants } from "./spacer/spacer.js";
 import { Switch, SwitchProps, switchVariants } from "./switch/switch.js";
 import { TabsPillList, TabsPillListProps, tabsPillListVariants } from "./tabs-pill/tabs-pill-list.js";
@@ -43,4 +50,4 @@ import { Tooltip, TooltipProps } from "./tooltip/tooltip.js";
 import { TooltipPopup, TooltipPopupProps, tooltipPopupVariants } from "./tooltip/tooltip-popup.js";
 import { TooltipProvider, TooltipProviderProps } from "./tooltip/tooltip-provider.js";
 import { TooltipTrigger, TooltipTriggerProps } from "./tooltip/tooltip-trigger.js";
-export { Button, ButtonLink, ButtonLinkProps, ButtonProps, Checkbox, CheckboxProps, Column, ColumnProps, DialogResponsive, DialogResponsivePopup, DialogResponsivePopupProps, DialogResponsiveProps, DialogResponsiveTrigger, DialogResponsiveTriggerProps, IconButton, IconButtonProps, Input, InputProps, Label, LabelProps, MENU_CLASS_NAME, Menu, MenuCheckboxItem, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuLinkItem, MenuLinkItemProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuSubmenu, MenuSubmenuProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps, MenuViewport, MenuViewportProps, OTPField, OTPFieldInput, Row, RowProps, Spacer, SpacerProps, Switch, SwitchProps, Tabs, TabsPanel, TabsPanelProps, TabsPillList, TabsPillListProps, TabsPillTab, TabsPillTabProps, TabsProps, TabsSegmentedList, TabsSegmentedListProps, TabsSegmentedTab, TabsSegmentedTabProps, TabsUnderlineList, TabsUnderlineListProps, TabsUnderlineTab, TabsUnderlineTabProps, Textarea, TextareaProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, Tooltip, TooltipPopup, TooltipPopupProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps, button, checkboxVariants, columnVariants, createMenuHandle, dialogResponsivePopupVariants, iconButton, inputVariants, labelVariants, otpFieldInputVariants, otpFieldVariants, rowVariants, spacerVariants, switchVariants, tabsPanelVariants, tabsPillListVariants, tabsPillTabVariants, tabsSegmentedListVariants, tabsSegmentedTabVariants, tabsUnderlineListVariants, tabsUnderlineTabVariants, tabsVariants, textareaVariants, toggleGroupItemVariants, toggleGroupVariants, tooltipPopupVariants };
+export { Button, ButtonLink, ButtonLinkProps, ButtonProps, Checkbox, CheckboxProps, Column, ColumnProps, DialogResponsive, DialogResponsivePopup, DialogResponsivePopupProps, DialogResponsiveProps, DialogResponsiveTrigger, DialogResponsiveTriggerProps, IconButton, IconButtonProps, Input, InputProps, Label, LabelProps, MENU_CLASS_NAME, Menu, MenuCheckboxItem, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuLinkItem, MenuLinkItemProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuSubmenu, MenuSubmenuProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps, MenuViewport, MenuViewportProps, OTPField, OTPFieldInput, Row, RowProps, Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectItem, SelectItemProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, Spacer, SpacerProps, Switch, SwitchProps, Tabs, TabsPanel, TabsPanelProps, TabsPillList, TabsPillListProps, TabsPillTab, TabsPillTabProps, TabsProps, TabsSegmentedList, TabsSegmentedListProps, TabsSegmentedTab, TabsSegmentedTabProps, TabsUnderlineList, TabsUnderlineListProps, TabsUnderlineTab, TabsUnderlineTabProps, Textarea, TextareaProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, Tooltip, TooltipPopup, TooltipPopupProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps, button, checkboxVariants, columnVariants, createMenuHandle, dialogResponsivePopupVariants, iconButton, inputVariants, labelVariants, otpFieldInputVariants, otpFieldVariants, rowVariants, selectContentVariants, selectGroupLabelVariants, selectGroupVariants, selectItemVariants, selectSeparatorVariants, selectTriggerVariants, spacerVariants, switchVariants, tabsPanelVariants, tabsPillListVariants, tabsPillTabVariants, tabsSegmentedListVariants, tabsSegmentedTabVariants, tabsUnderlineListVariants, tabsUnderlineTabVariants, tabsVariants, textareaVariants, toggleGroupItemVariants, toggleGroupVariants, tooltipPopupVariants };

package/dist/components/index.js

@@ -26,6 +26,13 @@ import { MenuViewport } from "./menu/menu-viewport.js";
 import { OTPField, otpFieldVariants } from "./otp-field/otp-field.js";
 import { OTPFieldInput, otpFieldInputVariants } from "./otp-field/otp-field-input.js";
 import { Row, rowVariants } from "./row/row.js";
+import { Select } from "./select/select.js";
+import { SelectContent, selectContentVariants } from "./select/select-content.js";
+import { SelectGroup, selectGroupVariants } from "./select/select-group.js";
+import { SelectGroupLabel, selectGroupLabelVariants } from "./select/select-group-label.js";
+import { SelectItem, selectItemVariants } from "./select/select-item.js";
+import { SelectSeparator, selectSeparatorVariants } from "./select/select-separator.js";
+import { SelectTrigger, selectTriggerVariants } from "./select/select-trigger.js";
 import { Spacer, spacerVariants } from "./spacer/spacer.js";
 import { Switch, switchVariants } from "./switch/switch.js";
 import { TabsPillList, tabsPillListVariants } from "./tabs-pill/tabs-pill-list.js";
@@ -43,4 +50,4 @@ import { Tooltip } from "./tooltip/tooltip.js";
 import { TooltipPopup, tooltipPopupVariants } from "./tooltip/tooltip-popup.js";
 import { TooltipProvider } from "./tooltip/tooltip-provider.js";
 import { TooltipTrigger } from "./tooltip/tooltip-trigger.js";
-export { Button, ButtonLink, Checkbox, Column, DialogResponsive, DialogResponsivePopup, DialogResponsiveTrigger, IconButton, Input, Label, MENU_CLASS_NAME, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MenuViewport, OTPField, OTPFieldInput, Row, Spacer, Switch, Tabs, TabsPanel, TabsPillList, TabsPillTab, TabsSegmentedList, TabsSegmentedTab, TabsUnderlineList, TabsUnderlineTab, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, button, checkboxVariants, columnVariants, createMenuHandle, dialogResponsivePopupVariants, iconButton, inputVariants, labelVariants, otpFieldInputVariants, otpFieldVariants, rowVariants, spacerVariants, switchVariants, tabsPanelVariants, tabsPillListVariants, tabsPillTabVariants, tabsSegmentedListVariants, tabsSegmentedTabVariants, tabsUnderlineListVariants, tabsUnderlineTabVariants, tabsVariants, textareaVariants, toggleGroupItemVariants, toggleGroupVariants, tooltipPopupVariants };
+export { Button, ButtonLink, Checkbox, Column, DialogResponsive, DialogResponsivePopup, DialogResponsiveTrigger, IconButton, Input, Label, MENU_CLASS_NAME, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MenuViewport, OTPField, OTPFieldInput, Row, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, Spacer, Switch, Tabs, TabsPanel, TabsPillList, TabsPillTab, TabsSegmentedList, TabsSegmentedTab, TabsUnderlineList, TabsUnderlineTab, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, button, checkboxVariants, columnVariants, createMenuHandle, dialogResponsivePopupVariants, iconButton, inputVariants, labelVariants, otpFieldInputVariants, otpFieldVariants, rowVariants, selectContentVariants, selectGroupLabelVariants, selectGroupVariants, selectItemVariants, selectSeparatorVariants, selectTriggerVariants, spacerVariants, switchVariants, tabsPanelVariants, tabsPillListVariants, tabsPillTabVariants, tabsSegmentedListVariants, tabsSegmentedTabVariants, tabsUnderlineListVariants, tabsUnderlineTabVariants, tabsVariants, textareaVariants, toggleGroupItemVariants, toggleGroupVariants, tooltipPopupVariants };

package/dist/components/input/input.js

@@ -14,6 +14,7 @@ function Input(props) {
 		"data-is-active": isActive,
 		"data-is-invalid": isInvalid,
 		"data-is-valid": isValid,
+		"data-slot": "input",
 		disabled: isDisabled,
 		readOnly: isReadOnly,
 		required: isRequired,

package/dist/components/label/label.css

@@ -2,7 +2,7 @@
   .label-module_label_iQZ4sG {
     color: var(--color-text-secondary);
     width: fit-content;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 450;
   }
 }

package/dist/components/label/label.js

@@ -3,9 +3,10 @@ import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/label/label.tsx
 function Label(props) {
-	const { className: customClassName = "", htmlFor = void 0, children = "", ...rest } = props;
+	const { className: customClassName = "", htmlFor = void 0, children = void 0, ...rest } = props;
 	return /* @__PURE__ */ jsx("label", {
 		className: labelVariants({ className: customClassName }),
+		"data-slot": "label",
 		htmlFor,
 		...rest,
 		children

package/dist/components/otp-field/otp-field-input.js

@@ -8,6 +8,7 @@ function OTPFieldInput(props) {
 	const combinedClassName = otpFieldInputVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(OTPField.Input, {
 		className: combinedClassName,
+		"data-slot": "otp-field-input",
 		...rest
 	});
 }

package/dist/components/otp-field/otp-field.js

@@ -11,6 +11,7 @@ function OTPField$1(props) {
 	});
 	return /* @__PURE__ */ jsx(OTPField.Root, {
 		className: combinedClassName,
+		"data-slot": "otp-field",
 		disabled: isDisabled,
 		mask: isMasked,
 		...rest

package/dist/components/row/row.js

@@ -6,6 +6,7 @@ function Row(props) {
 	const { alignItems = void 0, as = "div", className: customClassName = "", flexWrap = void 0, gap = void 0, gapX = void 0, gapY = void 0, justifyContent = void 0, style: customStyle, ...rest } = props;
 	return createElement(as, {
 		className: rowVariants({ className: customClassName }),
+		"data-slot": "row",
 		style: {
 			...customStyle,
 			...gap === void 0 ? {} : { gap },

package/dist/components/select/select-content.css

@@ -0,0 +1,59 @@
+@layer components {
+  .select-content-module_select_content_positioner_T-MXlW {
+    isolation: isolate;
+    z-index: 50;
+  }
+
+  .select-content-module_select_content_T-MXlW {
+    background-color: var(--color-bg-shell-inner);
+    box-shadow: 0 0 0 1px var(--color-border) inset,
+      0 .5px 0 oklab(0% none none / .03),
+      0 36px 15px -4px oklab(0% none none / .01),
+      0 20px 12px -3px oklab(0% none none / .03),
+      0 9px 9px -2px oklab(0% none none / .04),
+      0 2px 5px -1px oklab(0% none none / .05);
+    color: var(--color-text-primary);
+    font-family: var(--font-body);
+    max-height: min(var(--available-height), 480px);
+    max-width: min(var(--available-width), 320px);
+    min-width: max(var(--anchor-width), 180px);
+    outline-color: var(--color-primary-9);
+    outline-offset: -2px;
+    transform-origin: var(--transform-origin);
+    will-change: opacity, transform;
+    border-radius: 12px;
+    outline-width: 0;
+    outline-style: solid;
+    flex-direction: column;
+    padding: 4px;
+    transition-property: opacity, transform;
+    transition-duration: .15s;
+    display: flex;
+    overflow: auto;
+  }
+
+  .select-content-module_select_content_T-MXlW:focus-visible {
+    outline-width: 2px;
+  }
+
+  .select-content-module_select_content_T-MXlW[data-ending-style], .select-content-module_select_content_T-MXlW[data-starting-style] {
+    opacity: 0;
+    transform: scale(.975);
+  }
+
+  .select-content-module_select_content_T-MXlW[data-side="top"][data-ending-style], .select-content-module_select_content_T-MXlW[data-side="top"][data-starting-style] {
+    transform: scale(.975) translateY(4px);
+  }
+
+  .select-content-module_select_content_T-MXlW[data-side="bottom"][data-ending-style], .select-content-module_select_content_T-MXlW[data-side="bottom"][data-starting-style] {
+    transform: scale(.975) translateY(-4px);
+  }
+
+  .select-content-module_select_content_T-MXlW[data-side="left"][data-ending-style], .select-content-module_select_content_T-MXlW[data-side="left"][data-starting-style], .select-content-module_select_content_T-MXlW[data-side="inline-start"][data-ending-style], .select-content-module_select_content_T-MXlW[data-side="inline-start"][data-starting-style] {
+    transform: scale(.975) translateX(4px);
+  }
+
+  .select-content-module_select_content_T-MXlW[data-side="right"][data-ending-style], .select-content-module_select_content_T-MXlW[data-side="right"][data-starting-style], .select-content-module_select_content_T-MXlW[data-side="inline-end"][data-ending-style], .select-content-module_select_content_T-MXlW[data-side="inline-end"][data-starting-style] {
+    transform: scale(.975) translateX(-4px);
+  }
+}

package/dist/components/select/select-content.d.ts

@@ -0,0 +1,11 @@
+import { Select } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/select/select-content.d.ts
+interface SelectContentProps extends Omit<Select.Popup.Props, "className">, Pick<Select.Positioner.Props, "align" | "alignItemWithTrigger" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "disableAnchorTracking" | "positionMethod" | "side" | "sideOffset" | "sticky"> {
+  className?: string;
+  container?: Select.Portal.Props["container"];
+}
+declare function SelectContent(props: SelectContentProps): JSX.Element;
+declare const selectContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { SelectContent, SelectContentProps, selectContentVariants };

package/dist/components/select/select-content.js

@@ -0,0 +1,39 @@
+import select_content_module_default from "./select-content.module.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Select } from "@base-ui/react";
+//#region src/components/select/select-content.tsx
+function SelectContent(props) {
+	const { align = "start", alignItemWithTrigger = false, alignOffset = void 0, anchor = void 0, arrowPadding = void 0, children, className: customClassName = "", collisionAvoidance = void 0, collisionBoundary = void 0, collisionPadding = void 0, container = void 0, disableAnchorTracking = void 0, positionMethod = void 0, side = "bottom", sideOffset = 8, sticky = void 0, ...rest } = props;
+	const combinedClassName = selectContentVariants({ className: customClassName });
+	return /* @__PURE__ */ jsx(Select.Portal, {
+		container,
+		"data-slot": "select-portal",
+		children: /* @__PURE__ */ jsx(Select.Positioner, {
+			align,
+			alignItemWithTrigger,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			className: select_content_module_default.select_content_positioner,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			"data-slot": "select-positioner",
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			children: /* @__PURE__ */ jsx(Select.Popup, {
+				className: combinedClassName,
+				"data-slot": "select-content",
+				...rest,
+				children
+			})
+		})
+	});
+}
+const selectContentVariants = cva(select_content_module_default.select_content);
+//#endregion
+export { SelectContent, selectContentVariants };

package/dist/components/select/select-content.module.js

@@ -0,0 +1,8 @@
+import './select-content.css';
+//#region src/components/select/select-content.module.css
+var select_content_module_default = {
+	"select_content": "select-content-module_select_content_T-MXlW",
+	"select_content_positioner": "select-content-module_select_content_positioner_T-MXlW"
+};
+//#endregion
+export { select_content_module_default as default };

package/dist/components/select/select-group-label.css

@@ -0,0 +1,8 @@
+@layer components {
+  .select-group-label-module_select_group_label_SHogxq {
+    color: var(--color-text-secondary);
+    padding: 6px 8px 4px;
+    font-size: 12px;
+    font-weight: 450;
+  }
+}

package/dist/components/select/select-group-label.d.ts

@@ -0,0 +1,10 @@
+import { Select } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/select/select-group-label.d.ts
+interface SelectGroupLabelProps extends Omit<Select.GroupLabel.Props, "className"> {
+  className?: string;
+}
+declare function SelectGroupLabel(props: SelectGroupLabelProps): JSX.Element;
+declare const selectGroupLabelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { SelectGroupLabel, SelectGroupLabelProps, selectGroupLabelVariants };

package/dist/components/select/select-group-label.js

@@ -0,0 +1,17 @@
+import select_group_label_module_default from "./select-group-label.module.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Select } from "@base-ui/react";
+//#region src/components/select/select-group-label.tsx
+function SelectGroupLabel(props) {
+	const { className: customClassName = "", ...rest } = props;
+	const combinedClassName = selectGroupLabelVariants({ className: customClassName });
+	return /* @__PURE__ */ jsx(Select.GroupLabel, {
+		className: combinedClassName,
+		"data-slot": "select-group-label",
+		...rest
+	});
+}
+const selectGroupLabelVariants = cva(select_group_label_module_default.select_group_label);
+//#endregion
+export { SelectGroupLabel, selectGroupLabelVariants };

package/dist/components/select/select-group-label.module.js

@@ -0,0 +1,5 @@
+import './select-group-label.css';
+//#region src/components/select/select-group-label.module.css
+var select_group_label_module_default = { "select_group_label": "select-group-label-module_select_group_label_SHogxq" };
+//#endregion
+export { select_group_label_module_default as default };

package/dist/components/select/select-group.css

@@ -0,0 +1,6 @@
+@layer components {
+  .select-group-module_select_group_1Igl6W {
+    flex-direction: column;
+    display: flex;
+  }
+}

package/dist/components/select/select-group.d.ts

@@ -0,0 +1,10 @@
+import { Select } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/select/select-group.d.ts
+interface SelectGroupProps extends Omit<Select.Group.Props, "className"> {
+  className?: string;
+}
+declare function SelectGroup(props: SelectGroupProps): JSX.Element;
+declare const selectGroupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { SelectGroup, SelectGroupProps, selectGroupVariants };

package/dist/components/select/select-group.js

@@ -0,0 +1,17 @@
+import select_group_module_default from "./select-group.module.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Select } from "@base-ui/react";
+//#region src/components/select/select-group.tsx
+function SelectGroup(props) {
+	const { className: customClassName = "", ...rest } = props;
+	const combinedClassName = selectGroupVariants({ className: customClassName });
+	return /* @__PURE__ */ jsx(Select.Group, {
+		className: combinedClassName,
+		"data-slot": "select-group",
+		...rest
+	});
+}
+const selectGroupVariants = cva(select_group_module_default.select_group);
+//#endregion
+export { SelectGroup, selectGroupVariants };

package/dist/components/select/select-group.module.js

@@ -0,0 +1,5 @@
+import './select-group.css';
+//#region src/components/select/select-group.module.css
+var select_group_module_default = { "select_group": "select-group-module_select_group_1Igl6W" };
+//#endregion
+export { select_group_module_default as default };

package/dist/components/select/select-item.css

@@ -0,0 +1,47 @@
+@layer components {
+  .select-item-module_select_item_YQBXPq {
+    color: var(--color-text-primary);
+    cursor: pointer;
+    user-select: none;
+    border-radius: 8px;
+    outline: none;
+    grid-template-columns: 16px 1fr;
+    align-items: safe center;
+    column-gap: 8px;
+    min-height: 36px;
+    padding: 0 8px;
+    font-size: 14px;
+    font-weight: 450;
+    line-height: 1.5;
+    display: grid;
+    position: relative;
+  }
+
+  .select-item-module_select_item_YQBXPq[data-highlighted] {
+    background-color: var(--color-gray-3);
+  }
+
+  .select-item-module_select_item_YQBXPq[data-disabled] {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  .select-item-module_select_item__indicator_YQBXPq {
+    color: var(--color-primary-9);
+    grid-column-start: 1;
+    justify-content: safe center;
+    align-items: safe center;
+    display: flex;
+  }
+
+  .select-item-module_select_item__label_YQBXPq {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    grid-column-start: 2;
+    align-items: center;
+    column-gap: 8px;
+    min-width: 0;
+    display: flex;
+    overflow: hidden;
+  }
+}

package/dist/components/select/select-item.d.ts

@@ -0,0 +1,11 @@
+import { Select } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/select/select-item.d.ts
+interface SelectItemProps extends Omit<Select.Item.Props, "className" | "disabled"> {
+  className?: string;
+  isDisabled?: Select.Item.Props["disabled"];
+}
+declare function SelectItem(props: SelectItemProps): JSX.Element;
+declare const selectItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { SelectItem, SelectItemProps, selectItemVariants };

package/dist/components/select/select-item.js

@@ -0,0 +1,42 @@
+import select_item_module_default from "./select-item.module.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@base-ui/react";
+//#region src/components/select/select-item.tsx
+function SelectItem(props) {
+	const { children, className: customClassName = "", isDisabled = false, ...rest } = props;
+	const combinedClassName = selectItemVariants({ className: customClassName });
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		className: combinedClassName,
+		"data-slot": "select-item",
+		disabled: isDisabled,
+		...rest,
+		children: [/* @__PURE__ */ jsx(Select.ItemIndicator, {
+			className: select_item_module_default.select_item__indicator,
+			"data-slot": "select-item-indicator",
+			children: /* @__PURE__ */ jsx("svg", {
+				height: "14px",
+				viewBox: "0 0 18 18",
+				width: "14px",
+				x: "0px",
+				xmlns: "http://www.w3.org/2000/svg",
+				y: "0px",
+				children: /* @__PURE__ */ jsx("polyline", {
+					fill: "none",
+					points: "2.75 9.25 6.75 14.25 15.25 3.75",
+					stroke: "currentColor",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: "1.5"
+				})
+			})
+		}), /* @__PURE__ */ jsx(Select.ItemText, {
+			className: select_item_module_default.select_item__label,
+			"data-slot": "select-item-text",
+			children
+		})]
+	});
+}
+const selectItemVariants = cva(select_item_module_default.select_item);
+//#endregion
+export { SelectItem, selectItemVariants };

package/dist/components/select/select-item.module.js

@@ -0,0 +1,9 @@
+import './select-item.css';
+//#region src/components/select/select-item.module.css
+var select_item_module_default = {
+	"select_item": "select-item-module_select_item_YQBXPq",
+	"select_item__indicator": "select-item-module_select_item__indicator_YQBXPq",
+	"select_item__label": "select-item-module_select_item__label_YQBXPq"
+};
+//#endregion
+export { select_item_module_default as default };

package/dist/components/select/select-separator.css

@@ -0,0 +1,8 @@
+@layer components {
+  .select-separator-module_select_separator_6poQtG {
+    background-color: var(--color-border);
+    flex-shrink: 0;
+    height: 1px;
+    margin: 4px 8px;
+  }
+}

package/dist/components/select/select-separator.d.ts

@@ -0,0 +1,10 @@
+import { Select } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/select/select-separator.d.ts
+interface SelectSeparatorProps extends Omit<Select.Separator.Props, "className"> {
+  className?: string;
+}
+declare function SelectSeparator(props: SelectSeparatorProps): JSX.Element;
+declare const selectSeparatorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { SelectSeparator, SelectSeparatorProps, selectSeparatorVariants };

package/dist/components/select/select-separator.js

@@ -0,0 +1,17 @@
+import select_separator_module_default from "./select-separator.module.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Select } from "@base-ui/react";
+//#region src/components/select/select-separator.tsx
+function SelectSeparator(props) {
+	const { className: customClassName = "", ...rest } = props;
+	const combinedClassName = selectSeparatorVariants({ className: customClassName });
+	return /* @__PURE__ */ jsx(Select.Separator, {
+		className: combinedClassName,
+		"data-slot": "select-separator",
+		...rest
+	});
+}
+const selectSeparatorVariants = cva(select_separator_module_default.select_separator);
+//#endregion
+export { SelectSeparator, selectSeparatorVariants };

package/dist/components/select/select-separator.module.js

@@ -0,0 +1,5 @@
+import './select-separator.css';
+//#region src/components/select/select-separator.module.css
+var select_separator_module_default = { "select_separator": "select-separator-module_select_separator_6poQtG" };
+//#endregion
+export { select_separator_module_default as default };

package/dist/components/select/select-trigger.css

@@ -0,0 +1,87 @@
+@layer components {
+  .select-trigger-module_select_trigger_eqPLgq {
+    background-color: var(--color-bg-shell-inner);
+    box-shadow: 0 0 0 1px var(--color-border) inset;
+    cursor: pointer;
+    outline-offset: 2px;
+    outline: 2px solid #0000;
+    flex-shrink: 0;
+    align-items: center;
+    column-gap: 8px;
+    width: stretch;
+    padding: 0 16px;
+    transition-property: background-color;
+    transition-duration: .15s;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  .select-trigger-module_select_trigger_eqPLgq:disabled {
+    cursor: not-allowed;
+    opacity: .5;
+    background-color: var(--color-gray-3);
+  }
+
+  .select-trigger-module_select_trigger_eqPLgq:focus-visible {
+    outline-color: var(--color-primary);
+  }
+
+  .select-trigger-module_select_trigger_eqPLgq:hover:not(:disabled), .select-trigger-module_select_trigger_eqPLgq[data-popup-open] {
+    background-color: var(--color-gray-3);
+  }
+
+  .select-trigger-module_size_32_eqPLgq {
+    border-radius: 8px;
+    height: 32px;
+  }
+
+  .select-trigger-module_size_36_eqPLgq {
+    border-radius: 9px;
+    height: 36px;
+  }
+
+  .select-trigger-module_size_40_eqPLgq {
+    border-radius: 10px;
+    height: 40px;
+  }
+
+  .select-trigger-module_size_44_eqPLgq {
+    border-radius: 11px;
+    height: 44px;
+  }
+
+  .select-trigger-module_size_48_eqPLgq {
+    border-radius: 12px;
+    height: 48px;
+  }
+
+  .select-trigger-module_rounded_full_eqPLgq {
+    border-radius: 9999px;
+  }
+
+  .select-trigger-module_select_trigger__value_eqPLgq {
+    color: var(--color-text-primary);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    align-items: center;
+    column-gap: 8px;
+    font-size: 14px;
+    font-weight: 450;
+    display: inline-flex;
+    overflow-x: hidden;
+  }
+
+  .select-trigger-module_select_trigger__value_eqPLgq[data-placeholder] {
+    color: var(--color-gray-9);
+  }
+
+  .select-trigger-module_select_trigger__icon_eqPLgq {
+    margin-left: auto;
+    transition-property: rotate;
+    transition-duration: .15s;
+  }
+
+  .select-trigger-module_select_trigger_eqPLgq[data-popup-open] .select-trigger-module_select_trigger__icon_eqPLgq {
+    rotate: 180deg;
+  }
+}

package/dist/components/select/select-trigger.d.ts

@@ -0,0 +1,17 @@
+import { VariantProps } from "class-variance-authority";
+import { Select } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/select/select-trigger.d.ts
+interface SelectTriggerProps extends Omit<Select.Trigger.Props, "children"> {
+  children?: Select.Value.Props["children"];
+  isRounded?: VariantProps<typeof selectTriggerVariants>["isRounded"];
+  placeholder?: Select.Value.Props["placeholder"];
+  size?: VariantProps<typeof selectTriggerVariants>["size"];
+}
+declare function SelectTrigger(props: SelectTriggerProps): JSX.Element;
+declare const selectTriggerVariants: (props?: ({
+  isRounded?: boolean | null | undefined;
+  size?: 32 | 36 | 40 | 44 | 48 | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { SelectTrigger, SelectTriggerProps, selectTriggerVariants };

package/dist/components/select/select-trigger.js

@@ -0,0 +1,53 @@
+import select_trigger_module_default from "./select-trigger.module.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@base-ui/react";
+//#region src/components/select/select-trigger.tsx
+function SelectTrigger(props) {
+	const { children = void 0, className: customClassName = "", isRounded = false, placeholder = "", size = 40, ...rest } = props;
+	const combinedClassName = selectTriggerVariants({
+		className: customClassName,
+		isRounded,
+		size
+	});
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		className: combinedClassName,
+		"data-slot": "select-trigger",
+		...rest,
+		children: [/* @__PURE__ */ jsx(Select.Value, {
+			className: select_trigger_module_default.select_trigger__value,
+			"data-slot": "select-value",
+			placeholder,
+			children
+		}), /* @__PURE__ */ jsx(Select.Icon, {
+			className: select_trigger_module_default.select_trigger__icon,
+			"data-slot": "select-icon",
+			children: /* @__PURE__ */ jsx("svg", {
+				height: "14",
+				viewBox: "0 0 18 18",
+				width: "14",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("polyline", {
+					fill: "none",
+					points: "15.25 6.5 9 12.75 2.75 6.5",
+					stroke: "currentColor",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: "1.5"
+				})
+			})
+		})]
+	});
+}
+const selectTriggerVariants = cva(select_trigger_module_default.select_trigger, { variants: {
+	isRounded: { true: select_trigger_module_default.rounded_full },
+	size: {
+		32: select_trigger_module_default.size_32,
+		36: select_trigger_module_default.size_36,
+		40: select_trigger_module_default.size_40,
+		44: select_trigger_module_default.size_44,
+		48: select_trigger_module_default.size_48
+	}
+} });
+//#endregion
+export { SelectTrigger, selectTriggerVariants };

package/dist/components/select/select-trigger.module.js

@@ -0,0 +1,15 @@
+import './select-trigger.css';
+//#region src/components/select/select-trigger.module.css
+var select_trigger_module_default = {
+	"rounded_full": "select-trigger-module_rounded_full_eqPLgq",
+	"select_trigger": "select-trigger-module_select_trigger_eqPLgq",
+	"select_trigger__icon": "select-trigger-module_select_trigger__icon_eqPLgq",
+	"select_trigger__value": "select-trigger-module_select_trigger__value_eqPLgq",
+	"size_32": "select-trigger-module_size_32_eqPLgq",
+	"size_36": "select-trigger-module_size_36_eqPLgq",
+	"size_40": "select-trigger-module_size_40_eqPLgq",
+	"size_44": "select-trigger-module_size_44_eqPLgq",
+	"size_48": "select-trigger-module_size_48_eqPLgq"
+};
+//#endregion
+export { select_trigger_module_default as default };

package/dist/components/select/select.d.ts

@@ -0,0 +1,7 @@
+import { Select } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/select/select.d.ts
+interface SelectProps extends Select.Root.Props<string, boolean> {}
+declare function Select$1(props: SelectProps): JSX.Element;
+//#endregion
+export { Select$1 as Select, SelectProps };

package/dist/components/select/select.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { Select } from "@base-ui/react";
+//#region src/components/select/select.tsx
+function Select$1(props) {
+	const { ...rest } = props;
+	return /* @__PURE__ */ jsx(Select.Root, {
+		"data-slot": "select",
+		...rest
+	});
+}
+//#endregion
+export { Select$1 as Select };

package/dist/components/spacer/spacer.js

@@ -6,6 +6,7 @@ function Spacer(props) {
 	const { className: customClassName = "", height, style: customStyle, width, ...rest } = props;
 	return /* @__PURE__ */ jsx("div", {
 		className: spacerVariants({ className: customClassName }),
+		"data-slot": "spacer",
 		style: {
 			...customStyle,
 			...width === void 0 ? {} : { width },

package/dist/components/switch/switch.js

@@ -12,6 +12,7 @@ function Switch$1(props) {
 	return /* @__PURE__ */ jsx(Switch.Root, {
 		checked: isChecked,
 		className: combinedClassName,
+		"data-slot": "switch",
 		defaultChecked: isDefaultChecked,
 		disabled: isDisabled,
 		readOnly: isReadOnly,

package/dist/components/tabs-pill/tabs-pill-list.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react";
 //#region src/components/tabs-pill/tabs-pill-list.tsx
 function TabsPillList(props) {
-	const { className: customClassName = "", children = "", ...rest } = props;
+	const { className: customClassName = "", children = void 0, ...rest } = props;
 	const combinedClassName = tabsPillListVariants({ className: customClassName });
 	return /* @__PURE__ */ jsxs(Tabs.List, {
 		className: combinedClassName,

package/dist/components/tabs-segmented/tabs-segmented-list.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react";
 //#region src/components/tabs-segmented/tabs-segmented-list.tsx
 function TabsSegmentedList(props) {
-	const { className: customClassName = "", children = "", ...rest } = props;
+	const { className: customClassName = "", children = void 0, ...rest } = props;
 	const combinedClassName = tabsSegmentedListVariants({ className: customClassName });
 	return /* @__PURE__ */ jsxs(Tabs.List, {
 		className: combinedClassName,

package/dist/components/tabs-underline/tabs-underline-list.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react";
 //#region src/components/tabs-underline/tabs-underline-list.tsx
 function TabsUnderlineList(props) {
-	const { className: customClassName = "", children = "", ...rest } = props;
+	const { className: customClassName = "", children = void 0, ...rest } = props;
 	const combinedClassName = tabsUnderlineListVariants({ className: customClassName });
 	return /* @__PURE__ */ jsxs(Tabs.List, {
 		className: combinedClassName,

package/dist/components/textarea/textarea.js

@@ -13,6 +13,7 @@ function Textarea(props) {
 		"data-is-active": isActive,
 		"data-is-invalid": isInvalid,
 		"data-is-valid": isValid,
+		"data-slot": "textarea",
 		disabled: isDisabled,
 		readOnly: isReadOnly,
 		required: isRequired,

package/dist/components/tooltip/tooltip-popup.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react";
 //#region src/components/tooltip/tooltip-popup.tsx
 function TooltipPopup(props) {
-	const { children = "", className: customClassName = "", side = "top", sideOffset = 4, ...rest } = props;
+	const { children = void 0, className: customClassName = "", side = "top", sideOffset = 4, ...rest } = props;
 	const combinedClassName = tooltipPopupVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Tooltip.Portal, {
 		className: tooltip_popup_module_default.tooltip_popup_portal,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nattstack/ui",
-  "version": "0.0.87",
+  "version": "0.0.89",
   "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
   "keywords": [
     "base-ui",
@@ -52,14 +52,14 @@
     "class-variance-authority": "0.7.1"
   },
   "devDependencies": {
-    "@tsdown/css": "0.22.4",
+    "@tsdown/css": "0.22.14",
     "@types/bun": "1.3.14",
-    "tsdown": "0.22.4",
+    "tsdown": "0.22.14",
     "typescript": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
   }
 }