gladvn 0.2.14

package/src/dev/data.ts

@@ -0,0 +1,341 @@
+import {
+  AlertCircleIcon,
+  BoxIcon,
+  LayersIcon,
+  PaletteIcon,
+  ToggleLeftIcon,
+  TypeIcon,
+} from "lucide-react";
+
+export const VARIANTS = ["solid", "outline", "soft", "ghost", "link"] as const;
+export const COLORS = [
+  "primary",
+  "secondary",
+  "destructive",
+  "warning",
+  "success",
+  "info",
+  "tertiary",
+] as const;
+export const SIZES = ["sm", "md", "lg"] as const;
+
+export const NAV = [
+  { id: "overview", label: "Overview", icon: LayersIcon },
+  { id: "buttons", label: "Buttons", icon: BoxIcon },
+  { id: "forms", label: "Forms", icon: TypeIcon },
+  { id: "feedback", label: "Feedback", icon: AlertCircleIcon },
+  { id: "display", label: "Display", icon: PaletteIcon },
+  { id: "interactive", label: "Interactive", icon: ToggleLeftIcon },
+];
+
+export const STATS = [
+  { label: "Components", value: "55" },
+  { label: "Tokens", value: "40+" },
+  { label: "Variants", value: "5×7" },
+  { label: "Dark Mode", value: "✓" },
+];
+
+export const COLOR_INFO = {
+  primary: { label: "Primary", description: "Main action" },
+  secondary: { label: "Secondary", description: "Alternative" },
+  destructive: { label: "Destructive", description: "Danger / Delete" },
+  warning: { label: "Warning", description: "Caution" },
+  success: { label: "Success", description: "Confirm / Done" },
+  info: { label: "Info", description: "Information" },
+  tertiary: { label: "Tertiary", description: "Extra / Beta" },
+};
+
+export const COMPONENTS = [
+  { id: "accordion", category: "Layout & Structure",
+    label: "Accordion",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+  },
+  { id: "alert", category: "Feedback & Overlays",
+    label: "Alert",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "alert-dialog", category: "Feedback & Overlays",
+    label: "Alert Dialog",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "aspect-ratio", category: "Layout & Structure",
+    label: "Aspect Ratio",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+  },
+  { id: "avatar", category: "Data Display",
+    label: "Avatar",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "badge", category: "Data Display",
+    label: "Badge",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "breadcrumb", category: "Navigation",
+    label: "Breadcrumb",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+  },
+  { id: "button", category: "Forms & Inputs",
+    label: "Button",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "calendar", category: "Forms & Inputs",
+    label: "Calendar",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "card", category: "Layout & Structure",
+    label: "Card",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "carousel", category: "Layout & Structure",
+    label: "Carousel",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+  },
+  { id: "chart", category: "Data Display", label: "Chart", hasMicro: true, hasMacro: false, status: "stable" },
+  { id: "checkbox", category: "Forms & Inputs",
+    label: "Checkbox",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "collapsible", category: "Layout & Structure",
+    label: "Collapsible",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+  },
+  { id: "combobox", category: "Forms & Inputs",
+    label: "Combobox",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "command", category: "Navigation",
+    label: "Command",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+  },
+  { id: "context-menu", category: "Navigation",
+    label: "Context Menu",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+  },
+  { id: "dialog", category: "Feedback & Overlays",
+    label: "Dialog",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "drawer", category: "Feedback & Overlays",
+    label: "Drawer",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+  },
+  { id: "dropdown-menu", category: "Navigation",
+    label: "Dropdown Menu",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "empty", category: "Data Display",
+    label: "Empty",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+  },
+
+  { id: "hover-card", category: "Feedback & Overlays",
+    label: "Hover Card",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "input", category: "Forms & Inputs",
+    label: "Input",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "input-group", category: "Forms & Inputs",
+    label: "Input Group",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "input-otp", category: "Forms & Inputs",
+    label: "Input Otp",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "item", category: "Data Display", label: "Item", hasMicro: true, hasMacro: false, status: "stable",
+    hasSize: true,
+  },
+  { id: "kbd", category: "Data Display",
+    label: "Kbd",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+  },
+  { id: "label", category: "Forms & Inputs",
+    label: "Label",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "menubar", category: "Navigation", label: "Menubar", hasMicro: true, hasMacro: false, status: "stable" },
+  { id: "navigation-menu", category: "Navigation",
+    label: "Navigation Menu",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+  },
+  { id: "pagination", category: "Navigation", label: "Pagination", hasMicro: true, hasMacro: true, status: "stable",
+    hasSize: true,
+  },
+  { id: "popover", category: "Feedback & Overlays",
+    label: "Popover",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "progress", category: "Feedback & Overlays",
+    label: "Progress",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "radio-group", category: "Forms & Inputs",
+    label: "Radio Group",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "resizable", category: "Layout & Structure", label: "Resizable", hasMicro: true, hasMacro: false, status: "stable" },
+  { id: "scroll-area", category: "Layout & Structure", label: "Scroll Area", hasMicro: true, hasMacro: false, status: "stable" },
+  { id: "select", category: "Forms & Inputs",
+    label: "Select",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "separator", category: "Layout & Structure", label: "Separator", hasMicro: true, hasMacro: false, status: "stable" },
+  { id: "sheet", category: "Feedback & Overlays",
+    label: "Sheet",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "sidebar", category: "Layout & Structure", label: "Sidebar", hasMicro: true, hasMacro: false },
+  { id: "skeleton", category: "Feedback & Overlays",
+    label: "Skeleton",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+  },
+  { id: "slider", category: "Forms & Inputs",
+    label: "Slider",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "sonner", category: "Feedback & Overlays", label: "Sonner", hasMicro: true, hasMacro: false, status: "stable" },
+  { id: "spinner", category: "Feedback & Overlays", label: "Spinner", hasMicro: true, hasMacro: false, status: "stable",
+    hasSize: true,
+  },
+  { id: "switch", category: "Forms & Inputs",
+    label: "Switch",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "table", category: "Layout & Structure",
+    label: "Table",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+  },
+  { id: "tabs", category: "Navigation",
+    label: "Tabs",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+  },
+  { id: "textarea", category: "Forms & Inputs",
+    label: "Textarea",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "toggle", category: "Forms & Inputs", label: "Toggle", hasMicro: true, hasMacro: false, status: "stable",
+    hasSize: true,
+  },
+  { id: "toggle-group", category: "Forms & Inputs",
+    label: "Toggle Group",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+    hasSize: true,
+  },
+  { id: "theme-provider", category: "Data Display",
+    label: "Theme Provider",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+  },
+  { id: "tooltip", category: "Feedback & Overlays",
+    label: "Tooltip",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
+    hasSize: true,
+  },
+];

