@corefoundry-labs/forge-ui 1.0.2 → 1.1.0

package/dist/componentsV2/feedback/ProgressV2/ProgressV2.module.css

@@ -0,0 +1,161 @@
+.progress {
+  color: var(--cf-v2-on-surface);
+  font-family: inherit;
+  line-height: normal;
+}
+
+.normal {
+  --progress-fill: var(--cf-v2-action-primary);
+}
+
+.success {
+  --progress-fill: var(--cf-v2-success);
+}
+
+.error {
+  --progress-fill: var(--cf-v2-error);
+}
+
+.linear {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cf-v2-progress-gap);
+  width: 100%;
+  min-width: 0;
+}
+
+.header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--cf-v2-progress-header-gap);
+  font-weight: var(--cf-v2-progress-label-font-weight);
+}
+
+.label {
+  min-width: 0;
+  font-size: var(--cf-v2-progress-label-font-size);
+  overflow-wrap: anywhere;
+}
+
+.value {
+  flex: none;
+  margin-inline-start: auto;
+  color: color-mix(in srgb, var(--cf-v2-on-surface) calc(var(--cf-v2-progress-value-opacity) * 100%), transparent);
+  font-size: var(--cf-v2-progress-value-font-size);
+}
+
+.track {
+  position: relative;
+  height: var(--cf-v2-progress-height);
+  overflow: hidden;
+  border-radius: var(--cf-v2-progress-radius);
+  background: var(--cf-v2-surface-container);
+}
+
+.fill {
+  height: 100%;
+  border-radius: var(--cf-v2-progress-radius);
+  background: var(--progress-fill);
+  transition: width var(--cf-v2-progress-transition-duration) ease;
+}
+
+.moving {
+  position: absolute;
+  inset-block: 0;
+  width: var(--cf-v2-progress-segment-width);
+  animation: slide var(--cf-v2-progress-duration) ease-in-out infinite;
+}
+
+.circular {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  width: var(--cf-v2-progress-ring-size);
+  height: var(--cf-v2-progress-ring-size);
+}
+
+.ring {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  fill: none;
+  stroke-width: var(--cf-v2-progress-ring-stroke);
+  transform: rotate(-90deg);
+}
+
+.ringTrack {
+  stroke: var(--cf-v2-surface-container);
+}
+
+.ringArc {
+  stroke: var(--progress-fill);
+  stroke-linecap: round;
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: stroke-dasharray var(--cf-v2-progress-transition-duration) ease;
+}
+
+.spin {
+  animation: spin var(--cf-v2-progress-duration) linear infinite;
+}
+
+.ringValue {
+  position: relative;
+  z-index: 1;
+  font-size: var(--cf-v2-progress-ring-font-size);
+  font-weight: var(--cf-v2-progress-ring-font-weight);
+}
+
+@keyframes slide {
+  from {
+    inset-inline-start: calc(-1 * var(--cf-v2-progress-segment-width));
+  }
+
+  to {
+    inset-inline-start: 100%;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fill,
+  .ringArc {
+    transition: none;
+  }
+
+  .moving,
+  .spin {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .track {
+    border: thin solid CanvasText;
+    background: Canvas;
+    forced-color-adjust: none;
+  }
+
+  .fill {
+    background: Highlight;
+  }
+
+  .ring {
+    forced-color-adjust: none;
+  }
+
+  .ringTrack {
+    stroke: GrayText;
+  }
+
+  .ringArc {
+    stroke: Highlight;
+  }
+}

package/dist/componentsV2/feedback/ProgressV2/index.d.ts

@@ -0,0 +1,3 @@
+export { ProgressV2 } from './ProgressV2';
+export type { ProgressV2Props, ProgressV2Shape, ProgressV2Status } from './ProgressV2';
+//# sourceMappingURL=index.d.ts.map

package/dist/componentsV2/feedback/ProgressV2/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/feedback/ProgressV2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC"}

package/dist/componentsV2/feedback/ProgressV2/index.js

@@ -0,0 +1 @@
+export { ProgressV2 } from './ProgressV2';

package/dist/componentsV2/feedback/SkeletonV2/SkeletonV2.d.ts

@@ -0,0 +1,20 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type CSSProperties, type HTMLAttributes } from 'react';
+export type SkeletonV2Shape = 'text' | 'rectangle' | 'circle';
+export type SkeletonV2Size = 'sm' | 'md';
+export type SkeletonV2Animation = 'none' | 'pulse' | 'wave';
+export type SkeletonV2Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'role'> & {
+    shape?: SkeletonV2Shape;
+    size?: SkeletonV2Size;
+    animation?: SkeletonV2Animation;
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+};
+export declare const SkeletonV2: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, "role" | "children"> & {
+    shape?: SkeletonV2Shape;
+    size?: SkeletonV2Size;
+    animation?: SkeletonV2Animation;
+    width?: CSSProperties["width"];
+    height?: CSSProperties["height"];
+} & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=SkeletonV2.d.ts.map

package/dist/componentsV2/feedback/SkeletonV2/SkeletonV2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/feedback/SkeletonV2/SkeletonV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,EAAc,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5E,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC9D,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IACzF,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,UAAU;YAPb,eAAe;WAChB,cAAc;gBACT,mBAAmB;YACvB,aAAa,CAAC,OAAO,CAAC;aACrB,aAAa,CAAC,QAAQ,CAAC;mDAqBhC,CAAC"}

package/dist/componentsV2/feedback/SkeletonV2/SkeletonV2.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { forwardRef } from 'react';
+import styles from './SkeletonV2.module.css';
+export const SkeletonV2 = forwardRef(function SkeletonV2({ shape = 'text', size = 'sm', animation = 'none', width, height, className, style, ...props }, ref) {
+    const sized = { ...(width !== undefined && { width }), ...(height !== undefined && { height }), ...style };
+    return (_jsx("span", { ...props, ref: ref, "aria-hidden": "true", "data-shape": shape, "data-size": size, "data-animation": animation, style: sized, className: [styles.skeleton, styles[shape], styles[size], styles[animation], className].filter(Boolean).join(' ') }));
+});

package/dist/componentsV2/feedback/SkeletonV2/SkeletonV2.module.css

@@ -0,0 +1,92 @@
+.skeleton {
+  position: relative;
+  display: block;
+  flex: none;
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden;
+  background: var(--cf-v2-surface-container-hover);
+}
+
+.text.sm {
+  width: var(--cf-v2-skeleton-text-width-sm);
+  height: var(--cf-v2-skeleton-text-height-sm);
+  border-radius: var(--cf-v2-skeleton-text-radius-sm);
+}
+
+.text.md {
+  width: var(--cf-v2-skeleton-text-width-md);
+  height: var(--cf-v2-skeleton-text-height-md);
+  border-radius: var(--cf-v2-skeleton-text-radius-md);
+}
+
+.rectangle {
+  border-radius: var(--cf-v2-skeleton-rectangle-radius);
+}
+
+.rectangle.sm {
+  width: var(--cf-v2-skeleton-rectangle-width-sm);
+  height: var(--cf-v2-skeleton-rectangle-height-sm);
+}
+
+.rectangle.md {
+  width: var(--cf-v2-skeleton-rectangle-width-md);
+  height: var(--cf-v2-skeleton-rectangle-height-md);
+}
+
+.circle {
+  border-radius: 50%;
+}
+
+.circle.sm {
+  width: var(--cf-v2-skeleton-circle-size-sm);
+  height: var(--cf-v2-skeleton-circle-size-sm);
+}
+
+.circle.md {
+  width: var(--cf-v2-skeleton-circle-size-md);
+  height: var(--cf-v2-skeleton-circle-size-md);
+}
+
+.pulse {
+  animation: pulse var(--cf-v2-skeleton-duration) ease-in-out infinite;
+}
+
+.wave::after {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, var(--cf-v2-surface-container-pressed), transparent);
+  content: '';
+  transform: translateX(-100%);
+  animation: wave var(--cf-v2-skeleton-duration) ease-in-out infinite;
+}
+
+@keyframes pulse {
+  50% {
+    opacity: var(--cf-v2-skeleton-pulse-opacity);
+  }
+}
+
+@keyframes wave {
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pulse,
+  .wave::after {
+    animation: none;
+  }
+
+  .wave::after {
+    display: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .skeleton {
+    background: GrayText;
+    forced-color-adjust: none;
+  }
+}

package/dist/componentsV2/feedback/SkeletonV2/index.d.ts

@@ -0,0 +1,3 @@
+export { SkeletonV2 } from './SkeletonV2';
+export type { SkeletonV2Animation, SkeletonV2Props, SkeletonV2Shape, SkeletonV2Size } from './SkeletonV2';
+//# sourceMappingURL=index.d.ts.map

package/dist/componentsV2/feedback/SkeletonV2/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/feedback/SkeletonV2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}

