@hazelcast/ui 3.0.13 → 4.0.1-canary.10

package/lib/components/TextArea.module.css

@@ -0,0 +1,109 @@
+.container {
+  color: var(--hive-color-text-v4);
+  box-sizing: border-box;
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-small);
+  font-weight: var(--hive-font-weight-text-regular);
+  line-height: normal;
+}
+
+.container .textAreaContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.container .textAreaWrapper {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: var(--hive-border-radius);
+  background-color: var(--hive-color-neutral-white-v4);
+}
+
+.container .borderOverlay {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  pointer-events: none;
+  z-index: 100;
+  border-radius: var(--hive-border-radius);
+  border: var(--hive-border-width) solid var(--hive-color-border-v4);
+  box-sizing: border-box;
+}
+
+.container textarea {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: calc(var(--hive-grid) * 2) calc(var(--hive-grid) * 3);
+  border: none;
+  border-radius: var(--hive-border-radius);
+  background-color: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  resize: vertical;
+}
+
+.container textarea.notResizable {
+  resize: none;
+}
+
+.container textarea::placeholder {
+  color: var(--hive-color-text-secondary-v4);
+}
+
+.container .textAreaWrapper:hover .borderOverlay,
+.container.hover .textAreaWrapper .borderOverlay {
+  border-color: var(--hive-color-text-v4);
+}
+
+.container textarea:focus {
+  outline: transparent solid var(--hive-outline-width);
+}
+
+.container .textAreaWrapper textarea:focus ~ .borderOverlay,
+.container.focus .textAreaWrapper .borderOverlay {
+  border-color: var(--hive-color-primary-v4);
+  box-shadow: 0 0 0 3px oklch(from var(--hive-color-primary-v4) l c h / 0.5);
+}
+
+.container.hasError .textAreaWrapper .borderOverlay {
+  border-color: var(--hive-color-error-v4);
+}
+
+.container.hasError label {
+  color: var(--hive-color-error-v4);
+}
+
+.container.disabled {
+  opacity: 0.5;
+}
+
+.container.disabled .textAreaWrapper {
+  background-color: var(--hive-color-neutral-white-v4);
+}
+
+.container.disabled .borderOverlay {
+  border-color: var(--hive-color-border-v4);
+}
+
+.withError {
+  position: relative;
+  padding-bottom: calc(var(--hive-grid) * 4.75 + var(--hive-grid));
+}
+
+.withError .errorContainer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  height: calc(var(--hive-grid) * 4.75);
+  width: 100%;
+}

package/lib/components/TextField.d.ts

@@ -3,7 +3,7 @@ import { Icon as IconType } from 'react-feather';
 import { DataTestProp } from '../helpers/types';
 import { FieldHeaderProps } from './FieldHeader';
 import { IconSize } from './Icon';
