Changelog

fix(build): emit a single "use client" directive at the top of each bundle

Bun's bundler kept every source module's "use client" directive inline as a bare statement, so the published bundles carried one mid-file per component. Turbopack rejects directives outside the file prologue, which broke Next.js apps importing the packages. The build now strips the per-module directives and restores one banner per output file.

fix(build): emit a single "use client" directive at the top of each bundle

Bun's bundler kept every source module's "use client" directive inline as a bare statement, so the published bundles carried one mid-file per component. Turbopack rejects directives outside the file prologue, which broke Next.js apps importing the packages. The build now strips the per-module directives and restores one banner per output file.

Panda CSS v2: @pockets-ui/components is now the design system.

@pockets-ui/components owns the theme (tokens, recipes, conditions) and publishes its own generated styled-system as @pockets-ui/components/{css,jsx,recipes,tokens,patterns,types}. @pockets-ui/theme, @pockets-ui/styled, @pockets-ui/cli, and @pockets-ui/postcss are gone; @pockets-ui/tokens-native now generates from @pockets-ui/components/theme. Panda v2 requires Node 22+.

**Migrating a consumer**

Before:

sh bun add @pockets-ui/components @pockets-ui/styled @pockets-ui/theme @pockets-ui/postcss @pockets-ui/utils @pockets-ui/cli bunx pockets-ui init bunx pockets-ui codegen

After:

sh bun remove @pockets-ui/styled @pockets-ui/theme @pockets-ui/postcss @pockets-ui/cli bun add @pockets-ui/components bun add -D @pandacss/dev @pandacss/postcss # or @pandacss/vite / @pandacss/bun

1. Rename pockets.config.ts to panda.config.ts and point it at the design system:

ts import { defineConfig } from "@pandacss/dev";

