@preply/ds-web-lib 10.0.0 → 11.1.0

package/dist/components/CalloutBanner/primitives/CalloutBannerRoot.js

@@ -1,30 +1,56 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { t as require_jsx_runtime } from "../../../jsx-runtime-i4KUlhDu.js";
+import { t as index_module_default } from "../../../index.module-1c7ENvxc.js";
 import { createContext, forwardRef } from "react";
 import { getDatasetProps } from "@preply/ds-web-core";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { s as styles } from "../../../index.module-Q9TzIR6B.js";
-const CalloutBannerContext = createContext({
-  variant: "neutral",
-  size: "regular"
+//#region src/components/CalloutBanner/primitives/CalloutBannerRoot.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var CalloutBannerContext = createContext({
+	variant: "neutral",
+	size: "regular"
 });
-const CalloutBannerRoot = forwardRef(function CalloutBannerRoot2({
-  variant = "neutral",
-  size = "regular",
-  children,
-  dataset,
-  className = "",
-  ...props
-}, ref) {
-  const classNames = [styles.banner, className].join(" ");
-  return /* @__PURE__ */ jsx(CalloutBannerContext.Provider, { value: {
-    variant,
-    size
-  }, children: /* @__PURE__ */ jsx("div", { ref, role: "note", className: classNames, ...getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.CalloutBanner
-  }), "data-variant": variant, "data-size": size, ...props, children }) });
+/**
+* The root primitive for the callout banner.
+*
+* This component is used to create a custom callout banner; it accepts a
+* `className prop to override the default styles for the callout banner
+* container. The `variant` prop is exposed as a data attribute on the root
+* element to aid in styling.
+*
+* You can use the other `CalloutBanner*` subcomponents as you normally would
+* with the `CalloutBanner` component.
+*
+* @example
+* // Custom callout banner with style override class name
+* <CalloutBannerRoot className={customStyles.pinkBanner}>
+*   {children}
+* </CalloutBannerRoot>
+*
+* @example
+* // CSS
+* .pinkBanner[data-variant='neutral'] {
+*   background-color: hotpink;
+* }
+*/
+var CalloutBannerRoot = forwardRef(function CalloutBannerRoot({ variant = "neutral", size = "regular", children, dataset, className = "", ...props }, ref) {
+	const classNames = [index_module_default.banner, className].join(" ");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalloutBannerContext.Provider, {
+		value: {
+			variant,
+			size
+		},
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			ref,
+			role: "note",
+			className: classNames,
+			...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.CalloutBanner }),
+			"data-variant": variant,
+			"data-size": size,
+			...props,
+			children
+		})
+	});
 });
-export {
-  CalloutBannerContext,
-  CalloutBannerRoot
-};
+//#endregion
+export { CalloutBannerContext, CalloutBannerRoot };

package/dist/components/CalloutBanner/primitives/CalloutBannerText.js

@@ -1,14 +1,44 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useContext } from "react";
-import { Text } from "../../Text/Text.js";
+import { t as require_jsx_runtime } from "../../../jsx-runtime-i4KUlhDu.js";
+import { t as Text } from "../../../Text-CaOF75Z-.js";
 import { CalloutBannerContext } from "./CalloutBannerRoot.js";
