@primer/react 38.0.0-rc.0 → 38.0.0-rc.09f015db1

package/dist/Button/ButtonBase.js

@@ -0,0 +1,145 @@
+import React, { forwardRef } from 'react';
+import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
+import { ConditionalWrapper } from '../internal/components/ConditionalWrapper.js';
+import { clsx } from 'clsx';
+import classes from './ButtonBase.module.css.js';
+import { isElement } from 'react-is';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId } from '../hooks/useId.js';
+import Spinner from '../Spinner/Spinner.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+import { AriaStatus } from '../live-region/AriaStatus.js';
+import CounterLabel from '../CounterLabel/CounterLabel.js';
+
+const renderModuleVisual = (Visual, loading, visualName, counterLabel) => /*#__PURE__*/jsx("span", {
+  "data-component": visualName,
+  className: clsx(!counterLabel && classes.Visual, loading ? classes.LoadingSpinner : classes.VisualWrap),
+  children: loading ? /*#__PURE__*/jsx(Spinner, {
+    size: "small"
+  }) : isElement(Visual) ? Visual : /*#__PURE__*/jsx(Visual, {})
+});
+renderModuleVisual.displayName = "renderModuleVisual";
+const ButtonBase = /*#__PURE__*/forwardRef(({
+  children,
+  as: Component = 'button',
+  ...props
+}, forwardedRef) => {
+  const {
+    leadingVisual: LeadingVisual,
+    trailingVisual: TrailingVisual,
+    trailingAction: TrailingAction,
+    ['aria-describedby']: ariaDescribedBy,
+    ['aria-labelledby']: ariaLabelledBy,
+    count,
+    icon: Icon,
+    id,
+    variant = 'default',
+    size = 'medium',
+    alignContent = 'center',
+    block = false,
+    loading,
+    loadingAnnouncement = 'Loading',
+    inactive,
+    onClick,
+    labelWrap,
+    className,
+    ...rest
+  } = props;
+  const innerRef = React.useRef(null);
+  useRefObjectAsForwardedRef(forwardedRef, innerRef);
+  const uuid = useId(id);
+  const loadingAnnouncementID = `${uuid}-loading-announcement`;
+  if (process.env.NODE_ENV !== "production") {
+    /**
+     * The Linter yells because it thinks this conditionally calls an effect,
+     * but since this is a compile-time flag and not a runtime conditional
+     * this is safe, and ensures the entire effect is kept out of prod builds
+     * shaving precious bytes from the output, and avoiding mounting a noop effect
+     */
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (innerRef.current && !(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement) && !(innerRef.current.tagName === 'SUMMARY')) {
+        // eslint-disable-next-line no-console
+        console.warn('This component should be an instanceof a semantic button or anchor');
+      }
+    }, [innerRef]);
+  }
+  return /*#__PURE__*/jsxs(ConditionalWrapper
+  // If anything is passed to `loading`, we need the wrapper:
+  // If we just checked for `loading` as a boolean, the wrapper wouldn't be rendered
+  // when `loading` is `false`.
+  // Then, the component re-renders in a way that the button will lose focus when switching between loading states.
+  , {
+    if: typeof loading !== 'undefined',
+    className: block ? classes.ConditionalWrapper : undefined,
+    "data-loading-wrapper": true,
+    children: [/*#__PURE__*/jsx(Component, {
+      "aria-disabled": loading ? true : undefined,
+      ...rest,
+      // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
+      ref: innerRef,
+      className: clsx(classes.ButtonBase, className),
+      "data-block": block ? 'block' : null,
+      "data-inactive": inactive ? true : undefined,
+      "data-loading": Boolean(loading),
+      "data-no-visuals": !LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined,
+      "data-size": size,
+      "data-variant": variant,
+      "data-label-wrap": labelWrap,
+      "data-has-count": count !== undefined ? true : undefined,
+      "aria-describedby": [loadingAnnouncementID, ariaDescribedBy].filter(descriptionID => Boolean(descriptionID)).join(' ')
+      // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state.
+      // We only set it when the button is in a loading state because it will supersede the aria-label when the screen
+      // reader announces the button name.
+      ,
+      "aria-labelledby": loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy,
+      id: id
+      // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
+      ,
+      onClick: loading ? undefined : onClick,
+      children: Icon ? loading ? /*#__PURE__*/jsx(Spinner, {
+        size: "small"
+      }) : isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {}) : /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs("span", {
+          "data-component": "buttonContent",
+          "data-align": alignContent,
+          className: classes.ButtonContent,
+          children: [
+          /* If there are no leading/trailing visuals/actions to replace with a loading spinner,
+               render a loading spiner in place of the button content. */
+          loading && !LeadingVisual && !TrailingVisual && !TrailingAction && count === undefined && renderModuleVisual(Spinner, loading, 'loadingSpinner', false),
+          /* Render a leading visual unless the button is in a loading state.
+               Then replace the leading visual with a loading spinner. */
+          LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false), children && /*#__PURE__*/jsx("span", {
+            "data-component": "text",
+            className: classes.Label,
+            id: loading ? `${uuid}-label` : undefined,
+            children: children
+          }),
+          /* If there is a count, render a counter label unless there is a trailing visual.
+               Then render the counter label as a trailing visual.
+               Replace the counter label or the trailing visual with a loading spinner if:
+               - the button is in a loading state
+               - there is no leading visual to replace with a loading spinner
+            */
+          count !== undefined && !TrailingVisual ? renderModuleVisual(() => /*#__PURE__*/jsx(CounterLabel, {
+            className: classes.CounterLabel,
+            "data-component": "ButtonCounter",
+            children: count
+          }), Boolean(loading) && !LeadingVisual, 'trailingVisual', true) : TrailingVisual ? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual', false) : null]
+        }),
+        /* If there is a trailing action, render it unless the button is in a loading state
+             and there is no leading or trailing visual to replace with a loading spinner. */
+        TrailingAction && renderModuleVisual(TrailingAction, Boolean(loading) && !LeadingVisual && !TrailingVisual, 'trailingAction', false)]
+      })
+    }), loading && /*#__PURE__*/jsx(VisuallyHidden, {
+      children: /*#__PURE__*/jsx(AriaStatus, {
+        id: loadingAnnouncementID,
+        children: loadingAnnouncement
+      })
+    })]
+  });
+});
+
+export { ButtonBase };

