@react-spectrum/steplist 3.0.0-alpha.0

package/dist/module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/steplist/src/index.ts","packages/@react-spectrum/steplist/src/StepList.tsx","packages/@react-spectrum/steplist/src/StepListContext.ts","packages/@react-spectrum/steplist/src/StepListItem.tsx","packages/@react-spectrum/steplist/intl/index.js","packages/@react-spectrum/steplist/intl/en-US.json","packages/@adobe/spectrum-css-temp/components/steplist/vars.css"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {StepList} from './StepList';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumStepListProps} from './StepList';\n","/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaStepListProps, useStepList} from '@react-aria/steplist';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, Orientation, StyleProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport {StepListContext} from './StepListContext';\nimport {StepListItem} from './StepListItem';\nimport styles from '@adobe/spectrum-css-temp/components/steplist/vars.css';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useStepListState} from '@react-stately/steplist';\n\nexport interface SpectrumStepListProps<T> extends AriaStepListProps<T>, StyleProps {\n  /**\n   * Whether the step list should be displayed with a emphasized style.\n   * @default false\n   */\n  isEmphasized?: boolean,\n  /**\n   * The orientation of the step list.\n   * @default 'horizontal'\n   */\n  orientation?: Orientation,\n  /**\n   * The size of the step list.\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nfunction StepList<T extends object>(props: SpectrumStepListProps<T>, ref: DOMRef<HTMLOListElement>) {\n  const {size = 'M', orientation = 'horizontal'} = props;\n  props = useProviderProps(props);\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n\n  let state = useStepListState(props);\n  let {listProps} = useStepList(props, state, domRef);\n\n  const {isDisabled, isEmphasized, isReadOnly} = props;\n\n  return (\n    <ol\n      {...listProps}\n      {...styleProps}\n      ref={domRef}\n      className={classNames(styles, 'spectrum-Steplist', styleProps.className, {\n        'spectrum-Steplist--interactive': !isReadOnly && !isDisabled,\n        'spectrum-Steplist--small': size === 'S',\n        'spectrum-Steplist--medium': size === 'M',\n        'spectrum-Steplist--large': size === 'L',\n        'spectrum-Steplist--xlarge': size === 'XL',\n        'spectrum-Steplist--vertical': orientation === 'vertical'\n      })}>\n      <StepListContext.Provider value={state}>\n        {[...state.collection].map((item) => (\n          <StepListItem\n            key={item.key}\n            isDisabled={isDisabled}\n            isEmphasized={isEmphasized}\n            isReadOnly={isReadOnly}\n            item={item} />\n          )\n        )}\n      </StepListContext.Provider>\n    </ol>\n  );\n}\n\nconst _StepList = React.forwardRef(StepList) as <T>(props: SpectrumStepListProps<T> & {ref?: DOMRef<HTMLOListElement>}) => ReactElement;\nexport {_StepList as StepList};\n","/*\n * Copyright 202 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React from 'react';\nimport {StepListState} from '@react-stately/steplist';\n\nexport const StepListContext = React.createContext<StepListState<unknown>>(null);\n","/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {classNames} from '@react-spectrum/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport intlMessages from '../intl';\nimport {mergeProps} from '@react-aria/utils';\nimport {Node} from '@react-types/shared';\nimport React, {useContext, useRef} from 'react';\nimport {StepListContext} from './StepListContext';\nimport styles from '@adobe/spectrum-css-temp/components/steplist/vars.css';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter, useNumberFormatter} from '@react-aria/i18n';\nimport {useStepListItem} from '@react-aria/steplist';\nimport {VisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface SpectrumStepListItemProps<T> {\n  item: Node<T>,\n  isDisabled?: boolean,\n  isEmphasized?: boolean,\n  isReadOnly?: boolean\n}\n\nexport function StepListItem<T>(props: SpectrumStepListItemProps<T>) {\n  let {\n    isDisabled,\n    isEmphasized,\n    item\n  } = props;\n  let {key} = item;\n\n  let ref = useRef();\n  let {direction} = useLocale();\n  let state = useContext(StepListContext);\n  const isCompleted = state.isCompleted(key);\n  const isItemDisabled = isDisabled || state.disabledKeys.has(key);\n  let {stepProps, stepStateProps} = useStepListItem({...props, key}, state, ref);\n\n  let {hoverProps, isHovered} = useHover(props);\n  const isSelected = state.selectedKey === key;\n\n  let stepStateText = '';\n  const stringFormatter = useLocalizedStringFormatter(intlMessages);\n  const numberFormatter = useNumberFormatter();\n\n  if (isSelected) {\n    stepStateText = stringFormatter.format('current');\n  } else if (isCompleted) {\n    stepStateText = stringFormatter.format('completed');\n  } else {\n    stepStateText = stringFormatter.format('notCompleted');\n  }\n\n  return (\n    <li\n      key={key}\n      className={\n        classNames(\n          styles,\n          'spectrum-Steplist-item'\n        )\n      }>\n      <FocusRing within focusRingClass={classNames(styles, 'focus-ring')}>\n        <a\n          aria-labelledby={`step-marker-${key} step-label-${key}`}\n          ref={ref}\n          {...mergeProps(hoverProps, stepProps)}\n          className={classNames(\n            styles,\n            'spectrum-Steplist-link',\n            {\n              'is-selected': isSelected && !isItemDisabled,\n              'is-disabled': isItemDisabled,\n              'is-hovered': isHovered,\n              'is-emphasized': isEmphasized && isSelected,\n              'is-completed': isCompleted\n            }\n          )}>\n          <VisuallyHidden {...stepStateProps}>{stepStateText}</VisuallyHidden>\n          <span id={`step-marker-${key}`} aria-hidden=\"true\" className={classNames(styles, 'spectrum-Steplist-marker')}>{numberFormatter.format((item.index || 0) + 1)}</span>\n          <span id={`step-label-${key}`} aria-hidden=\"true\" className={classNames(styles, 'spectrum-Steplist-label')}>\n            {item.rendered}\n          </span>\n        </a>\n      </FocusRing>\n      <span\n        className={classNames(\n          styles,\n          'spectrum-Steplist-segment', {\n            'is-completed': isCompleted\n          })} >\n        <ChevronRightMedium\n          UNSAFE_className={classNames(styles, 'spectrum-Steplist-chevron', {\n            'is-reversed': direction === 'rtl'\n          })} />\n      </span>\n    </li>\n  );\n}\n","import enUS from './en-US.json';\n\nexport default {\n  'en-US': enUS\n};\n","{\n  \"completed\": \"Completed: \",\n  \"notCompleted\": \"Not completed: \",\n  \"current\": \"Current: \",\n  \"steplist\": \"Step List\"\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -0,0 +1,26 @@
+import { AriaStepListProps } from "@react-aria/steplist";
+import { DOMRef, Orientation, StyleProps } from "@react-types/shared";
+import { ReactElement } from "react";
+export interface SpectrumStepListProps<T> extends AriaStepListProps<T>, StyleProps {
+    /**
+     * Whether the step list should be displayed with a emphasized style.
+     * @default false
+     */
+    isEmphasized?: boolean;
+    /**
+     * The orientation of the step list.
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    /**
+     * The size of the step list.
+     * @default 'M'
+     */
+    size?: 'S' | 'M' | 'L' | 'XL';
+}
+export const StepList: <T>(props: SpectrumStepListProps<T> & {
+    ref?: DOMRef<HTMLOListElement>;
+}) => ReactElement;
+export { Item } from '@react-stately/collections';
+
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;;AGsBA,uCAAuC,CAAC,CAAE,SAAQ,kBAAkB,CAAC,CAAC,EAAE,UAAU;IAChF;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;CAC9B;AAyCD,OAAA,MAAM;UAAuF,OAAO,gBAAgB,CAAC;MAAM,YAAY,CAAC;AChExI,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC","sources":["packages/@react-spectrum/steplist/src/packages/@react-spectrum/steplist/src/StepListContext.ts","packages/@react-spectrum/steplist/src/packages/@react-spectrum/steplist/intl/index.js","packages/@react-spectrum/steplist/src/packages/@react-spectrum/steplist/src/StepListItem.tsx","packages/@react-spectrum/steplist/src/packages/@react-spectrum/steplist/src/StepList.tsx","packages/@react-spectrum/steplist/src/packages/@react-spectrum/steplist/src/index.ts","packages/@react-spectrum/steplist/src/index.ts"],"sourcesContent":[null,null,null,null,null,"/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {StepList} from './StepList';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumStepListProps} from './StepList';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@react-spectrum/steplist",
+  "version": "3.0.0-alpha.0",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "targets": {
+    "main": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    },
+    "module": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-aria/focus": "^3.15.0",
+    "@react-aria/i18n": "^3.9.0",
+    "@react-aria/interactions": "^3.20.0",
+    "@react-aria/steplist": "3.0.0-alpha.0",
+    "@react-aria/utils": "^3.22.0",
+    "@react-aria/visually-hidden": "^3.8.7",
+    "@react-spectrum/utils": "^3.11.2",
+    "@react-stately/collections": "^3.10.3",
+    "@react-stately/steplist": "3.0.0-alpha.0",
+    "@react-types/shared": "^3.22.0",
+    "@spectrum-icons/ui": "^3.6.2",
+    "@swc/helpers": "^0.5.0"
+  },
+  "devDependencies": {
+    "@adobe/spectrum-css-temp": "^3.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "@react-spectrum/provider": "^3.0.0",
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "9ce2f674eab2cc8912800d3162dcf00a1ce94274"
+}

