@corefoundry-labs/forge-ui 1.0.2 → 1.1.0

package/dist/componentsV2/forms/CheckboxV2/CheckboxV2.module.css

@@ -0,0 +1,137 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cf-v2-selection-gap);
+  max-width: 100%;
+  color: var(--cf-v2-on-surface);
+  font-family: inherit;
+  font-size: var(--cf-v2-selection-label-font-size);
+  font-weight: var(--cf-v2-selection-label-font-weight);
+  cursor: pointer;
+}
+
+.root[data-disabled] {
+  color: var(--cf-v2-on-surface-variant);
+  cursor: not-allowed;
+}
+
+.target {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--cf-v2-selection-target-size);
+  height: var(--cf-v2-selection-target-size);
+}
+
+.input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border-radius: var(--cf-v2-checkbox-target-radius);
+  background: transparent;
+  appearance: none;
+  cursor: inherit;
+}
+
+.input:focus-visible {
+  outline: var(--cf-v2-selection-focus-width) solid var(--cf-v2-focus-ring);
+  outline-offset: calc(-1 * var(--cf-v2-selection-focus-width));
+}
+
+.box {
+  position: relative;
+  box-sizing: border-box;
+  width: var(--cf-v2-checkbox-size);
+  height: var(--cf-v2-checkbox-size);
+  border: var(--cf-v2-checkbox-border-width) solid var(--cf-v2-outline);
+  border-radius: var(--cf-v2-checkbox-radius);
+  background: var(--cf-v2-surface-container);
+  color: var(--cf-v2-on-action-primary);
+  pointer-events: none;
+  transition: background-color var(--cf-v2-selection-transition-duration) ease;
+}
+
+.check,
+.mixed {
+  position: absolute;
+  inset: calc(-1 * var(--cf-v2-checkbox-border-width));
+  display: none;
+  width: var(--cf-v2-checkbox-size);
+  height: var(--cf-v2-checkbox-size);
+}
+
+.input:checked:not(:indeterminate) + .box .check,
+.input:indeterminate + .box .mixed {
+  display: block;
+}
+
+.root:hover .input:not(:disabled) + .box {
+  background: var(--cf-v2-surface-container-hover);
+}
+
+.root:active .input:not(:disabled) + .box {
+  background: var(--cf-v2-surface-container-pressed);
+}
+
+.input:checked + .box,
+.input:indeterminate + .box {
+  border-color: var(--cf-v2-action-primary);
+  background: var(--cf-v2-action-primary);
+}
+
+.root:hover .input:checked:not(:disabled) + .box,
+.root:hover .input:indeterminate:not(:disabled) + .box {
+  border-color: var(--cf-v2-action-primary-hover);
+  background: var(--cf-v2-action-primary-hover);
+}
+
+.root:active .input:checked:not(:disabled) + .box,
+.root:active .input:indeterminate:not(:disabled) + .box {
+  border-color: var(--cf-v2-action-primary-pressed);
+  background: var(--cf-v2-action-primary-pressed);
+}
+
+.input[aria-invalid='true'] + .box {
+  border-color: var(--cf-v2-error);
+}
+
+.input[aria-invalid='true']:checked + .box,
+.input[aria-invalid='true']:indeterminate + .box {
+  background: var(--cf-v2-error);
+  color: var(--cf-v2-on-error);
+}
+
+.root:hover .input[aria-invalid='true']:checked:not(:disabled) + .box,
+.root:hover .input[aria-invalid='true']:indeterminate:not(:disabled) + .box {
+  border-color: var(--cf-v2-error-hover);
+  background: var(--cf-v2-error-hover);
+}
+
+.root:active .input[aria-invalid='true']:checked:not(:disabled) + .box,
+.root:active .input[aria-invalid='true']:indeterminate:not(:disabled) + .box {
+  border-color: var(--cf-v2-error-pressed);
+  background: var(--cf-v2-error-pressed);
+}
+
+.input:disabled + .box {
+  opacity: var(--cf-v2-checkbox-disabled-opacity);
+}
+
+.input:disabled:not(:checked, :indeterminate) + .box {
+  background: var(--cf-v2-disabled);
+}
+
+.label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .box {
+    transition: none;
+  }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type SelectHTMLAttributes } from 'react';
+export type SelectV2Size = 'sm' | 'md' | 'lg';
+export type SelectV2Props = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'multiple'> & {
+    size?: SelectV2Size;
+};
+export declare const SelectV2: import("react").ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "multiple"> & {
+    size?: SelectV2Size;
+} & import("react").RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=SelectV2.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/forms/SelectV2/SelectV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,EAAc,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAG9D,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC,GAAG;IAC/F,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,QAAQ;WAHZ,YAAY;qDAqBnB,CAAC"}

