@lessly/ui 0.7.2 → 0.9.0

package/dist/index.d.ts

@@ -87,6 +87,7 @@ declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<Omit<Dro
 declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
+    variant?: "default" | "destructive";
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -122,9 +123,12 @@ interface SelectProps {
     disabled?: boolean;
     className?: string;
     'data-testid'?: string;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
     optionTestId?: (value: string) => string;
 }
-declare function Select({ value, onValueChange, options, placeholder, disabled, className, 'data-testid': testId, optionTestId, }: SelectProps): React$1.JSX.Element;
+declare function Select({ value, onValueChange, options, placeholder, disabled, className, 'data-testid': testId, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, optionTestId, }: SelectProps): React$1.JSX.Element;
 
 interface SwitchProps {
     checked: boolean;
@@ -1053,4 +1057,37 @@ interface RequestRowProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, '
 }
 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, 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, 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, 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 FeedbackWidgetLabels {
+    /** Floating trigger button + its aria-label. */
+    trigger: string;
+    /** Heading shown above the form. */
+    title: string;
+    /** Label for the Title input. */
+    titleField: string;
+    /** Label for the Details textarea. */
+    detailsField: string;
+    /** Submit button. */
+    submit: string;
+    /** Message shown after a successful submit. */
+    success: string;
+    /** Message shown after a failed submit. */
+    error: string;
+}
+interface FeedbackWidgetProps {
+    /**
+     * Called with the entered feedback when the form is submitted. The widget is
+     * presentational: it knows nothing about APIs, auth, or routing — the parent
+     * decides what to do with the data. Rejecting shows the error state.
+     */
+    onSubmit: (data: {
+        title: string;
+        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). */
+    className?: string;
+}
+declare function FeedbackWidget({ onSubmit, labels, className }: FeedbackWidgetProps): 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, 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

@@ -222,13 +222,14 @@ var DropdownMenuContent = React4.forwardRef(({ className, sideOffset = 4, ...pro
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React4.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx4(
+var DropdownMenuItem = React4.forwardRef(({ className, inset, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx4(
   DropdownMenuPrimitive.Item,
   {
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-bg-secondary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
+      variant === "destructive" && "text-text-danger focus:bg-bg-danger-subtle focus:text-text-danger",
       className
     ),
     ...props
@@ -347,6 +348,9 @@ function Select({
   disabled,
   className,
   "data-testid": testId,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
   optionTestId
 }) {
   const selected = options.find((o) => o.value === value);
@@ -356,6 +360,9 @@ function Select({
       {
         type: "button",
         "data-testid": testId,
+        id,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
         disabled,
         className: cn(
           "flex h-10 w-full items-center justify-between rounded-md border border-border-default bg-bg-primary px-3 text-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:cursor-not-allowed disabled:opacity-50",
@@ -3558,6 +3565,116 @@ var RequestRow = React57.forwardRef(
   }
 );
 RequestRow.displayName = "RequestRow";
+
+// src/components/feedback-widget.tsx
+import * as React58 from "react";
+import { MessageSquare, Loader2 as Loader22, CheckCircle2 } from "lucide-react";
+import { jsx as jsx68, jsxs as jsxs35 } from "react/jsx-runtime";
+var TITLE_MAX = 256;
+var DETAILS_MAX = 65536;
+var DEFAULT_LABELS = {
+  trigger: "Feedback",
+  title: "Send feedback",
+  titleField: "Title",
+  detailsField: "Details",
+  submit: "Send feedback",
+  success: "Thanks! Your feedback was sent.",
+  error: "Couldn't send feedback. Please try again."
+};
+function FeedbackWidget({ onSubmit, labels, className }) {
+  const l = { ...DEFAULT_LABELS, ...labels };
+  const uid = React58.useId();
+  const titleId = `${uid}-title`;
+  const detailsId = `${uid}-details`;
+  const titleErrId = `${uid}-title-error`;
+  const detailsErrId = `${uid}-details-error`;
+  const [open, setOpen] = React58.useState(false);
+  const [status, setStatus] = React58.useState("idle");
+  const [title, setTitle] = React58.useState("");
+  const [details, setDetails] = React58.useState("");
+  const titleTooLong = title.length > TITLE_MAX;
+  const detailsTooLong = details.length > DETAILS_MAX;
+  const titleEmpty = title.trim().length === 0;
+  const detailsEmpty = details.trim().length === 0;
+  const valid = !titleEmpty && !detailsEmpty && !titleTooLong && !detailsTooLong;
+  const submitting = status === "submitting";
+  const changeOpen = (next) => {
+    if (submitting) return;
+    setOpen(next);
+    if (!next) setStatus("idle");
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!valid || submitting) return;
+    setStatus("submitting");
+    try {
+      await onSubmit({ title, details });
+      setStatus("success");
+      setTitle("");
+      setDetails("");
+    } catch {
+      setStatus("error");
+    }
+  };
+  return /* @__PURE__ */ jsxs35(Popover, { open, onOpenChange: changeOpen, children: [
+    /* @__PURE__ */ jsx68("div", { className: cn("fixed bottom-4 right-4 z-50", className), children: /* @__PURE__ */ jsx68(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs35(Button, { "aria-label": l.trigger, children: [
+      /* @__PURE__ */ jsx68(MessageSquare, { className: "size-4", "aria-hidden": "true" }),
+      l.trigger
+    ] }) }) }),
+    /* @__PURE__ */ jsx68(PopoverContent, { align: "end", side: "top", className: "w-80", children: status === "success" ? /* @__PURE__ */ jsxs35("div", { className: "flex flex-col items-center gap-3 py-2 text-center", children: [
+      /* @__PURE__ */ jsx68(CheckCircle2, { className: "size-8 text-text-success", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx68("p", { role: "status", className: "text-sm text-text-primary", children: l.success }),
+      /* @__PURE__ */ jsx68(Button, { variant: "outline", size: "sm", onClick: () => changeOpen(false), children: "Close" })
+    ] }) : /* @__PURE__ */ jsxs35("form", { onSubmit: handleSubmit, className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx68("p", { className: "text-sm font-medium text-text-primary", children: l.title }),
+      /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx68(Label2, { htmlFor: titleId, children: l.titleField }),
+        /* @__PURE__ */ jsx68(
+          Input,
+          {
+            id: titleId,
+            value: title,
+            onChange: (e) => setTitle(e.target.value),
+            disabled: submitting,
+            "aria-invalid": titleTooLong || void 0,
+            "aria-describedby": titleTooLong ? titleErrId : void 0
+          }
+        ),
+        titleTooLong && /* @__PURE__ */ jsxs35("p", { id: titleErrId, className: "text-xs text-text-danger", children: [
+          l.titleField,
+          " must be ",
+          TITLE_MAX,
+          " characters or fewer."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx68(Label2, { htmlFor: detailsId, children: l.detailsField }),
+        /* @__PURE__ */ jsx68(
+          Textarea,
+          {
+            id: detailsId,
+            value: details,
+            onChange: (e) => setDetails(e.target.value),
+            disabled: submitting,
+            "aria-invalid": detailsTooLong || void 0,
+            "aria-describedby": detailsTooLong ? detailsErrId : void 0
+          }
+        ),
+        detailsTooLong && /* @__PURE__ */ jsxs35("p", { id: detailsErrId, className: "text-xs text-text-danger", children: [
+          l.detailsField,
+          " must be ",
+          DETAILS_MAX,
+          " characters or fewer."
+        ] })
+      ] }),
+      status === "error" && /* @__PURE__ */ jsx68(InlineError, { children: l.error }),
+      /* @__PURE__ */ jsxs35(Button, { type: "submit", disabled: !valid || submitting, children: [
+        submitting && /* @__PURE__ */ jsx68(Loader22, { className: "size-4 animate-spin", "aria-hidden": "true" }),
+        l.submit
+      ] })
+    ] }) })
+  ] });
+}
 export {
   Accordion,
   AccordionContent,
@@ -3677,6 +3794,7 @@ export {
   EmptyState,
   ExtensionIcon,
   ExtensionLink,
+  FeedbackWidget,
   Form,
   FormControl,
   FormDescription,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "0.7.2",
+  "version": "0.9.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",
@@ -121,7 +121,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.63.0",
-    "vite": "^5.4.21",
+    "vite": "^6.4.3",
     "vitest": "^3.0.5"
   }
 }