-const CalloutBannerText = forwardRef(function CalloutBannerText2(props, ref) {
-  const {
-    size
-  } = useContext(CalloutBannerContext);
-  return /* @__PURE__ */ jsx(Text, { ref, variant: size === "small" ? "small-regular" : "default-regular", ...props });
+import { forwardRef, useContext } from "react";
+//#region src/components/CalloutBanner/primitives/CalloutBannerText.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* A `Text` component alias for the callout banner that is context-aware,
+* adjusting its own `variant` based on the parent `CalloutBanner`'s `size`.
+*
+* @example
+* <CalloutBannerText>
+*   Callout banner message goes here.
+* </CalloutBannerText>
+*
+* @example
+* // Set `Text` props
+* <CalloutBannerText tag="span">
+*   Callout banner message goes here.
+* </CalloutBannerText>
+*
+* @example
+* // Override `Text` `variant` prop
+* <CalloutBannerText variant="default-semibold">
+*   Callout banner message goes here.
+* </CalloutBannerText>
+*
+* @example
+* // Override styles via `className` prop
+* <CalloutBannerText className={myCustomStyles.text}>
+*   Callout banner message goes here.
+* </CalloutBannerText>
+*/
+var CalloutBannerText = forwardRef(function CalloutBannerText(props, ref) {
+	const { size } = useContext(CalloutBannerContext);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+		ref,
+		variant: size === "small" ? "small-regular" : "default-regular",
+		...props
+	});
 });
-export {
-  CalloutBannerText
-};
+//#endregion
+export { CalloutBannerText };

package/dist/components/Checkbox/Checkbox.js

@@ -1,78 +1,4 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { forwardRef } from "react";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { moduleClassNames, stringClassNames, getDatasetProps } from "@preply/ds-web-core";
-import { renderIcon } from "../../utils/render-icon.js";
-import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
-import { useIndeterminate } from "./hooks/useIndeterminate.js";
-import '../../assets/Checkbox.css';const SvgRemove = ({
-  title,
-  titleId,
-  ...props
-}, ref) => /* @__PURE__ */ React.createElement("svg", { "data-preply-ds-component": "SvgTokyoUIIcon", viewBox: "0 0 14 2", xmlns: "http://www.w3.org/2000/svg", ref, "aria-labelledby": titleId, ...props }, title ? /* @__PURE__ */ React.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement("path", { d: "M0 0h14v2H0z" }));
-const ForwardRef$1 = forwardRef(SvgRemove);
-const SvgCheckmark = ({
-  title,
-  titleId,
-  ...props
-}, ref) => /* @__PURE__ */ React.createElement("svg", { "data-preply-ds-component": "SvgTokyoUIIcon", viewBox: "0 0 13 11", xmlns: "http://www.w3.org/2000/svg", ref, "aria-labelledby": titleId, ...props }, title ? /* @__PURE__ */ React.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.923 10.101 0 6.18 1.179 5l2.744 2.744L11.667 0l1.178 1.179z" }));
-const ForwardRef = forwardRef(SvgCheckmark);
-const checkbox = "checkbox__KtCna";
-const remove = "remove__GrRcv";
-const checkmark = "checkmark__ha-Nu";
-const styles = {
-  checkbox,
-  remove,
-  checkmark,
-  "checkbox--dsInternalSimulation-focus": "checkbox--dsInternalSimulation-focus__NqNUT"
-};
-const Checkbox = forwardRef(function Checkbox2({
-  id,
-  name,
-  checked,
-  defaultChecked,
-  indeterminate,
-  onChange,
-  onCheckedChange,
-  hasError,
-  disabled,
-  required,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  "aria-describedby": ariaDescribedby,
-  dataset,
-  dsInternalSimulation,
-  onBlur,
-  onFocus,
-  ...restPropsPassedByRadixUI
-}, ref) {
-  const {
-    mergedRef,
-    onChangeHandler,
-    ariaChecked
-  } = useIndeterminate({
-    ref,
-    onChange,
-    indeterminate,
-    onCheckedChange
-  });
-  const classNames = moduleClassNames(styles, "checkbox", [stringClassNames(`dsInternalSimulation`, dsInternalSimulation)]);
-  return /* @__PURE__ */ jsxs("div", { ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI), className: classNames.join(" "), "data-preply-ds-component": webComponentNames.Checkbox, children: [
-    /* @__PURE__ */ jsx("input", { id, name, type: "checkbox", required, disabled, checked, defaultChecked, "aria-checked": ariaChecked, "aria-invalid": hasError === true ? true : void 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, onChange: onChangeHandler, ref: mergedRef, onBlur, onFocus, ...getDatasetProps(dataset) }),
-    renderIcon(ForwardRef, {
-      focusable: "false",
-      "aria-hidden": "true",
-      className: styles.checkmark
-    }),
-    renderIcon(ForwardRef$1, {
-      focusable: "false",
-      "aria-hidden": "true",
-      className: styles.remove
-    })
-  ] });
-});
-export {
-  Checkbox
-};
+import "../../render-icon-Ch3b2dE0.js";
+import "../../jsx-runtime-i4KUlhDu.js";
+import { t as Checkbox } from "../../Checkbox-CtolNbxI.js";
+export { Checkbox };