-import { TooltipProps } from './Tooltip';
+import { TooltipSide } from './Tooltip';
 export type TextFieldSize = 'medium' | 'small' | 'large';
 export type TextFieldVariant = 'primary' | 'secondary';
 type TextFieldTrailingIcon = {
@@ -40,7 +40,7 @@ export type TextFieldExtraProps<T extends TextFieldTypes> = {
     type?: T;
     readOnly?: boolean;
     clearable?: boolean;
-    errorTooltipPlacement?: TooltipProps['placement'];
+    errorTooltipPlacement?: TooltipSide;
     children?: React.ReactNode;
 } & DataTestProp & Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'autoFocus' | 'disabled' | 'autoComplete' | 'required' | 'placeholder'> & TextFieldTrailingIcon & Omit<FieldHeaderProps, 'id'>;
 export type TextFieldProps<T extends TextFieldTypes> = TextFieldCoreProps<T> & TextFieldExtraProps<T>;

package/lib/components/TextField.js

@@ -10,7 +10,7 @@ import { Error, errorId } from './Error';
 import { FieldHeader } from './FieldHeader';
 import { helpTooltipId } from './Help';
 import { IconButton } from './IconButton';
-import styles from './TextField.module.scss';
+import styles from './TextField.module.css';
 /**
  * ### Purpose
  * Forms require input from users. When you only need basic information, use text fields to gather exactly what you need.
@@ -54,7 +54,7 @@ const TextFieldInternal = (props, ref) => {
                     }), ...htmlAttrs }),
                 React.createElement("div", { className: cn(styles.borderOverlay, inputBorderOverlayClassName) }),
                 inputIcon && (React.createElement(Icon, { icon: inputIcon, ariaLabel: label, containerClassName: cn(styles.inputIconContainer, styles.inputLeftIconContainer), className: styles.inputIcon, size: "small" })),
-                clearable && !disabled && isNotEmpty && (React.createElement(IconButton, { icon: X, size: size, ariaLabel: "Clear field", onClick: handleClear, className: styles.clearButton, "data-test": dataTest ? `${dataTest}-clear` : undefined })),
+                clearable && !disabled && isNotEmpty && (React.createElement(IconButton, { icon: X, variant: "ghost", size: size === 'small' ? 'small' : 'regular', ariaLabel: "Clear field", onClick: handleClear, className: styles.clearButton, "data-test": dataTest ? `${dataTest}-clear` : undefined })),
                 inputContainerChild,
                 inputTrailingIcon && inputTrailingIconLabel && (React.createElement(Icon, { icon: inputTrailingIcon, ariaLabel: inputTrailingIconLabel, containerClassName: cn(styles.inputIconContainer, styles.inputTrailingIconContainer), className: styles.inputIconTrailing, size: iconSize }))),
             children),

package/lib/components/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/components/TextField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/components/TextField.tsx"],"names":[],"mappings":"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"}

package/lib/components/TextField.module.css

@@ -0,0 +1,195 @@
+.container {
+  color: var(--hive-color-text-v4);
+  box-sizing: border-box;
+  font-family: var(--hive-font-family-text);
+  font-size: var(--hive-font-size-body-small);
+  font-weight: var(--hive-font-weight-text-regular);
+  line-height: normal;
+}
+
+.container .inputBlock {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.container .inputContainer {
+  position: relative;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  height: calc(var(--hive-grid) * 9);
+  background-color: var(--hive-color-neutral-white-v4);
+  border-radius: var(--hive-border-radius);
+}
+
+.container .inputIconContainer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: calc(var(--hive-grid) * 8);
+}
+
+.container .inputTrailingIconContainer {
+  width: auto;
+  margin-right: calc(var(--hive-grid) * 1.5);
+}
+
+.container .inputLeftIconContainer {
+  order: -1;
+}
+
+.container .inputIcon,
+.container .inputIconTrailing {
+  pointer-events: none;
+}
+
+.container .inputIcon {
+  left: calc(var(--hive-grid) * 4);
+  color: var(--hive-color-text-secondary-v4);
+}
+
+.container .inputIconTrailing {
+  right: calc(var(--hive-grid) * -1);
+  color: var(--hive-color-text-secondary-v4);
+}
+
+.container .borderOverlay {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  pointer-events: none;
+  z-index: 100;
+  border-radius: var(--hive-border-radius);
+  border: var(--hive-border-width) solid var(--hive-color-border-v4);
+  box-sizing: border-box;
+}
+
+.container input {
+  display: block;
+  flex: 1 1 auto;
+  background-color: transparent;
+  padding: calc(var(--hive-grid) * 1) calc(var(--hive-grid) * 3);
+  margin: 0;
+  border: none;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  height: 100%;
+  width: 100%;
+}
+
+.container input::placeholder {
+  color: var(--hive-color-text-secondary-v4);
+}
+
+.container input::-webkit-search-cancel-button,
+.container input::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.container .clearButton {
+  display: inline-flex;
+  align-items: center;
+  margin-right: calc(var(--hive-grid) * 1.5);
+}
+
+.container.small .inputContainer {
+  height: calc(var(--hive-grid) * 7.5);
+}
+
+.container.large .inputContainer {
+  height: calc(var(--hive-grid) * 13);
+}
+
+.container.mockAutofill input {
+  -webkit-box-shadow: 0 0 0 1000px var(--hive-color-neutral-white-v4) inset;
+  -webkit-text-fill-color: var(--hive-color-text-v4);
+}
+
+.container.withIcon input {
+  padding-left: 0;
+}
+
+.container.empty {
+  color: var(--hive-color-text-secondary-v4);
+}
+
+.container input:hover ~ .borderOverlay,
+.container input.hover ~ .borderOverlay {
+  border-color: var(--hive-color-text-v4);
+}
+
+.container input:hover ~ .inputIconContainer > .inputIcon,
+.container input.hover ~ .inputIconContainer > .inputIcon {
+  color: var(--hive-color-text-v4);
+}
+
+.container.hasError input ~ .borderOverlay {
+  border-color: var(--hive-color-error-v4);
+}
+
+.container.hasError label {
+  color: var(--hive-color-error-v4);
+}
+
+.container.hasError input ~ .inputIconContainer > .inputIcon {
+  color: var(--hive-color-error-v4);
+}
+
+.container input:focus,
+.container input.focus {
+  outline: transparent solid var(--hive-outline-width);
+}
+
+.container input:focus ~ .borderOverlay,
+.container input.focus ~ .borderOverlay {
+  border-color: var(--hive-color-primary-v4);
+  box-shadow: 0 0 0 3px oklch(from var(--hive-color-primary-v4) l c h / 0.5);
+}
+
+.container input:focus ~ .inputIconContainer > .inputIcon,
+.container input.focus ~ .inputIconContainer > .inputIcon {
+  color: var(--hive-color-primary-v4);
+}
+
+.container.disabled {
+  color: var(--hive-color-text-secondary-v4);
+  opacity: 0.5;
+}
+
+.container.disabled .inputContainer {
+  background-color: var(--hive-color-neutral-white-v4);
+}
+
+.container.disabled input ~ .borderOverlay {
+  border-color: var(--hive-color-border-v4);
+}
+
+.container.disabled input ~ .inputIconContainer > .inputIcon,
+.container.disabled input ~ .inputIconContainer > .inputIconTrailing {
+  color: var(--hive-color-text-secondary-v4);
+}
+
+.withError {
+  position: relative;
+  padding-bottom: calc(var(--hive-grid) * 4.75 + var(--hive-grid));
+}
+
+.withError .errorContainer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  height: calc(var(--hive-grid) * 4.75);
+  width: 100%;
+}

package/lib/components/Toast/Toast.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from 'react';
+export type ToastVariant = 'success' | 'error' | 'warn' | 'info';
+export type ToastProps = {
+    content: ReactNode;
+    variant?: ToastVariant;
+    id?: string;
+    /** Duration in ms before auto-dismiss. Pass `Infinity` to keep open until manually closed. Default: `5000`. */
+    duration?: number;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+export declare const Toast: FC<ToastProps>;

package/lib/components/Toast/Toast.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import cn from 'classnames';
+import { CheckCircle, XCircle, AlertTriangle, Info, X } from 'react-feather';
+import styles from './Toast.module.css';
+const VARIANT_CONFIG = {
+    success: { Icon: CheckCircle, ariaLabel: 'Success' },
+    error: { Icon: XCircle, ariaLabel: 'Error' },
+    warn: { Icon: AlertTriangle, ariaLabel: 'Warning' },
+    info: { Icon: Info, ariaLabel: 'Info' },
+};
+let _idCounter = 0;
+export const Toast = ({ id = `toast-${++_idCounter}`, variant = 'info', content, duration = 5000, open = true, onOpenChange = () => undefined, }) => {
+    const { Icon, ariaLabel } = VARIANT_CONFIG[variant];
+    const radixDuration = duration === Infinity ? 2147483647 : duration;
+    return (React.createElement(ToastPrimitive.Root, { key: id, open: open, onOpenChange: onOpenChange, duration: radixDuration, className: cn(styles.root, styles[variant]) },
+        React.createElement("div", { className: styles.bar }),
+        React.createElement("div", { className: styles.body },
+            React.createElement(Icon, { size: 18, className: styles.icon, "aria-hidden": true }),
+            React.createElement(ToastPrimitive.Description, { asChild: true },
+                React.createElement("div", { className: styles.content }, content)),
+            React.createElement(ToastPrimitive.Action, { altText: "Close", asChild: true },
+                React.createElement("button", { className: styles.closeButton, onClick: () => onOpenChange(false), "aria-label": `Close ${ariaLabel} notification` },
+                    React.createElement(X, { size: 16 }))))));
+};
+//# sourceMappingURL=Toast.js.map

package/lib/components/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAE5E,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAWvC,MAAM,cAAc,GAAwC;IAC1D,OAAO,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE;IACpD,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE;IAC5C,IAAI,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE;IACnD,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE;CACxC,CAAA;AAED,IAAI,UAAU,GAAG,CAAC,CAAA;AAYlB,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,EAAE,GAAG,SAAS,EAAE,UAAU,EAAE,EAC5B,OAAO,GAAG,MAAM,EAChB,OAAO,EACP,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,IAAI,EACX,YAAY,GAAG,GAAG,EAAE,CAAC,SAAS,GAC/B,EAAE,EAAE;IACH,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IACnD,MAAM,aAAa,GAAG,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAA;IAEnE,OAAO,CACL,oBAAC,cAAc,CAAC,IAAI,IAClB,GAAG,EAAE,EAAE,EACP,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;QAE3C,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG,GAAI;QAC9B,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;YACzB,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,wBAAgB;YACtD,oBAAC,cAAc,CAAC,WAAW,IAAC,OAAO;gBACjC,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO,CACpB;YAC7B,oBAAC,cAAc,CAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,OAAO;gBAC5C,gCAAQ,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,gBAAc,SAAS,SAAS,eAAe;oBACtH,oBAAC,CAAC,IAAC,IAAI,EAAE,EAAE,GAAI,CACR,CACa,CACpB,CACc,CACvB,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Toast/Toast.module.css

@@ -0,0 +1,98 @@
+@keyframes slideIn {
+  from {
+    transform: translateX(calc(100% + 1rem));
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.root {
+  --toast-color: var(--hive-color-text);
+  background-color: var(--hive-color-neutral-white);
+  border-radius: var(--hive-border-radius);
+  box-shadow:
+    0 4px 6px -1px oklch(0 0 0 / 0.1),
+    0 2px 4px -2px oklch(0 0 0 / 0.06);
+  display: flex;
+  overflow: hidden;
+  width: 360px;
+  max-width: 100vw;
+}
+
+.success {
+  --toast-color: var(--hive-color-brand-v4);
+}
+.error {
+  --toast-color: var(--hive-color-error);
+}
+.warn {
+  --toast-color: var(--hive-color-warning-darkest);
+}
+.info {
+  --toast-color: var(--hive-color-info-darkest);
+}
+
+.root[data-state='open'] {
+  animation: slideIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.root[data-state='closed'] {
+  animation: fadeOut 150ms ease-in forwards;
+}
+
+.bar {
+  width: 4px;
+  flex-shrink: 0;
+  background-color: var(--toast-color);
+}
+
+.body {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(var(--hive-grid) * 3);
+  padding: calc(var(--hive-grid) * 3);
+  flex: 1;
+  min-width: 0;
+  background-color: lab(from var(--toast-color) 95% a b);
+}
+
+.icon {
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: var(--toast-color);
+}
+
+.content {
+  flex: 1;
+  font-size: var(--hive-font-size-body-small);
+  line-height: 1.4;
+  word-break: break-word;
+  color: var(--hive-color-text);
+}
+
+.closeButton {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--hive-color-text-subdued);
+  line-height: 0;
+  transition: color 150ms ease;
+}
+
+.closeButton:hover {
+  color: var(--hive-color-text);
+}

package/lib/components/Toast/index.d.ts

@@ -0,0 +1,4 @@
+export { Toast } from './Toast';
+export type { ToastProps, ToastVariant } from './Toast';
+export { ToastIcon } from '../../old/Toast';
+export type { ToastType, ToastIconDescriptor } from '../../old/Toast';

package/lib/components/Toast/index.js

@@ -0,0 +1,5 @@
+export { Toast } from './Toast';
+// Re-exported for backward compat with Alert and other consumers of the legacy types.
+// These will be removed in v5 — import from '@hazelcast/ui/old' instead.
+export { ToastIcon } from '../../old/Toast';
+//# sourceMappingURL=index.js.map

package/lib/components/Toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAG/B,sFAAsF;AACtF,yEAAyE;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA"}

package/lib/components/Toggle.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { useUID } from 'react-uid';
 import { Error, errorId } from './Error';
 import { Help, helpTooltipId } from './Help';
-import styles from './Toggle.module.scss';
+import styles from './Toggle.module.css';
 export const Toggle = (props) => {
     const { name, value, onChange, onBlur, error, checked, label, helperText, disabled, className, classNameLabel, 'data-test': dataTest = 'toggle', } = props;
     const id = useUID();
@@ -14,8 +14,7 @@ export const Toggle = (props) => {
                 [styles.disabled]: disabled,
             }, classNameLabel), htmlFor: id },
             label && (React.createElement("span", { className: styles.labelText, "data-test": `${dataTest}-label` }, label)),
-            React.createElement("span", { className: styles.toggleTrack },
-                React.createElement("span", { className: styles.toggleTrackText, "data-test": `${dataTest}-state` }, checked ? 'ON' : 'OFF'))),
+            React.createElement("span", { className: styles.toggleTrack, "data-test": `${dataTest}-state`, "aria-hidden": true })),
         helperText && React.createElement(Help, { parentId: id, helperText: helperText, className: styles.helperText, "data-test": `${dataTest}-helperText` }),
         React.createElement(Error, { "data-test": `${dataTest}-error`, truncated: true, error: error, className: styles.errorContainer, inputId: id })));
 };