package/dist/Button/ButtonBase.module.css.js

@@ -0,0 +1,5 @@
+import './ButtonBase-643c673a.css';
+
+var classes = {"ButtonBase":"prc-Button-ButtonBase-c50BI","CounterLabel":"prc-Button-CounterLabel-f5-4u","Visual":"prc-Button-Visual-2epfX","VisualWrap":"prc-Button-VisualWrap-Db-eB","IconButton":"prc-Button-IconButton-szpyj","ButtonContent":"prc-Button-ButtonContent-HKbr-","Label":"prc-Button-Label-pTQ3x","LoadingSpinner":"prc-Button-LoadingSpinner-hLV6o","ConditionalWrapper":"prc-Button-ConditionalWrapper-WLT4Z"};
+
+export { classes as default };

package/dist/Button/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/Button/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAA;AAC5C,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAO/F,QAAA,MAAM,UAAU,EA+DX,8BAA8B,CAAC,QAAQ,GAAG,GAAG,EAAE,eAAe,CAAC,CAAA;AAEpE,OAAO,EAAC,UAAU,EAAC,CAAA"}

package/dist/Button/IconButton.js

@@ -0,0 +1,67 @@
+import React, { forwardRef } from 'react';
+import { ButtonBase } from './ButtonBase.js';
+import { TooltipContext, Tooltip } from '../TooltipV2/Tooltip.js';
+import { TooltipContext as TooltipContext$1 } from '../Tooltip/Tooltip.js';
+import classes from './ButtonBase.module.css.js';
+import { clsx } from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+
+const IconButton = /*#__PURE__*/forwardRef(({
+  icon: Icon,
+  'aria-label': ariaLabel,
+  description,
+  disabled,
+  tooltipDirection,
+  // This is planned to be a temporary prop until the default tooltip on icon buttons are fully rolled out.
+  unsafeDisableTooltip = false,
+  keyshortcuts,
+  keybindingHint,
+  className,
+  ...props
+}, forwardedRef) => {
+  // If the icon button is already wrapped in a tooltip, do not add one.
+  const {
+    tooltipId
+  } = React.useContext(TooltipContext); // Tooltip v2
+  const {
+    tooltipId: tooltipIdV1
+  } = React.useContext(TooltipContext$1); // Tooltip v1
+
+  const hasExternalTooltip = tooltipId || tooltipIdV1;
+  const withoutTooltip = unsafeDisableTooltip || disabled || ariaLabel === undefined || ariaLabel === '' || hasExternalTooltip;
+  if (withoutTooltip) {
+    return /*#__PURE__*/jsx(ButtonBase, {
+      icon: Icon,
+      className: clsx(className, classes.IconButton),
+      "data-component": "IconButton",
+      type: "button",
+      "aria-label": ariaLabel,
+      disabled: disabled,
+      ...props,
+      // @ts-expect-error StyledButton wants both Anchor and Button refs
+      ref: forwardedRef
+    });
+  } else {
+    const tooltipText = description !== null && description !== void 0 ? description : ariaLabel;
+    return /*#__PURE__*/jsx(Tooltip, {
+      ref: forwardedRef,
+      text: tooltipText,
+      type: description ? undefined : 'label',
+      direction: tooltipDirection,
+      keybindingHint: keybindingHint !== null && keybindingHint !== void 0 ? keybindingHint : keyshortcuts,
+      children: /*#__PURE__*/jsx(ButtonBase, {
+        icon: Icon,
+        className: clsx(className, classes.IconButton),
+        "data-component": "IconButton",
+        type: "button",
+        "aria-keyshortcuts": keyshortcuts !== null && keyshortcuts !== void 0 ? keyshortcuts : undefined
+        // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.
+        ,
+        "aria-label": description ? ariaLabel : undefined,
+        ...props
+      })
+    });
+  }
+});
+
+export { IconButton };

