@loykin/designkit 0.0.3 → 0.0.5

package/dist/index.js

@@ -7,7 +7,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
-import { GripHorizontal, ChevronRightIcon, MoreHorizontalIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, XIcon, PanelLeftIcon, SlidersHorizontal, ChevronLeft, Check } from 'lucide-react';
+import { GripHorizontal, XIcon, ChevronRightIcon, MoreHorizontalIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, PanelLeftIcon, SlidersHorizontal, ChevronLeft, Check, Clock } from 'lucide-react';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
 import { Menu } from '@base-ui/react/menu';
 import { Input as Input$1 } from '@base-ui/react/input';
@@ -18,7 +18,7 @@ import { Select as Select$1 } from '@base-ui/react/select';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { Dialog } from '@base-ui/react/dialog';
 import * as React2 from 'react';
-import React2__default, { createContext, forwardRef, useContext, useEffect, useMemo, Children, useState, Fragment as Fragment$1, useCallback } from 'react';
+import React2__default, { createContext, forwardRef, useContext, useEffect, useState, useCallback, useMemo, Children, Fragment as Fragment$1 } from 'react';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { Slider as Slider$1 } from '@base-ui/react/slider';
 import { Switch as Switch$1 } from '@base-ui/react/switch';
@@ -2474,7 +2474,7 @@ function ResizeHandle({
     }
   );
 }
-function WorkbenchBodyTemplate({
+function WorkbenchBodyTemplateRoot({
   theme,
   className,
   contentClassName,
@@ -2765,6 +2765,21 @@ function WorkbenchBodyTemplate({
     ] })
   ] });
 }