package/lib/components/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/components/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,IAAI,EAAa,aAAa,EAAE,MAAM,QAAQ,CAAA;AAEvD,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAqBzC,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC/C,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,cAAc,EACd,WAAW,EAAE,QAAQ,GAAG,QAAQ,GACjC,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IAEnB,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK,EAAE,CAAC,eAAa,QAAQ;QAE1G,+BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,sBACH,UAAU,IAAI,aAAa,CAAC,EAAE,CAAC,uBAC9B,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,GACvC;QAGF,+BACE,SAAS,EAAE,EAAE,CACX;gBACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK;gBACvB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;aAC5B,EACD,cAAc,CACf,EACD,OAAO,EAAE,EAAE;YAEV,KAAK,IAAI,CACR,8BAAM,SAAS,EAAE,MAAM,CAAC,SAAS,eAAa,GAAG,QAAQ,QAAQ,IAC9D,KAAK,CACD,CACR;YAED,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW;gBACjC,8BAAM,SAAS,EAAE,MAAM,CAAC,eAAe,eAAa,GAAG,QAAQ,QAAQ,IACpE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAClB,CACF,CACD;QAEP,UAAU,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,eAAa,GAAG,QAAQ,aAAa,GAAI;QAEhI,oBAAC,KAAK,iBAAY,GAAG,QAAQ,QAAQ,EAAE,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,OAAO,EAAE,EAAE,GAAI,CAC5G,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/components/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,IAAI,EAAa,aAAa,EAAE,MAAM,QAAQ,CAAA;AAEvD,OAAO,MAAM,MAAM,qBAAqB,CAAA;AAqBxC,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC/C,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,cAAc,EACd,WAAW,EAAE,QAAQ,GAAG,QAAQ,GACjC,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IAEnB,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK,EAAE,CAAC,eAAa,QAAQ;QAC1G,+BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,sBACH,UAAU,IAAI,aAAa,CAAC,EAAE,CAAC,uBAC9B,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,GACvC;QAEF,+BACE,SAAS,EAAE,EAAE,CACX;gBACE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK;gBACvB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;aAC5B,EACD,cAAc,CACf,EACD,OAAO,EAAE,EAAE;YAEV,KAAK,IAAI,CACR,8BAAM,SAAS,EAAE,MAAM,CAAC,SAAS,eAAa,GAAG,QAAQ,QAAQ,IAC9D,KAAK,CACD,CACR;YACD,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,eAAa,GAAG,QAAQ,QAAQ,wBAAgB,CAC7E;QAEP,UAAU,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,eAAa,GAAG,QAAQ,aAAa,GAAI;QAEhI,oBAAC,KAAK,iBAAY,GAAG,QAAQ,QAAQ,EAAE,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,OAAO,EAAE,EAAE,GAAI,CAC5G,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Toggle.module.css

