@takeoff-ui/react-spar 0.1.0-beta.1 → 0.1.0-beta.2

package/README.md

@@ -35,15 +35,19 @@ gaps are resolved.
 
 `@takeoff-ui/react-spar` currently targets React 19.x only.
 
+`@takeoff-design/tokens` is a **peer dependency** — install it alongside
+`@takeoff-ui/react-spar`. Keeping tokens out of `dependencies` ensures a single
+tokens copy in your tree and lets you upgrade tokens independently of this
+wrapper.
+
 ```bash
-pnpm add @takeoff-ui/react-spar
+pnpm add @takeoff-ui/react-spar @takeoff-design/tokens
 ```
 
-`@takeoff-design/tokens` and `@turkish-technology/spar` are direct dependencies
-of `@takeoff-ui/react-spar` — you don't need to install them separately. Add
-either one to your own `package.json` only if your app imports from it directly
-(for example, when overriding token CSS variables from an entry stylesheet, or
-when using Spar primitives that `react-spar` does not re-export).
+`@turkish-technology/spar` is still a regular dependency of
+`@takeoff-ui/react-spar` and is installed automatically. Add it to your own
+`package.json` only if your app imports from it directly (for example, when
+using Spar primitives that `react-spar` does not re-export).
 
 `@takeoff-ui/react-spar` does not bundle component CSS. Import the token
 stylesheet once at the app shell or entrypoint:

package/dist/index.cjs

@@ -1116,11 +1116,6 @@ var SelectTriggerBase = createComponentBase({
   slots: ["root"],
   classes: { root: "tk-select-trigger" }
 });
-var SelectValueBase = createComponentBase({
-  name: "SelectValue",
-  slots: ["root"],
-  classes: { root: "tk-select-value" }
-});
 var SelectContentBase = createComponentBase({
   name: "SelectContent",
   slots: ["root"],
@@ -1141,11 +1136,6 @@ var SelectLabelBase = createComponentBase({
   slots: ["root"],
   classes: { root: "tk-select-label" }
 });
-var SelectItemTextBase = createComponentBase({
-  name: "SelectItemText",
-  slots: ["root"],
-  classes: { root: "tk-select-item-text" }
-});
 var SelectSeparatorBase = createComponentBase({
   name: "SelectSeparator",
   slots: ["root"],
@@ -1157,6 +1147,7 @@ var [SelectProvider, useSelectOwnContext] = createSafeContext("SelectProvider");
 
 // src/components/select/defaults.ts
 var DEFAULT_SIZE7 = "base";
+var DEFAULT_CONTENT_WIDTH = "trigger";
 var Select = (props) => {
   const theme = useComponentTheme("Select");
   const { rootAttrs, rest } = composeRootAttrs(SelectBase, props, theme, {
@@ -1165,8 +1156,8 @@ var Select = (props) => {
       "data-invalid": invalid2 ? "" : void 0
     })
   });
-  const { size = DEFAULT_SIZE7, invalid = false, children, ref, ...sparProps } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectProvider, { value: { size, invalid }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Select, { ...sparProps, ref, ...rootAttrs, children }) });
+  const { size = DEFAULT_SIZE7, invalid = false, contentWidth = DEFAULT_CONTENT_WIDTH, children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectProvider, { value: { size, invalid, contentWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Select, { ...sparProps, ref, ...rootAttrs, children }) });
 };
 Select.displayName = "Select";
 var SelectTrigger = (props) => {
@@ -1182,39 +1173,51 @@ var SelectTrigger = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectTrigger, { ...spar$1, ref, ...rootAttrs, children });
 };
 SelectTrigger.displayName = "Select.Trigger";
-var SelectValue = (props) => {
-  const theme = useComponentTheme("SelectValue");
-  const { rootAttrs, rest } = composeRootAttrs(SelectValueBase, props, theme);
-  const { placeholder, children, ref, ...spar$1 } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectValue, { ...spar$1, placeholder, ref, ...rootAttrs, children });
+var resolveStaticWidth = (mode) => {
+  if (mode === "trigger" || mode === "content") return void 0;
+  return typeof mode === "number" ? `${mode}px` : mode;
 };
-SelectValue.displayName = "Select.Value";
 var SelectContent = (props) => {
   const theme = useComponentTheme("SelectContent");
-  const { size } = useSelectOwnContext("Select.Content");
+  const { size, contentWidth } = useSelectOwnContext("Select.Content");
+  const { triggerRef } = spar.useSelectContext();
+  const [triggerWidth, setTriggerWidth] = react.useState(null);
+  react.useEffect(() => {
+    if (contentWidth !== "trigger") return;
+    const node = triggerRef.current;
+    if (!node) return;
+    setTriggerWidth(node.offsetWidth);
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setTriggerWidth(Math.round(entry.contentRect.width + 2));
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [contentWidth, triggerRef]);
   const { rootAttrs, rest } = composeRootAttrs(SelectContentBase, props, theme, {
     stateAttrs: () => ({
       "data-size": size
     })
   });
-  const { children, ref, ...spar$1 } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectContent, { ...spar$1, ref, ...rootAttrs, children });
+  const { children, ref, style: userStyle, ...spar$1 } = rest;
+  const widthStyle = react.useMemo(() => {
+    if (contentWidth === "trigger") {
+      return triggerWidth != null ? { width: triggerWidth } : void 0;
+    }
+    const staticWidth = resolveStaticWidth(contentWidth);
+    return staticWidth != null ? { width: staticWidth } : void 0;
+  }, [contentWidth, triggerWidth]);
+  const mergedStyle = widthStyle || userStyle ? { ...widthStyle, ...userStyle } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectContent, { ...spar$1, ref, style: mergedStyle, ...rootAttrs, children });
 };
 SelectContent.displayName = "Select.Content";
 var SelectItem = (props) => {
   const theme = useComponentTheme("SelectItem");
   const { rootAttrs, rest } = composeRootAttrs(SelectItemBase, props, theme);
-  const { value, disabled, textValue, children, ref, ...spar$1 } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectItem, { ...spar$1, value, disabled, textValue, ref, ...rootAttrs, children });
+  const { value, disabled, label, children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectItem, { ...spar$1, value, disabled, label, ref, ...rootAttrs, children });
 };
 SelectItem.displayName = "Select.Item";
