Push from a

.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "eslint:recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  }
+}

button-l5wa62wd/doc/button.mdx

@@ -0,0 +1,33 @@
+import { mdx } from '@mdx-js/react';
+import { Button } from '../index';
+import { Props, Description } from '@divriots/dockit-react/props';
+import { Playground } from '@divriots/dockit-react/playground';
+import { Layout } from '~/mdx-layout';
+export default Layout;
+
+# Button
+
+<Description of={Button} />
+
+## Usage
+
+```tsx
+import { Button } from '@divriots/starter-react-aria/button';
+
+<Button onPress={() => alert('Button pressed!')}>Test</Button>;
+```
+
+## Example
+
+<Playground
+  scope={{ Button }}
+  code={`
+<Button size="small" onPress={() => alert('small button pressed!')}>Test</Button>
+<Button size="medium" onPress={() => alert('medium button pressed!')}>Test</Button>
+<Button size="large" onPress={() => alert('large button pressed!')}>Test</Button>
+  `}
+/>
+
+## Props
+
+<Props of={Button} />

button-l5wa62wd/index.ts

@@ -0,0 +1 @@
+export * from './src/button';

button-l5wa62wd/src/button.module.scss

@@ -0,0 +1,41 @@
+.button {
+  display: inline-flex;
+  appearance: none;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  transition: all 250ms ease 0s;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  vertical-align: middle;
+  outline: transparent solid 2px;
+  outline-offset: 2px;
+  width: auto;
+  line-height: 1.2;
+  border-width: 0px;
+  border-radius: var(--aria-border-radius-medium);
+  font-weight: var(--aria-font-weight-semibold);
+  min-width: var(--aria-spacing-xx-large);
+  padding-inline-start: var(--aria-spacing-medium);
+  padding-inline-end: var(--aria-spacing-medium);
+  margin: 2px;
+  background: var(--aria-color-primary);
+  color: var(--aria-color-white);
+}
+
+.small {
+  font-size: var(--aria-font-size-small);
+  height: var(--aria-spacing-x-large);
+}
+
+.medium {
+  font-size: var(--aria-font-size-medium);
+  height: var(--aria-spacing-xx-large);
+}
+
+.large {
+  font-size: var(--aria-font-size-large);
+  height: var(--aria-spacing-xxx-large);
+}

button-l5wa62wd/src/button.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+const { useRef } = React;
+import type { ElementType, HTMLAttributes } from 'react';
+import type { AriaButtonProps } from '@react-types/button';
+import { useButton } from '@react-aria/button';
+import type { ButtonAria } from '@react-aria/button';
+import styles from './button.module.scss';
+
+export type ButtonProps = AriaButtonProps<ElementType> & {
+  /**
+  Use the size prop to change the size of the button. You can set the value to 'small', 'medium' or 'large'.
+   */
+  size: 'small' | 'medium' | 'large';
+};
+
+/**
+  The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
+*/
+export const Button = ({
+  size = 'medium',
+  ...rest
+}: ButtonProps): ButtonAria<HTMLAttributes<any>> => {
+  const ref = useRef();
+  const { buttonProps } = useButton(rest, ref);
+  const { children } = rest;
+
+  return (
+    <button
+      {...buttonProps}
+      ref={ref}
+      className={`${styles.button} ${styles[size]}`}
+    >
+      {children}
+    </button>
+  );
+};

button-l5wa62wd/stories/index.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button } from '../index';
+import '~/story-layout';
+
+export default {
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export const small_button = () => (
+  <Button size="small" onPress={() => alert('Button pressed!')}>
+    Test
+  </Button>
+);
+
+export const medium_button = () => (
+  <Button size="medium" onPress={() => alert('Button pressed!')}>
+    Test
+  </Button>
+);
+
+export const large_button = () => (
+  <Button size="large" onPress={() => alert('Button pressed!')}>
+    Test
+  </Button>
+);

z-index/stories/zIndex.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import '~/all/dist/all.css';
+import '~/all/src/all.scss';
 import { StyleShowcases } from '@divriots/dockit-react/style-showcases';
 
-export const z_index = () => <StyleShowcases prefix="--aria-z-index" />;
+export const z_index = () => <StyleShowcases prefix="--aria-z-index" />;