package/dist/componentsV2/feedback/SkeletonV2/index.js

@@ -0,0 +1 @@
+export { SkeletonV2 } from './SkeletonV2';

package/dist/componentsV2/feedback/SnackbarV2/SnackbarV2.d.ts

@@ -0,0 +1,35 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type SnackbarV2Tone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+export type SnackbarV2Density = 'compact' | 'detailed';
+export type SnackbarV2DismissReason = 'timeout' | 'close';
+export type SnackbarStackV2Placement = 'bottom-center' | 'bottom-end';
+export type SnackbarV2Props = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
+    title: ReactNode;
+    description?: ReactNode;
+    tone?: SnackbarV2Tone;
+    density?: SnackbarV2Density;
+    action?: ReactNode;
+    dismissible?: boolean;
+    dismissLabel?: string;
+    duration?: number | null;
+    onDismiss?: (reason: SnackbarV2DismissReason) => void;
+};
+export type SnackbarStackV2Props = Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'popover'> & {
+    placement?: SnackbarStackV2Placement;
+};
+export declare const SnackbarV2: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> & {
+    title: ReactNode;
+    description?: ReactNode;
+    tone?: SnackbarV2Tone;
+    density?: SnackbarV2Density;
+    action?: ReactNode;
+    dismissible?: boolean;
+    dismissLabel?: string;
+    duration?: number | null;
+    onDismiss?: (reason: SnackbarV2DismissReason) => void;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SnackbarStackV2: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "role" | "popover"> & {
+    placement?: SnackbarStackV2Placement;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SnackbarV2.d.ts.map

package/dist/componentsV2/feedback/SnackbarV2/SnackbarV2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/feedback/SnackbarV2/SnackbarV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAE5D,OAAO,EAUL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAClF,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,UAAU,CAAC;AACvD,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1D,MAAM,MAAM,wBAAwB,GAAG,eAAe,GAAG,YAAY,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACzF,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,GAAG;IAC5F,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC,CAAC;AAKF,eAAO,MAAM,UAAU;WAlBd,SAAS;kBACF,SAAS;WAChB,cAAc;cACX,iBAAiB;aAClB,SAAS;kBACJ,OAAO;mBACN,MAAM;eACV,MAAM,GAAG,IAAI;gBACZ,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI;kDAmIrD,CAAC;AAEH,eAAO,MAAM,eAAe;gBAjId,wBAAwB;kDA6JpC,CAAC"}

package/dist/componentsV2/feedback/SnackbarV2/SnackbarV2.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { Close } from '@corefoundry-labs/forge-icons';
+import { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useRef, } from 'react';
+import { chain, useLatest, useOpenLifecycle } from '../../overlays/layer';
+import styles from './SnackbarV2.module.css';
+const defaultDuration = 5000;
+const StackContext = createContext(false);
+export const SnackbarV2 = forwardRef(function SnackbarV2({ title, description, tone = 'neutral', density = 'compact', action, dismissible = true, dismissLabel = 'Dismiss', duration = action != null || tone === 'error' ? null : defaultDuration, onDismiss, role, className, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }, ref) {
+    const stacked = useContext(StackContext);
+    const liveRole = stacked ? undefined : 'status';
+    const rootRef = useRef(null);
+    const dismiss = useLatest(onDismiss);
+    const timer = useRef(undefined);
+    const remaining = useRef(null);
+    const startedAt = useRef(0);
+    const pauses = useRef(new Set());
+    const returnTo = useRef(null);
+    useImperativeHandle(ref, () => rootRef.current);
+    const run = useCallback(() => {
+        if (timer.current !== undefined || pauses.current.size > 0 || remaining.current === null)
+            return;
+        startedAt.current = Date.now();
+        timer.current = setTimeout(() => {
+            timer.current = undefined;
+            remaining.current = null;
+            dismiss.current?.('timeout');
+        }, remaining.current);
+    }, [dismiss]);
+    const pause = useCallback((reason) => {
+        pauses.current.add(reason);
+        if (rootRef.current)
+            rootRef.current.dataset.paused = 'true';
+        if (timer.current === undefined || remaining.current === null)
+            return;
+        clearTimeout(timer.current);
+        timer.current = undefined;
+        remaining.current = Math.max(remaining.current - (Date.now() - startedAt.current), 0);
+    }, []);
+    const resume = useCallback((reason) => {
+        pauses.current.delete(reason);
+        if (pauses.current.size === 0 && rootRef.current)
+            delete rootRef.current.dataset.paused;
+        run();
+    }, [run]);
+    useEffect(() => {
+        remaining.current = duration;
+        if (document.hidden)
+            pause('hidden');
+        run();
+        return () => {
+            clearTimeout(timer.current);
+            timer.current = undefined;
+        };
+    }, [duration, pause, run]);
+    useEffect(() => {
+        const sync = () => (document.hidden ? pause('hidden') : resume('hidden'));
+        document.addEventListener('visibilitychange', sync);
+        return () => document.removeEventListener('visibilitychange', sync);
+    }, [pause, resume]);
+    useLayoutEffect(() => {
+        const node = rootRef.current;
+        return () => {
+            const target = returnTo.current;
+            if (node?.contains(document.activeElement) && target instanceof HTMLElement) {
+                target.focus({ preventScroll: true });
+            }
+        };
+    }, []);
+    const focusIn = (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget))
+            returnTo.current = event.relatedTarget;
+        pause('focus');
+    };
+    const focusOut = (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget))
+            resume('focus');
+    };
+    return (_jsxs("div", { ...props, ref: rootRef, role: role ?? (tone === 'error' ? 'alert' : liveRole), "data-tone": tone, "data-density": density, onPointerEnter: chain(onPointerEnter, () => pause('hover')), onPointerLeave: chain(onPointerLeave, () => resume('hover')), onFocus: chain(onFocus, focusIn), onBlur: chain(onBlur, focusOut), className: [styles.snackbar, styles[tone], styles[density], className].filter(Boolean).join(' '), children: [_jsx("span", { className: styles.indicator, "aria-hidden": "true" }), _jsxs("div", { className: styles.text, children: [_jsx("div", { className: styles.title, children: title }), description != null && _jsx("div", { className: styles.description, children: description })] }), action != null && _jsx("div", { className: styles.action, children: action }), dismissible && onDismiss && (_jsx("button", { type: "button", className: styles.dismiss, "aria-label": dismissLabel, onClick: () => onDismiss('close'), children: _jsx(Close, { "aria-hidden": "true" }) }))] }));
+});
+export const SnackbarStackV2 = forwardRef(function SnackbarStackV2({ placement = 'bottom-center', 'aria-label': label = 'Notifications', className, children, ...props }, ref) {
+    const stackRef = useRef(null);
+    useImperativeHandle(ref, () => stackRef.current);
+    useOpenLifecycle(true, () => {
+        const stack = stackRef.current;
+        stack?.showPopover?.();
+        return () => stack?.hidePopover?.();
+    });
+    return (_jsx("div", { ...props, ref: stackRef, role: "region", "aria-label": label, "aria-live": "polite", "aria-relevant": "additions", popover: "manual", "data-placement": placement, className: [styles.stack, styles[placement === 'bottom-end' ? 'end' : 'center'], className].filter(Boolean).join(' '), children: _jsx(StackContext.Provider, { value: true, children: children }) }));
+});

