npm - @sproutsocial/seeds-react-checkbox - Versions diffs - 1.3.54 → 1.3.56 - Mend

@sproutsocial/seeds-react-checkbox 1.3.54 → 1.3.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/checkbox.css ADDED Viewed

@@ -0,0 +1,187 @@
+/**
+ * Seeds Checkbox component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage (default appearance): rendered by CheckboxTailwind on top of
+ * `@base-ui/react`'s Checkbox —
+ *   <span class="seeds-checkbox">
+ *     <button class="seeds-checkbox-input" role="checkbox">
+ *       <span class="seeds-checkbox-indicator">
+ *         <Icon class="seeds-checkbox-icon" />
+ *       </span>
+ *     </button>
+ *     <span class="seeds-checkbox-label">Label</span>
+ *   </span>
+ *
+ * The default-appearance box is base-ui's `Checkbox.Root` (`<button
+ * role="checkbox">`) and the mark is a real `<Icon>` inside
+ * `Checkbox.Indicator`. State is read from base-ui's ARIA contract
+ * (`aria-checked` = "true" | "mixed" | "false") and its `data-disabled`
+ * attribute, so there is no imperative `indeterminate` sync and no mask-image
+ * pseudo-element — which is what made the previous indeterminate rendering
+ * unreliable.
+ *
+ * All rules are wrapped in `@layer components` so consuming Tailwind utility
+ * classes (e.g. `mx-200`, `p-300`, `inline-flex`) win the cascade over these
+ * component styles.
+ */
+@layer components {
+/* ----------------------------------------------------------------------------
+ * Default appearance
+ * ------------------------------------------------------------------------- */
+.seeds-checkbox {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  transition: all var(--duration-fast) var(--ease-ease_in);
+}
+/* Whole control dims when the control is disabled (matches container opacity).
+   base-ui sets both the native `disabled` attribute and `data-disabled`. */
+.seeds-checkbox:has(.seeds-checkbox-input:disabled),
+.seeds-checkbox:has(.seeds-checkbox-input[data-disabled]) {
+  opacity: 0.4;
+}
+/* The box — base-ui's Checkbox.Root <button>. `color` sets the grey mark used
+   for the hover preview; the selected state overrides the mark color below. */
+.seeds-checkbox .seeds-checkbox-input {
+  box-sizing: border-box;
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  width: var(--space-400);
+  height: var(--space-400);
+  border: 1px solid var(--color-form-border-base);
+  border-radius: var(--radius-400);
+  background-color: var(--color-form-bg-base);
+  color: var(--color-form-border-base);
+  transition: all var(--duration-fast) var(--ease-ease_in);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.seeds-checkbox .seeds-checkbox-input:disabled,
+.seeds-checkbox .seeds-checkbox-input[data-disabled] {
+  cursor: not-allowed;
+}
+/* Selected (checked or indeterminate): filled box. The mark color is set here
+   (not on the icon) so it inherits through the seeds Icon's unlayered
+   `.Icon { color: inherit }` rule, which would otherwise win the cascade over a
+   layered color on `.seeds-checkbox-icon`. `--color-icon-inverse` resolves to
+   white in light mode and black in dark mode — matching the SC component's
+   `icon.inverse` checked-mark color (styles.tsx:137). */
+.seeds-checkbox .seeds-checkbox-input[aria-checked="true"],
+.seeds-checkbox .seeds-checkbox-input[aria-checked="mixed"] {
+  border-color: var(--color-form-border-selected);
+  background-color: var(--color-form-bg-selected);
+  color: var(--color-icon-inverse);
+}
+/* Focus ring. The visible box is base-ui's Checkbox.Root <button>, but base-ui
+   also renders a separate hidden <input> for form participation, and focus (on
+   click or Tab) can land on that <input> rather than the button. A plain
+   `.seeds-checkbox-input:focus` only matched the button, so the ring never
+   painted and the box looked unfocusable. Track focus anywhere inside the
+   control and paint the ring on the visible box regardless of which element
+   actually holds focus: base-ui mirrors focus state onto the Root button as
+   `data-focused`, and the `:has(:focus)` wrapper rules catch focus on either
+   the button or the hidden <input>. `:focus` (not `:focus-visible`) keeps parity
+   with the styled-components `focusRing` mixin, which shows the ring on both
+   keyboard focus and click (styles.tsx:115-117). */
+.seeds-checkbox .seeds-checkbox-input[data-focused],
+.seeds-checkbox:has(.seeds-checkbox-input:focus) .seeds-checkbox-input,
+.seeds-checkbox:has(input:focus) .seeds-checkbox-input {
+  box-shadow:
+    0 0 0 1px var(--color-button-primary-bg-base),
+    0 0px 0px 4px
+      color-mix(
+        in srgb,
+        var(--color-button-primary-bg-base),
+        transparent 70%
+      );
+  outline: none;
+}
+.seeds-checkbox .seeds-checkbox-input:focus::-moz-focus-inner {
+  border: 0;
+}
+/* The mark — a real <Icon> inside Checkbox.Indicator (kept mounted). Hidden by
+   default; shown (inverse) when selected, previewed (grey) on hover. */
+.seeds-checkbox .seeds-checkbox-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+.seeds-checkbox .seeds-checkbox-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  color: currentColor;
+  pointer-events: none;
+  transition: var(--duration-fast) var(--ease-ease_inout);
+}
+.seeds-checkbox .seeds-checkbox-icon,
+.seeds-checkbox .seeds-checkbox-icon .Icon-svg {
+  width: 10px;
+  height: 10px;
+  line-height: 10px;
+}
+/* Selected: inverse mark, shown. The mark inherits its color from the box's
+   `color: var(--color-icon-inverse)` above (via the Icon's unlayered
+   `color: inherit`), so only opacity is toggled here. */
+.seeds-checkbox .seeds-checkbox-input[aria-checked="true"] .seeds-checkbox-icon,
+.seeds-checkbox
+  .seeds-checkbox-input[aria-checked="mixed"]
+  .seeds-checkbox-icon {
+  opacity: 1;
+}
+/* Hover previews the mark (grey, via the box `color`) unless the control is
+   disabled and unchecked. */
+.seeds-checkbox
+  .seeds-checkbox-input:not(:disabled):not([data-disabled]):hover
+  .seeds-checkbox-icon {
+  opacity: 1;
+}
+.seeds-checkbox
+  .seeds-checkbox-input[aria-checked="false"]:disabled:hover
+  .seeds-checkbox-icon,
+.seeds-checkbox
+  .seeds-checkbox-input[aria-checked="false"][data-disabled]:hover
+  .seeds-checkbox-icon {
+  opacity: 0;
+}
+.seeds-checkbox-label {
+  margin-left: var(--space-300);
+  font-size: var(--font-size-200);
+  line-height: 1;
+  cursor: pointer;
+  color: var(--color-text-headline);
+}
+.seeds-checkbox:has(.seeds-checkbox-input:disabled) .seeds-checkbox-label {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+} /* end @layer components */

package/dist/esm/index.js CHANGED Viewed

@@ -1,4 +1,11 @@
 // src/Checkbox.tsx
+import * as React5 from "react";
+// src/CheckboxHybrid.tsx
+import * as React4 from "react";
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
+// src/CheckboxStyledComponents.tsx
 import * as React2 from "react";
 // src/styles.tsx
@@ -255,9 +262,9 @@ var CheckboxContainer = styled.span(
 );
 var styles_default = Container;
-// src/Checkbox.tsx
+// src/CheckboxStyledComponents.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Checkbox = class extends React2.Component {
+var CheckboxStyledComponents = class extends React2.Component {
   el;
   static defaultProps = {
     indeterminate: false,
@@ -274,7 +281,7 @@ var Checkbox = class extends React2.Component {
     }
   }
   handleChange = (event) => {
-    this.props.onChange(event);
+    this.props.onChange?.(event);
   };
   render() {
     const {
@@ -365,14 +372,160 @@ var Checkbox = class extends React2.Component {
   }
 };
+// src/CheckboxTailwind.tsx
+import * as React3 from "react";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import Icon2 from "@sproutsocial/seeds-react-icon";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var CheckboxTailwind = React3.forwardRef((props, ref) => {
+  const {
+    id,
+    value,
+    name,
+    label,
+    labelProps,
+    checked,
+    disabled = false,
+    indeterminate = false,
+    onChange,
+    ariaLabel,
+    // Destructured only to strip it from `...rest` (so it is never spread onto
+    // the wrapper DOM element). `appearance="pill"` is routed to the legacy
+    // styled-components component by `CheckboxHybrid`, so this path only ever
+    // renders the default appearance.
+    appearance,
+    qa = {},
+    tabIndex,
+    inputProps = {},
+    className,
+    ...rest
+  } = props;
+  const tabIndexInt = typeof tabIndex === "string" ? parseInt(tabIndex, 10) : tabIndex;
+  const Wrapper = label ? "label" : "span";
+  const qaProps = {
+    "data-qa-checkbox": id,
+    "data-qa-checkbox-ischecked": indeterminate ? "indeterminate" : checked === true,
+    "data-qa-checkbox-isdisabled": disabled === true
+  };
+  const effectiveIndeterminate = checked === true && indeterminate;
+  const handleCheckedChange = (next, eventOrDetails) => {
+    if (!onChange) return;
+    const nativeEvent = eventOrDetails instanceof Event ? eventOrDetails : eventOrDetails?.event;
+    const nativeTarget = nativeEvent?.target;
+    const target = nativeTarget && typeof nativeTarget.checked === "boolean" ? nativeTarget : {
+      checked: next,
+      value: value ?? "",
+      name: name ?? "",
+      id,
+      type: "checkbox"
+    };
+    onChange({
+      nativeEvent,
+      target,
+      currentTarget: target,
+      type: nativeEvent?.type ?? "change",
+      preventDefault: () => nativeEvent?.preventDefault?.(),
+      stopPropagation: () => nativeEvent?.stopPropagation?.()
+    });
+  };
+  return /* @__PURE__ */ jsxs2(Wrapper, { className: cn("seeds-checkbox", className), ...rest, children: [
+    /* @__PURE__ */ jsx3(
+      BaseCheckbox.Root,
+      {
+        id,
+        checked,
+        indeterminate: effectiveIndeterminate,
+        disabled,
+        onCheckedChange: handleCheckedChange,
+        inputRef: ref ?? void 0,
+        className: "seeds-checkbox-input",
+        "aria-label": ariaLabel,
+        tabIndex: tabIndexInt,
+        ...{ name, value },
+        ...qaProps,
+        ...qa,
+        ...inputProps,
+        children: /* @__PURE__ */ jsx3(
+          BaseCheckbox.Indicator,
+          {
+            className: "seeds-checkbox-indicator",
+            keepMounted: true,
+            children: /* @__PURE__ */ jsx3(
+              Icon2,
+              {
+                className: "seeds-checkbox-icon",
+                name: effectiveIndeterminate ? "minus-solid" : "check-solid",
+                size: "mini",
+                fixedWidth: true
+              }
+            )
+          }
+        )
+      }
+    ),
+    label && /* @__PURE__ */ jsx3(
+      "span",
+      {
+        className: "seeds-checkbox-label",
+        ...labelProps,
+        children: label
+      }
+    )
+  ] });
+});
+CheckboxTailwind.displayName = "CheckboxTailwind";
+// src/CheckboxHybrid.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CheckboxHybrid = React4.forwardRef(
+  (props, ref) => {
+    if (props.appearance === "pill" || needsStyledComponents(props)) {
+      return /* @__PURE__ */ jsx4(
+        CheckboxStyledComponents,
+        {
+          ...props,
+          ref
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx4(CheckboxTailwind, { ...props, ref });
+  }
+);
+CheckboxHybrid.displayName = "Checkbox";
+var CheckboxHybrid_default = CheckboxHybrid;
+// src/Checkbox.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Checkbox = React5.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx5(CheckboxHybrid_default, { ...props, ref })
+);
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = Checkbox;
 // src/types/CheckboxTypes.ts
 import "react";
 // src/index.ts
-var index_default = Checkbox;
+var index_default = Checkbox_default;
 export {
   CheckIcon,
-  Checkbox,
+  Checkbox_default as Checkbox,
   CheckboxBox,
   CheckboxContainer,
   InputWrapper,

package/dist/esm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/Checkbox.tsx","../../src/styles.tsx","../../src/types/CheckboxTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container, {\n CheckboxBox,\n CheckIcon,\n PillInput,\n InputWrapper,\n LabelText,\n CheckboxContainer,\n} from \"./styles\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nexport default class Checkbox extends React.Component<TypeCheckboxProps> {\n el: HTMLInputElement \| null \| undefined;\n static defaultProps = {\n indeterminate: false,\n disabled: false,\n };\n\n override componentDidUpdate(prevProps: TypeCheckboxProps) {\n if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n override componentDidMount() {\n if (this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {\n this.props.onChange(event);\n };\n\n override render() {\n const {\n id,\n value,\n name,\n label,\n labelProps,\n checked,\n disabled,\n indeterminate,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange,\n ariaLabel,\n appearance = \"default\",\n qa = {},\n tabIndex,\n inputProps = {},\n ...rest\n } = this.props;\n const isPill = appearance === \"pill\";\n // @ts-notes - tabIndex requires a number but can be a string\n const tabIndexInt =\n typeof tabIndex === \"string\" ? parseInt(tabIndex, 10) : tabIndex;\n\n // TODO: Refactor pill checkboxes to use fewer elements for performance gains\n if (!isPill) {\n return (\n <CheckboxContainer\n as={label && \"label\"}\n disabled={disabled}\n indeterminate={indeterminate}\n checked={checked}\n {...rest}\n >\n <input\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n {label && (\n <LabelText {...labelProps} disabled={disabled}>\n {label}\n </LabelText>\n )}\n </CheckboxContainer>\n );\n }\n\n return (\n <Container as={label && \"label\"} {...rest}>\n <InputWrapper appearance={appearance}>\n <PillInput\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n <CheckboxBox>\n <CheckIcon\n name={indeterminate ? \"minus-solid\" : \"check-solid\"}\n size=\"mini\"\n fixedWidth\n />\n </CheckboxBox>\n </InputWrapper>\n </Container>\n );\n }\n}\n","import * as React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nconst Container = styled.span`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n\n ${COMMON}\n`;\nContainer.displayName = \"Checkbox\";\n\nexport const inputWrapperHoverStyles = css`\n background-color: ${(props) => props.theme.colors.app.background.base};\n`;\n\nexport const InputWrapper = styled(Box)<Pick<TypeCheckboxProps, \"appearance\">>`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n background-color: transparent;\n transition: all ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_inout};\n /* This solution is temporary. DS-1095 /\n mix-blend-mode: ${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"};\n ${pill}\n\n &:hover {\n ${inputWrapperHoverStyles}\n }\n\n ${PillInput} {\n ${pill}\n }\n `}\n`;\nInputWrapper.displayName = \"InputWrapper\";\n\nexport const CheckboxBox = styled.div`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.form.background.base};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n background-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n pointer-events: none;\n`;\nCheckboxBox.displayName = \"CheckboxBox\";\n\nexport const CheckIcon = styled(Icon).attrs({ \"aria-hidden\": true })`\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n transition: all\n ${({ theme }) => `${theme.duration.fast} ${theme.easing.ease_inout}`};\n\n &,\n & .Icon-svg {\n width: 10px;\n height: 10px;\n line-height: 10px;\n }\n`;\nCheckIcon.displayName = \"CheckIcon\";\n\nexport const pillInputHoverStyles = css<Pick<TypeCheckboxProps, \"disabled\">>`\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${(props) => (props.disabled ? 0 : 1)};\n color: ${(props) => props.theme.colors.form.border.base};\n }\n`;\n\nexport const PillInput = styled.input`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n border-radius: 4px;\n\n / IE 11 overrides /\n &::-ms-check {\n display: none;\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${(props) =>\n !props.checked &&\n css`\n &:hover,\n &:focus {\n ${pillInputHoverStyles}\n }\n `}\n\n ${(props) =>\n props.checked &&\n css`\n ~ ${CheckboxBox} {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: 1;\n color: ${props.theme.colors.icon.inverse};\n }\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ~ ${CheckboxBox} {\n opacity: 0.4;\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${props.checked ? 1 : 0};\n }\n `}\n`;\nPillInput.displayName = \"PillInput\";\n\nexport const LabelText = styled(Text)<Pick<TypeCheckboxProps, \"disabled\">>`\n margin-left: ${(props) => props.theme.space[300]};\n font-size: ${(props) => props.theme.typography[200].fontSize};\n line-height: 1;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n color: ${(props) => props.theme.colors.text.headline};\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n `}\n`;\nLabelText.displayName = \"LabelText\";\n\nconst checkSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46\"\n fill={color}\n />\n </svg>\n);\n\nconst indeterminateSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"10\" height=\"2\" x=\"2\" y=\"6\" rx=\"1\" ry=\"1\" fill={color} />\n </svg>\n);\n\nconst getIcon = (type: \"indeterminate\" \| \"check\", color: string) => {\n const escapedColor = encodeURIComponent(color);\n const icon =\n type === \"indeterminate\"\n ? indeterminateSVG(escapedColor)\n : checkSVG(escapedColor);\n return icon;\n};\n\nexport const checkboxContainerHoverStyles = css<\n Pick<TypeCheckboxProps, \"disabled\" \| \"checked\">\n>`\n &:before {\n opacity: ${(props) => (props.disabled && !props.checked ? 0 : 1)};\n }\n`;\n/ stylelint-disable eslint-disable /\nexport const CheckboxContainer = styled.span<\n Pick<TypeCheckboxProps, \"indeterminate\" \| \"checked\" \| \"disabled\">\n>(\n (props) => css`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};\n\n @supports (-webkit-appearance: none) {\n &:before {\n / The following line cannot have multiple lint exclusions, otherwise it will not work\n the svg data url MUST be single quoted /\n / prettier-ignore /\n content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(\n getIcon(\n props.indeterminate ? \"indeterminate\" : \"check\",\n props.checked\n ? props.theme.colors.form.background.base\n : props.theme.colors.form.border.base\n )\n )}');\n opacity: ${props.checked ? 1 : 0};\n position: absolute;\n / typography.300.fontSize matches space.400 (16px)\n this fixes an offset checkmark if there is another font size in the cascade /\n font-size: ${(props) => props.theme.typography[300].fontSize};\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n text-align: center;\n transform: translateY(1px);\n line-height: 1;\n margin: auto;\n pointer-events: none;\n transition: ${props.theme.duration.fast}\n ${props.theme.easing.ease_inout};\n }\n\n &:hover:before {\n ${checkboxContainerHoverStyles}\n }\n\n ${props.disabled &&\n css`\n opacity: 0.4;\n `}\n\n input[type='checkbox'] {\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n padding: 0;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n border: 1px solid ${props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${props.theme.colors.form.background.base};\n transition: all ${props.theme.duration.fast}\n ${props.theme.easing.ease_in};\n cursor: ${props.disabled ? \"not-allowed\" : \"pointer\"};\n flex-shrink: 0;\n\n &:not(:checked) {\n ${!props.indeterminate &&\n css`\n border-color: ${props.theme.colors.form.border\n .base} !important; / We don't want the focus ring to remove the border /\n background-color: ${props.theme.colors.form.background.base};\n `}\n }\n\n &:checked {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n\n ${props.indeterminate &&\n props.checked &&\n css`\n border-color: ${props.theme.colors.form.border.selected} !important;\n background-color: ${props.theme.colors.form.background\n .selected} !important;\n `}\n\n &:focus {\n ${focusRing}\n }\n }\n }\n\n ${COMMON}\n `\n);\n\nexport default Container;\n","import as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeCheckboxProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** ID of the form element, should match the \"for\" value of the associated label /\n id: string;\n value?: string;\n name?: string;\n\n /* Label text to display next to the checkbox /\n label?: string;\n\n /* Label used to describe the input (if not used with an accompanying visual label) /\n ariaLabel?: string;\n labelProps?: TypeTextProps;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;\n appearance?: \"pill\" \| \"default\";\n qa?: object;\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n}\n","import Checkbox from \"./Checkbox\";\n\nexport default Checkbox;\nexport { Checkbox };\nexport from \"./types/CheckboxTypes\";\nexport * from \"./styles\";\n"],"mappings":"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","names":["React","props","jsx"]}
1	+ {"version":3,"sources":["../../src/Checkbox.tsx","../../src/CheckboxHybrid.tsx","../../src/CheckboxStyledComponents.tsx","../../src/styles.tsx","../../src/CheckboxTailwind.tsx","../../src/types/CheckboxTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\nimport CheckboxHybrid from \"./CheckboxHybrid\";\n\n/*\n Checkbox component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n /\nconst Checkbox = React.forwardRef<HTMLInputElement, TypeCheckboxProps>(\n (props, ref) => <CheckboxHybrid {...props} ref={ref} />\n);\n\nCheckbox.displayName = \"Checkbox\";\nexport default Checkbox;\n","/\n Hybrid Checkbox component.\n * Automatically chooses between the Tailwind/CSS implementation (preferred —\n * no styled-components runtime) and the styled-components implementation\n * (when styled-system props or a `styled(Checkbox)` extension are detected).\n /\n\nimport as React from \"react\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\nimport CheckboxStyledComponents from \"./CheckboxStyledComponents\";\nimport { CheckboxTailwind } from \"./CheckboxTailwind\";\n\nconst CheckboxHybrid = React.forwardRef<HTMLInputElement, TypeCheckboxProps>(\n (props, ref) => {\n // Gate on `needsStyledComponents` (not just `hasStyledProps`) so that a bare\n // `styled(Checkbox)` extension — which injects `theme`/`forwardedComponent`\n // but no styled-system props — still renders the styled-components path and\n // keeps its SC styles. `needsStyledComponents` (via `isStyledExtension`)\n // already detects the injected `sc-...` className, so no extra class check is\n // needed here. This is an intentional deviation from ButtonHybrid, which\n // gates only on `hasStyledProps`.\n //\n // `appearance=\"pill\"` also routes here: the pill flow is unsupported on the\n // Tailwind path (removed per review), so it renders via the legacy\n // styled-components component, which still implements pill. This keeps the\n // public `appearance` type working with no silent default-box regression.\n if (props.appearance === \"pill\" \|\| needsStyledComponents(props)) {\n // Forward the ref on the SC path too, restoring the pre-migration instance\n // ref (pre-migration `Checkbox` was the class, so `styled(Checkbox)` /\n // `<Checkbox ref={r}/>` resolved `r` to the class instance). Mirrors\n // ButtonHybrid forwarding `ref \|\| innerRef` on both paths.\n return (\n <CheckboxStyledComponents\n {...props}\n ref={ref as unknown as React.Ref<CheckboxStyledComponents>}\n />\n );\n }\n\n // Use the Tailwind version (preferred - better performance)\n return <CheckboxTailwind {...props} ref={ref} />;\n }\n);\n\nCheckboxHybrid.displayName = \"Checkbox\";\nexport default CheckboxHybrid;\n","import * as React from \"react\";\nimport Container, {\n CheckboxBox,\n CheckIcon,\n PillInput,\n InputWrapper,\n LabelText,\n CheckboxContainer,\n} from \"./styles\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\n/*\n Legacy styled-components implementation of Checkbox.\n \n This is a verbatim move of the original `Checkbox` class component. It is\n * rendered by `CheckboxHybrid` whenever styled-components features are detected\n * (styled-system props or a `styled(Checkbox)` extension), preserving 100%\n * backward compatibility. The Tailwind/CSS implementation lives in\n * `CheckboxTailwind`.\n /\nexport default class CheckboxStyledComponents extends React.Component<TypeCheckboxProps> {\n el: HTMLInputElement \| null \| undefined;\n static defaultProps = {\n indeterminate: false,\n disabled: false,\n };\n\n override componentDidUpdate(prevProps: TypeCheckboxProps) {\n if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n override componentDidMount() {\n if (this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {\n this.props.onChange?.(event);\n };\n\n override render() {\n const {\n id,\n value,\n name,\n label,\n labelProps,\n checked,\n disabled,\n indeterminate,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange,\n ariaLabel,\n appearance = \"default\",\n qa = {},\n tabIndex,\n inputProps = {},\n ...rest\n } = this.props;\n const isPill = appearance === \"pill\";\n // @ts-notes - tabIndex requires a number but can be a string\n const tabIndexInt =\n typeof tabIndex === \"string\" ? parseInt(tabIndex, 10) : tabIndex;\n\n // TODO: Refactor pill checkboxes to use fewer elements for performance gains\n if (!isPill) {\n return (\n <CheckboxContainer\n as={label && \"label\"}\n disabled={disabled}\n indeterminate={indeterminate}\n checked={checked}\n {...rest}\n >\n <input\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n {label && (\n <LabelText {...labelProps} disabled={disabled}>\n {label}\n </LabelText>\n )}\n </CheckboxContainer>\n );\n }\n\n return (\n <Container as={label && \"label\"} {...rest}>\n <InputWrapper appearance={appearance}>\n <PillInput\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n <CheckboxBox>\n <CheckIcon\n name={indeterminate ? \"minus-solid\" : \"check-solid\"}\n size=\"mini\"\n fixedWidth\n />\n </CheckboxBox>\n </InputWrapper>\n </Container>\n );\n }\n}\n","import as React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nconst Container = styled.span`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n\n ${COMMON}\n`;\nContainer.displayName = \"Checkbox\";\n\nexport const inputWrapperHoverStyles = css`\n background-color: ${(props) => props.theme.colors.app.background.base};\n`;\n\nexport const InputWrapper = styled(Box)<Pick<TypeCheckboxProps, \"appearance\">>`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n background-color: transparent;\n transition: all ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_inout};\n /* This solution is temporary. DS-1095 /\n mix-blend-mode: ${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"};\n ${pill}\n\n &:hover {\n ${inputWrapperHoverStyles}\n }\n\n ${PillInput} {\n ${pill}\n }\n `}\n`;\nInputWrapper.displayName = \"InputWrapper\";\n\nexport const CheckboxBox = styled.div`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.form.background.base};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n background-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n pointer-events: none;\n`;\nCheckboxBox.displayName = \"CheckboxBox\";\n\nexport const CheckIcon = styled(Icon).attrs({ \"aria-hidden\": true })`\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n transition: all\n ${({ theme }) => `${theme.duration.fast} ${theme.easing.ease_inout}`};\n\n &,\n & .Icon-svg {\n width: 10px;\n height: 10px;\n line-height: 10px;\n }\n`;\nCheckIcon.displayName = \"CheckIcon\";\n\nexport const pillInputHoverStyles = css<Pick<TypeCheckboxProps, \"disabled\">>`\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${(props) => (props.disabled ? 0 : 1)};\n color: ${(props) => props.theme.colors.form.border.base};\n }\n`;\n\nexport const PillInput = styled.input`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n border-radius: 4px;\n\n / IE 11 overrides /\n &::-ms-check {\n display: none;\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${(props) =>\n !props.checked &&\n css`\n &:hover,\n &:focus {\n ${pillInputHoverStyles}\n }\n `}\n\n ${(props) =>\n props.checked &&\n css`\n ~ ${CheckboxBox} {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: 1;\n color: ${props.theme.colors.icon.inverse};\n }\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ~ ${CheckboxBox} {\n opacity: 0.4;\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${props.checked ? 1 : 0};\n }\n `}\n`;\nPillInput.displayName = \"PillInput\";\n\nexport const LabelText = styled(Text)<Pick<TypeCheckboxProps, \"disabled\">>`\n margin-left: ${(props) => props.theme.space[300]};\n font-size: ${(props) => props.theme.typography[200].fontSize};\n line-height: 1;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n color: ${(props) => props.theme.colors.text.headline};\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n `}\n`;\nLabelText.displayName = \"LabelText\";\n\nconst checkSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46\"\n fill={color}\n />\n </svg>\n);\n\nconst indeterminateSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"10\" height=\"2\" x=\"2\" y=\"6\" rx=\"1\" ry=\"1\" fill={color} />\n </svg>\n);\n\nconst getIcon = (type: \"indeterminate\" \| \"check\", color: string) => {\n const escapedColor = encodeURIComponent(color);\n const icon =\n type === \"indeterminate\"\n ? indeterminateSVG(escapedColor)\n : checkSVG(escapedColor);\n return icon;\n};\n\nexport const checkboxContainerHoverStyles = css<\n Pick<TypeCheckboxProps, \"disabled\" \| \"checked\">\n>`\n &:before {\n opacity: ${(props) => (props.disabled && !props.checked ? 0 : 1)};\n }\n`;\n/ stylelint-disable eslint-disable /\nexport const CheckboxContainer = styled.span<\n Pick<TypeCheckboxProps, \"indeterminate\" \| \"checked\" \| \"disabled\">\n>(\n (props) => css`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};\n\n @supports (-webkit-appearance: none) {\n &:before {\n / The following line cannot have multiple lint exclusions, otherwise it will not work\n the svg data url MUST be single quoted /\n / prettier-ignore /\n content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(\n getIcon(\n props.indeterminate ? \"indeterminate\" : \"check\",\n props.checked\n ? props.theme.colors.form.background.base\n : props.theme.colors.form.border.base\n )\n )}');\n opacity: ${props.checked ? 1 : 0};\n position: absolute;\n / typography.300.fontSize matches space.400 (16px)\n this fixes an offset checkmark if there is another font size in the cascade /\n font-size: ${(props) => props.theme.typography[300].fontSize};\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n text-align: center;\n transform: translateY(1px);\n line-height: 1;\n margin: auto;\n pointer-events: none;\n transition: ${props.theme.duration.fast}\n ${props.theme.easing.ease_inout};\n }\n\n &:hover:before {\n ${checkboxContainerHoverStyles}\n }\n\n ${props.disabled &&\n css`\n opacity: 0.4;\n `}\n\n input[type='checkbox'] {\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n padding: 0;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n border: 1px solid ${props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${props.theme.colors.form.background.base};\n transition: all ${props.theme.duration.fast}\n ${props.theme.easing.ease_in};\n cursor: ${props.disabled ? \"not-allowed\" : \"pointer\"};\n flex-shrink: 0;\n\n &:not(:checked) {\n ${!props.indeterminate &&\n css`\n border-color: ${props.theme.colors.form.border\n .base} !important; / We don't want the focus ring to remove the border /\n background-color: ${props.theme.colors.form.background.base};\n `}\n }\n\n &:checked {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n\n ${props.indeterminate &&\n props.checked &&\n css`\n border-color: ${props.theme.colors.form.border.selected} !important;\n background-color: ${props.theme.colors.form.background\n .selected} !important;\n `}\n\n &:focus {\n ${focusRing}\n }\n }\n }\n\n ${COMMON}\n `\n);\n\nexport default Container;\n","/\n Tailwind/CSS implementation of the Checkbox component.\n * Uses the Seeds checkbox CSS classes from checkbox.css.\n \n Renders the default appearance only: a styled wrapper around `@base-ui/react`'s\n * Checkbox: `Checkbox.Root` renders a `<button role=\"checkbox\">` (the box) plus\n * a hidden `<input>` for form participation, and `Checkbox.Indicator` holds the\n * real `<Icon>` mark. base-ui owns `checked` / `indeterminate` / `disabled` as\n * first-class state props, so there is no imperative `indeterminate` sync and no\n * mask-image pseudo-element. The public API (`TypeCheckboxProps`) and every\n * `data-qa` attribute are preserved unchanged so consumers need no changes. The\n * pill appearance is unsupported on this path — `CheckboxHybrid` routes\n * `appearance=\"pill\"` to the legacy styled-components component.\n /\n\nimport as React from \"react\";\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string \| undefined \| null \| false \| Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\nexport const CheckboxTailwind = React.forwardRef<\n HTMLInputElement,\n TypeCheckboxProps\n>((props, ref) => {\n const {\n id,\n value,\n name,\n label,\n labelProps,\n checked,\n disabled = false,\n indeterminate = false,\n onChange,\n ariaLabel,\n // Destructured only to strip it from `...rest` (so it is never spread onto\n // the wrapper DOM element). `appearance=\"pill\"` is routed to the legacy\n // styled-components component by `CheckboxHybrid`, so this path only ever\n // renders the default appearance.\n appearance,\n qa = {},\n tabIndex,\n inputProps = {},\n className,\n ...rest\n } = props;\n\n // @ts-notes - tabIndex requires a number but can be a string\n const tabIndexInt =\n typeof tabIndex === \"string\" ? parseInt(tabIndex, 10) : tabIndex;\n\n const Wrapper = (label ? \"label\" : \"span\") as React.ElementType;\n\n // Shared data-qa contract — identical names/values to the legacy\n // styled-components path. `data-qa-checkbox-ischecked` is the tri-state string\n // contract: \"indeterminate\" \| true \| false.\n const qaProps = {\n \"data-qa-checkbox\": id,\n \"data-qa-checkbox-ischecked\": indeterminate\n ? \"indeterminate\"\n : checked === true,\n \"data-qa-checkbox-isdisabled\": disabled === true,\n };\n\n // Gate `indeterminate` on `checked` so an unchecked-but-indeterminate box\n // renders empty (identical to a plain unchecked box) rather than showing the\n // dash. This matches the styled-components spec, where the mark's opacity is\n // `checked ? 1 : 0` regardless of `indeterminate` (styles.tsx:224). Truth\n // table: checked+indeterminate → dash, checked → check, anything unchecked →\n // empty. The raw `indeterminate` prop still drives `qaProps` so the\n // `data-qa-checkbox-ischecked=\"indeterminate\"` contract is unchanged.\n const effectiveIndeterminate = checked === true && indeterminate;\n // Bridge the public `onChange(SyntheticEvent)` API onto base-ui's\n // #FUTURE CLEANUP - Ideally we'd just lean into base-ui's API, but that is a large breaking change.\n // For now, this is some code I hate, but keeping it to transform base-ui's event into synthetic event\n const handleCheckedChange = (next: boolean, eventOrDetails: unknown) => {\n // No `onChange` → nothing to forward. The control stays fully controlled\n // via the `checked`/`indeterminate` props passed to `Checkbox.Root`, so a\n // click on a controlled box still snaps back to the prop.\n if (!onChange) return;\n\n const nativeEvent =\n eventOrDetails instanceof Event\n ? eventOrDetails\n : (eventOrDetails as { event?: Event } \| null \| undefined)?.event;\n\n // Prefer the real hidden <input> as the event target when base-ui fired\n // from it (its `.checked`/`.value` already satisfy the contract); otherwise\n // synthesize a native-input-shaped target from `next`.\n const nativeTarget = nativeEvent?.target as unknown as\n \| HTMLInputElement\n \| undefined;\n\n const target =\n nativeTarget && typeof nativeTarget.checked === \"boolean\"\n ? nativeTarget\n : {\n checked: next,\n value: value ?? \"\",\n name: name ?? \"\",\n id,\n type: \"checkbox\",\n };\n\n // Always deliver a SyntheticEvent shape with a real `.nativeEvent`, so the\n // `e.nativeEvent`-reading contract (e.g. shiftKey) is preserved on both the\n // hidden-input and synthesized paths.\n onChange({\n nativeEvent,\n target,\n currentTarget: target,\n type: nativeEvent?.type ?? \"change\",\n preventDefault: () => nativeEvent?.preventDefault?.(),\n stopPropagation: () => nativeEvent?.stopPropagation?.(),\n } as unknown as React.SyntheticEvent<HTMLInputElement>);\n };\n\n return (\n <Wrapper className={cn(\"seeds-checkbox\", className)} {...rest}>\n <BaseCheckbox.Root\n id={id}\n checked={checked}\n indeterminate={effectiveIndeterminate}\n disabled={disabled}\n onCheckedChange={handleCheckedChange}\n // Forwarded ref targets the hidden <input> so the HTMLInputElement\n // contract is preserved.\n inputRef={ref ?? undefined}\n className=\"seeds-checkbox-input\"\n aria-label={ariaLabel}\n tabIndex={tabIndexInt}\n // `name`/`value` feed base-ui's hidden form <input>. Spread (rather\n // than as explicit attributes) so they pass through regardless of\n // base-ui's exact prop typing.\n {...{ name, value }}\n {...qaProps}\n {...qa}\n // `inputProps` is typed for a native <input>; base-ui forwards unknown\n // props to the rendered <button>. Spread last so consumers can still\n // override computed attributes (e.g. aria-label).\n {...(inputProps as unknown as React.ComponentProps<\n typeof BaseCheckbox.Root\n >)}\n >\n {/* keepMounted so the mark is always in the DOM; CSS toggles its\n visibility from base-ui's aria-checked state (true \| mixed). /}\n <BaseCheckbox.Indicator\n className=\"seeds-checkbox-indicator\"\n keepMounted\n >\n <Icon\n className=\"seeds-checkbox-icon\"\n name={effectiveIndeterminate ? \"minus-solid\" : \"check-solid\"}\n size=\"mini\"\n fixedWidth\n />\n </BaseCheckbox.Indicator>\n </BaseCheckbox.Root>\n {label && (\n <span\n className=\"seeds-checkbox-label\"\n {...(labelProps as React.HTMLAttributes<HTMLSpanElement>)}\n >\n {label}\n </span>\n )}\n </Wrapper>\n );\n});\n\nCheckboxTailwind.displayName = \"CheckboxTailwind\";\n","import as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeCheckboxProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** ID of the form element, should match the \"for\" value of the associated label /\n id: string;\n value?: string;\n name?: string;\n\n /* Label text to display next to the checkbox /\n label?: string;\n\n /* Label used to describe the input (if not used with an accompanying visual label) /\n ariaLabel?: string;\n labelProps?: TypeTextProps;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n onChange?: (event: React.SyntheticEvent<HTMLInputElement>) => void;\n appearance?: \"pill\" \| \"default\";\n qa?: object;\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n}\n","import Checkbox from \"./Checkbox\";\n\nexport default Checkbox;\nexport { Checkbox };\nexport from \"./types/CheckboxTypes\";\nexport * from \"./styles\";\n"],"mappings":"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","names":["React","React","React","props","jsx","React","Icon","jsx","jsxs","jsx","jsx"]}

package/dist/index.d.mts CHANGED Viewed

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
 import * as _sproutsocial_seeds_react_text from '@sproutsocial/seeds-react-text';
 import { TypeTextProps } from '@sproutsocial/seeds-react-text';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _sproutsocial_seeds_react_icon from '@sproutsocial/seeds-react-icon';
 import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
 import * as styled_components from 'styled-components';
@@ -20,23 +20,18 @@ interface TypeCheckboxProps extends TypeStyledComponentsCommonProps, TypeSystemC
     checked?: boolean;
     indeterminate?: boolean;
     disabled?: boolean;
-    onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.SyntheticEvent<HTMLInputElement>) => void;
     appearance?: "pill" | "default";
     qa?: object;
     inputProps?: React.ComponentPropsWithoutRef<"input">;
 }
