@salt-ds/lab 1.0.0-alpha.0

package/dist-es/packages/lab/src/pill/Pill.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n}\n\n.saltPill {\n  align-items: center;\n  background: var(--pill-background);\n  border-radius: var(--saltPill-borderRadius, 0);\n  color: var(--pill-text-color);\n  display: inline-flex;\n  font-size: var(--pill-fontSize);\n  height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  letter-spacing: var(--saltPill-letterSpacing, 0);\n  line-height: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-width: var(--saltPill-minWidth, 40px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, calc(var(--salt-size-unit) * 0.75));\n  padding-right: var(--saltPill-label-paddingRight, calc(var(--salt-size-unit) * 0.75));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-foreground);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: var(--salt-size-graphic-small);\n  margin-left: calc(var(--salt-size-unit) * 0.75);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Pill.css.js.map

package/dist-es/packages/lab/src/pill/Pill.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/pill/Pill.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ClosablePill } from './ClosablePill.js';
+import { PillBase } from './PillBase.js';
+import { SelectablePill } from './SelectablePill.js';
+import './Pill.css.js';
+
+const getVariant = (deletable, variantProp) => {
+  if (variantProp) {
+    return variantProp;
+  } else {
+    return deletable !== void 0 ? "closable" : "basic";
+  }
+};
+const Pill = forwardRef(function Pill2({ variant: variantProp, ...restProps }, ref) {
+  const variant = getVariant(restProps.deletable, variantProp);
+  if (variant === "selectable") {
+    return /* @__PURE__ */ jsx(SelectablePill, {
+      ...restProps,
+      ref
+    });
+  } else if (variant === "closable") {
+    return /* @__PURE__ */ jsx(ClosablePill, {
+      ...restProps,
+      ref
+    });
+  } else {
+    return /* @__PURE__ */ jsx(PillBase, {
+      clickable: true,
+      ...restProps,
+      ref
+    });
+  }
+});
+
+export { Pill };
+//# sourceMappingURL=Pill.js.map

package/dist-es/packages/lab/src/pill/Pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.js","sources":["../src/pill/Pill.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, ReactElement } from \"react\";\n\nimport { ClosablePill, ClosablePillProps } from \"./ClosablePill\";\nimport { PillBase, PillBaseProps } from \"./PillBase\";\nimport { SelectablePill, SelectablePillProps } from \"./SelectablePill\";\n\nimport \"./Pill.css\";\n\nexport type PillVariant = \"basic\" | \"closable\" | \"selectable\";\n\nexport interface PillVariantProps<T extends PillVariant = \"basic\"> {\n  /**\n   * Determines the variant of pill\n   */\n  variant?: T;\n}\n\n// Generic checks makes sure that incompatiable props like `onChange` can be inferred correctly when using different variants\nexport type PillProps<T extends PillVariant = \"basic\"> = T extends \"closable\"\n  ? ClosablePillProps & PillVariantProps<T>\n  : T extends \"basic\"\n  ? PillBaseProps & PillVariantProps<T>\n  : SelectablePillProps & PillVariantProps<T>;\n\nconst getVariant = (deletable?: boolean, variantProp?: PillVariant) => {\n  if (variantProp) {\n    return variantProp;\n  } else {\n    return deletable !== undefined ? \"closable\" : \"basic\";\n  }\n};\n\nexport const Pill = forwardRef(function Pill(\n  { variant: variantProp, ...restProps }: PillProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const variant = getVariant(restProps.deletable, variantProp);\n  if (variant === \"selectable\") {\n    return <SelectablePill {...(restProps as SelectablePillProps)} ref={ref} />;\n  } else if (variant === \"closable\") {\n    return <ClosablePill {...restProps} ref={ref} />;\n  } else {\n    return <PillBase clickable {...restProps} ref={ref} />;\n  }\n}) as <T extends PillVariant = \"basic\">(\n  p: PillProps<T> & { ref?: ForwardedRef<HTMLDivElement> }\n) => ReactElement<PillProps<T>>;\n"],"names":["Pill"],"mappings":";;;;;;;AAwBA,MAAM,UAAA,GAAa,CAAC,SAAA,EAAqB,WAA8B,KAAA;AACrE,EAAA,IAAI,WAAa,EAAA;AACf,IAAO,OAAA,WAAA,CAAA;AAAA,GACF,MAAA;AACL,IAAO,OAAA,SAAA,KAAc,SAAY,UAAa,GAAA,OAAA,CAAA;AAAA,GAChD;AACF,CAAA,CAAA;AAEa,MAAA,IAAA,GAAO,WAAW,SAASA,KAAAA,CACtC,EAAE,OAAS,EAAA,WAAA,EAAA,GAAgB,SAAU,EAAA,EACrC,GACA,EAAA;AACA,EAAA,MAAM,OAAU,GAAA,UAAA,CAAW,SAAU,CAAA,SAAA,EAAW,WAAW,CAAA,CAAA;AAC3D,EAAA,IAAI,YAAY,YAAc,EAAA;AAC5B,IAAA,uBAAQ,GAAA,CAAA,cAAA,EAAA;AAAA,MAAgB,GAAI,SAAA;AAAA,MAAmC,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GAC3E,MAAA,IAAW,YAAY,UAAY,EAAA;AACjC,IAAA,uBAAQ,GAAA,CAAA,YAAA,EAAA;AAAA,MAAc,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GACzC,MAAA;AACL,IAAA,uBAAQ,GAAA,CAAA,QAAA,EAAA;AAAA,MAAS,SAAS,EAAA,IAAA;AAAA,MAAE,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GACtD;AACF,CAAC;;;;"}

package/dist-es/packages/lab/src/pill/PillBase.js

