@signalflare-ai/ui 0.5.0

package/dist/dropdown-J5T4pHaR.js

@@ -0,0 +1,202 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { n as useLinkComponent } from "./link-provider-BUZKXaNE.js";
+import { t as Checkbox } from "./checkbox-CPX7lBaU.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CaretRightIcon, CheckIcon } from "@phosphor-icons/react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/dropdown/dropdown.tsx
+/** Dropdown item variant definitions (default and danger styles). */
+var SF_DROPDOWN_VARIANTS = { variant: {
+	default: {
+		classes: "",
+		description: "Default dropdown item appearance"
+	},
+	danger: {
+		classes: "text-sf-danger data-highlighted:bg-sf-danger/5 data-highlighted:text-sf-danger",
+		description: "Destructive action item"
+	}
+} };
+var SF_DROPDOWN_DEFAULT_VARIANTS = { variant: "default" };
+function dropdownVariants({ variant = SF_DROPDOWN_DEFAULT_VARIANTS.variant } = {}) {
+	return cn(SF_DROPDOWN_VARIANTS.variant[variant].classes);
+}
+var DropdownMenuSubTrigger = React$1.forwardRef(({ className, inset, children, icon: IconComponent, ...props }, ref) => /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+	ref,
+	className: cn("flex cursor-default items-center rounded-sm text-base outline-hidden select-none", "px-2 py-1.5", "focus:bg-sf-tint", "data-[state=open]:bg-sf-tint", inset && "pl-8", className),
+	...props,
+	children: [
+		IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "mr-2 h-4 w-4" }),
+		children,
+		/* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-auto h-4 w-4" })
+	]
+}));
+DropdownMenuSubTrigger.displayName = Menu.SubmenuTrigger.displayName;
+var DropdownMenuContent = React$1.forwardRef(({ className, sideOffset = 8, children, ...props }, ref) => /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+	ref,
+	sideOffset,
+	...props,
+	children: /* @__PURE__ */ jsx(Menu.Popup, {
+		className: cn("overflow-hidden bg-sf-control text-sf-default", "rounded-lg shadow-lg ring ring-sf-line", "min-w-36 p-1.5", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
+		children
+	})
+}) }));
+var renderIconNode = (IconComponent) => {
+	if (!IconComponent) return null;
+	if (React$1.isValidElement(IconComponent)) return IconComponent;
+	return /* @__PURE__ */ jsx(IconComponent, { className: "mr-2 h-4 w-4" });
+};
+var DropdownMenuItem = React$1.forwardRef(({ className, inset, icon: IconComponent, children, selected, render, href, variant = "default", ...props }, ref) => {
+	const LinkComponent = useLinkComponent();
+	const content = React$1.useMemo(() => {
+		const innerContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			IconComponent && renderIconNode(IconComponent),
+			children,
+			selected && /* @__PURE__ */ jsx("span", {
+				className: "inline-flex",
+				children: /* @__PURE__ */ jsx(CheckIcon, {})
+			})
+		] });
+		if (!href) return innerContent;
+		const isExternal = /^(https?:)?\/\//.test(href);
+		const styles = cn("flex items-center", variant === "danger" && "text-sf-danger data-highlighted:bg-sf-danger/5 data-highlighted:text-sf-danger");
+		if (isExternal) return /* @__PURE__ */ jsx("a", {
+			className: cn(styles, "w-full text-inherit! no-underline!"),
+			href,
+			target: "_blank",
+			rel: "noreferrer",
+			onClick: (e) => e.stopPropagation(),
+			children: innerContent
+		});
+		return /* @__PURE__ */ jsx(LinkComponent, {
+			className: cn(styles, "w-full text-inherit! no-underline!"),
+			href,
+			to: href,
+			onClick: (e) => e.stopPropagation(),
+			children: innerContent
+		});
+	}, [
+		href,
+		IconComponent,
+		children,
+		selected,
+		variant,
+		LinkComponent
+	]);
+	const useRenderProp = href || render;
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		ref,
+		className: cn("relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none focus:text-sf-default data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-sf-overlay", inset && "pl-8", dropdownVariants({ variant }), className),
+		render: href ? content : render,
+		...props,
+		children: useRenderProp ? void 0 : children
+	});
+});
+DropdownMenuItem.displayName = Menu.Item.displayName;
+var DropdownMenuCheckboxItem = React$1.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+	ref,
+	className: cn("relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-base outline-hidden transition-colors select-none focus:bg-sf-tint focus:text-sf-default data-disabled:pointer-events-none data-disabled:opacity-50", className),
+	checked,
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-inherit",
+		children: /* @__PURE__ */ jsx(Checkbox, { checked })
+	}), children]
+}));
+DropdownMenuCheckboxItem.displayName = Menu.CheckboxItem.displayName;
+var DropdownMenuLabel = React$1.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(Menu.GroupLabel, {
+	ref,
+	className: cn("px-2 py-1.5 text-base font-semibold", inset && "pl-8", className),
+	...props
+}));
+DropdownMenuLabel.displayName = Menu.GroupLabel.displayName;
+var DropdownMenuSeparator = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Menu.Separator, {
+	ref,
+	className: cn("-mx-1 my-1 h-px bg-sf-line", className),
+	...props
+}));
+DropdownMenuSeparator.displayName = Menu.Separator.displayName;
+var DropdownMenuShortcut = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+		...props
+	});
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+var DropdownMenuRadioItem = React$1.forwardRef(({ className, children, inset, icon: IconComponent, ...props }, ref) => /* @__PURE__ */ jsxs(Menu.RadioItem, {
+	ref,
+	className: cn("relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none", "data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-sf-tint", inset && "pl-8", className),
+	...props,
+	children: [IconComponent && renderIconNode(IconComponent), children]
+}));
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+var DropdownMenuRadioItemIndicator = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+	ref,
+	className: cn("ml-auto", className),
+	...props,
+	children: children ?? /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" })
+}));
+DropdownMenuRadioItemIndicator.displayName = "DropdownMenuRadioItemIndicator";
+/**
+* Custom Trigger that converts a single child element to the `render` prop
+* to avoid nested button issues with base-ui's Menu.Trigger.
+*/
+var DropdownMenuTrigger = React$1.forwardRef(({ children, render, ...props }, ref) => {
+	const childElement = React$1.isValidElement(children) ? children : null;
+	const effectiveRender = render ?? childElement;
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		ref,
+		...props,
+		...effectiveRender && { render: effectiveRender },
+		children: childElement ? void 0 : children
+	});
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+/**
+* DropdownMenu — accessible dropdown menu anchored to a trigger.
+*
+* Compound component: `DropdownMenu` (Root), `.Trigger`, `.Content`, `.Item`,
+* `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`,
+* `.Sub`, `.SubTrigger`, `.SubContent`, `.Label`, `.Separator`, `.Shortcut`, `.Group`.
+*
+* Built on `@base-ui/react/menu`.
+*
+* @example
+* ```tsx
+* <DropdownMenu>
+*   <DropdownMenu.Trigger>
+*     <Button>Actions</Button>
+*   </DropdownMenu.Trigger>
+*   <DropdownMenu.Content>
+*     <DropdownMenu.Item>Edit</DropdownMenu.Item>
+*     <DropdownMenu.Item icon={CopyIcon}>Duplicate</DropdownMenu.Item>
+*     <DropdownMenu.Separator />
+*     <DropdownMenu.Item variant="danger">Delete</DropdownMenu.Item>
+*   </DropdownMenu.Content>
+* </DropdownMenu>
+* ```
+*
+* @see https://base-ui.com/react/components/menu
+*/
+var DropdownMenu = Object.assign(Menu.Root, {
+	Trigger: DropdownMenuTrigger,
+	Portal: Menu.Portal,
+	Sub: Menu.SubmenuRoot,
+	SubTrigger: DropdownMenuSubTrigger,
+	SubContent: DropdownMenuContent,
+	Content: DropdownMenuContent,
+	Item: DropdownMenuItem,
+	CheckboxItem: DropdownMenuCheckboxItem,
+	RadioGroup: Menu.RadioGroup,
+	RadioItem: DropdownMenuRadioItem,
+	RadioItemIndicator: DropdownMenuRadioItemIndicator,
+	Label: DropdownMenuLabel,
+	Separator: DropdownMenuSeparator,
+	Shortcut: DropdownMenuShortcut,
+	Group: Menu.Group
+});
+//#endregion
+export { DropdownMenu as t };
+
+//# sourceMappingURL=dropdown-J5T4pHaR.js.map

