@ciridae/ui 0.3.6 → 0.3.7

package/dist/ciridae.css

@@ -5,7 +5,8 @@
 @import "./styled-system/styles.css";
 @import "tw-animate-css";
 
-@source "./**/*.{js,mjs}";
+/* Scan both development source exports and built package exports. */
+@source "./**/*.{js,mjs,ts,tsx}";
 
 @custom-variant dark (&:is(.dark *));
 

package/dist/components/blocks/feedback-detail-sheet.js

@@ -7,7 +7,7 @@ import { getFeedbackInitials } from "./feedback-tracking-types";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { Button } from "../ui/button";
 import { Card } from "../ui/card";
-import { Item, ItemContent, ItemGroup, ItemMedia, ItemTitle } from "../ui/item";
+import { Item, ItemContent, ItemGroup, ItemGroupItem, ItemMedia, ItemTitle } from "../ui/item";
 import { PropertyList, PropertyListItem, PropertyListLabel, PropertyListValue, } from "../ui/property-list";
 import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "../ui/sheet";
 function FeedbackDetailSheet({ feedback, onOpenChange, open }) {
@@ -33,7 +33,7 @@ function FeedbackDetailAttachments({ feedback }) {
     const attachments = feedback.attachments ?? [];
     if (attachments.length === 0)
         return null;
-    return (_jsxs("section", { className: "grid gap-2", children: [_jsx("div", { className: "text-meta text-muted-foreground", children: "Attachments" }), _jsx(ItemGroup, { children: attachments.map((attachment, index) => (_jsxs(Item, { size: "sm", variant: "outline", children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(PaperclipIcon, {}) }), _jsx(ItemContent, { children: _jsx(ItemTitle, { children: attachment.url ? (_jsx("a", { className: "underline-offset-4 hover:underline", href: attachment.url, children: attachment.name })) : (attachment.name) }) })] }, getAttachmentKey(attachment, index)))) })] }));
+    return (_jsxs("section", { className: "grid gap-2", children: [_jsx("div", { className: "text-meta text-muted-foreground", children: "Attachments" }), _jsx(ItemGroup, { children: attachments.map((attachment, index) => (_jsx(ItemGroupItem, { children: _jsxs(Item, { size: "sm", variant: "outline", children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(PaperclipIcon, {}) }), _jsx(ItemContent, { children: _jsx(ItemTitle, { children: attachment.url ? (_jsx("a", { className: "underline-offset-4 hover:underline", href: attachment.url, children: attachment.name })) : (attachment.name) }) })] }) }, getAttachmentKey(attachment, index)))) })] }));
 }
 function getAttachmentKey(attachment, index) {
     return `${attachment.url ?? attachment.name}-${index}`;

package/dist/components/blocks/feedback-user-detail.js

@@ -6,7 +6,7 @@ import { FeedbackTypeBadge } from "./feedback-type-badge";
 import { Button } from "../ui/button";
 import { Card } from "../ui/card";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";
-import { Item, ItemContent, ItemGroup, ItemMedia, ItemTitle } from "../ui/item";
+import { Item, ItemContent, ItemGroup, ItemGroupItem, ItemMedia, ItemTitle } from "../ui/item";
 import { PropertyList, PropertyListItem, PropertyListLabel, PropertyListValue, } from "../ui/property-list";
 function FeedbackUserDetail({ activityLabel = "Activity", activitySlot, feedback, onBack, }) {
     if (!feedback)
@@ -38,7 +38,7 @@ function FeedbackUserAttachments({ feedback }) {
     const attachments = feedback.attachments ?? [];
     if (attachments.length === 0)
         return null;
-    return (_jsxs("section", { className: "grid gap-2", children: [_jsx("div", { className: "text-meta text-muted-foreground", children: "Attachments" }), _jsx(ItemGroup, { children: attachments.map((attachment, index) => (_jsxs(Item, { size: "sm", variant: "outline", children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(PaperclipIcon, {}) }), _jsx(ItemContent, { children: _jsx(ItemTitle, { children: getAttachmentTitle(attachment) }) })] }, getAttachmentKey(attachment, index)))) })] }));
+    return (_jsxs("section", { className: "grid gap-2", children: [_jsx("div", { className: "text-meta text-muted-foreground", children: "Attachments" }), _jsx(ItemGroup, { children: attachments.map((attachment, index) => (_jsx(ItemGroupItem, { children: _jsxs(Item, { size: "sm", variant: "outline", children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(PaperclipIcon, {}) }), _jsx(ItemContent, { children: _jsx(ItemTitle, { children: getAttachmentTitle(attachment) }) })] }) }, getAttachmentKey(attachment, index)))) })] }));
 }
 function getAttachmentKey(attachment, index) {
     return `${attachment.url ?? attachment.name}-${index}`;

package/dist/components/blocks/feedback-user-list.js

@@ -4,7 +4,7 @@ import { formatFeedbackTimestamp } from "./feedback-date-format";
 import { FeedbackStatusBadge } from "./feedback-status-badge";
 import { FeedbackTypeBadge } from "./feedback-type-badge";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";
-import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemTitle, } from "../ui/item";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemGroupItem, ItemTitle, } from "../ui/item";
 import { Skeleton } from "../ui/skeleton";
 import { cn } from "../../lib/utils";
 function FeedbackUserList({ isLoading = false, items, onSelectFeedback, selectedId, }) {
@@ -15,7 +15,7 @@ function FeedbackUserList({ isLoading = false, items, onSelectFeedback, selected
     return (_jsx(ItemGroup, { className: "gap-2", children: items.map((item) => (_jsx(FeedbackUserListItem, { item: item, onSelectFeedback: onSelectFeedback, selected: item.id === selectedId }, item.id))) }));
 }
 function FeedbackUserListItem({ item, onSelectFeedback, selected, }) {
-    return (_jsx(Item, { "aria-current": selected ? "true" : undefined, asChild: true, className: cn("w-full cursor-pointer text-left", selected && "border-foreground/30 bg-muted/50"), size: "sm", variant: "outline", children: _jsx("button", { onClick: () => onSelectFeedback?.(item), type: "button", children: _jsx(FeedbackUserListItemContent, { item: item }) }) }));
+    return (_jsx(ItemGroupItem, { children: _jsx(Item, { "aria-current": selected ? "true" : undefined, asChild: true, className: cn("w-full cursor-pointer text-left", selected && "border-foreground/30 bg-muted/50"), size: "sm", variant: "outline", children: _jsx("button", { onClick: () => onSelectFeedback?.(item), type: "button", children: _jsx(FeedbackUserListItemContent, { item: item }) }) }) }));
 }
 function FeedbackUserListItemContent({ item }) {
     return (_jsxs(_Fragment, { children: [_jsxs(ItemContent, { className: "min-w-0", children: [_jsx(ItemTitle, { className: "max-w-full truncate", children: item.subject }), _jsx(ItemDescription, { className: "line-clamp-1", children: item.description })] }), _jsxs(ItemActions, { className: "shrink-0", children: [_jsx(FeedbackTypeBadge, { type: item.type }), _jsx(FeedbackStatusBadge, { status: item.status })] }), _jsxs(ItemFooter, { children: [_jsx(FeedbackListDate, { label: "Submitted", value: item.submittedAt }), item.updatedAt ? _jsx(FeedbackListDate, { label: "Updated", value: item.updatedAt }) : null] })] }));

package/dist/components/ui/combobox.d.ts

@@ -3,9 +3,10 @@ import { Combobox as ComboboxPrimitive } from "@base-ui/react";
 declare const Combobox: typeof ComboboxPrimitive.Root;
 declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): React.JSX.Element;
 declare function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): React.JSX.Element;
-declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: ComboboxPrimitive.Input.Props & {
+declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, triggerAriaLabel, ...props }: ComboboxPrimitive.Input.Props & {
     showTrigger?: boolean;
     showClear?: boolean;
+    triggerAriaLabel?: string;
 }): React.JSX.Element;
 declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): React.JSX.Element;
 declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): React.JSX.Element;

