@buildkitgg/shadcn-baseui-sera 0.0.0-stage → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Change Log - @buildkitgg/shadcn-baseui-sera
+
+<!-- This log was last generated on Thu, 22 Oct 2026 20:48:38 GMT and should not be manually modified. -->
+
+<!-- Start content -->
+
+## 0.2.0
+
+Thu, 22 Oct 2026 20:48:38 GMT
+
+### Minor changes
+
+- Generate upstream Base UI style packages with a shared public API, dependency alias support, and derived token
+  metadata. (41898282+github-actions[bot]@users.noreply.github.com)

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,20 @@
-# Temporary Holding Version
+# @buildkitgg/shadcn-baseui-sera
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Generated from the pinned upstream shadcn Base UI catalog. Do not edit generated components.
+
+Select this style once using a dependency alias:
+
+```sh
+pnpm add @buildkitgg/shadcn-baseui-kit@npm:@buildkitgg/shadcn-baseui-sera
+```
+
+```tsx
+import { Button } from "@buildkitgg/shadcn-baseui-kit"
+import "@buildkitgg/shadcn-baseui-kit/styles.css"
+```
+
+Buildkit's shadcn managers use the same peer dependency and inherit this selection. Import styles once at the app entry.
+Use `styles-no-reset.css` when the app already supplies Tailwind's reset. Colors and light/dark mode remain customizable
+through CSS variables. Style selection is installation-time, not runtime.
+
+[Setup, maintenance, and release checks](https://github.com/AndrewCraswell/buildkit/blob/main/docs/shadcn/styles.md).

package/dist/hooks/use-highlighted-code.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare function useHighlightedCode(value: string, language: string): (string | number | bigint | boolean | React.JSX.Element[] | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null | undefined)[];

package/dist/hooks/use-highlighted-code.js

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { loadHighlighter } from "../lib/highlighter.js";
+export function useHighlightedCode(value, language) {
+    // A trailing newline would render as an extra empty line.
+    const code = value.endsWith("\n") ? value.slice(0, -1) : value;
+    const [loaded, setLoaded] = React.useState(null);
+    const highlighter = loaded?.language === language ? loaded.highlighter : null;
+    React.useEffect(() => {
+        let cancelled = false;
+        loadHighlighter(language)
+            .then((next) => {
+            if (!cancelled) {
+                setLoaded({ language, highlighter: next });
+            }
+        })
+            .catch(() => { });
+        return () => {
+            cancelled = true;
+        };
+    }, [language]);
+    // The complete lines, highlighted. While the code streams, only the new
+    // lines are tokenized, starting from the grammar state of the last one.
+    const [done, setDone] = React.useState({ highlighter: null, text: "", lines: [] });
+    let next = done;
+    if (next.highlighter !== highlighter || !code.startsWith(next.text)) {
+        next = { highlighter, text: "", lines: [] };
+    }
+    const end = code.lastIndexOf("\n") + 1;
+    if (highlighter && end > next.text.length) {
+        const result = highlighter.highlight(code.slice(next.text.length, end - 1), next.state);
+        next = {
+            highlighter,
+            text: code.slice(0, end),
+            lines: [...next.lines, ...result.lines],
+            state: result.state,
+        };
+    }
+    if (next !== done) {
+        setDone(next);
+    }
+    // The last line is still being written, so it is tokenized on every render.
+    const tail = code.slice(end);
+    return React.useMemo(() => {
+        if (!highlighter) {
+            return code.split("\n");
+        }
+        return [...next.lines, highlighter.highlight(tail, next.state).lines[0]];
+    }, [code, highlighter, next, tail]);
+}

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/hooks/use-mobile.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+const MOBILE_BREAKPOINT = 768;
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(undefined);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener("change", onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener("change", onChange);
+    }, []);
+    return !!isMobile;
+}

package/dist/index.d.ts

