@persona/design-system 0.1.5-pre.4

package/dist/components/FormField/index.mjs

@@ -0,0 +1,367 @@
+import { t as HStack } from "../../Stack-hwgS2FU1.mjs";
+import "../Stack/index.mjs";
+import { t as IconButton } from "../../IconButton-C28qxOdi.mjs";
+import "../Button/index.mjs";
+import { n as useFormGroup } from "../../useFormGroup-BMukAMAd.mjs";
+import { t as FormControlContext } from "../../useFormField-eftOPiXj.mjs";
+import { s as MenuItem } from "../../Menu-DNRHo2i_.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-BTk--LWo.mjs";
+import "../DropdownMenu/index.mjs";
+import { t as Checkbox } from "../../Checkbox-C5bGcb-r.mjs";
+import Input_default from "../Input/index.mjs";
+import "../Menu/index.mjs";
+import { t as Combobox } from "../../Combobox-B_-swcix.mjs";
+import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText } from "../../FormControl-BXHqI_2D.mjs";
+import { t as RadioGroup } from "../../RadioGroup-B8htTzsS.mjs";
+import { t as SegmentedControl } from "../../SegmentedControl-DnwNjYre.mjs";
+import { n as Select } from "../../Select-Cl3AOq0-.mjs";
+import { t as TextAreaWithStyle } from "../../TextArea-B1kitxCl.mjs";
+import { t as Toggle } from "../../Toggle-8GNRxyvE.mjs";
+import { t as ListBox } from "../../ListBox-Z1y0LG1H.mjs";
+import { Spacing } from "@persona/design-tokens";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, createContext, forwardRef, useContext, useMemo, useRef, useState } from "react";
+import { MoreIcon, PlusIcon } from "@persona/icons";
+import { uniqueId } from "lodash/fp.js";
+import { mergeProps, useCheckboxGroup, useCheckboxGroupItem } from "react-aria";
+import { useCheckboxGroupState } from "react-stately";
+import innerText from "react-innertext";
+//#region components/FormField/FormField.tsx
+/**
+* > **Please do not use in production! This component is subject to API and style changes.**
+*
+* Helper components with preset slots for label, input, and helper texts.
+* Fully composed components with different form input types are available.
+* This is the recommended way to implement form elements.
+* You can use `<FormControl>` if you require more flexibility.
+*
+* ## Usage
+*
+* ```tsx
+* import FormField from 'design-system/components/FormField';
+* ```
+*/
+const FormField = forwardRef(function FormField({ label, children, helperText, warningText, errorText, labelProps, helperProps, warningProps, errorProps, configField: configFieldProp, configFieldInputWidth, rightActions, ...props }, ref) {
+	const { configField: configFieldFormGroup } = useFormGroup();
+	const configField = configFieldProp ?? configFieldFormGroup;
+	const labelElement = label ? /* @__PURE__ */ jsx(FormLabel, {
+		tooltip: configField && helperText ? helperText : void 0,
+		...labelProps,
+		children: label
+	}) : null;
+	return /* @__PURE__ */ jsxs(FormControl, {
+		hasError: !!errorText,
+		hasWarning: !!warningText,
+		ref,
+		configField,
+		hasRightActions: !!rightActions,
+		configFieldInputWidth,
+		...props,
+		children: [
+			rightActions ? /* @__PURE__ */ jsxs(HStack, {
+				justify: "space-between",
+				align: "center",
+				children: [labelElement, /* @__PURE__ */ jsx(HStack, {
+					spacing: Spacing[1],
+					children: rightActions
+				})]
+			}) : labelElement,
+			/* @__PURE__ */ jsx(FormInputContainer, { children }),
+			!configField && helperText && /* @__PURE__ */ jsx(HelperText, {
+				...helperProps,
+				children: helperText
+			}),
+			!configField && warningText && /* @__PURE__ */ jsx(WarningText, {
+				...warningProps,
+				children: warningText
+			}),
+			!configField && errorText && /* @__PURE__ */ jsx(ErrorText, {
+				...errorProps,
+				children: errorText
+			})
+		]
+	});
+});
+//#endregion
+//#region components/FormField/inputFields.tsx
+/**
+* Helper to split out props that are sent to the FormField component from props sent
+* to the underlying input component.
+*/
+const splitOutFormFieldProps = (props) => {
+	const { label, inputId, helperText, errorText, warningText, labelProps, helperProps, warningProps, errorProps, configField, configFieldInputWidth, rightActions, ...inputProps } = props;
+	return {
+		formFieldProps: {
+			label,
+			inputId,
+			helperText,
+			errorText,
+			warningText,
+			labelProps,
+			helperProps,
+			warningProps,
+			errorProps,
+			configField,
+			configFieldInputWidth,
+			rightActions
+		},
+		inputProps
+	};
+};
+const TextField = forwardRef(function TextField(props, ref) {
+	const { formFieldProps, inputProps } = splitOutFormFieldProps(props);
+	const { id, ...rest } = inputProps;
+	return /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		labelProps: {
+			size: props.size,
+			...formFieldProps.labelProps
+		},
+		inputId: formFieldProps.inputId ?? id,
+		children: /* @__PURE__ */ jsx(Input_default, {
+			...rest,
+			ref
+		})
+	});
+});
+const TextAreaField = forwardRef(function TextAreaField({ label, helperText, errorText, warningText, inputId, id, configField, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FormField, {
+		inputId: inputId ?? id,
+		label,
+		labelProps: { size: props.size },
+		helperText,
+		warningText,
+		errorText,
+		configField,
+		children: /* @__PURE__ */ jsx(TextAreaWithStyle, {
+			...props,
+			ref
+		})
+	});
+});
+const SelectField = ({ id, label, helperText, errorText, warningText, children, configField, labelProps, ...props }) => {
+	const linkedId = useMemo(() => id ?? uniqueId("pds-form-field-input-fields-select__"), [id]);
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		labelProps: {
+			htmlFor: linkedId,
+			size: props.size,
+			...labelProps
+		},
+		helperText,
+		warningText,
+		errorText,
+		configField,
+		children: /* @__PURE__ */ jsx(Select, {
+			...props,
+			id: linkedId,
+			children
+		})
+	});
+};
+const RadioGroupField = ({ label, helperText, errorText, warningText, children, ...props }) => {
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		helperText,
+		warningText,
+		errorText,
+		children: /* @__PURE__ */ jsx(RadioGroup, {
+			...props,
+			children
+		})
+	});
+};
+const CheckboxField = ({ label, helperText, errorText, warningText, checkboxLabel, configField, labelProps, ...props }) => {
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		helperText,
+		warningText,
+		errorText,
+		configField,
+		labelProps,
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			label: checkboxLabel,
+			...props
+		})
+	});
+};
+const ToggleField = forwardRef(function ToggleField({ label, helperText, errorText, warningText, configField, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		labelProps: { size: props.size },
+		helperText,
+		warningText,
+		errorText,
+		configField,
+		children: /* @__PURE__ */ jsx(Toggle, {
+			...props,
+			ref
+		})
+	});
+});
+const SegmentedControlField = forwardRef(function SegmentedControlField({ label, helperText, errorText, warningText, configField, children, labelProps, ...props }, ref) {
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		helperText,
+		warningText,
+		errorText,
+		configField,
+		labelProps,
+		children: /* @__PURE__ */ jsx(SegmentedControl, {
+			fullWidth: true,
+			...props,
+			ref,
+			children
+		})
+	});
+});
+const ComboboxField = ({ label, labelProps, helperText, errorText, warningText, configField, ...props }) => {
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		labelProps,
+		helperText,
+		warningText,
+		errorText,
+		configField,
+		children: /* @__PURE__ */ jsx(Combobox, { ...props })
+	});
+};
+//#endregion
+//#region components/FormField/CheckboxGroupField.tsx
+const CheckboxGroupContext = createContext(null);
+/** Preserves the parent FormControl context (disabled, hasError, etc.) but clears
+*  inputId so each Checkbox inside the group generates its own unique id. */
+const ClearGroupInputId = ({ children }) => {
+	const parentContext = useContext(FormControlContext);
+	return /* @__PURE__ */ jsx(FormControlContext.Provider, {
+		value: {
+			...parentContext,
+			inputId: void 0
+		},
+		children
+	});
+};
+const CheckboxGroupItem = (props) => {
+	const { children } = props;
+	const checkboxProps = children.props;
+	const state = useContext(CheckboxGroupContext);
+	const ref = useRef();
+	const { inputProps } = useCheckboxGroupItem({
+		...checkboxProps,
+		onChange: void 0,
+		isDisabled: checkboxProps.disabled,
+		isReadOnly: checkboxProps.readOnly,
+		isRequired: checkboxProps.required,
+		isIndeterminate: checkboxProps.indeterminate,
+		value: String(children.props.value),
+		"aria-label": innerText(checkboxProps.label)
+	}, state, ref);
+	return cloneElement(children, mergeProps(inputProps, {
+		onChange: checkboxProps.onChange,
+		disabled: state.isDisabled || checkboxProps.disabled,
+		checked: state.isSelected(String(inputProps.value)),
+		ref
+	}));
+};
+const CheckboxGroupField = ({ children, name, onChange, disabled, readOnly, required, ...props }) => {
+	const reactAriaProps = {
+		...props,
+		description: props.helperText,
+		errorMessage: props.errorText,
+		onChange,
+		name,
+		isDisabled: disabled,
+		isReadOnly: readOnly,
+		isRequired: required
+	};
+	const state = useCheckboxGroupState(reactAriaProps);
+	const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(reactAriaProps, state);
+	return /* @__PURE__ */ jsx(FormField, {
+		labelProps,
+		helperProps: descriptionProps,
+		errorProps: errorMessageProps,
+		disabled,
+		...groupProps,
+		...props,
+		children: /* @__PURE__ */ jsx(ClearGroupInputId, { children: /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
+			value: state,
+			children: Children.map(children, (checkbox) => /* @__PURE__ */ jsx(CheckboxGroupItem, { children: checkbox }))
+		}) })
+	});
+};
+//#endregion
+//#region components/FormField/ListBoxField.tsx
+const ListBoxField = ({ label, helperText, errorText, warningText, labelProps, helperProps, errorProps, warningProps, inputId, onAdd, onDelete, deleteDisabled, configField: configFieldProp, size = "md", actions = [], addDropdownConfig, selectedKeys: selectedKeysProp, onSelectionChange, defaultSelectedKeys, ...props }) => {
+	const { configField } = useFormGroup({ configField: configFieldProp });
+	const menuActions = [...actions];
+	const [selectedKeysState, setSelectedKeys] = useState(defaultSelectedKeys);
+	const selectedKeys = selectedKeysProp ?? selectedKeysState;
+	const effectiveSize = configField ? "sm" : size;
+	if (onDelete) menuActions.unshift({
+		label: "Delete",
+		onClick: () => onDelete(selectedKeys),
+		disabled: deleteDisabled || selectedKeys == null || typeof selectedKeys === "object" && [...selectedKeys].length === 0
+	});
+	const addButton = /* @__PURE__ */ jsx(IconButton, {
+		size: "sm",
+		onClick: onAdd,
+		"aria-label": "Add item to list",
+		children: /* @__PURE__ */ jsx(PlusIcon, {})
+	});
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		helperText,
+		errorText,
+		warningText,
+		labelProps,
+		helperProps,
+		errorProps,
+		warningProps,
+		inputId,
+		configField,
+		rightActions: configField && /* @__PURE__ */ jsxs(Fragment, { children: [
+			menuActions.length > 0 && /* @__PURE__ */ jsx(DropdownMenu_default, {
+				trigger: /* @__PURE__ */ jsx(IconButton, {
+					"aria-label": "Actions",
+					size: "sm",
+					children: /* @__PURE__ */ jsx(MoreIcon, {})
+				}),
+				portal: true,
+				children: menuActions.map((action) => /* @__PURE__ */ jsx(MenuItem, {
+					...action,
+					onClick: () => action.onClick(selectedKeys),
+					size: effectiveSize,
+					children: action.label
+				}, action.label))
+			}),
+			onAdd && !addDropdownConfig && addButton,
+			addDropdownConfig && /* @__PURE__ */ jsx(DropdownMenu_default, {
+				trigger: addButton,
+				align: "start",
+				portal: true,
+				children: addDropdownConfig.options.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+					...option,
+					onClick: () => addDropdownConfig.onSelection(option.value),
+					size: effectiveSize,
+					children: option.label
+				}, option.value))
+			})
+		] }),
+		children: /* @__PURE__ */ jsx(ListBox, {
+			id: inputId,
+			fullWidth: configField,
+			size: effectiveSize,
+			deleteDisabled,
+			selectedKeys,
+			onSelectionChange: (keys) => {
+				onSelectionChange?.(keys);
+				setSelectedKeys(keys);
+			},
+			...props
+		})
+	});
+};
+//#endregion
+export { CheckboxField, CheckboxGroupField, ComboboxField, FormField, FormField as default, ListBoxField, RadioGroupField, SegmentedControlField, SelectField, TextAreaField, TextField, ToggleField, splitOutFormFieldProps };
+
+//# sourceMappingURL=index.mjs.map

