@primer/react 38.0.0-rc.195178541 → 38.0.0-rc.3

package/dist/Textarea/Textarea.d.ts

@@ -0,0 +1,89 @@
+import type { TextareaHTMLAttributes } from 'react';
+import React from 'react';
+import type { FormValidationStatus } from '../utils/types/FormValidationStatus';
+import type { SxProp } from '../sx';
+export declare const DEFAULT_TEXTAREA_ROWS = 7;
+export declare const DEFAULT_TEXTAREA_COLS = 30;
+export declare const DEFAULT_TEXTAREA_RESIZE = "both";
+export type TextareaProps = {
+    /**
+     * Apply inactive visual appearance to the Textarea
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the Textarea validation state
+     */
+    validationStatus?: FormValidationStatus;
+    /**
+     * Block
+     */
+    block?: boolean;
+    /**
+     * Allows resizing of the textarea
+     */
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+    /**
+     * apply a high contrast color to background
+     */
+    contrast?: boolean;
+    /**
+     * The className to apply to the wrapper element
+     */
+    className?: string;
+    /**
+     * The minimum height of the Textarea
+     */
+    minHeight?: number;
+    /**
+     * The maximum height of the Textarea
+     */
+    maxHeight?: number;
+    /**
+     * CSS styles to apply to the Textarea
+     */
+    style?: React.CSSProperties;
+} & TextareaHTMLAttributes<HTMLTextAreaElement> & SxProp;
+/**
+ * An accessible, native textarea component that supports validation states.
+ * This component accepts all native HTML <textarea> attributes as props.
+ */
+declare const Textarea: React.ForwardRefExoticComponent<{
+    /**
+     * Apply inactive visual appearance to the Textarea
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the Textarea validation state
+     */
+    validationStatus?: FormValidationStatus;
+    /**
+     * Block
+     */
+    block?: boolean;
+    /**
+     * Allows resizing of the textarea
+     */
+    resize?: "none" | "both" | "horizontal" | "vertical";
+    /**
+     * apply a high contrast color to background
+     */
+    contrast?: boolean;
+    /**
+     * The className to apply to the wrapper element
+     */
+    className?: string;
+    /**
+     * The minimum height of the Textarea
+     */
+    minHeight?: number;
+    /**
+     * The maximum height of the Textarea
+     */
+    maxHeight?: number;
+    /**
+     * CSS styles to apply to the Textarea
+     */
+    style?: React.CSSProperties;
+} & TextareaHTMLAttributes<HTMLTextAreaElement> & SxProp & React.RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/Textarea/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,sBAAsB,EAAe,MAAM,OAAO,CAAA;AAC/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAA;AAC7E,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAGjC,eAAO,MAAM,qBAAqB,IAAI,CAAA;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,eAAO,MAAM,uBAAuB,SAAS,CAAA;AAE7C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAA;IACpD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,GAC7C,MAAM,CAAA;AAER;;;GAGG;AACH,QAAA,MAAM,QAAQ;IA3CZ;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,oBAAoB;IACvC;;OAEG;YACK,OAAO;IACf;;OAEG;aACM,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU;IACpD;;OAEG;eACQ,OAAO;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;YACK,KAAK,CAAC,aAAa;oGA0D5B,CAAA;AAID,eAAe,QAAQ,CAAA"}

package/dist/Textarea/Textarea.js

