gladvn 0.2.16 → 0.2.18

package/src/dev/data.ts

@@ -46,292 +46,446 @@ export const COLOR_INFO = {
 };
 
 export const COMPONENTS = [
-  { id: "accordion", category: "Layout & Structure",
+  {
+    id: "accordion",
+    category: "Layout & Structure",
     label: "Accordion",
     hasMicro: true,
     hasMacro: true,
     status: "stable",
   },
-  { id: "alert", category: "Feedback & Overlays",
+  {
+    id: "alert",
+    category: "Feedback & Overlays",
     label: "Alert",
     hasMicro: true,
     hasMacro: true,
     status: "stable",
     hasSize: true,
   },
-  { id: "alert-dialog", category: "Feedback & Overlays",
+  {
+    id: "alert-dialog",
+    category: "Feedback & Overlays",
     label: "Alert Dialog",
     hasMicro: true,
     hasMacro: true,
     status: "stable",
     hasSize: true,
   },
-  { id: "aspect-ratio", category: "Layout & Structure",
+  {
+    id: "aspect-ratio",
+    category: "Layout & Structure",
     label: "Aspect Ratio",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
   },
-  { id: "avatar", category: "Data Display",
+  {
+    id: "avatar",
+    category: "Data Display",
     label: "Avatar",
     hasMicro: true,
     hasMacro: true,
     status: "stable",
     hasSize: true,
   },
-  { id: "badge", category: "Data Display",
+  {
+    id: "badge",
+    category: "Data Display",
     label: "Badge",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
     hasSize: true,
   },
-  { id: "breadcrumb", category: "Navigation",
+  {
+    id: "breadcrumb",
+    category: "Navigation",
     label: "Breadcrumb",
     hasMicro: true,
     hasMacro: true,
     status: "stable",
   },
-  { id: "button", category: "Forms & Inputs",
+  {
+    id: "button",
+    category: "Forms & Inputs",
     label: "Button",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
     hasSize: true,
   },
-  { id: "calendar", category: "Forms & Inputs",
+  {
+    id: "calendar",
+    category: "Forms & Inputs",
     label: "Calendar",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
     hasSize: true,
   },
-  { id: "card", category: "Layout & Structure",
+  {
+    id: "card",
+    category: "Layout & Structure",
     label: "Card",
     hasMicro: true,
     hasMacro: true,
     status: "stable",
     hasSize: true,
   },
-  { id: "carousel", category: "Layout & Structure",
+  {
+    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",
+  {
+    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",
+  {
+    id: "collapsible",
+    category: "Layout & Structure",
     label: "Collapsible",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
   },
-  { id: "combobox", category: "Forms & Inputs",
+  {
+    id: "combobox",
+    category: "Forms & Inputs",
     label: "Combobox",
     hasMicro: true,
     hasMacro: true,
     status: "stable",
     hasSize: true,
   },
-  { id: "command", category: "Navigation",
+  {
+    id: "command",
+    category: "Navigation",
     label: "Command",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
   },
-  { id: "context-menu", category: "Navigation",
+  {
+    id: "context-menu",
+    category: "Navigation",
     label: "Context Menu",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
   },
-  { id: "dialog", category: "Feedback & Overlays",
+  {
+    id: "dialog",
+    category: "Feedback & Overlays",
     label: "Dialog",
     hasMicro: true,
     hasMacro: true,
     status: "stable",
     hasSize: true,
   },
-  { id: "drawer", category: "Feedback & Overlays",
+  {
+    id: "drawer",
+    category: "Feedback & Overlays",
     label: "Drawer",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
   },
-  { id: "dropdown-menu", category: "Navigation",
+  {
+    id: "dropdown-menu",
+    category: "Navigation",
     label: "Dropdown Menu",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
     hasSize: true,
   },
-  { id: "empty", category: "Data Display",
+  {
+    id: "empty",
+    category: "Data Display",
     label: "Empty",
     hasMicro: true,
     hasMacro: true,
     status: "stable",
   },
 
-  { id: "hover-card", category: "Feedback & Overlays",
+  {
+    id: "hover-card",
+    category: "Feedback & Overlays",
     label: "Hover Card",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
     hasSize: true,
   },
-  { id: "input", category: "Forms & Inputs",
+  {
+    id: "input",
+    category: "Forms & Inputs",
     label: "Input",
     hasMicro: true,
     hasMacro: true,
     status: "stable",
     hasSize: true,
   },
-  { id: "input-group", category: "Forms & Inputs",
+  {
+    id: "input-group",
+    category: "Forms & Inputs",
     label: "Input Group",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
     hasSize: true,
   },
-  { id: "input-otp", category: "Forms & Inputs",
+  {
+    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",
+  {
+    id: "item",
+    category: "Data Display",
+    label: "Item",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
     hasSize: true,
   },
-  { id: "kbd", category: "Data Display",
+  {
+    id: "kbd",
+    category: "Data Display",
     label: "Kbd",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
   },
-  { id: "label", category: "Forms & Inputs",
+  {
+    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",
+  {
+    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",
+  {
+    id: "pagination",
+    category: "Navigation",
+    label: "Pagination",
+    hasMicro: true,
+    hasMacro: true,
+    status: "stable",
     hasSize: true,
   },
-  { id: "popover", category: "Feedback & Overlays",
+  {
+    id: "popover",
+    category: "Feedback & Overlays",
     label: "Popover",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
     hasSize: true,
   },
-  { id: "progress", category: "Feedback & Overlays",
+  {
+    id: "progress",
+    category: "Feedback & Overlays",
     label: "Progress",
     hasMicro: true,
     hasMacro: true,
     status: "stable",
     hasSize: true,
   },
-  { id: "radio-group", category: "Forms & Inputs",
+  {
+    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",
+  {
+    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",
+  {
+    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",
+  {
+    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",
+  {
+    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",
+  {
+    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",
+  {
+    id: "switch",
+    category: "Forms & Inputs",
     label: "Switch",
     hasMicro: true,
     hasMacro: true,
     status: "stable",
     hasSize: true,
   },
-  { id: "table", category: "Layout & Structure",
+  {
+    id: "table",
+    category: "Layout & Structure",
     label: "Table",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
   },
-  { id: "tabs", category: "Navigation",
+  {
+    id: "tabs",
+    category: "Navigation",
     label: "Tabs",
     hasMicro: true,
     hasMacro: true,
     status: "stable",
   },
-  { id: "textarea", category: "Forms & Inputs",
+  {
+    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",
+  {
+    id: "toggle",
+    category: "Forms & Inputs",
+    label: "Toggle",
+    hasMicro: true,
+    hasMacro: false,
+    status: "stable",
     hasSize: true,
   },
-  { id: "toggle-group", category: "Forms & Inputs",
+  {
+    id: "toggle-group",
+    category: "Forms & Inputs",
     label: "Toggle Group",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
     hasSize: true,
   },
-  { id: "theme-provider", category: "Data Display",
+  {
+    id: "theme-provider",
+    category: "Data Display",
     label: "Theme Provider",
     hasMicro: true,
     hasMacro: false,
     status: "stable",
   },
-  { id: "tooltip", category: "Feedback & Overlays",
+  {
+    id: "tooltip",
+    category: "Feedback & Overlays",
     label: "Tooltip",
     hasMicro: true,
     hasMacro: false,

package/src/dev/main.tsx

@@ -1,10 +1,11 @@
-import { useEffect } from "react";
+import { StrictMode, useEffect } from "react";
+
+import { createRoot } from "react-dom/client";
+
 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() {
@@ -27,4 +28,3 @@ createRoot(document.getElementById("root")!).render(
     </ThemeProvider>
   </StrictMode>,
 );
-

package/src/dev/sections/buttons.tsx

@@ -1,3 +1,17 @@
+import { useState } from "react";
+
+import {
+  BoxIcon,
+  CheckCircle2Icon,
+  LayersIcon,
+  PlusIcon,
+  SendIcon,
+  SettingsIcon,
+  ShieldAlertIcon,
+  Trash2Icon,
+  UserIcon,
+} from "lucide-react";
+
 import { SelectPreset } from "../../components/macro/select-preset";
 import { Avatar, AvatarFallback } from "../../components/micro/avatar";
 import { Button } from "../../components/micro/button";
@@ -10,18 +24,6 @@ import {
 } from "../../components/micro/tooltip";
 import { SectionHeader } from "../../dev/components/showcase";
 import { Size } from "../../lib/types";
-import {
-  BoxIcon,
-  CheckCircle2Icon,
-  LayersIcon,
-  PlusIcon,
-  SendIcon,
-  SettingsIcon,
-  ShieldAlertIcon,
-  Trash2Icon,
-  UserIcon,
-} from "lucide-react";
-import { useState } from "react";
 
 export default function ButtonsSection() {
   const [globalSize, setGlobalSize] = useState<Size>("md");

package/src/dev/sections/feedback.tsx

@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import {
   CheckCircle2Icon,
   FileX2Icon,
@@ -7,10 +9,13 @@ import {
   TriangleAlertIcon,
   XCircleIcon,
 } from "lucide-react";
-import { useState } from "react";
 import { toast } from "sonner";
 
-import { Alert, AlertDescription, AlertTitle } from "../../components/micro/alert";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "../../components/micro/alert";
 import { Button } from "../../components/micro/button";
 import {
   Empty,

package/src/dev/sections/forms.tsx

@@ -1,5 +1,15 @@
 import { useState } from "react";
 
+import {
+  CalendarIcon,
+  LayoutTemplateIcon,
+  MousePointerClickIcon,
+  ToggleLeftIcon,
+  TriangleAlertIcon,
+  TypeIcon,
+} from "lucide-react";
+
+import { SelectPreset } from "../../components/macro/select-preset";
 import { Alert, AlertDescription } from "../../components/micro/alert";
 import { Calendar } from "../../components/micro/calendar";
 import { Checkbox } from "../../components/micro/checkbox";
@@ -30,17 +40,6 @@ import {
   InputOTPSlot,
 } from "../../components/micro/input-otp";
 import { Label } from "../../components/micro/label";
-import { SectionHeader } from "../../dev/components/showcase";
-import {
-  CalendarIcon,
-  LayoutTemplateIcon,
-  MousePointerClickIcon,
-  ToggleLeftIcon,
-  TriangleAlertIcon,
-  TypeIcon,
-} from "lucide-react";
-
-import { SelectPreset } from "../../components/macro/select-preset";
 import { RadioGroup, RadioGroupItem } from "../../components/micro/radio-group";
 import {
   Select,
@@ -56,6 +55,7 @@ import { Separator } from "../../components/micro/separator";
 import { Slider } from "../../components/micro/slider";
 import { Switch } from "../../components/micro/switch";
 import { Textarea } from "../../components/micro/textarea";
+import { SectionHeader } from "../../dev/components/showcase";
 import { Size } from "../../lib/types";
 
 export default function FormsSection() {

package/src/dev/sections/overview.tsx

@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import {
   BoxIcon,
   CheckIcon,
@@ -8,7 +10,6 @@ import {
   PaletteIcon,
   ZapIcon,
 } from "lucide-react";
-import { useState } from "react";
 import { toast } from "sonner";
 
 import {