refactor: code block thems

Author: segunadebayo

.changeset/configurable-shiki-themes.md

@@ -0,0 +1,27 @@
+---
+"@chakra-ui/react": patch
+---
+
+**CodeBlock**: Add configurable theme support and sync loading for Shiki adapter
+
+- **Theme configuration is now required** - The `theme` property must be
+ explicitly provided to `createShikiAdapter`
+- **Removed hard-coded theme fallbacks** - Missing themes now throw descriptive
+ errors
+- **Optional sync loading** with `loadSync` method for better performance
+
+```typescript
+// Before
+const adapter = createShikiAdapter({
+ async load() { /* ... */ },
+})
+
+// After
+const adapter = createShikiAdapter({
+ async load() { /* ... */ },
+ theme: {
+ light: "github-light",
+ dark: "github-dark",
+ },
+})
+```

.changeset/yellow-readers-tell.md

@@ -0,0 +1,24 @@
+---
+"@chakra-ui/react": minor
+---
+
+**Listbox [New]**: Add new component with support for single/multi-select,
+grouping, virtualization, controlled state, icons, descriptions, and
+accessibility features.
+
+This component can be used to build command palettes, dropdowns with search, and
+much more.
+
+```tsx
+<Listbox.Root collection={frameworks} width="320px">
+ <Listbox.Label>Select framework</Listbox.Label>
+ <Listbox.Content>
+ {frameworks.items.map((framework) => (
+ <Listbox.Item item={framework} key={framework.value}>
+ <Listbox.ItemText>{framework.label}</Listbox.ItemText>
+ <Listbox.ItemIndicator />
+ </Listbox.Item>
+ ))}
+ </Listbox.Content>
+</Listbox.Root>
+```

apps/compositions/src/examples/code-block-basic.tsx

@@ -32,7 +32,8 @@ const shikiAdapter = createShikiAdapter<HighlighterGeneric<any, any>>({
  const { createHighlighter } = await import("shiki")
  return createHighlighter({
  langs: ["tsx", "scss", "html", "bash", "json"],
- themes: ["github-dark", "github-light"],
+ themes: ["github-dark"],
  })
  },
+ theme: "github-dark",
 })

apps/compositions/src/examples/code-block-with-copy-button.tsx

@@ -43,4 +43,5 @@ const shikiAdapter = createShikiAdapter<HighlighterGeneric<any, any>>({
  themes: ["github-dark"],
  })
  },
+ theme: "github-dark",
 })

apps/compositions/src/examples/code-block-with-custom-action.tsx

@@ -51,7 +51,8 @@ const shikiAdapter = createShikiAdapter<HighlighterGeneric<any, any>>({
  const { createHighlighter } = await import("shiki")
  return createHighlighter({
  langs: ["tsx", "scss", "html", "bash", "json"],
- themes: ["github-dark", "github-light"],
+ themes: ["github-dark"],
  })
  },
+ theme: "github-dark",
 })

apps/compositions/src/examples/code-block-with-diff.tsx

@@ -43,7 +43,8 @@ const shikiAdapter = createShikiAdapter<HighlighterGeneric<any, any>>({
  const { createHighlighter } = await import("shiki")
  return createHighlighter({
  langs: ["tsx", "scss", "html", "bash", "json"],
- themes: ["github-dark", "github-light"],
+ themes: ["github-dark"],
  })
  },
+ theme: "github-dark",
 })

apps/compositions/src/examples/code-block-with-floating-copy-button.tsx

@@ -44,7 +44,8 @@ const shikiAdapter = createShikiAdapter<HighlighterGeneric<any, any>>({
  const { createHighlighter } = await import("shiki")
  return createHighlighter({
  langs: ["tsx", "scss", "html", "bash", "json"],
- themes: ["github-dark", "github-light"],
+ themes: ["github-dark"],
  })
  },
+ theme: "github-dark",
 })

apps/compositions/src/examples/code-block-with-language-switcher.tsx

@@ -86,9 +86,10 @@ const shikiAdapter = createShikiAdapter<HighlighterGeneric<any, any>>({
  const { createHighlighter } = await import("shiki")
  return createHighlighter({
  langs: ["python", "typescript"],
- themes: ["github-dark", "github-light"],
+ themes: ["github-dark"],
  })
  },
+ theme: "github-dark",
 })
 
 interface CodeFile {

apps/compositions/src/examples/code-block-with-line-focus.tsx

@@ -40,7 +40,8 @@ const shikiAdapter = createShikiAdapter<HighlighterGeneric<any, any>>({
  const { createHighlighter } = await import("shiki")
  return createHighlighter({
  langs: ["tsx", "scss", "html", "bash", "json"],
- themes: ["github-dark", "github-light"],
+ themes: ["github-dark"],
  })
  },
+ theme: "github-dark",
 })

apps/compositions/src/examples/code-block-with-line-highlight.tsx

@@ -36,7 +36,8 @@ const shikiAdapter = createShikiAdapter<HighlighterGeneric<any, any>>({
  const { createHighlighter } = await import("shiki")
  return createHighlighter({
  langs: ["tsx", "scss", "html", "bash", "json"],
- themes: ["github-dark", "github-light"],
+ themes: ["github-dark"],
  })
  },
+ theme: "github-dark",
 })