package/dist/components/Checkbox/hooks/useIndeterminate.js

@@ -1,33 +1,27 @@
 "use client";
-import { useRef, useLayoutEffect, useCallback } from "react";
 import { useMergeRefs } from "../../../utils/useMergeRefs.js";
-function useIndeterminate({
-  ref,
-  onChange,
-  indeterminate,
-  onCheckedChange
-}) {
-  const checkboxRef = useRef(null);
-  const mergedRef = useMergeRefs(checkboxRef, ref);
-  useLayoutEffect(() => {
-    if (checkboxRef.current && typeof indeterminate === "boolean") {
-      checkboxRef.current.indeterminate = indeterminate;
-    }
-  }, [indeterminate]);
-  const onChangeHandler = useCallback((event) => {
-    onChange == null ? void 0 : onChange(event);
-    if (typeof indeterminate === "boolean") {
-      event.target.indeterminate = indeterminate;
-    }
-    onCheckedChange == null ? void 0 : onCheckedChange(event.target.checked);
-  }, [onChange, indeterminate, onCheckedChange]);
-  const ariaChecked = indeterminate ? "mixed" : void 0;
-  return {
-    mergedRef,
-    ariaChecked,
-    onChangeHandler
-  };
+import { useCallback, useLayoutEffect, useRef } from "react";
+//#region src/components/Checkbox/hooks/useIndeterminate.ts
+function useIndeterminate({ ref, onChange, indeterminate, onCheckedChange }) {
+	const checkboxRef = useRef(null);
+	const mergedRef = useMergeRefs(checkboxRef, ref);
+	useLayoutEffect(() => {
+		if (checkboxRef.current && typeof indeterminate === "boolean") checkboxRef.current.indeterminate = indeterminate;
+	}, [indeterminate]);
+	const onChangeHandler = useCallback((event) => {
+		onChange === null || onChange === void 0 || onChange(event);
+		if (typeof indeterminate === "boolean") event.target.indeterminate = indeterminate;
+		onCheckedChange === null || onCheckedChange === void 0 || onCheckedChange(event.target.checked);
+	}, [
+		onChange,
+		indeterminate,
+		onCheckedChange
+	]);
+	return {
+		mergedRef,
+		ariaChecked: indeterminate ? "mixed" : void 0,
+		onChangeHandler
+	};
 }
-export {
-  useIndeterminate
-};
+//#endregion
+export { useIndeterminate };

package/dist/components/Chips/Chips.types.js

@@ -1 +0,0 @@
-

package/dist/components/Chips/DismissibleChips.js

@@ -1,92 +1,123 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useControllableState } from "../../utils/useControllableState/useControllableState.js";
-import { C as ChipsRoot, a as ChipsList, $ as $9bf71ea28793e738$export$10c5169755ce7bd7, b as ChipListItem, c as ChipButton, d as ChipLabel } from "../../ChipsPrimitive-DzsaOWgY.js";
-import CloseSvg from "@preply/ds-media-icons/dist/24/TokyoUIClose.svg";
-import { VisuallyHidden } from "../private/VisuallyHidden/VisuallyHidden.js";
-import { FormattedMessage } from "react-intl";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
+import { t as Icon } from "../../Icon-CixAeOSd.js";
+import "../../render-icon-Ch3b2dE0.js";
+import { t as require_jsx_runtime } from "../../jsx-runtime-i4KUlhDu.js";
+import { t as VisuallyHidden } from "../../VisuallyHidden-CtcHcZCK.js";
 import { genericAriaLabels } from "../../utils/shared-strings.js";
