@corefoundry-labs/forge-ui 1.0.2 → 1.1.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -11,6 +11,84 @@ import { Button, FormField, Input } from '@corefoundry-labs/forge-ui';
 <Button>Save</Button>;
 ```
 
+`FeedbackStateV2` brings loading, empty, error, and read-only presentations under one additive API. The existing `EmptyState`, `ErrorState`, `LoadingState`, and `StatePanel` exports remain available with their current contracts.
+
+```tsx
+import { FeedbackStateV2, Button } from '@corefoundry-labs/forge-ui';
+
+<FeedbackStateV2
+  state="error"
+  title="Could not load projects"
+  description="Check your connection and retry."
+  actions={<Button onClick={retry}>Retry</Button>}
+/>
+```
+
+`FeedbackStateV2` reads the `--cf-v2-*` semantic roles when a dynamic theme is applied to an ancestor. Without a theme of your own, it uses the default Forge theme from `@corefoundry-labs/forge-tokens/theme-v2/tokens.css`. Apply a theme with `createTheme` and `applyTheme` from `@corefoundry-labs/forge-tokens/theme-v2`, or use CSS generated by `generateThemeCss`.
+
+`ButtonV2` is the V2 action. It lives apart from V1 in `src/componentsV2` and uses only `--cf-v2-*` tokens, so it follows `ThemeScope` and `applyTheme` in light, dark, and high contrast. An icon-only button requires `aria-label`.
+
+```tsx
+import { ButtonV2 } from '@corefoundry-labs/forge-ui';
+import { Plus, Search } from '@corefoundry-labs/forge-icons';
+
+<ButtonV2 iconStart={<Plus />}>Add item</ButtonV2>;
+<ButtonV2 variant="danger" size="sm" loading={saving} onClick={save}>Delete</ButtonV2>;
+<ButtonV2 variant="ghost" aria-label="Search" iconStart={<Search />} />;
+```
+
+`TextInputV2`, `SelectV2`, `CheckboxV2`, and `SwitchV2` are the V2 form controls. Each one wraps a native element. `CheckboxV2` and `SwitchV2` take their label as children and require an accessible name without it.
+
+```tsx
+import { CheckboxV2, SelectV2, SwitchV2, TextInputV2 } from '@corefoundry-labs/forge-ui';
+
+<TextInputV2 aria-label="Project name" size="md" value={name} onChange={rename} />;
+<SelectV2 aria-label="Plan" value={plan} onChange={choose}>
+  <option value="">Choose an option</option>
+  <option value="team">Team</option>
+</SelectV2>;
+<CheckboxV2 checked={accepted} onChange={accept}>Accept terms</CheckboxV2>;
+<SwitchV2 checked={enabled} onChange={toggle}>Notifications</SwitchV2>;
+```
+
+`CardV2`, `BadgeV2`, `TabsV2`, and `AlertV2` are the V2 display components. Only an interactive `CardV2` is an action, and `TabsV2` requires an accessible name.
+
+```tsx
+import { AlertV2, BadgeV2, CardV2, TabsV2 } from '@corefoundry-labs/forge-ui';
+
+<CardV2 variant="outlined" header="Atlas" footer="Updated today">A home for your next idea.</CardV2>;
+<CardV2 variant="interactive" header="Open Atlas" onClick={open} />;
+<BadgeV2 tone="success" variant="subtle" size="md">Completed</BadgeV2>;
+<TabsV2 aria-label="Project views" items={items} value={view} onValueChange={setView} />;
+<AlertV2 tone="error" title="Could not save" description="Try again." onDismiss={close} />;
+```
+
+`DialogV2`, `TooltipV2`, `PopoverV2`, and `DropdownMenuV2` are the V2 overlays. They render in place and rise into the browser top layer, so they inherit their `ThemeScope` and no ancestor can clip them. They need the Popover API: Chrome and Edge 114, Safari 17, or Firefox 125.
+
+```tsx
+import { ButtonV2, DialogV2, DropdownMenuV2, PopoverV2, TooltipV2 } from '@corefoundry-labs/forge-ui';
+
+<DialogV2 open={open} onOpenChange={setOpen} title="Confirm action" footer={<ButtonV2 onClick={confirm}>Continue</ButtonV2>} />;
+<TooltipV2 content="Copy the link"><ButtonV2 aria-label="Copy" iconStart={<Copy />} /></TooltipV2>;
+<PopoverV2 trigger={<ButtonV2>More options</ButtonV2>} title="Preferences">{content}</PopoverV2>;
+<DropdownMenuV2 trigger={<ButtonV2>More actions</ButtonV2>} items={[{ id: 'edit', label: 'Edit', onSelect: edit }]} />;
+```
+
+`ProgressV2`, `SkeletonV2`, `SnackbarV2`, and `AvatarV2` cover loading, transient feedback, and identity. A snackbar never takes focus, and the parent owns the list.
+
+```tsx
+import { AvatarV2, ProgressV2, SkeletonV2, SnackbarStackV2, SnackbarV2 } from '@corefoundry-labs/forge-ui';
+
+<ProgressV2 label="Uploading" value={68} />;
+<SkeletonV2 shape="rectangle" size="md" animation="pulse" />;
+<SnackbarStackV2>
+  {items.map((item) => <SnackbarV2 key={item.id} tone="success" title={item.title} onDismiss={() => remove(item.id)} />)}
+</SnackbarStackV2>;
+<AvatarV2 alt="Ada Lovelace" src={photo} initials="AL" size="lg" />;
+```
+
+Preview the V2 components, the V1 components, and `FeedbackStateV2` locally with `npm run playground:ui` from the repository root. The host lets you change the preset, mode, and primary seed within the preview. The preview documents package rendering; it is not a human Figma certification.
+
 Build and test this package independently from the repository root with `npm run build --workspace=@corefoundry-labs/forge-ui` and `npm test --workspace=@corefoundry-labs/forge-ui`.
 
 Consumers can import the safe aggregate stylesheet from `@corefoundry-labs/forge-ui/styles.css`. It contains

package/dist/components/layout/ThemeScope/ThemeScope.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from 'react';
+/** Structural adapter for themes produced by forge-tokens/theme-v2. */
+export interface ThemeScopeTheme {
+    readonly roles: Readonly<Record<string, string>>;
+    readonly mode?: 'light' | 'dark' | 'high-contrast';
+}
+export interface ThemeScopeProps extends HTMLAttributes<HTMLDivElement> {
+    theme: ThemeScopeTheme;
+}
+export declare const ThemeScope: import("react").ForwardRefExoticComponent<ThemeScopeProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ThemeScope.d.ts.map

package/dist/components/layout/ThemeScope/ThemeScope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeScope.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/ThemeScope/ThemeScope.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5E,uEAAuE;AACvE,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACjD,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;CACpD;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,KAAK,EAAE,eAAe,CAAC;CACxB;AAID,eAAO,MAAM,UAAU,4GAiBrB,CAAC"}

package/dist/components/layout/ThemeScope/ThemeScope.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const ThemeScope = forwardRef(function ThemeScope({ theme, style, children, ...props }, ref) {
+    const scopedStyle = { ...style };
+    for (const [role, value] of Object.entries(theme.roles)) {
+        // This adapter serializes semantic roles; palette generation stays in forge-tokens.
+        const property = `--cf-v2-${role.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}`;
+        scopedStyle[property] = value;
+    }
+    if (theme.mode)
+        scopedStyle.colorScheme = theme.mode === 'light' ? 'light' : 'dark';
+    return (_jsx("div", { ...props, ref: ref, style: scopedStyle, "data-cf-theme-mode": theme.mode, children: children }));
+});

package/dist/components/layout/ThemeScope/index.d.ts

@@ -0,0 +1,3 @@
+export { ThemeScope } from './ThemeScope';
+export type { ThemeScopeProps, ThemeScopeTheme } from './ThemeScope';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/ThemeScope/index.d.ts.map

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

package/dist/components/layout/ThemeScope/index.js

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

package/dist/componentsV2/actions/ButtonV2/ButtonV2.d.ts

@@ -0,0 +1,21 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+export type ButtonV2Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type ButtonV2Size = 'sm' | 'md' | 'lg';
+type ButtonV2Base = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
+    variant?: ButtonV2Variant;
+    size?: ButtonV2Size;
+    loading?: boolean;
+    loadingLabel?: string;
+    iconStart?: ReactNode;
+    iconEnd?: ReactNode;
+};
+export type ButtonV2Props = ButtonV2Base & ({
+    children: ReactNode;
+} | {
+    children?: undefined;
+    'aria-label': string;
+});
+export declare const ButtonV2: import("react").ForwardRefExoticComponent<ButtonV2Props & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=ButtonV2.d.ts.map

package/dist/componentsV2/actions/ButtonV2/ButtonV2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/actions/ButtonV2/ButtonV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,EAAc,KAAK,oBAAoB,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/F,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC3E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,KAAK,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,GACtC,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE7E,eAAO,MAAM,QAAQ,6GAwDnB,CAAC"}

package/dist/componentsV2/actions/ButtonV2/ButtonV2.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { forwardRef } from 'react';
+import styles from './ButtonV2.module.css';
+export const ButtonV2 = forwardRef(function ButtonV2({ variant = 'primary', size = 'md', loading = false, loadingLabel = 'Saving…', iconStart, iconEnd, className, children, onClick, type = 'button', ...props }, ref) {
+    const iconOnly = children == null;
+    const handleClick = (event) => {
+        if (loading) {
+            event.preventDefault();
+            return;
+        }
+        onClick?.(event);
+    };
+    return (_jsxs("button", { ...props, ref: ref, type: type, "aria-busy": loading || props['aria-busy'], "aria-disabled": loading || props['aria-disabled'], "data-variant": variant, "data-size": size, onClick: handleClick, className: [styles.button, styles[variant], styles[size], iconOnly && styles.iconOnly, className]
+            .filter(Boolean)
+            .join(' '), children: [loading ? (_jsx("span", { className: styles.spinner, "data-button-spinner": true, "aria-hidden": "true" })) : (iconStart != null && (_jsx("span", { className: styles.icon, "aria-hidden": "true", children: iconStart }))), !iconOnly && _jsx("span", { className: styles.label, children: loading ? loadingLabel : children }), !loading && iconEnd != null && (_jsx("span", { className: styles.icon, "aria-hidden": "true", children: iconEnd }))] }));
+});

package/dist/componentsV2/actions/ButtonV2/ButtonV2.module.css

@@ -0,0 +1,158 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cf-v2-button-gap);
+  box-sizing: border-box;
+  max-width: 100%;
+  margin: 0;
+  border: var(--cf-v2-button-border-width) solid transparent;
+  border-radius: var(--cf-v2-button-radius);
+  font-family: inherit;
+  font-weight: var(--cf-v2-button-font-weight);
+  line-height: normal;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background-color var(--cf-v2-button-transition-duration) ease,
+    border-color var(--cf-v2-button-transition-duration) ease;
+}
+
+.sm {
+  height: var(--cf-v2-button-height-sm);
+  padding-inline: var(--cf-v2-button-padding-sm);
+  font-size: var(--cf-v2-button-font-size-sm);
+}
+
+.md {
+  height: var(--cf-v2-button-height-md);
+  padding-inline: var(--cf-v2-button-padding-md);
+  font-size: var(--cf-v2-button-font-size-md);
+}
+
+.lg {
+  height: var(--cf-v2-button-height-lg);
+  padding-inline: var(--cf-v2-button-padding-lg);
+  font-size: var(--cf-v2-button-font-size-lg);
+}
+
+.iconOnly {
+  padding-inline: 0;
+  aspect-ratio: 1;
+}
+
+.label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.icon svg {
+  width: var(--cf-v2-button-icon-size);
+  height: var(--cf-v2-button-icon-size);
+}
+
+.spinner {
+  flex: none;
+  box-sizing: border-box;
+  width: var(--cf-v2-button-icon-size);
+  height: var(--cf-v2-button-icon-size);
+  border: var(--cf-v2-button-spinner-width) solid currentColor;
+  border-inline-end-color: transparent;
+  border-radius: 50%;
+  animation: spin var(--cf-v2-button-spinner-duration) linear infinite;
+}
+
+.primary {
+  background: var(--cf-v2-action-primary);
+  color: var(--cf-v2-on-action-primary);
+}
+
+.primary:hover:not(:disabled, [aria-busy='true']) {
+  background: var(--cf-v2-action-primary-hover);
+}
+
+.primary:active:not(:disabled, [aria-busy='true']) {
+  background: var(--cf-v2-action-primary-pressed);
+}
+
+.secondary {
+  border-color: var(--cf-v2-outline);
+  background: var(--cf-v2-surface-container);
+  color: var(--cf-v2-on-surface);
+}
+
+.secondary:hover:not(:disabled, [aria-busy='true']) {
+  background: var(--cf-v2-surface-container-hover);
+}
+
+.secondary:active:not(:disabled, [aria-busy='true']) {
+  background: var(--cf-v2-surface-container-pressed);
+}
+
+.ghost {
+  background: transparent;
+  color: var(--cf-v2-on-surface);
+}
+
+.ghost:hover:not(:disabled, [aria-busy='true']) {
+  background: var(--cf-v2-surface-container-hover);
+}
+
+.ghost:active:not(:disabled, [aria-busy='true']) {
+  background: var(--cf-v2-surface-container-pressed);
+}
+
+.danger {
+  background: var(--cf-v2-error);
+  color: var(--cf-v2-on-error);
+}
+
+.danger:hover:not(:disabled, [aria-busy='true']) {
+  background: var(--cf-v2-error-hover);
+}
+
+.danger:active:not(:disabled, [aria-busy='true']) {
+  background: var(--cf-v2-error-pressed);
+}
+
+.button:focus-visible {
+  outline: var(--cf-v2-button-focus-width) solid var(--cf-v2-focus-ring);
+  outline-offset: var(--cf-v2-button-focus-offset);
+}
+
+.button[aria-busy='true'] {
+  cursor: progress;
+}
+
+.button:disabled {
+  background: var(--cf-v2-disabled);
+  opacity: var(--cf-v2-button-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.button:disabled .label,
+.button:disabled .icon {
+  opacity: var(--cf-v2-button-disabled-content-opacity);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    transition: none;
+  }
+
+  .spinner {
+    animation: none;
+  }
+}

package/dist/componentsV2/actions/ButtonV2/index.d.ts

@@ -0,0 +1,3 @@
+export { ButtonV2 } from './ButtonV2';
+export type { ButtonV2Props, ButtonV2Size, ButtonV2Variant } from './ButtonV2';
+//# sourceMappingURL=index.d.ts.map

package/dist/componentsV2/actions/ButtonV2/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/actions/ButtonV2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC"}

package/dist/componentsV2/actions/ButtonV2/index.js

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

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

@@ -0,0 +1,36 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type HTMLAttributes, type ImgHTMLAttributes, type ReactNode } from 'react';
+export type AvatarV2Size = 'sm' | 'md' | 'lg';
+export type AvatarV2Shape = 'circle' | 'rounded';
+export type AvatarV2StatusTone = 'neutral' | 'success' | 'warning' | 'error';
+type AvatarV2Base = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'role' | 'aria-label' | 'aria-hidden'> & {
+    alt: string;
+    src?: string;
+    initials?: string;
+    size?: AvatarV2Size;
+    shape?: AvatarV2Shape;
+    loading?: ImgHTMLAttributes<HTMLImageElement>['loading'];
+};
+export type AvatarV2Props = AvatarV2Base & ({
+    statusTone?: undefined;
+    statusLabel?: undefined;
+} | {
+    statusTone: AvatarV2StatusTone;
+    statusLabel: string;
+});
+export type AvatarGroupV2Props = Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label' | 'aria-labelledby'> & {
+    children: ReactNode;
+    size?: AvatarV2Size;
+    max?: number;
+    moreLabel?: (count: number) => string;
+} & ({
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+} | {
+    'aria-label'?: undefined;
+    'aria-labelledby': string;
+});
+export declare const AvatarV2: import("react").ForwardRefExoticComponent<AvatarV2Props & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const AvatarGroupV2: import("react").ForwardRefExoticComponent<AvatarGroupV2Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=AvatarV2.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/data-display/AvatarV2/AvatarV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAE5D,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC;AACjD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7E,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC,GAAG;IAC9G,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,SAAS,CAAC,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,GACtC,CAAC;IAAE,UAAU,CAAC,EAAE,SAAS,CAAC;IAAC,WAAW,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,UAAU,EAAE,kBAAkB,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAAC,GAAG;IACjH,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACvC,GAAG,CAAC;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAExH,eAAO,MAAM,QAAQ,2GA2CnB,CAAC;AAEH,eAAO,MAAM,aAAa,+GAwBxB,CAAC"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { User } from '@corefoundry-labs/forge-icons';
+import { Children, cloneElement, forwardRef, isValidElement, useState, } from 'react';
+import styles from './AvatarV2.module.css';
+export const AvatarV2 = forwardRef(function AvatarV2({ alt, src, initials, size = 'sm', shape = 'circle', loading, statusTone, statusLabel, className, ...props }, ref) {
+    const [loaded, setLoaded] = useState(null);
+    const [failed, setFailed] = useState(null);
+    const usable = src ? src !== failed : false;
+    const visible = usable && src === loaded;
+    const name = [alt, statusLabel].filter(Boolean).join(', ');
+    const content = visible ? 'image' : initials ? 'initials' : 'fallback';
+    return (_jsxs("span", { ...props, ref: ref, role: name ? 'img' : undefined, "aria-label": name || undefined, "aria-hidden": name ? undefined : true, "data-size": size, "data-shape": shape, "data-content": content, className: [styles.avatar, styles[size], styles[shape], className].filter(Boolean).join(' '), children: [_jsxs("span", { className: styles.surface, children: [content === 'initials' && _jsx("span", { className: styles.initials, children: initials }), content === 'fallback' && _jsx(User, { className: styles.glyph, "aria-hidden": "true" }), usable && (_jsx("img", { ref: (node) => {
+                            if (node?.complete && node.naturalWidth > 0)
+                                setLoaded(src);
+                        }, className: [styles.image, visible && styles.visible].filter(Boolean).join(' '), src: src, alt: "", loading: loading, onLoad: () => setLoaded(src), onError: () => setFailed(src) }))] }), statusTone && _jsx("span", { className: [styles.status, styles[statusTone]].join(' '), "data-status": statusTone })] }));
+});
+export const AvatarGroupV2 = forwardRef(function AvatarGroupV2({ children, size = 'sm', max, moreLabel = (count) => `${count} more`, className, ...props }, ref) {
+    const items = Children.toArray(children).filter((child) => isValidElement(child));
+    const shown = max !== undefined && max >= 0 ? items.slice(0, max) : items;
+    const hidden = items.length - shown.length;
+    return (_jsxs("div", { ...props, ref: ref, role: "group", "data-size": size, className: [styles.group, styles[`group-${size}`], className].filter(Boolean).join(' '), children: [shown.map((item) => cloneElement(item, { size })), hidden > 0 && (_jsxs("span", { role: "img", "aria-label": moreLabel(hidden), className: [styles.avatar, styles[size], styles.count].join(' '), children: ["+", hidden] }))] }));
+});