@@ -0,0 +1,68 @@
+export * from "./hooks/use-highlighted-code.js";
+export * from "./hooks/use-mobile.js";
+export * from "./lib/highlighter.js";
+export * from "./lib/utils.js";
+export * from "./ui/accordion.js";
+export * from "./ui/alert-dialog.js";
+export * from "./ui/alert.js";
+export * from "./ui/aspect-ratio.js";
+export * from "./ui/attachment.js";
+export * from "./ui/avatar.js";
+export * from "./ui/badge.js";
+export * from "./ui/breadcrumb.js";
+export * from "./ui/bubble.js";
+export * from "./ui/button-group.js";
+export * from "./ui/button.js";
+export * from "./ui/calendar.js";
+export * from "./ui/card.js";
+export * from "./ui/carousel.js";
+export * from "./ui/chart.js";
+export * from "./ui/checkbox.js";
+export * from "./ui/code-block.js";
+export * from "./ui/collapsible.js";
+export * from "./ui/combobox.js";
+export * from "./ui/command.js";
+export * from "./ui/context-menu.js";
+export * from "./ui/dialog.js";
+export * from "./ui/direction.js";
+export * from "./ui/drawer.js";
+export * from "./ui/dropdown-menu.js";
+export * from "./ui/empty.js";
+export * from "./ui/field.js";
+export * from "./ui/hover-card.js";
+export * from "./ui/input-group.js";
+export * from "./ui/input-otp.js";
+export * from "./ui/input.js";
+export * from "./ui/item.js";
+export * from "./ui/kbd.js";
+export * from "./ui/label.js";
+export * from "./ui/marker.js";
+export * from "./ui/menubar.js";
+export * from "./ui/message-scroller.js";
+export * from "./ui/message.js";
+export * from "./ui/native-select.js";
+export * from "./ui/navigation-menu.js";
+export * from "./ui/pagination.js";
+export * from "./ui/popover.js";
+export * from "./ui/progress.js";
+export * from "./ui/questionnaire.js";
+export * from "./ui/radio-group.js";
+export * from "./ui/resizable.js";
+export * from "./ui/scroll-area.js";
+export * from "./ui/select.js";
+export * from "./ui/separator.js";
+export * from "./ui/sheet.js";
+export * from "./ui/sidebar.js";
+export * from "./ui/skeleton.js";
+export * from "./ui/slider.js";
+export { Toaster as SonnerToaster } from "./ui/sonner.js";
+export * from "./ui/spinner.js";
+export * from "./ui/switch.js";
+export * from "./ui/table.js";
+export * from "./ui/tabs.js";
+export * from "./ui/textarea.js";
+export * from "./ui/toast.js";
+export * from "./ui/toggle-group.js";
+export * from "./ui/toggle.js";
+export * from "./ui/tooltip.js";
+export * from "./ui/trace.js";

package/dist/index.js

@@ -0,0 +1,69 @@
+"use client";
+export * from "./hooks/use-highlighted-code.js";
+export * from "./hooks/use-mobile.js";
+export * from "./lib/highlighter.js";
+export * from "./lib/utils.js";
+export * from "./ui/accordion.js";
+export * from "./ui/alert-dialog.js";
+export * from "./ui/alert.js";
+export * from "./ui/aspect-ratio.js";
+export * from "./ui/attachment.js";
+export * from "./ui/avatar.js";
+export * from "./ui/badge.js";
+export * from "./ui/breadcrumb.js";
+export * from "./ui/bubble.js";
+export * from "./ui/button-group.js";
+export * from "./ui/button.js";
+export * from "./ui/calendar.js";
+export * from "./ui/card.js";
+export * from "./ui/carousel.js";
+export * from "./ui/chart.js";
+export * from "./ui/checkbox.js";
+export * from "./ui/code-block.js";
+export * from "./ui/collapsible.js";
+export * from "./ui/combobox.js";
+export * from "./ui/command.js";
+export * from "./ui/context-menu.js";
+export * from "./ui/dialog.js";
+export * from "./ui/direction.js";
+export * from "./ui/drawer.js";
+export * from "./ui/dropdown-menu.js";
+export * from "./ui/empty.js";
+export * from "./ui/field.js";
+export * from "./ui/hover-card.js";
+export * from "./ui/input-group.js";
+export * from "./ui/input-otp.js";
+export * from "./ui/input.js";
+export * from "./ui/item.js";
+export * from "./ui/kbd.js";
+export * from "./ui/label.js";
+export * from "./ui/marker.js";
+export * from "./ui/menubar.js";
+export * from "./ui/message-scroller.js";
+export * from "./ui/message.js";
+export * from "./ui/native-select.js";
+export * from "./ui/navigation-menu.js";
+export * from "./ui/pagination.js";
+export * from "./ui/popover.js";
+export * from "./ui/progress.js";
+export * from "./ui/questionnaire.js";
+export * from "./ui/radio-group.js";
+export * from "./ui/resizable.js";
+export * from "./ui/scroll-area.js";
+export * from "./ui/select.js";
+export * from "./ui/separator.js";
+export * from "./ui/sheet.js";
+export * from "./ui/sidebar.js";
+export * from "./ui/skeleton.js";
+export * from "./ui/slider.js";
+export { Toaster as SonnerToaster } from "./ui/sonner.js";
+export * from "./ui/spinner.js";
+export * from "./ui/switch.js";
+export * from "./ui/table.js";
+export * from "./ui/tabs.js";
+export * from "./ui/textarea.js";
+export * from "./ui/toast.js";
+export * from "./ui/toggle-group.js";
+export * from "./ui/toggle.js";
+export * from "./ui/tooltip.js";
+export * from "./ui/trace.js";

