@corefoundry-labs/forge-ui 1.0.2 → 1.1.0

package/dist/componentsV2/data-display/AvatarV2/AvatarV2.module.css

@@ -0,0 +1,156 @@
+.avatar {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  border-radius: 50%;
+  font-family: inherit;
+  font-weight: var(--cf-v2-avatar-font-weight);
+  line-height: normal;
+  vertical-align: middle;
+}
+
+.sm {
+  --avatar-size: var(--cf-v2-avatar-size-sm);
+  font-size: var(--cf-v2-avatar-font-size-sm);
+}
+
+.md {
+  --avatar-size: var(--cf-v2-avatar-size-md);
+  font-size: var(--cf-v2-avatar-font-size-md);
+}
+
+.lg {
+  --avatar-size: var(--cf-v2-avatar-size-lg);
+  font-size: var(--cf-v2-avatar-font-size-lg);
+}
+
+.circle {
+  border-radius: 50%;
+}
+
+.rounded {
+  border-radius: var(--cf-v2-avatar-rounded-radius);
+}
+
+.surface {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: inherit;
+  background: var(--cf-v2-primary-container);
+  color: var(--cf-v2-on-primary-container);
+}
+
+.initials {
+  white-space: nowrap;
+}
+
+.glyph {
+  width: 62%;
+  height: 62%;
+}
+
+.image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+}
+
+.visible {
+  opacity: 1;
+}
+
+.status {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  box-sizing: border-box;
+  width: var(--cf-v2-avatar-status-size);
+  height: var(--cf-v2-avatar-status-size);
+  border: var(--cf-v2-avatar-status-border-width) solid var(--cf-v2-surface);
+  border-radius: 50%;
+}
+
+.neutral {
+  background: var(--cf-v2-outline);
+}
+
+.success {
+  background: var(--cf-v2-success);
+}
+
+.warning {
+  background: var(--cf-v2-warning);
+}
+
+.error {
+  background: var(--cf-v2-error);
+}
+
+.group {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+}
+
+.group > * {
+  outline: var(--cf-v2-avatar-group-border-width) solid var(--cf-v2-surface);
+}
+
+.group > * + * {
+  margin-inline-start: calc(-1 * var(--avatar-group-overlap));
+}
+
+.group-sm {
+  --avatar-group-overlap: var(--cf-v2-avatar-group-overlap-sm);
+}
+
+.group-md {
+  --avatar-group-overlap: var(--cf-v2-avatar-group-overlap-md);
+}
+
+.group-lg {
+  --avatar-group-overlap: var(--cf-v2-avatar-group-overlap-lg);
+}
+
+.count {
+  background: var(--cf-v2-surface-container-hover);
+  color: var(--cf-v2-on-surface);
+}
+
+.group-sm .count {
+  font-size: var(--cf-v2-avatar-count-font-size-sm);
+}
+
+.group-md .count {
+  font-size: var(--cf-v2-avatar-count-font-size-md);
+}
+
+.group-lg .count {
+  font-size: var(--cf-v2-avatar-count-font-size-lg);
+}
+
+@media (forced-colors: active) {
+  .surface,
+  .count {
+    box-sizing: border-box;
+    border: thin solid CanvasText;
+  }
+
+  .status {
+    border-color: Canvas;
+    background: CanvasText;
+    forced-color-adjust: none;
+  }
+}

package/dist/componentsV2/data-display/AvatarV2/index.d.ts

@@ -0,0 +1,3 @@
+export { AvatarGroupV2, AvatarV2 } from './AvatarV2';
+export type { AvatarGroupV2Props, AvatarV2Props, AvatarV2Shape, AvatarV2Size, AvatarV2StatusTone } from './AvatarV2';
+//# sourceMappingURL=index.d.ts.map

package/dist/componentsV2/data-display/AvatarV2/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/data-display/AvatarV2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACrD,YAAY,EAAE,kBAAkB,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"}

