@react-spectrum/s2 0.9.1 → 0.10.0

package/src/Tooltip.tsx

@@ -23,11 +23,11 @@ import {centerPadding, colorScheme, UnsafeStyles} from './style-utils' with {typ
 import {ColorScheme} from '@react-types/provider';
 import {ColorSchemeContext} from './Provider';
 import {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, GlobalDOMAttributes} from '@react-types/shared';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 
-export interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentProps, 'children' | 'closeDelay'>, Pick<AriaTooltipProps, 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'> {
+export interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentProps, 'children' | 'closeDelay' | keyof GlobalDOMAttributes>, Pick<AriaTooltipProps, 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'> {
   /** The content of the tooltip. */
   children: ReactNode,
   /**
@@ -38,7 +38,7 @@ export interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentPro
   placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom'
 }
 
-export interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'className' | 'style' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' |  'offset' | 'crossOffset' |  'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange'>, UnsafeStyles {
+export interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'className' | 'style' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' |  'offset' | 'crossOffset' |  'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange' | keyof GlobalDOMAttributes>, UnsafeStyles {
   /** The content of the tooltip. */
   children: ReactNode
 }

package/src/TreeView.tsx

@@ -23,6 +23,8 @@ import {
   TreeItem,
   TreeItemContent,
   TreeItemContentProps,
+  TreeLoadMoreItem,
+  TreeLoadMoreItemProps,
   useContextProps,
   Virtualizer
 } from 'react-aria-components';
@@ -30,34 +32,45 @@ import {centerBaseline} from './CenterBaseline';
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
 import {colorMix, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};
-import {DOMRef, Key} from '@react-types/shared';
+import {DOMRef, forwardRefType, GlobalDOMAttributes, Key, LoadingState} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';
 import {TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
-import {useLocale} from 'react-aria';
+import {useLocale, useLocalizedStringFormatter} from 'react-aria';
 import {useScale} from './utils';
 
 interface S2TreeProps {
   // Only detatched is supported right now with the current styles from Spectrum
+  // See https://github.com/adobe/react-spectrum/pull/7343 for what remaining combinations are left
+  /** Whether the tree should be displayed with a [detached style](https://spectrum.adobe.com/page/tree-view/#Detached). */
   isDetached?: boolean,
+  /** Handler that is called when a user performs an action on a row. */
   onAction?: (key: Key) => void,
-  // not fully supported yet
+  /** Whether the tree should be displayed with a [emphasized style](https://spectrum.adobe.com/page/tree-view/#Emphasis). */
   isEmphasized?: boolean
 }
 
-export interface TreeViewProps extends Omit<RACTreeProps<any>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TreeProps {
+export interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, UnsafeStyles, S2TreeProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight
 }
 
-export interface TreeViewItemProps extends Omit<RACTreeItemProps, 'className' | 'style'> {
+export interface TreeViewItemProps extends Omit<RACTreeItemProps, 'className' | 'style' | 'onClick' | keyof GlobalDOMAttributes> {
   /** Whether this item has children, even if not loaded yet. */
   hasChildItems?: boolean
 }
 
+export interface TreeViewLoadMoreItemProps extends Pick<TreeLoadMoreItemProps, 'onLoadMore'> {
+  /** The current loading state of the TreeView or TreeView row. */
+  loadingState?: LoadingState
+}
+
 interface TreeRendererContextValue {
   renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>
 }
@@ -91,7 +104,10 @@ const tree = style({
   }
 }, getAllowedOverrides({height: true}));
 
-function TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A tree view provides users with a way to navigate nested hierarchical information.
+ */
+export const TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function TreeView<T extends object>(props: TreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {children, isDetached, isEmphasized, UNSAFE_className, UNSAFE_style} = props;
   let scale = useScale();
 
@@ -123,7 +139,7 @@ function TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {
       </TreeRendererContext.Provider>
     </Virtualizer>
   );
-}
+});
 
 const selectedBackground = lightDark(colorMix('gray-25', 'informative-900', 10), colorMix('gray-25', 'informative-700', 10));
 const selectedActiveBackground = lightDark(colorMix('gray-25', 'informative-900', 15), colorMix('gray-25', 'informative-700', 15));
@@ -180,7 +196,6 @@ const treeRow = style({
   }
 });
 
-
 const treeCellGrid = style({
   display: 'grid',
   width: 'full',
@@ -346,7 +361,6 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
                 gridArea: 'level-padding',
                 width: 'calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))'
               })} />