package/dist/componentsV2/forms/SelectV2/SelectV2.js

@@ -0,0 +1,7 @@
+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 './SelectV2.module.css';
+export const SelectV2 = forwardRef(function SelectV2({ size = 'md', className, style, ...props }, ref) {
+    return (_jsxs("span", { className: [styles.root, className].filter(Boolean).join(' '), style: style, children: [_jsx("select", { ...props, ref: ref, "data-size": size, className: [styles.select, styles[size]].join(' ') }), _jsx("svg", { className: styles.chevron, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3 6L8 11L13 6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
+});

package/dist/componentsV2/forms/SelectV2/SelectV2.module.css

@@ -0,0 +1,90 @@
+.root {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  color: var(--cf-v2-on-surface);
+}
+
+.select {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding-inline: var(--cf-v2-field-padding);
+  padding-inline-end: calc(var(--cf-v2-field-padding) + var(--cf-v2-select-icon-size) + var(--cf-v2-field-gap));
+  border: var(--cf-v2-field-border-width) solid var(--cf-v2-outline);
+  border-radius: var(--cf-v2-field-radius);
+  background: var(--cf-v2-surface-container);
+  color: var(--cf-v2-on-surface);
+  font-family: inherit;
+  line-height: normal;
+  text-overflow: ellipsis;
+  appearance: none;
+  cursor: pointer;
+  transition: background-color var(--cf-v2-field-transition-duration) ease;
+}
+
+.sm {
+  height: var(--cf-v2-field-height-sm);
+  font-size: var(--cf-v2-field-font-size-sm);
+}
+
+.md {
+  height: var(--cf-v2-field-height-md);
+  font-size: var(--cf-v2-field-font-size-md);
+}
+
+.lg {
+  height: var(--cf-v2-field-height-lg);
+  font-size: var(--cf-v2-field-font-size-lg);
+}
+
+.select option {
+  background: var(--cf-v2-surface-container);
+  color: var(--cf-v2-on-surface);
+}
+
+.select:has(option[value='']:checked) {
+  color: color-mix(in srgb, var(--cf-v2-on-surface-variant) calc(var(--cf-v2-select-placeholder-opacity) * 100%), transparent);
+}
+
+.select:hover:not(:disabled) {
+  background: var(--cf-v2-surface-container-hover);
+}
+
+.select[aria-invalid='true'] {
+  outline: var(--cf-v2-field-state-border-width) solid var(--cf-v2-error);
+  outline-offset: calc(-1 * var(--cf-v2-field-state-border-width));
+}
+
+.select:focus {
+  outline: var(--cf-v2-field-state-border-width) solid var(--cf-v2-focus-ring);
+  outline-offset: calc(-1 * var(--cf-v2-field-state-border-width));
+}
+
+.select:disabled {
+  background: var(--cf-v2-disabled);
+  opacity: var(--cf-v2-select-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.chevron {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: var(--cf-v2-field-padding);
+  width: var(--cf-v2-select-icon-size);
+  height: var(--cf-v2-select-icon-size);
+  margin-block: auto;
+  pointer-events: none;
+}
+
+.select:disabled + .chevron {
+  opacity: var(--cf-v2-select-disabled-opacity);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .select {
+    transition: none;
+  }
+}

package/dist/componentsV2/forms/SelectV2/index.d.ts

@@ -0,0 +1,3 @@
+export { SelectV2 } from './SelectV2';
+export type { SelectV2Props, SelectV2Size } from './SelectV2';
+//# sourceMappingURL=index.d.ts.map

package/dist/componentsV2/forms/SelectV2/index.d.ts.map

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

package/dist/componentsV2/forms/SelectV2/index.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/forms/SwitchV2/SwitchV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGhE,KAAK,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC,CAAC;AAEvG,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,oBAAoB,CAAC;AAEhE,eAAO,MAAM,QAAQ,4GAqBnB,CAAC"}

package/dist/componentsV2/forms/SwitchV2/SwitchV2.js

@@ -0,0 +1,8 @@
+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 './SwitchV2.module.css';
+export const SwitchV2 = forwardRef(function SwitchV2({ className, style, children, ...props }, ref) {
+    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: ref, type: "checkbox", role: "switch", className: styles.input }), _jsx("span", { className: styles.track, "aria-hidden": "true", children: _jsx("span", { className: styles.thumb }) })] }), children != null && _jsx("span", { className: styles.label, children: children })] }));
+});