-var SelectItemText = (props) => {
-  const theme = useComponentTheme("SelectItemText");
-  const { rootAttrs, rest } = composeRootAttrs(SelectItemTextBase, props, theme);
-  const { children, ref, ...spar$1 } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectItemText, { ...spar$1, ref, ...rootAttrs, children });
-};
-SelectItemText.displayName = "Select.ItemText";
 var SelectGroup = (props) => {
   const theme = useComponentTheme("SelectGroup");
   const { rootAttrs, rest } = composeRootAttrs(SelectGroupBase, props, theme);
@@ -1240,10 +1243,8 @@ SelectSeparator.displayName = "Select.Separator";
 // src/components/select/index.ts
 var Select2 = Object.assign(Select, {
   Trigger: SelectTrigger,
-  Value: SelectValue,
   Content: SelectContent,
   Item: SelectItem,
-  ItemText: SelectItemText,
   Group: SelectGroup,
   Label: SelectLabel,
   Separator: SelectSeparator

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { HTMLAttributes, ElementType, ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
-import { PolymorphicProps, AccordionProps as AccordionProps$1, AccordionItemProps as AccordionItemProps$1, AccordionHeaderProps as AccordionHeaderProps$1, AccordionContentProps as AccordionContentProps$1, ButtonProps as ButtonProps$1, CheckboxRenderProps as CheckboxRenderProps$1, CheckboxProps as CheckboxProps$1, DialogProps, DialogTriggerProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogCloseProps, FieldProps as FieldProps$1, FieldLabelProps as FieldLabelProps$1, FieldDescriptionProps as FieldDescriptionProps$1, FieldErrorMessageProps as FieldErrorMessageProps$1, InputProps as InputProps$1, InputFieldProps as InputFieldProps$1, RadioProps as RadioProps$1, RadioItemRenderProps, RadioItemProps as RadioItemProps$1, PopoverProps as PopoverProps$1, PopoverTriggerProps as PopoverTriggerProps$1, PopoverContentProps as PopoverContentProps$1, PopoverCloseProps as PopoverCloseProps$1, SelectProps as SelectProps$1, SelectTriggerProps as SelectTriggerProps$1, SelectValueProps as SelectValueProps$1, SelectContentProps as SelectContentProps$1, SelectItemProps as SelectItemProps$1, SelectGroupProps as SelectGroupProps$1, SelectLabelProps as SelectLabelProps$1, SelectItemTextProps as SelectItemTextProps$1, SelectSeparatorProps as SelectSeparatorProps$1, SwitchRenderProps as SwitchRenderProps$1, SwitchProps as SwitchProps$1, TooltipTriggerProps as TooltipTriggerProps$1, TooltipContentProps as TooltipContentProps$1, TooltipProps as TooltipProps$1, TooltipProviderProps as TooltipProviderProps$1 } from '@turkish-technology/spar';
+import { PolymorphicProps, AccordionProps as AccordionProps$1, AccordionItemProps as AccordionItemProps$1, AccordionHeaderProps as AccordionHeaderProps$1, AccordionContentProps as AccordionContentProps$1, ButtonProps as ButtonProps$1, CheckboxRenderProps as CheckboxRenderProps$1, CheckboxProps as CheckboxProps$1, DialogProps, DialogTriggerProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogCloseProps, FieldProps as FieldProps$1, FieldLabelProps as FieldLabelProps$1, FieldDescriptionProps as FieldDescriptionProps$1, FieldErrorMessageProps as FieldErrorMessageProps$1, InputProps as InputProps$1, InputFieldProps as InputFieldProps$1, RadioProps as RadioProps$1, RadioItemRenderProps, RadioItemProps as RadioItemProps$1, PopoverProps as PopoverProps$1, PopoverTriggerProps as PopoverTriggerProps$1, PopoverContentProps as PopoverContentProps$1, PopoverCloseProps as PopoverCloseProps$1, SelectProps as SelectProps$1, SelectTriggerProps as SelectTriggerProps$1, SelectContentProps as SelectContentProps$1, SelectItemProps as SelectItemProps$1, SelectGroupProps as SelectGroupProps$1, SelectLabelProps as SelectLabelProps$1, SelectSeparatorProps as SelectSeparatorProps$1, SwitchRenderProps as SwitchRenderProps$1, SwitchProps as SwitchProps$1, TooltipTriggerProps as TooltipTriggerProps$1, TooltipContentProps as TooltipContentProps$1, TooltipProps as TooltipProps$1, TooltipProviderProps as TooltipProviderProps$1 } from '@turkish-technology/spar';
 
 /** Per-slot class map declared by a component base. Every slot is required. */
 type SlotClassNames<TSlot extends string> = Record<TSlot, string>;
@@ -1026,14 +1026,21 @@ declare const Popover: {
 };
 
 type SelectSize = 'small' | 'base' | 'large';
+/**
+ * Controls the panel's render width.
+ *
+ * - `'trigger'`: panel matches the trigger's measured width (form-aligned default)
+ * - `'content'`: panel shrink-wraps the longest item, only enforcing the CSS min-width
+ * - `number`: explicit pixel width
+ * - `string`: any CSS width value (`'20rem'`, `'min(40ch, 100%)'`, etc.)
+ */
+type SelectContentWidth = 'trigger' | 'content' | number | string;
 type SelectSlot = 'root';
 type SelectTriggerSlot = 'root';
-type SelectValueSlot = 'root';
 type SelectContentSlot = 'root';
 type SelectItemSlot = 'root';
 type SelectGroupSlot = 'root';
 type SelectLabelSlot = 'root';
-type SelectItemTextSlot = 'root';
 type SelectSeparatorSlot = 'root';
 /**
  * Visual + slot props owned by takeoff-v2 for the Select root. `size` and
@@ -1051,6 +1058,12 @@ interface SelectOwnProps {
      * @defaultValue false
      */
     invalid?: boolean;
+    /**
+     * How the portalled SelectContent panel computes its width. See
+     * {@link SelectContentWidth}.
+     * @defaultValue 'trigger'
+     */
+    contentWidth?: SelectContentWidth;
     /** Per-slot class name overrides. */
     classNames?: ClassNamesMap<SelectSlot>;
     /** Per-slot HTML attribute overrides. */
@@ -1068,14 +1081,7 @@ interface SelectTriggerOwnProps {
     /** Per-slot HTML attribute overrides. */
     slotProps?: SlotPropsMap<SelectTriggerSlot>;
 }
-type SelectTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, SelectTriggerOwnProps & Pick<SelectTriggerProps$1, 'children'>>;
-interface SelectValueOwnProps {
-    /** Per-slot class name overrides. */
-    classNames?: ClassNamesMap<SelectValueSlot>;
-    /** Per-slot HTML attribute overrides. */
-    slotProps?: SlotPropsMap<SelectValueSlot>;
-}
-type SelectValueProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, SelectValueOwnProps & Pick<SelectValueProps$1, 'placeholder'>>;
+type SelectTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, SelectTriggerOwnProps & Pick<SelectTriggerProps$1, 'children' | 'placeholder'>>;
 interface SelectContentOwnProps {
     /** Per-slot class name overrides. */
     classNames?: ClassNamesMap<SelectContentSlot>;
@@ -1089,7 +1095,7 @@ interface SelectItemOwnProps {
     /** Per-slot HTML attribute overrides. */
     slotProps?: SlotPropsMap<SelectItemSlot>;
 }
-type SelectItemProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, SelectItemOwnProps & Pick<SelectItemProps$1, 'value' | 'disabled' | 'textValue' | 'children'>>;
+type SelectItemProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, SelectItemOwnProps & Pick<SelectItemProps$1, 'value' | 'disabled' | 'label' | 'children'>>;
 interface SelectGroupOwnProps {
     /** Per-slot class name overrides. */
     classNames?: ClassNamesMap<SelectGroupSlot>;
@@ -1104,13 +1110,6 @@ interface SelectLabelOwnProps {
     slotProps?: SlotPropsMap<SelectLabelSlot>;
 }
 type SelectLabelProps<T extends ElementType = 'label'> = PolymorphicProps<'label', T, SelectLabelOwnProps & Pick<SelectLabelProps$1, 'children'>>;
-interface SelectItemTextOwnProps {
-    /** Per-slot class name overrides. */
-    classNames?: ClassNamesMap<SelectItemTextSlot>;
-    /** Per-slot HTML attribute overrides. */
-    slotProps?: SlotPropsMap<SelectItemTextSlot>;
-}
-type SelectItemTextProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, SelectItemTextOwnProps & Pick<SelectItemTextProps$1, 'children'>>;
 interface SelectSeparatorOwnProps {
     /** Per-slot class name overrides. */
     classNames?: ClassNamesMap<SelectSeparatorSlot>;
@@ -1122,12 +1121,10 @@ declare module '../../core/theme' {
     interface ComponentThemeRegistry {
         Select: ComponentThemeConfig<SelectProps, SelectSlot>;
         SelectTrigger: ComponentThemeConfig<SelectTriggerProps, SelectTriggerSlot>;
-        SelectValue: ComponentThemeConfig<SelectValueProps, SelectValueSlot>;
         SelectContent: ComponentThemeConfig<SelectContentProps, SelectContentSlot>;
         SelectItem: ComponentThemeConfig<SelectItemProps, SelectItemSlot>;
         SelectGroup: ComponentThemeConfig<SelectGroupProps, SelectGroupSlot>;
         SelectLabel: ComponentThemeConfig<SelectLabelProps, SelectLabelSlot>;
-        SelectItemText: ComponentThemeConfig<SelectItemTextProps, SelectItemTextSlot>;
         SelectSeparator: ComponentThemeConfig<SelectSeparatorProps, SelectSeparatorSlot>;
     }
 }
@@ -1140,10 +1137,6 @@ declare const Select: {
         <T extends react.ElementType = "button">(props: SelectTriggerProps<T>): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
-    Value: {
-        <T extends react.ElementType = "span">(props: SelectValueProps<T>): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
     Content: {
         <T extends react.ElementType = "div">(props: SelectContentProps<T>): react_jsx_runtime.JSX.Element;
         displayName: string;
@@ -1152,10 +1145,6 @@ declare const Select: {
         <T extends react.ElementType = "div">(props: SelectItemProps<T>): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
-    ItemText: {
-        <T extends react.ElementType = "span">(props: SelectItemTextProps<T>): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
     Group: {
         <T extends react.ElementType = "div">(props: SelectGroupProps<T>): react_jsx_runtime.JSX.Element;
         displayName: string;
@@ -1349,4 +1338,4 @@ declare const Tooltip: {
     };
 };
 
-export { Accordion, type AccordionContentProps, type AccordionCurrentValue, type AccordionHeaderProps, type AccordionHeadingLevel, type AccordionIndicatorProps, type AccordionIndicatorRenderState, type AccordionItemProps, type AccordionMode, type AccordionProps, type AccordionSize, type AccordionTriggerProps, type AccordionType, type AccordionValue, type AccordionValueChangeHandler, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeSlot, type BadgeVariant, Button, type ButtonAppearance, type ButtonProps, type ButtonSize, type ButtonSlot, type ButtonVariant, Checkbox, type CheckboxIndicatorProps, type CheckboxIndicatorRenderProps, type CheckboxProps, type CheckboxRenderProps, type CheckboxSize, type CheckboxSlot, type CheckboxType, type ClassNamesMap, type ColorMode, type ComponentName, type ComponentThemeConfig, type ComponentThemeRegistry, type ComponentsThemeMap, type DataSlotName, Drawer, type DrawerBodyProps, type DrawerCloseButtonProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerHeaderProps, type DrawerOverlayProps, type DrawerPanelProps, type DrawerPlacement, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, Field, type FieldDescriptionProps, type FieldDescriptionSlot, type FieldErrorMessageProps, type FieldErrorMessageSlot, type FieldLabelProps, type FieldLabelSlot, type FieldProps, type FieldSlot, Input, type InputContainerProps, type InputFieldProps, type InputPrefixProps, type InputProps, type InputSize, type InputSuffixProps, Popover, type PopoverArrowProps, type PopoverArrowSlot, type PopoverCloseProps, type PopoverCloseSlot, type PopoverContentProps, type PopoverContentSlot, type PopoverDescriptionProps, type PopoverDescriptionSlot, type PopoverHeaderProps, type PopoverHeaderSlot, type PopoverProps, type PopoverTriggerProps, type PopoverTriggerSlot, type PopoverVariant, Radio, type RadioIndicatorProps, type RadioItemProps, type RadioItemSlot, type RadioLabelProps, type RadioPosition, type RadioProps, type RadioRenderProps, type RadioSize, type RadioSlot, type RadioType, Select, type SelectContentProps, type SelectGroupProps, type SelectItemProps, type SelectItemTextProps, type SelectLabelProps, type SelectProps, type SelectSeparatorProps, type SelectSize, type SelectTriggerProps, type SelectValueProps, type SlotClassNames, type SlotPropsMap, type StateOnlyComponentThemeConfig$1 as StateOnlyComponentThemeConfig, Switch, type SwitchIndicatorProps, type SwitchIndicatorRenderProps, type SwitchProps, type SwitchRenderProps, type SwitchSize, type SwitchSlot, type SwitchVariant, TakeoffSparProvider, type TakeoffSparProviderProps, type TakeoffSparProviderValue, type ThemeValue, Tooltip, type TooltipArrowProps, type TooltipArrowSlot, type TooltipContentProps, type TooltipContentSlot, type TooltipDescriptionProps, type TooltipDescriptionSlot, type TooltipHeaderProps, type TooltipHeaderSlot, type TooltipProps, type TooltipProviderProps, type TooltipTriggerProps, type TooltipTriggerSlot, type TooltipVariant, useComponentTheme, useTheme };
+export { Accordion, type AccordionContentProps, type AccordionCurrentValue, type AccordionHeaderProps, type AccordionHeadingLevel, type AccordionIndicatorProps, type AccordionIndicatorRenderState, type AccordionItemProps, type AccordionMode, type AccordionProps, type AccordionSize, type AccordionTriggerProps, type AccordionType, type AccordionValue, type AccordionValueChangeHandler, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeSlot, type BadgeVariant, Button, type ButtonAppearance, type ButtonProps, type ButtonSize, type ButtonSlot, type ButtonVariant, Checkbox, type CheckboxIndicatorProps, type CheckboxIndicatorRenderProps, type CheckboxProps, type CheckboxRenderProps, type CheckboxSize, type CheckboxSlot, type CheckboxType, type ClassNamesMap, type ColorMode, type ComponentName, type ComponentThemeConfig, type ComponentThemeRegistry, type ComponentsThemeMap, type DataSlotName, Drawer, type DrawerBodyProps, type DrawerCloseButtonProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerHeaderProps, type DrawerOverlayProps, type DrawerPanelProps, type DrawerPlacement, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, Field, type FieldDescriptionProps, type FieldDescriptionSlot, type FieldErrorMessageProps, type FieldErrorMessageSlot, type FieldLabelProps, type FieldLabelSlot, type FieldProps, type FieldSlot, Input, type InputContainerProps, type InputFieldProps, type InputPrefixProps, type InputProps, type InputSize, type InputSuffixProps, Popover, type PopoverArrowProps, type PopoverArrowSlot, type PopoverCloseProps, type PopoverCloseSlot, type PopoverContentProps, type PopoverContentSlot, type PopoverDescriptionProps, type PopoverDescriptionSlot, type PopoverHeaderProps, type PopoverHeaderSlot, type PopoverProps, type PopoverTriggerProps, type PopoverTriggerSlot, type PopoverVariant, Radio, type RadioIndicatorProps, type RadioItemProps, type RadioItemSlot, type RadioLabelProps, type RadioPosition, type RadioProps, type RadioRenderProps, type RadioSize, type RadioSlot, type RadioType, Select, type SelectContentProps, type SelectGroupProps, type SelectItemProps, type SelectLabelProps, type SelectProps, type SelectSeparatorProps, type SelectSize, type SelectTriggerProps, type SlotClassNames, type SlotPropsMap, type StateOnlyComponentThemeConfig$1 as StateOnlyComponentThemeConfig, Switch, type SwitchIndicatorProps, type SwitchIndicatorRenderProps, type SwitchProps, type SwitchRenderProps, type SwitchSize, type SwitchSlot, type SwitchVariant, TakeoffSparProvider, type TakeoffSparProviderProps, type TakeoffSparProviderValue, type ThemeValue, Tooltip, type TooltipArrowProps, type TooltipArrowSlot, type TooltipContentProps, type TooltipContentSlot, type TooltipDescriptionProps, type TooltipDescriptionSlot, type TooltipHeaderProps, type TooltipHeaderSlot, type TooltipProps, type TooltipProviderProps, type TooltipTriggerProps, type TooltipTriggerSlot, type TooltipVariant, useComponentTheme, useTheme };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { HTMLAttributes, ElementType, ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
-import { PolymorphicProps, AccordionProps as AccordionProps$1, AccordionItemProps as AccordionItemProps$1, AccordionHeaderProps as AccordionHeaderProps$1, AccordionContentProps as AccordionContentProps$1, ButtonProps as ButtonProps$1, CheckboxRenderProps as CheckboxRenderProps$1, CheckboxProps as CheckboxProps$1, DialogProps, DialogTriggerProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogCloseProps, FieldProps as FieldProps$1, FieldLabelProps as FieldLabelProps$1, FieldDescriptionProps as FieldDescriptionProps$1, FieldErrorMessageProps as FieldErrorMessageProps$1, InputProps as InputProps$1, InputFieldProps as InputFieldProps$1, RadioProps as RadioProps$1, RadioItemRenderProps, RadioItemProps as RadioItemProps$1, PopoverProps as PopoverProps$1, PopoverTriggerProps as PopoverTriggerProps$1, PopoverContentProps as PopoverContentProps$1, PopoverCloseProps as PopoverCloseProps$1, SelectProps as SelectProps$1, SelectTriggerProps as SelectTriggerProps$1, SelectValueProps as SelectValueProps$1, SelectContentProps as SelectContentProps$1, SelectItemProps as SelectItemProps$1, SelectGroupProps as SelectGroupProps$1, SelectLabelProps as SelectLabelProps$1, SelectItemTextProps as SelectItemTextProps$1, SelectSeparatorProps as SelectSeparatorProps$1, SwitchRenderProps as SwitchRenderProps$1, SwitchProps as SwitchProps$1, TooltipTriggerProps as TooltipTriggerProps$1, TooltipContentProps as TooltipContentProps$1, TooltipProps as TooltipProps$1, TooltipProviderProps as TooltipProviderProps$1 } from '@turkish-technology/spar';
+import { PolymorphicProps, AccordionProps as AccordionProps$1, AccordionItemProps as AccordionItemProps$1, AccordionHeaderProps as AccordionHeaderProps$1, AccordionContentProps as AccordionContentProps$1, ButtonProps as ButtonProps$1, CheckboxRenderProps as CheckboxRenderProps$1, CheckboxProps as CheckboxProps$1, DialogProps, DialogTriggerProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogCloseProps, FieldProps as FieldProps$1, FieldLabelProps as FieldLabelProps$1, FieldDescriptionProps as FieldDescriptionProps$1, FieldErrorMessageProps as FieldErrorMessageProps$1, InputProps as InputProps$1, InputFieldProps as InputFieldProps$1, RadioProps as RadioProps$1, RadioItemRenderProps, RadioItemProps as RadioItemProps$1, PopoverProps as PopoverProps$1, PopoverTriggerProps as PopoverTriggerProps$1, PopoverContentProps as PopoverContentProps$1, PopoverCloseProps as PopoverCloseProps$1, SelectProps as SelectProps$1, SelectTriggerProps as SelectTriggerProps$1, SelectContentProps as SelectContentProps$1, SelectItemProps as SelectItemProps$1, SelectGroupProps as SelectGroupProps$1, SelectLabelProps as SelectLabelProps$1, SelectSeparatorProps as SelectSeparatorProps$1, SwitchRenderProps as SwitchRenderProps$1, SwitchProps as SwitchProps$1, TooltipTriggerProps as TooltipTriggerProps$1, TooltipContentProps as TooltipContentProps$1, TooltipProps as TooltipProps$1, TooltipProviderProps as TooltipProviderProps$1 } from '@turkish-technology/spar';
 
 /** Per-slot class map declared by a component base. Every slot is required. */
 type SlotClassNames<TSlot extends string> = Record<TSlot, string>;
@@ -1026,14 +1026,21 @@ declare const Popover: {
 };
 
 type SelectSize = 'small' | 'base' | 'large';
+/**
+ * Controls the panel's render width.
+ *
+ * - `'trigger'`: panel matches the trigger's measured width (form-aligned default)
+ * - `'content'`: panel shrink-wraps the longest item, only enforcing the CSS min-width
+ * - `number`: explicit pixel width
+ * - `string`: any CSS width value (`'20rem'`, `'min(40ch, 100%)'`, etc.)
+ */
+type SelectContentWidth = 'trigger' | 'content' | number | string;
 type SelectSlot = 'root';
 type SelectTriggerSlot = 'root';
-type SelectValueSlot = 'root';
 type SelectContentSlot = 'root';
 type SelectItemSlot = 'root';
 type SelectGroupSlot = 'root';
 type SelectLabelSlot = 'root';
-type SelectItemTextSlot = 'root';
 type SelectSeparatorSlot = 'root';
 /**
  * Visual + slot props owned by takeoff-v2 for the Select root. `size` and
@@ -1051,6 +1058,12 @@ interface SelectOwnProps {
      * @defaultValue false
      */
     invalid?: boolean;
+    /**
+     * How the portalled SelectContent panel computes its width. See
+     * {@link SelectContentWidth}.
+     * @defaultValue 'trigger'
+     */
+    contentWidth?: SelectContentWidth;
     /** Per-slot class name overrides. */
     classNames?: ClassNamesMap<SelectSlot>;
     /** Per-slot HTML attribute overrides. */
@@ -1068,14 +1081,7 @@ interface SelectTriggerOwnProps {
     /** Per-slot HTML attribute overrides. */
     slotProps?: SlotPropsMap<SelectTriggerSlot>;
 }
-type SelectTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, SelectTriggerOwnProps & Pick<SelectTriggerProps$1, 'children'>>;
-interface SelectValueOwnProps {
-    /** Per-slot class name overrides. */
-    classNames?: ClassNamesMap<SelectValueSlot>;
-    /** Per-slot HTML attribute overrides. */
-    slotProps?: SlotPropsMap<SelectValueSlot>;
-}
-type SelectValueProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, SelectValueOwnProps & Pick<SelectValueProps$1, 'placeholder'>>;
+type SelectTriggerProps<T extends ElementType = 'button'> = PolymorphicProps<'button', T, SelectTriggerOwnProps & Pick<SelectTriggerProps$1, 'children' | 'placeholder'>>;
 interface SelectContentOwnProps {
     /** Per-slot class name overrides. */
     classNames?: ClassNamesMap<SelectContentSlot>;
@@ -1089,7 +1095,7 @@ interface SelectItemOwnProps {
     /** Per-slot HTML attribute overrides. */
     slotProps?: SlotPropsMap<SelectItemSlot>;
 }
-type SelectItemProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, SelectItemOwnProps & Pick<SelectItemProps$1, 'value' | 'disabled' | 'textValue' | 'children'>>;
+type SelectItemProps<T extends ElementType = 'div'> = PolymorphicProps<'div', T, SelectItemOwnProps & Pick<SelectItemProps$1, 'value' | 'disabled' | 'label' | 'children'>>;
 interface SelectGroupOwnProps {
     /** Per-slot class name overrides. */
     classNames?: ClassNamesMap<SelectGroupSlot>;
@@ -1104,13 +1110,6 @@ interface SelectLabelOwnProps {
     slotProps?: SlotPropsMap<SelectLabelSlot>;
 }
 type SelectLabelProps<T extends ElementType = 'label'> = PolymorphicProps<'label', T, SelectLabelOwnProps & Pick<SelectLabelProps$1, 'children'>>;
-interface SelectItemTextOwnProps {
-    /** Per-slot class name overrides. */
-    classNames?: ClassNamesMap<SelectItemTextSlot>;
-    /** Per-slot HTML attribute overrides. */
-    slotProps?: SlotPropsMap<SelectItemTextSlot>;
-}
-type SelectItemTextProps<T extends ElementType = 'span'> = PolymorphicProps<'span', T, SelectItemTextOwnProps & Pick<SelectItemTextProps$1, 'children'>>;
 interface SelectSeparatorOwnProps {
     /** Per-slot class name overrides. */
     classNames?: ClassNamesMap<SelectSeparatorSlot>;
@@ -1122,12 +1121,10 @@ declare module '../../core/theme' {
     interface ComponentThemeRegistry {
         Select: ComponentThemeConfig<SelectProps, SelectSlot>;
         SelectTrigger: ComponentThemeConfig<SelectTriggerProps, SelectTriggerSlot>;
-        SelectValue: ComponentThemeConfig<SelectValueProps, SelectValueSlot>;
         SelectContent: ComponentThemeConfig<SelectContentProps, SelectContentSlot>;
         SelectItem: ComponentThemeConfig<SelectItemProps, SelectItemSlot>;
         SelectGroup: ComponentThemeConfig<SelectGroupProps, SelectGroupSlot>;
         SelectLabel: ComponentThemeConfig<SelectLabelProps, SelectLabelSlot>;
-        SelectItemText: ComponentThemeConfig<SelectItemTextProps, SelectItemTextSlot>;
         SelectSeparator: ComponentThemeConfig<SelectSeparatorProps, SelectSeparatorSlot>;
     }
 }
@@ -1140,10 +1137,6 @@ declare const Select: {
         <T extends react.ElementType = "button">(props: SelectTriggerProps<T>): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
-    Value: {
-        <T extends react.ElementType = "span">(props: SelectValueProps<T>): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
     Content: {
         <T extends react.ElementType = "div">(props: SelectContentProps<T>): react_jsx_runtime.JSX.Element;
         displayName: string;
@@ -1152,10 +1145,6 @@ declare const Select: {
         <T extends react.ElementType = "div">(props: SelectItemProps<T>): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
-    ItemText: {
-        <T extends react.ElementType = "span">(props: SelectItemTextProps<T>): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
     Group: {
         <T extends react.ElementType = "div">(props: SelectGroupProps<T>): react_jsx_runtime.JSX.Element;
         displayName: string;
@@ -1349,4 +1338,4 @@ declare const Tooltip: {
     };
 };
 
-export { Accordion, type AccordionContentProps, type AccordionCurrentValue, type AccordionHeaderProps, type AccordionHeadingLevel, type AccordionIndicatorProps, type AccordionIndicatorRenderState, type AccordionItemProps, type AccordionMode, type AccordionProps, type AccordionSize, type AccordionTriggerProps, type AccordionType, type AccordionValue, type AccordionValueChangeHandler, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeSlot, type BadgeVariant, Button, type ButtonAppearance, type ButtonProps, type ButtonSize, type ButtonSlot, type ButtonVariant, Checkbox, type CheckboxIndicatorProps, type CheckboxIndicatorRenderProps, type CheckboxProps, type CheckboxRenderProps, type CheckboxSize, type CheckboxSlot, type CheckboxType, type ClassNamesMap, type ColorMode, type ComponentName, type ComponentThemeConfig, type ComponentThemeRegistry, type ComponentsThemeMap, type DataSlotName, Drawer, type DrawerBodyProps, type DrawerCloseButtonProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerHeaderProps, type DrawerOverlayProps, type DrawerPanelProps, type DrawerPlacement, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, Field, type FieldDescriptionProps, type FieldDescriptionSlot, type FieldErrorMessageProps, type FieldErrorMessageSlot, type FieldLabelProps, type FieldLabelSlot, type FieldProps, type FieldSlot, Input, type InputContainerProps, type InputFieldProps, type InputPrefixProps, type InputProps, type InputSize, type InputSuffixProps, Popover, type PopoverArrowProps, type PopoverArrowSlot, type PopoverCloseProps, type PopoverCloseSlot, type PopoverContentProps, type PopoverContentSlot, type PopoverDescriptionProps, type PopoverDescriptionSlot, type PopoverHeaderProps, type PopoverHeaderSlot, type PopoverProps, type PopoverTriggerProps, type PopoverTriggerSlot, type PopoverVariant, Radio, type RadioIndicatorProps, type RadioItemProps, type RadioItemSlot, type RadioLabelProps, type RadioPosition, type RadioProps, type RadioRenderProps, type RadioSize, type RadioSlot, type RadioType, Select, type SelectContentProps, type SelectGroupProps, type SelectItemProps, type SelectItemTextProps, type SelectLabelProps, type SelectProps, type SelectSeparatorProps, type SelectSize, type SelectTriggerProps, type SelectValueProps, type SlotClassNames, type SlotPropsMap, type StateOnlyComponentThemeConfig$1 as StateOnlyComponentThemeConfig, Switch, type SwitchIndicatorProps, type SwitchIndicatorRenderProps, type SwitchProps, type SwitchRenderProps, type SwitchSize, type SwitchSlot, type SwitchVariant, TakeoffSparProvider, type TakeoffSparProviderProps, type TakeoffSparProviderValue, type ThemeValue, Tooltip, type TooltipArrowProps, type TooltipArrowSlot, type TooltipContentProps, type TooltipContentSlot, type TooltipDescriptionProps, type TooltipDescriptionSlot, type TooltipHeaderProps, type TooltipHeaderSlot, type TooltipProps, type TooltipProviderProps, type TooltipTriggerProps, type TooltipTriggerSlot, type TooltipVariant, useComponentTheme, useTheme };
+export { Accordion, type AccordionContentProps, type AccordionCurrentValue, type AccordionHeaderProps, type AccordionHeadingLevel, type AccordionIndicatorProps, type AccordionIndicatorRenderState, type AccordionItemProps, type AccordionMode, type AccordionProps, type AccordionSize, type AccordionTriggerProps, type AccordionType, type AccordionValue, type AccordionValueChangeHandler, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeSlot, type BadgeVariant, Button, type ButtonAppearance, type ButtonProps, type ButtonSize, type ButtonSlot, type ButtonVariant, Checkbox, type CheckboxIndicatorProps, type CheckboxIndicatorRenderProps, type CheckboxProps, type CheckboxRenderProps, type CheckboxSize, type CheckboxSlot, type CheckboxType, type ClassNamesMap, type ColorMode, type ComponentName, type ComponentThemeConfig, type ComponentThemeRegistry, type ComponentsThemeMap, type DataSlotName, Drawer, type DrawerBodyProps, type DrawerCloseButtonProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerHeaderProps, type DrawerOverlayProps, type DrawerPanelProps, type DrawerPlacement, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, Field, type FieldDescriptionProps, type FieldDescriptionSlot, type FieldErrorMessageProps, type FieldErrorMessageSlot, type FieldLabelProps, type FieldLabelSlot, type FieldProps, type FieldSlot, Input, type InputContainerProps, type InputFieldProps, type InputPrefixProps, type InputProps, type InputSize, type InputSuffixProps, Popover, type PopoverArrowProps, type PopoverArrowSlot, type PopoverCloseProps, type PopoverCloseSlot, type PopoverContentProps, type PopoverContentSlot, type PopoverDescriptionProps, type PopoverDescriptionSlot, type PopoverHeaderProps, type PopoverHeaderSlot, type PopoverProps, type PopoverTriggerProps, type PopoverTriggerSlot, type PopoverVariant, Radio, type RadioIndicatorProps, type RadioItemProps, type RadioItemSlot, type RadioLabelProps, type RadioPosition, type RadioProps, type RadioRenderProps, type RadioSize, type RadioSlot, type RadioType, Select, type SelectContentProps, type SelectGroupProps, type SelectItemProps, type SelectLabelProps, type SelectProps, type SelectSeparatorProps, type SelectSize, type SelectTriggerProps, type SlotClassNames, type SlotPropsMap, type StateOnlyComponentThemeConfig$1 as StateOnlyComponentThemeConfig, Switch, type SwitchIndicatorProps, type SwitchIndicatorRenderProps, type SwitchProps, type SwitchRenderProps, type SwitchSize, type SwitchSlot, type SwitchVariant, TakeoffSparProvider, type TakeoffSparProviderProps, type TakeoffSparProviderValue, type ThemeValue, Tooltip, type TooltipArrowProps, type TooltipArrowSlot, type TooltipContentProps, type TooltipContentSlot, type TooltipDescriptionProps, type TooltipDescriptionSlot, type TooltipHeaderProps, type TooltipHeaderSlot, type TooltipProps, type TooltipProviderProps, type TooltipTriggerProps, type TooltipTriggerSlot, type TooltipVariant, useComponentTheme, useTheme };

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { createContext, Children, isValidElement, createElement, useContext, useEffect, useMemo } from 'react';
+import { createContext, Children, isValidElement, useState, useEffect, useMemo, createElement, useContext } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Accordion as Accordion$1, AccordionContent as AccordionContent$1, useAccordionItemContext, AccordionTrigger as AccordionTrigger$1, AccordionHeader as AccordionHeader$1, AccordionItem as AccordionItem$1, Checkbox as Checkbox$1, Dialog, DialogClose, DialogDescription, DialogTitle, DialogContent, DialogOverlay, DialogTrigger, Field as Field$1, FieldErrorMessage as FieldErrorMessage$1, FieldDescription as FieldDescription$1, useFieldContext, FieldLabel as FieldLabel$1, Input as Input$1, InputField as InputField$1, useInputContext, Radio as Radio$1, RadioItem as RadioItem$1, Popover as Popover$1, PopoverClose as PopoverClose$1, PopoverArrow as PopoverArrow$1, PopoverContent as PopoverContent$1, PopoverTrigger as PopoverTrigger$1, Select as Select$1, SelectSeparator as SelectSeparator$1, SelectLabel as SelectLabel$1, SelectGroup as SelectGroup$1, SelectItemText as SelectItemText$1, SelectItem as SelectItem$1, SelectContent as SelectContent$1, SelectValue as SelectValue$1, SelectTrigger as SelectTrigger$1, Switch as Switch$1, Tooltip as Tooltip$1, TooltipArrow as TooltipArrow$1, TooltipContent as TooltipContent$1, TooltipTrigger as TooltipTrigger$1, TooltipProvider as TooltipProvider$1, Button as Button$1 } from '@turkish-technology/spar';
+import { Accordion as Accordion$1, AccordionContent as AccordionContent$1, useAccordionItemContext, AccordionTrigger as AccordionTrigger$1, AccordionHeader as AccordionHeader$1, AccordionItem as AccordionItem$1, Checkbox as Checkbox$1, Dialog, DialogClose, DialogDescription, DialogTitle, DialogContent, DialogOverlay, DialogTrigger, Field as Field$1, FieldErrorMessage as FieldErrorMessage$1, FieldDescription as FieldDescription$1, useFieldContext, FieldLabel as FieldLabel$1, Input as Input$1, InputField as InputField$1, useInputContext, Radio as Radio$1, RadioItem as RadioItem$1, Popover as Popover$1, PopoverClose as PopoverClose$1, PopoverArrow as PopoverArrow$1, PopoverContent as PopoverContent$1, PopoverTrigger as PopoverTrigger$1, Select as Select$1, SelectSeparator as SelectSeparator$1, SelectLabel as SelectLabel$1, SelectGroup as SelectGroup$1, SelectItem as SelectItem$1, useSelectContext, SelectContent as SelectContent$1, SelectTrigger as SelectTrigger$1, Switch as Switch$1, Tooltip as Tooltip$1, TooltipArrow as TooltipArrow$1, TooltipContent as TooltipContent$1, TooltipTrigger as TooltipTrigger$1, TooltipProvider as TooltipProvider$1, Button as Button$1 } from '@turkish-technology/spar';
 import { clsx } from 'clsx';
 
 // src/provider.tsx
@@ -1114,11 +1114,6 @@ var SelectTriggerBase = createComponentBase({
   slots: ["root"],
   classes: { root: "tk-select-trigger" }
 });
-var SelectValueBase = createComponentBase({
-  name: "SelectValue",
-  slots: ["root"],
-  classes: { root: "tk-select-value" }
-});
 var SelectContentBase = createComponentBase({
   name: "SelectContent",
   slots: ["root"],
@@ -1139,11 +1134,6 @@ var SelectLabelBase = createComponentBase({
   slots: ["root"],
   classes: { root: "tk-select-label" }
 });
-var SelectItemTextBase = createComponentBase({
-  name: "SelectItemText",
-  slots: ["root"],
-  classes: { root: "tk-select-item-text" }
-});
 var SelectSeparatorBase = createComponentBase({
   name: "SelectSeparator",
   slots: ["root"],
@@ -1155,6 +1145,7 @@ var [SelectProvider, useSelectOwnContext] = createSafeContext("SelectProvider");
 
 // src/components/select/defaults.ts
 var DEFAULT_SIZE7 = "base";
+var DEFAULT_CONTENT_WIDTH = "trigger";
 var Select = (props) => {
   const theme = useComponentTheme("Select");
   const { rootAttrs, rest } = composeRootAttrs(SelectBase, props, theme, {
@@ -1163,8 +1154,8 @@ var Select = (props) => {
       "data-invalid": invalid2 ? "" : void 0
     })
   });
-  const { size = DEFAULT_SIZE7, invalid = false, children, ref, ...sparProps } = rest;
-  return /* @__PURE__ */ jsx(SelectProvider, { value: { size, invalid }, children: /* @__PURE__ */ jsx(Select$1, { ...sparProps, ref, ...rootAttrs, children }) });
+  const { size = DEFAULT_SIZE7, invalid = false, contentWidth = DEFAULT_CONTENT_WIDTH, children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsx(SelectProvider, { value: { size, invalid, contentWidth }, children: /* @__PURE__ */ jsx(Select$1, { ...sparProps, ref, ...rootAttrs, children }) });
 };
 Select.displayName = "Select";
 var SelectTrigger = (props) => {
@@ -1180,39 +1171,51 @@ var SelectTrigger = (props) => {
   return /* @__PURE__ */ jsx(SelectTrigger$1, { ...spar, ref, ...rootAttrs, children });
 };
 SelectTrigger.displayName = "Select.Trigger";
-var SelectValue = (props) => {
-  const theme = useComponentTheme("SelectValue");
-  const { rootAttrs, rest } = composeRootAttrs(SelectValueBase, props, theme);
-  const { placeholder, children, ref, ...spar } = rest;
-  return /* @__PURE__ */ jsx(SelectValue$1, { ...spar, placeholder, ref, ...rootAttrs, children });
+var resolveStaticWidth = (mode) => {
+  if (mode === "trigger" || mode === "content") return void 0;
+  return typeof mode === "number" ? `${mode}px` : mode;
 };
-SelectValue.displayName = "Select.Value";
 var SelectContent = (props) => {
   const theme = useComponentTheme("SelectContent");
-  const { size } = useSelectOwnContext("Select.Content");
+  const { size, contentWidth } = useSelectOwnContext("Select.Content");
+  const { triggerRef } = useSelectContext();
+  const [triggerWidth, setTriggerWidth] = useState(null);
+  useEffect(() => {
+    if (contentWidth !== "trigger") return;
+    const node = triggerRef.current;
+    if (!node) return;
+    setTriggerWidth(node.offsetWidth);
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setTriggerWidth(Math.round(entry.contentRect.width + 2));
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [contentWidth, triggerRef]);
   const { rootAttrs, rest } = composeRootAttrs(SelectContentBase, props, theme, {
     stateAttrs: () => ({
       "data-size": size
     })
   });
-  const { children, ref, ...spar } = rest;
-  return /* @__PURE__ */ jsx(SelectContent$1, { ...spar, ref, ...rootAttrs, children });
+  const { children, ref, style: userStyle, ...spar } = rest;
+  const widthStyle = useMemo(() => {
+    if (contentWidth === "trigger") {
+      return triggerWidth != null ? { width: triggerWidth } : void 0;
+    }
+    const staticWidth = resolveStaticWidth(contentWidth);
+    return staticWidth != null ? { width: staticWidth } : void 0;
+  }, [contentWidth, triggerWidth]);
+  const mergedStyle = widthStyle || userStyle ? { ...widthStyle, ...userStyle } : void 0;
+  return /* @__PURE__ */ jsx(SelectContent$1, { ...spar, ref, style: mergedStyle, ...rootAttrs, children });
 };
 SelectContent.displayName = "Select.Content";
 var SelectItem = (props) => {
   const theme = useComponentTheme("SelectItem");
   const { rootAttrs, rest } = composeRootAttrs(SelectItemBase, props, theme);
-  const { value, disabled, textValue, children, ref, ...spar } = rest;
-  return /* @__PURE__ */ jsx(SelectItem$1, { ...spar, value, disabled, textValue, ref, ...rootAttrs, children });
+  const { value, disabled, label, children, ref, ...spar } = rest;
+  return /* @__PURE__ */ jsx(SelectItem$1, { ...spar, value, disabled, label, ref, ...rootAttrs, children });
 };
 SelectItem.displayName = "Select.Item";
-var SelectItemText = (props) => {
-  const theme = useComponentTheme("SelectItemText");
-  const { rootAttrs, rest } = composeRootAttrs(SelectItemTextBase, props, theme);
-  const { children, ref, ...spar } = rest;
-  return /* @__PURE__ */ jsx(SelectItemText$1, { ...spar, ref, ...rootAttrs, children });
-};
-SelectItemText.displayName = "Select.ItemText";
 var SelectGroup = (props) => {
   const theme = useComponentTheme("SelectGroup");
   const { rootAttrs, rest } = composeRootAttrs(SelectGroupBase, props, theme);
@@ -1238,10 +1241,8 @@ SelectSeparator.displayName = "Select.Separator";
 // src/components/select/index.ts
 var Select2 = Object.assign(Select, {
   Trigger: SelectTrigger,
-  Value: SelectValue,
   Content: SelectContent,
   Item: SelectItem,
-  ItemText: SelectItemText,
   Group: SelectGroup,
   Label: SelectLabel,
   Separator: SelectSeparator

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@takeoff-ui/react-spar",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.2",
   "description": "React-first Takeoff wrappers built on top of @turkish-technology/spar.",
   "type": "module",
   "author": "Turkish Technology Frontend Infrastructure Team <takeoffui@thy.com>",
-  "homepage": "https://takeoffui.com",
+  "homepage": "https://takeoff-v2.app.turkishtechlab.com",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@turkish-technology/spar": "0.2.0-beta.0",
+    "@turkish-technology/spar": "0.2.0-beta.1",
     "clsx": "^2.1.1"
   },
   "peerDependencies": {