-            {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}
             <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} scale={scale} isHidden={!(hasChildItems)} />
             <Provider
               values={[
@@ -368,6 +382,33 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
   );
 };
 
+const centeredWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 'full',
+  height: 'full'
+});
+
+export const TreeViewLoadMoreItem = (props: TreeViewLoadMoreItemProps): ReactNode => {
+  let {loadingState, onLoadMore} = props;
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
+  return (
+    <TreeLoadMoreItem isLoading={isLoading} onLoadMore={onLoadMore} className={style({width: 'full', marginY: 4})}>
+      {() => {
+        return (
+          <div className={centeredWrapper}>
+            <ProgressCircle
+              isIndeterminate
+              aria-label={stringFormatter.format('table.loadingMore')} />
+          </div>
+        );
+      }}
+    </TreeLoadMoreItem>
+  );
+};
+
 interface ExpandableRowChevronProps {
   isExpanded?: boolean,
   isDisabled?: boolean,
@@ -437,9 +478,3 @@ function ExpandableRowChevron(props: ExpandableRowChevronProps) {
     </Button>
   );
 }
-
-/**
- * A tree view provides users with a way to navigate nested hierarchical information.
- */
-const _TreeView = forwardRef(TreeView);
-export {_TreeView as TreeView};

package/src/font-faces.css

