@bamboocss/types 1.14.0 → 1.16.0

package/dist/artifact.d.ts

@@ -19,16 +19,9 @@ export type ArtifactId =
   | 'recipes-index'
   | 'patterns'
   | 'patterns-index'
-  | 'jsx-is-valid-prop'
-  | 'jsx-helpers'
-  | 'jsx-factory'
-  | 'jsx-patterns'
-  | 'jsx-create-style-context'
-  | 'jsx-patterns-index'
   | 'css-index'
   | 'themes'
   | 'package.json'
-  | 'types-jsx'
   | 'types-entry'
   | 'types-styles'
   | 'types-conditions'

package/dist/config.d.ts

@@ -184,7 +184,6 @@ export interface ImportMapInput {
   css?: string | string[]
   recipes?: string | string[]
   patterns?: string | string[]
-  jsx?: string | string[]
   tokens?: string | string[]
 }
 
@@ -192,7 +191,6 @@ export interface ImportMapOutput<T = string> {
   css: T[]
   recipe: T[]
   pattern: T[]
-  jsx: T[]
   tokens: T[]
 }
 
@@ -261,49 +259,6 @@ interface FileSystemOptions {
   logLevel?: 'debug' | 'info' | 'warn' | 'error' | 'silent'
 }
 
-export type JsxFramework = 'react' | 'solid' | 'preact' | 'vue' | 'qwik'
-
-interface JsxOptions {
-  /**
-   * The framework to use for generating supercharged elements.
-   */
-  jsxFramework?: JsxFramework | (string & {})
-  /**
-   * The factory name of the element
-   * @default 'styled'
-   *
-   * @example
-   * ```jsx
-   * <styled.button marginTop="40px">Click me</styled.button>
-   * ```
-   */
-  jsxFactory?: string
-  /**
-   * The style props allowed on generated JSX components
-   * - When set to 'all', all style props are allowed.
-   * - When set to 'minimal', only the `css` prop is allowed.
-   * - When set to 'none', no style props are allowed and therefore the jsxFactory will not be importable.
-   *
-   * @default 'all'
-   *
-   * @example with 'all':
-   * ```jsx
-   * <styled.button marginTop="40px">Click me</styled.button>
-   * ```
-   *
-   * @example with 'minimal':
-   * ```jsx
-   * <styled.button css={{ marginTop: "40px" }}>Click me</styled.button>
-   * ```
-   *
-   * @example with 'none':
-   * ```jsx
-   * <button className={css({ marginTop: "40px" })}>Click me</button>
-   * ```
-   */
-  jsxStyleProps?: 'all' | 'minimal' | 'none'
-}
-
 interface CssgenOptions {
   /**
    * Whether to include css reset styles in the generated css.
@@ -370,11 +325,6 @@ interface CssgenOptions {
    * @default ':where(:host, :root)'
    */
   cssVarRoot?: string
-  /**
-   * The css syntax kind to use
-   * @default 'object-literal'
-   */
-  syntax?: 'template-literal' | 'object-literal'
   /**
    * Whether to use `lightningcss` instead of `postcss` for css optimization.
    * @default false
@@ -445,6 +395,10 @@ interface CodegenOptions {
    * - `'grouped'`: one class per `css()` call, grouping all properties together
    *
    * Grouped mode reduces the number of classes in the HTML at the cost of potential CSS duplication.
+   *
+   * A grouped class names a whole call, so the build has to have seen that exact call to emit its rule.
+   * Where it cannot, the runtime falls back to atomic class names — and a few shapes lose their styles
+   * entirely, without a warning. Read https://bamboocss.com/docs/references/config#cssmode before enabling it.
    * @default 'atomic'
    */
   cssMode?: 'atomic' | 'grouped'
@@ -475,7 +429,6 @@ export interface Config
     CssgenOptions,
     CodegenOptions,
     FileSystemOptions,
-    JsxOptions,
     PresetOptions,
     HooksOptions,
     PluginsOptions {

package/dist/hooks.d.ts

@@ -2,7 +2,7 @@ import type { Artifact, ArtifactId, DiffConfigResult } from './artifact'
 import type { LoadConfigResult, UserConfig } from './config'
 import type { HooksApiInterface } from './hooks-api'
 import type { LoggerInterface } from './logger'
-import type { ParserResultInterface, ResultItem } from './parser'
+import type { ParserResultInterface } from './parser'
 
 export interface BambooHooks {
   /**
@@ -37,10 +37,6 @@ export interface BambooHooks {
    * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
    */
   'parser:before': (args: ParserResultBeforeHookArgs) => string | void
-  /**
-   * @private USE IT ONLY IF YOU KNOW WHAT YOU ARE DOING
-   */
-  'parser:preprocess': JsxFactoryResultTransform['transform']
   /**
    * Called after the file styles are extracted and processed into the resulting ParserResult object.
    * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
@@ -173,10 +169,6 @@ export interface ParserResultBeforeHookArgs {
   original?: string
 }
 
-export interface JsxFactoryResultTransform {
-  transform: (result: { type: 'jsx-factory'; data: ResultItem['data'] }) => ResultItem['data']
-}
-
 export interface ParserResultAfterHookArgs {
   filePath: string
   result: ParserResultInterface | undefined

package/dist/parser.d.ts

@@ -3,17 +3,17 @@ import type { BoxNodeArray, BoxNodeLiteral, BoxNodeMap, Unboxed } from '@bambooc
 export interface ResultItem {
   name?: string
   data: Array<Unboxed['raw']>
-  type?: 'css' | 'cva' | 'sva' | 'token' | 'pattern' | 'recipe' | 'jsx-factory' | 'jsx-pattern' | 'jsx-recipe' | 'jsx'
+  type?: 'css' | 'cva' | 'sva' | 'token' | 'pattern' | 'recipe' | 'jsx-recipe'
   box?: BoxNodeMap | BoxNodeLiteral | BoxNodeArray
 }
 
 export interface ParserResultInterface {
   all: Array<ResultItem>
-  jsx: Set<ResultItem>
   css: Set<ResultItem>
   cva: Set<ResultItem>
   sva: Set<ResultItem>
   token: Set<ResultItem>
+  viewTransition: Set<ResultItem>
   recipe: Map<string, Set<ResultItem>>
   pattern: Map<string, Set<ResultItem>>
   filePath: string | undefined
@@ -24,7 +24,7 @@ export interface ParserResultInterface {
   setCva: (result: ResultItem) => void
   setSva: (result: ResultItem) => void
   setToken: (result: ResultItem) => void
-  setJsx: (result: ResultItem) => void
+  setViewTransition: (result: ResultItem) => void
   setPattern: (name: string, result: ResultItem) => void
   setRecipe: (name: string, result: ResultItem) => void
 }
@@ -39,5 +39,9 @@ export interface EncoderJson {
     grouped?: {
       [groupId: string]: string[]
     }
+    /** Bag class -> the `::view-transition-*` slot styles behind it. */
+    viewTransitions?: {
+      [className: string]: Record<string, any>
+    }
   }
 }

package/dist/pattern.d.ts

@@ -32,11 +32,6 @@ export interface PatternConfig<T extends PatternProperties = PatternProperties>
    * The description of the pattern. This will be used in the JSDoc comment.
    */
   description?: string
-  /**
-   * The JSX element rendered by the pattern
-   * @default 'div'
-   */
-  jsxElement?: string
   /**
    * The properties of the pattern.
    */
@@ -53,17 +48,6 @@ export interface PatternConfig<T extends PatternProperties = PatternProperties>
    * Whether the pattern is deprecated.
    */
   deprecated?: boolean | string
-  /**
-   * The jsx element name this pattern will generate.
-   */
-  jsxName?: string
-  /**
-   * The jsx elements to track for this pattern. Can be string or Regexp.
-   *
-   * @default capitalize(pattern.name)
-   * @example ['Button', 'Link', /Button$/]
-   */
-  jsx?: Array<string | RegExp>
   /**
    * Whether to only generate types for the specified properties.
    * This will disallow css properties

package/dist/recipe.d.ts

@@ -63,6 +63,20 @@ export interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantR
    * The base styles of the recipe.
    */
   base?: SystemStyleObject
+  /**
+   * The prefix every class this recipe emits is built from — `button` gives `button` for
+   * the base styles and `button--size_sm` for a variant.
+   *
+   * Required for a recipe declared in `theme.recipes`, where it is the key it is declared
+   * under. Optional for an inline `cva`, which is otherwise named by hashing its own
+   * config: `cva_a1b2c3--size_sm`. Setting it buys readable class names and nothing else —
+   * the CSS is identical either way.
+   *
+   * It has to be unique across every recipe in the build. Two recipes sharing a name emit
+   * rules under the same selectors, and the later one wins for any variant they both
+   * declare.
+   */
+  className?: string
   /**
    * Whether the recipe is deprecated.
    */
@@ -84,10 +98,6 @@ export interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantR
 export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>
 
 interface RecipeConfigMeta {
-  /**
-   * The class name of the recipe.
-   */
-  className: string
   /**
    * The description of the recipe. This will be used in the JSDoc comment.
    */
@@ -106,7 +116,10 @@ interface RecipeConfigMeta {
 }
 
 export interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>
-  extends RecipeDefinition<T>, RecipeConfigMeta {}
+  extends RecipeDefinition<T>, RecipeConfigMeta {
+  /** Optional on `RecipeDefinition`, where an inline `cva` falls back to hashing its config. A recipe declared in `theme.recipes` always has one — the key it is declared under. */
+  className: string
+}
 
 /* -----------------------------------------------------------------------------
  * Recipe / Slot
@@ -127,6 +140,20 @@ export interface SlotRecipeRuntimeFn<
   raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>
   variantKeys: (keyof T)[]
   variantMap: RecipeVariantMap<T>
+  /** The config this recipe was created from. */
+  config: SlotRecipeDefinition<S, T>
+  /** Each slot's constant class, for targeting a slot in the DOM. */
+  classNameMap: Partial<Record<S, string>>
+  /**
+   * Which slots each variant writes styles for.
+   *
+   * A variant's styles reach a slot through a scope opened at an anchor, which covers every
+   * slot in that anchor's subtree. A slot under no anchor — moved out by a portal, with no
+   * second anchor named in `scopeRoots` — is not reached, and nothing at build time can
+   * detect that. This says which slots a variant has to get to, so whatever a scope cannot
+   * reach can be threaded by hand.
+   */
+  slotsAffectedBy: Record<keyof T, S[]>
   splitVariantProps<Props extends RecipeSelection<T>>(
     props: Props,
   ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]
@@ -142,7 +169,16 @@ export interface SlotRecipeDefinition<
   T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
 > {
   /**
-   * An optional class name that can be used to target slots in the DOM.
+   * The prefix every class this recipe emits is built from, and the name to target its
+   * slots in the DOM by — `checkbox` gives `checkbox__control` for a slot and
+   * `checkbox__control--size_md` for that slot under a variant.
+   *
+   * Required for a recipe declared in `theme.slotRecipes`, where it is the key it is
+   * declared under. Optional for an inline `sva`, which is otherwise named by hashing its
+   * own config. Setting it buys readable class names and nothing else — the CSS is
+   * identical either way.
+   *
+   * It has to be unique across every recipe in the build.
    */
   className?: string
   /**
@@ -153,6 +189,37 @@ export interface SlotRecipeDefinition<
    * The parts/slots of the recipe.
    */
   slots: S[] | Readonly<S[]>
+  /**
+   * The slots that enclose other slots, used to scope their variant styles.
+   *
+   * A slot recipe's variants are chosen once, at the top, but the slots that react to them
+   * are authored by the consumer somewhere below. Naming the enclosing slots lets the build
+   * emit their variant styles as rules scoped by a class those slots already carry, so
+   * nothing has to be delivered to a slot at runtime and every other slot's class is a
+   * constant.
+   *
+   * A list, because a portal is a real discontinuity in the tree and no CSS mechanism
+   * crosses one. A `<Select>` occupies two disjoint subtrees — the trigger side under
+   * `root`, the listbox side under a portaled `positioner` — and a variant writes styles
+   * into both. One anchor can only ever reach one of them.
+   *
+   * ```ts
+   * scopeRoots: ['root', 'positioner']
+   * ```
+   *
+   * Each named slot takes variant props; every other slot's class is a constant. The build
+   * emits each non-anchor slot's variant rules under *every* anchor, and only the anchor
+   * that is genuinely an ancestor matches — so the DOM shape never has to be declared.
+   *
+   * Defaults to `['root']` when a slot by that name exists. Set `[]` to turn scoping off
+   * and give every slot a variant class of its own, which is what a recipe whose slots are
+   * siblings wants.
+   *
+   * A slot under *no* anchor is still unreachable, and nothing at build time can detect
+   * that — reachability is a fact about the DOM. `recipe.slotsAffectedBy` says which slots
+   * a variant writes to, for whatever still needs threading by hand.
+   */
+  scopeRoots?: S[] | Readonly<S[]>
   /**
    * The base styles of the recipe.
    */
@@ -178,4 +245,8 @@ export type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariant
 export type SlotRecipeConfig<
   S extends string = string,
   T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
-> = SlotRecipeDefinition<S, T> & RecipeConfigMeta
+> = SlotRecipeDefinition<S, T> &
+  RecipeConfigMeta & {
+    /** Optional on `SlotRecipeDefinition`, where an inline `sva` falls back to hashing its config. A recipe declared in `theme.slotRecipes` always has one — the key it is declared under. */
+    className: string
+  }

package/dist/reporter.d.ts

@@ -1,16 +1,6 @@
 import type { ParserResultInterface } from './parser'
 
-export type ReportItemType =
-  | 'css'
-  | 'cva'
-  | 'sva'
-  | 'token'
-  | 'pattern'
-  | 'recipe'
-  | 'jsx-factory'
-  | 'jsx-pattern'
-  | 'jsx-recipe'
-  | 'jsx'
+export type ReportItemType = 'css' | 'cva' | 'sva' | 'token' | 'pattern' | 'recipe' | 'jsx-recipe'
 
 type ComponentKind = 'component' | 'function'
 

package/dist/spec.d.ts

@@ -13,7 +13,6 @@ export type SpecType =
 
 interface Examples {
   functionExamples: string[]
-  jsxExamples: string[]
 }
 
 export interface TokenValue {
@@ -78,7 +77,6 @@ export interface PatternSpecDefinition extends Examples {
   name: string
   description?: string
   properties: PatternSpecProperty[]
-  jsx?: string
 }
 
 export interface PatternSpec {
@@ -140,7 +138,6 @@ export interface ColorPaletteSpec {
   data: {
     values: string[]
     functionExamples: string[]
-    jsxExamples: string[]
   }
 }
 

package/dist/style-rules.d.ts

@@ -24,6 +24,14 @@ export interface AtomicStyleResult {
   className: string
   conditions?: ConditionDetails[]
   layer?: string
+  /**
+   * The rule selects through a `@scope` prelude rather than on `className`.
+   *
+   * A non-root slot's variant styles are reached from the class the *root* carries, so this
+   * result's own class names nothing. It still identifies the rule for bookkeeping, but
+   * reporting it would put a class on the element that no rule ever matches.
+   */
+  scoped?: boolean
 }
 
 export interface GroupedResult extends Pick<AtomicStyleResult, 'result' | 'className'> {
@@ -39,3 +47,15 @@ export interface RecipeBaseResult extends GroupedResult {
 export interface GroupedStyleResultDetails extends Pick<AtomicStyleResult, 'hash' | 'entry' | 'conditions'> {
   result: StyleResultObject
 }
+
+export interface ViewTransitionResult {
+  className: string
+  /**
+   * Selector -> authored style object, the shape `globalCss` takes.
+   *
+   * Unlike every other result here this is *not* transformed yet: the bodies target
+   * `::view-transition-*` pseudo-elements, so they are serialized whole at emit rather
+   * than atomized into classes.
+   */
+  styles: StyleResultObject
+}

package/dist/system-types.d.ts

@@ -89,6 +89,21 @@ export type NestedCssProperties = Nested<CssProperties>
 
 export type SystemStyleObject = Nested<(SystemProperties | GenericProperties) & CssVarProperties>
 
+/**
+ * The four `::view-transition-*` pseudo-elements a `viewTransition()` bag can style.
+ *
+ * `imagePair` is camelCase here and emitted as `::view-transition-image-pair`, matching
+ * how every other property in a style object is authored.
+ */
+export interface ViewTransitionStyleObject {
+  group?: SystemStyleObject
+  imagePair?: SystemStyleObject
+  old?: SystemStyleObject
+  new?: SystemStyleObject
+}
+
+export type ViewTransitionFn = (options: ViewTransitionStyleObject) => string
+
 export interface GlobalStyleObject {
   [selector: string]: SystemStyleObject
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bamboocss/types",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "description": "The types for css bamboo",
   "homepage": "https://bamboocss.com",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "ncp": "2.0.0",
     "pkg-types": "2.3.0",
     "ts-morph": "28.0.0",
-    "@bamboocss/extractor": "1.14.0"
+    "@bamboocss/extractor": "1.16.0"
   },
   "scripts": {
     "dev": "tsx scripts/watch.ts",