@@ -0,0 +1,155 @@
+import { c } from 'react-compiler-runtime';
+import React from 'react';
+import { TextInputBaseWrapper } from '../internal/components/TextInputWrapper.js';
+import classes from './TextArea.module.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+const DEFAULT_TEXTAREA_ROWS = 7;
+const DEFAULT_TEXTAREA_COLS = 30;
+const DEFAULT_TEXTAREA_RESIZE = 'both';
+/**
+ * An accessible, native textarea component that supports validation states.
+ * This component accepts all native HTML <textarea> attributes as props.
+ */
+const Textarea = /*#__PURE__*/React.forwardRef((t0, ref) => {
+  const $ = c(39);
+  let block;
+  let className;
+  let contrast;
+  let disabled;
+  let maxHeight;
+  let minHeight;
+  let required;
+  let rest;
+  let style;
+  let sxProp;
+  let t1;
+  let t2;
+  let t3;
+  let validationStatus;
+  let value;
+  if ($[0] !== t0) {
+    ({
+      value,
+      disabled,
+      sx: sxProp,
+      required,
+      validationStatus,
+      rows: t1,
+      cols: t2,
+      resize: t3,
+      block,
+      contrast,
+      className,
+      minHeight,
+      maxHeight,
+      style,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = block;
+    $[2] = className;
+    $[3] = contrast;
+    $[4] = disabled;
+    $[5] = maxHeight;
+    $[6] = minHeight;
+    $[7] = required;
+    $[8] = rest;
+    $[9] = style;
+    $[10] = sxProp;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = validationStatus;
+    $[15] = value;
+  } else {
+    block = $[1];
+    className = $[2];
+    contrast = $[3];
+    disabled = $[4];
+    maxHeight = $[5];
+    minHeight = $[6];
+    required = $[7];
+    rest = $[8];
+    style = $[9];
+    sxProp = $[10];
+    t1 = $[11];
+    t2 = $[12];
+    t3 = $[13];
+    validationStatus = $[14];
+    value = $[15];
+  }
+  const rows = t1 === undefined ? DEFAULT_TEXTAREA_ROWS : t1;
+  const cols = t2 === undefined ? DEFAULT_TEXTAREA_COLS : t2;
+  const resize = t3 === undefined ? DEFAULT_TEXTAREA_RESIZE : t3;
+  const t4 = validationStatus === "error" ? "true" : "false";
+  let t5;
+  if ($[16] !== maxHeight || $[17] !== minHeight || $[18] !== style) {
+    t5 = {
+      minHeight,
+      maxHeight,
+      ...style
+    };
+    $[16] = maxHeight;
+    $[17] = minHeight;
+    $[18] = style;
+    $[19] = t5;
+  } else {
+    t5 = $[19];
+  }
+  let t6;
+  if ($[20] !== cols || $[21] !== disabled || $[22] !== ref || $[23] !== required || $[24] !== resize || $[25] !== rest || $[26] !== rows || $[27] !== t4 || $[28] !== t5 || $[29] !== value) {
+    t6 = /*#__PURE__*/jsx("textarea", {
+      value: value,
+      "data-resize": resize,
+      "aria-required": required,
+      "aria-invalid": t4,
+      ref: ref,
+      disabled: disabled,
+      rows: rows,
+      cols: cols,
+      className: classes.TextArea,
+      style: t5,
+      ...rest
+    });
+    $[20] = cols;
+    $[21] = disabled;
+    $[22] = ref;
+    $[23] = required;
+    $[24] = resize;
+    $[25] = rest;
+    $[26] = rows;
+    $[27] = t4;
+    $[28] = t5;
+    $[29] = value;
+    $[30] = t6;
+  } else {
+    t6 = $[30];
+  }
+  let t7;
+  if ($[31] !== block || $[32] !== className || $[33] !== contrast || $[34] !== disabled || $[35] !== sxProp || $[36] !== t6 || $[37] !== validationStatus) {
+    t7 = /*#__PURE__*/jsx(TextInputBaseWrapper, {
+      sx: sxProp,
+      validationStatus: validationStatus,
+      disabled: disabled,
+      block: block,
+      contrast: contrast,
+      className: className,
+      children: t6
+    });
+    $[31] = block;
+    $[32] = className;
+    $[33] = contrast;
+    $[34] = disabled;
+    $[35] = sxProp;
+    $[36] = t6;
+    $[37] = validationStatus;
+    $[38] = t7;
+  } else {
+    t7 = $[38];
+  }
+  return t7;
+});
+Textarea.displayName = 'Textarea';
+
+export { DEFAULT_TEXTAREA_COLS, DEFAULT_TEXTAREA_RESIZE, DEFAULT_TEXTAREA_ROWS, Textarea as default };

package/dist/Timeline/Timeline.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { SxProp } from '../sx';
+type StyledTimelineProps = {
+    clipSidebar?: boolean;
+    className?: string;
+} & SxProp;
+export type TimelineProps = StyledTimelineProps & React.ComponentPropsWithoutRef<'div'>;
+type StyledTimelineItemProps = {
+    condensed?: boolean;
+    className?: string;
+} & SxProp;
+/**
+ * @deprecated Use the `TimelineItemProps` type instead
+ */
+export type TimelineItemsProps = StyledTimelineItemProps & SxProp & React.ComponentPropsWithoutRef<'div'>;
+export type TimelineItemProps = StyledTimelineItemProps & SxProp & React.ComponentPropsWithoutRef<'div'>;
+export type TimelineBadgeProps = {
+    children?: React.ReactNode;
+    className?: string;
+} & SxProp & React.ComponentPropsWithoutRef<'div'>;
+export type TimelineBodyProps = {
+    /** Class name for custom styling */
+    className?: string;
+} & SxProp & React.ComponentPropsWithoutRef<'div'>;
+export type TimelineBreakProps = {
+    /** Class name for custom styling */
+    className?: string;
+} & SxProp & React.ComponentPropsWithoutRef<'div'>;
+declare const _default: React.ForwardRefExoticComponent<{
+    clipSidebar?: boolean;
+    className?: string;
+} & SxProp & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<{
+        condensed?: boolean;
+        className?: string;
+    } & SxProp & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Badge: {
+        ({ className, ...props }: TimelineBadgeProps): React.JSX.Element;
+        displayName: string;
+    };
+    Body: React.ForwardRefExoticComponent<{
+        /** Class name for custom styling */
+        className?: string;
+    } & SxProp & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Break: React.ForwardRefExoticComponent<{
+        /** Class name for custom styling */
+        className?: string;
+    } & SxProp & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+//# sourceMappingURL=Timeline.d.ts.map

package/dist/Timeline/Timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/Timeline/Timeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAIjC,KAAK,mBAAmB,GAAG;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,MAAM,CAAA;AAE/E,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAevF,KAAK,uBAAuB,GAAG;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,MAAM,CAAA;AAEjF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,uBAAuB,GAAG,MAAM,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAEzG,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GAAG,MAAM,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAiBxG,MAAM,MAAM,kBAAkB,GAAG;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,MAAM,GACxF,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAYvC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,GACR,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAQvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,GACR,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;;kBAtEG,OAAO;gBAAc,MAAM;;;oBAiBzB,OAAO;oBAAc,MAAM;;;kCA2BzB,kBAAkB;;;;QAW9D,oCAAoC;oBACxB,MAAM;;;QAWlB,oCAAoC;oBACxB,MAAM;;;AAUpB,wBAKE"}

package/dist/Timeline/Timeline.js

@@ -0,0 +1,240 @@
+import { c } from 'react-compiler-runtime';
+import { clsx } from 'clsx';
+import React from 'react';
+import classes from './Timeline.module.css.js';
+import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
+import { jsx } from 'react/jsx-runtime';
+
+const Timeline = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
+  const $ = c(11);
+  let className;
+  let clipSidebar;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      clipSidebar,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = clipSidebar;
+    $[3] = props;
+  } else {
+    className = $[1];
+    clipSidebar = $[2];
+    props = $[3];
+  }
+  let t1;
+  if ($[4] !== className) {
+    t1 = clsx(className, classes.Timeline);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const t2 = clipSidebar ? "" : undefined;
+  let t3;
+  if ($[6] !== forwardRef || $[7] !== props || $[8] !== t1 || $[9] !== t2) {
+    t3 = /*#__PURE__*/jsx(BoxWithFallback, {
+      ...props,
+      className: t1,
+      ref: forwardRef,
+      "data-clip-sidebar": t2
+    });
+    $[6] = forwardRef;
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
+});
+Timeline.displayName = 'Timeline';
+
+/**
+ * @deprecated Use the `TimelineItemProps` type instead
+ */
+
+const TimelineItem = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
+  const $ = c(11);
+  let className;
+  let condensed;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      condensed,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = condensed;
+    $[3] = props;
+  } else {
+    className = $[1];
+    condensed = $[2];
+    props = $[3];
+  }
+  let t1;
+  if ($[4] !== className) {
+    t1 = clsx(className, "Timeline-Item", classes.TimelineItem);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const t2 = condensed ? "" : undefined;
+  let t3;
+  if ($[6] !== forwardRef || $[7] !== props || $[8] !== t1 || $[9] !== t2) {
+    t3 = /*#__PURE__*/jsx(BoxWithFallback, {
+      ...props,
+      className: t1,
+      ref: forwardRef,
+      "data-condensed": t2
+    });
+    $[6] = forwardRef;
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
+});
+TimelineItem.displayName = 'TimelineItem';
+const TimelineBadge = t0 => {
+  const $ = c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = clsx(className, classes.TimelineBadge);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/jsx("div", {
+      className: classes.TimelineBadgeWrapper,
+      children: /*#__PURE__*/jsx(BoxWithFallback, {
+        ...props,
+        className: t1
+      })
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+};
+TimelineBadge.displayName = 'Timeline.Badge';
+const TimelineBody = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
+  const $ = c(9);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = clsx(className, classes.TimelineBody);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== forwardRef || $[6] !== props || $[7] !== t1) {
+    t2 = /*#__PURE__*/jsx(BoxWithFallback, {
+      ...props,
+      className: t1,
+      ref: forwardRef
+    });
+    $[5] = forwardRef;
+    $[6] = props;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+});
+TimelineBody.displayName = 'TimelineBody';
+const TimelineBreak = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
+  const $ = c(9);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = clsx(className, classes.TimelineBreak);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== forwardRef || $[6] !== props || $[7] !== t1) {
+    t2 = /*#__PURE__*/jsx(BoxWithFallback, {
+      ...props,
+      className: t1,
+      ref: forwardRef
+    });
+    $[5] = forwardRef;
+    $[6] = props;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+});
+TimelineBreak.displayName = 'TimelineBreak';
+var Timeline$1 = Object.assign(Timeline, {
+  Item: TimelineItem,
+  Badge: TimelineBadge,
+  Body: TimelineBody,
+  Break: TimelineBreak
+});
+
+export { Timeline$1 as default };