export default defineConfig({ designSystem: "@pockets-ui/components", include: ["./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], // optional, same as before: theme: { extend: { tokens: { fonts: { heading: { value: "var(--font-x)" } } } }, }, });

Do not list @pockets-ui/components in include, and do not set prefix, hash, or separator — the design system owns them.

2. postcss.config.*: replace "@pockets-ui/postcss": {} with "@pandacss/postcss": {}.

3. Scripts: replace pockets-ui codegen with panda codegen (prepare, predev, or prebuild). It writes a thin styled-system/ shim into your app that re-exports jsx, recipes, and patterns from the package and generates your own css() and tokens.

4. Imports: @pockets-ui/styled/css → your app's styled-system/css (or @pockets-ui/components/css if you extend nothing); @pockets-ui/styled/recipes → styled-system/recipes or @pockets-ui/components/recipes. Component imports from @pockets-ui/components are unchanged.

5. Keep @layer reset, base, tokens, recipes, utilities; in your global CSS.

**Consume without Panda**: import "@pockets-ui/components/styles.css" ships every recipe variant and text style pre-built. On that path only recipe variants are styled — css() and style props on the components have no matching CSS.

**Behaviour changes from Panda v2**: compound variants emit one class each; CSS variables are declared with @property (Chrome 85+, Safari 16.4+, Firefox 128+); createStyleContext is gone from jsx — the components use createSlotRecipeContext, and every style-context part now carries a data-slot attribute.

Add the 8xl (90rem) size token. It is the default maxWidth of Panda's container pattern, which previously resolved to nothing in pockets, so a bare container() set no max width.

Panda CSS v2: @pockets-ui/components is now the design system.

@pockets-ui/components owns the theme (tokens, recipes, conditions) and publishes its own generated styled-system as @pockets-ui/components/{css,jsx,recipes,tokens,patterns,types}. @pockets-ui/theme, @pockets-ui/styled, @pockets-ui/cli, and @pockets-ui/postcss are gone; @pockets-ui/tokens-native now generates from @pockets-ui/components/theme. Panda v2 requires Node 22+.

**Migrating a consumer**

Before:

sh bun add @pockets-ui/components @pockets-ui/styled @pockets-ui/theme @pockets-ui/postcss @pockets-ui/utils @pockets-ui/cli bunx pockets-ui init bunx pockets-ui codegen

After:

sh bun remove @pockets-ui/styled @pockets-ui/theme @pockets-ui/postcss @pockets-ui/cli bun add @pockets-ui/components bun add -D @pandacss/dev @pandacss/postcss # or @pandacss/vite / @pandacss/bun

1. Rename pockets.config.ts to panda.config.ts and point it at the design system:

ts import { defineConfig } from "@pandacss/dev";

export default defineConfig({ designSystem: "@pockets-ui/components", include: ["./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], // optional, same as before: theme: { extend: { tokens: { fonts: { heading: { value: "var(--font-x)" } } } }, }, });

Do not list @pockets-ui/components in include, and do not set prefix, hash, or separator — the design system owns them.

2. postcss.config.*: replace "@pockets-ui/postcss": {} with "@pandacss/postcss": {}.

3. Scripts: replace pockets-ui codegen with panda codegen (prepare, predev, or prebuild). It writes a thin styled-system/ shim into your app that re-exports jsx, recipes, and patterns from the package and generates your own css() and tokens.

4. Imports: @pockets-ui/styled/css → your app's styled-system/css (or @pockets-ui/components/css if you extend nothing); @pockets-ui/styled/recipes → styled-system/recipes or @pockets-ui/components/recipes. Component imports from @pockets-ui/components are unchanged.

5. Keep @layer reset, base, tokens, recipes, utilities; in your global CSS.

**Consume without Panda**: import "@pockets-ui/components/styles.css" ships every recipe variant and text style pre-built. On that path only recipe variants are styled — css() and style props on the components have no matching CSS.

**Behaviour changes from Panda v2**: compound variants emit one class each; CSS variables are declared with @property (Chrome 85+, Safari 16.4+, Firefox 128+); createStyleContext is gone from jsx — the components use createSlotRecipeContext, and every style-context part now carries a data-slot attribute.

Add the 8xl (90rem) size token. It is the default maxWidth of Panda's container pattern, which previously resolved to nothing in pockets, so a bare container() set no max width.

Panda CSS v2: @pockets-ui/components is now the design system.

@pockets-ui/components owns the theme (tokens, recipes, conditions) and publishes its own generated styled-system as @pockets-ui/components/{css,jsx,recipes,tokens,patterns,types}. @pockets-ui/theme, @pockets-ui/styled, @pockets-ui/cli, and @pockets-ui/postcss are gone; @pockets-ui/tokens-native now generates from @pockets-ui/components/theme. Panda v2 requires Node 22+.

**Migrating a consumer**

Before:

sh bun add @pockets-ui/components @pockets-ui/styled @pockets-ui/theme @pockets-ui/postcss @pockets-ui/utils @pockets-ui/cli bunx pockets-ui init bunx pockets-ui codegen

After:

sh bun remove @pockets-ui/styled @pockets-ui/theme @pockets-ui/postcss @pockets-ui/cli bun add @pockets-ui/components bun add -D @pandacss/dev @pandacss/postcss # or @pandacss/vite / @pandacss/bun

1. Rename pockets.config.ts to panda.config.ts and point it at the design system:

ts import { defineConfig } from "@pandacss/dev";

export default defineConfig({ designSystem: "@pockets-ui/components", include: ["./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], // optional, same as before: theme: { extend: { tokens: { fonts: { heading: { value: "var(--font-x)" } } } }, }, });

Do not list @pockets-ui/components in include, and do not set prefix, hash, or separator — the design system owns them.

2. postcss.config.*: replace "@pockets-ui/postcss": {} with "@pandacss/postcss": {}.

3. Scripts: replace pockets-ui codegen with panda codegen (prepare, predev, or prebuild). It writes a thin styled-system/ shim into your app that re-exports jsx, recipes, and patterns from the package and generates your own css() and tokens.

4. Imports: @pockets-ui/styled/css → your app's styled-system/css (or @pockets-ui/components/css if you extend nothing); @pockets-ui/styled/recipes → styled-system/recipes or @pockets-ui/components/recipes. Component imports from @pockets-ui/components are unchanged.

5. Keep @layer reset, base, tokens, recipes, utilities; in your global CSS.

**Consume without Panda**: import "@pockets-ui/components/styles.css" ships every recipe variant and text style pre-built. On that path only recipe variants are styled — css() and style props on the components have no matching CSS.

**Behaviour changes from Panda v2**: compound variants emit one class each; CSS variables are declared with @property (Chrome 85+, Safari 16.4+, Firefox 128+); createStyleContext is gone from jsx — the components use createSlotRecipeContext, and every style-context part now carries a data-slot attribute.

Every component now takes the full Panda styling surface, not just css. The 23 hand-written components (Button, Card, Checkbox, Switch, Slider, Meter, ProgressBar, TextField, DateField, Tooltip, Popover, Dialog, Menu, Select, ComboBox, GridList, Table, TagGroup, Toast, Breadcrumbs, RadioGroup, Calendar, DatePicker) are rebuilt on Panda's createStyleContext — the same pattern Avatar, Banner, and UserCard already used — with the single-element Button and Card on styled(…, recipe). Every exported part accepts style props (bg, p, gap, …) alongside css, a raw React style object (previously omitted from the types), className, as, and unstyled to drop the recipe. Generic parts (Select.Root's items, DateField's value type, Table.Body, …) keep their type parameters. Two prop types narrowed: Table.Column's width/minWidth/maxWidth and Popover/Tooltip/DatePicker.Content's offset and Calendar.Grid's offset are still react-aria's positioning props, forwarded past Panda's same-named style props.

Add Avatar — a compound component (Root, Image, Fallback, Badge, Group, GroupCount) with the shadcn/Base UI avatar API, image load-state fallback, three sizes, and its avatar slot recipe.

Add UserCard — the member molecule. A compound component whose always-shown header (Avatar, Identity → NameRow → Name + Badge, inline Metas, Activity, Actions) covers the Network list rows, and whose standardized Details block (Stats → Stat → StatValue + StatLabel, Section → SectionTitle + Item, and a react-aria Disclosure → DisclosureTrigger + DisclosurePanel) carries the richer profile-card, dashboard, and feed variants. Name and Item are react-aria Links. Root takes size (normal, compact), layout (card — a framed surface with a hairline above the details block — or inline — frameless list rows with hairline dividers), and variant (outline, elevated), and ships with its user-card slot recipe.

TagGroup: add TagGroup.StaticTag, a display-only tag that never takes part in selection or removal, with an intent prop (neutral, action, info, success, warning, danger, brand, premium) washed from the semantic bg / fg intents. The recipe exposes --pk-tag-bg / --pk-tag-fg for one-off retheming.

Add ComboBox, a filterable picker built on React Aria's ComboBox. Typing in the field filters the options; selectionMode="multiple" renders the selection as removable tags (via TagGroup) inside the field, ahead of the input, with the popover staying open while picking and Backspace on an empty input removing the last tag. Ships with the comboBox slot recipe in the theme preset.

Add Card, a static content surface with a standardized background, radius, and border, with padding density variants (compact/comfortable/spacious/none) and outline/elevated variants.

Extract createPocket into a new public @pockets-ui/utils package.

Fixes a broken publish of @pockets-ui/components: the bundle shipped a live #create-pocket package import whose imports-map target (a .tsx source file) was not included in the tarball, so any consumer of the published package failed to resolve it at runtime. createPocket is now imported from @pockets-ui/utils (a regular dependency) and the imports map is gone. Declarations now land at dist/index.d.ts instead of dist/src/index.d.ts (publishConfig updated accordingly; the public API surface of @pockets-ui/components is unchanged).

Extract createPocket into a new public @pockets-ui/utils package.

Fixes a broken publish of @pockets-ui/components: the bundle shipped a live #create-pocket package import whose imports-map target (a .tsx source file) was not included in the tarball, so any consumer of the published package failed to resolve it at runtime. createPocket is now imported from @pockets-ui/utils (a regular dependency) and the imports map is gone. Declarations now land at dist/index.d.ts instead of dist/src/index.d.ts (publishConfig updated accordingly; the public API surface of @pockets-ui/components is unchanged).

Add @pockets-ui/tokens-native — the pockets tokens for React Native and Expo

The web packages ship the design system as a Panda preset compiled to CSS, which native cannot consume: no CSS variables, no selectors, no rem. This new package carries the same tokens, generated from the same preset.theme.extend object Panda uses for the web build, as plain data — dp numbers, hex colors, and the _dark condition flattened into a second theme object.

It has no dependencies (it does not even import react-native) and is shaped for react-native-unistyles:

ts import { StyleSheet } from "react-native-unistyles"; import { themes } from "@pockets-ui/tokens-native";

StyleSheet.configure({ themes, settings: { adaptiveThemes: true } });

src/tokens.generated.ts is checked in, so a token change is reviewable as a diff, and a test re-runs the generator and fails if the output moves — a token retuned in @pockets-ui/theme cannot silently go missing on native.

Three conversions are lossy and documented in the package README:

• **Shadows** ship twice — shadows as faithful RN 0.76+ boxShadow layers, and shadowsLegacy collapsed onto a single layer for the old architecture.
• **OKLCH → hex** loses sub-step precision at three decimal places. Under 2/255 everywhere except the two highest-chroma brand anchors, where vermilion #FF4F01 lands as #ff4f07 and BP Blue #023AD7 as #063ad7 — the same values a browser computes from the same OKLCH, so native and web agree.
• **Responsive display type styles** split into textStyles (mobile) and textStylesMd (tablet), since RN has no media queries.

Component recipes are not included: they are authored against web semantics (inline-flex, cursor, outline, CSS transitions, and &[data-hovered] selectors from react-aria-components' state model) and need a dedicated resolver to port.

Add Banner — an inline, persistent status message with intent (info/success/warning/danger), variant (subtle/solid/outline), and size (sm/md). Banner.Root is an ARIA live region (role="status", or role="alert" for interruptive messages) and Banner.Close is a React Aria Button; dismissal works uncontrolled by default, with isOpen/onOpenChange for controlled use.

Banner.Root is a column: Banner.Header holds the first line (Banner.Icon, Banner.Title, Banner.Close) and Banner.Content / Banner.Actions stack below it at full width.

Default intent glyphs come from lucide-react, which @pockets-ui/components now declares as a peer dependency.

Widen the React peer dependency range to ^18.3.1 || ^19.

The range was pinned to ^19.2.8, the exact version the workspace develops against. Anything on React 18 — or on a React 19 release earlier than 19.2.8 — got a peer conflict on install rather than a resolvable tree, even though neither package uses an API newer than 18.3.

Nothing about the installed React changes for consumers already on 19: the range still accepts everything ^19.2.8 did.

Use defineRecipe for single-element components instead of modelling them as one-slot slot recipes, and stop double-prefixing recipe class names.

Button is the first single-element recipe: buttonRecipe replaces buttonSlotRecipe, it's registered under the preset's new theme.extend.recipes block, and button(props) now returns a class string rather than a { root } record.

Every recipe's className is now authored bare ("dialog", not "pk-dialog") — the pk- prefix comes from the config's prefix, which Panda was already prepending on top of it.

**Breaking:**

• Call sites that read button(...).root must use button(...) directly.
• Emitted class names lose the duplicated prefix: .pk-pk-dialog__content → .pk-dialog__content, .pk-pk-button__root → .pk-button. Stylesheets or tests targeting the old pk-pk-* classes need updating; the documented pk-<name>__<slot> form is now what actually ships.

Add a Popover compound component (Root, Trigger, Content) built on React Aria, with a placement-aware slot recipe (enter/exit animation, focus-managed dialog surface).

Add Meter component — a labeled bar displaying a quantity within a known range, built on React Aria's Meter with a meter slot recipe (root, label, valueText, track, fill).

Add Toast component — a compound notification system (Region, Root, Content, Title, Description, Close) built on react-aria-components' toast queue, with a createToastQueue helper and the pk-toast slot recipe.

Add Breadcrumbs — a compound hierarchy trail (Root, Item, Link, Separator) built on react-aria-components, with its slot recipe.

Add Calendar — a styled react-aria-components Calendar with month navigation, weekday header, and day cells styled via the new calendar slot recipe (selected, today, unavailable, disabled, and invalid states).

Add DatePicker — a compound segmented date field + calendar popover (Root, Label, Control, Input, Trigger, Content) built on react-aria-components, with its slot recipe.

Add GridList — a styled react-aria-components GridList compound (Root, Item) with keyboard navigation, single/multiple selection (auto-rendered selection checkboxes), row actions, stack/grid layouts, and an empty state, styled via the new gridList slot recipe.

Add DateField component — keyboard-editable date input with per-segment editing, built on React Aria's DateField.

Add Menu — a compound action menu (Root, Trigger, Content, Item, SubmenuTrigger, Shortcut, Section, SectionHeader, Separator) built on react-aria-components, with its slot recipe.

Add ProgressBar component — react-aria-components ProgressBar styled via the progressBar slot recipe, with determinate and indeterminate (sweep animation) states.

Add RadioGroup — a compound single-choice control (Root, Label, Item) built on react-aria-components, with its slot recipe.

Add Select — a compound single-choice picker (Root, Label, Trigger, Value, Content, Item) built on react-aria-components, with its slot recipe.

Add Slider — a single- or multi-thumb range input (label, value output, track, fill, thumbs) built on react-aria-components, with its slot recipe.

Add Switch — a styled react-aria-components Switch with track, thumb, and label slots styled via the new switchRecipe slot recipe (selected, focus-visible, and disabled states driven off RAC data-\* attributes).

Add Table — a compound data grid (Root, Header, Column, Body, Row, Cell) built on react-aria-components, styled via the new table slot recipe. Includes keyboard navigation, automatic checkbox-selection columns, column sorting with an animated indicator, disabled rows, and an empty state.

Add TagGroup compound component (Root, Label, List, Tag) built on react-aria-components, with selection, removal, and the tagGroup slot recipe.

Add Tooltip compound component (Root, Content) built on react-aria-components, with placement-aware arrow and enter/exit animation.

Add the bun component <name> scaffolder and an internal createPocket context utility (#create-pocket package import, not part of the public API). Declaration output moved to dist/src/index.d.ts (publishConfig updated accordingly; the runtime bundle is unchanged). @pockets-ui/styled now declares react as a peer dependency, since its generated jsx runtime imports React.

Mark components as Client Components. They're built on react-aria-components, which uses React Context (createContext) and therefore only runs in Client Components — without a "use client" directive, importing e.g. Button into a Next.js Server Component threw "createContext only works in Client Components".

Each component source now carries "use client", and the bundled dist build emits the directive as its first line (via a build banner, since the bundler does not hoist it). Consumers can now import pockets components directly into Server Components without adding their own "use client".