package/dist/componentsV2/forms/SwitchV2/SwitchV2.module.css

@@ -0,0 +1,129 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cf-v2-selection-gap);
+  max-width: 100%;
+  color: var(--cf-v2-on-surface);
+  font-family: inherit;
+  font-size: var(--cf-v2-selection-label-font-size);
+  font-weight: var(--cf-v2-selection-label-font-weight);
+  cursor: pointer;
+}
+
+.root[data-disabled] {
+  color: var(--cf-v2-on-surface-variant);
+  cursor: not-allowed;
+}
+
+.target {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--cf-v2-selection-target-size);
+  height: var(--cf-v2-selection-target-size);
+}
+
+.input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border-radius: var(--cf-v2-switch-target-radius);
+  background: transparent;
+  appearance: none;
+  cursor: inherit;
+}
+
+.input:focus-visible {
+  outline: var(--cf-v2-selection-focus-width) solid var(--cf-v2-focus-ring);
+  outline-offset: calc(-1 * var(--cf-v2-selection-focus-width));
+}
+
+.track {
+  position: relative;
+  flex: none;
+  width: var(--cf-v2-switch-width);
+  height: var(--cf-v2-switch-height);
+  border-radius: var(--cf-v2-switch-radius);
+  outline: var(--cf-v2-switch-border-width) solid var(--cf-v2-outline);
+  outline-offset: calc(-1 * var(--cf-v2-switch-border-width));
+  background: var(--cf-v2-surface-container);
+  pointer-events: none;
+  transition: background-color var(--cf-v2-selection-transition-duration) ease;
+}
+
+.thumb {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: var(--cf-v2-switch-thumb-offset-off);
+  width: var(--cf-v2-switch-thumb-size);
+  height: var(--cf-v2-switch-thumb-size);
+  margin-block: auto;
+  border-radius: 50%;
+  background: var(--cf-v2-on-surface);
+  transition: inset-inline-start var(--cf-v2-selection-transition-duration) ease;
+}
+
+.root:hover .input:not(:disabled) + .track {
+  background: var(--cf-v2-surface-container-hover);
+}
+
+.root:active .input:not(:disabled) + .track {
+  background: var(--cf-v2-surface-container-pressed);
+}
+
+.input:checked + .track {
+  outline-color: transparent;
+  background: var(--cf-v2-action-primary);
+}
+
+.input:checked + .track .thumb {
+  inset-inline-start: var(--cf-v2-switch-thumb-offset-on);
+  background: var(--cf-v2-on-action-primary);
+}
+
+.root:hover .input:checked:not(:disabled) + .track {
+  background: var(--cf-v2-action-primary-hover);
+}
+
+.root:active .input:checked:not(:disabled) + .track {
+  background: var(--cf-v2-action-primary-pressed);
+}
+
+.input:disabled + .track {
+  opacity: var(--cf-v2-switch-disabled-opacity);
+}
+
+.input:disabled:not(:checked) + .track {
+  background: var(--cf-v2-disabled);
+}
+
+.label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .track,
+  .thumb {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .thumb {
+    background: CanvasText;
+    forced-color-adjust: none;
+  }
+
+  .input:checked + .track {
+    outline-color: Highlight;
+  }
+
+  .input:checked + .track .thumb {
+    background: Highlight;
+  }
+}

package/dist/componentsV2/forms/SwitchV2/index.d.ts

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

package/dist/componentsV2/forms/SwitchV2/index.d.ts.map

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

package/dist/componentsV2/forms/SwitchV2/index.js

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

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