package/dist/componentsV2/feedback/SnackbarV2/SnackbarV2.module.css

@@ -0,0 +1,162 @@
+.snackbar {
+  display: flex;
+  align-items: center;
+  gap: var(--cf-v2-snackbar-gap);
+  box-sizing: border-box;
+  padding-block: var(--cf-v2-snackbar-padding-block);
+  padding-inline: var(--cf-v2-snackbar-padding-start) var(--cf-v2-snackbar-padding-end);
+  border: var(--cf-v2-snackbar-border-width) solid var(--cf-v2-outline);
+  border-radius: var(--cf-v2-snackbar-radius);
+  background: var(--cf-v2-surface-container);
+  color: var(--cf-v2-on-surface);
+  font-family: inherit;
+  line-height: normal;
+  animation: enter var(--cf-v2-snackbar-enter-duration) ease-out;
+}
+
+.compact {
+  width: min(var(--cf-v2-snackbar-width-compact), 100%);
+  min-height: var(--cf-v2-snackbar-min-height-compact);
+}
+
+.detailed {
+  width: min(var(--cf-v2-snackbar-width-detailed), 100%);
+  min-height: var(--cf-v2-snackbar-min-height-detailed);
+}
+
+.neutral {
+  --snackbar-tone: var(--cf-v2-on-surface);
+}
+
+.info {
+  --snackbar-tone: var(--cf-v2-info);
+}
+
+.success {
+  --snackbar-tone: var(--cf-v2-success);
+}
+
+.warning {
+  --snackbar-tone: var(--cf-v2-warning);
+}
+
+.error {
+  --snackbar-tone: var(--cf-v2-error);
+}
+
+.indicator {
+  flex: none;
+  width: var(--cf-v2-snackbar-indicator-size);
+  height: var(--cf-v2-snackbar-indicator-size);
+  border-radius: 50%;
+  background: var(--snackbar-tone);
+}
+
+.text {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--cf-v2-snackbar-text-gap);
+  min-width: 0;
+}
+
+.title {
+  font-size: var(--cf-v2-snackbar-title-font-size);
+  font-weight: var(--cf-v2-snackbar-title-font-weight);
+  overflow-wrap: anywhere;
+}
+
+.description {
+  color: color-mix(in srgb, var(--cf-v2-on-surface) calc(var(--cf-v2-snackbar-description-opacity) * 100%), transparent);
+  font-size: var(--cf-v2-snackbar-description-font-size);
+  overflow-wrap: anywhere;
+}
+
+.action {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+.dismiss {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--cf-v2-snackbar-dismiss-size);
+  height: var(--cf-v2-snackbar-dismiss-size);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--cf-v2-snackbar-dismiss-radius);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.dismiss svg {
+  width: var(--cf-v2-snackbar-dismiss-icon-size);
+  height: var(--cf-v2-snackbar-dismiss-icon-size);
+}
+
+.dismiss:hover {
+  background: var(--cf-v2-surface-container-hover);
+}
+
+.dismiss:focus-visible {
+  outline: var(--cf-v2-snackbar-focus-width) solid var(--cf-v2-focus-ring);
+  outline-offset: calc(-1 * var(--cf-v2-snackbar-focus-width));
+}
+
+.stack {
+  position: fixed;
+  inset: auto;
+  bottom: var(--cf-v2-overlay-viewport-margin);
+  display: flex;
+  flex-direction: column;
+  gap: var(--cf-v2-snackbar-stack-gap);
+  box-sizing: border-box;
+  width: calc(100vw - 2 * var(--cf-v2-overlay-viewport-margin));
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  background: transparent;
+  color: var(--cf-v2-on-surface);
+  pointer-events: none;
+}
+
+.stack > * {
+  pointer-events: auto;
+}
+
+.center {
+  inset-inline: 0;
+  align-items: center;
+  margin-inline: auto;
+}
+
+.end {
+  inset-inline-end: var(--cf-v2-overlay-viewport-margin);
+  align-items: flex-end;
+}
+
+@keyframes enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--cf-v2-snackbar-enter-offset));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .snackbar {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .indicator {
+    background: CanvasText;
+    forced-color-adjust: none;
+  }
+}