+import { useControllableState } from "../../utils/useControllableState/useControllableState.js";
+import { a as ChipsList, c as $9bf71ea28793e738$export$10c5169755ce7bd7, i as ChipListItem, o as ChipsRoot, r as ChipLabel, t as ChipButton } from "../../ChipsPrimitive-Bezq7ptE.js";
+import { createRequiredContext } from "../../utils/createRequiredContext.js";
+import { forwardRef } from "react";
 import { getDatasetProps } from "@preply/ds-web-core";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
-import { Icon } from "../Icon/Icon.js";
-import { createRequiredContext } from "../../utils/createRequiredContext.js";
-const [Provider, useDismissibleChipsContext] = createRequiredContext("DismissibleChips");
-const DismissibleChips = forwardRef(function DismissibleChips2({
-  items,
-  children,
-  orientation,
-  "aria-label": ariaLabel,
-  "aria-controls": ariaControls,
-  value: valueProp,
-  onValueChange: onValueChangeProp,
-  defaultValue,
-  dataset,
-  ...restPropsPassedByRadixUI
-}, ref) {
-  const [values, onValueChange] = useControllableState({
-    value: valueProp,
-    onValueChange: onValueChangeProp,
-    defaultValue: defaultValue != null ? defaultValue : []
-  });
-  const onRemove = (value) => {
-    onValueChange(values.filter((v) => v !== value));
-  };
-  const content = items ? items.map(({
-    label,
-    value,
-    ...props
-  }) => /* @__PURE__ */ jsx(DismissibleChipsItem, { value, ...props, children: label }, value)) : children;
-  return /* @__PURE__ */ jsx(Provider, { value: {
-    values,
-    onRemove,
-    ariaControls
-  }, children: /* @__PURE__ */ jsx(ChipsRoot, { orientation, children: /* @__PURE__ */ jsx(ChipsList, { ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI), ref, orientation, "aria-label": ariaLabel, ...getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.DismissibleChips
-  }), children: content }) }) });
+import { FormattedMessage } from "react-intl";
+import CloseSvg from "@preply/ds-media-icons/dist/24/TokyoUIClose.svg";
+//#region src/components/Chips/DismissibleChips.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var [Provider, useDismissibleChipsContext] = createRequiredContext("DismissibleChips");
+/**
+* A chips component for displaying dismissible/removable items.
+*
+* @remarks
+* **Keyboard interactions:**
+* - **Tab** to enter/exit the component (uses [roving tabindex pattern](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex))
+* - **Arrow keys** to navigate between chips within the group
+* - **Space/Enter** to remove the focused chip
+* - **Delete/Backspace** to remove the focused chip
+*
+* @example
+* ```tsx
+* <DismissibleChips
+*   aria-label="Selected skills"
+*   defaultValue={['vocabulary', 'speaking', 'listening']}
+* >
+*   <DismissibleChipsItem value="vocabulary">Vocabulary</DismissibleChipsItem>
+*   <DismissibleChipsItem value="speaking">Speaking</DismissibleChipsItem>
+*   <DismissibleChipsItem value="listening">Listening</DismissibleChipsItem>
+* </DismissibleChips>
+* ```
+*/
+var DismissibleChips = forwardRef(function DismissibleChips({ items, children, orientation, "aria-label": ariaLabel, "aria-controls": ariaControls, value: valueProp, onValueChange: onValueChangeProp, defaultValue, dataset, ...restPropsPassedByRadixUI }, ref) {
+	const [values, onValueChange] = useControllableState({
+		value: valueProp,
+		onValueChange: onValueChangeProp,
+		defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : []
+	});
+	const onRemove = (value) => {
+		onValueChange(values.filter((v) => v !== value));
+	};
+	const content = items ? items.map(({ label, value, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DismissibleChipsItem, {
+		value,
+		...props,
+		children: label
+	}, value)) : children;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, {
+		value: {
+			values,
+			onRemove,
+			ariaControls
+		},
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChipsRoot, {
+			orientation,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChipsList, {
+				...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
+				ref,
+				orientation,
+				"aria-label": ariaLabel,
+				...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.DismissibleChips }),
+				children: content
+			})
+		})
+	});
 });