@@ -0,0 +1,137 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import cx from 'classnames';
+import { forwardRef, useState, isValidElement, cloneElement, useRef } from 'react';
+import { makePrefixer, useForkRef, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import '../tooltip/Tooltip.js';
+import { useTooltipContext } from '../tooltip/TooltipContext.js';
+import { useTooltip } from '../tooltip/useTooltip.js';
+import { pillBaseName } from './constants.js';
+import { DeleteButton } from './internal/DeleteButton.js';
+import './Pill.css.js';
+import { DivButton } from './internal/DivButton.js';
+
+const useEllipsisIsActive = () => {
+  const labelRef = useRef(null);
+  const [showEllipsis, setShowEllipsis] = useState(false);
+  useIsomorphicLayoutEffect(() => {
+    if (labelRef.current) {
+      setShowEllipsis(
+        labelRef.current.offsetWidth < labelRef.current.scrollWidth
+      );
+    }
+  }, []);
+  return [labelRef, showEllipsis];
+};
+const noop = () => void 0;
+const withBaseName = makePrefixer(pillBaseName);
+const PillBase = forwardRef(function PillBase2({
+  TooltipProps: TooltipProps2 = {},
+  "aria-roledescription": ariaRoledescription = "Pill",
+  label,
+  className,
+  clickable,
+  disabled,
+  deletable,
+  deleteIcon: deleteIconProp,
+  highlighted,
+  icon,
+  onClick = noop,
+  onDelete,
+  onKeyDown = noop,
+  onKeyUp = noop,
+  ...rest
+}, ref) {
+  const { Tooltip, enterDelay, leaveDelay, placement } = useTooltipContext();
+  const [active, setActive] = useState(false);
+  const [labelRef, ellipsis] = useEllipsisIsActive();
+  const clickKeys = ["Enter", " "];
+  const pillIcon = icon && isValidElement(icon) ? cloneElement(icon, {
+    ...icon.props,
+    className: cx(withBaseName("icon"), icon.props.className)
+  }) : icon;
+  const handleKeyDown = (event) => {
+    onKeyDown(event);
+    if (!disabled && !deletable && clickKeys.indexOf(event.key) !== -1) {
+      setActive(true);
+    }
+  };
+  const handleKeyUp = (event) => {
+    onKeyUp(event);
+    setActive(false);
+  };
+  const handleClick = (event) => {
+    onClick(event);
+  };
+  const Component = deletable || clickable ? DivButton : "div";
+  const renderDeleteIcon = () => {
+    if (deleteIconProp && isValidElement(deleteIconProp)) {
+      return cloneElement(deleteIconProp, {
+        className: cx(
+          withBaseName(`deleteButton`),
+          deleteIconProp.props.className
+        ),
+        disabled,
+        onClick: onDelete
+      });
+    } else {
+      return /* @__PURE__ */ jsx(DeleteButton, {
+        disabled,
+        onClick: onDelete
+      });
+    }
+  };
+  const { getTriggerProps, getTooltipProps } = useTooltip({
+    disabled: !ellipsis && disabled,
+    enterDelay,
+    placement,
+    leaveDelay
+  });
+  const { ref: triggerRef, ...triggerProps } = getTriggerProps({
+    "aria-disabled": disabled || void 0,
+    "aria-roledescription": ariaRoledescription,
+    className: cx(
+      withBaseName(),
+      {
+        [withBaseName("clickable")]: clickable,
+        [withBaseName("deletable")]: deletable && !disabled,
+        [withBaseName("disabled")]: disabled,
+        [withBaseName("active")]: active
+      },
+      className
+    ),
+    "data-testid": "pill",
+    onKeyDown: disabled ? void 0 : handleKeyDown,
+    onKeyUp: disabled ? void 0 : handleKeyUp,
+    onClick: disabled ? void 0 : handleClick,
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    ...rest
+  });
+  const handleRef = useForkRef(triggerRef, ref);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx(Tooltip, {
+        ...getTooltipProps({ title: label, ...TooltipProps2 })
+      }),
+      /* @__PURE__ */ jsxs(Component, {
+        ref: handleRef,
+        ...triggerProps,
+        children: [
+          pillIcon || null,
+          /* @__PURE__ */ jsx("div", {
+            className: withBaseName("label"),
+            ref: labelRef,
+            children: /* @__PURE__ */ jsx("span", {
+              className: withBaseName("innerLabel"),
+              children: label
+            })
+          }),
+          deletable ? renderDeleteIcon() : null
+        ]
+      })
+    ]
+  });
+});
+
+export { PillBase };
+//# sourceMappingURL=PillBase.js.map

