old boy

examples/button.tsx

@@ -1,7 +1,9 @@
-import { define } from '../src'
+import { createScope } from '../src'
 import { ExampleSection } from './ssr/helpers'
 
-const Button = define('Button', {
+const { define } = createScope('Button')
+
+const Button = define('Root', {
   base: 'button',
 
   padding: "12px 24px",
@@ -73,7 +75,7 @@ const Button = define('Button', {
   },
 })
 
-const ButtonRow = define('ButtonRow', {
+const ButtonRow = define('Row', {
   display: 'flex',
   gap: 16,
   flexWrap: 'wrap',

examples/form.tsx

@@ -156,8 +156,56 @@ const Checkbox = define('Checkbox', {
   }
 })
 
+const FormExamples = define('FormExamples', {
+  maxWidth: 600,
+  margin: '0 auto'
+})
+
+const Button = define('FormButton', {
+  base: 'button',
+
+  padding: '12px 24px',
+  fontSize: 16,
+  fontWeight: 600,
+  border: 'none',
+  borderRadius: 8,
+  cursor: 'pointer',
+  transition: 'all 0.2s ease',
+  background: '#3b82f6',
+  color: 'white',
+
+  states: {
+    ':hover': {
+      background: '#2563eb'
+    },
+    ':active': {
+      transform: 'translateY(1px)'
+    }
+  },
+
+  variants: {
+    variant: {
+      secondary: {
+        background: '#6b7280',
+        color: 'white',
+        states: {
+          ':hover': {
+            background: '#4b5563'
+          }
+        }
+      }
+    }
+  }
+})
+
+const ButtonGroup = define('FormButtonGroup', {
+  display: 'flex',
+  gap: 12,
+  marginTop: 24
+})
+
 export const FormExamplesContent = () => (
-  <>
+  <FormExamples>
     <ExampleSection title="Text Inputs">
       <FormGroup label="Email" helper="We'll never share your email">
         <Input type="email" placeholder="you@example.com" />
@@ -195,5 +243,10 @@ export const FormExamplesContent = () => (
         <Checkbox id="cb3" label="This option is disabled" disabled />
       </FormGroup>
     </ExampleSection>
-  </>
+
+    <ButtonGroup>
+      <Button type="submit">Submit</Button>
+      <Button type="reset" variant="secondary">Reset</Button>
+    </ButtonGroup>
+  </FormExamples>
 )

examples/ssr/landing.tsx

@@ -1,6 +1,8 @@
-import { define, Styles } from '../../src'
+import { createScope, Styles } from '../../src'
 
-const Page = define('LandingPage', {
+const { define } = createScope('Landing')
+
+const Page = define('Page', {
   base: 'body',
 
   margin: 0,
@@ -13,12 +15,12 @@ const Page = define('LandingPage', {
   background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
 })
 
-const Container = define('LandingContainer', {
+const Container = define('Container', {
   textAlign: 'center',
   color: 'white',
 })
 
-const Title = define('LandingTitle', {
+const Title = define('Title', {
   base: 'h1',
 
   fontSize: 48,
@@ -27,7 +29,7 @@ const Title = define('LandingTitle', {
   color: 'white',
 })
 
-const Subtitle = define('LandingSubtitle', {
+const Subtitle = define('Subtitle', {
   base: 'p',
 
   fontSize: 20,
@@ -35,14 +37,14 @@ const Subtitle = define('LandingSubtitle', {
   color: 'rgba(255, 255, 255, 0.9)',
 })
 
-const ButtonGroup = define('LandingButtonGroup', {
+const ButtonGroup = define('ButtonGroup', {
   display: 'flex',
   gap: 50,
   justifyContent: 'center',
   flexWrap: 'wrap',
 })
 
-const ChoiceCard = define('LandingChoiceCard', {
+const ChoiceCard = define('ChoiceCard', {
   base: 'a',
 
   display: 'block',

src/index.tsx

@@ -195,8 +195,21 @@ function registerStyles(name: string, def: TagDef) {
   injectStylesInBrowser()
 }
 
+// automatic names
 let anonComponents = 1
 
+// module-level scoping
+export function createScope(scope: string) {
+  return {
+    define: (nameOrDef: string | TagDef, defIfNamed?: TagDef) => {
+      if (typeof nameOrDef === 'string')
+        return define(`${scope}${nameOrDef === 'Root' ? '' : nameOrDef}`, defIfNamed)
+      else
+        return define(`${scope}Def${anonComponents++}`, nameOrDef as TagDef)
+    }
+  }
+}
+
 // the main event
 export function define(nameOrDef: string | TagDef, defIfNamed?: TagDef) {
   const name = defIfNamed ? (nameOrDef as string) : `Def${anonComponents++}`