@buildkitgg/shadcn-baseui-sera 0.2.0 → 0.3.0

package/dist/ui/toggle-group.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
-import { cn } from "cn";
+import { cn } from "@buildkitgg/shadcn-runtime";
 import { toggleVariants } from "./toggle.js";
 const ToggleGroupContext = React.createContext({
     size: "default",
@@ -16,7 +16,7 @@ function ToggleGroup({ className, variant, size, spacing = 2, orientation = "hor
 }
 function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
     const context = React.useContext(ToggleGroupContext);
-    return (_jsx(TogglePrimitive, { "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: cn("data-[state=on]:bg-muted data-[state=on]:text-foreground group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-6 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-4 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-4 shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
+    return (_jsx(TogglePrimitive, { "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: cn("data-[state=on]:bg-muted data-[state=on]:text-foreground group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-6 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pe-4 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:ps-4 shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
             variant: context.variant || variant,
             size: context.size || size,
         }), className), ...props, children: children }));

package/dist/ui/toggle.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { cva } from "class-variance-authority";
-import { cn } from "cn";
+import { cn } from "@buildkitgg/shadcn-runtime";
 const toggleVariants = cva("hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1.5 rounded-none text-xs font-semibold uppercase tracking-widest transition-colors [&_svg:not([class*='size-'])]:size-3.5 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variants: {
         variant: {
@@ -10,9 +10,9 @@ const toggleVariants = cva("hover:text-foreground aria-pressed:bg-muted focus-vi
             outline: "border-input hover:bg-muted border bg-transparent",
         },
         size: {
-            default: "h-10 min-w-10 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-            sm: "h-9 min-w-9 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-            lg: "h-11 min-w-11 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
+            default: "h-10 min-w-10 px-6 has-data-[icon=inline-end]:pe-4 has-data-[icon=inline-start]:ps-4",
+            sm: "h-9 min-w-9 px-4 has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3",
+            lg: "h-11 min-w-11 px-8 has-data-[icon=inline-end]:pe-5 has-data-[icon=inline-start]:ps-5",
         },
     },
     defaultVariants: {

package/dist/ui/tooltip.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
-import { cn } from "cn";
+import { cn } from "@buildkitgg/shadcn-runtime";
 function TooltipProvider({ delay = 0, ...props }) {
     return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props }));
 }
@@ -12,6 +12,6 @@ function TooltipTrigger({ ...props }) {
     return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn("data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-none px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-fit max-w-xs origin-(--transform-origin) bg-foreground text-background", className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-none data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:translate-x-[1.5px] data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:translate-x-[-1.5px] data-[side=inline-start]:-translate-y-1/2 z-50 bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })] }) }) }));
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn("data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-none px-3 py-1.5 text-xs has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2 z-50 w-fit max-w-xs origin-(--transform-origin) bg-foreground text-background", className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-none data-[side=inline-end]:top-1/2! data-[side=inline-end]:-start-1 data-[side=inline-end]:translate-x-[1.5px] rtl:data-[side=inline-end]:-translate-x-[1.5px] data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-end-1 data-[side=inline-start]:translate-x-[-1.5px] rtl:data-[side=inline-start]:-translate-x-[-1.5px] data-[side=inline-start]:-translate-y-1/2 z-50 bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })] }) }) }));
 }
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/ui/trace.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "cn";
+import { cn } from "@buildkitgg/shadcn-runtime";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "./collapsible.js";
 import { ChevronRightIcon } from "lucide-react";
 function Trace({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "trace", className: cn("gap-3 *:has-[>[data-slot=trace-line]]:rounded-none *:has-[>[data-slot=trace-line]]:focus-visible:ring-2 *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/30 flex w-full min-w-0 flex-col *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none", className), ...props }));
+    return (_jsx("div", { "data-slot": "trace", className: cn("gap-3 *:has-[>[data-slot=trace-line]]:rounded-none *:has-[>[data-slot=trace-line]]:focus-visible:ring-2 *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/30 flex w-full min-w-0 flex-col *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:text-start *:has-[>[data-slot=trace-line]]:outline-none", className), ...props }));
 }
 function TraceLine({ className, status, ...props }) {
     return (_jsx("span", { "data-slot": "trace-line", "data-status": status, className: cn("gap-2 text-sm flex w-fit max-w-full min-w-0 items-center text-muted-foreground transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=pending]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:shimmer", className), ...props }));
 }
 function TraceIcon({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "trace-icon", "aria-hidden": "true", className: cn("size-4 [&_svg:not([class*='size-'])]:size-4 [[data-slot=trace-title]~&]:-ml-1 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none", className), ...props }));
