4 select menu

package.json

@@ -7,7 +7,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com"
   },
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "system.css theme wrapped for React",
   "type": "module",
   "main": "dist/index.cjs.js",

src/button/Button.tsx

@@ -1,25 +1,18 @@
-import React, { MouseEventHandler } from "react";
+import React from "react";
 import styles from "../styles";
 
-export type ButtonProps = {
+export type ButtonProps = React.ComponentProps<"button"> & {
   primary?: boolean;
-  disabled?: boolean;
-  children?: React.ReactNode;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
 };
 
-const Button: React.FC<ButtonProps> = ({
-  children,
-  primary,
-  disabled,
-  onClick,
-}) => {
+const Button: React.FC<ButtonProps> = ({ primary, children, ...props }) => {
   let className = `${styles["btn"]}`;
-  if (primary && !disabled) {
+  if (primary && !props.disabled) {
     className += ` ${styles["btn-default"]}`;
   }
+
   return (
-    <button className={className} disabled={disabled} onClick={onClick}>
+    <button className={className} {...props}>
       {children}
     </button>
   );

src/index.ts

@@ -1,15 +1,24 @@
+export * from "./alert";
+export type * from "./alert";
+
 export * from "./button";
 export type * from "./button";
 
 export * from "./dialog";
 export type * from "./dialog";
 
-export * from "./alert";
-export type * from "./alert";
-
 export * from "./modal";
 export type * from "./modal";
 
+export * from "./modeless";
+export type * from "./modeless";
+
+export * from "./select";
+export type * from "./select";
+
+export * from "./window";
+export type * from "./window";
+
 // vite compiles the included styles into styles.css.
 // Automatically import them since they're namespaced.
 import "./style.css";

src/select/Select.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+// the props are exactly the same as the select component
+export type SelectProps = React.ComponentProps<"button">;
+
+// Apparently we don't actually need to style this component.
+// That's not ideal because we want to make sure the styles
+// that are being applied are also isolated to this component.
+const Select: React.FC<SelectProps> = ({ children }) => {
+  return <select>{children}</select>;
+};
+
+export default Select;

src/select/SelectOption.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+// the props are exactly the same as the select component
+export type SelectOptionProps = React.ComponentProps<"option">;
+
+// Apparently we don't actually need to style this component.
+// That's not ideal because we want to make sure the styles
+// that are being applied are also isolated to this component.
+const Select: React.FC<SelectOptionProps> = ({ children }) => {
+  return <option>{children}</option>;
+};
+
+export default Select;

src/select/__docs__/Example.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from "react";
+import Select from "..";
+
+export type ExampleProps = {};
+
+const Example: FC<ExampleProps> = ({}) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        height: "100%",
+        width: "50rem",
+      }}
+    >
+      <Select>
+        <Select.Option value="1">Option 1</Select.Option>
+        <Select.Option value="2">Option 2</Select.Option>
+        <Select.Option value="3">Option 3</Select.Option>
+      </Select>
+    </div>
+  );
+};
+
+export default Example;

src/select/__docs__/Modeless.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Example from "./Example";
+
+const meta: Meta<typeof Example> = {
+  title: "Select",
+  component: Example,
+};
+
+export default meta;
+type Story = StoryObj<typeof Example>;
+
+export const Primary: Story = {
+  args: {},
+};

src/select/index.ts

@@ -0,0 +1,14 @@
+import SelectParent from "./Select";
+export type { SelectProps } from "./Select";
+
+import Option from "./SelectOption";
+export type { SelectOptionProps } from "./SelectOption";
+
+type SelectNamespace = typeof SelectParent & {
+  Option: typeof Option;
+};
+
+const Select = SelectParent as SelectNamespace;
+Select.Option = Option;
+
+export default Select;