package/dist/componentsV2/data-display/AvatarV2/index.js

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

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

@@ -0,0 +1,25 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type HTMLAttributes, type MouseEventHandler, type ReactNode } from 'react';
+export type AlertV2Tone = 'info' | 'success' | 'warning' | 'error' | 'neutral';
+export type AlertV2Variant = 'soft' | 'solid' | 'outline';
+type AlertV2Base = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
+    tone?: AlertV2Tone;
+    variant?: AlertV2Variant;
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    icon?: ReactNode;
+    actions?: ReactNode;
+    onDismiss?: MouseEventHandler<HTMLButtonElement>;
+    dismissLabel?: string;
+};
+export type AlertV2Props = AlertV2Base & ({
+    title: ReactNode;
+} | {
+    description: ReactNode;
+} | {
+    children: ReactNode;
+});
+export declare const AlertV2: import("react").ForwardRefExoticComponent<AlertV2Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=AlertV2.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlertV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/feedback/AlertV2/AlertV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAE5D,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhG,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAE1D,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC9E,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,WAAW,GACpC,CAAC;IAAE,KAAK,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,WAAW,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAAC,CAAC;AAUhF,eAAO,MAAM,OAAO,yGA6ClB,CAAC"}

package/dist/componentsV2/feedback/AlertV2/AlertV2.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { Check, Close } from '@corefoundry-labs/forge-icons';
+import { forwardRef } from 'react';
+import styles from './AlertV2.module.css';
+const glyphs = {
+    info: 'i',
+    success: _jsx(Check, {}),
+    warning: '!',
+    error: '×',
+    neutral: '•',
+};
+export const AlertV2 = forwardRef(function AlertV2({ tone = 'info', variant = 'soft', title, description, children, icon, actions, onDismiss, dismissLabel = 'Close', role = tone === 'error' ? 'alert' : 'status', className, ...props }, ref) {
+    const body = description ?? children;
+    return (_jsxs("div", { ...props, ref: ref, role: role, "data-tone": tone, "data-variant": variant, className: [styles.alert, styles[tone], styles[variant], className].filter(Boolean).join(' '), children: [icon !== null && (_jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon ?? glyphs[tone] })), _jsxs("div", { className: styles.content, children: [title != null && _jsx("div", { className: styles.title, children: title }), body != null && _jsx("div", { className: styles.description, children: body }), actions != null && _jsx("div", { className: styles.actions, children: actions })] }), onDismiss && (_jsx("button", { type: "button", className: styles.dismiss, "aria-label": dismissLabel, onClick: onDismiss, children: _jsx(Close, { "aria-hidden": "true" }) }))] }));
+});

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