package/src/dev/index.css

@@ -0,0 +1,55 @@
+@import "tailwindcss";
+@import "../styles/tokens.css";
+@import "../styles/gladcn.css";
+
+/* Consumer responsibility: set body bg/text using design tokens */
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+/* ── Shiki dual-theme (github-light / github-dark) ────────────────────
+   When defaultColor: false is set in codeToHtml(), Shiki outputs
+   --shiki-light and --shiki-dark CSS variables on each token.
+   We map them to `color` based on the active theme class.
+   ─────────────────────────────────────────────────────────────────── */
+.shiki {
+  background-color: var(--shiki-light-bg);
+}
+
+.shiki span {
+  color: var(--shiki-light);
+}
+
+.dark .shiki {
+  background-color: var(--shiki-dark-bg);
+}
+
+.dark .shiki span {
+  color: var(--shiki-dark);
+}
+
+/* Reset shiki's default pre/code styling to blend with our card */
+.code-highlighter .shiki {
+  background-color: transparent !important;
+  padding: 0;
+  margin: 0;
+  overflow-x: auto;
+}
+
+.code-highlighter .shiki code {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Custom scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 5px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--border);
+  border-radius: 10px;
+}

package/src/dev/main.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+import { ThemeProvider, useTheme } from "../components/micro/theme-provider";
+import App from "../dev/App";
+import { DevContextProvider } from "../dev/components/dev-context";
+import "../dev/index.css";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+/** Syncs the theme class to <html> — this is a Macro concern, done here for the dev playground. */
+function RootThemeSync() {
+  const theme = useTheme();
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.toggle("dark", theme?.mode === "dark");
+    root.classList.toggle("light", theme?.mode === "light");
+  }, [theme?.mode]);
+  return null;
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ThemeProvider defaultMode="light">
+      <RootThemeSync />
+      <DevContextProvider>
+        <App />
+      </DevContextProvider>
+    </ThemeProvider>
+  </StrictMode>,
+);
+