// ❌ Flat variants — every combination is a separate, hand-written case
// 4 states × 3 sizes × 5 variants × 2 modes = 120 combinations to maintain
const styles = {
  'primary-sm-solid-light': { /* ... */ },
  'primary-sm-solid-dark': { /* ... */ },
  'primary-md-solid-light': { /* ... */ },
  // ...117 more
}

// ✅ Dimensions compose — define each axis ONCE
const Button = rs({ name: 'Button', component: 'button' })
  .theme((t) => ({ borderRadius: '4px', cursor: 'pointer' })) // always-applied base
  .states({ primary: { /* ... */ }, danger: { /* ... */ }, ghost: { /* ... */ } })
  .sizes({ sm: { /* ... */ }, md: { /* ... */ }, lg: { /* ... */ } })
  .variants({ solid: {}, outline: { /* ... */ } })

// Each dimension becomes a prop:
<Button state="primary" size="lg" variant="solid">Submit</Button>

import rocketstyle from '@pyreon/rocketstyle'

// 1. Create the factory once (per app / per design system)
const rs = rocketstyle({ useBooleans: false }) // useBooleans: false is the default

// 2. Wrap a base component — `name` is required, `component` is required
const Button = rs({ name: 'Button', component: 'button' })
  .theme((t) => ({ borderRadius: '4px', cursor: 'pointer', fontWeight: 500 }))
  .states({
    primary: { background: 'royalblue', color: 'white' },
    danger: { background: '#dc3545', color: 'white' },
  })

const Button = rs({ name: 'Button', component: 'button' })
  .config({ name: 'Button' })           // metadata + provider/consumer wiring
  .attrs({ type: 'button' })            // default props injected into the component
  .theme((t) => ({ /* base CSS */ }))   // always-applied styles
  .states({ /* ... */ })                // the `state` dimension
  .sizes({ /* ... */ })                 // the `size` dimension
  .variants({ /* ... */ })             // the `variant` dimension
  .compose({ withTooltip })             // wrap in HOCs
  .statics({ version: '1.0' })          // attach static metadata

const Button = rs({ name: 'Button', component: 'button' })
  .theme((t, mode, css) => ({
    borderRadius: '4px',
    fontWeight: 500,
    cursor: 'pointer',
    border: 'none',
  }))

const Button = rs({ name: 'Button', component: 'button' })
  .theme((t) => ({ borderRadius: '4px', cursor: 'pointer' }))
  .states({
    primary: { background: 'royalblue', color: 'white' },
    danger: { background: '#dc3545', color: 'white' },
    ghost: { background: 'transparent', color: '#333', borderWidth: '1px', borderColor: '#ccc' },
  })
  .sizes({
    sm: { padding: '4px 8px', fontSize: '12px' },
    md: { padding: '8px 16px', fontSize: '14px' },
    lg: { padding: '12px 24px', fontSize: '16px' },
  })
  .variants({
    solid: {},
    outline: { background: 'transparent', borderStyle: 'solid' },
  })

<Button state="primary" size="lg" variant="solid">Save</Button>
<Button state="danger" size="sm">Delete</Button>

const Button = rs({ name: 'Button', component: 'button' })
  .states((t) => ({
    primary: { backgroundColor: t.color.primary, color: t.color.onPrimary },
    danger: { backgroundColor: t.color.error, color: t.color.onError },
  }))
  .sizes((t) => ({
    sm: { padding: t.spacing.xs, fontSize: t.fontSize.sm },
    md: { padding: t.spacing.sm, fontSize: t.fontSize.base },
  }))

const Card = rs({ name: 'Card', component: 'div' })
  .states({
    light: { background: '#fff', color: '#333' },
    dark: (props) => ({
      background: props.elevated ? '#2d2d2d' : '#1a1a1a',
      color: '#e0e0e0',
    }),
  })

// Object form — static default props
const SubmitButton = rs({ name: 'SubmitButton', component: 'button' })
  .attrs({ type: 'submit', 'aria-label': 'Submit form' })

// Callback form — (props, theme, helpers) => partial props
const ThemedButton = rs({ name: 'ThemedButton', component: 'button' })
  .attrs((props, theme, helpers) => ({
    'data-mode': helpers.mode, // 'light' | 'dark'
    title: props.disabled ? 'Disabled' : 'Click me',
  }))

.attrs(callback, {
  priority: true,                  // lowest-precedence defaults — normal attrs and explicit props both override
  filter: ['someInternalKey'],     // strip these keys before they reach the DOM
})

const Button = rs({ name: 'Button', component: 'button' })
  .theme((t) => ({ background: '#eee', hover: { background: '#ddd' } }))
  .styles(
    (css) => css`
      transition: background 0.15s ease;
      ${({ $rocketstyle }) => css`
        background: ${$rocketstyle.background};
        &:hover { background: ${$rocketstyle.hover.background}; }
      `}
    `,
  )

const withTooltip = (Component) => (props) => /* ...wrap... */ Component(props)

const Button = rs({ name: 'Button', component: 'button' })
  .states({ primary: { background: 'royalblue' } })
  .compose({ withTooltip })