@@ -0,0 +1,10 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type InputHTMLAttributes } from 'react';
+export type TextInputV2Size = 'sm' | 'md' | 'lg';
+export type TextInputV2Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+    size?: TextInputV2Size;
+};
+export declare const TextInputV2: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    size?: TextInputV2Size;
+} & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=TextInputV2.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/forms/TextInputV2/TextInputV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAG7D,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG;IACnF,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,WAAW;WAHf,eAAe;oDAetB,CAAC"}

package/dist/componentsV2/forms/TextInputV2/TextInputV2.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { forwardRef } from 'react';
+import styles from './TextInputV2.module.css';
+export const TextInputV2 = forwardRef(function TextInputV2({ size = 'md', className, ...props }, ref) {
+    return (_jsx("input", { ...props, ref: ref, "data-size": size, className: [styles.input, styles[size], className].filter(Boolean).join(' ') }));
+});

package/dist/componentsV2/forms/TextInputV2/TextInputV2.module.css

@@ -0,0 +1,64 @@
+.input {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding-inline: var(--cf-v2-field-padding);
+  border: var(--cf-v2-field-border-width) solid var(--cf-v2-outline);
+  border-radius: var(--cf-v2-field-radius);
+  background: var(--cf-v2-surface-container);
+  color: var(--cf-v2-on-surface);
+  font-family: inherit;
+  line-height: normal;
+  transition: background-color var(--cf-v2-field-transition-duration) ease;
+}
+
+.sm {
+  height: var(--cf-v2-field-height-sm);
+  font-size: var(--cf-v2-field-font-size-sm);
+}
+
+.md {
+  height: var(--cf-v2-field-height-md);
+  font-size: var(--cf-v2-field-font-size-md);
+}
+
+.lg {
+  height: var(--cf-v2-field-height-lg);
+  font-size: var(--cf-v2-field-font-size-lg);
+}
+
+.input::placeholder {
+  color: var(--cf-v2-on-surface-variant);
+  opacity: var(--cf-v2-field-placeholder-opacity);
+}
+
+.input:hover:not(:disabled, [readonly]) {
+  background: var(--cf-v2-surface-container-hover);
+}
+
+.input[aria-invalid='true'] {
+  outline: var(--cf-v2-field-state-border-width) solid var(--cf-v2-error);
+  outline-offset: calc(-1 * var(--cf-v2-field-state-border-width));
+}
+
+.input:focus-visible {
+  outline: var(--cf-v2-field-state-border-width) solid var(--cf-v2-focus-ring);
+  outline-offset: calc(-1 * var(--cf-v2-field-state-border-width));
+}
+
+.input[readonly] {
+  opacity: var(--cf-v2-field-readonly-opacity);
+}
+
+.input:disabled {
+  background: var(--cf-v2-disabled);
+  opacity: var(--cf-v2-field-disabled-opacity);
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .input {
+    transition: none;
+  }
+}

package/dist/componentsV2/forms/TextInputV2/index.d.ts

@@ -0,0 +1,3 @@
+export { TextInputV2 } from './TextInputV2';
+export type { TextInputV2Props, TextInputV2Size } from './TextInputV2';
+//# sourceMappingURL=index.d.ts.map

package/dist/componentsV2/forms/TextInputV2/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/forms/TextInputV2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/componentsV2/forms/TextInputV2/index.js

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

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export type SelectionControlName = {
+    children: ReactNode;
+} | {
+    children?: undefined;
+    'aria-label': string;
+} | {
+    children?: undefined;
+    'aria-labelledby': string;
+} | {
+    children?: undefined;
+    id: string;
+};
+//# sourceMappingURL=selectionControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.d.ts","sourceRoot":"","sources":["../../../src/componentsV2/forms/selectionControl.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,oBAAoB,GAC5B;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GACvB;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,GAC9C;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC"}

package/dist/componentsV2/forms/selectionControl.js

@@ -0,0 +1 @@
+export {};

package/dist/componentsV2/navigation/TabsV2/TabsV2.d.ts