package/dist/dropdown-J5T4pHaR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-J5T4pHaR.js","names":[],"sources":["../src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { Menu as DropdownMenuPrimitive } from \"@base-ui/react/menu\";\nimport {\n  CaretRightIcon as CaretRight,\n  CheckIcon as Check,\n  type Icon,\n} from \"@phosphor-icons/react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Checkbox } from \"../checkbox\";\n\n/** Dropdown item variant definitions (default and danger styles). */\nexport const SF_DROPDOWN_VARIANTS = {\n  variant: {\n    default: {\n      classes: \"\",\n      description: \"Default dropdown item appearance\",\n    },\n    danger: {\n      classes:\n        \"text-sf-danger data-highlighted:bg-sf-danger/5 data-highlighted:text-sf-danger\",\n      description: \"Destructive action item\",\n    },\n  },\n} as const;\n\nexport const SF_DROPDOWN_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n// Derived types from SF_DROPDOWN_VARIANTS\nexport type SFDropdownVariant = keyof typeof SF_DROPDOWN_VARIANTS.variant;\n\nexport interface SFDropdownVariantsProps {\n  /**\n   * Visual style of the dropdown item.\n   * - `\"default\"` — Standard item appearance\n   * - `\"danger\"` — Destructive action with red text\n   * @default \"default\"\n   */\n  variant?: SFDropdownVariant;\n}\n\nexport function dropdownVariants({\n  variant = SF_DROPDOWN_DEFAULT_VARIANTS.variant,\n}: SFDropdownVariantsProps = {}) {\n  return cn(SF_DROPDOWN_VARIANTS.variant[variant].classes);\n}\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubmenuTrigger>,\n  React.ComponentPropsWithoutRef<\n    typeof DropdownMenuPrimitive.SubmenuTrigger\n  > & {\n    inset?: boolean;\n    icon?: Icon;\n  }\n>(({ className, inset, children, icon: IconComponent, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubmenuTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center rounded-sm text-base outline-hidden select-none\", // base styles\n      \"px-2 py-1.5\", // spacing\n      \"focus:bg-sf-tint\", // focus state\n      \"data-[state=open]:bg-sf-tint\", // open state\n      inset && \"pl-8\", // conditional inset\n      className\n    )}\n    {...props}\n  >\n    {IconComponent && <IconComponent className=\"mr-2 h-4 w-4\" />}\n    {children}\n    <CaretRight className=\"ml-auto h-4 w-4\" />\n  </DropdownMenuPrimitive.SubmenuTrigger>\n));\n\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubmenuTrigger.displayName;\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Positioner>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Positioner>\n>(({ className, sideOffset = 8, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Positioner\n      ref={ref}\n      sideOffset={sideOffset}\n      {...props}\n    >\n      <DropdownMenuPrimitive.Popup\n        className={cn(\n          \"overflow-hidden bg-sf-control text-sf-default\", // background\n          \"rounded-lg shadow-lg ring ring-sf-line\", // border part\n          \"min-w-36 p-1.5\", // spacing\n          \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\", // open animation\n          \"data-[side=bottom]:slide-in-from-top-2\", // bottom side animation\n          \"data-[side=left]:slide-in-from-right-2\", // left side animation\n          \"data-[side=right]:slide-in-from-left-2\", // right side animation\n          \"data-[side=top]:slide-in-from-bottom-2\", // top side animation\n          \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\", // close animation\n          className\n        )}\n      >\n        {children}\n      </DropdownMenuPrimitive.Popup>\n    </DropdownMenuPrimitive.Positioner>\n  </DropdownMenuPrimitive.Portal>\n));\n\nconst renderIconNode = (IconComponent?: Icon | React.ReactNode) => {\n  if (!IconComponent) return null;\n  if (React.isValidElement(IconComponent)) return IconComponent;\n  const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;\n  return <Comp className=\"mr-2 h-4 w-4\" />;\n};\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean;\n    icon?: Icon | React.ReactNode;\n    selected?: boolean;\n    href?: string;\n    variant?: \"default\" | \"danger\";\n  }\n>(\n  (\n    {\n      className,\n      inset,\n      icon: IconComponent,\n      children,\n      selected,\n      render,\n      href,\n      variant = \"default\",\n      ...props\n    },\n    ref\n  ) => {\n    const LinkComponent = useLinkComponent();\n    const content = React.useMemo(() => {\n      const innerContent = (\n        <>\n          {IconComponent && renderIconNode(IconComponent)}\n          {children}\n          {selected && (\n            <span className=\"inline-flex\">\n              <Check />\n            </span>\n          )}\n        </>\n      );\n\n      if (!href) return innerContent;\n\n      // Matches http://, https://, or protocol-relative //\n      const isExternal = /^(https?:)?\\/\\//.test(href);\n      const styles = cn(\n        \"flex items-center\",\n        variant === \"danger\" &&\n          \"text-sf-danger data-highlighted:bg-sf-danger/5 data-highlighted:text-sf-danger\"\n      );\n      if (isExternal) {\n        return (\n          <a\n            className={cn(styles, \"w-full text-inherit! no-underline!\")}\n            href={href}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            /**\n             * For some reason we need this here to prevent the outer link\n             * from being clicked (thereby going to the worker details\n             * instead of visiting the link)\n             */\n            onClick={(e) => e.stopPropagation()}\n          >\n            {innerContent}\n          </a>\n        );\n      }\n      return (\n        <LinkComponent\n          className={cn(styles, \"w-full text-inherit! no-underline!\")}\n          href={href}\n          to={href}\n          /**\n           * For some reason we need this here to prevent the outer link\n           * from being clicked (thereby going to the worker details\n           * instead of visiting the link)\n           */\n          onClick={(e) => e.stopPropagation()}\n        >\n          {innerContent}\n        </LinkComponent>\n      );\n    }, [href, IconComponent, children, selected, variant, LinkComponent]);\n\n    // When href is provided, content already contains children via innerContent\n    // When render prop is provided, caller controls children rendering\n    // Only pass children directly when neither href nor render is used\n    const useRenderProp = href || render;\n\n    return (\n      <DropdownMenuPrimitive.Item\n        ref={ref}\n        className={cn(\n          \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none focus:text-sf-default data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-sf-overlay\",\n          inset && \"pl-8\",\n          dropdownVariants({ variant }),\n          className\n        )}\n        render={href ? content : render}\n        {...props}\n      >\n        {useRenderProp ? undefined : children}\n      </DropdownMenuPrimitive.Item>\n    );\n  }\n);\n\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-base outline-hidden transition-colors select-none focus:bg-sf-tint focus:text-sf-default data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-inherit\">\n      <Checkbox checked={checked} />\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName;\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.GroupLabel> & {\n    inset?: boolean;\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.GroupLabel\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-base font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n));\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.GroupLabel.displayName;\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-sf-line\", className)}\n    {...props}\n  />\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n      {...props}\n    />\n  );\n};\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {\n    inset?: boolean;\n    icon?: Icon | React.ReactNode;\n  }\n>(({ className, children, inset, icon: IconComponent, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none\",\n      \"data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-sf-tint\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {IconComponent && renderIconNode(IconComponent)}\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n\nconst DropdownMenuRadioItemIndicator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItemIndicator>,\n  React.ComponentPropsWithoutRef<\n    typeof DropdownMenuPrimitive.RadioItemIndicator\n  >\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItemIndicator\n    ref={ref}\n    className={cn(\"ml-auto\", className)}\n    {...props}\n  >\n    {children ?? <Check className=\"h-4 w-4\" />}\n  </DropdownMenuPrimitive.RadioItemIndicator>\n));\nDropdownMenuRadioItemIndicator.displayName = \"DropdownMenuRadioItemIndicator\";\n\n/**\n * Custom Trigger that converts a single child element to the `render` prop\n * to avoid nested button issues with base-ui's Menu.Trigger.\n */\nconst DropdownMenuTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ children, render, ...props }, ref) => {\n  // If render prop is provided, use it directly\n  // Otherwise, convert single child element to render prop\n  const childElement = React.isValidElement(children) ? children : null;\n  const effectiveRender = render ?? childElement;\n\n  return (\n    <DropdownMenuPrimitive.Trigger\n      ref={ref}\n      {...props}\n      {...(effectiveRender && {\n        render: effectiveRender as React.ReactElement<Record<string, unknown>>,\n      })}\n    >\n      {/* Only pass children if not using as render prop */}\n      {childElement ? undefined : children}\n    </DropdownMenuPrimitive.Trigger>\n  );\n});\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\n/**\n * DropdownMenu — accessible dropdown menu anchored to a trigger.\n *\n * Compound component: `DropdownMenu` (Root), `.Trigger`, `.Content`, `.Item`,\n * `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`,\n * `.Sub`, `.SubTrigger`, `.SubContent`, `.Label`, `.Separator`, `.Shortcut`, `.Group`.\n *\n * Built on `@base-ui/react/menu`.\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n *   <DropdownMenu.Trigger>\n *     <Button>Actions</Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Edit</DropdownMenu.Item>\n *     <DropdownMenu.Item icon={CopyIcon}>Duplicate</DropdownMenu.Item>\n *     <DropdownMenu.Separator />\n *     <DropdownMenu.Item variant=\"danger\">Delete</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu>\n * ```\n *\n * @see https://base-ui.com/react/components/menu\n */\nexport const DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {\n  Trigger: DropdownMenuTrigger,\n  Portal: DropdownMenuPrimitive.Portal,\n  Sub: DropdownMenuPrimitive.SubmenuRoot,\n  SubTrigger: DropdownMenuSubTrigger,\n  SubContent: DropdownMenuContent,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  RadioGroup: DropdownMenuPrimitive.RadioGroup,\n  RadioItem: DropdownMenuRadioItem,\n  RadioItemIndicator: DropdownMenuRadioItemIndicator,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Shortcut: DropdownMenuShortcut,\n  Group: DropdownMenuPrimitive.Group,\n});\n"],"mappings":"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"}