const Button = rs({ name: 'Button', component: 'button' })
  .statics({ version: '1.0', category: 'form' })

Button.meta.version  // '1.0'

const Button = rs({ name: 'Button', component: 'button' })
  .config({
    name: 'Button',         // displayName
    component: 'a',          // swap the rendered base component
    provider: true,          // expose this component's pseudo-state to descendants
    DEBUG: false,            // dev-only debug logging
    inversed: false,         // flip dark/light for this subtree
  })

const Button = rs({ name: 'Button', component: 'button' })
  .theme((t) => ({
    background: '#3b82f6',
    color: 'white',
    cursor: 'pointer',
    hover: { background: '#2563eb' },
    focus: { boxShadow: '0 0 0 3px rgba(59,130,246,0.4)', outline: 'none' },
    active: { transform: 'scale(0.98)' },
    disabled: { opacity: 0.5, cursor: 'not-allowed', pointerEvents: 'none' },
  }))
  .states({
    danger: {
      background: '#dc3545',
      hover: { background: '#b91c1c' }, // per-state hover override
    },
  })

const Card = rs({ name: 'Card', component: 'div' })
  .theme((t, mode) => ({
    background: mode('#ffffff', '#1a1a1a'),  // light → '#fff', dark → '#1a1a1a'
    color: mode('#1a1a1a', '#e0e0e0'),
    borderColor: mode('#e5e7eb', '#374151'),
  }))
  .states((t, mode) => ({
    elevated: {
      boxShadow: mode('0 2px 8px rgba(0,0,0,0.1)', '0 2px 8px rgba(0,0,0,0.6)'),
    },
  }))

// useBooleans: false (DEFAULT) — string props
const rs = rocketstyle({ useBooleans: false })
const Button = rs({ name: 'Button', component: 'button' }).states({ primary: {}, danger: {} })

<Button state="primary" />
<Button state="danger" size="lg" />

// useBooleans: true — boolean shorthand props
const rs = rocketstyle({ useBooleans: true })
const Button = rs({ name: 'Button', component: 'button' }).states({ primary: {}, danger: {} })

<Button primary />
<Button danger />

// Override the dimension map at factory init
const rs = rocketstyle({
  dimensions: {
    states: 'state',
    sizes: 'size',
    tones: 'tone',                                  // custom single-value dimension
    decorations: { propName: 'decoration', multi: true }, // custom multi dimension
  },
})

const Badge = rs({ name: 'Badge', component: 'span' })
  .tones({ info: { color: 'blue' }, warn: { color: 'orange' } })       // method = plural key
  .decorations({ pill: { borderRadius: '999px' }, bordered: { borderWidth: 1 } })

<Badge tone="warn" decoration={['pill', 'bordered']} />

import { Provider } from '@pyreon/rocketstyle'

<Provider theme={myTheme} mode="dark">
  {/* Every rocketstyle component inside resolves mode() against 'dark' */}
  <Button state="primary">Dark mode button</Button>
  <Card>Also dark</Card>
</Provider>

{/* Invert a subtree */}
<Provider inversed>
  <Card>Renders as if the opposite mode</Card>
</Provider>

// ❌ Calling the factory with a tag string
const Button = rs('button')                         // wrong — no string-tag form
// ✅ The factory takes { name, component }
const Button = rs({ name: 'Button', component: 'button' })

// ❌ Function accessor for a dimension prop
<Button state={() => isActive() ? 'primary' : 'ghost'} />   // wrong shape
// ✅ Pass the value directly — the compiler handles reactivity
<Button state={isActive() ? 'primary' : 'ghost'} />

// ❌ Empty .theme({}) — a no-op that does nothing
const Button = rs({ name: 'Button', component: 'button' }).theme({})
// ✅ Skip .theme() entirely when there are no base styles
const Button = rs({ name: 'Button', component: 'button' }).states({ primary: {} })

// ❌ Singular dimension method name
rs({ name: 'B', component: 'button' }).state({ primary: {} })  // .state is not a method
// ✅ Dimension methods are plural
rs({ name: 'B', component: 'button' }).states({ primary: {} }) // prop stays singular: state="primary"

// ❌ Boolean props with the default useBooleans: false
const rs = rocketstyle()              // useBooleans defaults to false
const Button = rs({ name: 'B', component: 'button' }).states({ primary: {} })
<Button primary />                    // 'primary' is an unknown prop, not a state selector
// ✅ Use the string prop form (or opt into useBooleans: true)
<Button state="primary" />

// ❌ Numeric values to mode() under cssVariables — units can't be applied
.theme((t, mode) => ({ padding: mode(8, 12) }))       // warns: emitted verbatim, no unit
// ✅ Pass unit-complete (or unitless-valid) values
.theme((t, mode) => ({ padding: mode('8px', '12px') }))

// ❌ Provider with a `value` prop (React-context muscle memory)
<Provider value={{ mode: 'dark' }}>...</Provider>     // wrong — there is no `value` prop
// ✅ Provider takes mode / theme / inversed directly
<Provider mode="dark">...</Provider>