+    return (_jsx("span", { "data-slot": "trace-icon", "aria-hidden": "true", className: cn("size-4 [&_svg:not([class*='size-'])]:size-4 [[data-slot=trace-title]~&]:-ms-1 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none", className), ...props }));
 }
 function TraceTitle({ className, ...props }) {
     return (_jsx("span", { "data-slot": "trace-title", className: cn("min-w-0 truncate motion-reduce:shimmer-none", className), ...props }));
@@ -21,9 +21,9 @@ function TraceCollapsible({ className, ...props }) {
     return (_jsx(Collapsible, { "data-slot": "trace-collapsible", className: cn("flex w-full min-w-0 flex-col", className), ...props }));
 }
 function TraceCollapsibleTrigger({ className, children, ...props }) {
-    return (_jsxs(CollapsibleTrigger, { "data-slot": "trace-collapsible-trigger", className: cn("gap-1 rounded-none focus-visible:ring-2 focus-visible:ring-ring/30 group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center text-left text-muted-foreground transition-colors outline-none hover:text-foreground has-[[data-status=error]]:text-destructive", className), ...props, children: [children, _jsx(TraceIcon, { className: "transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90", children: _jsx(ChevronRightIcon, {}) })] }));
+    return (_jsxs(CollapsibleTrigger, { "data-slot": "trace-collapsible-trigger", className: cn("gap-1 rounded-none focus-visible:ring-2 focus-visible:ring-ring/30 group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center text-start text-muted-foreground transition-colors outline-none hover:text-foreground has-[[data-status=error]]:text-destructive", className), ...props, children: [children, _jsx(TraceIcon, { className: "transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90", children: _jsx(ChevronRightIcon, {}) })] }));
 }
 function TraceCollapsibleContent({ className, children, ...props }) {
-    return (_jsx(CollapsibleContent, { "data-slot": "trace-collapsible-content", className: "duration-200 h-(--collapsible-panel-height) min-w-0 overflow-hidden transition-[height] data-ending-style:h-0 data-starting-style:h-0", ...props, children: _jsx("div", { "data-slot": "trace-collapsible-content-inner", className: cn("mt-3 mb-1 ml-[calc(--spacing(2)-1px)] border-l pr-1 pl-4 leading-relaxed min-w-0 wrap-break-word text-muted-foreground", className), children: children }) }));
+    return (_jsx(CollapsibleContent, { "data-slot": "trace-collapsible-content", className: "duration-200 h-(--collapsible-panel-height) min-w-0 overflow-hidden transition-[height] data-ending-style:h-0 data-starting-style:h-0", ...props, children: _jsx("div", { "data-slot": "trace-collapsible-content-inner", className: cn("mt-3 mb-1 ms-[calc(--spacing(2)-1px)] border-s pe-1 ps-4 leading-relaxed min-w-0 wrap-break-word text-muted-foreground", className), children: children }) }));
 }
 export { Trace, TraceLine, TraceIcon, TraceTitle, TraceDescription, TraceCollapsible, TraceCollapsibleTrigger, TraceCollapsibleContent, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buildkitgg/shadcn-baseui-sera",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "license": "MIT",
   "description": "Upstream shadcn Base UI components in the sera style, with compiled CSS and TypeScript declarations.",
@@ -13,7 +13,6 @@
     "@shadcn/react": "^0.3.1",
     "class-variance-authority": "^0.7.1",
     "cmdk": "^1.1.1",
-    "cn": "^0.5.0",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",
@@ -23,7 +22,8 @@
     "react-resizable-panels": "^4.14.5",
     "recharts": "3.10.1",
     "shiki": "^4.5.0",
-    "sonner": "^2.0.8"
+    "sonner": "^2.0.8",
+    "@buildkitgg/shadcn-runtime": "^0.1.0"
   },
   "devDependencies": {
     "@repo/shadcn-generator": "0.0.0"
@@ -51,7 +51,15 @@
       "types": "./dist/styles.d.ts",
       "default": "./dist/styles-no-reset.css"
     },
-    "./tokens.json": "./dist/tokens.json"
+    "./tokens.json": "./dist/tokens.json",
+    "./theme.css": {
+      "types": "./dist/styles.d.ts",
+      "default": "./dist/theme.css"
+    },
+    "./tailwind.css": {
+      "types": "./dist/styles.d.ts",
+      "default": "./dist/tailwind.css"
+    }
   },
   "types": "./dist/index.d.ts",
   "sideEffects": [