package/src/StepList.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright 2023 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.
+ */
+
+import {AriaStepListProps, useStepList} from '@react-aria/steplist';
+import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
+import {DOMRef, Orientation, StyleProps} from '@react-types/shared';
+import React, {ReactElement} from 'react';
+import {StepListContext} from './StepListContext';
+import {StepListItem} from './StepListItem';
+import styles from '@adobe/spectrum-css-temp/components/steplist/vars.css';
+import {useProviderProps} from '@react-spectrum/provider';
+import {useStepListState} from '@react-stately/steplist';
+
+export interface SpectrumStepListProps<T> extends AriaStepListProps<T>, StyleProps {
+  /**
+   * Whether the step list should be displayed with a emphasized style.
+   * @default false
+   */
+  isEmphasized?: boolean,
+  /**
+   * The orientation of the step list.
+   * @default 'horizontal'
+   */
+  orientation?: Orientation,
+  /**
+   * The size of the step list.
+   * @default 'M'
+   */
+  size?: 'S' | 'M' | 'L' | 'XL'
+}
+
+function StepList<T extends object>(props: SpectrumStepListProps<T>, ref: DOMRef<HTMLOListElement>) {
+  const {size = 'M', orientation = 'horizontal'} = props;
+  props = useProviderProps(props);
+  let {styleProps} = useStyleProps(props);
+  let domRef = useDOMRef(ref);
+
+  let state = useStepListState(props);
+  let {listProps} = useStepList(props, state, domRef);
+
+  const {isDisabled, isEmphasized, isReadOnly} = props;
+
+  return (
+    <ol
+      {...listProps}
+      {...styleProps}
+      ref={domRef}
+      className={classNames(styles, 'spectrum-Steplist', styleProps.className, {
+        'spectrum-Steplist--interactive': !isReadOnly && !isDisabled,
+        'spectrum-Steplist--small': size === 'S',
+        'spectrum-Steplist--medium': size === 'M',
+        'spectrum-Steplist--large': size === 'L',
+        'spectrum-Steplist--xlarge': size === 'XL',
+        'spectrum-Steplist--vertical': orientation === 'vertical'
+      })}>
+      <StepListContext.Provider value={state}>
+        {[...state.collection].map((item) => (
+          <StepListItem
+            key={item.key}
+            isDisabled={isDisabled}
+            isEmphasized={isEmphasized}
+            isReadOnly={isReadOnly}
+            item={item} />
+          )
+        )}
+      </StepListContext.Provider>
+    </ol>
+  );
+}
+
+const _StepList = React.forwardRef(StepList) as <T>(props: SpectrumStepListProps<T> & {ref?: DOMRef<HTMLOListElement>}) => ReactElement;
+export {_StepList as StepList};