package/dist/components/ui/combobox.js

@@ -15,8 +15,8 @@ function ComboboxTrigger({ className, children, ...props }) {
 function ComboboxClear({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon-xs" }), className: cn(className), ...props, children: _jsx(XIcon, { className: "pointer-events-none" }) }));
 }
-function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
-    return (_jsxs(InputGroup, { className: cn("w-auto", className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", asChild: true, "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled, children: _jsx(ComboboxTrigger, {}) })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
+function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, triggerAriaLabel = "Toggle options", ...props }) {
+    return (_jsxs(InputGroup, { className: cn("w-auto", className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", asChild: true, "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled, children: _jsx(ComboboxTrigger, { "aria-label": triggerAriaLabel }) })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
 }
 function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
     return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-(--control-height-sm) *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none", className), ...props }) }) }));

package/dist/components/ui/file-upload-field-parts.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FileIcon, PaperclipIcon, UploadCloudIcon, XIcon } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Button } from "./button";
-import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle, } from "./item";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemGroupItem, ItemMedia, ItemTitle, } from "./item";
 function FileUploadCompactControl({ acceptedFileTypes, disabled, dragActive, error, files, inputId, inputRef, maxAttachments, onAddFiles, onDragActiveChange, }) {
     const isAtLimit = files.length >= maxAttachments;
     return (_jsxs("div", { "data-drag-active": dragActive, className: cn("flex items-center gap-3 rounded-md border bg-card px-3 py-2 transition-colors", "data-[drag-active=true]:border-ring data-[drag-active=true]:bg-muted/50", disabled && "cursor-not-allowed opacity-60"), onDragEnter: (event) => handleDragEnter(event, disabled, onDragActiveChange), onDragLeave: (event) => handleDragLeave(event, onDragActiveChange), onDragOver: (event) => event.preventDefault(), onDrop: (event) => handleDrop(event, { disabled, onAddFiles, onDragActiveChange }), children: [_jsx("input", { accept: acceptedFileTypes, "aria-describedby": error ? `${inputId}-error` : undefined, className: "sr-only", disabled: disabled || isAtLimit, id: inputId, multiple: true, onChange: (event) => handleFileInputChange(event, onAddFiles), ref: inputRef, type: "file" }), _jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx(PaperclipIcon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium", children: files.length > 0 ? `${files.length} attached` : "Attach files" }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: "Files stay in the browser until submit." })] })] }), _jsx(Button, { disabled: disabled || isAtLimit, onClick: () => inputRef.current?.click(), size: "sm", type: "button", variant: "outline", children: "Attach" })] }));
@@ -18,7 +18,7 @@ function FileUploadDropZoneContent({ disabled, files, inputRef, maxAttachments,
 function FileUploadList({ disabled, files, onRemoveFile, }) {
     if (files.length === 0)
         return null;
-    return (_jsx(ItemGroup, { className: "gap-2", children: files.map((file, index) => (_jsxs(Item, { size: "sm", variant: "outline", children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(FileIcon, { className: "size-4 text-muted-foreground" }) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { className: "max-w-full break-all", children: file.name }), _jsx(ItemDescription, { className: "font-mono tabular-nums", children: formatFileSize(file.size) })] }), _jsx(ItemActions, { children: _jsx(Button, { "aria-label": `Remove ${file.name}`, disabled: disabled, onClick: () => onRemoveFile(index), size: "icon-sm", type: "button", variant: "ghost", children: _jsx(XIcon, {}) }) })] }, `${file.name}-${file.size}-${index}`))) }));
+    return (_jsx(ItemGroup, { className: "gap-2", children: files.map((file, index) => (_jsx(ItemGroupItem, { children: _jsxs(Item, { size: "sm", variant: "outline", children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(FileIcon, { className: "size-4 text-muted-foreground" }) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { className: "max-w-full break-all", children: file.name }), _jsx(ItemDescription, { className: "font-mono tabular-nums", children: formatFileSize(file.size) })] }), _jsx(ItemActions, { children: _jsx(Button, { "aria-label": `Remove ${file.name}`, disabled: disabled, onClick: () => onRemoveFile(index), size: "icon-sm", type: "button", variant: "ghost", children: _jsx(XIcon, {}) }) })] }) }, `${file.name}-${file.size}-${index}`))) }));
 }
 function handleDragEnter(event, disabled, onDragActiveChange) {
     event.preventDefault();

package/dist/components/ui/item.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { Separator } from "./separator";
-declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemGroup({ className, role, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemGroupItem({ role, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
 declare const itemVariants: (props?: ({
     variant?: "default" | "muted" | "outline" | null | undefined;
@@ -20,4 +21,4 @@ declare function ItemDescription({ className, ...props }: React.ComponentProps<"
 declare function ItemActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function ItemHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function ItemFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, };
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemGroupItem, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, };

package/dist/components/ui/item.js

@@ -3,8 +3,11 @@ import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { cn } from "../../lib/utils";
 import { Separator } from "./separator";
-function ItemGroup({ className, ...props }) {
-    return (_jsx("div", { role: "list", "data-slot": "item-group", className: cn("group/item-group flex flex-col", className), ...props }));
+function ItemGroup({ className, role = "list", ...props }) {
+    return (_jsx("div", { "data-slot": "item-group", role: role, className: cn("group/item-group flex flex-col", className), ...props }));
+}
+function ItemGroupItem({ role = "listitem", ...props }) {
+    return _jsx("div", { "data-slot": "item-group-item", role: role, ...props });
 }
 function ItemSeparator({ className, ...props }) {
     return (_jsx(Separator, { "data-slot": "item-separator", orientation: "horizontal", className: cn("my-0", className), ...props }));
@@ -63,4 +66,4 @@ function ItemHeader({ className, ...props }) {
 function ItemFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "item-footer", className: cn("flex basis-full items-center justify-between gap-2", className), ...props }));
 }
-export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, };
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemGroupItem, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, };

package/dist/styles.css

@@ -5,7 +5,8 @@
 @import "./styled-system/styles.css";
 @import "tw-animate-css";
 
-@source "./**/*.{js,mjs}";
+/* Scan both development source exports and built package exports. */
+@source "./**/*.{js,mjs,ts,tsx}";
 
 @custom-variant dark (&:is(.dark *));
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui",
-	"version": "0.3.6",
+	"version": "0.3.7",
 	"type": "module",
 	"private": false,
 	"repository": {
@@ -59,9 +59,19 @@
 		"README.md"
 	],
 	"peerDependencies": {
+		"@types/react": ">=18",
+		"@types/react-dom": ">=18",
 		"react": ">=18",
 		"react-dom": ">=18"
 	},
+	"peerDependenciesMeta": {
+		"@types/react": {
+			"optional": true
+		},
+		"@types/react-dom": {
+			"optional": true
+		}
+	},
 	"dependencies": {
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "6.3.1",