package/dist-es/packages/lab/src/pill/PillBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillBase.js","sources":["../src/pill/PillBase.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MutableRefObject,\n  ReactElement,\n  ReactEventHandler,\n  SyntheticEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { TooltipProps, useTooltip, useTooltipContext } from \"../tooltip\";\nimport { pillBaseName } from \"./constants\";\nimport { DeleteButton } from \"./internal/DeleteButton\";\n\nimport \"./Pill.css\";\nimport { DivButton } from \"./internal/DivButton\";\n\nconst useEllipsisIsActive = (): [\n  MutableRefObject<HTMLDivElement | null>,\n  boolean\n] => {\n  const labelRef = useRef<HTMLDivElement | null>(null);\n  const [showEllipsis, setShowEllipsis] = useState(false);\n\n  useIsomorphicLayoutEffect(() => {\n    if (labelRef.current) {\n      setShowEllipsis(\n        labelRef.current.offsetWidth < labelRef.current.scrollWidth\n      );\n    }\n  }, []);\n  return [labelRef, showEllipsis];\n};\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport interface PillBaseProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Props passed to the tooltip\n   */\n  TooltipProps?: Partial<TooltipProps>;\n  /**\n   * Defines a human-readable, author-localized description for the role of an element.\n   *\n   * This should be in favour of aria-label for `Pill`\n   **/\n  \"aria-roledescription\"?: string;\n  /**\n   * Clickable variation. Use 'onClick' for callback.\n   */\n  clickable?: boolean;\n  /**\n   * Shows delete icon. Use `onDelete` for callback.\n   */\n  deletable?: boolean;\n  /**\n   * Override the default delete icon element. Shown only if `deletable` is set.\n   */\n  // TODO: Should this be DeleteIcon (caps)?\n  deleteIcon?: ReactElement;\n  /**\n   * If `true`, the pill will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether the pill is been highlighted.\n   * If `true`, the pill will display Tooltip when text within is truncated.\n   */\n  highlighted?: boolean;\n  /**\n   * Icon element.\n   */\n  // TODO: Should this be Icon (caps)?\n  icon?: ReactElement;\n  /**\n   * The content of the label.\n   */\n  label?: string;\n  /**\n   * Callback function fired when pill is clicked.\n   */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Callback function fired when the delete icon is clicked. Used when `deletable` is true.\n   */\n  onDelete?: ReactEventHandler<HTMLElement>;\n}\n\nexport const PillBase = forwardRef(function PillBase(\n  {\n    TooltipProps = {},\n    \"aria-roledescription\": ariaRoledescription = \"Pill\",\n    label,\n    className,\n    // New API\n    clickable,\n    disabled,\n    // TODO: Should this be a prop as we have variant: 'closable'\n    // New API.\n    deletable,\n    deleteIcon: deleteIconProp,\n    // TODO: Not implemented. Consider to add `useImperativeHandle` like API to Tooltip?\n    highlighted,\n    icon,\n    onClick = noop,\n    onDelete,\n    onKeyDown = noop,\n    onKeyUp = noop,\n    ...rest\n  }: PillBaseProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const { Tooltip, enterDelay, leaveDelay, placement } = useTooltipContext();\n\n  const [active, setActive] = useState(false);\n  const [labelRef, ellipsis] = useEllipsisIsActive();\n  const clickKeys = [\"Enter\", \" \"];\n\n  const pillIcon =\n    // FIXME: icon type\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    icon && isValidElement<any>(icon)\n      ? cloneElement(icon, {\n          ...icon.props,\n          // FIXME: icon.props is any\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n          className: cn(withBaseName(\"icon\"), icon.props.className),\n        })\n      : icon;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown(event);\n    if (!disabled && !deletable && clickKeys.indexOf(event.key) !== -1) {\n      setActive(true);\n    }\n  };\n\n  const handleKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyUp(event);\n    setActive(false);\n  };\n\n  const handleClick = (event: SyntheticEvent<HTMLDivElement, Event>) => {\n    onClick(event);\n  };\n\n  // FIXME: use polymorphic button as div for deletable and clickable cases.\n  const Component = deletable || clickable ? DivButton : \"div\";\n\n  const renderDeleteIcon = () => {\n    // FIXME: deleteIconProp type\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    if (deleteIconProp && isValidElement<any>(deleteIconProp)) {\n      return cloneElement(deleteIconProp, {\n        className: cn(\n          withBaseName(`deleteButton`),\n          // FIXME: deleteIconProp.props is any\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n          deleteIconProp.props.className\n        ),\n        disabled,\n        onClick: onDelete,\n      });\n    } else {\n      return <DeleteButton disabled={disabled} onClick={onDelete} />;\n    }\n  };\n\n  const { getTriggerProps, getTooltipProps } = useTooltip({\n    disabled: !ellipsis && disabled,\n    enterDelay,\n    placement,\n    leaveDelay,\n  });\n\n  const { ref: triggerRef, ...triggerProps } = getTriggerProps<\n    typeof Component\n  >({\n    \"aria-disabled\": disabled || undefined,\n    \"aria-roledescription\": ariaRoledescription,\n    className: cn(\n      withBaseName(),\n      {\n        [withBaseName(\"clickable\")]: clickable,\n        [withBaseName(\"deletable\")]: deletable && !disabled,\n        [withBaseName(\"disabled\")]: disabled,\n        [withBaseName(\"active\")]: active,\n      },\n      className\n    ),\n    // @ts-ignore\n    \"data-testid\": \"pill\",\n    onKeyDown: disabled ? undefined : handleKeyDown,\n    onKeyUp: disabled ? undefined : handleKeyUp,\n    onClick: disabled ? undefined : handleClick,\n    role: \"button\",\n    tabIndex: disabled ? -1 : 0,\n    ...rest,\n  });\n\n  const handleRef = useForkRef(triggerRef, ref);\n\n  return (\n    <>\n      <Tooltip {...getTooltipProps({ title: label, ...TooltipProps })} />\n      <Component ref={handleRef} {...triggerProps}>\n        {pillIcon || null}\n        <div className={withBaseName(\"label\")} ref={labelRef}>\n          <span className={withBaseName(\"innerLabel\")}>{label}</span>\n        </div>\n        {deletable ? renderDeleteIcon() : null}\n      </Component>\n    </>\n  );\n});\n"],"names":["PillBase","TooltipProps","cn"],"mappings":"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"}

package/dist-es/packages/lab/src/pill/SelectablePill.js