package/dist/empty-D2TypIId.js

@@ -0,0 +1,90 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Button } from "./button-De0267YU.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
+//#region src/components/empty/empty.tsx
+/** Empty state size variant definitions mapping sizes to their Tailwind classes. */
+var SF_EMPTY_VARIANTS = { size: {
+	sm: {
+		classes: "px-6 py-8 gap-4",
+		description: "Compact empty state for smaller containers"
+	},
+	base: {
+		classes: "px-10 py-16 gap-6",
+		description: "Default empty state size"
+	},
+	lg: {
+		classes: "px-12 py-20 gap-8",
+		description: "Large empty state for prominent placement"
+	}
+} };
+var SF_EMPTY_DEFAULT_VARIANTS = { size: "base" };
+function emptyVariants({ size = SF_EMPTY_DEFAULT_VARIANTS.size } = {}) {
+	return cn("flex w-full flex-col items-center rounded-xl border border-sf-fill bg-sf-control text-sf-default", SF_EMPTY_VARIANTS.size[size].classes);
+}
+/**
+* Placeholder shown when a list, table, or page has no content to display.
+*
+* @example
+* ```tsx
+* <Empty title="No results found" description="Try adjusting your search." />
+* ```
+*/
+function Empty({ icon, title, description, commandLine, contents, size = "base", className }) {
+	const [emptyStateCopied, setEmptyStateCopied] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(emptyVariants({ size }), className),
+		children: [
+			icon,
+			/* @__PURE__ */ jsx("h2", {
+				className: "text-2xl font-semibold",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "max-w-140 text-center text-sf-strong",
+				children: description
+			}),
+			commandLine && /* @__PURE__ */ jsxs("div", {
+				className: cn("group/cmd relative inline-flex h-10 max-w-8/10 transform-gpu items-center gap-2 rounded-lg font-mono shadow-sm", "bg-sf-overlay pr-2 pl-3", "transition-all duration-300 hover:border-sf-interact/80 hover:shadow-md", "border border-sf-fill/60"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-xs text-sf-inactive select-none",
+						children: "$"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "no-scrollbar overflow-scroll text-[14px] whitespace-nowrap text-sf-brand",
+						children: commandLine
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						className: "group",
+						size: "sm",
+						variant: "ghost",
+						shape: "square",
+						"aria-label": "Copy command",
+						onClick: async () => {
+							setEmptyStateCopied(true);
+							setTimeout(() => {
+								setEmptyStateCopied(false);
+							}, 1e3);
+							await navigator.clipboard.writeText(commandLine);
+						},
+						children: emptyStateCopied ? /* @__PURE__ */ jsx(CheckIcon, {
+							size: 16,
+							className: "animate-bounce-in text-sf-success"
+						}) : /* @__PURE__ */ jsx(CopyIcon, {
+							size: 16,
+							className: "text-sf-inactive group-hover:text-sf-brand"
+						})
+					})
+				]
+			}),
+			contents
+		]
+	});
+}
+//#endregion
+export { emptyVariants as i, SF_EMPTY_DEFAULT_VARIANTS as n, SF_EMPTY_VARIANTS as r, Empty as t };
+
+//# sourceMappingURL=empty-D2TypIId.js.map

