@cube-dev/ui-kit 0.114.0 → 0.115.0

package/dist/components/fields/Checkbox/Checkbox.js

@@ -0,0 +1,190 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+import { Element, tasty } from "../../../tasty/tasty.js";
+import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { _Text } from "../../content/Text.js";
+import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
+import { Icon } from "../../../icons/Icon.js";
+import { useProviderProps } from "../../../provider.js";
+import { INLINE_LABEL_STYLES, LABEL_STYLES } from "../../form/Label.js";
+import { useFormProps } from "../../form/Form/Form.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
+import { wrapWithField } from "../../form/wrapper.js";
+import { castNullableIsSelected } from "../../../utils/react/nullableValue.js";
+import { HiddenInput } from "../../HiddenInput.js";
+import { CheckboxGroupContext } from "./context.js";
+import { _CheckboxGroup } from "./CheckboxGroup.js";
+import { forwardRef, useContext, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useCheckbox, useCheckboxGroupItem, useHover } from "react-aria";
+import { useFocusableRef } from "@react-spectrum/utils";
+import { useToggleState } from "react-stately";
+import { IconCheck, IconMinus } from "@tabler/icons-react";
+
+//#region src/components/fields/Checkbox/Checkbox.tsx
+const CheckboxWrapperElement = tasty({
+	as: "label",
+	qa: "CheckboxWrapper",
+	styles: {
+		position: "relative",
+		display: "flex",
+		placeItems: "center start",
+		placeContent: "baseline",
+		gap: "1x",
+		flow: "row",
+		preset: "default",
+		cursor: "$pointer",
+		width: "max max-content",
+		color: "#dark-02"
+	}
+});
+const CheckboxElement = tasty({
+	qa: "Checkbox",
+	styles: {
+		display: "grid",
+		placeItems: "center",
+		radius: ".5r",
+		fill: {
+			"": "#white",
+			"checked | indeterminate": "#primary",
+			"invalid & !checked": "#white",
+			"invalid & checked": "#danger",
+			disabled: "#dark.12"
+		},
+		color: {
+			"": "#white",
+			"disabled & !checked & !indeterminate": "#clear"
+		},
+		border: {
+			"": "#dark.30",
+			invalid: "#danger",
+			"disabled | ((indeterminate | checked) & !invalid)": "#clear"
+		},
+		width: "(2x - 2bw)",
+		height: "(2x - 2bw)",
+		outline: {
+			"": "#primary-text.0",
+			focused: "1bw #primary-text"
+		},
+		outlineOffset: 1,
+		transition: "theme"
+	}
+});
+function Checkbox(props, ref) {
+	let groupState = useContext(CheckboxGroupContext);
+	props = castNullableIsSelected(props);
+	let originalProps = props;
+	props = useProviderProps(props);
+	props = useFormProps(props);
+	props = useFieldProps(props, {
+		defaultValidationTrigger: "onChange",
+		valuePropsMapper: ({ value, onChange }) => ({
+			isSelected: value ?? false,
+			isIndeterminate: false,
+			onChange
+		}),
+		unsafe__isDisabled: !!groupState
+	});
+	let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, children, label, validationState, labelProps, labelStyles, labelPosition, inputStyles, isHidden, form, ...otherProps } = props;
+	let styles = extractStyles(props, CONTAINER_STYLES);
+	labelStyles = useMemo(() => ({
+		...!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES,
+		...labelStyles
+	}), [groupState, labelStyles]);
+	let { isFocused, focusProps } = useFocus$1({ isDisabled }, true);
+	let { hoverProps, isHovered } = useHover({ isDisabled });
+	let inputRef = useRef(null);
+	let domRef = useFocusableRef(ref, inputRef);
+	const toggleState = useToggleState(props);
+	let { inputProps } = groupState ? useCheckboxGroupItem({
+		...props,
+		value: props.value || "",
+		isRequired: originalProps.isRequired,
+		validationState: originalProps.validationState
+	}, groupState, inputRef) : useCheckbox({
+		...props,
+		...typeof label === "string" && label.trim() ? { "aria-label": label } : {}
+	}, toggleState, inputRef);
+	let markIcon = isIndeterminate ? /* @__PURE__ */ jsx(Icon, {
+		size: 12,
+		stroke: 3,
+		children: /* @__PURE__ */ jsx(IconMinus, {})
+	}) : /* @__PURE__ */ jsx(Icon, {
+		size: 12,
+		stroke: 3,
+		children: /* @__PURE__ */ jsx(IconCheck, {})
+	});
+	if (groupState) {
+		for (let key of [
+			"isSelected",
+			"defaultSelected",
+			"isEmphasized"
+		]) if (originalProps[key] != null) console.warn(`CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`);
+		if (props.value == null) console.warn("CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.");
+	}
+	const mods = {
+		checked: inputProps.checked,
+		indeterminate: isIndeterminate,
+		invalid: validationState === "invalid",
+		valid: validationState === "valid",
+		disabled: isDisabled,
+		hovered: isHovered,
+		focused: isFocused,
+		"side-label": labelPosition === "side",
+		"inside-form": insideForm
+	};
+	const checkbox = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HiddenInput, {
+		qa: qa || "Checkbox",
+		"data-input-type": "checkbox",
+		...mergeProps$1(inputProps, focusProps),
+		ref: inputRef
+	}), /* @__PURE__ */ jsx(CheckboxElement, {
+		mods,
+		styles: inputStyles,
+		children: markIcon
+	})] });
+	const checkboxField = /* @__PURE__ */ jsxs(CheckboxWrapperElement, {
+		isHidden,
+		mods,
+		children: [checkbox, children && /* @__PURE__ */ jsx(_Text, {
+			nowrap: true,
+			children
+		})]
+	});
+	if (!groupState) return wrapWithField(checkboxField, domRef, {
+		...props,
+		children: null,
+		inputStyles
+	});
+	return /* @__PURE__ */ jsxs(CheckboxWrapperElement, {
+		styles,
+		isHidden,
+		...hoverProps,
+		...filterBaseProps(otherProps),
+		ref: domRef,
+		children: [checkbox, label ?? children ? /* @__PURE__ */ jsx(Element, {
+			styles: labelStyles,
+			mods: {
+				invalid: validationState === "invalid",
+				valid: validationState === "valid",
+				disabled: isDisabled
+			},
+			...filterBaseProps(labelProps),
+			children: label ?? children
+		}) : null]
+	});
+}
+/**
+* Checkboxes allow users to select multiple items from a list of individual items,
+* or to mark one individual item as selected.
+*/
+let _Checkbox = forwardRef(Checkbox);
+_Checkbox.cubeInputType = "Checkbox";
+let __Checkbox = Object.assign(_Checkbox, { Group: _CheckboxGroup });
+__Checkbox.displayName = "Checkbox";
+
+//#endregion
+export { __Checkbox, useCheckbox };
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/fields/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":["useFocus","mergeProps","Text","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport { forwardRef, useContext, useMemo, useRef } from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/index';\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Element,\n  extractStyles,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { Text } from '../../content/Text';\nimport {\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  useFieldProps,\n  useFormProps,\n  wrapWithField,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\n\nexport interface CubeCheckboxProps\n  extends BaseProps,\n    ContainerStyleProps,\n    AriaCheckboxProps,\n    FieldBaseProps {\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  qa: 'Checkbox',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#white',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#white',\n      'invalid & checked': '#danger',\n      disabled: '#dark.12',\n    },\n    color: {\n      '': '#white',\n      'disabled & !checked & !indeterminate': '#clear',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      'disabled | ((indeterminate | checked) & !invalid)': '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  props: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  props = castNullableIsSelected(props);\n\n  let originalProps = props;\n\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    isRequired,\n    children,\n    label,\n    validationState,\n    labelProps,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    form,\n    ...otherProps\n  } = props;\n\n  let styles: Styles = extractStyles(props, CONTAINER_STYLES);\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  const toggleState = useToggleState(props);\n\n  let { inputProps } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...props,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and validationState to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          validationState: originalProps.validationState,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(\n        {\n          ...props,\n          ...(typeof label === 'string' && label.trim()\n            ? { 'aria-label': label }\n            : {}),\n        },\n        toggleState,\n        inputRef,\n      );\n\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3}>\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3}>\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      if (originalProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    invalid: validationState === 'invalid',\n    valid: validationState === 'valid',\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  const checkbox = (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n      />\n      <CheckboxElement mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  const checkboxField = (\n    <CheckboxWrapperElement isHidden={isHidden} mods={mods}>\n      {checkbox}\n      {children && <Text nowrap>{children}</Text>}\n    </CheckboxWrapperElement>\n  );\n\n  if (!groupState) {\n    return wrapWithField(checkboxField, domRef, {\n      ...props,\n      children: null,\n      inputStyles,\n    });\n  }\n\n  return (\n    <CheckboxWrapperElement\n      styles={styles}\n      isHidden={isHidden}\n      {...hoverProps}\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n    >\n      {checkbox}\n      {label ?? children ? (\n        <Element\n          styles={labelStyles}\n          mods={{\n            invalid: validationState === 'invalid',\n            valid: validationState === 'valid',\n            disabled: isDisabled,\n          }}\n          {...filterBaseProps(labelProps)}\n        >\n          {label ?? children}\n        </Element>\n      ) : null}\n    </CheckboxWrapperElement>\n  );\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}