package/dist/Button/LinkButton.d.ts

@@ -0,0 +1,6 @@
+import type { LinkButtonProps as BaseLinkButtonProps, ButtonProps } from './types';
+import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
+export type LinkButtonProps = BaseLinkButtonProps & ButtonProps;
+declare const LinkButton: PolymorphicForwardRefComponent<"a", LinkButtonProps>;
+export { LinkButton };
+//# sourceMappingURL=LinkButton.d.ts.map

package/dist/Button/LinkButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../src/Button/LinkButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,eAAe,IAAI,mBAAmB,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AAEhF,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,WAAW,CAAA;AAE/D,QAAA,MAAM,UAAU,EAMV,8BAA8B,CAAC,GAAG,EAAE,eAAe,CAAC,CAAA;AAE1D,OAAO,EAAC,UAAU,EAAC,CAAA"}

package/dist/Button/LinkButton.js

@@ -0,0 +1,18 @@
+import { forwardRef } from 'react';
+import { ButtonBase } from './ButtonBase.js';
+import { jsx } from 'react/jsx-runtime';
+
+const LinkButton = /*#__PURE__*/forwardRef(({
+  children,
+  as: Component = 'a',
+  ...props
+}, forwardedRef) => {
+  return /*#__PURE__*/jsx(ButtonBase, {
+    as: Component,
+    ref: forwardedRef,
+    ...props,
+    children: children
+  });
+});
+
+export { LinkButton };

package/dist/Button/index.d.ts

@@ -0,0 +1,8 @@
+import { IconButton } from './IconButton';
+import { LinkButton } from './LinkButton';
+export type { ButtonProps, IconButtonProps, ButtonBaseProps } from './types';
+export type { LinkButtonProps } from './LinkButton';
+export { IconButton, LinkButton };
+export { ButtonComponent as Button } from './Button';
+export { ButtonBase } from './ButtonBase';
+//# sourceMappingURL=index.d.ts.map

package/dist/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EAAC,WAAW,EAAE,eAAe,EAAE,eAAe,EAAC,MAAM,SAAS,CAAA;AAC1E,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AACjD,OAAO,EAAC,UAAU,EAAE,UAAU,EAAC,CAAA;AAC/B,OAAO,EAAC,eAAe,IAAI,MAAM,EAAC,MAAM,UAAU,CAAA;AAClD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA"}

package/dist/Button/types.d.ts