@@ -0,0 +1,30 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type TabsV2Variant = 'underline' | 'pill';
+export type TabsV2Size = 'sm' | 'md';
+export type TabsV2Activation = 'automatic' | 'manual';
+export type TabsV2Item = {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+};
+type TabsV2Base = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange' | 'aria-label' | 'aria-labelledby'> & {
+    items: readonly TabsV2Item[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
+    variant?: TabsV2Variant;
+    size?: TabsV2Size;
+    activation?: TabsV2Activation;
+};
+export type TabsV2Props = TabsV2Base & ({
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+} | {
+    'aria-label'?: undefined;
+    'aria-labelledby': string;
+});
+export declare const TabsV2: import("react").ForwardRefExoticComponent<TabsV2Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=TabsV2.d.ts.map

package/dist/componentsV2/navigation/TabsV2/TabsV2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/navigation/TabsV2/TabsV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,EAML,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM,CAAC;AACjD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,QAAQ,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,UAAU,GAAG,IAAI,CACpB,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,GAAG,cAAc,GAAG,UAAU,GAAG,YAAY,GAAG,iBAAiB,CAC5E,GAAG;IACF,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,UAAU,GAClC,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;AAEtH,eAAO,MAAM,MAAM,wGAyGjB,CAAC"}

package/dist/componentsV2/navigation/TabsV2/TabsV2.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { forwardRef, useId, useRef, useState, } from 'react';
+import styles from './TabsV2.module.css';
+export const TabsV2 = forwardRef(function TabsV2({ items, value, defaultValue, onValueChange, variant = 'underline', size = 'md', activation = 'automatic', className, 'aria-label': label, 'aria-labelledby': labelledBy, ...props }, ref) {
+    const base = useId();
+    const [internal, setInternal] = useState(defaultValue);
+    const [focused, setFocused] = useState(null);
+    const tabs = useRef(new Map());
+    const enabled = items.filter((item) => !item.disabled);
+    const requested = value ?? internal;
+    const selected = enabled.find((item) => item.id === requested) ?? enabled[0];
+    const tabStop = focused ?? selected?.id;
+    const select = (id) => {
+        if (id === selected?.id && (requested === undefined || requested === id))
+            return;
+        if (value === undefined)
+            setInternal(id);
+        onValueChange?.(id);
+    };
+    const onKeyDown = (event, id) => {
+        const index = enabled.findIndex((item) => item.id === id);
+        const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+        const targets = {
+            [rtl ? 'ArrowLeft' : 'ArrowRight']: enabled[(index + 1) % enabled.length],
+            [rtl ? 'ArrowRight' : 'ArrowLeft']: enabled[(index - 1 + enabled.length) % enabled.length],
+            Home: enabled[0],
+            End: enabled[enabled.length - 1],
+        };
+        const target = targets[event.key];
+        if (!target)
+            return;
+        event.preventDefault();
+        setFocused(target.id);
+        tabs.current.get(target.id)?.focus();
+        if (activation === 'automatic')
+            select(target.id);
+    };
+    const onBlur = (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget))
+            setFocused(null);
+    };
+    if (items.length === 0)
+        return null;
+    return (_jsxs("div", { ...props, ref: ref, "data-variant": variant, "data-size": size, className: [styles.root, className].filter(Boolean).join(' '), children: [_jsx("div", { role: "tablist", "aria-label": label, "aria-labelledby": labelledBy, className: styles.list, onBlur: onBlur, children: items.map((item, index) => (_jsxs("button", { ref: (node) => {
+                        if (node)
+                            tabs.current.set(item.id, node);
+                        else
+                            tabs.current.delete(item.id);
+                    }, id: `${base}-tab-${index}`, type: "button", role: "tab", "aria-selected": item.id === selected?.id, "aria-controls": `${base}-panel-${index}`, tabIndex: item.id === tabStop ? 0 : -1, disabled: item.disabled, onClick: () => {
+                        setFocused(item.id);
+                        select(item.id);
+                    }, onKeyDown: (event) => onKeyDown(event, item.id), className: [styles.tab, styles[variant], styles[size]].join(' '), children: [_jsx("span", { children: item.label }), variant === 'underline' && _jsx("span", { className: styles.indicator, "aria-hidden": "true" })] }, item.id))) }), items.map((item, index) => (_jsx("div", { id: `${base}-panel-${index}`, role: "tabpanel", "aria-labelledby": `${base}-tab-${index}`, tabIndex: 0, hidden: item.id !== selected?.id, className: styles.panel, children: item.content }, item.id)))] }));
+});