package/dist/ToggleSwitch/ToggleSwitch-4b23d166.css

@@ -0,0 +1,2 @@
+.prc-ToggleSwitch-ToggleSwitch-E4lp0{--toggleSwitch-transition-duration:80ms;--toggleSwitch-transition-easing:cubic-bezier(0.5,1,0.89,1);align-items:center;display:inline-flex}.prc-ToggleSwitch-ToggleSwitch-E4lp0:where([data-status-label-position=start]){flex-direction:row}.prc-ToggleSwitch-ToggleSwitch-E4lp0:where([data-status-label-position=end]){flex-direction:row-reverse}.prc-ToggleSwitch-LoadingSpinner-jCYtC{display:inline-flex}.prc-ToggleSwitch-LoadingSpinner-jCYtC:where([data-status-label-position=end]){margin-left:var(--base-size-8,.5rem);margin-right:0}.prc-ToggleSwitch-StatusText-hWpj2{color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;font-size:var(--text-body-size-medium,.875rem);margin-left:var(--base-size-8,.5rem);margin-right:var(--base-size-8,.5rem);position:relative}.prc-ToggleSwitch-StatusText-hWpj2:where([data-disabled=true]){color:var(--fgColor-muted,var(--color-fg-muted));cursor:not-allowed}.prc-ToggleSwitch-StatusText-hWpj2:where([data-size=small]){font-size:var(--text-body-size-small,.75rem)}.prc-ToggleSwitch-StatusText-hWpj2:where([data-size=medium]){font-size:var(--text-body-size-medium,.875rem)}.prc-ToggleSwitch-StatusTextItem-fvvXa{display:block;text-align:right}.prc-ToggleSwitch-StatusTextItem-fvvXa:where([data-hidden=true]){height:0;visibility:hidden}.prc-ToggleSwitch-SwitchButton-5LRHX{appearance:none;border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);cursor:pointer;display:block;height:32px;overflow:hidden;padding:0;position:relative;-webkit-text-decoration:none;text-decoration:none;transition-duration:var(--toggleSwitch-transition-duration);transition-property:background-color,border-color;transition-timing-function:var(--toggleSwitch-transition-easing);-webkit-user-select:none;user-select:none;width:64px}.prc-ToggleSwitch-SwitchButton-5LRHX:focus-visible{outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:3px}.prc-ToggleSwitch-SwitchButton-5LRHX:focus:not(:focus-visible){outline:1px solid transparent}@media (pointer:coarse){.prc-ToggleSwitch-SwitchButton-5LRHX:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}@media (prefers-reduced-motion){.prc-ToggleSwitch-SwitchButton-5LRHX,.prc-ToggleSwitch-SwitchButton-5LRHX *{transition:none}}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-size=small]){height:24px;width:48px}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-disabled=true]){background-color:var(--controlTrack-bgColor-disabled,var(--color-switch-track-disabled-bg,#8c959f));border-color:transparent;cursor:not-allowed;transition-property:none}@media (forced-colors:active){.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-disabled=true]){border-color:GrayText}}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=false]:not([data-disabled=true])){background-color:var(--controlTrack-bgColor-rest,var(--color-switch-track-bg,#eaeef2));border-color:var(--controlTrack-borderColor-rest,var(--color-switch-track-border))}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=false]:not([data-disabled=true]):focus-visible),.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=false]:not([data-disabled=true]):hover){background-color:var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg,#dfe6ec))}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=false]:not([data-disabled=true]):active),.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=false]:not([data-disabled=true]):active:focus-visible){background-color:var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg,#d9e0e8))}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=true]:not([data-disabled=true])){background-color:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg,#0969da));border-color:var(--control-checked-borderColor-rest,transparent)}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=true]:not([data-disabled=true]):focus-visible),.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=true]:not([data-disabled=true]):hover){background-color:var(--control-checked-bgColor-hover,var(--color-switch-track-checked-hover-bg,#0860ca))}.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=true]:not([data-disabled=true]):active),.prc-ToggleSwitch-SwitchButton-5LRHX:where([data-checked=true]:not([data-disabled=true]):active:focus-visible){background-color:var(--control-checked-bgColor-active,var(--color-switch-track-checked-active-bg,#0757ba))}.prc-ToggleSwitch-SwitchButtonContent-nv4lE{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.prc-ToggleSwitch-IconContainer-zLC02{flex-basis:50%;flex-grow:1;flex-shrink:0;line-height:0;transition-duration:var(--toggleSwitch-transition-duration);transition-property:transform;transition-timing-function:var(--toggleSwitch-transition-easing)}@media (prefers-reduced-motion){.prc-ToggleSwitch-IconContainer-zLC02{transition:none}}.prc-ToggleSwitch-LineIconContainer-7sQm8{color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg,#fff))}.prc-ToggleSwitch-LineIconContainer-7sQm8:where([data-disabled=true]){color:var(--control-checked-fgColor-disabled,var(--color-switch-track-checked-disabled-fg,#fff))}.prc-ToggleSwitch-LineIconContainer-7sQm8:where([data-checked=true]){transform:translateX(0)}.prc-ToggleSwitch-LineIconContainer-7sQm8:where([data-checked=false]){transform:translateX(-100%)}.prc-ToggleSwitch-CircleIconContainer-gHYvi{color:var(--controlTrack-fgColor-rest,var(--color-switch-track-fg,#656d76))}.prc-ToggleSwitch-CircleIconContainer-gHYvi:where([data-disabled=true]){color:var(--controlTrack-fgColor-disabled,var(--color-switch-track-disabled-fg,#fff))}.prc-ToggleSwitch-CircleIconContainer-gHYvi:where([data-checked=true]){transform:translateX(100%)}.prc-ToggleSwitch-CircleIconContainer-gHYvi:where([data-checked=false]){transform:translateX(0)}.prc-ToggleSwitch-ToggleKnob-2e7Rm{background-color:var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg,#fff));border-color:var(--controlKnob-borderColor-rest,var(--color-switch-knob-border,#858f99));border-radius:calc(var(--borderRadius-medium,.375rem) - var(--borderWidth-thin,.0625rem));border-style:solid;border-width:var(--borderWidth-thin,.0625rem);bottom:0;position:absolute;top:0;transition-duration:var(--toggleSwitch-transition-duration);transition-property:transform;transition-timing-function:var(--toggleSwitch-transition-easing);width:50%;z-index:1}@media (prefers-reduced-motion){.prc-ToggleSwitch-ToggleKnob-2e7Rm{transition:none}}.prc-ToggleSwitch-ToggleKnob-2e7Rm:where([data-checked=false]){transform:translateX(0)}.prc-ToggleSwitch-ToggleKnob-2e7Rm:where([data-checked=true]){border-color:var(--controlKnob-borderColor-checked,var(--color-switch-knob-checked-border,#0969da));transform:translateX(100%)}.prc-ToggleSwitch-ToggleKnob-2e7Rm:where([data-disabled=true]){border-color:var(--controlTrack-bgColor-disabled,var(--color-switch-track-disabled-bg,#8c959f))}@media (forced-colors:active){.prc-ToggleSwitch-ToggleKnob-2e7Rm:where([data-disabled=true]){color:GrayText}}
+/*# sourceMappingURL=ToggleSwitch-4b23d166.css.map */

package/dist/ToggleSwitch/ToggleSwitch-4b23d166.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ToggleSwitch/ToggleSwitch.module.css"],"names":[],"mappings":"AAAA,qCACE,uCAAwC,CACxC,2DAA+D,CAG/D,kBAAmB,CADnB,mBAEF,CAEA,+EACE,kBACF,CAEA,6EACE,0BACF,CAEA,uCACE,mBACF,CAEA,+EAEE,oCAA+B,CAD/B,cAEF,CAEA,mCAIE,oDAA6B,CAE7B,cAAe,CADf,8CAAuC,CAJvC,oCAA+B,CAC/B,qCAAgC,CAChC,iBAIF,CAEA,+DAEE,gDAA2B,CAD3B,kBAEF,CAEA,4DACE,4CACF,CAEA,6DACE,8CACF,CAEA,uCACE,aAAc,CACd,gBACF,CAEA,iEAEE,QAAS,CADT,iBAEF,CAEA,qCAGE,eAAgB,CAMhB,gDAAyC,CACzC,kBAAmB,CACnB,6CAAqC,CAVrC,cAAe,CAWf,aAAc,CAKd,WAAY,CAHZ,eAAgB,CAThB,SAAU,CAQV,iBAAkB,CATlB,4BAAqB,CAArB,oBAAqB,CAGrB,2DAA4D,CAD5D,iDAAmD,CAEnD,gEAAiE,CANjE,wBAAiB,CAAjB,gBAAiB,CAgBjB,UAiCF,CA9BE,mDACE,kEAA4C,CAC5C,kBACF,CAEA,+DACE,6BACF,CAGA,wBACE,4CACE,UAAW,CAEX,MAAO,CAIP,eAAgB,CALhB,iBAAkB,CAElB,OAAQ,CAER,OAAQ,CADR,0BAGF,CACF,CAGA,gCAGE,4EACE,eACF,CACF,CAIF,8DACE,WAAY,CACZ,UACF,CAGA,iEAEE,mGAAsG,CACtG,wBAAyB,CACzB,kBAAmB,CACnB,wBAKF,CAHE,8BAPF,iEAQI,qBAEJ,CADE,CAGF,2FAEE,sFAAyF,CACzF,kFACF,CAEA,0MAGE,6FACF,CAEA,kNAGE,+FACF,CAEA,0FAEE,iGAAoG,CACpG,gEACF,CAEA,wMAGE,wGACF,CAEA,gNAGE,0GACF,CAEA,4CAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,sCAGE,cAAe,CAFf,WAAY,CACZ,aAAc,CAGd,aAAc,CAEd,2DAA4D,CAD5D,6BAA8B,CAE9B,gEAKF,CAHE,gCAVF,sCAWI,eAEJ,CADE,CAGF,0CAEE,mFACF,CAEA,sEAEE,gGACF,CAEA,qEACE,uBACF,CAEA,sEACE,2BACF,CAEA,4CAEE,2EACF,CAEA,wEAEE,qFACF,CAEA,uEACE,0BACF,CAEA,wEACE,uBACF,CAEA,mCAEE,iFAAoF,CAIpF,wFAA2F,CAG3F,yFAAyE,CALzE,kBAAmB,CADnB,6CAAqC,CAUrC,QAAS,CAFT,iBAAkB,CAClB,KAAM,CAGN,2DAA4D,CAD5D,6BAA8B,CAE9B,gEAAiE,CANjE,SAAU,CAOV,SAKF,CAHE,gCAnBF,mCAoBI,eAEJ,CADE,CAGF,+DACE,uBACF,CAEA,8DAGE,mGAAsG,CAFtG,0BAGF,CAEA,+DAEE,+FAKF,CAHE,8BAJF,+DAKI,cAEJ,CADE","file":"ToggleSwitch-4b23d166.css","sourcesContent":[".ToggleSwitch {\n  --toggleSwitch-transition-duration: 80ms;\n  --toggleSwitch-transition-easing: cubic-bezier(0.5, 1, 0.89, 1);\n\n  display: inline-flex;\n  align-items: center;\n}\n\n.ToggleSwitch:where([data-status-label-position='start']) {\n  flex-direction: row;\n}\n\n.ToggleSwitch:where([data-status-label-position='end']) {\n  flex-direction: row-reverse;\n}\n\n.LoadingSpinner {\n  display: inline-flex;\n}\n\n.LoadingSpinner:where([data-status-label-position='end']) {\n  margin-right: 0;\n  margin-left: var(--base-size-8);\n}\n\n.StatusText {\n  margin-left: var(--base-size-8);\n  margin-right: var(--base-size-8);\n  position: relative;\n  color: var(--fgColor-default);\n  font-size: var(--text-body-size-medium);\n  cursor: pointer;\n}\n\n.StatusText:where([data-disabled='true']) {\n  cursor: not-allowed;\n  color: var(--fgColor-muted);\n}\n\n.StatusText:where([data-size='small']) {\n  font-size: var(--text-body-size-small);\n}\n\n.StatusText:where([data-size='medium']) {\n  font-size: var(--text-body-size-medium);\n}\n\n.StatusTextItem {\n  display: block;\n  text-align: right;\n}\n\n.StatusTextItem:where([data-hidden='true']) {\n  visibility: hidden;\n  height: 0;\n}\n\n.SwitchButton {\n  cursor: pointer;\n  user-select: none;\n  appearance: none;\n  text-decoration: none;\n  padding: 0;\n  transition-property: background-color, border-color;\n  transition-duration: var(--toggleSwitch-transition-duration);\n  transition-timing-function: var(--toggleSwitch-transition-easing);\n  border-radius: var(--borderRadius-medium);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  display: block;\n  position: relative;\n  overflow: hidden;\n\n  /* Default medium size */\n  height: 32px;\n  width: 64px;\n\n  /* Focus styles */\n  &:focus-visible {\n    outline: 2px solid var(--focus-outlineColor);\n    outline-offset: 3px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: solid 1px transparent;\n  }\n\n  /* Touch device support */\n  @media (pointer: coarse) {\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      right: 0;\n      transform: translateY(-50%);\n      top: 50%;\n      min-height: 44px;\n    }\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion) {\n    transition: none;\n\n    * {\n      transition: none;\n    }\n  }\n}\n\n/* Size variants */\n.SwitchButton:where([data-size='small']) {\n  height: 24px;\n  width: 48px;\n}\n\n/* State variants */\n.SwitchButton:where([data-disabled='true']) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f));\n  border-color: transparent;\n  cursor: not-allowed;\n  transition-property: none;\n\n  @media (forced-colors: active) {\n    border-color: GrayText;\n  }\n}\n\n.SwitchButton:where([data-checked='false']:not([data-disabled='true'])) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, #eaeef2));\n  border-color: var(--controlTrack-borderColor-rest);\n}\n\n.SwitchButton:where([data-checked='false']:not([data-disabled='true']):hover),\n.SwitchButton:where([data-checked='false']:not([data-disabled='true']):focus-visible) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsla(210deg, 24%, 90%, 1)));\n}\n\n.SwitchButton:where([data-checked='false']:not([data-disabled='true']):active),\n.SwitchButton:where([data-checked='false']:not([data-disabled='true']):active:focus-visible) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsla(210deg, 24%, 88%, 1)));\n}\n\n.SwitchButton:where([data-checked='true']:not([data-disabled='true'])) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, #0969da));\n  border-color: var(--control-checked-borderColor-rest, transparent);\n}\n\n.SwitchButton:where([data-checked='true']:not([data-disabled='true']):hover),\n.SwitchButton:where([data-checked='true']:not([data-disabled='true']):focus-visible) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, #0860ca));\n}\n\n.SwitchButton:where([data-checked='true']:not([data-disabled='true']):active),\n.SwitchButton:where([data-checked='true']:not([data-disabled='true']):active:focus-visible) {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, #0757ba));\n}\n\n.SwitchButtonContent {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.IconContainer {\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: 50%;\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 0;\n  transition-property: transform;\n  transition-duration: var(--toggleSwitch-transition-duration);\n  transition-timing-function: var(--toggleSwitch-transition-easing);\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n\n.LineIconContainer {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #fff));\n}\n\n.LineIconContainer:where([data-disabled='true']) {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #fff));\n}\n\n.LineIconContainer:where([data-checked='true']) {\n  transform: translateX(0);\n}\n\n.LineIconContainer:where([data-checked='false']) {\n  transform: translateX(-100%);\n}\n\n.CircleIconContainer {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #656d76));\n}\n\n.CircleIconContainer:where([data-disabled='true']) {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #fff));\n}\n\n.CircleIconContainer:where([data-checked='true']) {\n  transform: translateX(100%);\n}\n\n.CircleIconContainer:where([data-checked='false']) {\n  transform: translateX(0);\n}\n\n.ToggleKnob {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #fff));\n  border-width: var(--borderWidth-thin);\n  border-style: solid;\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #858f99));\n  /* Use calc to account for 1px border around the control */\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: calc(var(--borderRadius-medium) - var(--borderWidth-thin));\n  width: 50%;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  transition-property: transform;\n  transition-duration: var(--toggleSwitch-transition-duration);\n  transition-timing-function: var(--toggleSwitch-transition-easing);\n  z-index: 1;\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n\n.ToggleKnob:where([data-checked='false']) {\n  transform: translateX(0);\n}\n\n.ToggleKnob:where([data-checked='true']) {\n  transform: translateX(100%);\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, #0969da));\n}\n\n.ToggleKnob:where([data-disabled='true']) {\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f));\n\n  @media (forced-colors: active) {\n    color: GrayText;\n  }\n}\n"]}