@@ -0,0 +1,144 @@
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--cf-v2-alert-gap);
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--cf-v2-alert-padding);
+  border-radius: var(--cf-v2-alert-radius);
+  font-family: inherit;
+  line-height: normal;
+}
+
+.info {
+  --alert-fill: var(--cf-v2-info);
+  --alert-on: var(--cf-v2-on-info);
+  --alert-border: var(--cf-v2-info);
+}
+
+.success {
+  --alert-fill: var(--cf-v2-success);
+  --alert-on: var(--cf-v2-on-success);
+  --alert-border: var(--cf-v2-success);
+}
+
+.warning {
+  --alert-fill: var(--cf-v2-warning);
+  --alert-on: var(--cf-v2-on-warning);
+  --alert-border: var(--cf-v2-warning);
+}
+
+.error {
+  --alert-fill: var(--cf-v2-error);
+  --alert-on: var(--cf-v2-on-error);
+  --alert-border: var(--cf-v2-error);
+}
+
+.neutral {
+  --alert-fill: var(--cf-v2-surface-container);
+  --alert-on: var(--cf-v2-on-surface);
+  --alert-border: var(--cf-v2-outline);
+}
+
+.soft {
+  background: var(--cf-v2-surface-container);
+  color: var(--cf-v2-on-surface);
+}
+
+.solid {
+  background: var(--alert-fill);
+  color: var(--alert-on);
+}
+
+.outline {
+  border: var(--cf-v2-alert-border-width) solid var(--alert-border);
+  background: var(--cf-v2-surface);
+  color: var(--cf-v2-on-surface);
+}
+
+.icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--cf-v2-alert-icon-size);
+  height: var(--cf-v2-alert-icon-size);
+  border-radius: var(--cf-v2-alert-icon-radius);
+  background: var(--alert-fill);
+  color: var(--alert-on);
+  font-size: var(--cf-v2-alert-icon-font-size);
+  font-weight: var(--cf-v2-alert-icon-font-weight);
+}
+
+.icon svg {
+  width: var(--cf-v2-alert-icon-font-size);
+  height: var(--cf-v2-alert-icon-font-size);
+}
+
+.solid .icon {
+  background: var(--alert-on);
+  color: var(--alert-fill);
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--cf-v2-alert-content-gap);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.title {
+  font-size: var(--cf-v2-alert-title-font-size);
+  font-weight: var(--cf-v2-alert-title-font-weight);
+}
+
+.description {
+  color: color-mix(in srgb, currentColor calc(var(--cf-v2-alert-description-opacity) * 100%), transparent);
+  font-size: var(--cf-v2-alert-description-font-size);
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--cf-v2-alert-actions-gap);
+}
+
+.dismiss {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--cf-v2-alert-dismiss-size);
+  height: var(--cf-v2-alert-dismiss-size);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--cf-v2-alert-dismiss-radius);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.dismiss svg {
+  width: var(--cf-v2-alert-dismiss-icon-size);
+  height: var(--cf-v2-alert-dismiss-icon-size);
+}
+
+.dismiss:hover {
+  background: color-mix(in srgb, currentColor calc(var(--cf-v2-alert-dismiss-hover-opacity) * 100%), transparent);
+}
+
+.dismiss:focus-visible {
+  outline: var(--cf-v2-alert-focus-width) solid currentColor;
+  outline-offset: calc(-1 * var(--cf-v2-alert-focus-width));
+}
+
+@media (forced-colors: active) {
+  .alert,
+  .icon {
+    border: thin solid CanvasText;
+  }
+}

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

@@ -0,0 +1,3 @@
+export { AlertV2 } from './AlertV2';
+export type { AlertV2Props, AlertV2Tone, AlertV2Variant } from './AlertV2';
+//# sourceMappingURL=index.d.ts.map

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

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

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

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

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

@@ -0,0 +1,13 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type FeedbackStateV2Kind = 'loading' | 'empty' | 'error' | 'readOnly';
+export interface FeedbackStateV2Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role' | 'aria-busy' | 'aria-describedby' | 'aria-labelledby'> {
+    state: FeedbackStateV2Kind;
+    title: string;
+    description?: ReactNode;
+    icon?: ReactNode;
+    actions?: ReactNode;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+export declare const FeedbackStateV2: import("react").ForwardRefExoticComponent<FeedbackStateV2Props & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=FeedbackStateV2.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackStateV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/feedback/FeedbackStateV2/FeedbackStateV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/E,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;AAE7E,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,GAAG,MAAM,GAAG,WAAW,GAAG,kBAAkB,GAAG,iBAAiB,CAC3E;IACC,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,eAAe,iHAkD1B,CAAC"}

