fix: v2 api ready, just need to clean up and write docs

Author: stipsan

README.md

@@ -3,3 +3,9 @@
 # Work in progress!
 
 Hold off using this until `v2` is out, or you're gonna have a _bad time_!
+
+# Credits
+
+- Play icon used on frame overlays: https://fontawesome.com/icons/play-circle?style=regular
+- Phone frame used in logo: https://www.figma.com/community/file/896042888090872154/Mono-Devices-1.0
+- iPhone frame used to wrap examples: https://www.figma.com/community/file/858143367356468985/(Variants)-iOS-%26-iPadOS-14-UI-Kit-for-Figma

TODO.md

@@ -0,0 +1,16 @@
+{
+  "customProperties": {
+    "--rsbs-antigap-scale-y": "0",
+    "--rsbs-backdrop-bg": "rgba(0, 0, 0, 0.6)",
+    "--rsbs-backdrop-opacity": "1",
+    "--rsbs-bg": "#fff",
+    "--rsbs-content-opacity": "1",
+    "--rsbs-handle-bg": "hsla(0, 0%, 0%, 0.14)",
+    "--rsbs-max-w": "auto",
+    "--rsbs-ml": "env(safe-area-inset-left)",
+    "--rsbs-mr": "env(safe-area-inset-right)",
+    "--rsbs-overlay-rounded": "16px",
+    "--rsbs-overlay-translate-y": "0px",
+    "--rsbs-overlay-h": "0px"
+  }
+}

defaults.json

@@ -1,24 +1,21 @@
-import cx from 'classnames'
+import cx from 'classnames/dedupe'
 import { forwardRef } from 'react'
 import styles from './Button.module.css'
 
 type Props = {
-  textSize?: string
-  padding?: string
+  className?: Parameters<typeof cx>[0]
   children: React.ReactNode
-} & Omit<React.PropsWithoutRef<JSX.IntrinsicElements['button']>, 'children'>
+} & Omit<
+  React.PropsWithoutRef<JSX.IntrinsicElements['button']>,
+  'children' | 'className'
+>
 
 const Button = forwardRef<HTMLButtonElement, Props>(
-  (
-    { className, textSize = 'text-xl', padding = 'px-7 py-3', ...props },
-    ref
-  ) => (
+  ({ className, ...props }, ref) => (
     <button
       className={cx(
         styles.rounded,
-        textSize,
-        padding,
-        'rounded-2xl border-solid border-gray-300 border-2',
+        'text-xl px-7 py-3 rounded-2xl border-solid border-gray-300 border-2',
         'transition-colors duration-150 focus-visible:duration-0',
         'bg-gray-100 text-gray-900 hover:bg-gray-300 focus-visible:bg-gray-300',
         'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:ring-gray-300',

docs/fixtures/Button.tsx

@@ -1,8 +1,14 @@
-import cx from 'classnames'
+import cx from 'classnames/dedupe'
 import { useEffect } from 'react'
 import { useDetectEnv } from './hooks'
 
-export default function Container({ children }: { children: React.ReactNode }) {
+export default function Container({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: Parameters<typeof cx>[0]
+}) {
   const env = useDetectEnv()
   useEffect(() => {
     const className = cx({
@@ -16,7 +22,12 @@ export default function Container({ children }: { children: React.ReactNode }) {
   }, [env])
 
   return (
-    <main className="grid place-content-evenly min-h-screen bg-white">
+    <main
+      className={cx(
+        'grid place-content-evenly min-h-screen bg-white',
+        className
+      )}
+    >
       {children}
     </main>
   )

docs/fixtures/Container.tsx

@@ -15,11 +15,16 @@
     --rsbs-backdrop-bg: rgba(15, 23, 42, 0.7);
   }
 }
-@layer utilities {
+@layer components {
   .is-window {
     --rsbs-max-w: 640px;
     --rsbs-ml: auto;
     --rsbs-mr: auto;
+    @screen sm {
+      & [data-rsbs-overlay] {
+        --rsbs-overlay-rounded: 16px;
+      }
+    }
   }
   .is-iframe {
     --rsbs-ml: 0px;

docs/style.css

@@ -17,7 +17,7 @@
     "build": "next build",
     "prebuild:dist": "rimraf dist/**",
     "build:dist": "npm run build:postcss && npm run build:microbundle",
-    "build:microbundle": "microbundle --tsconfig tsconfig.microbundle.json -f cjs,es",
+    "build:microbundle": "NODE_ENV=production microbundle --define process.env.NODE_ENV=production --tsconfig tsconfig.microbundle.json -f cjs,es",
     "build:postcss": "postcss -d dist --no-map src/style.css",
     "dev": "next",
     "lint": "eslint . --ext ts,tsx,js,jsx --max-warnings 0 && tsc",
@@ -47,6 +47,7 @@
     "@semantic-release/github": "^7.2.0",
     "@semantic-release/npm": "^7.0.8",
     "@semantic-release/release-notes-generator": "^9.0.1",
+    "@types/classnames": "^2.2.11",
     "@types/node": "^14.14.10",
     "@types/react": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.9.0",