package/dist/componentsV2/feedback/SnackbarV2/index.d.ts

@@ -0,0 +1,3 @@
+export { SnackbarStackV2, SnackbarV2 } from './SnackbarV2';
+export type { SnackbarStackV2Placement, SnackbarStackV2Props, SnackbarV2Density, SnackbarV2DismissReason, SnackbarV2Props, SnackbarV2Tone, } from './SnackbarV2';
+//# sourceMappingURL=index.d.ts.map

package/dist/componentsV2/feedback/SnackbarV2/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/feedback/SnackbarV2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC3D,YAAY,EACV,wBAAwB,EACxB,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,eAAe,EACf,cAAc,GACf,MAAM,cAAc,CAAC"}

package/dist/componentsV2/feedback/SnackbarV2/index.js

@@ -0,0 +1 @@
+export { SnackbarStackV2, SnackbarV2 } from './SnackbarV2';

package/dist/componentsV2/forms/CheckboxV2/CheckboxV2.d.ts

@@ -0,0 +1,10 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type InputHTMLAttributes } from 'react';
+import type { SelectionControlName } from '../selectionControl';
+type CheckboxV2Base = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'children'> & {
+    indeterminate?: boolean;
+};
+export type CheckboxV2Props = CheckboxV2Base & SelectionControlName;
+export declare const CheckboxV2: import("react").ForwardRefExoticComponent<CheckboxV2Props & import("react").RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=CheckboxV2.d.ts.map