@@ -0,0 +1,51 @@
+import { jsx } from 'react/jsx-runtime';
+import cx from 'classnames';
+import { forwardRef, useCallback } from 'react';
+import { makePrefixer, useControlled } from '@salt-ds/core';
+import { pillBaseName } from './constants.js';
+import { PillBase } from './PillBase.js';
+import { PillCheckbox } from './internal/PillCheckbox.js';
+
+const noop = () => void 0;
+const withBaseName = makePrefixer(pillBaseName);
+const SelectablePill = forwardRef(function SelectablePill2({
+  defaultChecked = false,
+  checked: checkedProp,
+  className,
+  onChange = noop,
+  disabled = false,
+  ...rest
+}, ref) {
+  const [checked, setChecked] = useControlled({
+    controlled: checkedProp,
+    default: defaultChecked,
+    name: "SelectablePill",
+    state: "checked"
+  });
+  const handleClick = useCallback(
+    (event) => {
+      setChecked(!checked);
+      onChange(event, !checked);
+    },
+    [checked, onChange, setChecked]
+  );
+  return /* @__PURE__ */ jsx(PillBase, {
+    "aria-checked": checked,
+    "aria-roledescription": "Selectable Pill",
+    clickable: true,
+    disabled,
+    className: cx(withBaseName(`selectable`), className, {
+      [withBaseName(`checked`)]: checked
+    }),
+    icon: /* @__PURE__ */ jsx(PillCheckbox, {
+      checked
+    }),
+    role: "checkbox",
+    onClick: handleClick,
+    ...rest,
+    ref
+  });
+});
+
+export { SelectablePill };
+//# sourceMappingURL=SelectablePill.js.map

package/dist-es/packages/lab/src/pill/SelectablePill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectablePill.js","sources":["../src/pill/SelectablePill.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { ForwardedRef, forwardRef, useCallback, SyntheticEvent } from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { pillBaseName } from \"./constants\";\nimport { PillBase, PillBaseProps } from \"./PillBase\";\nimport { PillCheckbox } from \"./internal/PillCheckbox\";\n\nconst noop = () => undefined;\n\nexport interface SelectablePillProps extends Omit<PillBaseProps, \"onChange\"> {\n  /**\n   * Controls whether the selectable pill is checked\n   */\n  checked?: boolean;\n  /**\n   * Uncontrolled prop to determine initial state of selectable pill\n   */\n  defaultChecked?: boolean;\n  // TODO: API Alignment.\n  // - Reverted param order to keep event as first param\n  /**\n   * Callback when checked state is changed\n   */\n  onChange?: (event: SyntheticEvent, checked: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport const SelectablePill = forwardRef(function SelectablePill(\n  {\n    defaultChecked = false,\n    checked: checkedProp,\n    className,\n    onChange = noop,\n    disabled = false,\n    ...rest\n  }: SelectablePillProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const [checked, setChecked] = useControlled({\n    controlled: checkedProp,\n    default: defaultChecked,\n    name: \"SelectablePill\",\n    state: \"checked\",\n  });\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent<HTMLDivElement>) => {\n      setChecked(!checked);\n      onChange(event, !checked);\n    },\n    [checked, onChange, setChecked]\n  );\n\n  return (\n    <PillBase\n      aria-checked={checked}\n      aria-roledescription=\"Selectable Pill\"\n      clickable\n      disabled={disabled}\n      className={classnames(withBaseName(`selectable`), className, {\n        [withBaseName(`checked`)]: checked,\n      })}\n      icon={<PillCheckbox checked={checked} />}\n      role=\"checkbox\"\n      onClick={handleClick}\n      {...rest}\n      ref={ref}\n    />\n  );\n});\n"],"names":["SelectablePill","classnames"],"mappings":";;;;;;;;AAOA,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAmBnB,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAEjC,MAAA,cAAA,GAAiB,UAAW,CAAA,SAASA,eAChD,CAAA;AAAA,EACE,cAAiB,GAAA,KAAA;AAAA,EACjB,OAAS,EAAA,WAAA;AAAA,EACT,SAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,QAAW,GAAA,KAAA;AAAA,EACR,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,aAAc,CAAA;AAAA,IAC1C,UAAY,EAAA,WAAA;AAAA,IACZ,OAAS,EAAA,cAAA;AAAA,IACT,IAAM,EAAA,gBAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,KAA0C,KAAA;AACzC,MAAA,UAAA,CAAW,CAAC,OAAO,CAAA,CAAA;AACnB,MAAS,QAAA,CAAA,KAAA,EAAO,CAAC,OAAO,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,OAAS,EAAA,QAAA,EAAU,UAAU,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,IACC,cAAc,EAAA,OAAA;AAAA,IACd,sBAAqB,EAAA,iBAAA;AAAA,IACrB,SAAS,EAAA,IAAA;AAAA,IACT,QAAA;AAAA,IACA,SAAW,EAAAC,EAAA,CAAW,YAAa,CAAA,CAAA,UAAA,CAAY,GAAG,SAAW,EAAA;AAAA,MAC3D,CAAC,YAAa,CAAA,CAAA,OAAA,CAAS,CAAI,GAAA,OAAA;AAAA,KAC5B,CAAA;AAAA,IACD,sBAAO,GAAA,CAAA,YAAA,EAAA;AAAA,MAAa,OAAA;AAAA,KAAkB,CAAA;AAAA,IACtC,IAAK,EAAA,UAAA;AAAA,IACL,OAAS,EAAA,WAAA;AAAA,IACR,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/pill/constants.js

@@ -0,0 +1,4 @@
+const pillBaseName = "saltPill";
+
+export { pillBaseName };
+//# sourceMappingURL=constants.js.map

package/dist-es/packages/lab/src/pill/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../src/pill/constants.ts"],"sourcesContent":["export const pillBaseName = \"saltPill\";\n"],"names":[],"mappings":"AAAO,MAAM,YAAe,GAAA;;;;"}

package/dist-es/packages/lab/src/pill/internal/DeleteButton.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { CloseSmallIcon } from '@salt-ds/icons';
+import { makePrefixer, Button } from '@salt-ds/core';
+import cx from 'classnames';
+import { pillBaseName } from '../constants.js';
+
+const withBaseName = makePrefixer(pillBaseName);
+const DeleteButton = (props) => {
+  const { disabled, active, className, ...restProps } = props;
+  return /* @__PURE__ */ jsx(Button, {
+    "aria-hidden": "true",
+    className: cx(
+      withBaseName("deleteButton"),
+      {
+        [withBaseName("deleteButton-disabled")]: disabled,
+        [withBaseName("deleteButton-active")]: active
+      },
+      className
+    ),
+    "data-testid": "pill-delete-button",
+    disabled,
+    onMouseEnter: (event) => event.stopPropagation(),
+    tabIndex: -1,
+    variant: "secondary",
+    ...restProps,
+    children: /* @__PURE__ */ jsx(CloseSmallIcon, {
+      className: withBaseName("deleteIcon")
+    })
+  });
+};
+
+export { DeleteButton };
+//# sourceMappingURL=DeleteButton.js.map