package/dist/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,40 @@
+import type { MouseEventHandler } from 'react';
+import React from 'react';
+import type { CellAlignment } from '../DataTable/column';
+export interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** The id of the DOM node that labels the switch */
+    ['aria-labelledby']: string;
+    /** Uncontrolled - whether the switch is turned on */
+    defaultChecked?: boolean;
+    /** Whether the switch is ready for user input */
+    disabled?: boolean;
+    /** Whether the switch's value is being calculated */
+    loading?: boolean;
+    /** Whether the switch is turned on */
+    checked?: boolean;
+    /** The callback that is called when the switch is toggled on or off */
+    onChange?: (checked: boolean) => void;
+    /** The callback that is called when the switch is clicked */
+    onClick?: MouseEventHandler;
+    /** Size of the switch */
+    size?: 'small' | 'medium';
+    /** Whether the "on" and "off" labels should appear before or after the switch.
+     * **This should only be changed when the switch's alignment needs to be adjusted.** For example: It needs to be left-aligned because the label appears above it and the caption appears below it.
+     */
+    statusLabelPosition?: CellAlignment;
+    /**
+     * If the switch is in the loading state, this value controls the amount of delay in milliseconds before
+     * the `loadingLabel` is announced to screen readers.
+     * @default 2000
+     */
+    loadingLabelDelay?: number;
+    /** The text to describe what is loading. It should be descriptive and not verbose.
+     * This is primarily used for AT (screen readers) to convey what is currently loading.
+     */
+    loadingLabel?: string;
+    /** type of button to account for behavior when added to a form*/
+    buttonType?: 'button' | 'submit' | 'reset';
+}
+declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export default ToggleSwitch;
+//# sourceMappingURL=ToggleSwitch.d.ts.map

package/dist/ToggleSwitch/ToggleSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../src/ToggleSwitch/ToggleSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAC5C,OAAO,KAA+B,MAAM,OAAO,CAAA;AAKnD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAA;AAKtD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC/F,oDAAoD;IACpD,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC3B,qDAAqD;IACrD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,6DAA6D;IAC7D,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB;;OAEG;IACH,mBAAmB,CAAC,EAAE,aAAa,CAAA;IACnC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iEAAiE;IACjE,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CAC3C;AA8BD,QAAA,MAAM,YAAY,6FA8HhB,CAAA;AAMF,eAAe,YAAY,CAAA"}