@lessly/ui 0.10.0 → 0.12.0

package/dist/index.d.ts

@@ -1094,8 +1094,8 @@ interface RequestRowProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, '
 }
 declare const RequestRow: React$1.ForwardRefExoticComponent<RequestRowProps & React$1.RefAttributes<HTMLDivElement>>;
 
-interface FeedbackWidgetLabels {
-    /** Floating trigger button + its aria-label. */
+interface FeedbackButtonLabels {
+    /** Inline trigger button label + its aria-label. */
     trigger: string;
     /** Heading shown above the form. */
     title: string;
@@ -1110,9 +1110,9 @@ interface FeedbackWidgetLabels {
     /** Message shown after a failed submit. */
     error: string;
 }
-interface FeedbackWidgetProps {
+interface FeedbackButtonProps {
     /**
-     * Called with the entered feedback when the form is submitted. The widget is
+     * Called with the entered feedback when the form is submitted. The button is
      * presentational: it knows nothing about APIs, auth, or routing — the parent
      * decides what to do with the data. Rejecting shows the error state.
      */
@@ -1121,10 +1121,42 @@ interface FeedbackWidgetProps {
         details: string;
     }) => Promise<void>;
     /** Override any of the default copy. */
-    labels?: Partial<FeedbackWidgetLabels>;
-    /** Merged onto the fixed positioning wrapper (e.g. to reposition the button). */
+    labels?: Partial<FeedbackButtonLabels>;
+    /** Merged onto the inline trigger button (e.g. to align it with neighbouring top-bar controls). */
     className?: string;
 }
-declare function FeedbackWidget({ onSubmit, labels, className }: FeedbackWidgetProps): React$1.JSX.Element;
+declare function FeedbackButton({ onSubmit, labels, className }: FeedbackButtonProps): React$1.JSX.Element;
 
-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, Col, type ColProps, 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, FeedbackWidget, type FeedbackWidgetLabels, type FeedbackWidgetProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, GridOverlay, type GridOverlayProps, type GridProps, 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, type Responsive, ScrollArea, ScrollBar, SectionIntro, type SectionIntroProps, SegmentChip, type SegmentChipProps, Select, type SelectOption, type SelectProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarBackHeader, type SidebarBackHeaderProps, SidebarNav, SidebarNavLink, type SidebarNavLinkProps, type SidebarNavProps, SidebarProductHeader, type SidebarProductHeaderProps, 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 };
+interface CreateProductWindowOrganization {
+    id: string;
+    name: string;
+}
+interface CreateProductWindowProduct {
+    id: string;
+    name: string;
+    slug: string;
+}
+type CreateProductSubmit = {
+    name: string;
+    organizationId: string;
+} | {
+    name: string;
+    organizationName: string;
+};
+interface CreateProductWindowProps {
+    organizations: CreateProductWindowOrganization[];
+    /** null => create-new-org mode */
+    selectedOrgId: string | null;
+    /** products of the selected org */
+    products: CreateProductWindowProduct[];
+    productsLoading?: boolean;
+    submitting?: boolean;
+    error?: string | null;
+    /** null when "+ Create new organization" chosen */
+    onOrganizationChange: (orgId: string | null) => void;
+    onEnterProduct: (product: CreateProductWindowProduct) => void;
+    onSubmit: (data: CreateProductSubmit) => void;
+}
+declare function CreateProductWindow({ organizations, selectedOrgId, products, productsLoading, submitting, error, onOrganizationChange, onEnterProduct, onSubmit, }: CreateProductWindowProps): React$1.JSX.Element;
+
+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, Col, type ColProps, 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, type CreateProductSubmit, CreateProductWindow, type CreateProductWindowOrganization, type CreateProductWindowProduct, type CreateProductWindowProps, 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, FeedbackButton, type FeedbackButtonLabels, type FeedbackButtonProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, GridOverlay, type GridOverlayProps, type GridProps, 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, type Responsive, ScrollArea, ScrollBar, SectionIntro, type SectionIntroProps, SegmentChip, type SegmentChipProps, Select, type SelectOption, type SelectProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarBackHeader, type SidebarBackHeaderProps, SidebarNav, SidebarNavLink, type SidebarNavLinkProps, type SidebarNavProps, SidebarProductHeader, type SidebarProductHeaderProps, 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

@@ -3627,7 +3627,7 @@ var RequestRow = React57.forwardRef(
 );
 RequestRow.displayName = "RequestRow";
 
-// src/components/feedback-widget.tsx
+// src/components/feedback-button.tsx
 import * as React58 from "react";
 import { MessageSquare, Loader2 as Loader22, CheckCircle2 } from "lucide-react";
 import { jsx as jsx69, jsxs as jsxs36 } from "react/jsx-runtime";
@@ -3642,7 +3642,7 @@ var DEFAULT_LABELS = {
   success: "Thanks! Your feedback was sent.",
   error: "Couldn't send feedback. Please try again."
 };
-function FeedbackWidget({ onSubmit, labels, className }) {
+function FeedbackButton({ onSubmit, labels, className }) {
   const l = { ...DEFAULT_LABELS, ...labels };
   const uid = React58.useId();
   const titleId = `${uid}-title`;
@@ -3678,11 +3678,11 @@ function FeedbackWidget({ onSubmit, labels, className }) {
     }
   };
   return /* @__PURE__ */ jsxs36(Popover, { open, onOpenChange: changeOpen, children: [
-    /* @__PURE__ */ jsx69("div", { className: cn("fixed bottom-4 right-4 z-50", className), children: /* @__PURE__ */ jsx69(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs36(Button, { "aria-label": l.trigger, children: [
+    /* @__PURE__ */ jsx69(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs36(Button, { variant: "ghost", size: "sm", "aria-label": l.trigger, className, children: [
       /* @__PURE__ */ jsx69(MessageSquare, { className: "size-4", "aria-hidden": "true" }),
       l.trigger
-    ] }) }) }),
-    /* @__PURE__ */ jsx69(PopoverContent, { align: "end", side: "top", className: "w-80", children: status === "success" ? /* @__PURE__ */ jsxs36("div", { className: "flex flex-col items-center gap-3 py-2 text-center", children: [
+    ] }) }),
+    /* @__PURE__ */ jsx69(PopoverContent, { align: "end", side: "bottom", className: "w-80", children: status === "success" ? /* @__PURE__ */ jsxs36("div", { className: "flex flex-col items-center gap-3 py-2 text-center", children: [
       /* @__PURE__ */ jsx69(CheckCircle2, { className: "size-8 text-text-success", "aria-hidden": "true" }),
       /* @__PURE__ */ jsx69("p", { role: "status", className: "text-sm text-text-primary", children: l.success }),
       /* @__PURE__ */ jsx69(Button, { variant: "outline", size: "sm", onClick: () => changeOpen(false), children: "Close" })
@@ -3736,6 +3736,111 @@ function FeedbackWidget({ onSubmit, labels, className }) {
     ] }) })
   ] });
 }
+
+// src/components/create-product-window.tsx
+import { useForm } from "react-hook-form";
+import { jsx as jsx70, jsxs as jsxs37 } from "react/jsx-runtime";
+var CREATE_ORG_VALUE = "__create_new_org__";
+function CreateProductWindow({
+  organizations,
+  selectedOrgId,
+  products,
+  productsLoading,
+  submitting,
+  error,
+  onOrganizationChange,
+  onEnterProduct,
+  onSubmit
+}) {
+  const form = useForm({
+    defaultValues: { productName: "", organizationName: "" }
+  });
+  const createOrgMode = selectedOrgId === null || organizations.length === 0;
+  const options = [
+    ...organizations.map((org) => ({ value: org.id, label: org.name })),
+    { value: CREATE_ORG_VALUE, label: "+ Create new organization" }
+  ];
+  function handleOrgChange(value) {
+    onOrganizationChange(value === CREATE_ORG_VALUE ? null : value);
+  }
+  const handleSubmit = form.handleSubmit((values) => {
+    const name = values.productName.trim();
+    if (createOrgMode) {
+      onSubmit({ name, organizationName: values.organizationName.trim() });
+    } else {
+      onSubmit({ name, organizationId: selectedOrgId });
+    }
+  });
+  const showSelect = organizations.length > 0;
+  return /* @__PURE__ */ jsxs37("div", { className: "flex w-full max-w-md flex-col gap-6", children: [
+    showSelect && /* @__PURE__ */ jsxs37("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx70("span", { className: "text-sm font-medium leading-none text-text-primary", children: "Organization" }),
+      /* @__PURE__ */ jsx70(
+        Select,
+        {
+          "data-testid": "create-product-org-select",
+          "aria-label": "Organization",
+          value: createOrgMode ? CREATE_ORG_VALUE : selectedOrgId,
+          onValueChange: handleOrgChange,
+          options,
+          optionTestId: (value) => value === CREATE_ORG_VALUE ? "create-product-org-option-new" : `create-product-org-option-${value}`,
+          placeholder: "Select an organization\u2026"
+        }
+      )
+    ] }),
+    !createOrgMode && /* @__PURE__ */ jsxs37("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx70("span", { className: "text-sm font-medium leading-none text-text-primary", children: "Products" }),
+      productsLoading ? /* @__PURE__ */ jsx70("p", { className: "text-sm text-text-tertiary", children: "Loading products\u2026" }) : products.length === 0 ? /* @__PURE__ */ jsx70("p", { className: "text-sm text-text-tertiary", children: "No products yet." }) : /* @__PURE__ */ jsx70("ul", { className: "flex flex-col gap-1", children: products.map((product) => /* @__PURE__ */ jsx70("li", { children: /* @__PURE__ */ jsxs37(
+        "button",
+        {
+          type: "button",
+          onClick: () => onEnterProduct(product),
+          className: cn(
+            "flex w-full items-center justify-between rounded-md border border-border-default bg-bg-primary px-3 py-2 text-left text-sm text-text-primary hover:bg-bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus"
+          ),
+          children: [
+            /* @__PURE__ */ jsx70("span", { className: "truncate", children: product.name }),
+            /* @__PURE__ */ jsx70("span", { className: "ml-2 truncate text-text-tertiary", children: product.slug })
+          ]
+        }
+      ) }, product.id)) })
+    ] }),
+    /* @__PURE__ */ jsx70(Form, { ...form, children: /* @__PURE__ */ jsxs37("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", noValidate: true, children: [
+      createOrgMode && /* @__PURE__ */ jsx70(
+        FormField,
+        {
+          control: form.control,
+          name: "organizationName",
+          rules: {
+            validate: (value) => value.trim().length > 0 || "Organization name is required"
+          },
+          render: ({ field }) => /* @__PURE__ */ jsxs37(FormItem, { children: [
+            /* @__PURE__ */ jsx70(FormLabel, { children: "Organization name" }),
+            /* @__PURE__ */ jsx70(FormControl, { children: /* @__PURE__ */ jsx70(Input, { placeholder: "Acme Inc.", ...field }) }),
+            /* @__PURE__ */ jsx70(FormMessage, {})
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx70(
+        FormField,
+        {
+          control: form.control,
+          name: "productName",
+          rules: {
+            validate: (value) => value.trim().length > 0 || "Product name is required"
+          },
+          render: ({ field }) => /* @__PURE__ */ jsxs37(FormItem, { children: [
+            /* @__PURE__ */ jsx70(FormLabel, { children: "Product name" }),
+            /* @__PURE__ */ jsx70(FormControl, { children: /* @__PURE__ */ jsx70(Input, { placeholder: "My product", ...field }) }),
+            /* @__PURE__ */ jsx70(FormMessage, {})
+          ] })
+        }
+      ),
+      error && /* @__PURE__ */ jsx70(InlineError, { children: error }),
+      /* @__PURE__ */ jsx70(Button, { type: "submit", disabled: submitting, children: "Create product" })
+    ] }) })
+  ] });
+}
 export {
   Accordion,
   AccordionContent,
@@ -3815,6 +3920,7 @@ export {
   ContextMenuSubTrigger,
   ContextMenuTrigger,
   CopyButton,
+  CreateProductWindow,
   DatePicker,
   Dialog,
   DialogClose,
@@ -3855,7 +3961,7 @@ export {
   EmptyState,
   ExtensionIcon,
   ExtensionLink,
-  FeedbackWidget,
+  FeedbackButton,
   Form,
   FormControl,
   FormDescription,

package/package.json

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