package/dist/empty-D2TypIId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-D2TypIId.js","names":[],"sources":["../src/components/empty/empty.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { useState } from \"react\";\n\nimport { Button } from \"../../components/button\";\nimport { cn } from \"../../utils/cn\";\n\n/** Empty state size variant definitions mapping sizes to their Tailwind classes. */\nexport const SF_EMPTY_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"px-6 py-8 gap-4\",\n      description: \"Compact empty state for smaller containers\",\n    },\n    base: {\n      classes: \"px-10 py-16 gap-6\",\n      description: \"Default empty state size\",\n    },\n    lg: {\n      classes: \"px-12 py-20 gap-8\",\n      description: \"Large empty state for prominent placement\",\n    },\n  },\n} as const;\n\nexport const SF_EMPTY_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport type SFEmptySize = keyof typeof SF_EMPTY_VARIANTS.size;\n\nexport interface SFEmptyVariantsProps {\n  /**\n   * Size of the empty state container.\n   * - `\"sm\"` — Compact empty state for smaller containers\n   * - `\"base\"` — Default empty state size\n   * - `\"lg\"` — Large empty state for prominent placement\n   * @default \"base\"\n   */\n  size?: SFEmptySize;\n}\n\nexport function emptyVariants({\n  size = SF_EMPTY_DEFAULT_VARIANTS.size,\n}: SFEmptyVariantsProps = {}) {\n  return cn(\n    \"flex w-full flex-col items-center rounded-xl border border-sf-fill bg-sf-control text-sf-default\",\n    SF_EMPTY_VARIANTS.size[size].classes\n  );\n}\n\n/**\n * Empty state component props.\n *\n * @example\n * ```tsx\n * <Empty\n *   icon={<PackageIcon size={48} />}\n *   title=\"No packages found\"\n *   description=\"Get started by installing your first package.\"\n *   commandLine=\"npm install @signalflare-ai/ui\"\n * />\n * ```\n */\nexport interface EmptyProps extends SFEmptyVariantsProps {\n  /** Decorative icon displayed above the title (e.g. from `@phosphor-icons/react`). */\n  icon?: React.ReactNode;\n  /** Primary heading text for the empty state. */\n  title: string;\n  /** Secondary description text displayed below the title. */\n  description?: string;\n  /** Shell command displayed in a copyable code block. */\n  commandLine?: string;\n  /** Additional content (buttons, links) rendered below the description. */\n  contents?: React.ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\n/**\n * Placeholder shown when a list, table, or page has no content to display.\n *\n * @example\n * ```tsx\n * <Empty title=\"No results found\" description=\"Try adjusting your search.\" />\n * ```\n */\nexport function Empty({\n  icon,\n  title,\n  description,\n  commandLine,\n  contents,\n  size = \"base\",\n  className,\n}: EmptyProps) {\n  const [emptyStateCopied, setEmptyStateCopied] = useState<boolean>(false);\n\n  return (\n    <div className={cn(emptyVariants({ size }), className)}>\n      {icon}\n      <h2 className=\"text-2xl font-semibold\">{title}</h2>\n\n      {description && (\n        <p className=\"max-w-140 text-center text-sf-strong\">{description}</p>\n      )}\n\n      {commandLine && (\n        <div\n          className={cn(\n            \"group/cmd relative inline-flex h-10 max-w-8/10 transform-gpu items-center gap-2 rounded-lg font-mono shadow-sm\",\n            \"bg-sf-overlay pr-2 pl-3\",\n            \"transition-all duration-300 hover:border-sf-interact/80 hover:shadow-md\",\n            \"border border-sf-fill/60\"\n          )}\n        >\n          <span className=\"text-xs text-sf-inactive select-none\">$</span>\n          <span className=\"no-scrollbar overflow-scroll text-[14px] whitespace-nowrap text-sf-brand\">\n            {commandLine}\n          </span>\n          <Button\n            className=\"group\"\n            size=\"sm\"\n            variant=\"ghost\"\n            shape=\"square\"\n            aria-label=\"Copy command\"\n            onClick={async () => {\n              setEmptyStateCopied(true);\n              setTimeout(() => {\n                setEmptyStateCopied(false);\n              }, 1000);\n              await navigator.clipboard.writeText(commandLine);\n            }}\n          >\n            {emptyStateCopied ? (\n              <CheckIcon\n                size={16}\n                className=\"animate-bounce-in text-sf-success\"\n              />\n            ) : (\n              <CopyIcon\n                size={16}\n                className=\"text-sf-inactive group-hover:text-sf-brand\"\n              />\n            )}\n          </Button>\n        </div>\n      )}\n\n      {contents}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,IAAa,oBAAoB,EAC/B,MAAM;CACJ,IAAI;EACF,SAAS;EACT,aAAa;EACd;CACD,MAAM;EACJ,SAAS;EACT,aAAa;EACd;CACD,IAAI;EACF,SAAS;EACT,aAAa;EACd;CACF,EACF;AAED,IAAa,4BAA4B,EACvC,MAAM,QACP;AAeD,SAAgB,cAAc,EAC5B,OAAO,0BAA0B,SACT,EAAE,EAAE;AAC5B,QAAO,GACL,oGACA,kBAAkB,KAAK,MAAM,QAC9B;;;;;;;;;;AAuCH,SAAgB,MAAM,EACpB,MACA,OACA,aACA,aACA,UACA,OAAO,QACP,aACa;CACb,MAAM,CAAC,kBAAkB,uBAAuB,SAAkB,MAAM;AAExE,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,cAAc,EAAE,MAAM,CAAC,EAAE,UAAU;YAAtD;GACG;GACD,oBAAC,MAAD;IAAI,WAAU;cAA0B;IAAW,CAAA;GAElD,eACC,oBAAC,KAAD;IAAG,WAAU;cAAwC;IAAgB,CAAA;GAGtE,eACC,qBAAC,OAAD;IACE,WAAW,GACT,kHACA,2BACA,2EACA,2BACD;cANH;KAQE,oBAAC,QAAD;MAAM,WAAU;gBAAuC;MAAQ,CAAA;KAC/D,oBAAC,QAAD;MAAM,WAAU;gBACb;MACI,CAAA;KACP,oBAAC,QAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,OAAM;MACN,cAAW;MACX,SAAS,YAAY;AACnB,2BAAoB,KAAK;AACzB,wBAAiB;AACf,4BAAoB,MAAM;UACzB,IAAK;AACR,aAAM,UAAU,UAAU,UAAU,YAAY;;gBAGjD,mBACC,oBAAC,WAAD;OACE,MAAM;OACN,WAAU;OACV,CAAA,GAEF,oBAAC,UAAD;OACE,MAAM;OACN,WAAU;OACV,CAAA;MAEG,CAAA;KACL;;GAGP;GACG"}