@@ -0,0 +1,93 @@
+import type React from 'react';
+import type { TooltipDirection } from '../TooltipV2';
+import type { IconProps } from '@primer/octicons-react';
+export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'link';
+export type Size = 'small' | 'medium' | 'large';
+export type AlignContent = 'start' | 'center';
+type ButtonA11yProps = {
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+} | {
+    'aria-label'?: undefined;
+    'aria-labelledby': string;
+};
+export type ButtonBaseProps = {
+    /**
+     * Determines the styles on a button, one of 'default' | 'primary' | 'invisible' | 'danger' | 'link'
+     */
+    variant?: VariantType;
+    /**
+     * Size of the button and fontSize of the text in the button
+     */
+    size?: Size;
+    /**
+     * Disables a button. Avoid disabling buttons because it will make them inaccessible to users
+     * who rely on keyboard navigation. Buttons that are disabled cannot be clicked, selected, or navigated through.
+     */
+    disabled?: boolean;
+    /**
+     * Allow a button to fill its container horizontally
+     */
+    block?: boolean;
+    /**
+     * Specify whether the button is in a loading state
+     */
+    loading?: boolean;
+    /**
+     * The content to announce to screen readers when loading
+     */
+    loadingAnnouncement?: string;
+    inactive?: boolean;
+    /**
+     * Whether the button label should wrap to multiple lines if it is longer than the button width
+     */
+    labelWrap?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export type ButtonProps = {
+    /**
+     * Content alignment for when visuals are present
+     */
+    alignContent?: AlignContent;
+    /**
+     * The icon for the IconButton
+     */
+    icon?: React.FunctionComponent<IconProps> | React.ElementType | React.ReactElement | null;
+    /**
+     * The leading visual which comes before the button content
+     */
+    leadingVisual?: React.ElementType | React.ReactElement | null;
+    /**
+     * The trailing visual which comes after the button content
+     */
+    trailingVisual?: React.ElementType | React.ReactElement | null;
+    /**
+     * Trailing action which comes after the trailing visual and is always the last element
+     * in the button
+     */
+    trailingAction?: React.ElementType | null;
+    children?: React.ReactNode;
+    count?: number | string;
+} & ButtonBaseProps;
+export type IconButtonProps = ButtonA11yProps & {
+    icon: React.ElementType;
+    unsafeDisableTooltip?: boolean;
+    description?: string;
+    tooltipDirection?: TooltipDirection;
+    /** @deprecated Use `keybindingHint` instead. */
+    keyshortcuts?: string;
+    keybindingHint?: string;
+} & Omit<ButtonBaseProps, 'aria-label' | 'aria-labelledby'>;
+export type LinkButtonProps = {
+    underline?: boolean;
+    download?: string;
+    href?: string;
+    hrefLang?: string;
+    media?: string;
+    ping?: string;
+    rel?: string;
+    target?: string;
+    type?: string;
+    referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>['referrerPolicy'];
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/Button/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Button/types.ts"],"names":[],"mappings":"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"}

package/dist/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,11 @@
+import { type PropsWithChildren } from 'react';
+import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
+export type ButtonGroupProps = PropsWithChildren<{
+    /** The role of the group */
+    role?: string;
+    /** className passed in for styling */
+    className?: string;
+}>;
+declare const ButtonGroup: PolymorphicForwardRefComponent<"div", ButtonGroupProps>;
+export default ButtonGroup;
+//# sourceMappingURL=ButtonGroup.d.ts.map

package/dist/ButtonGroup/ButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAKnD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,QAAA,MAAM,WAAW,EAmBX,8BAA8B,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAA;AAI7D,eAAe,WAAW,CAAA"}

package/dist/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,102 @@
+import { c } from 'react-compiler-runtime';
+import React from 'react';
+import classes from './ButtonGroup.module.css.js';
+import { clsx } from 'clsx';
+import { useFocusZone } from '../hooks/useFocusZone.js';
+import { jsx } from 'react/jsx-runtime';
+import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
+import { FocusKeys } from '@primer/behaviors';
+
+const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(t0, forwardRef) {
+  const $ = c(20);
+  let children;
+  let className;
+  let rest;
+  let role;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      as: t1,
+      children,
+      className,
+      role,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = rest;
+    $[4] = role;
+    $[5] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    rest = $[3];
+    role = $[4];
+    t1 = $[5];
+  }
+  const BaseComponent = t1 === undefined ? "div" : t1;
+  let t2;
+  if ($[6] !== children) {
+    t2 = React.Children.map(children, _temp);
+    $[6] = children;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const buttons = t2;
+  const buttonRef = useProvidedRefOrCreate(forwardRef);
+  const t3 = role !== "toolbar";
+  let t4;
+  if ($[8] !== buttonRef || $[9] !== t3) {
+    t4 = {
+      containerRef: buttonRef,
+      disabled: t3,
+      bindKeys: FocusKeys.ArrowHorizontal,
+      focusOutBehavior: "wrap"
+    };
+    $[8] = buttonRef;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  useFocusZone(t4);
+  let t5;
+  if ($[11] !== className) {
+    t5 = clsx(className, classes.ButtonGroup);
+    $[11] = className;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== BaseComponent || $[14] !== buttonRef || $[15] !== buttons || $[16] !== rest || $[17] !== role || $[18] !== t5) {
+    t6 = /*#__PURE__*/jsx(BaseComponent, {
+      ref: buttonRef,
+      className: t5,
+      role: role,
+      ...rest,
+      children: buttons
+    });
+    $[13] = BaseComponent;
+    $[14] = buttonRef;
+    $[15] = buttons;
+    $[16] = rest;
+    $[17] = role;
+    $[18] = t5;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  return t6;
+});
+ButtonGroup.displayName = 'ButtonGroup';
+function _temp(child, index) {
+  return /*#__PURE__*/jsx("div", {
+    children: child
+  }, index);
+}
+_temp.displayName = "_temp";
+
+export { ButtonGroup as default };

package/dist/Checkbox/Checkbox-edc5dc3e.css

@@ -0,0 +1,2 @@
+.prc-Checkbox-Checkbox-gIwWX{border-radius:var(--borderRadius-small,.1875rem);transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1)}.prc-Checkbox-Checkbox-gIwWX:before{animation:prc-Checkbox-checkmarkOut-mlBVw 80ms cubic-bezier(.65,0,.35,1) forwards;background-color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));clip-path:inset(var(--base-size-16,1rem) 0 0 0);content:"";height:var(--base-size-16,1rem);mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzguMjJhLjc1Ljc1IDAgMCAxIDAgMS4wNjFMNC41MiA4LjU0MWEuNzUuNzUgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1Ljc1IDAgMCAxIDEuMDYyIDAiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");mask-position:center;mask-repeat:no-repeat;mask-size:75%;transition:visibility 0s linear .23s;visibility:hidden;width:var(--base-size-16,1rem)}.prc-Checkbox-Checkbox-gIwWX:checked,.prc-Checkbox-Checkbox-gIwWX:indeterminate{background:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));border-color:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg))}:is(.prc-Checkbox-Checkbox-gIwWX:checked,.prc-Checkbox-Checkbox-gIwWX:indeterminate):before{animation:prc-Checkbox-checkmarkIn-S5zG9 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}:is(.prc-Checkbox-Checkbox-gIwWX:checked,.prc-Checkbox-Checkbox-gIwWX:indeterminate):disabled{background-color:var(--control-checked-bgColor-disabled,var(--color-switch-track-disabled-bg));border-color:var(--control-checked-borderColor-disabled,var(--color-switch-track-disabled-bg));opacity:1}:is(.prc-Checkbox-Checkbox-gIwWX:checked,.prc-Checkbox-Checkbox-gIwWX:indeterminate):disabled:before{background-color:var(--control-checked-fgColor-disabled,var(--color-switch-track-checked-disabled-fg))}@media (forced-colors:active){.prc-Checkbox-Checkbox-gIwWX:checked,.prc-Checkbox-Checkbox-gIwWX:indeterminate{background-color:canvastext;border-color:canvastext}}.prc-Checkbox-Checkbox-gIwWX:disabled{cursor:not-allowed}.prc-Checkbox-Checkbox-gIwWX:checked{transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}.prc-Checkbox-Checkbox-gIwWX:checked:before{transition:visibility 0s linear 0s;visibility:visible}.prc-Checkbox-Checkbox-gIwWX:indeterminate{background:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg))}.prc-Checkbox-Checkbox-gIwWX:indeterminate:before{mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");visibility:visible}.prc-Checkbox-Checkbox-gIwWX:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}@keyframes prc-Checkbox-checkmarkIn-S5zG9{0%{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes prc-Checkbox-checkmarkOut-mlBVw{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}}
+/*# sourceMappingURL=Checkbox-edc5dc3e.css.map */

package/dist/Checkbox/Checkbox-edc5dc3e.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Checkbox/Checkbox.module.css","../../postcss-preset-primer/src/mixins/focusOutline.css"],"names":[],"mappings":"AAAA,6BACE,gDAAwC,CAGxC,uEA6EF,CAzEE,oCAaE,iFAAoE,CAPpE,sEAA2C,CAE3C,+CAA2C,CAJ3C,UAAW,CAFX,+BAA2B,CAO3B,ocAA69B,CAG79B,oBAAqB,CADrB,qBAAsB,CADtB,aAAc,CAHd,oCAAsC,CAJtC,iBAAkB,CAFlB,8BAaF,CAEA,gFAEE,mFAA+C,CAI/C,qFAsBF,CApBE,4FACE,qFACF,CAEA,8FACE,8FAAyD,CACzD,8FAAyD,CACzD,SAMF,CAJE,qGAEE,sGACF,CAIF,8BAxBF,gFAyBI,2BAA4B,CAC5B,uBAEJ,CADE,CAGF,sCACE,kBACF,CAEA,qCACE,0EAQF,CAJE,4CAEE,kCAAmC,CADnC,kBAEF,CAGF,2CACE,mFAMF,CAJE,kDACE,wUAAia,CACja,kBACF,CAGF,0DC3EA,eAAgB,CAFhB,kEAAgC,CAChC,kBD8EA,CAGF,0CACE,GACE,+CACF,CAEA,GACE,wBACF,CACF,CAEA,2CACE,GACE,wBACF,CAEA,GACE,+CACF,CACF","file":"Checkbox-edc5dc3e.css","sourcesContent":[".Checkbox {\n  border-radius: var(--borderRadius-small);\n\n  /* checked -> unchecked - add 120ms delay to fully see animation-out */\n  transition:\n    background-color,\n    border-color 80ms cubic-bezier(0.33, 1, 0.68, 1);\n\n  &::before {\n    width: var(--base-size-16);\n    height: var(--base-size-16);\n    visibility: hidden;\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--fgColor-onEmphasis);\n    transition: visibility 0s linear 230ms;\n    clip-path: inset(var(--base-size-16) 0 0 0);\n    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');\n    mask-size: 75%;\n    mask-repeat: no-repeat;\n    mask-position: center;\n    animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards;\n  }\n\n  &:checked,\n  &:indeterminate {\n    background: var(--control-checked-bgColor-rest);\n\n    /* using bgColor here to avoid a border change in dark high contrast */\n    /* stylelint-disable-next-line primer/colors */\n    border-color: var(--control-checked-bgColor-rest);\n\n    &::before {\n      animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n    }\n\n    &:disabled {\n      background-color: var(--control-checked-bgColor-disabled);\n      border-color: var(--control-checked-borderColor-disabled);\n      opacity: 1;\n\n      &::before {\n        /* stylelint-disable-next-line primer/colors */\n        background-color: var(--control-checked-fgColor-disabled);\n      }\n    }\n\n    /* Windows High Contrast mode */\n    @media (forced-colors: active) {\n      background-color: canvastext;\n      border-color: canvastext;\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:checked {\n    transition:\n      background-color,\n      border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms;\n\n    &::before {\n      visibility: visible;\n      transition: visibility 0s linear 0s;\n    }\n  }\n\n  &:indeterminate {\n    background: var(--control-checked-bgColor-rest);\n\n    &::before {\n      mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n      visibility: visible;\n    }\n  }\n\n  &:focus-visible:not(:disabled) {\n    @mixin focusOutline 2px;\n  }\n}\n\n@keyframes checkmarkIn {\n  from {\n    clip-path: inset(var(--base-size-16) 0 0 0);\n  }\n\n  to {\n    clip-path: inset(0 0 0 0);\n  }\n}\n\n@keyframes checkmarkOut {\n  from {\n    clip-path: inset(0 0 0 0);\n  }\n\n  to {\n    clip-path: inset(var(--base-size-16) 0 0 0);\n  }\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n"]}

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,37 @@
+import React, { type InputHTMLAttributes } from 'react';
+import type { FormValidationStatus } from '../utils/types/FormValidationStatus';
+import type { WithSlotMarker } from '../utils/types';
+export type CheckboxProps = {
+    /**
+     * Apply indeterminate visual appearance to the checkbox
+     */
+    indeterminate?: boolean;
+    /**
+     * Apply inactive visual appearance to the checkbox
+     */
+    disabled?: boolean;
+    /**
+     * Forward a ref to the underlying input element
+     */
+    ref?: React.RefObject<HTMLInputElement>;
+    /**
+     * Indicates whether the checkbox must be checked
+     */
+    required?: boolean;
+    /**
+     * Only used to inform ARIA attributes. Individual checkboxes do not have validation styles.
+     */
+    validationStatus?: FormValidationStatus;
+    /**
+     * A unique value that is never shown to the user.
+     * Used during form submission and to identify which checkbox inputs are selected
+     */
+    value?: string;
+} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'>;
+/**
+ * An accessible, native checkbox component
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const _default: WithSlotMarker<typeof Checkbox>;
+export default _default;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/Checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAiD,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAExH,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAA;AAI7E,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,CAAA;AAE3D;;GAEG;AACH,QAAA,MAAM,QAAQ,qGAgDb,CAAA;wBAK0B,cAAc,CAAC,OAAO,QAAQ,CAAC;AAA1D,wBAA0D"}