-declare class Checkbox extends React.Component<TypeCheckboxProps> {
-    el: HTMLInputElement | null | undefined;
-    static defaultProps: {
-        indeterminate: boolean;
-        disabled: boolean;
-    };
-    componentDidUpdate(prevProps: TypeCheckboxProps): void;
-    componentDidMount(): void;
-    handleChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;
-    render(): react_jsx_runtime.JSX.Element;
-}
+/**
+ * Checkbox component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or a styled() extension).
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<TypeCheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare const inputWrapperHoverStyles: styled_components.FlattenInterpolation<styled_components.ThemeProps<any>>;
 declare const InputWrapper: styled_components.StyledComponent<React.ForwardRefExoticComponent<Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>, any, Pick<TypeCheckboxProps, "appearance">, never>;

package/dist/index.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
 import * as _sproutsocial_seeds_react_text from '@sproutsocial/seeds-react-text';
 import { TypeTextProps } from '@sproutsocial/seeds-react-text';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _sproutsocial_seeds_react_icon from '@sproutsocial/seeds-react-icon';
 import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
 import * as styled_components from 'styled-components';
@@ -20,23 +20,18 @@ interface TypeCheckboxProps extends TypeStyledComponentsCommonProps, TypeSystemC
     checked?: boolean;
     indeterminate?: boolean;
     disabled?: boolean;
-    onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.SyntheticEvent<HTMLInputElement>) => void;
     appearance?: "pill" | "default";
     qa?: object;
     inputProps?: React.ComponentPropsWithoutRef<"input">;
 }
-declare class Checkbox extends React.Component<TypeCheckboxProps> {
-    el: HTMLInputElement | null | undefined;
-    static defaultProps: {
-        indeterminate: boolean;
-        disabled: boolean;
-    };
-    componentDidUpdate(prevProps: TypeCheckboxProps): void;
-    componentDidMount(): void;
-    handleChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;
-    render(): react_jsx_runtime.JSX.Element;
-}
+/**
+ * Checkbox component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or a styled() extension).
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<TypeCheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare const inputWrapperHoverStyles: styled_components.FlattenInterpolation<styled_components.ThemeProps<any>>;
 declare const InputWrapper: styled_components.StyledComponent<React.ForwardRefExoticComponent<Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>, any, Pick<TypeCheckboxProps, "appearance">, never>;

package/dist/index.js CHANGED Viewed

@@ -31,7 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   CheckIcon: () => CheckIcon,
-  Checkbox: () => Checkbox,
+  Checkbox: () => Checkbox_default,
   CheckboxBox: () => CheckboxBox,
   CheckboxContainer: () => CheckboxContainer,
   InputWrapper: () => InputWrapper,
@@ -45,6 +45,13 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 // src/Checkbox.tsx
+var React5 = __toESM(require("react"));
+// src/CheckboxHybrid.tsx
+var React4 = __toESM(require("react"));
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+// src/CheckboxStyledComponents.tsx
 var React2 = __toESM(require("react"));
 // src/styles.tsx
@@ -301,9 +308,9 @@ var CheckboxContainer = import_styled_components.default.span(
 );
 var styles_default = Container;
-// src/Checkbox.tsx
+// src/CheckboxStyledComponents.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Checkbox = class extends React2.Component {
+var CheckboxStyledComponents = class extends React2.Component {
   el;
   static defaultProps = {
     indeterminate: false,
@@ -320,7 +327,7 @@ var Checkbox = class extends React2.Component {
     }
   }
   handleChange = (event) => {
-    this.props.onChange(event);
+    this.props.onChange?.(event);
   };
   render() {
     const {
@@ -411,11 +418,157 @@ var Checkbox = class extends React2.Component {
   }
 };
+// src/CheckboxTailwind.tsx
+var React3 = __toESM(require("react"));
+var import_checkbox = require("@base-ui/react/checkbox");
+var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var CheckboxTailwind = React3.forwardRef((props, ref) => {
+  const {
+    id,
+    value,
+    name,
+    label,
+    labelProps,
+    checked,
+    disabled = false,
+    indeterminate = false,
+    onChange,
+    ariaLabel,
+    // Destructured only to strip it from `...rest` (so it is never spread onto
+    // the wrapper DOM element). `appearance="pill"` is routed to the legacy
+    // styled-components component by `CheckboxHybrid`, so this path only ever
+    // renders the default appearance.
+    appearance,
+    qa = {},
+    tabIndex,
+    inputProps = {},
+    className,
+    ...rest
+  } = props;
+  const tabIndexInt = typeof tabIndex === "string" ? parseInt(tabIndex, 10) : tabIndex;
+  const Wrapper = label ? "label" : "span";
+  const qaProps = {
+    "data-qa-checkbox": id,
+    "data-qa-checkbox-ischecked": indeterminate ? "indeterminate" : checked === true,
+    "data-qa-checkbox-isdisabled": disabled === true
+  };
+  const effectiveIndeterminate = checked === true && indeterminate;
+  const handleCheckedChange = (next, eventOrDetails) => {
+    if (!onChange) return;
+    const nativeEvent = eventOrDetails instanceof Event ? eventOrDetails : eventOrDetails?.event;
+    const nativeTarget = nativeEvent?.target;
+    const target = nativeTarget && typeof nativeTarget.checked === "boolean" ? nativeTarget : {
+      checked: next,
+      value: value ?? "",
+      name: name ?? "",
+      id,
+      type: "checkbox"
+    };
+    onChange({
+      nativeEvent,
+      target,
+      currentTarget: target,
+      type: nativeEvent?.type ?? "change",
+      preventDefault: () => nativeEvent?.preventDefault?.(),
+      stopPropagation: () => nativeEvent?.stopPropagation?.()
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Wrapper, { className: cn("seeds-checkbox", className), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_checkbox.Checkbox.Root,
+      {
+        id,
+        checked,
+        indeterminate: effectiveIndeterminate,
+        disabled,
+        onCheckedChange: handleCheckedChange,
+        inputRef: ref ?? void 0,
+        className: "seeds-checkbox-input",
+        "aria-label": ariaLabel,
+        tabIndex: tabIndexInt,
+        ...{ name, value },
+        ...qaProps,
+        ...qa,
+        ...inputProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_checkbox.Checkbox.Indicator,
+          {
+            className: "seeds-checkbox-indicator",
+            keepMounted: true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_seeds_react_icon2.default,
+              {
+                className: "seeds-checkbox-icon",
+                name: effectiveIndeterminate ? "minus-solid" : "check-solid",
+                size: "mini",
+                fixedWidth: true
+              }
+            )
+          }
+        )
+      }
+    ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "span",
+      {
+        className: "seeds-checkbox-label",
+        ...labelProps,
+        children: label
+      }
+    )
+  ] });
+});
+CheckboxTailwind.displayName = "CheckboxTailwind";
+// src/CheckboxHybrid.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CheckboxHybrid = React4.forwardRef(
+  (props, ref) => {
+    if (props.appearance === "pill" || (0, import_seeds_react_system_props2.needsStyledComponents)(props)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        CheckboxStyledComponents,
+        {
+          ...props,
+          ref
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckboxTailwind, { ...props, ref });
+  }
+);
+CheckboxHybrid.displayName = "Checkbox";
+var CheckboxHybrid_default = CheckboxHybrid;
+// src/Checkbox.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Checkbox = React5.forwardRef(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxHybrid_default, { ...props, ref })
+);
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = Checkbox;
 // src/types/CheckboxTypes.ts
-var React3 = require("react");
+var React6 = require("react");
 // src/index.ts
-var index_default = Checkbox;
+var index_default = Checkbox_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CheckIcon,

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts","../src/Checkbox.tsx","../src/styles.tsx","../src/types/CheckboxTypes.ts"],"sourcesContent":["import Checkbox from \"./Checkbox\";\n\nexport default Checkbox;\nexport { Checkbox };\nexport * from \"./types/CheckboxTypes\";\nexport * from \"./styles\";\n","import * as React from \"react\";\nimport Container, {\n CheckboxBox,\n CheckIcon,\n PillInput,\n InputWrapper,\n LabelText,\n CheckboxContainer,\n} from \"./styles\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nexport default class Checkbox extends React.Component<TypeCheckboxProps> {\n el: HTMLInputElement \| null \| undefined;\n static defaultProps = {\n indeterminate: false,\n disabled: false,\n };\n\n override componentDidUpdate(prevProps: TypeCheckboxProps) {\n if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n override componentDidMount() {\n if (this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {\n this.props.onChange(event);\n };\n\n override render() {\n const {\n id,\n value,\n name,\n label,\n labelProps,\n checked,\n disabled,\n indeterminate,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange,\n ariaLabel,\n appearance = \"default\",\n qa = {},\n tabIndex,\n inputProps = {},\n ...rest\n } = this.props;\n const isPill = appearance === \"pill\";\n // @ts-notes - tabIndex requires a number but can be a string\n const tabIndexInt =\n typeof tabIndex === \"string\" ? parseInt(tabIndex, 10) : tabIndex;\n\n // TODO: Refactor pill checkboxes to use fewer elements for performance gains\n if (!isPill) {\n return (\n <CheckboxContainer\n as={label && \"label\"}\n disabled={disabled}\n indeterminate={indeterminate}\n checked={checked}\n {...rest}\n >\n <input\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n {label && (\n <LabelText {...labelProps} disabled={disabled}>\n {label}\n </LabelText>\n )}\n </CheckboxContainer>\n );\n }\n\n return (\n <Container as={label && \"label\"} {...rest}>\n <InputWrapper appearance={appearance}>\n <PillInput\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n <CheckboxBox>\n <CheckIcon\n name={indeterminate ? \"minus-solid\" : \"check-solid\"}\n size=\"mini\"\n fixedWidth\n />\n </CheckboxBox>\n </InputWrapper>\n </Container>\n );\n }\n}\n","import * as React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nconst Container = styled.span`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n\n ${COMMON}\n`;\nContainer.displayName = \"Checkbox\";\n\nexport const inputWrapperHoverStyles = css`\n background-color: ${(props) => props.theme.colors.app.background.base};\n`;\n\nexport const InputWrapper = styled(Box)<Pick<TypeCheckboxProps, \"appearance\">>`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n background-color: transparent;\n transition: all ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_inout};\n /* This solution is temporary. DS-1095 /\n mix-blend-mode: ${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"};\n ${pill}\n\n &:hover {\n ${inputWrapperHoverStyles}\n }\n\n ${PillInput} {\n ${pill}\n }\n `}\n`;\nInputWrapper.displayName = \"InputWrapper\";\n\nexport const CheckboxBox = styled.div`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.form.background.base};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n background-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n pointer-events: none;\n`;\nCheckboxBox.displayName = \"CheckboxBox\";\n\nexport const CheckIcon = styled(Icon).attrs({ \"aria-hidden\": true })`\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n transition: all\n ${({ theme }) => `${theme.duration.fast} ${theme.easing.ease_inout}`};\n\n &,\n & .Icon-svg {\n width: 10px;\n height: 10px;\n line-height: 10px;\n }\n`;\nCheckIcon.displayName = \"CheckIcon\";\n\nexport const pillInputHoverStyles = css<Pick<TypeCheckboxProps, \"disabled\">>`\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${(props) => (props.disabled ? 0 : 1)};\n color: ${(props) => props.theme.colors.form.border.base};\n }\n`;\n\nexport const PillInput = styled.input`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n border-radius: 4px;\n\n / IE 11 overrides /\n &::-ms-check {\n display: none;\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${(props) =>\n !props.checked &&\n css`\n &:hover,\n &:focus {\n ${pillInputHoverStyles}\n }\n `}\n\n ${(props) =>\n props.checked &&\n css`\n ~ ${CheckboxBox} {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: 1;\n color: ${props.theme.colors.icon.inverse};\n }\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ~ ${CheckboxBox} {\n opacity: 0.4;\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${props.checked ? 1 : 0};\n }\n `}\n`;\nPillInput.displayName = \"PillInput\";\n\nexport const LabelText = styled(Text)<Pick<TypeCheckboxProps, \"disabled\">>`\n margin-left: ${(props) => props.theme.space[300]};\n font-size: ${(props) => props.theme.typography[200].fontSize};\n line-height: 1;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n color: ${(props) => props.theme.colors.text.headline};\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n `}\n`;\nLabelText.displayName = \"LabelText\";\n\nconst checkSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46\"\n fill={color}\n />\n </svg>\n);\n\nconst indeterminateSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"10\" height=\"2\" x=\"2\" y=\"6\" rx=\"1\" ry=\"1\" fill={color} />\n </svg>\n);\n\nconst getIcon = (type: \"indeterminate\" \| \"check\", color: string) => {\n const escapedColor = encodeURIComponent(color);\n const icon =\n type === \"indeterminate\"\n ? indeterminateSVG(escapedColor)\n : checkSVG(escapedColor);\n return icon;\n};\n\nexport const checkboxContainerHoverStyles = css<\n Pick<TypeCheckboxProps, \"disabled\" \| \"checked\">\n>`\n &:before {\n opacity: ${(props) => (props.disabled && !props.checked ? 0 : 1)};\n }\n`;\n/ stylelint-disable eslint-disable /\nexport const CheckboxContainer = styled.span<\n Pick<TypeCheckboxProps, \"indeterminate\" \| \"checked\" \| \"disabled\">\n>(\n (props) => css`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};\n\n @supports (-webkit-appearance: none) {\n &:before {\n / The following line cannot have multiple lint exclusions, otherwise it will not work\n the svg data url MUST be single quoted /\n / prettier-ignore /\n content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(\n getIcon(\n props.indeterminate ? \"indeterminate\" : \"check\",\n props.checked\n ? props.theme.colors.form.background.base\n : props.theme.colors.form.border.base\n )\n )}');\n opacity: ${props.checked ? 1 : 0};\n position: absolute;\n / typography.300.fontSize matches space.400 (16px)\n this fixes an offset checkmark if there is another font size in the cascade /\n font-size: ${(props) => props.theme.typography[300].fontSize};\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n text-align: center;\n transform: translateY(1px);\n line-height: 1;\n margin: auto;\n pointer-events: none;\n transition: ${props.theme.duration.fast}\n ${props.theme.easing.ease_inout};\n }\n\n &:hover:before {\n ${checkboxContainerHoverStyles}\n }\n\n ${props.disabled &&\n css`\n opacity: 0.4;\n `}\n\n input[type='checkbox'] {\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n padding: 0;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n border: 1px solid ${props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${props.theme.colors.form.background.base};\n transition: all ${props.theme.duration.fast}\n ${props.theme.easing.ease_in};\n cursor: ${props.disabled ? \"not-allowed\" : \"pointer\"};\n flex-shrink: 0;\n\n &:not(:checked) {\n ${!props.indeterminate &&\n css`\n border-color: ${props.theme.colors.form.border\n .base} !important; / We don't want the focus ring to remove the border /\n background-color: ${props.theme.colors.form.background.base};\n `}\n }\n\n &:checked {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n\n ${props.indeterminate &&\n props.checked &&\n css`\n border-color: ${props.theme.colors.form.border.selected} !important;\n background-color: ${props.theme.colors.form.background\n .selected} !important;\n `}\n\n &:focus {\n ${focusRing}\n }\n }\n }\n\n ${COMMON}\n `\n);\n\nexport default Container;\n","import as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeCheckboxProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** ID of the form element, should match the \"for\" value of the associated label /\n id: string;\n value?: string;\n name?: string;\n\n /* Label text to display next to the checkbox /\n label?: string;\n\n /* Label used to describe the input (if not used with an accompanying visual label) */\n ariaLabel?: string;\n labelProps?: TypeTextProps;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;\n appearance?: \"pill\" \| \"default\";\n qa?: object;\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n}\n"],"mappings":"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","names":["React","styled","Box","props","Icon","Text","import_jsx_runtime","React"]}
1	+ {"version":3,"sources":["../src/index.ts","../src/Checkbox.tsx","../src/CheckboxHybrid.tsx","../src/CheckboxStyledComponents.tsx","../src/styles.tsx","../src/CheckboxTailwind.tsx","../src/types/CheckboxTypes.ts"],"sourcesContent":["import Checkbox from \"./Checkbox\";\n\nexport default Checkbox;\nexport { Checkbox };\nexport * from \"./types/CheckboxTypes\";\nexport * from \"./styles\";\n","import * as React from \"react\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\nimport CheckboxHybrid from \"./CheckboxHybrid\";\n\n/*\n Checkbox component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n /\nconst Checkbox = React.forwardRef<HTMLInputElement, TypeCheckboxProps>(\n (props, ref) => <CheckboxHybrid {...props} ref={ref} />\n);\n\nCheckbox.displayName = \"Checkbox\";\nexport default Checkbox;\n","/\n Hybrid Checkbox component.\n * Automatically chooses between the Tailwind/CSS implementation (preferred —\n * no styled-components runtime) and the styled-components implementation\n * (when styled-system props or a `styled(Checkbox)` extension are detected).\n /\n\nimport as React from \"react\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\nimport CheckboxStyledComponents from \"./CheckboxStyledComponents\";\nimport { CheckboxTailwind } from \"./CheckboxTailwind\";\n\nconst CheckboxHybrid = React.forwardRef<HTMLInputElement, TypeCheckboxProps>(\n (props, ref) => {\n // Gate on `needsStyledComponents` (not just `hasStyledProps`) so that a bare\n // `styled(Checkbox)` extension — which injects `theme`/`forwardedComponent`\n // but no styled-system props — still renders the styled-components path and\n // keeps its SC styles. `needsStyledComponents` (via `isStyledExtension`)\n // already detects the injected `sc-...` className, so no extra class check is\n // needed here. This is an intentional deviation from ButtonHybrid, which\n // gates only on `hasStyledProps`.\n //\n // `appearance=\"pill\"` also routes here: the pill flow is unsupported on the\n // Tailwind path (removed per review), so it renders via the legacy\n // styled-components component, which still implements pill. This keeps the\n // public `appearance` type working with no silent default-box regression.\n if (props.appearance === \"pill\" \|\| needsStyledComponents(props)) {\n // Forward the ref on the SC path too, restoring the pre-migration instance\n // ref (pre-migration `Checkbox` was the class, so `styled(Checkbox)` /\n // `<Checkbox ref={r}/>` resolved `r` to the class instance). Mirrors\n // ButtonHybrid forwarding `ref \|\| innerRef` on both paths.\n return (\n <CheckboxStyledComponents\n {...props}\n ref={ref as unknown as React.Ref<CheckboxStyledComponents>}\n />\n );\n }\n\n // Use the Tailwind version (preferred - better performance)\n return <CheckboxTailwind {...props} ref={ref} />;\n }\n);\n\nCheckboxHybrid.displayName = \"Checkbox\";\nexport default CheckboxHybrid;\n","import * as React from \"react\";\nimport Container, {\n CheckboxBox,\n CheckIcon,\n PillInput,\n InputWrapper,\n LabelText,\n CheckboxContainer,\n} from \"./styles\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\n/*\n Legacy styled-components implementation of Checkbox.\n \n This is a verbatim move of the original `Checkbox` class component. It is\n * rendered by `CheckboxHybrid` whenever styled-components features are detected\n * (styled-system props or a `styled(Checkbox)` extension), preserving 100%\n * backward compatibility. The Tailwind/CSS implementation lives in\n * `CheckboxTailwind`.\n /\nexport default class CheckboxStyledComponents extends React.Component<TypeCheckboxProps> {\n el: HTMLInputElement \| null \| undefined;\n static defaultProps = {\n indeterminate: false,\n disabled: false,\n };\n\n override componentDidUpdate(prevProps: TypeCheckboxProps) {\n if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n override componentDidMount() {\n if (this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {\n this.props.onChange?.(event);\n };\n\n override render() {\n const {\n id,\n value,\n name,\n label,\n labelProps,\n checked,\n disabled,\n indeterminate,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange,\n ariaLabel,\n appearance = \"default\",\n qa = {},\n tabIndex,\n inputProps = {},\n ...rest\n } = this.props;\n const isPill = appearance === \"pill\";\n // @ts-notes - tabIndex requires a number but can be a string\n const tabIndexInt =\n typeof tabIndex === \"string\" ? parseInt(tabIndex, 10) : tabIndex;\n\n // TODO: Refactor pill checkboxes to use fewer elements for performance gains\n if (!isPill) {\n return (\n <CheckboxContainer\n as={label && \"label\"}\n disabled={disabled}\n indeterminate={indeterminate}\n checked={checked}\n {...rest}\n >\n <input\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n {label && (\n <LabelText {...labelProps} disabled={disabled}>\n {label}\n </LabelText>\n )}\n </CheckboxContainer>\n );\n }\n\n return (\n <Container as={label && \"label\"} {...rest}>\n <InputWrapper appearance={appearance}>\n <PillInput\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n <CheckboxBox>\n <CheckIcon\n name={indeterminate ? \"minus-solid\" : \"check-solid\"}\n size=\"mini\"\n fixedWidth\n />\n </CheckboxBox>\n </InputWrapper>\n </Container>\n );\n }\n}\n","import as React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nconst Container = styled.span`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n\n ${COMMON}\n`;\nContainer.displayName = \"Checkbox\";\n\nexport const inputWrapperHoverStyles = css`\n background-color: ${(props) => props.theme.colors.app.background.base};\n`;\n\nexport const InputWrapper = styled(Box)<Pick<TypeCheckboxProps, \"appearance\">>`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n background-color: transparent;\n transition: all ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_inout};\n /* This solution is temporary. DS-1095 /\n mix-blend-mode: ${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"};\n ${pill}\n\n &:hover {\n ${inputWrapperHoverStyles}\n }\n\n ${PillInput} {\n ${pill}\n }\n `}\n`;\nInputWrapper.displayName = \"InputWrapper\";\n\nexport const CheckboxBox = styled.div`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.form.background.base};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n background-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n pointer-events: none;\n`;\nCheckboxBox.displayName = \"CheckboxBox\";\n\nexport const CheckIcon = styled(Icon).attrs({ \"aria-hidden\": true })`\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n transition: all\n ${({ theme }) => `${theme.duration.fast} ${theme.easing.ease_inout}`};\n\n &,\n & .Icon-svg {\n width: 10px;\n height: 10px;\n line-height: 10px;\n }\n`;\nCheckIcon.displayName = \"CheckIcon\";\n\nexport const pillInputHoverStyles = css<Pick<TypeCheckboxProps, \"disabled\">>`\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${(props) => (props.disabled ? 0 : 1)};\n color: ${(props) => props.theme.colors.form.border.base};\n }\n`;\n\nexport const PillInput = styled.input`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n border-radius: 4px;\n\n / IE 11 overrides /\n &::-ms-check {\n display: none;\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${(props) =>\n !props.checked &&\n css`\n &:hover,\n &:focus {\n ${pillInputHoverStyles}\n }\n `}\n\n ${(props) =>\n props.checked &&\n css`\n ~ ${CheckboxBox} {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: 1;\n color: ${props.theme.colors.icon.inverse};\n }\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ~ ${CheckboxBox} {\n opacity: 0.4;\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${props.checked ? 1 : 0};\n }\n `}\n`;\nPillInput.displayName = \"PillInput\";\n\nexport const LabelText = styled(Text)<Pick<TypeCheckboxProps, \"disabled\">>`\n margin-left: ${(props) => props.theme.space[300]};\n font-size: ${(props) => props.theme.typography[200].fontSize};\n line-height: 1;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n color: ${(props) => props.theme.colors.text.headline};\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n `}\n`;\nLabelText.displayName = \"LabelText\";\n\nconst checkSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46\"\n fill={color}\n />\n </svg>\n);\n\nconst indeterminateSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"10\" height=\"2\" x=\"2\" y=\"6\" rx=\"1\" ry=\"1\" fill={color} />\n </svg>\n);\n\nconst getIcon = (type: \"indeterminate\" \| \"check\", color: string) => {\n const escapedColor = encodeURIComponent(color);\n const icon =\n type === \"indeterminate\"\n ? indeterminateSVG(escapedColor)\n : checkSVG(escapedColor);\n return icon;\n};\n\nexport const checkboxContainerHoverStyles = css<\n Pick<TypeCheckboxProps, \"disabled\" \| \"checked\">\n>`\n &:before {\n opacity: ${(props) => (props.disabled && !props.checked ? 0 : 1)};\n }\n`;\n/ stylelint-disable eslint-disable /\nexport const CheckboxContainer = styled.span<\n Pick<TypeCheckboxProps, \"indeterminate\" \| \"checked\" \| \"disabled\">\n>(\n (props) => css`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};\n\n @supports (-webkit-appearance: none) {\n &:before {\n / The following line cannot have multiple lint exclusions, otherwise it will not work\n the svg data url MUST be single quoted /\n / prettier-ignore /\n content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(\n getIcon(\n props.indeterminate ? \"indeterminate\" : \"check\",\n props.checked\n ? props.theme.colors.form.background.base\n : props.theme.colors.form.border.base\n )\n )}');\n opacity: ${props.checked ? 1 : 0};\n position: absolute;\n / typography.300.fontSize matches space.400 (16px)\n this fixes an offset checkmark if there is another font size in the cascade /\n font-size: ${(props) => props.theme.typography[300].fontSize};\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n text-align: center;\n transform: translateY(1px);\n line-height: 1;\n margin: auto;\n pointer-events: none;\n transition: ${props.theme.duration.fast}\n ${props.theme.easing.ease_inout};\n }\n\n &:hover:before {\n ${checkboxContainerHoverStyles}\n }\n\n ${props.disabled &&\n css`\n opacity: 0.4;\n `}\n\n input[type='checkbox'] {\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n padding: 0;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n border: 1px solid ${props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${props.theme.colors.form.background.base};\n transition: all ${props.theme.duration.fast}\n ${props.theme.easing.ease_in};\n cursor: ${props.disabled ? \"not-allowed\" : \"pointer\"};\n flex-shrink: 0;\n\n &:not(:checked) {\n ${!props.indeterminate &&\n css`\n border-color: ${props.theme.colors.form.border\n .base} !important; / We don't want the focus ring to remove the border /\n background-color: ${props.theme.colors.form.background.base};\n `}\n }\n\n &:checked {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n\n ${props.indeterminate &&\n props.checked &&\n css`\n border-color: ${props.theme.colors.form.border.selected} !important;\n background-color: ${props.theme.colors.form.background\n .selected} !important;\n `}\n\n &:focus {\n ${focusRing}\n }\n }\n }\n\n ${COMMON}\n `\n);\n\nexport default Container;\n","/\n Tailwind/CSS implementation of the Checkbox component.\n * Uses the Seeds checkbox CSS classes from checkbox.css.\n \n Renders the default appearance only: a styled wrapper around `@base-ui/react`'s\n * Checkbox: `Checkbox.Root` renders a `<button role=\"checkbox\">` (the box) plus\n * a hidden `<input>` for form participation, and `Checkbox.Indicator` holds the\n * real `<Icon>` mark. base-ui owns `checked` / `indeterminate` / `disabled` as\n * first-class state props, so there is no imperative `indeterminate` sync and no\n * mask-image pseudo-element. The public API (`TypeCheckboxProps`) and every\n * `data-qa` attribute are preserved unchanged so consumers need no changes. The\n * pill appearance is unsupported on this path — `CheckboxHybrid` routes\n * `appearance=\"pill\"` to the legacy styled-components component.\n /\n\nimport as React from \"react\";\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string \| undefined \| null \| false \| Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\nexport const CheckboxTailwind = React.forwardRef<\n HTMLInputElement,\n TypeCheckboxProps\n>((props, ref) => {\n const {\n id,\n value,\n name,\n label,\n labelProps,\n checked,\n disabled = false,\n indeterminate = false,\n onChange,\n ariaLabel,\n // Destructured only to strip it from `...rest` (so it is never spread onto\n // the wrapper DOM element). `appearance=\"pill\"` is routed to the legacy\n // styled-components component by `CheckboxHybrid`, so this path only ever\n // renders the default appearance.\n appearance,\n qa = {},\n tabIndex,\n inputProps = {},\n className,\n ...rest\n } = props;\n\n // @ts-notes - tabIndex requires a number but can be a string\n const tabIndexInt =\n typeof tabIndex === \"string\" ? parseInt(tabIndex, 10) : tabIndex;\n\n const Wrapper = (label ? \"label\" : \"span\") as React.ElementType;\n\n // Shared data-qa contract — identical names/values to the legacy\n // styled-components path. `data-qa-checkbox-ischecked` is the tri-state string\n // contract: \"indeterminate\" \| true \| false.\n const qaProps = {\n \"data-qa-checkbox\": id,\n \"data-qa-checkbox-ischecked\": indeterminate\n ? \"indeterminate\"\n : checked === true,\n \"data-qa-checkbox-isdisabled\": disabled === true,\n };\n\n // Gate `indeterminate` on `checked` so an unchecked-but-indeterminate box\n // renders empty (identical to a plain unchecked box) rather than showing the\n // dash. This matches the styled-components spec, where the mark's opacity is\n // `checked ? 1 : 0` regardless of `indeterminate` (styles.tsx:224). Truth\n // table: checked+indeterminate → dash, checked → check, anything unchecked →\n // empty. The raw `indeterminate` prop still drives `qaProps` so the\n // `data-qa-checkbox-ischecked=\"indeterminate\"` contract is unchanged.\n const effectiveIndeterminate = checked === true && indeterminate;\n // Bridge the public `onChange(SyntheticEvent)` API onto base-ui's\n // #FUTURE CLEANUP - Ideally we'd just lean into base-ui's API, but that is a large breaking change.\n // For now, this is some code I hate, but keeping it to transform base-ui's event into synthetic event\n const handleCheckedChange = (next: boolean, eventOrDetails: unknown) => {\n // No `onChange` → nothing to forward. The control stays fully controlled\n // via the `checked`/`indeterminate` props passed to `Checkbox.Root`, so a\n // click on a controlled box still snaps back to the prop.\n if (!onChange) return;\n\n const nativeEvent =\n eventOrDetails instanceof Event\n ? eventOrDetails\n : (eventOrDetails as { event?: Event } \| null \| undefined)?.event;\n\n // Prefer the real hidden <input> as the event target when base-ui fired\n // from it (its `.checked`/`.value` already satisfy the contract); otherwise\n // synthesize a native-input-shaped target from `next`.\n const nativeTarget = nativeEvent?.target as unknown as\n \| HTMLInputElement\n \| undefined;\n\n const target =\n nativeTarget && typeof nativeTarget.checked === \"boolean\"\n ? nativeTarget\n : {\n checked: next,\n value: value ?? \"\",\n name: name ?? \"\",\n id,\n type: \"checkbox\",\n };\n\n // Always deliver a SyntheticEvent shape with a real `.nativeEvent`, so the\n // `e.nativeEvent`-reading contract (e.g. shiftKey) is preserved on both the\n // hidden-input and synthesized paths.\n onChange({\n nativeEvent,\n target,\n currentTarget: target,\n type: nativeEvent?.type ?? \"change\",\n preventDefault: () => nativeEvent?.preventDefault?.(),\n stopPropagation: () => nativeEvent?.stopPropagation?.(),\n } as unknown as React.SyntheticEvent<HTMLInputElement>);\n };\n\n return (\n <Wrapper className={cn(\"seeds-checkbox\", className)} {...rest}>\n <BaseCheckbox.Root\n id={id}\n checked={checked}\n indeterminate={effectiveIndeterminate}\n disabled={disabled}\n onCheckedChange={handleCheckedChange}\n // Forwarded ref targets the hidden <input> so the HTMLInputElement\n // contract is preserved.\n inputRef={ref ?? undefined}\n className=\"seeds-checkbox-input\"\n aria-label={ariaLabel}\n tabIndex={tabIndexInt}\n // `name`/`value` feed base-ui's hidden form <input>. Spread (rather\n // than as explicit attributes) so they pass through regardless of\n // base-ui's exact prop typing.\n {...{ name, value }}\n {...qaProps}\n {...qa}\n // `inputProps` is typed for a native <input>; base-ui forwards unknown\n // props to the rendered <button>. Spread last so consumers can still\n // override computed attributes (e.g. aria-label).\n {...(inputProps as unknown as React.ComponentProps<\n typeof BaseCheckbox.Root\n >)}\n >\n {/* keepMounted so the mark is always in the DOM; CSS toggles its\n visibility from base-ui's aria-checked state (true \| mixed). /}\n <BaseCheckbox.Indicator\n className=\"seeds-checkbox-indicator\"\n keepMounted\n >\n <Icon\n className=\"seeds-checkbox-icon\"\n name={effectiveIndeterminate ? \"minus-solid\" : \"check-solid\"}\n size=\"mini\"\n fixedWidth\n />\n </BaseCheckbox.Indicator>\n </BaseCheckbox.Root>\n {label && (\n <span\n className=\"seeds-checkbox-label\"\n {...(labelProps as React.HTMLAttributes<HTMLSpanElement>)}\n >\n {label}\n </span>\n )}\n </Wrapper>\n );\n});\n\nCheckboxTailwind.displayName = \"CheckboxTailwind\";\n","import as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeCheckboxProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** ID of the form element, should match the \"for\" value of the associated label /\n id: string;\n value?: string;\n name?: string;\n\n /* Label text to display next to the checkbox /\n label?: string;\n\n /* Label used to describe the input (if not used with an accompanying visual label) */\n ariaLabel?: string;\n labelProps?: TypeTextProps;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n onChange?: (event: React.SyntheticEvent<HTMLInputElement>) => void;\n appearance?: \"pill\" \| \"default\";\n qa?: object;\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n}\n"],"mappings":"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","names":["React","React","import_seeds_react_system_props","React","styled","Box","props","Icon","Text","import_jsx_runtime","React","import_seeds_react_icon","import_jsx_runtime","BaseCheckbox","Icon","import_jsx_runtime","import_jsx_runtime","React"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-checkbox",
-  "version": "1.3.54",
+  "version": "1.3.56",
   "description": "Seeds Checkbox",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -10,27 +10,41 @@
   "files": [
     "dist"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/checkbox.css": "./dist/checkbox.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/checkbox.css dist/checkbox.css",
+    "build:debug": "tsup --dts --metafile && cp src/checkbox.css dist/checkbox.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-box": "^1.1.32",
-    "@sproutsocial/seeds-react-icon": "^2.5.2",
+    "@base-ui/react": "^1.3.0",
+    "@sproutsocial/seeds-react-box": "^1.1.33",
+    "@sproutsocial/seeds-react-icon": "^2.5.3",
     "@sproutsocial/seeds-react-text": "^1.5.5",
-    "@sproutsocial/seeds-react-mixins": "^4.3.16",
-    "@sproutsocial/seeds-react-system-props": "^3.2.1"
+    "@sproutsocial/seeds-react-mixins": "^4.3.17",
+    "@sproutsocial/seeds-react-system-props": "^3.2.1",
+    "@sproutsocial/seeds-react-utilities": "^4.3.0"
   },
   "devDependencies": {
     "@sproutsocial/eslint-config-seeds": "*",
     "react-dom": "^18.0.0",
     "typescript": "^5.6.2",
     "tsup": "^8.3.4",
-    "@sproutsocial/seeds-tsconfig": "*"
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
   },
   "peerDependencies": {
     "react-dom": "^18.0.0",