package/dist-es/packages/lab/src/pill/internal/DeleteButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteButton.js","sources":["../src/pill/internal/DeleteButton.tsx"],"sourcesContent":["import { CloseSmallIcon } from \"@salt-ds/icons\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport cn from \"classnames\";\nimport { MouseEvent } from \"react\";\nimport { pillBaseName } from \"../constants\";\n\nexport interface DeleteButtonProps extends ButtonProps {\n  /**\n   * Active state.\n   */\n  active?: boolean;\n}\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport const DeleteButton = (props: DeleteButtonProps) => {\n  const { disabled, active, className, ...restProps } = props;\n  return (\n    <Button\n      aria-hidden=\"true\"\n      className={cn(\n        withBaseName(\"deleteButton\"),\n        {\n          [withBaseName(\"deleteButton-disabled\")]: disabled,\n          [withBaseName(\"deleteButton-active\")]: active,\n        },\n        className\n      )}\n      data-testid=\"pill-delete-button\"\n      disabled={disabled}\n      onMouseEnter={(event: MouseEvent<HTMLButtonElement>) =>\n        event.stopPropagation()\n      }\n      tabIndex={-1}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      <CloseSmallIcon className={withBaseName(\"deleteIcon\")} />\n    </Button>\n  );\n};\n"],"names":["cn"],"mappings":";;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAEjC,MAAA,YAAA,GAAe,CAAC,KAA6B,KAAA;AACxD,EAAA,MAAM,EAAE,QAAA,EAAU,MAAQ,EAAA,SAAA,EAAA,GAAc,WAAc,GAAA,KAAA,CAAA;AACtD,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAW,EAAAA,EAAA;AAAA,MACT,aAAa,cAAc,CAAA;AAAA,MAC3B;AAAA,QACE,CAAC,YAAa,CAAA,uBAAuB,CAAI,GAAA,QAAA;AAAA,QACzC,CAAC,YAAa,CAAA,qBAAqB,CAAI,GAAA,MAAA;AAAA,OACzC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,oBAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAc,EAAA,CAAC,KACb,KAAA,KAAA,CAAM,eAAgB,EAAA;AAAA,IAExB,QAAU,EAAA,CAAA,CAAA;AAAA,IACV,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEJ,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA;AAAA,MAAe,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,KAAG,CAAA;AAAA,GACzD,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/pill/internal/DivButton.js