package/dist/lib/highlighter.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type GrammarState } from "shiki/core";
+export declare function loadHighlighter(language: string): Promise<{
+    highlight(code: string, state?: GrammarState): {
+        lines: React.JSX.Element[][];
+        state: GrammarState | undefined;
+    };
+} | null>;
+export declare function highlightCode(code: string, language: string): Promise<React.JSX.Element[][] | null>;

package/dist/lib/highlighter.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createHighlighterCore, } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+// Add the languages you need. Each one loads the first time it is used.
+const languages = {
+    bash: () => import("shiki/langs/shellscript.mjs"),
+    css: () => import("shiki/langs/css.mjs"),
+    diff: () => import("shiki/langs/diff.mjs"),
+    html: () => import("shiki/langs/html.mjs"),
+    javascript: () => import("shiki/langs/javascript.mjs"),
+    json: () => import("shiki/langs/json.mjs"),
+    jsx: () => import("shiki/langs/jsx.mjs"),
+    markdown: () => import("shiki/langs/markdown.mjs"),
+    python: () => import("shiki/langs/python.mjs"),
+    sql: () => import("shiki/langs/sql.mjs"),
+    tsx: () => import("shiki/langs/tsx.mjs"),
+    typescript: () => import("shiki/langs/typescript.mjs"),
+    yaml: () => import("shiki/langs/yaml.mjs"),
+};
+const aliases = {
+    js: "javascript",
+    md: "markdown",
+    py: "python",
+    sh: "bash",
+    shell: "bash",
+    shellscript: "bash",
+    ts: "typescript",
+    yml: "yaml",
+    zsh: "bash",
+};
+let highlighter;
+function getHighlighter() {
+    highlighter ??= createHighlighterCore({
+        themes: [
+            import("shiki/themes/github-light.mjs"),
+            import("shiki/themes/github-dark.mjs"),
+        ],
+        langs: [],
+        engine: createJavaScriptRegexEngine({ forgiving: true }),
+    });
+    return highlighter;
+}
+function getLanguage(language) {
+    const name = language.toLowerCase();
+    if (name === "ansi") {
+        return name;
+    }
+    if (name in languages) {
+        return name;
+    }
+    return aliases[name] ?? null;
+}
+// Loads a language and returns a highlighter for it, or null for a language
+// that is not listed.
+export async function loadHighlighter(language) {
+    const lang = getLanguage(language);
+    if (!lang) {
+        return null;
+    }
+    const shiki = await getHighlighter();
+    if (lang !== "ansi" && !shiki.getLoadedLanguages().includes(lang)) {
+        await shiki.loadLanguage(languages[lang]);
+    }
+    return {
+        // Returns one React node per line, and the grammar state after the last
+        // line. Pass that state back to continue where the code left off.
+        highlight(code, state) {
+            const tokenize = (text) => shiki.codeToTokens(text, {
+                lang,
+                themes: { light: "github-light", dark: "github-dark" },
+                defaultColor: false,
+                grammarState: state,
+            }).tokens;
+            // ANSI has no grammar state, so each line is tokenized on its own and
+            // gets the same colors whether it arrives in one piece or streams.
+            const tokens = lang === "ansi"
+                ? code.split("\n").flatMap((line) => tokenize(line))
+                : tokenize(code);
+            return {
+                lines: tokens.map((line) => line.map((token, index) => (_jsx("span", { style: token.htmlStyle, className: "text-(--shiki-light) dark:text-(--shiki-dark)", children: token.content }, index)))),
+                state: shiki.getLastGrammarState(tokens),
+            };
+        },
+    };
+}
+// Returns one React node per line, or null for a language that is not listed.
+export async function highlightCode(code, language) {
+    const highlighter = await loadHighlighter(language);
+    return highlighter ? highlighter.highlight(code).lines : null;
+}

package/dist/lib/utils.d.ts

@@ -0,0 +1 @@
+export { cn } from "cn";

package/dist/lib/utils.js

@@ -0,0 +1 @@
+export { cn } from "cn";