@lessly/ui 0.3.2 → 0.4.0

package/dist/index.d.ts

@@ -848,4 +848,68 @@ declare function AppShell({ sidebar, topBar, children, className }: AppShellProp
 /** Alias of AppShell — reads better in app router files. */
 declare const AuthenticatedLayout: typeof AppShell;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, type AppShellProps, AppSidebar, type AppSidebarProps, AspectRatio, AuthenticatedLayout, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExtensionIcon, type ExtensionIconProps, ExtensionLink, type ExtensionLinkProps, type ExtensionLinkUiMode, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, InlineError, type InlineErrorProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavItem, type NavLinkComponent, NavRow, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, type ResolvedTheme, ScrollArea, ScrollBar, SectionIntro, type SectionIntroProps, Select, type SelectOption, type SelectProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarNav, SidebarNavLink, type SidebarNavLinkProps, type SidebarNavProps, Skeleton, Slider, StatCard, type StatCardProps, StatusDot, type StatusDotProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, alertVariants, badgeVariants, buttonVariants, cn, isKnownExtensionIcon, navigationMenuTriggerStyle, statusDotVariants, toggleVariants, useCarousel, useFormField, useIsMobile, useSidebar, useTheme };
+declare const segmentChipVariants: (props?: ({
+    kind?: "granted" | "own" | "pending" | "available" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SegmentChipProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, 'children' | 'resource'>, VariantProps<typeof segmentChipVariants> {
+    /** The resource this segment points at, e.g. "a GitHub repo", "Ads account 123-456". */
+    resource: React$1.ReactNode;
+    /** Override the leading icon; defaults to a glyph derived from `kind`. */
+    icon?: LucideIcon;
+    /** Hide the leading icon entirely. */
+    hideIcon?: boolean;
+}
+declare const SegmentChip: React$1.ForwardRefExoticComponent<SegmentChipProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+type ConnectionScope = 'org' | 'org/product' | 'product';
+type ConnectionAuth = 'app' | 'oauth' | 'token';
+type ConnectionStatus = 'connected' | 'error' | 'disconnected';
+interface ConnectionCardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Display name, e.g. "GitHub — apliteni". */
+    name: string;
+    scope: ConnectionScope;
+    auth: ConnectionAuth;
+    status: ConnectionStatus;
+    /** Provider mark; falls back to a monogram box derived from `name`. */
+    glyph?: React$1.ReactNode;
+    /** Override the default status label (e.g. "Token expired" for `error`). */
+    statusLabel?: string;
+    /** How many products hold a segment of this connection. */
+    grantedCount?: number;
+    /** Footer action — typically a <Button> ("Manage", "Reconnect", "Connect"). */
+    action?: React$1.ReactNode;
+    /**
+     * Blast-radius disclosure. Some providers (GitHub, ClickUp) grant all-or-nothing
+     * access to the whole external org — there is no per-repo/per-space permission, so
+     * a product's segment is enforced by Lessly's gateway, not the provider. When set,
+     * a warning notice is shown, e.g. "Full org access — all repositories."
+     */
+    access?: React$1.ReactNode;
+}
+declare const ConnectionCard: React$1.ForwardRefExoticComponent<ConnectionCardProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type RequestSurface = 'org' | 'product';
+type RequestState = 'available' | 'pending' | 'granted';
+interface RequestRowProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'children'> {
+    surface: RequestSurface;
+    /** Provider display name, e.g. "Google Ads". */
+    name: string;
+    state: RequestState;
+    /** Provider mark; falls back to a monogram box derived from `name`. */
+    glyph?: React$1.ReactNode;
+    /** Secondary line — requester + resource (org), or availability (product). */
+    subtitle?: React$1.ReactNode;
+    /** The granted resource label; renders a <SegmentChip> when `state` is `granted`. */
+    grantedResource?: React$1.ReactNode;
+    /** Approve an org-side request. */
+    onApprove?: () => void;
+    /** Deny an org-side request. */
+    onDeny?: () => void;
+    /** Request an available connection from the product side. */
+    onRequest?: () => void;
+    /** Override the trailing controls entirely. */
+    action?: React$1.ReactNode;
+}
+declare const RequestRow: React$1.ForwardRefExoticComponent<RequestRowProps & React$1.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, type AppShellProps, AppSidebar, type AppSidebarProps, AspectRatio, AuthenticatedLayout, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, type ConnectionAuth, ConnectionCard, type ConnectionCardProps, type ConnectionScope, type ConnectionStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExtensionIcon, type ExtensionIconProps, ExtensionLink, type ExtensionLinkProps, type ExtensionLinkUiMode, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, InlineError, type InlineErrorProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavItem, type NavLinkComponent, NavRow, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, RequestRow, type RequestRowProps, type RequestState, type RequestSurface, type ResolvedTheme, ScrollArea, ScrollBar, SectionIntro, type SectionIntroProps, SegmentChip, type SegmentChipProps, Select, type SelectOption, type SelectProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarNav, SidebarNavLink, type SidebarNavLinkProps, type SidebarNavProps, Skeleton, Slider, StatCard, type StatCardProps, StatusDot, type StatusDotProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, alertVariants, badgeVariants, buttonVariants, cn, isKnownExtensionIcon, navigationMenuTriggerStyle, segmentChipVariants, statusDotVariants, toggleVariants, useCarousel, useFormField, useIsMobile, useSidebar, useTheme };

package/dist/index.js

@@ -3068,6 +3068,162 @@ function AppShell({ sidebar, topBar, children, className }) {
   ] }) });
 }
 var AuthenticatedLayout = AppShell;