@@ -0,0 +1,64 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { makePrefixer, useButton } from '@salt-ds/core';
+import cx from 'classnames';
+
+const withBaseName = makePrefixer("saltButton");
+const DivButton = forwardRef(
+  function DivButton2({
+    children,
+    className,
+    disabled,
+    focusableWhenDisabled,
+    onKeyUp,
+    onKeyDown,
+    onBlur,
+    onClick,
+    role: roleProp,
+    ...restProps
+  }, ref) {
+    const enter = "Enter";
+    const space = " ";
+    const handleKeyDownDiv = (event) => {
+      if (!disabled && event.target === event.currentTarget && (event.key === enter || event.key === space)) {
+        onClick == null ? void 0 : onClick(event);
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const { active, buttonProps } = useButton({
+      disabled,
+      focusableWhenDisabled,
+      onKeyUp,
+      onKeyDown: handleKeyDownDiv,
+      onBlur,
+      onClick
+    });
+    const {
+      "aria-disabled": ariaDisabled,
+      tabIndex,
+      onBlur: handleBlur,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp
+    } = buttonProps;
+    return /* @__PURE__ */ jsx("div", {
+      "aria-disabled": ariaDisabled,
+      className: cx(withBaseName(), className, withBaseName("primary"), {
+        [withBaseName("disabled")]: disabled,
+        [withBaseName("active")]: active
+      }),
+      tabIndex,
+      onBlur: handleBlur,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      role: roleProp !== void 0 ? roleProp : "button",
+      ...restProps,
+      ref,
+      children
+    });
+  }
+);
+
+export { DivButton };
+//# sourceMappingURL=DivButton.js.map

package/dist-es/packages/lab/src/pill/internal/DivButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DivButton.js","sources":["../src/pill/internal/DivButton.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactElement,\n  KeyboardEvent,\n} from \"react\";\nimport { useButton, makePrefixer } from \"@salt-ds/core\";\nimport cx from \"classnames\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport interface DivButtonProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the button will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be focusable when disabled.\n   */\n  focusableWhenDisabled?: boolean;\n}\n\nexport const DivButton = forwardRef<HTMLDivElement, DivButtonProps>(\n  function DivButton(\n    {\n      children,\n      className,\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onClick,\n      role: roleProp,\n      ...restProps\n    },\n    ref?\n  ): ReactElement<DivButtonProps> {\n    const enter = \"Enter\";\n    const space = \" \";\n\n    const handleKeyDownDiv = (event: KeyboardEvent<HTMLDivElement>) => {\n      // for Pill component, which depends on Button\n      if (\n        !disabled &&\n        // Don't act on children component\n        event.target === event.currentTarget &&\n        (event.key === enter || event.key === space)\n      ) {\n        //@ts-ignore\n        onClick?.(event);\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const { active, buttonProps } = useButton({\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown: handleKeyDownDiv,\n      onBlur,\n      onClick,\n    });\n\n    const {\n      \"aria-disabled\": ariaDisabled,\n      tabIndex,\n      onBlur: handleBlur,\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      onKeyUp: handleKeyUp,\n    } = buttonProps;\n\n    return (\n      <div\n        aria-disabled={ariaDisabled}\n        className={cx(withBaseName(), className, withBaseName(\"primary\"), {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"active\")]: active,\n        })}\n        tabIndex={tabIndex}\n        onBlur={handleBlur}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        // Allow an explicit null value to be passed by user to suppress role\n        role={roleProp !== undefined ? roleProp : \"button\"}\n        {...restProps}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["DivButton"],"mappings":";;;;;AASA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAavC,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACH,GAAA,SAAA;AAAA,KAEL,GAC8B,EAAA;AAC9B,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AACd,IAAA,MAAM,KAAQ,GAAA,GAAA,CAAA;AAEd,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAAyC,KAAA;AAEjE,MACE,IAAA,CAAC,QAED,IAAA,KAAA,CAAM,MAAW,KAAA,KAAA,CAAM,aACtB,KAAA,KAAA,CAAM,GAAQ,KAAA,KAAA,IAAS,KAAM,CAAA,GAAA,KAAQ,KACtC,CAAA,EAAA;AAEA,QAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,OACZ;AAEA,MAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACd,CAAA;AAEA,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAY,EAAA,GAAI,SAAU,CAAA;AAAA,MACxC,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAW,EAAA,gBAAA;AAAA,MACX,MAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,eAAiB,EAAA,YAAA;AAAA,MACjB,QAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,SAAW,EAAA,aAAA;AAAA,MACX,OAAS,EAAA,WAAA;AAAA,KACP,GAAA,WAAA,CAAA;AAEJ,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACf,WAAW,EAAG,CAAA,YAAA,IAAgB,SAAW,EAAA,YAAA,CAAa,SAAS,CAAG,EAAA;AAAA,QAChE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC3B,CAAA;AAAA,MACD,QAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,SAAW,EAAA,aAAA;AAAA,MACX,OAAS,EAAA,WAAA;AAAA,MAET,IAAA,EAAM,QAAa,KAAA,KAAA,CAAA,GAAY,QAAW,GAAA,QAAA;AAAA,MACzC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/pill/internal/PillCheckbox.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* Styles applied to the Pill checkbox */\n.saltPill-checkbox {\n  height: var(--pill-checkbox-size);\n  margin-left: 1px;\n  padding-right: 0;\n  width: var(--pill-checkbox-size);\n\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor);\n  --saltCheckbox-icon-fill: none;\n  --saltCheckbox-icon-fill-checked: none;\n  --saltCheckbox-icon-borderWidth-checked: var(--salt-size-border);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=PillCheckbox.css.js.map

package/dist-es/packages/lab/src/pill/internal/PillCheckbox.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillCheckbox.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/pill/internal/PillCheckbox.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import '../../checkbox/Checkbox.js';
+import '../../checkbox/CheckboxBase.js';
+import '../../checkbox/CheckboxGroup.js';
+import { CheckboxIcon } from '../../checkbox/CheckboxIcon.js';
+import { pillBaseName } from '../constants.js';
+import './PillCheckbox.css.js';
+
+const withBaseName = makePrefixer(`${pillBaseName}-checkbox`);
+const PillCheckbox = (props) => {
+  return /* @__PURE__ */ jsx(CheckboxIcon, {
+    checked: props.checked,
+    className: withBaseName()
+  });
+};
+
+export { PillCheckbox };
+//# sourceMappingURL=PillCheckbox.js.map

package/dist-es/packages/lab/src/pill/internal/PillCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillCheckbox.js","sources":["../src/pill/internal/PillCheckbox.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { CheckboxIcon } from \"../../checkbox\";\nimport { pillBaseName } from \"../constants\";\n\nimport \"./PillCheckbox.css\";\n\nconst withBaseName = makePrefixer(`${pillBaseName}-checkbox`);\n\nexport const PillCheckbox = (props: { checked?: boolean }): JSX.Element => {\n  return <CheckboxIcon checked={props.checked} className={withBaseName()} />;\n};\n"],"names":[],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAe,YAAa,CAAA,CAAA,EAAG,YAAuB,CAAA,SAAA,CAAA,CAAA,CAAA;AAE/C,MAAA,YAAA,GAAe,CAAC,KAA8C,KAAA;AACzE,EAAA,uBAAQ,GAAA,CAAA,YAAA,EAAA;AAAA,IAAa,SAAS,KAAM,CAAA,OAAA;AAAA,IAAS,WAAW,YAAa,EAAA;AAAA,GAAG,CAAA,CAAA;AAC1E;;;;"}

package/dist-es/packages/lab/src/popper/useFloatingUI.js

@@ -0,0 +1,32 @@
+import { flip, shift, limitShift, useFloating, autoUpdate } from '@floating-ui/react-dom-interactions';
+import { isDesktop } from '../window/WindowContext.js';
+import '../window/ElectronWindow.js';
+
+const DEFAULT_FLOATING_UI_MIDDLEWARE = isDesktop ? [] : [flip(), shift({ limiter: limitShift() })];
+function useFloatingUI(props) {
+  const {
+    placement: placementProp,
+    strategy: strategyProp,
+    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,
+    open,
+    onOpenChange
+  } = props;
+  const { reference, floating, refs, update, ...rest } = useFloating({
+    placement: placementProp,
+    strategy: strategyProp,
+    middleware,
+    open,
+    onOpenChange,
+    whileElementsMounted: autoUpdate
+  });
+  return {
+    reference,
+    floating,
+    refs,
+    update,
+    ...rest
+  };
+}
+
+export { DEFAULT_FLOATING_UI_MIDDLEWARE, useFloatingUI };
+//# sourceMappingURL=useFloatingUI.js.map