package/src/StepListContext.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 202 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.
+ */
+
+import React from 'react';
+import {StepListState} from '@react-stately/steplist';
+
+export const StepListContext = React.createContext<StepListState<unknown>>(null);

package/src/StepListItem.tsx

@@ -0,0 +1,108 @@
+/*
+ * Copyright 2023 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.
+ */
+import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
+import {classNames} from '@react-spectrum/utils';
+import {FocusRing} from '@react-aria/focus';
+import intlMessages from '../intl';
+import {mergeProps} from '@react-aria/utils';
+import {Node} from '@react-types/shared';
+import React, {useContext, useRef} from 'react';
+import {StepListContext} from './StepListContext';
+import styles from '@adobe/spectrum-css-temp/components/steplist/vars.css';
+import {useHover} from '@react-aria/interactions';
+import {useLocale, useLocalizedStringFormatter, useNumberFormatter} from '@react-aria/i18n';
+import {useStepListItem} from '@react-aria/steplist';
+import {VisuallyHidden} from '@react-aria/visually-hidden';
+
+interface SpectrumStepListItemProps<T> {
+  item: Node<T>,
+  isDisabled?: boolean,
+  isEmphasized?: boolean,
+  isReadOnly?: boolean
+}
+
+export function StepListItem<T>(props: SpectrumStepListItemProps<T>) {
+  let {
+    isDisabled,
+    isEmphasized,
+    item
+  } = props;
+  let {key} = item;
+
+  let ref = useRef();
+  let {direction} = useLocale();
+  let state = useContext(StepListContext);
+  const isCompleted = state.isCompleted(key);
+  const isItemDisabled = isDisabled || state.disabledKeys.has(key);
+  let {stepProps, stepStateProps} = useStepListItem({...props, key}, state, ref);
+
+  let {hoverProps, isHovered} = useHover(props);
+  const isSelected = state.selectedKey === key;
+
+  let stepStateText = '';
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const numberFormatter = useNumberFormatter();
+
+  if (isSelected) {
+    stepStateText = stringFormatter.format('current');
+  } else if (isCompleted) {
+    stepStateText = stringFormatter.format('completed');
+  } else {
+    stepStateText = stringFormatter.format('notCompleted');
+  }
+
+  return (
+    <li
+      key={key}
+      className={
+        classNames(
+          styles,
+          'spectrum-Steplist-item'
+        )
+      }>
+      <FocusRing within focusRingClass={classNames(styles, 'focus-ring')}>
+        <a
+          aria-labelledby={`step-marker-${key} step-label-${key}`}
+          ref={ref}
+          {...mergeProps(hoverProps, stepProps)}
+          className={classNames(
+            styles,
+            'spectrum-Steplist-link',
+            {
+              'is-selected': isSelected && !isItemDisabled,
+              'is-disabled': isItemDisabled,
+              'is-hovered': isHovered,
+              'is-emphasized': isEmphasized && isSelected,
+              'is-completed': isCompleted
+            }
+          )}>
+          <VisuallyHidden {...stepStateProps}>{stepStateText}</VisuallyHidden>
+          <span id={`step-marker-${key}`} aria-hidden="true" className={classNames(styles, 'spectrum-Steplist-marker')}>{numberFormatter.format((item.index || 0) + 1)}</span>
+          <span id={`step-label-${key}`} aria-hidden="true" className={classNames(styles, 'spectrum-Steplist-label')}>
+            {item.rendered}
+          </span>
+        </a>
+      </FocusRing>
+      <span
+        className={classNames(
+          styles,
+          'spectrum-Steplist-segment', {
+            'is-completed': isCompleted
+          })} >
+        <ChevronRightMedium
+          UNSAFE_className={classNames(styles, 'spectrum-Steplist-chevron', {
+            'is-reversed': direction === 'rtl'
+          })} />
+      </span>
+    </li>
+  );
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2023 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.
+ */
+
+/// <reference types="css-module-types" />
+
+export {StepList} from './StepList';
+export {Item} from '@react-stately/collections';
+export type {SpectrumStepListProps} from './StepList';