+function WorkbenchSection({ title, description, actions, className, children }) {
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-2.5 p-3", className), children: [
+    (title || description || actions) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        title && /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actions })
+    ] }),
+    children
+  ] });
+}
+var WorkbenchBodyTemplate = Object.assign(WorkbenchBodyTemplateRoot, {
+  Section: WorkbenchSection
+});
 var DataBodyTemplateContext = React2__default.createContext(false);
 function useDataBodyTemplateParent(component) {
   if (!React2__default.useContext(DataBodyTemplateContext)) {
@@ -3503,52 +3518,6 @@ function ListDetailBodyTemplate({
     }
   );
 }
-function PanelTemplateSection({
-  title,
-  description,
-  actions,
-  className,
-  children
-}) {
-  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-2.5", className), children: [
-    (title || description || actions) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-        title && /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
-      ] }),
-      actions && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actions })
-    ] }),
-    children
-  ] });
-}
-function PanelTemplateRoot({
-  title,
-  eyebrow,
-  status,
-  actions,
-  footer,
-  children,
-  className,
-  bodyClassName
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col overflow-hidden", className), children: [
-    (title || eyebrow || actions) && /* @__PURE__ */ jsxs("div", { className: "shrink-0 px-4 py-3", children: [
-      eyebrow && /* @__PURE__ */ jsx("p", { className: "mb-0.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: eyebrow }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-          title && /* @__PURE__ */ jsx("h2", { className: "min-w-0 truncate text-sm font-semibold", children: title }),
-          status && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: status })
-        ] }),
-        actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto px-4 py-4", bodyClassName), children: /* @__PURE__ */ jsx("div", { className: "space-y-5", children }) }),
-    footer && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border px-4 py-3", children: footer })
-  ] });
-}
-var PanelTemplate = Object.assign(PanelTemplateRoot, {
-  Section: PanelTemplateSection
-});
 function FormWizardBodyTemplate({
   theme,
   title,
@@ -4099,6 +4068,196 @@ function PageTopBar({
     }
   );
 }
+function PanelTemplateSection({
+  title,
+  description,
+  actions,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-2.5", className), children: [
+    (title || description || actions) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        title && /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actions })
+    ] }),
+    children
+  ] });
+}
+function PanelTemplateRow({ label, children, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-[6rem_minmax(0,1fr)] gap-3", className), children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "min-w-0 break-words font-mono text-xs", children })
+  ] });
+}
+function PanelTemplateRoot({
+  title,
+  eyebrow,
+  status,
+  actions,
+  footer,
+  children,
+  className,
+  bodyClassName
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col overflow-hidden", className), children: [
+    (title || eyebrow || actions) && /* @__PURE__ */ jsxs("div", { className: "shrink-0 px-4 py-3", children: [
+      eyebrow && /* @__PURE__ */ jsx("p", { className: "mb-0.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: eyebrow }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          title && /* @__PURE__ */ jsx("h2", { className: "min-w-0 truncate text-sm font-semibold", children: title }),
+          status && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: status })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto px-4 py-4", bodyClassName), children: /* @__PURE__ */ jsx("div", { className: "space-y-5", children }) }),
+    footer && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border px-4 py-3", children: footer })
+  ] });
+}
+var PanelTemplate = Object.assign(PanelTemplateRoot, {
+  Section: PanelTemplateSection,
+  Row: PanelTemplateRow
+});
+function InteractiveCard({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      className: cn(
+        "group h-full cursor-pointer gap-0 overflow-hidden py-0 transition-all hover:-translate-y-0.5 hover:shadow-md",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var articleToneGradients = {
+  violet: "from-violet-500/80 via-indigo-500/70 to-sky-500/70",
+  emerald: "from-emerald-500/80 via-teal-500/70 to-cyan-500/70",
+  amber: "from-amber-500/80 via-orange-500/70 to-rose-500/70",
+  rose: "from-rose-500/80 via-pink-500/70 to-fuchsia-500/70",
+  sky: "from-sky-500/80 via-blue-500/70 to-indigo-500/70",
+  slate: "from-slate-500/80 via-slate-600/70 to-slate-700/70"
+};
+function ArticleCover({ tone, className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("relative bg-gradient-to-br", articleToneGradients[tone], className), children });
+}
+function ArticleByline({
+  author,
+  initials,
+  meta,
+  size = "default",
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", size === "sm" ? "gap-2" : "gap-3", className), children: [
+    /* @__PURE__ */ jsx(Avatar, { size: size === "sm" ? "sm" : void 0, children: /* @__PURE__ */ jsx(AvatarFallback, { children: initials }) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: cn("truncate font-medium", size === "sm" ? "text-xs" : "text-sm"), children: author }),
+      meta && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: meta })
+    ] })
+  ] });
+}
+function ArticleToc({ title = "On this page", items, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: title }),
+    items.map((item) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: item.href,
+        className: cn(
+          "block text-sm",
+          item.emphasis ? "font-medium" : "text-muted-foreground"
+        ),
+        children: item.label
+      },
+      item.href
+    ))
+  ] });
+}
+function ArticleBody({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl space-y-6 text-[15px] leading-7", className), children });
+}
+function ArticleBodySkeleton({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl animate-pulse space-y-4", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "h-8 w-2/3 rounded bg-muted" }),
+    /* @__PURE__ */ jsx("div", { className: "h-56 rounded-xl bg-muted" })
+  ] });
+}
+function ArticleCardPreview({
+  tone,
+  category,
+  title,
+  excerpt,
+  author,
+  initials,
+  readTime,
+  coverContent,
+  coverClassName,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(InteractiveCard, { className, children: [
+    /* @__PURE__ */ jsx(ArticleCover, { tone, className: cn("h-32", coverClassName), children: coverContent }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-1 flex-col p-4", children: [
+      /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "mb-3", children: category }),
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold leading-snug", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "mt-2 line-clamp-2 text-sm text-muted-foreground", children: excerpt }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between gap-3 pt-5", children: [
+        /* @__PURE__ */ jsx(ArticleByline, { author, initials, size: "sm", className: "min-w-0" }),
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Clock, { className: "size-3" }),
+          readTime
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function FormField({ label, htmlFor, error, helperText, className, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", className), children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor, className: "text-xs", children: label }),
+    children,
+    error ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: error }) : helperText ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helperText }) : null
+  ] });
+}
+function FormActions({
+  status,
+  cancelLabel = "Cancel",
+  onCancel,
+  cancelDisabled,
+  submitLabel,
+  submitDisabled,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 border-t border-border pt-(--designkit-panel-gap)",
+        status ? "justify-between" : "justify-end",
+        className
+      ),
+      children: [
+        status && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", role: "status", children: status }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              className: "h-8 text-xs",
+              onClick: onCancel,
+              disabled: cancelDisabled,
+              children: cancelLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", className: "h-8 text-xs", disabled: submitDisabled, children: submitLabel })
+        ] })
+      ]
+    }
+  );
+}
 var STYLE_ID = "designkit-vars";
 function buildTokenMap({
   radius,
@@ -4297,6 +4456,6 @@ function buildTemplateTheme(g, ov = {}) {
   return tokens;
 }
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BrowseBodyTemplate, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, DashboardBodyTemplate, DashboardPanel, DataBodyTemplate, DataPage, DetailBodyTemplate, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FormWizardBodyTemplate, Input, Label, ListDetailBodyTemplate, LoginBodyTemplate, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, PageBreadcrumb, PageTopBar, PanelTemplate, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBodyTemplate, WorkbenchBodyTemplate, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useSidebarOptional, useStyleInjector, useThemeStore };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, ArticleBody, ArticleBodySkeleton, ArticleByline, ArticleCardPreview, ArticleCover, ArticleToc, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BrowseBodyTemplate, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, DashboardBodyTemplate, DashboardPanel, DataBodyTemplate, DataPage, DetailBodyTemplate, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FormActions, FormField, FormWizardBodyTemplate, Input, InteractiveCard, Label, ListDetailBodyTemplate, LoginBodyTemplate, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, PageBreadcrumb, PageTopBar, PanelTemplate, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBodyTemplate, WorkbenchBodyTemplate, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useSidebarOptional, useStyleInjector, useThemeStore };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map