package/dist-es/packages/lab/src/popper/useFloatingUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingUI.js","sources":["../src/popper/useFloatingUI.tsx"],"sourcesContent":["import type { Props } from \"@floating-ui/react-dom-interactions\";\nimport {\n  autoUpdate,\n  flip,\n  limitShift,\n  shift,\n  useFloating,\n} from \"@floating-ui/react-dom-interactions\";\nimport { isDesktop } from \"../window\";\n\nexport type UseFloatingUIProps = Partial<\n  Pick<Props, \"placement\" | \"strategy\" | \"middleware\" | \"open\" | \"onOpenChange\">\n>;\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = isDesktop\n  ? []\n  : [flip(), shift({ limiter: limitShift() })];\n\nexport function useFloatingUI(\n  props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n  const {\n    placement: placementProp,\n    strategy: strategyProp,\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open,\n    onOpenChange,\n  } = props;\n\n  const { reference, floating, refs, update, ...rest } = useFloating({\n    placement: placementProp,\n    strategy: strategyProp,\n    middleware,\n    open,\n    onOpenChange,\n    whileElementsMounted: autoUpdate,\n  });\n\n  return {\n    reference,\n    floating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":[],"mappings":";;;;AAcO,MAAM,8BAAiC,GAAA,SAAA,GAC1C,EAAC,GACD,CAAC,IAAA,EAAQ,EAAA,KAAA,CAAM,EAAE,OAAA,EAAS,UAAW,EAAA,EAAG,CAAC,EAAA;AAEtC,SAAS,cACd,KACgC,EAAA;AAChC,EAAM,MAAA;AAAA,IACJ,SAAW,EAAA,aAAA;AAAA,IACX,QAAU,EAAA,YAAA;AAAA,IACV,UAAa,GAAA,8BAAA;AAAA,IACb,IAAA;AAAA,IACA,YAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,MAAM,MAAW,EAAA,GAAA,IAAA,KAAS,WAAY,CAAA;AAAA,IACjE,SAAW,EAAA,aAAA;AAAA,IACX,QAAU,EAAA,YAAA;AAAA,IACV,UAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAsB,EAAA,UAAA;AAAA,GACvB,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACF;;;;"}

package/dist-es/packages/lab/src/portal/Portal.js

@@ -0,0 +1,60 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, isValidElement, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+import { useForkRef, useIsomorphicLayoutEffect, ownerDocument, SaltProvider } from '@salt-ds/core';
+
+function getContainer(container) {
+  return typeof container === "function" ? container() : container;
+}
+const DEFAULT_ID = "portal-root";
+const Portal = forwardRef(function Portal2({
+  children,
+  container: containerProp = document.body,
+  disablePortal = false,
+  id = DEFAULT_ID
+}, ref) {
+  var _a;
+  const [mounted, setMounted] = useState(false);
+  const portalRef = useRef(null);
+  const handleRef = useForkRef(
+    isValidElement(children) ? children.ref : null,
+    ref
+  );
+  const container = (_a = getContainer(containerProp)) != null ? _a : document.body;
+  useIsomorphicLayoutEffect(() => {
+    const root = ownerDocument(container).getElementById(id);
+    if (root) {
+      portalRef.current = root;
+    } else {
+      portalRef.current = ownerDocument(container).createElement("div");
+      portalRef.current.id = id;
+    }
+    const el = portalRef.current;
+    if (!container.contains(el)) {
+      container.appendChild(el);
+    }
+    setMounted(true);
+  }, [id, container]);
+  if (disablePortal) {
+    if (isValidElement(children)) {
+      return cloneElement(children, {
+        ref: handleRef
+      });
+    }
+    return /* @__PURE__ */ jsx(Fragment, {
+      children
+    });
+  }
+  if (mounted && portalRef.current && children) {
+    return createPortal(
+      /* @__PURE__ */ jsx(SaltProvider, {
+        children
+      }),
+      portalRef.current
+    );
+  }
+  return null;
+});
+
+export { Portal };
+//# sourceMappingURL=Portal.js.map