package/dist/componentsV2/feedback/FeedbackStateV2/FeedbackStateV2.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, useId } from 'react';
+import styles from './FeedbackStateV2.module.css';
+export const FeedbackStateV2 = forwardRef(function FeedbackStateV2({ state, title, description, icon, actions, headingLevel = 3, className, ...props }, ref) {
+    const id = `forge-feedback-state-v2-${useId().replace(/:/g, '')}`;
+    const titleId = `${id}-title`;
+    const hasDescription = description != null && typeof description !== 'boolean';
+    const hasIcon = icon != null && typeof icon !== 'boolean';
+    const hasActions = actions != null && typeof actions !== 'boolean';
+    const descriptionId = hasDescription ? `${id}-description` : undefined;
+    const role = state === 'loading' ? 'status' : state === 'error' ? 'alert' : 'region';
+    const hasMarker = state === 'loading' || hasIcon;
+    const Heading = `h${headingLevel}`;
+    return (_jsxs("div", { ...props, ref: ref, role: role, "aria-labelledby": titleId, "aria-describedby": descriptionId, "data-state": state, className: [styles.panel, styles[state], hasMarker && styles.hasMarker, className]
+            .filter(Boolean)
+            .join(' '), children: [state === 'loading' ? (_jsx("span", { className: styles.spinner, "data-feedback-spinner": true, "aria-hidden": "true" })) : (hasIcon && (_jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon }))), _jsxs("div", { className: styles.content, children: [_jsx(Heading, { id: titleId, className: styles.heading, children: title }), hasDescription && _jsx("div", { id: descriptionId, className: styles.description, children: description }), hasActions && _jsx("div", { className: styles.actions, children: actions })] })] }));
+});

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

@@ -0,0 +1,102 @@
+.panel {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--cf-v2-feedback-state-gap);
+  min-width: 0;
+  padding: var(--cf-v2-feedback-state-padding);
+  border: var(--cf-v2-feedback-state-border-width) solid var(--cf-v2-outline-variant);
+  border-radius: var(--cf-v2-feedback-state-radius);
+  background: var(--cf-v2-surface);
+  color: var(--cf-v2-on-surface);
+}
+
+.hasMarker {
+  grid-template-columns: var(--cf-v2-feedback-state-marker-size) minmax(0, 1fr);
+}
+
+.content {
+  display: grid;
+  min-width: 0;
+  gap: var(--cf-v2-feedback-state-content-gap);
+  grid-column: 1 / -1;
+}
+
+.hasMarker > .content {
+  grid-column: 2;
+}
+
+.heading,
+.description {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.heading {
+  color: var(--cf-v2-on-surface);
+  font-size: var(--cf-v2-feedback-state-title-font-size);
+}
+
+.icon,
+.spinner {
+  box-sizing: border-box;
+  display: grid;
+  width: var(--cf-v2-feedback-state-marker-size);
+  height: var(--cf-v2-feedback-state-marker-size);
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--cf-v2-primary);
+}
+
+.icon :global(svg) {
+  width: 100%;
+  height: 100%;
+}
+
+.spinner {
+  border: var(--cf-v2-feedback-state-spinner-width) solid var(--cf-v2-outline-variant);
+  border-top-color: var(--cf-v2-primary);
+  border-radius: 50%;
+  animation: feedback-state-spin var(--cf-v2-feedback-state-spinner-duration) linear infinite;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cf-v2-feedback-state-content-gap);
+  margin-top: var(--cf-v2-feedback-state-actions-offset);
+  min-width: 0;
+}
+
+.actions > * {
+  max-width: 100%;
+}
+
+.empty {
+  border-style: dashed;
+}
+
+.error {
+  border-color: var(--cf-v2-error);
+  background: color-mix(in srgb, var(--cf-v2-error) var(--cf-v2-feedback-state-error-tint), var(--cf-v2-surface));
+}
+
+.readOnly {
+  border-color: var(--cf-v2-warning);
+}
+
+.loading {
+  border-style: dashed;
+}
+
+@keyframes feedback-state-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,3 @@
+export { FeedbackStateV2 } from './FeedbackStateV2';
+export type { FeedbackStateV2Kind, FeedbackStateV2Props } from './FeedbackStateV2';
+//# sourceMappingURL=index.d.ts.map

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

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

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

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

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