@@ -0,0 +1,120 @@
+.wrapper {
+  --toggle-track-width: 32px;
+  --toggle-track-height: 18px;
+  --toggle-thumb-size: 16px;
+  --toggle-thumb-offset: calc(var(--toggle-track-width) - var(--toggle-thumb-size) - 2px);
+  --toggle-track-bg: var(--hive-color-neutral-v4);
+  --toggle-track-bg-checked: var(--hive-color-brand-v4);
+  --toggle-thumb-bg: var(--hive-color-neutral-white-v4);
+  --toggle-transition-duration: 160ms;
+
+  position: relative;
+  font-family: inherit;
+  font-size: var(--hive-font-size-body-small);
+  line-height: var(--hive-line-height-body-small);
+  color: var(--hive-color-text-v4);
+}
+
+.wrapper input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.wrapper label {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  user-select: none;
+  color: inherit;
+}
+
+.labelText {
+  display: inline-block;
+}
+
+.toggleTrack {
+  position: relative;
+  flex-shrink: 0;
+  display: inline-block;
+  width: var(--toggle-track-width);
+  height: var(--toggle-track-height);
+  border-radius: var(--hive-border-radius-pill);
+  background: var(--toggle-track-bg);
+  border: var(--hive-border-width) solid transparent;
+  box-sizing: border-box;
+  transition: background-color var(--toggle-transition-duration) ease;
+}
+
+.toggleTrack::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--toggle-thumb-size);
+  height: var(--toggle-thumb-size);
+  background: var(--toggle-thumb-bg);
+  border-radius: var(--hive-border-radius-pill);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.1),
+    0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: transform var(--toggle-transition-duration) ease;
+}
+
+.wrapper input:checked + label .toggleTrack {
+  background: var(--toggle-track-bg-checked);
+}
+
+.wrapper input:checked + label .toggleTrack::before {
+  transform: translateX(var(--toggle-thumb-offset));
+}
+
+.wrapper input:focus-visible + label .toggleTrack,
+.wrapper label.focus .toggleTrack {
+  outline: var(--hive-outline-width) solid var(--hive-color-primary-v4);
+  outline-offset: 2px;
+}
+
+.wrapper label.hover .toggleTrack,
+.wrapper label:hover .toggleTrack {
+  filter: brightness(0.92);
+}
+
+.wrapper label.disabled,
+.wrapper input:disabled + label {
+  cursor: not-allowed;
+  color: var(--hive-color-text-subdued-v4);
+}
+
+.wrapper input:disabled + label .toggleTrack,
+.wrapper label.disabled .toggleTrack,
+.wrapper input:disabled:checked + label .toggleTrack,
+.wrapper label.disabled.checked .toggleTrack {
+  background: var(--hive-color-neutral-v4);
+}
+
+.wrapper input:disabled + label .toggleTrack::before,
+.wrapper label.disabled .toggleTrack::before {
+  background: var(--hive-color-neutral-white-v4);
+  box-shadow: none;
+}
+
+.wrapper label.error .toggleTrack,
+.withError .toggleTrack {
+  box-shadow: 0 0 0 var(--hive-border-width) var(--hive-color-error-v4);
+}
+
+.helperText {
+  margin-left: 6px;
+}
+
+.errorContainer {
+  margin-top: var(--hive-grid);
+}