package/dist-es/packages/lab/src/portal/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","sources":["../src/portal/Portal.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  ReactNode,\n  useRef,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  SaltProvider,\n  ownerDocument,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\n\nexport interface PortalProps {\n  /**\n   * The children to render into the `container`.\n   */\n  children?: ReactNode;\n  /**\n   * An HTML element, component instance, or function that returns either.\n   * The `container` will have the portal children appended to it.\n   *\n   * By default, it uses the body of the top-level document object,\n   * so it's simply `document.body` most of the time.\n   */\n  container?: Element | (() => Element | null) | null;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If this node does not exist on the document, it will be created for you.\n   */\n  id?: string;\n}\n\nfunction getContainer(container: PortalProps[\"container\"]) {\n  return typeof container === \"function\" ? container() : container;\n}\n\nconst DEFAULT_ID = \"portal-root\";\n\n/**\n * Portals provide a first-class way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */\nexport const Portal = forwardRef<HTMLElement, PortalProps>(function Portal(\n  {\n    children,\n    container: containerProp = document.body,\n    disablePortal = false,\n    id = DEFAULT_ID,\n  },\n  ref\n) {\n  const [mounted, setMounted] = useState(false);\n  const portalRef = useRef<HTMLElement | null>(null);\n  const handleRef = useForkRef(\n    // @ts-ignore\n    isValidElement(children) ? children.ref : null,\n    ref\n  );\n\n  const container = getContainer(containerProp) ?? document.body;\n\n  useIsomorphicLayoutEffect(() => {\n    const root = ownerDocument(container).getElementById(id);\n\n    if (root) {\n      portalRef.current = root;\n    } else {\n      portalRef.current = ownerDocument(container).createElement(\"div\");\n      portalRef.current.id = id;\n    }\n\n    const el = portalRef.current;\n\n    if (!container.contains(el)) {\n      container.appendChild(el);\n    }\n\n    setMounted(true);\n  }, [id, container]);\n\n  if (disablePortal) {\n    if (isValidElement(children)) {\n      return cloneElement(children, {\n        ref: handleRef,\n      });\n    }\n    return <>{children}</>;\n  }\n\n  if (mounted && portalRef.current && children) {\n    return createPortal(\n      <SaltProvider>{children}</SaltProvider>,\n      portalRef.current\n    );\n  }\n\n  return null;\n});\n"],"names":["Portal"],"mappings":";;;;;AAwCA,SAAS,aAAa,SAAqC,EAAA;AACzD,EAAA,OAAO,OAAO,SAAA,KAAc,UAAa,GAAA,SAAA,EAAc,GAAA,SAAA,CAAA;AACzD,CAAA;AAEA,MAAM,UAAa,GAAA,aAAA,CAAA;AAMN,MAAA,MAAA,GAAS,UAAqC,CAAA,SAASA,OAClE,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA,EAAW,gBAAgB,QAAS,CAAA,IAAA;AAAA,EACpC,aAAgB,GAAA,KAAA;AAAA,EAChB,EAAK,GAAA,UAAA;AACP,CAAA,EACA,GACA,EAAA;AA1DF,EAAA,IAAA,EAAA,CAAA;AA2DE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,SAAA,GAAY,OAA2B,IAAI,CAAA,CAAA;AACjD,EAAA,MAAM,SAAY,GAAA,UAAA;AAAA,IAEhB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,IAC1C,GAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,SAAY,GAAA,CAAA,EAAA,GAAA,YAAA,CAAa,aAAa,CAAA,KAA1B,YAA+B,QAAS,CAAA,IAAA,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,IAAO,GAAA,aAAA,CAAc,SAAS,CAAA,CAAE,eAAe,EAAE,CAAA,CAAA;AAEvD,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,SAAA,CAAU,OAAU,GAAA,IAAA,CAAA;AAAA,KACf,MAAA;AACL,MAAA,SAAA,CAAU,OAAU,GAAA,aAAA,CAAc,SAAS,CAAA,CAAE,cAAc,KAAK,CAAA,CAAA;AAChE,MAAA,SAAA,CAAU,QAAQ,EAAK,GAAA,EAAA,CAAA;AAAA,KACzB;AAEA,IAAA,MAAM,KAAK,SAAU,CAAA,OAAA,CAAA;AAErB,IAAA,IAAI,CAAC,SAAA,CAAU,QAAS,CAAA,EAAE,CAAG,EAAA;AAC3B,MAAA,SAAA,CAAU,YAAY,EAAE,CAAA,CAAA;AAAA,KAC1B;AAEA,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,GACd,EAAA,CAAC,EAAI,EAAA,SAAS,CAAC,CAAA,CAAA;AAElB,EAAA,IAAI,aAAe,EAAA;AACjB,IAAI,IAAA,cAAA,CAAe,QAAQ,CAAG,EAAA;AAC5B,MAAA,OAAO,aAAa,QAAU,EAAA;AAAA,QAC5B,GAAK,EAAA,SAAA;AAAA,OACN,CAAA,CAAA;AAAA,KACH;AACA,IAAO,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MAAG,QAAA;AAAA,KAAS,CAAA,CAAA;AAAA,GACrB;AAEA,EAAI,IAAA,OAAA,IAAW,SAAU,CAAA,OAAA,IAAW,QAAU,EAAA;AAC5C,IAAO,OAAA,YAAA;AAAA,sBACJ,GAAA,CAAA,YAAA,EAAA;AAAA,QAAc,QAAA;AAAA,OAAS,CAAA;AAAA,MACxB,SAAU,CAAA,OAAA;AAAA,KACZ,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,IAAA,CAAA;AACT,CAAC;;;;"}

package/dist-es/packages/lab/src/progress/CircularProgress/CircularProgress.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltCircularProgress {\n  --circularProgress-gradient-color: var(--salt-measured-fill);\n\n  color: var(--salt-text-primary-foreground);\n  display: inline-flex;\n  position: relative;\n}\n\n.saltCircularProgress-disabled .saltCircularProgress-progressValue,\n.saltCircularProgress-disabled circle {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCircularProgress-circle {\n  stroke: url(\"#salt-circular-progress-gradient\");\n  stroke-width: 2px;\n}\n\n.saltCircularProgress-small {\n  font-size: 11px;\n}\n\n.saltCircularProgress-medium {\n  font-size: 14px;\n}\n\n.saltCircularProgress-large {\n  font-size: 16px;\n}\n\n.saltCircularProgress-progressValue {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  width: 100%;\n}\n\n.saltCircularProgress-disabled {\n}\n\n.saltCircularProgress-completed {\n}\n\n.saltCircularProgress-railCircle {\n  stroke: var(--salt-measured-background);\n  stroke-width: 1px;\n}\n\n.saltCircularProgress-gradientStart,\n.saltCircularProgress-gradientStop {\n  stop-color: var(--saltCircularProgress-gradient-color, var(--circularProgress-gradient-color));\n}\n\n.saltCircularProgress-container {\n  display: inline-block;\n}\n\n.saltCircularProgress-static {\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n}\n\n.saltCircularProgress-indeterminate {\n  animation: circular-rotate 1.4s linear infinite;\n}\n\n.saltCircularProgress-svg {\n  fill: var(--salt-measured-background);\n  display: block;\n}\n\n.saltCircularProgress-circle {\n  stroke: url(\"#salt-circular-progress-gradient\");\n}\n\n.saltCircularProgress-circleStatic {\n  transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n}\n\n.saltCircularProgress-circleIndeterminate {\n  animation: circular-dash 1.4s ease-in-out infinite;\n}\n\n@keyframes circular-rotate {\n  0% {\n    transform-origin: 50% 50%;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes circular-dash {\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=CircularProgress.css.js.map

package/dist-es/packages/lab/src/progress/CircularProgress/CircularProgress.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}