@@ -0,0 +1,35 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ProgressV2Shape = 'linear' | 'circular';
+export type ProgressV2Status = 'normal' | 'success' | 'error';
+type ProgressV2Base = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax'> & {
+    shape?: ProgressV2Shape;
+    status?: ProgressV2Status;
+    valueLabel?: ReactNode;
+};
+type ProgressV2Name = {
+    label: string;
+    'aria-label'?: undefined;
+    'aria-labelledby'?: undefined;
+} | {
+    label?: undefined;
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+} | {
+    label?: undefined;
+    'aria-label'?: undefined;
+    'aria-labelledby': string;
+};
+type ProgressV2Value = {
+    value: number;
+    max?: number;
+    indeterminate?: false;
+} | {
+    indeterminate: true;
+    value?: undefined;
+    max?: undefined;
+};
+export type ProgressV2Props = ProgressV2Base & ProgressV2Name & ProgressV2Value;
+export declare const ProgressV2: import("react").ForwardRefExoticComponent<ProgressV2Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=ProgressV2.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/feedback/ProgressV2/ProgressV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,UAAU,CAAC;AACpD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9D,KAAK,cAAc,GAAG,IAAI,CACxB,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,CAC7G,GAAG;IACF,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,KAAK,cAAc,GACf;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GAC1E;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GAC1E;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/E,KAAK,eAAe,GAChB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,GACtD;IAAE,aAAa,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAAC,GAAG,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,eAAe,CAAC;AAKhF,eAAO,MAAM,UAAU,4GAyErB,CAAC"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { forwardRef } from 'react';
+import styles from './ProgressV2.module.css';
+const center = 35;
+const radius = 31.5;
+export const ProgressV2 = forwardRef(function ProgressV2({ shape = 'linear', status = 'normal', value, max = 100, indeterminate = false, label, valueLabel, className, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, ...props }, ref) {
+    const limit = max > 0 ? max : 100;
+    const current = Math.min(Math.max(Number.isFinite(value) ? value : 0, 0), limit);
+    const percent = (current / limit) * 100;
+    const circular = shape === 'circular';
+    const fallback = indeterminate ? (circular ? '…' : 'Ongoing') : `${Math.round(percent)}%`;
+    const text = valueLabel === undefined ? fallback : valueLabel;
+    return (_jsx("div", { ...props, ref: ref, role: "progressbar", "aria-label": label ?? ariaLabel, "aria-labelledby": labelledBy, "aria-valuenow": indeterminate ? undefined : current, "aria-valuemin": indeterminate ? undefined : 0, "aria-valuemax": indeterminate ? undefined : limit, "data-shape": shape, "data-status": status, "data-indeterminate": indeterminate || undefined, className: [styles.progress, styles[shape], styles[status], className].filter(Boolean).join(' '), children: circular ? (_jsxs(_Fragment, { children: [_jsxs("svg", { className: styles.ring, viewBox: "0 0 70 70", "aria-hidden": "true", children: [_jsx("circle", { className: styles.ringTrack, cx: center, cy: center, r: radius }), (indeterminate || percent > 0) && (_jsx("circle", { className: [styles.ringArc, indeterminate && styles.spin].filter(Boolean).join(' '), cx: center, cy: center, r: radius, pathLength: 100, strokeDasharray: `${indeterminate ? 25 : percent} 100` }))] }), text != null && _jsx("span", { className: styles.ringValue, children: text })] })) : (_jsxs(_Fragment, { children: [(label != null || text != null) && (_jsxs("div", { className: styles.header, children: [label != null && _jsx("span", { className: styles.label, children: label }), text != null && _jsx("span", { className: styles.value, children: text })] })), _jsx("div", { className: styles.track, children: _jsx("div", { className: [styles.fill, indeterminate && styles.moving].filter(Boolean).join(' '), style: indeterminate ? undefined : { width: `${percent}%` } }) })] })) }));
+});