package/dist/componentsV2/forms/CheckboxV2/CheckboxV2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/forms/CheckboxV2/CheckboxV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,EAML,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGhE,KAAK,cAAc,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC,GAAG;IAChG,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,oBAAoB,CAAC;AAEpE,eAAO,MAAM,UAAU,8GA2CrB,CAAC"}

package/dist/componentsV2/forms/CheckboxV2/CheckboxV2.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { forwardRef, useEffect, useImperativeHandle, useRef, } from 'react';
+import styles from './CheckboxV2.module.css';
+export const CheckboxV2 = forwardRef(function CheckboxV2({ indeterminate = false, className, style, children, onChange, ...props }, ref) {
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current, []);
+    useEffect(() => {
+        if (inputRef.current)
+            inputRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const handleChange = (event) => {
+        event.currentTarget.indeterminate = indeterminate;
+        onChange?.(event);
+    };
+    const Root = children == null ? 'span' : 'label';
+    return (_jsxs(Root, { className: [styles.root, className].filter(Boolean).join(' '), style: style, "data-disabled": props.disabled || undefined, children: [_jsxs("span", { className: styles.target, children: [_jsx("input", { ...props, ref: inputRef, type: "checkbox", onChange: handleChange, className: styles.input }), _jsxs("span", { className: styles.box, "aria-hidden": "true", children: [_jsx("svg", { className: styles.check, viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M4 10L8.2 14.2L16 6", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("svg", { className: styles.mixed, viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round" }) })] })] }), children != null && _jsx("span", { className: styles.label, children: children })] }));
+});