@@ -0,0 +1,119 @@
+@font-face {
+  font-family: "adobe-clean-spectrum-vf";
+  src: url("https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("woff2"), url("https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("woff"), url("https://use.typekit.net/af/ca4cba/0000000000000000775c55a1/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 100 900;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "adobe-clean-spectrum-srf-vf";
+  src: url("https://use.typekit.net/af/4a1d0d/0000000000000000775c55a4/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("woff2"), url("https://use.typekit.net/af/4a1d0d/0000000000000000775c55a4/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("woff"), url("https://use.typekit.net/af/4a1d0d/0000000000000000775c55a4/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 100 1000;
+  font-stretch: normal;
+}
+
+/* There are currently no italics in Spectrum. Uncomment these if needed. */
+/*
+@font-face {
+  font-family: "adobe-clean-spectrum-vf";
+  src: url("https://use.typekit.net/af/8a3244/0000000000000000775c55a2/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("woff2"), url("https://use.typekit.net/af/8a3244/0000000000000000775c55a2/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("woff"), url("https://use.typekit.net/af/8a3244/0000000000000000775c55a2/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("opentype");
+  font-display: auto;
+  font-style: italic;
+  font-weight: 100 900;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "adobe-clean-spectrum-srf-vf";
+  src: url("https://use.typekit.net/af/45f67c/0000000000000000775c55a3/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("woff2"), url("https://use.typekit.net/af/45f67c/0000000000000000775c55a3/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("woff"), url("https://use.typekit.net/af/45f67c/0000000000000000775c55a3/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i1&v=3") format("opentype");
+  font-display: auto;
+  font-style: italic;
+  font-weight: 100 1000;
+  font-stretch: normal;
+}
+*/
+
+@font-face {
+  font-family: "myriad-arabic";
+  src: url("https://use.typekit.net/af/dfb464/00000000000000007735a2f9/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/dfb464/00000000000000007735a2f9/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/dfb464/00000000000000007735a2f9/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "myriad-arabic";
+  src: url("https://use.typekit.net/af/560a53/00000000000000007735a300/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/560a53/00000000000000007735a300/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/560a53/00000000000000007735a300/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "myriad-arabic";
+  src: url("https://use.typekit.net/af/0f9162/00000000000000007735a307/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("woff2"), url("https://use.typekit.net/af/0f9162/00000000000000007735a307/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("woff"), url("https://use.typekit.net/af/0f9162/00000000000000007735a307/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "myriad-arabic";
+  src: url("https://use.typekit.net/af/ab2792/00000000000000007735a309/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("woff2"), url("https://use.typekit.net/af/ab2792/00000000000000007735a309/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("woff"), url("https://use.typekit.net/af/ab2792/00000000000000007735a309/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 900;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "myriad-hebrew";
+  src: url("https://use.typekit.net/af/ffca46/00000000000000007735a30a/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/ffca46/00000000000000007735a30a/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/ffca46/00000000000000007735a30a/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "myriad-hebrew";
+  src: url("https://use.typekit.net/af/e90860/00000000000000007735a313/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/e90860/00000000000000007735a313/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/e90860/00000000000000007735a313/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "myriad-hebrew";
+  src: url("https://use.typekit.net/af/619974/00000000000000007735a31f/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("woff2"), url("https://use.typekit.net/af/619974/00000000000000007735a31f/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("woff"), url("https://use.typekit.net/af/619974/00000000000000007735a31f/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "source-code-pro";
+  src: url("https://use.typekit.net/af/88da4d/00000000000000007758ce1a/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/88da4d/00000000000000007758ce1a/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/88da4d/00000000000000007758ce1a/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "source-code-pro";
+  src: url("https://use.typekit.net/af/80f457/00000000000000007758ce1d/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/80f457/00000000000000007758ce1d/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/80f457/00000000000000007758ce1d/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
+}

package/src/index.ts

@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+'use client';
+
 export {Accordion, AccordionContext} from './Accordion';
 export {ActionBar, ActionBarContext} from './ActionBar';
 export {ActionButton, ActionButtonContext} from './ActionButton';
@@ -22,6 +24,7 @@ export {Badge, BadgeContext} from './Badge';
 export {Breadcrumbs, Breadcrumb, BreadcrumbsContext} from './Breadcrumbs';
 export {Button, LinkButton, ButtonContext, LinkButtonContext} from './Button';
 export {ButtonGroup, ButtonGroupContext} from './ButtonGroup';
+export {Calendar, CalendarContext} from './Calendar';
 export {Card, CardPreview, CollectionCardPreview, AssetCard, UserCard, ProductCard, CardContext} from './Card';
 export {CardView, CardViewContext} from './CardView';
 export {Checkbox, CheckboxContext} from './Checkbox';
@@ -35,6 +38,9 @@ export {ColorSwatchPicker, ColorSwatchPickerContext} from './ColorSwatchPicker';
 export {ColorWheel, ColorWheelContext} from './ColorWheel';
 export {ComboBox, ComboBoxItem, ComboBoxSection, ComboBoxContext} from './ComboBox';
 export {ContextualHelp, ContextualHelpContext} from './ContextualHelp';
+export {DateField, DateFieldContext} from './DateField';
+export {DatePicker, DatePickerContext} from './DatePicker';
+export {DateRangePicker, DateRangePickerContext} from './DateRangePicker';
 export {DisclosureHeader, Disclosure, DisclosurePanel, DisclosureContext, DisclosureTitle} from './Disclosure';
 export {Heading, HeadingContext, Header, HeaderContext, Content, ContentContext, Footer, FooterContext, Text, TextContext, Keyboard, KeyboardContext} from './Content';
 export {Dialog} from './Dialog';
@@ -62,6 +68,7 @@ export {ProgressCircle, ProgressCircleContext} from './ProgressCircle';
 export {Provider} from './Provider';
 export {Radio} from './Radio';
 export {RadioGroup, RadioGroupContext} from './RadioGroup';
+export {RangeCalendar, RangeCalendarContext} from './RangeCalendar';
 export {RangeSlider, RangeSliderContext} from './RangeSlider';
 export {SearchField, SearchFieldContext} from './SearchField';
 export {SegmentedControl, SegmentedControlItem, SegmentedControlContext} from './SegmentedControl';
@@ -74,11 +81,12 @@ export {TableView, TableHeader, TableBody, Row, Cell, Column, TableContext} from
 export {Tabs, TabList, Tab, TabPanel, TabsContext} from './Tabs';
 export {TagGroup, Tag, TagGroupContext} from './TagGroup';
 export {TextArea, TextField, TextAreaContext, TextFieldContext} from './TextField';
+export {TimeField, TimeFieldContext} from './TimeField';
 export {ToastContainer as UNSTABLE_ToastContainer, ToastQueue as UNSTABLE_ToastQueue} from './Toast';
 export {ToggleButton, ToggleButtonContext} from './ToggleButton';
 export {ToggleButtonGroup, ToggleButtonGroupContext} from './ToggleButtonGroup';
 export {Tooltip, TooltipTrigger} from './Tooltip';
-export {TreeView, TreeViewItem, TreeViewItemContent} from './TreeView';
+export {TreeView, TreeViewItem, TreeViewItemContent, TreeViewLoadMoreItem} from './TreeView';
 
 export {pressScale} from './pressScale';
 
@@ -98,6 +106,7 @@ export type {BreadcrumbsProps, BreadcrumbProps} from './Breadcrumbs';
 export type {BadgeProps} from './Badge';
 export type {ButtonProps, LinkButtonProps} from './Button';
 export type {ButtonGroupProps} from './ButtonGroup';
+export type {CalendarProps} from './Calendar';
 export type {CardProps, CardPreviewProps, AssetCardProps, ProductCardProps, UserCardProps} from './Card';
 export type {CardViewProps} from './CardView';
 export type {CheckboxProps} from './Checkbox';
@@ -110,6 +119,9 @@ export type {ColorSwatchProps} from './ColorSwatch';
 export type {ColorSwatchPickerProps} from './ColorSwatchPicker';
 export type {ColorWheelProps} from './ColorWheel';
 export type {ComboBoxProps, ComboBoxItemProps, ComboBoxSectionProps} from './ComboBox';
+export type {DateFieldProps} from './DateField';
+export type {DatePickerProps} from './DatePicker';
+export type {DateRangePickerProps} from './DateRangePicker';
 export type {DialogProps} from './Dialog';
 export type {CustomDialogProps} from './CustomDialog';
 export type {FullscreenDialogProps} from './FullscreenDialog';
@@ -119,7 +131,7 @@ export type {DisclosureProps, DisclosurePanelProps} from './Disclosure';
 export type {DividerProps} from './Divider';
 export type {DropZoneProps} from './DropZone';
 export type {FormProps} from './Form';
-export type {IconProps, IconContextValue} from './Icon';
+export type {IconProps, IconContextValue, IllustrationProps, IllustrationContextValue} from './Icon';
 export type {InlineAlertProps} from './InlineAlert';
 export type {ImageProps} from './Image';
 export type {ImageCoordinatorProps} from './ImageCoordinator';
@@ -137,6 +149,7 @@ export type {RadioGroupProps} from './RadioGroup';
 export type {SearchFieldProps} from './SearchField';
 export type {SegmentedControlProps, SegmentedControlItemProps} from './SegmentedControl';
 export type {SliderProps} from './Slider';
+export type {RangeCalendarProps} from './RangeCalendar';
 export type {RangeSliderProps} from './RangeSlider';
 export type {SkeletonProps} from './Skeleton';
 export type {SkeletonCollectionProps} from './SkeletonCollection';
@@ -146,9 +159,10 @@ export type {TableViewProps, TableHeaderProps, TableBodyProps, RowProps, CellPro
 export type {TabsProps, TabProps, TabListProps, TabPanelProps} from './Tabs';
 export type {TagGroupProps, TagProps} from './TagGroup';
 export type {TextFieldProps, TextAreaProps} from './TextField';
+export type {TimeFieldProps} from './TimeField';
 export type {ToastOptions, ToastContainerProps} from './Toast';
 export type {ToggleButtonProps} from './ToggleButton';
 export type {ToggleButtonGroupProps} from './ToggleButtonGroup';
 export type {TooltipProps} from './Tooltip';
-export type {TreeViewProps, TreeViewItemProps, TreeViewItemContentProps} from './TreeView';
+export type {TreeViewProps, TreeViewItemProps, TreeViewItemContentProps, TreeViewLoadMoreItemProps} from './TreeView';
 export type {AutocompleteProps, FileTriggerProps, TooltipTriggerComponentProps as TooltipTriggerProps, SortDescriptor} from 'react-aria-components';

package/src/page.macro.ts

@@ -30,9 +30,11 @@ export function generatePageStyles(this: MacroContext | void): void {
         --s2-container-bg: ${colorToken(tokens['background-base-color'])};
         background: var(--s2-container-bg);
         --s2-scale: 1;
+        --s2-font-size-base: 14;
 
         @media not ((hover: hover) and (pointer: fine)) {
           --s2-scale: 1.25;
+          --s2-font-size-base: 17;
         }
 
         &[data-color-scheme=light] {
@@ -70,6 +72,7 @@ export function generateDefaultColorSchemeStyles(this: MacroContext | void): voi
           --lightningcss-light: initial;
           --lightningcss-dark: ;
           --s2-scale: 1;
+          --s2-font-size-base: 14;
 
           @media (prefers-color-scheme: dark) {
             --lightningcss-light: ;
@@ -78,6 +81,7 @@ export function generateDefaultColorSchemeStyles(this: MacroContext | void): voi
 
           @media not ((hover: hover) and (pointer: fine)) {
             --s2-scale: 1.25;
+            --s2-font-size-base: 17;
           }
         }
       }`

package/src/progress-utils.tsx

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you 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 REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export const pxToRem = (px: number): string => (px / 16) + 'rem';