package/dist/components/fields/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,23 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { FieldBaseProps } from "../../../shared/form.js";
+import "../../../shared/index.js";
+import { WithNullableValue } from "../../../utils/react/nullableValue.js";
+import * as react from "react";
+import { AriaCheckboxGroupProps } from "react-aria";
+
+//#region src/components/fields/Checkbox/CheckboxGroup.d.ts
+interface CubeCheckboxGroupProps extends BaseProps, Omit<AriaCheckboxGroupProps, 'errorMessage'>, FieldBaseProps, ContainerStyleProps {
+  orientation?: 'vertical' | 'horizontal';
+  inputStyles?: Styles;
+}
+/**
+ * Checkbox groups allow users to select a single option from a list of mutually exclusive options.
+ * All possible options are exposed up front for users to compare.
+ */
+declare const _CheckboxGroup: react.ForwardRefExoticComponent<Omit<WithNullableValue<CubeCheckboxGroupProps>, "ref"> & react.RefAttributes<unknown>>;
+//#endregion
+export { CubeCheckboxGroupProps, _CheckboxGroup };
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/components/fields/Checkbox/CheckboxGroup.js

@@ -0,0 +1,82 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+import { tasty } from "../../../tasty/tasty.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useProviderProps } from "../../../provider.js";
+import { FormContext, useFormProps } from "../../form/Form/Form.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
+import { wrapWithField } from "../../form/wrapper.js";
+import { castNullableArrayValue } from "../../../utils/react/nullableValue.js";
+import { CheckboxGroupContext } from "./context.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useCheckboxGroup } from "react-aria";
+import { useDOMRef } from "@react-spectrum/utils";
+import { useCheckboxGroupState } from "react-stately";
+
+//#region src/components/fields/Checkbox/CheckboxGroup.tsx
+const CheckGroupElement = tasty({
+	qa: "CheckboxGroup",
+	styles: {
+		display: "flex",
+		placeItems: "start",
+		placeContent: "start",
+		flow: {
+			"": "column",
+			horizontal: "row wrap"
+		},
+		gap: {
+			"": "1x",
+			horizontal: "1x 2x"
+		}
+	}
+});
+function CheckboxGroup(props, ref) {
+	props = castNullableArrayValue(props);
+	props = useProviderProps(props);
+	props = useFormProps(props);
+	props = useFieldProps(props, {
+		defaultValidationTrigger: "onChange",
+		valuePropsMapper: ({ value, onChange }) => ({
+			value: value != null ? value : [],
+			onChange
+		})
+	});
+	let { id, isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, validationState, children, orientation = "vertical", message, description, labelStyles, tooltip, labelProps: baseLabelProps, labelSuffix, inputStyles, form, ...otherProps } = props;
+	let domRef = useDOMRef(ref);
+	extractStyles(otherProps, CONTAINER_STYLES);
+	let state = useCheckboxGroupState(props);
+	let { groupProps, labelProps } = useCheckboxGroup(props, state);
+	return wrapWithField(/* @__PURE__ */ jsx(CheckGroupElement, {
+		id,
+		styles: inputStyles,
+		mods: { horizontal: orientation === "horizontal" },
+		children: /* @__PURE__ */ jsx(FormContext.Provider, {
+			value: {
+				isDisabled,
+				validationState
+			},
+			children: /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
+				value: state,
+				children
+			})
+		})
+	}), domRef, {
+		...props,
+		children: null,
+		fieldProps: groupProps,
+		labelProps: mergeProps$1(baseLabelProps, labelProps)
+	});
+}
+/**
+* Checkbox groups allow users to select a single option from a list of mutually exclusive options.
+* All possible options are exposed up front for users to compare.
+*/
+const _CheckboxGroup = forwardRef(CheckboxGroup);
+_CheckboxGroup.cubeInputType = "CheckboxGroup";
+_CheckboxGroup.displayName = "CheckboxGroup";
+
+//#endregion
+export { _CheckboxGroup };
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist/components/fields/Checkbox/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","names":["mergeProps"],"sources":["../../../../src/components/fields/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { useDOMRef } from '@react-spectrum/utils';\nimport { forwardRef } from 'react';\nimport { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableArrayValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport {\n  FormContext,\n  useFieldProps,\n  useFormProps,\n  wrapWithField,\n} from '../../form';\n\nimport { CheckboxGroupContext } from './context';\n\nconst CheckGroupElement = tasty({\n  qa: 'CheckboxGroup',\n  styles: {\n    display: 'flex',\n    placeItems: 'start',\n    placeContent: 'start',\n    flow: {\n      '': 'column',\n      horizontal: 'row wrap',\n    },\n    gap: {\n      '': '1x',\n      horizontal: '1x 2x',\n    },\n  },\n});\n\nexport interface CubeCheckboxGroupProps\n  extends BaseProps,\n    Omit<AriaCheckboxGroupProps, 'errorMessage'>,\n    FieldBaseProps,\n    ContainerStyleProps {\n  orientation?: 'vertical' | 'horizontal';\n  inputStyles?: Styles;\n}\n\nfunction CheckboxGroup(props: WithNullableValue<CubeCheckboxGroupProps>, ref) {\n  props = castNullableArrayValue(props);\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : [],\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    id,\n    isDisabled,\n    isRequired,\n    necessityIndicator,\n    necessityLabel,\n    label,\n    extra,\n    validationState,\n    children,\n    orientation = 'vertical',\n    message,\n    description,\n    labelStyles,\n    tooltip,\n    labelProps: baseLabelProps,\n    labelSuffix,\n    inputStyles,\n    form,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  let state = useCheckboxGroupState(props);\n  let { groupProps, labelProps } = useCheckboxGroup(props, state);\n\n  let radioGroup = (\n    <CheckGroupElement\n      id={id}\n      styles={inputStyles}\n      mods={{\n        horizontal: orientation === 'horizontal',\n      }}\n    >\n      <FormContext.Provider\n        value={{\n          isDisabled,\n          validationState,\n        }}\n      >\n        <CheckboxGroupContext.Provider value={state}>\n          {children}\n        </CheckboxGroupContext.Provider>\n      </FormContext.Provider>\n    </CheckGroupElement>\n  );\n\n  return wrapWithField(radioGroup, domRef, {\n    ...props,\n    children: null,\n    fieldProps: groupProps,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Checkbox groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _CheckboxGroup = forwardRef(CheckboxGroup);\n\n(_CheckboxGroup as any).cubeInputType = 'CheckboxGroup';\n_CheckboxGroup.displayName = 'CheckboxGroup';\n\nexport { _CheckboxGroup as CheckboxGroup };\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6BA,MAAM,oBAAoB,MAAM;CAC9B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,MAAM;GACJ,IAAI;GACJ,YAAY;GACb;EACD,KAAK;GACH,IAAI;GACJ,YAAY;GACb;EACF;CACF,CAAC;AAWF,SAAS,cAAc,OAAkD,KAAK;AAC5E,SAAQ,uBAAuB,MAAM;AACrC,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,OAAO,SAAS,OAAO,QAAQ,EAAE;GACvB;GACX;EACF,CAAC;CAEF,IAAI,EACF,IACA,YACA,YACA,oBACA,gBACA,OACA,OACA,iBACA,UACA,cAAc,YACd,SACA,aACA,aACA,SACA,YAAY,gBACZ,aACA,aACA,MACA,GAAG,eACD;CACJ,IAAI,SAAS,UAAU,IAAI;AAEd,eAAc,YAAY,iBAAiB;CAExD,IAAI,QAAQ,sBAAsB,MAAM;CACxC,IAAI,EAAE,YAAY,eAAe,iBAAiB,OAAO,MAAM;AAuB/D,QAAO,cApBL,oBAAC;EACK;EACJ,QAAQ;EACR,MAAM,EACJ,YAAY,gBAAgB,cAC7B;YAED,oBAAC,YAAY;GACX,OAAO;IACL;IACA;IACD;aAED,oBAAC,qBAAqB;IAAS,OAAO;IACnC;KAC6B;IACX;GACL,EAGW,QAAQ;EACvC,GAAG;EACH,UAAU;EACV,YAAY;EACZ,YAAYA,aAAW,gBAAgB,WAAW;EACnD,CAAC;;;;;;AAOJ,MAAM,iBAAiB,WAAW,cAAc;AAEhD,AAAC,eAAuB,gBAAgB;AACxC,eAAe,cAAc"}

package/dist/components/fields/Checkbox/context.js

@@ -0,0 +1,9 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { createContext } from "react";
+
+//#region src/components/fields/Checkbox/context.ts
+const CheckboxGroupContext = createContext(null);
+
+//#endregion
+export { CheckboxGroupContext };
+//# sourceMappingURL=context.js.map

package/dist/components/fields/Checkbox/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/components/fields/Checkbox/context.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { CheckboxGroupState } from 'react-stately';\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupState | null>(\n  null,\n);\n"],"mappings":";;;;AAGA,MAAa,uBAAuB,cAClC,KACD"}

package/dist/components/fields/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+
+import { CubeCheckboxGroupProps, _CheckboxGroup } from "./CheckboxGroup.js";
+import { AriaCheckboxProps, CubeCheckboxProps, __Checkbox, useCheckbox } from "./Checkbox.js";

package/dist/components/fields/ComboBox/ComboBox.d.ts

@@ -0,0 +1,133 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { FieldBaseProps } from "../../../shared/form.js";
+import "../../../shared/index.js";
+import { _CollectionItem } from "../../CollectionItem.js";
+import React, { ForwardedRef, ReactElement, ReactNode, RefObject } from "react";
+import { Section } from "react-stately";
+import { FocusableRef, Key as Key$1 } from "@react-types/shared";
+
+//#region src/components/fields/ComboBox/ComboBox.d.ts
+type FilterFn = (textValue: string, inputValue: string) => boolean;
+type PopoverTriggerAction = 'focus' | 'input' | 'manual';
+interface CubeComboBoxProps<T> extends BasePropsWithoutChildren, BaseStyleProps, OuterStyleProps, ColorStyleProps, FieldBaseProps {
+  /** The selected key in controlled mode */
+  selectedKey?: string | null;
+  /** The default selected key in uncontrolled mode */
+  defaultSelectedKey?: string | null;
+  /** Callback fired when selection changes */
+  onSelectionChange?: (key: string | null) => void;
+  /** The input value in controlled mode */
+  inputValue?: string;
+  /** The default input value in uncontrolled mode */
+  defaultInputValue?: string;
+  /** Callback fired when input value changes */
+  onInputChange?: (value: string) => void;
+  /** Placeholder text for the input */
+  placeholder?: string;
+  /** Whether the input should have autofocus */
+  autoFocus?: boolean;
+  /** HTML autocomplete attribute for the input */
+  autoComplete?: string;
+  /** Callback fired when focus enters the component (input, trigger, or popover). Does not receive event object. */
+  onFocus?: () => void;
+  /** Callback fired when focus leaves the component entirely. Does not receive event object. */
+  onBlur?: () => void;
+  /** Callback fired when a key is pressed on the input */
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  /** Popover trigger behavior: 'focus', 'input', or 'manual'. Defaults to 'input' */
+  popoverTrigger?: PopoverTriggerAction;
+  /** Items for the listbox (alternative to children) */
+  items?: Iterable<T>;
+  /** Children for the listbox (static items or render function) */
+  children?: ReactNode | ((item: T) => ReactElement);
+  /**
+   * Custom filter function for determining if an option should be included.
+   * Pass `false` to disable internal filtering completely.
+   */
+  filter?: FilterFn | false;
+  /** Whether to allow entering custom values that are not in the predefined options */
+  allowsCustomValue?: boolean;
+  /** Whether to commit custom value on blur in allowsCustomValue mode (default: true) */
+  shouldCommitOnBlur?: boolean;
+  /** Whether to clear selection and input on blur (default: false, only applies to non-custom-value mode) */
+  clearOnBlur?: boolean;
+  /** Whether the combobox is clearable using ESC key or clear button */
+  isClearable?: boolean;
+  /** Callback called when the clear button is pressed */
+  onClear?: () => void;
+  /** Left input icon */
+  icon?: ReactElement;
+  /** Input decoration before the main input */
+  prefix?: ReactNode;
+  /** Input decoration after the main input */
+  suffix?: ReactNode;
+  /** Whether to hide the trigger button */
+  hideTrigger?: boolean;
+  /** Size of the combobox */
+  size?: 'small' | 'medium' | 'large' | (string & {});
+  /** Ref for accessing the input element */
+  inputRef?: RefObject<HTMLInputElement>;
+  /** Ref for accessing the wrapper element */
+  wrapperRef?: RefObject<HTMLDivElement>;
+  /** Ref for accessing the listbox element */
+  listBoxRef?: RefObject<HTMLDivElement>;
+  /** Ref for accessing the popover element */
+  popoverRef?: RefObject<HTMLDivElement>;
+  /** Ref for accessing the trigger button element */
+  triggerRef?: FocusableRef<HTMLButtonElement>;
+  /** Custom styles for the input */
+  inputStyles?: Styles;
+  /** Custom styles for the trigger button */
+  triggerStyles?: Styles;
+  /** Custom styles for the listbox */
+  listBoxStyles?: Styles;
+  /** Custom styles for the popover overlay */
+  overlayStyles?: Styles;
+  /** Custom styles for individual options */
+  optionStyles?: Styles;
+  /** Custom styles for sections */
+  sectionStyles?: Styles;
+  /** Custom styles for section headings */
+  headingStyles?: Styles;
+  /** Whether the combobox is disabled */
+  isDisabled?: boolean;
+  /** Whether the combobox is in loading state */
+  isLoading?: boolean;
+  /** Validation state of the combobox */
+  validationState?: 'valid' | 'invalid';
+  /** Keys of disabled items */
+  disabledKeys?: Iterable<Key$1>;
+  /** Whether to flip the popover placement */
+  shouldFlip?: boolean;
+  /** Placement direction for the popover */
+  direction?: 'bottom' | 'top';
+  /** Offset for the popover */
+  overlayOffset?: number;
+  /** Minimum padding in pixels between the popover and viewport edges */
+  containerPadding?: number;
+  /** Whether the combobox is read-only */
+  isReadOnly?: boolean;
+  /** Suffix position goes before or after the validation and loading statuses */
+  suffixPosition?: 'before' | 'after';
+  /**
+   * Sort selected item to the top when the popover opens.
+   * Only works when using the `items` prop (data-driven mode).
+   * Ignored when using JSX children.
+   * @default true when items are provided, false when using JSX children
+   */
+  sortSelectedToTop?: boolean;
+  /** Callback called when the popover open state changes */
+  onOpenChange?: (isOpen: boolean) => void;
+}
+declare const ComboBox: (<T>(props: CubeComboBoxProps<T> & {
+  ref?: ForwardedRef<HTMLDivElement>;
+}) => ReactElement) & {
+  Item: typeof _CollectionItem;
+  Section: typeof Section;
+};
+//#endregion
+export { ComboBox, CubeComboBoxProps };
+//# sourceMappingURL=ComboBox.d.ts.map