+
+// src/components/segment-chip.tsx
+import * as React51 from "react";
+import { cva as cva9 } from "class-variance-authority";
+import { Link2 as Link22, KeyRound, Clock, Plus } from "lucide-react";
+import { jsx as jsx61, jsxs as jsxs31 } from "react/jsx-runtime";
+var segmentChipVariants = cva9(
+  "inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-sm font-medium leading-tight",
+  {
+    variants: {
+      kind: {
+        granted: "border-dashed border-teal-800 bg-bg-teal-subtle text-teal-300",
+        own: "border-border-warning bg-bg-warning-subtle text-text-warning",
+        pending: "border-dashed border-border-default bg-bg-secondary text-text-tertiary",
+        available: "border-border-subtle bg-transparent text-text-secondary"
+      }
+    },
+    defaultVariants: { kind: "granted" }
+  }
+);
+var kindIcons = {
+  granted: Link22,
+  own: KeyRound,
+  pending: Clock,
+  available: Plus
+};
+var SegmentChip = React51.forwardRef(
+  ({ kind, resource, icon, hideIcon = false, className, ...props }, ref) => {
+    const Icon = icon ?? kindIcons[kind ?? "granted"];
+    return /* @__PURE__ */ jsxs31("span", { ref, className: cn(segmentChipVariants({ kind }), className), ...props, children: [
+      !hideIcon && /* @__PURE__ */ jsx61(Icon, { className: "size-3.5 shrink-0 opacity-90", "aria-hidden": "true" }),
+      resource
+    ] });
+  }
+);
+SegmentChip.displayName = "SegmentChip";
+
+// src/components/connection-card.tsx
+import * as React52 from "react";
+import { AlertTriangle } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx62, jsxs as jsxs32 } from "react/jsx-runtime";
+var authLabels = { app: "App", oauth: "OAuth", token: "token" };
+var statusMeta = {
+  connected: { label: "Connected", badge: "success", dot: "success" },
+  error: { label: "Needs attention", badge: "destructive", dot: "danger" },
+  disconnected: { label: "Not connected", badge: "secondary", dot: "neutral" }
+};
+function monogram(name) {
+  return name.replace(/[^a-zA-Z0-9 ]/g, " ").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
+}
+var ConnectionCard = React52.forwardRef(
+  ({ name, scope, auth, status, glyph, statusLabel, grantedCount, action, access, className, ...props }, ref) => {
+    const meta = statusMeta[status];
+    const connected = status !== "disconnected";
+    return /* @__PURE__ */ jsxs32(Card, { ref, className: cn(status === "disconnected" && "border-dashed border-border-default", className), ...props, children: [
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-3 p-4", children: [
+        /* @__PURE__ */ jsx62(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg-elevated text-sm font-bold text-text-secondary",
+            children: glyph ?? monogram(name)
+          }
+        ),
+        /* @__PURE__ */ jsxs32("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx62("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
+          /* @__PURE__ */ jsxs32("div", { className: "mt-0.5 flex flex-wrap gap-1", children: [
+            /* @__PURE__ */ jsx62(Badge, { variant: "secondary", children: scope }),
+            /* @__PURE__ */ jsx62(Badge, { variant: "secondary", children: authLabels[auth] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx62("div", { className: "ml-auto shrink-0", children: connected ? /* @__PURE__ */ jsxs32(Badge, { variant: meta.badge, className: "gap-1.5", children: [
+          /* @__PURE__ */ jsx62(StatusDot, { status: meta.dot, size: "sm" }),
+          statusLabel ?? meta.label
+        ] }) : action })
+      ] }),
+      access && /* @__PURE__ */ jsxs32(
+        "div",
+        {
+          role: "note",
+          className: "flex items-start gap-2 border-t border-border-subtle bg-bg-warning-subtle px-4 py-2.5 text-xs font-medium text-text-warning",
+          children: [
+            /* @__PURE__ */ jsx62(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx62("span", { children: access })
+          ]
+        }
+      ),
+      (grantedCount !== void 0 || connected && action) && /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between border-t border-border-subtle px-4 py-3", children: [
+        /* @__PURE__ */ jsx62("span", { className: "text-sm text-text-secondary", children: grantedCount !== void 0 ? /* @__PURE__ */ jsxs32(Fragment3, { children: [
+          "Granted to ",
+          /* @__PURE__ */ jsx62("span", { className: "font-semibold text-text-primary", children: grantedCount }),
+          " ",
+          grantedCount === 1 ? "product" : "products"
+        ] }) : /* @__PURE__ */ jsx62("span", { className: "text-text-tertiary", children: "Not granted to any product yet" }) }),
+        connected && action
+      ] })
+    ] });
+  }
+);
+ConnectionCard.displayName = "ConnectionCard";
+
+// src/components/request-row.tsx
+import * as React53 from "react";
+import { Fragment as Fragment4, jsx as jsx63, jsxs as jsxs33 } from "react/jsx-runtime";
+function monogram2(name) {
+  return name.replace(/[^a-zA-Z0-9 ]/g, " ").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
+}
+var RequestRow = React53.forwardRef(
+  ({ surface, name, state: state2, glyph, subtitle, grantedResource, onApprove, onDeny, onRequest, action, className, ...props }, ref) => {
+    let controls = action;
+    if (controls === void 0) {
+      if (surface === "org" && state2 === "pending") {
+        controls = /* @__PURE__ */ jsxs33(Fragment4, { children: [
+          /* @__PURE__ */ jsx63(Button, { variant: "outline", size: "sm", onClick: onDeny, children: "Deny" }),
+          /* @__PURE__ */ jsx63(Button, { size: "sm", onClick: onApprove, children: "Approve" })
+        ] });
+      } else if (state2 === "available") {
+        controls = /* @__PURE__ */ jsx63(Button, { size: "sm", onClick: onRequest, children: "Request" });
+      } else if (state2 === "pending") {
+        controls = /* @__PURE__ */ jsxs33(Badge, { variant: "secondary", className: "gap-1.5", children: [
+          /* @__PURE__ */ jsx63(StatusDot, { status: "neutral", size: "sm" }),
+          "Pending"
+        ] });
+      } else if (state2 === "granted") {
+        controls = /* @__PURE__ */ jsx63(SegmentChip, { kind: "granted", resource: grantedResource ?? "a segment" });
+      }
+    }
+    return /* @__PURE__ */ jsxs33(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center gap-3 border-b border-border-subtle px-4 py-3 last:border-b-0",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx63(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg-elevated text-sm font-bold text-text-secondary",
+              children: glyph ?? monogram2(name)
+            }
+          ),
+          /* @__PURE__ */ jsxs33("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx63("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
+            subtitle && /* @__PURE__ */ jsx63("p", { className: "truncate text-xs text-text-tertiary", children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsx63("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: controls })
+        ]
+      }
+    );
+  }
+);
+RequestRow.displayName = "RequestRow";
 export {
   Accordion,
   AccordionContent,
@@ -3129,6 +3285,7 @@ export {
   CommandSeparator,
   CommandShortcut,
   ConfirmDialog,
+  ConnectionCard,
   ContextMenu,
   ContextMenuCheckboxItem,
   ContextMenuContent,
@@ -3244,9 +3401,11 @@ export {
   Progress,
   RadioGroup2 as RadioGroup,
   RadioGroupItem,
+  RequestRow,
   ScrollArea,
   ScrollBar,
   SectionIntro,
+  SegmentChip,
   Select,
   Separator4 as Separator,
   Sheet,
@@ -3295,6 +3454,7 @@ export {
   cn,
   isKnownExtensionIcon,
   navigationMenuTriggerStyle,
+  segmentChipVariants,
   statusDotVariants,
   toast,
   toggleVariants,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",