-const DismissibleChipsItem = forwardRef(function DismissibleChipsItem2({
-  value,
-  children,
-  icon,
-  countryFlagCode,
-  disabled,
-  counter,
-  dataset,
-  dsInternalSimulation,
-  ...restPropsPassedByRadixUI
-}, ref) {
-  const {
-    values,
-    onRemove,
-    ariaControls
-  } = useDismissibleChipsContext();
-  const focusManager = $9bf71ea28793e738$export$10c5169755ce7bd7();
-  const handleRemove = () => {
-    onRemove(value);
-    focusManager == null ? void 0 : focusManager.focusNext({
-      wrap: true
-    });
-  };
-  const handleKeyDown = (e) => {
-    switch (e.key) {
-      case "Delete":
-      case "Backspace":
-        handleRemove();
-        break;
-    }
-  };
-  if (!values.includes(value)) return null;
-  return /* @__PURE__ */ jsx(ChipListItem, { children: /* @__PURE__ */ jsxs(ChipButton, { ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI), ref, variant: "dismissible", onClick: handleRemove, onKeyDown: handleKeyDown, icon, countryFlagCode, disabled, "aria-controls": ariaControls, dsInternalSimulation, ...getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.DismissibleChipsItem
-  }), children: [
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(FormattedMessage, { ...genericAriaLabels.remove }) }),
-    /* @__PURE__ */ jsx(ChipLabel, { counter, children }),
-    /* @__PURE__ */ jsx(Icon, { svg: CloseSvg })
-  ] }) });
+/**
+* Individual dismissible chip item for use within DismissibleChips.
+*
+* @example
+* ```tsx
+* <DismissibleChipsItem value="english">
+*   English
+* </DismissibleChipsItem>
+* ```
+*/
+var DismissibleChipsItem = forwardRef(function DismissibleChipsItem({ value, children, icon, countryFlagCode, disabled, counter, dataset, dsInternalSimulation, ...restPropsPassedByRadixUI }, ref) {
+	const { values, onRemove, ariaControls } = useDismissibleChipsContext();
+	const focusManager = $9bf71ea28793e738$export$10c5169755ce7bd7();
+	const handleRemove = () => {
+		onRemove(value);
+		focusManager === null || focusManager === void 0 || focusManager.focusNext({ wrap: true });
+	};
+	const handleKeyDown = (e) => {
+		switch (e.key) {
+			case "Delete":
+			case "Backspace":
+				handleRemove();
+				break;
+		}
+	};
+	if (!values.includes(value)) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChipListItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ChipButton, {
+		...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
+		ref,
+		variant: "dismissible",
+		onClick: handleRemove,
+		onKeyDown: handleKeyDown,
+		icon,
+		countryFlagCode,
+		disabled,
+		"aria-controls": ariaControls,
+		dsInternalSimulation,
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.DismissibleChipsItem }),
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedMessage, { ...genericAriaLabels.remove }) }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChipLabel, {
+				counter,
+				children
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { svg: CloseSvg })
+		]
+	}) });
 });
-export {
-  DismissibleChips,
-  DismissibleChipsItem
-};
+//#endregion
+export { DismissibleChips, DismissibleChipsItem };