package/dist/components/FormField/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Input","TextArea","DropdownMenu"],"sources":["../../../components/FormField/FormField.tsx","../../../components/FormField/inputFields.tsx","../../../components/FormField/CheckboxGroupField.tsx","../../../components/FormField/ListBoxField.tsx"],"sourcesContent":["import { Spacing } from '@persona/design-tokens';\nimport { type ComponentPropsWithRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport FormControl, {\n  ErrorText,\n  type FormControlProps,\n  FormInputContainer,\n  FormLabel,\n  HelperText,\n  WarningText,\n} from 'design-system/components/FormControl';\nimport { HStack } from 'design-system/components/Stack';\n\nexport interface FormFieldBaseProps {\n  /**\n   * Renders `<Label>` above input\n   */\n  label?: ReactNode;\n\n  /**\n   * ID of the input element. Providing this will automatically link the label to the input.\n   */\n  inputId?: string;\n\n  /**\n   * Renders `<HelperText>` below input\n   */\n  helperText?: ReactNode;\n\n  /**\n   * Renders `<ErrorText>` below input and helper text.\n   */\n  errorText?: ReactNode;\n\n  /**\n   * Renders `<WarningText>` below input and helper text.\n   */\n  warningText?: ReactNode;\n\n  /**\n   * Should be an input of some sort\n   */\n  children?: ReactElement;\n\n  labelProps?: ComponentPropsWithRef<typeof FormLabel>;\n  helperProps?: ComponentPropsWithRef<typeof HelperText>;\n  warningProps?: ComponentPropsWithRef<typeof WarningText>;\n  errorProps?: ComponentPropsWithRef<typeof ErrorText>;\n\n  /**\n   * Whether to render the form field as a config field.\n   * This will render the helper text as a tooltip.\n   */\n  configField?: boolean;\n\n  /**\n   * Override the width of the input area when `configField` is true.\n   * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).\n   * Defaults to `'50%'`.\n   */\n  configFieldInputWidth?: string;\n\n  /**\n   * Renders actions to the right of the label.\n   */\n  rightActions?: ReactNode;\n}\n\nexport interface FormFieldProps extends Omit<FormControlProps, 'children'>, FormFieldBaseProps {}\n\n/**\n * > **Please do not use in production! This component is subject to API and style changes.**\n *\n * Helper components with preset slots for label, input, and helper texts.\n * Fully composed components with different form input types are available.\n * This is the recommended way to implement form elements.\n * You can use `<FormControl>` if you require more flexibility.\n *\n * ## Usage\n *\n * ```tsx\n * import FormField from 'design-system/components/FormField';\n * ```\n */\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    label,\n    children,\n    helperText,\n    warningText,\n    errorText,\n    labelProps,\n    helperProps,\n    warningProps,\n    errorProps,\n    configField: configFieldProp,\n    configFieldInputWidth,\n    rightActions,\n    ...props\n  }: FormFieldProps,\n  ref,\n) {\n  const { configField: configFieldFormGroup } = useFormGroup();\n  const configField = configFieldProp ?? configFieldFormGroup;\n\n  const labelElement = label ? (\n    <FormLabel tooltip={configField && helperText ? helperText : undefined} {...labelProps}>\n      {label}\n    </FormLabel>\n  ) : null;\n\n  return (\n    <FormControl\n      hasError={!!errorText}\n      hasWarning={!!warningText}\n      ref={ref}\n      configField={configField}\n      hasRightActions={!!rightActions}\n      configFieldInputWidth={configFieldInputWidth}\n      {...props}\n    >\n      {rightActions ? (\n        <HStack justify='space-between' align='center'>\n          {labelElement}\n          <HStack spacing={Spacing[1]}>{rightActions}</HStack>\n        </HStack>\n      ) : (\n        labelElement\n      )}\n      <FormInputContainer>{children}</FormInputContainer>\n      {!configField && helperText && <HelperText {...helperProps}>{helperText}</HelperText>}\n      {!configField && warningText && <WarningText {...warningProps}>{warningText}</WarningText>}\n      {!configField && errorText && <ErrorText {...errorProps}>{errorText}</ErrorText>}\n    </FormControl>\n  );\n});\n\nexport default FormField;\n","import { uniqueId } from 'lodash/fp';\nimport { forwardRef, useMemo } from 'react';\n\nimport Checkbox, { type CheckboxProps } from 'design-system/components/Checkbox';\nimport Combobox from 'design-system/components/Combobox';\nimport type { ComboboxMultiSelectProps } from 'design-system/components/Combobox/ComboboxMultiSelect';\nimport type { ComboboxSingleSelectProps } from 'design-system/components/Combobox/ComboboxSingleSelect';\nimport FormField, { type FormFieldBaseProps } from 'design-system/components/FormField/FormField';\nimport Input, { type InputProps } from 'design-system/components/Input';\nimport RadioGroup, { type RadioGroupProps } from 'design-system/components/RadioGroup';\nimport SegmentedControl, {\n  type SegmentedControlProps,\n} from 'design-system/components/SegmentedControl';\nimport Select, { type SelectProps } from 'design-system/components/Select';\nimport TextArea, { type TextAreaProps } from 'design-system/components/TextArea';\nimport Toggle, { type ToggleProps } from 'design-system/components/Toggle';\n\nexport type ImplementsFormField = Omit<FormFieldBaseProps, 'children'>;\n\ntype ExtractFormFieldProps<T extends ImplementsFormField> = Pick<\n  T,\n  | 'label'\n  | 'inputId'\n  | 'helperText'\n  | 'errorText'\n  | 'warningText'\n  | 'labelProps'\n  | 'helperProps'\n  | 'warningProps'\n  | 'errorProps'\n  | 'configField'\n  | 'configFieldInputWidth'\n  | 'rightActions'\n>;\ntype OmitFormFieldProps<T extends ImplementsFormField> = Omit<T, keyof ExtractFormFieldProps<T>>;\n\n/**\n * Helper to split out props that are sent to the FormField component from props sent\n * to the underlying input component.\n */\nexport const splitOutFormFieldProps = <T extends ImplementsFormField>(\n  props: T,\n): {\n  formFieldProps: ExtractFormFieldProps<T>;\n  inputProps: OmitFormFieldProps<T>;\n} => {\n  const {\n    label,\n    inputId,\n    helperText,\n    errorText,\n    warningText,\n    labelProps,\n    helperProps,\n    warningProps,\n    errorProps,\n    configField,\n    configFieldInputWidth,\n    rightActions,\n    ...inputProps\n  } = props;\n\n  return {\n    formFieldProps: {\n      label,\n      inputId,\n      helperText,\n      errorText,\n      warningText,\n      labelProps,\n      helperProps,\n      warningProps,\n      errorProps,\n      configField,\n      configFieldInputWidth,\n      rightActions,\n    },\n    inputProps,\n  };\n};\n\nexport interface TextFieldProps extends ImplementsFormField, InputProps {}\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(props, ref) {\n    const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n    const { id, ...rest } = inputProps;\n\n    return (\n      <FormField\n        {...formFieldProps}\n        labelProps={{ size: props.size, ...formFieldProps.labelProps }}\n        inputId={formFieldProps.inputId ?? id}\n      >\n        <Input {...rest} ref={ref} />\n      </FormField>\n    );\n  },\n);\n\nexport interface TextAreaFieldProps extends ImplementsFormField, TextAreaProps {}\n\nexport const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(\n  function TextAreaField(\n    { label, helperText, errorText, warningText, inputId, id, configField, ...props },\n    ref,\n  ) {\n    return (\n      <FormField\n        inputId={inputId ?? id}\n        label={label}\n        labelProps={{ size: props.size }}\n        helperText={helperText}\n        warningText={warningText}\n        errorText={errorText}\n        configField={configField}\n      >\n        <TextArea {...props} ref={ref} />\n      </FormField>\n    );\n  },\n);\n\nexport interface SelectFieldProps extends ImplementsFormField, SelectProps {}\n\nexport const SelectField = ({\n  id,\n  label,\n  helperText,\n  errorText,\n  warningText,\n  children,\n  configField,\n  labelProps,\n  ...props\n}: SelectFieldProps) => {\n  const linkedId = useMemo(() => id ?? uniqueId('pds-form-field-input-fields-select__'), [id]);\n\n  return (\n    <FormField\n      label={label}\n      labelProps={{ htmlFor: linkedId, size: props.size, ...labelProps }}\n      helperText={helperText}\n      warningText={warningText}\n      errorText={errorText}\n      configField={configField}\n    >\n      <Select {...props} id={linkedId}>\n        {children}\n      </Select>\n    </FormField>\n  );\n};\n\nexport interface RadioGroupFieldProps\n  extends Omit<ImplementsFormField, 'configField'>, RadioGroupProps {}\n\nexport const RadioGroupField = ({\n  label,\n  helperText,\n  errorText,\n  warningText,\n  children,\n  ...props\n}: RadioGroupFieldProps) => {\n  return (\n    <FormField\n      label={label}\n      helperText={helperText}\n      warningText={warningText}\n      errorText={errorText}\n    >\n      <RadioGroup {...props}>{children}</RadioGroup>\n    </FormField>\n  );\n};\n\nexport interface CheckboxFieldProps extends ImplementsFormField, CheckboxProps {\n  checkboxLabel?: CheckboxProps['label'];\n}\n\nexport const CheckboxField = ({\n  label,\n  helperText,\n  errorText,\n  warningText,\n  checkboxLabel,\n  configField,\n  labelProps,\n  ...props\n}: CheckboxFieldProps) => {\n  return (\n    <FormField\n      label={label}\n      helperText={helperText}\n      warningText={warningText}\n      errorText={errorText}\n      configField={configField}\n      labelProps={labelProps}\n    >\n      <Checkbox label={checkboxLabel} {...props} />\n    </FormField>\n  );\n};\n\nexport interface ToggleFieldProps extends ImplementsFormField, ToggleProps {}\n\nexport const ToggleField = forwardRef<HTMLDivElement, ToggleFieldProps>(function ToggleField(\n  { label, helperText, errorText, warningText, configField, ...props },\n  ref,\n) {\n  return (\n    <FormField\n      label={label}\n      labelProps={{ size: props.size }}\n      helperText={helperText}\n      warningText={warningText}\n      errorText={errorText}\n      configField={configField}\n    >\n      <Toggle {...props} ref={ref} />\n    </FormField>\n  );\n});\n\nexport interface SegmentedControlFieldProps\n  extends ImplementsFormField, Omit<SegmentedControlProps, 'children'> {\n  children?: SegmentedControlProps['children'];\n}\n\nexport const SegmentedControlField = forwardRef<HTMLDivElement, SegmentedControlFieldProps>(\n  function SegmentedControlField(\n    { label, helperText, errorText, warningText, configField, children, labelProps, ...props },\n    ref,\n  ) {\n    return (\n      <FormField\n        label={label}\n        helperText={helperText}\n        warningText={warningText}\n        errorText={errorText}\n        configField={configField}\n        labelProps={labelProps}\n      >\n        <SegmentedControl fullWidth {...props} ref={ref}>\n          {children}\n        </SegmentedControl>\n      </FormField>\n    );\n  },\n);\n\nexport type ComboboxSingleSelectFieldProps<T = string> = ImplementsFormField &\n  ComboboxSingleSelectProps<T>;\nexport type ComboboxMultiSelectFieldProps<T = string> = ImplementsFormField &\n  ComboboxMultiSelectProps<T>;\n\nexport const ComboboxField = ({\n  label,\n  labelProps,\n  helperText,\n  errorText,\n  warningText,\n  configField,\n  ...props\n}: ComboboxSingleSelectFieldProps | ComboboxMultiSelectFieldProps) => {\n  return (\n    <FormField\n      label={label}\n      labelProps={labelProps}\n      helperText={helperText}\n      warningText={warningText}\n      errorText={errorText}\n      configField={configField}\n    >\n      <Combobox {...props} />\n    </FormField>\n  );\n};\n","import {\n  Children,\n  cloneElement,\n  type ComponentPropsWithRef,\n  createContext,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n  useRef,\n} from 'react';\nimport {\n  type AriaCheckboxGroupProps,\n  mergeProps,\n  useCheckboxGroup,\n  useCheckboxGroupItem,\n} from 'react-aria';\nimport innerText from 'react-innertext';\nimport { type CheckboxGroupState, useCheckboxGroupState } from 'react-stately';\n\nimport type { CheckboxProps } from 'design-system/components/Checkbox';\nimport type Checkbox from 'design-system/components/Checkbox';\nimport { FormControlContext } from 'design-system/components/FormControl/useFormField';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst CheckboxGroupContext = createContext<CheckboxGroupState>(null);\n\n/** Preserves the parent FormControl context (disabled, hasError, etc.) but clears\n *  inputId so each Checkbox inside the group generates its own unique id. */\nconst ClearGroupInputId = ({ children }: { children: ReactNode }) => {\n  const parentContext = useContext(FormControlContext);\n  return (\n    <FormControlContext.Provider value={{ ...parentContext, inputId: undefined }}>\n      {children}\n    </FormControlContext.Provider>\n  );\n};\n\ninterface CheckboxGroupItemProps {\n  children: ReactElement<ComponentPropsWithRef<typeof Checkbox>>;\n}\n\nconst CheckboxGroupItem = (props: CheckboxGroupItemProps) => {\n  const { children } = props;\n  const checkboxProps = children.props;\n\n  const state = useContext(CheckboxGroupContext);\n  const ref = useRef();\n  const { inputProps } = useCheckboxGroupItem(\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    {\n      ...checkboxProps,\n      onChange: undefined,\n      isDisabled: checkboxProps.disabled,\n      isReadOnly: checkboxProps.readOnly,\n      isRequired: checkboxProps.required,\n      isIndeterminate: checkboxProps.indeterminate,\n      value: String(children.props.value),\n      'aria-label': innerText(checkboxProps.label),\n    },\n    state,\n    ref,\n  );\n\n  return cloneElement(\n    children,\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    mergeProps(inputProps, {\n      onChange: checkboxProps.onChange,\n      disabled: state.isDisabled || checkboxProps.disabled,\n      checked: state.isSelected(String(inputProps.value)),\n      ref,\n    } as ComponentPropsWithRef<typeof Checkbox>),\n  );\n};\n\ninterface CheckboxGroupFieldProps\n  extends\n    Omit<ImplementsFormField, 'configField'>,\n    Omit<\n      AriaCheckboxGroupProps,\n      'description' | 'disabled' | 'isReadOnly' | 'isRequired' | 'errorMessage'\n    > {\n  children?: ReactElement<CheckboxProps>[];\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n}\n\nconst CheckboxGroupField = ({\n  children,\n  name,\n  onChange,\n  disabled,\n  readOnly,\n  required,\n  ...props\n}: CheckboxGroupFieldProps) => {\n  const reactAriaProps = {\n    ...props,\n    description: props.helperText,\n    errorMessage: props.errorText,\n    onChange,\n    name,\n    isDisabled: disabled,\n    isReadOnly: readOnly,\n    isRequired: required,\n  };\n  const state = useCheckboxGroupState(reactAriaProps);\n  const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(\n    reactAriaProps,\n    state,\n  );\n\n  return (\n    <FormField\n      labelProps={labelProps}\n      helperProps={descriptionProps}\n      errorProps={errorMessageProps}\n      disabled={disabled}\n      {...groupProps}\n      {...props}\n    >\n      <ClearGroupInputId>\n        <CheckboxGroupContext.Provider value={state}>\n          {Children.map(children, (checkbox) => (\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            <CheckboxGroupItem>{checkbox}</CheckboxGroupItem>\n          ))}\n        </CheckboxGroupContext.Provider>\n      </ClearGroupInputId>\n    </FormField>\n  );\n};\n\nexport default CheckboxGroupField;\n","import { MoreIcon, PlusIcon } from '@persona/icons';\nimport { type ReactNode, useState } from 'react';\n\nimport { IconButton } from 'design-system/components/Button';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\nimport ListBox, { type ListBoxProps } from 'design-system/components/ListBox';\nimport { MenuItem, type MenuItemProps } from 'design-system/components/Menu';\n\ninterface ListBoxFieldAction extends Omit<MenuItemProps, 'children'> {\n  label: string;\n  onClick: (selectedKeys: ListBoxProps<any>['selectedKeys']) => void;\n}\n\ninterface AddDropdownConfig {\n  options: ({ label: ReactNode; value: string } & Omit<MenuItemProps, 'children'>)[];\n  onSelection: (value: string) => void;\n}\n\ninterface ListBoxFieldProps<T extends object> extends ImplementsFormField, ListBoxProps<T> {\n  actions?: ListBoxFieldAction[];\n  addDropdownConfig?: AddDropdownConfig;\n}\n\nconst ListBoxField = <T extends object>({\n  label,\n  helperText,\n  errorText,\n  warningText,\n  labelProps,\n  helperProps,\n  errorProps,\n  warningProps,\n  inputId,\n  onAdd,\n  onDelete,\n  deleteDisabled,\n  configField: configFieldProp,\n  size = 'md',\n  actions = [],\n  addDropdownConfig,\n  selectedKeys: selectedKeysProp,\n  onSelectionChange,\n  defaultSelectedKeys,\n  ...props\n}: ListBoxFieldProps<T>) => {\n  const { configField } = useFormGroup({ configField: configFieldProp });\n  const menuActions: ListBoxFieldAction[] = [...actions];\n  const [selectedKeysState, setSelectedKeys] = useState(defaultSelectedKeys);\n  const selectedKeys = selectedKeysProp ?? selectedKeysState;\n  const effectiveSize = configField ? 'sm' : size;\n\n  if (onDelete) {\n    menuActions.unshift({\n      label: 'Delete',\n      onClick: () => onDelete(selectedKeys),\n      disabled:\n        deleteDisabled ||\n        selectedKeys == null ||\n        (typeof selectedKeys === 'object' && [...selectedKeys].length === 0),\n    });\n  }\n\n  const addButton = (\n    <IconButton size='sm' onClick={onAdd} aria-label='Add item to list'>\n      <PlusIcon />\n    </IconButton>\n  );\n\n  return (\n    <FormField\n      label={label}\n      helperText={helperText}\n      errorText={errorText}\n      warningText={warningText}\n      labelProps={labelProps}\n      helperProps={helperProps}\n      errorProps={errorProps}\n      warningProps={warningProps}\n      inputId={inputId}\n      configField={configField}\n      rightActions={\n        configField && (\n          <>\n            {menuActions.length > 0 && (\n              <DropdownMenu\n                trigger={\n                  <IconButton aria-label='Actions' size='sm'>\n                    <MoreIcon />\n                  </IconButton>\n                }\n                portal\n              >\n                {menuActions.map((action) => (\n                  <MenuItem\n                    key={action.label}\n                    {...action}\n                    onClick={() => action.onClick(selectedKeys)}\n                    size={effectiveSize}\n                  >\n                    {action.label}\n                  </MenuItem>\n                ))}\n              </DropdownMenu>\n            )}\n            {onAdd && !addDropdownConfig && addButton}\n            {addDropdownConfig && (\n              <DropdownMenu trigger={addButton} align='start' portal>\n                {addDropdownConfig.options.map((option) => (\n                  <MenuItem\n                    key={option.value}\n                    {...option}\n                    onClick={() => addDropdownConfig.onSelection(option.value)}\n                    size={effectiveSize}\n                  >\n                    {option.label}\n                  </MenuItem>\n                ))}\n              </DropdownMenu>\n            )}\n          </>\n        )\n      }\n    >\n      <ListBox\n        id={inputId}\n        fullWidth={configField}\n        size={effectiveSize}\n        deleteDisabled={deleteDisabled}\n        // We have to control the keys so we can power the `rightActions`\n        selectedKeys={selectedKeys}\n        onSelectionChange={(keys) => {\n          onSelectionChange?.(keys);\n          setSelectedKeys(keys);\n        }}\n        {...props}\n      />\n    </FormField>\n  );\n};\n\nexport default ListBoxField;\n"],"mappings":"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"}

package/dist/components/ImageTile/index.cjs

@@ -0,0 +1,228 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_mixins_focus = require("../../mixins/focus.cjs");
+require("../../variables/transitions.cjs");
+const require_Stack = require("../../Stack-BHb3ZB2A.cjs");
+require("../Stack/index.cjs");
+const require_Text = require("../../Text-DVz8erdF.cjs");
+const require_Tooltip = require("../../Tooltip-0i_15ysU.cjs");
+const require_IconButton = require("../../IconButton-B1ZL8BqW.cjs");
+require("../Button/index.cjs");
+const require_DropdownMenu = require("../../DropdownMenu-D2fzpkX2.cjs");
+require("../DropdownMenu/index.cjs");
+const require_LoadingShimmer = require("../../LoadingShimmer-DMK9RC4N.cjs");
+const require_Checkbox = require("../../Checkbox-D4nv7eNs.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _persona_icons = require("@persona/icons");
+//#region components/ImageTile/ImageTile.tsx
+const MIN_WIDTH = "180px";
+const MAX_WIDTH = "420px";
+const OVERLAY_INSET = _persona_design_tokens.Spacing[2];
+const EMPTY_COPY = "No available preview";
+const DEFAULT_SELECTION_LABEL = "Select image";
+const ImageContainer = styled_components.default.div`
+  position: relative;
+  aspect-ratio: 200 / 144;
+  background-color: ${({ theme }) => theme.color.background.secondary};
+  overflow: hidden;
+`;
+const Thumbnail = styled_components.default.img`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: ${({ $objectFit }) => $objectFit};
+  display: block;
+  opacity: ${({ $visible }) => $visible ? 1 : 0};
+  transition: opacity ${"200ms"};
+`;
+const ImageShimmer = (0, styled_components.default)(require_LoadingShimmer.LoadingShimmer)`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+`;
+const EmptyState = styled_components.default.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${_persona_design_tokens.Spacing[1]};
+  color: ${_persona_design_tokens.Color.BorderIconDisabled};
+  padding: ${_persona_design_tokens.Spacing[3]};
+  text-align: center;
+`;
+const MetadataContainer = styled_components.default.div`
+  padding: ${_persona_design_tokens.Spacing[3]};
+  background-color: ${({ theme }) => theme.color.background.primary};
+  border-top: 1px solid ${({ theme }) => theme.color.border.primary};
+  transition: background-color ${"200ms"};
+`;
+const MetadataRow = styled_components.default.div`
+  width: 100%;
+  // Without these Stickers get bottom aligned
+  display: flex;
+  align-items: flex-start;
+`;
+const SelectionOverlay = styled_components.default.div`
+  position: absolute;
+  top: ${OVERLAY_INSET};
+  left: ${OVERLAY_INSET};
+  z-index: 1;
+`;
+const ActionsOverlay = styled_components.default.div`
+  position: absolute;
+  top: ${OVERLAY_INSET};
+  right: ${OVERLAY_INSET};
+  z-index: 1;
+`;
+const LockedOverlay = styled_components.default.div`
+  position: absolute;
+  top: ${OVERLAY_INSET};
+  right: ${OVERLAY_INSET};
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme }) => theme.color.text.secondary};
+`;
+const Root = styled_components.default.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: ${MIN_WIDTH};
+  max-width: ${MAX_WIDTH};
+  background-color: ${({ theme }) => theme.color.background.primary};
+  border: 1px solid ${({ theme }) => theme.color.border.primary};
+  border-radius: ${({ theme }) => theme.card.borderRadius};
+  box-sizing: border-box;
+  overflow: hidden;
+  ${require_mixins_focus.focusOutline};
+
+  ${({ $clickable }) => $clickable && styled_components.css`
+      cursor: pointer;
+    `}
+
+  &:hover ${MetadataContainer} {
+    background-color: ${({ theme }) => theme.color.background.highlight};
+  }
+`;
+const stopPropagation = (e) => {
+	e.stopPropagation();
+};
+const ImageTile = ({ src, alt = "", objectFit = "cover", selectable = false, selected = false, onSelectedChange, selectionLabel, actions, locked = false, lockedTooltip, metadata, onClick, ...props }) => {
+	const [loaded, setLoaded] = (0, react.useState)(false);
+	const [hasError, setHasError] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		setLoaded(false);
+		setHasError(false);
+	}, [src]);
+	const hasSrc = Boolean(src);
+	const isLoading = hasSrc && !loaded && !hasError;
+	const showEmpty = !hasSrc || hasError;
+	const visibleActions = actions?.filter((action) => !action.hidden) ?? [];
+	const renderActions = !locked && visibleActions.length > 0;
+	const clickable = Boolean(onClick);
+	const handleKeyDown = (e) => {
+		if (!onClick) return;
+		if (e.target !== e.currentTarget) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			e.currentTarget.click();
+		}
+	};
+	const accessibleSelectionLabel = selectionLabel ?? (alt ? `Select ${alt}` : DEFAULT_SELECTION_LABEL);
+	const renderMetadata = (metadata?.length ?? 0) > 0 || isLoading;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Root, {
+		$clickable: clickable,
+		onClick,
+		onKeyDown: clickable ? handleKeyDown : void 0,
+		role: clickable ? "button" : void 0,
+		tabIndex: clickable ? 0 : void 0,
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ImageContainer, { children: [
+			hasSrc && !hasError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Thumbnail, {
+				$visible: loaded,
+				$objectFit: objectFit,
+				src: src ?? void 0,
+				alt,
+				onLoad: () => setLoaded(true),
+				onError: () => setHasError(true)
+			}),
+			isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageShimmer, {}),
+			showEmpty && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(EmptyState, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ImageIcon, {
+				size: 24,
+				"aria-hidden": true
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
+				size: "sm",
+				color: "secondary",
+				as: "span",
+				children: EMPTY_COPY
+			})] }),
+			selectable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionOverlay, {
+				onClick: stopPropagation,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.Checkbox, {
+					size: "sm",
+					checked: selected,
+					onChange: (e) => onSelectedChange?.(e.target.checked),
+					"aria-label": accessibleSelectionLabel
+				})
+			}),
+			renderActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionsOverlay, {
+				onClick: stopPropagation,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
+					portal: true,
+					trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+						size: "sm",
+						"aria-label": "More actions",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.MoreIcon, {})
+					}),
+					children: visibleActions.map((action, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
+						prefixIcon: action.prefixIcon,
+						suffixIcon: action.suffixIcon,
+						disabled: action.disabled,
+						variant: action.variant === "danger" ? "danger" : "basic",
+						onClick: (e) => {
+							if (action.disabled) return;
+							return action.onClick?.(e);
+						},
+						children: action.label
+					}, action.id ?? `${action.label}-${idx}`))
+				})
+			}),
+			locked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LockedOverlay, {
+				onClick: stopPropagation,
+				children: lockedTooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+					iconTrigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.LockedIcon, { size: 16 }),
+					"aria-label": lockedTooltip,
+					children: lockedTooltip
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.LockedIcon, {
+					size: 16,
+					"aria-label": "Locked"
+				})
+			})
+		] }), renderMetadata && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetadataContainer, { children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingShimmer.LoadingShimmer, {
+			width: "60%",
+			height: "14px"
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Stack.Stack, {
+			spacing: _persona_design_tokens.Spacing[2],
+			children: metadata?.map((row, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetadataRow, { children: row }, idx))
+		}) })]
+	});
+};
+//#endregion
+exports.ImageTile = ImageTile;
+exports.default = ImageTile;
+
+//# sourceMappingURL=index.cjs.map