package/dist/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 768 768" preserveAspectRatio="xMidYMid meet">
+  <path fill="#766c69" d="M 383.980469 199.453125 C 316.03125 199.453125 260.953125 254.539062 260.953125 322.484375 C 260.953125 345.546875 267.296875 367.117188 278.339844 385.566406 L 383.976562 568.550781 L 489.699219 385.4375 C 500.6875 367.019531 507.007812 345.492188 507.007812 322.488281 C 507.007812 254.535156 451.929688 199.453125 383.980469 199.453125 Z M 383.980469 363.65625 C 361.246094 363.65625 342.8125 345.222656 342.816406 322.484375 C 342.816406 299.75 361.25 281.316406 383.980469 281.316406 C 406.722656 281.316406 425.15625 299.75 425.15625 322.484375 C 425.15625 345.222656 406.722656 363.65625 383.980469 363.65625 Z"/>
+</svg>
+

package/dist/field-Y_UK1_Cg.js

@@ -0,0 +1,57 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Label } from "./label-QtJxtJ4u.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/components/field/field.tsx
+/** Field variant definitions (currently empty, reserved for future additions). */
+var SF_FIELD_VARIANTS = {};
+var SF_FIELD_DEFAULT_VARIANTS = {};
+function fieldVariants({ controlFirst = false } = {}) {
+	return cn("grid gap-2", "has-[input[type=checkbox]]:grid-cols-[auto_1fr] has-[input[type=checkbox]]:items-center", "has-[[role=switch]]:grid-cols-[auto_1fr] has-[[role=switch]]:items-center", controlFirst && [
+		"has-[input[type=checkbox]]:flex has-[input[type=checkbox]]:flex-row-reverse has-[input[type=checkbox]]:flex-wrap has-[input[type=checkbox]]:items-center",
+		"has-[[role=switch]]:flex has-[[role=switch]]:flex-row-reverse has-[[role=switch]]:flex-wrap has-[[role=switch]]:items-center",
+		"[&>label]:flex-1"
+	]);
+}
+/**
+* Form field wrapper that provides a label, optional description, and error display
+* around any form control. Built on Base UI Field primitives.
+*
+* @example
+* ```tsx
+* <Field label="Username">
+*   <Input placeholder="Choose a username" />
+* </Field>
+* ```
+*/
+function Field$1({ children, label, required, labelTooltip, error, description, controlFirst = false }) {
+	const showOptional = required === false;
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className: fieldVariants({ controlFirst }),
+		children: [
+			/* @__PURE__ */ jsx(Field.Label, {
+				className: "text-base font-medium text-sf-default",
+				children: /* @__PURE__ */ jsx(Label, {
+					showOptional,
+					tooltip: labelTooltip,
+					asContent: true,
+					children: label
+				})
+			}),
+			children,
+			error ? /* @__PURE__ */ jsx(Field.Error, {
+				className: cn("text-sm text-sf-danger", "col-span-full"),
+				match: error.match,
+				children: error.message
+			}) : description && /* @__PURE__ */ jsx(Field.Description, {
+				className: cn("text-sm leading-snug text-sf-subtle", "col-span-full"),
+				children: description
+			})
+		]
+	});
+}
+//#endregion
+export { fieldVariants as i, SF_FIELD_DEFAULT_VARIANTS as n, SF_FIELD_VARIANTS as r, Field$1 as t };
+
+//# sourceMappingURL=field-Y_UK1_Cg.js.map

package/dist/field-Y_UK1_Cg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-Y_UK1_Cg.js","names":[],"sources":["../src/components/field/field.tsx"],"sourcesContent":["import { Field as FieldBase } from \"@base-ui/react/field\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\n\n/** Field variant definitions (currently empty, reserved for future additions). */\nexport const SF_FIELD_VARIANTS = {\n  // Field currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_FIELD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from SF_FIELD_VARIANTS\nexport interface SFFieldVariantsProps {\n  /**\n   * When true, places the control (checkbox/switch) before the label visually.\n   * When false (default), places the label before the control.\n   * Used to support different layout patterns (e.g., iOS-style toggles on the right).\n   */\n  controlFirst?: boolean;\n}\n\nexport function fieldVariants({\n  controlFirst = false,\n}: SFFieldVariantsProps = {}) {\n  return cn(\n    // Base styles - vertical layout (default)\n    \"grid gap-2\",\n\n    // Horizontal layout for checkbox and switch\n    // Default: Grid auto-reverses in RTL (desired)\n    \"has-[input[type=checkbox]]:grid-cols-[auto_1fr] has-[input[type=checkbox]]:items-center\",\n    \"has-[[role=switch]]:grid-cols-[auto_1fr] has-[[role=switch]]:items-center\",\n\n    // Control first: use flexbox with row-reverse to flip visual order without affecting text direction\n    // flex-row-reverse in LTR: Control→Label, in RTL: Label→Control (opposite of grid default)\n    controlFirst && [\n      \"has-[input[type=checkbox]]:flex has-[input[type=checkbox]]:flex-row-reverse has-[input[type=checkbox]]:flex-wrap has-[input[type=checkbox]]:items-center\",\n      \"has-[[role=switch]]:flex has-[[role=switch]]:flex-row-reverse has-[[role=switch]]:flex-wrap has-[[role=switch]]:items-center\",\n      \"[&>label]:flex-1\",\n    ]\n  );\n}\n\n/**\n * Match type for field validation errors.\n * Can be a boolean or a key from the browser's ValidityState interface.\n * Source: BaseErrorProps[\"match\"] (ComponentPropsWithoutRef<typeof FieldBase.Error>)\n */\nexport type FieldErrorMatch =\n  | boolean\n  | \"badInput\"\n  | \"customError\"\n  | \"patternMismatch\"\n  | \"rangeOverflow\"\n  | \"rangeUnderflow\"\n  | \"stepMismatch\"\n  | \"tooLong\"\n  | \"tooShort\"\n  | \"typeMismatch\"\n  | \"valid\"\n  | \"valueMissing\";\n\n/**\n * Field component props — wraps a form control with label, description, and error message.\n *\n * @example\n * ```tsx\n * <Field label=\"Email\" required>\n *   <Input placeholder=\"you@example.com\" />\n * </Field>\n *\n * <Field label=\"Phone\" required={false} description=\"We'll only use this for account recovery.\">\n *   <Input placeholder=\"+1 555-0000\" />\n * </Field>\n * ```\n */\nexport interface FieldProps extends SFFieldVariantsProps {\n  /** The form control element(s) to wrap (Input, Select, Checkbox, etc.). */\n  children: ReactNode;\n  /** The label content — can be a string or any React node. */\n  label: ReactNode;\n  /**\n   * When explicitly `false`, shows gray \"(optional)\" text after the label.\n   * When `true` or `undefined`, no indicator is shown.\n   */\n  required?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  labelTooltip?: ReactNode;\n  /** Validation error with a message and a browser `ValidityState` match key. */\n  error?: {\n    message: ReactNode;\n    match: FieldErrorMatch;\n  };\n  /** Helper text displayed below the control (hidden when `error` is present). */\n  description?: ReactNode;\n  /** When `true`, places the control before the label (for checkbox/switch layouts). */\n  controlFirst?: boolean;\n}\n\n/**\n * Form field wrapper that provides a label, optional description, and error display\n * around any form control. Built on Base UI Field primitives.\n *\n * @example\n * ```tsx\n * <Field label=\"Username\">\n *   <Input placeholder=\"Choose a username\" />\n * </Field>\n * ```\n */\nexport function Field({\n  children,\n  label,\n  required,\n  labelTooltip,\n  error,\n  description,\n  controlFirst = false,\n}: FieldProps) {\n  // Show \"(optional)\" when required is explicitly false\n  const showOptional = required === false;\n\n  return (\n    <FieldBase.Root className={fieldVariants({ controlFirst })}>\n      <FieldBase.Label className=\"text-base font-medium text-sf-default\">\n        <Label showOptional={showOptional} tooltip={labelTooltip} asContent>\n          {label}\n        </Label>\n      </FieldBase.Label>\n      {children}\n      {error ? (\n        <FieldBase.Error\n          className={cn(\n            \"text-sm text-sf-danger\",\n            // Span full width in horizontal layout\n            \"col-span-full\"\n          )}\n          match={error.match}\n        >\n          {error.message}\n        </FieldBase.Error>\n      ) : (\n        description && (\n          <FieldBase.Description\n            className={cn(\n              \"text-sm leading-snug text-sf-subtle\",\n              // Span full width in horizontal layout\n              \"col-span-full\"\n            )}\n          >\n            {description}\n          </FieldBase.Description>\n        )\n      )}\n    </FieldBase.Root>\n  );\n}\n"],"mappings":";;;;;;;AAOA,IAAa,oBAAoB,EAEhC;AAED,IAAa,4BAA4B,EAAE;AAY3C,SAAgB,cAAc,EAC5B,eAAe,UACS,EAAE,EAAE;AAC5B,QAAO,GAEL,cAIA,2FACA,6EAIA,gBAAgB;EACd;EACA;EACA;EACD,CACF;;;;;;;;;;;;;AAsEH,SAAgB,QAAM,EACpB,UACA,OACA,UACA,cACA,OACA,aACA,eAAe,SACF;CAEb,MAAM,eAAe,aAAa;AAElC,QACE,qBAAC,MAAU,MAAX;EAAgB,WAAW,cAAc,EAAE,cAAc,CAAC;YAA1D;GACE,oBAAC,MAAU,OAAX;IAAiB,WAAU;cACzB,oBAAC,OAAD;KAAqB;KAAc,SAAS;KAAc,WAAA;eACvD;KACK,CAAA;IACQ,CAAA;GACjB;GACA,QACC,oBAAC,MAAU,OAAX;IACE,WAAW,GACT,0BAEA,gBACD;IACD,OAAO,MAAM;cAEZ,MAAM;IACS,CAAA,GAElB,eACE,oBAAC,MAAU,aAAX;IACE,WAAW,GACT,uCAEA,gBACD;cAEA;IACqB,CAAA;GAGb"}