@epilot/spark-ui 0.10.0

package/dist/components/dropdown-menu.d.cts

@@ -0,0 +1,92 @@
+"use client";
+
+import * as React$1 from "react";
+import { Menu } from "@base-ui/react/menu";
+
+//#region src/components/dropdown-menu.d.ts
+declare function DropdownMenu({
+  ...props
+}: React$1.ComponentProps<typeof Menu.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({
+  ...props
+}: React$1.ComponentProps<typeof Menu.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({
+  ...props
+}: React$1.ComponentProps<typeof Menu.Trigger>): import("react/jsx-runtime").JSX.Element;
+type DropdownMenuContentProps = React$1.ComponentProps<typeof Menu.Popup> & Pick<Menu.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {
+  container?: React$1.ComponentProps<typeof Menu.Portal>['container'];
+};
+declare function DropdownMenuContent({
+  className,
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  container,
+  ...props
+}: DropdownMenuContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({
+  ...props
+}: React$1.ComponentProps<typeof Menu.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: React$1.ComponentProps<typeof Menu.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React$1.ComponentProps<typeof Menu.CheckboxItem> & {
+  inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({
+  ...props
+}: React$1.ComponentProps<typeof Menu.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React$1.ComponentProps<typeof Menu.RadioItem> & {
+  inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React$1.ComponentProps<'div'> & {
+  inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Menu.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({
+  ...props
+}: React$1.ComponentProps<typeof Menu.SubmenuRoot>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Menu.SubmenuTrigger> & {
+  inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({
+  className,
+  ...props
+}: DropdownMenuContentProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+//# sourceMappingURL=dropdown-menu.d.cts.map

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,92 @@
+"use client";
+
+import * as React$1 from "react";
+import { Menu } from "@base-ui/react/menu";
+
+//#region src/components/dropdown-menu.d.ts
+declare function DropdownMenu({
+  ...props
+}: React$1.ComponentProps<typeof Menu.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({
+  ...props
+}: React$1.ComponentProps<typeof Menu.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({
+  ...props
+}: React$1.ComponentProps<typeof Menu.Trigger>): import("react/jsx-runtime").JSX.Element;
+type DropdownMenuContentProps = React$1.ComponentProps<typeof Menu.Popup> & Pick<Menu.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {
+  container?: React$1.ComponentProps<typeof Menu.Portal>['container'];
+};
+declare function DropdownMenuContent({
+  className,
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  container,
+  ...props
+}: DropdownMenuContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({
+  ...props
+}: React$1.ComponentProps<typeof Menu.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: React$1.ComponentProps<typeof Menu.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React$1.ComponentProps<typeof Menu.CheckboxItem> & {
+  inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({
+  ...props
+}: React$1.ComponentProps<typeof Menu.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React$1.ComponentProps<typeof Menu.RadioItem> & {
+  inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React$1.ComponentProps<'div'> & {
+  inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Menu.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({
+  ...props
+}: React$1.ComponentProps<typeof Menu.SubmenuRoot>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Menu.SubmenuTrigger> & {
+  inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({
+  className,
+  ...props
+}: DropdownMenuContentProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+//# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/components/dropdown-menu.js

@@ -0,0 +1,148 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/dropdown-menu.tsx
+function DropdownMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Root, { ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuContent({ className, align = "start", alignOffset, side, sideOffset = 4, container, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		container,
+		children: /* @__PURE__ */ jsx(Menu.Positioner, {
+			align,
+			alignOffset,
+			className: "isolate z-50 outline-none",
+			side,
+			sideOffset,
+			children: /* @__PURE__ */ jsx(Menu.Popup, {
+				"data-slot": "dropdown-menu-content",
+				className: cn("z-50 max-h-(--available-height) min-w-40 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 p-1 text-gray-a12 shadow-lg outline-none", "transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0", "data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2", className),
+				...props
+			})
+		})
+	});
+}
+function DropdownMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/dropdown-menu-item relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 data-[variant=destructive]:text-error data-[variant=destructive]:data-highlighted:bg-base-error-soft [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		"data-inset": inset,
+		className: cn("relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center",
+			"data-slot": "dropdown-menu-checkbox-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(MaterialSymbol, {
+				className: "text-sm",
+				name: "check"
+			}) })
+		}), children]
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		"data-inset": inset,
+		className: cn("relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center",
+			"data-slot": "dropdown-menu-radio-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(MaterialSymbol, {
+				className: "text-sm",
+				name: "check"
+			}) })
+		}), children]
+	});
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset,
+		className: cn("px-2 py-1 text-xs text-gray-light data-[inset=true]:pl-7", className),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-gray-a3", className),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-gray-light", className),
+		...props
+	});
+}
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn("flex min-h-7 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-highlighted:bg-gray-a3 data-popup-open:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(MaterialSymbol, {
+			className: "ml-auto text-sm text-gray-light",
+			name: "chevron_right"
+		})]
+	});
+}
+function DropdownMenuSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		align: "start",
+		alignOffset: -3,
+		side: "right",
+		sideOffset: 0,
+		className: cn("w-auto min-w-32", className),
+		...props
+	});
+}
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/components/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","names":["MenuPrimitive"],"sources":["../../src/components/dropdown-menu.tsx"],"sourcesContent":["import { Menu as MenuPrimitive } from '@base-ui/react/menu'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Root>) {\n  return <MenuPrimitive.Root {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Portal>) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Trigger>) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\ntype DropdownMenuContentProps = React.ComponentProps<\n  typeof MenuPrimitive.Popup\n> &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    container?: React.ComponentProps<typeof MenuPrimitive.Portal>['container']\n  }\n\nfunction DropdownMenuContent({\n  className,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  container,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50 outline-none\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            'z-50 max-h-(--available-height) min-w-40 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 p-1 text-gray-a12 shadow-lg outline-none',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            className,\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Group>) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: 'default' | 'destructive'\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/dropdown-menu-item relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 data-[variant=destructive]:text-error data-[variant=destructive]:data-highlighted:bg-base-error-soft [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        'relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <MaterialSymbol className=\"text-sm\" name=\"check\" />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.RadioGroup>) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        'relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md py-1.5 pr-10 pl-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute inset-y-0 top-1 right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <MaterialSymbol className=\"text-sm\" name=\"check\" />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\n// plain div, not Menu.GroupLabel: Base UI's GroupLabel throws outside a\n// Group, while our labels float freely (radix Label was an unwired div too)\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<'div'> & {\n  inset?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        'px-2 py-1 text-xs text-gray-light data-[inset=true]:pl-7',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn('-mx-1 my-1 h-px bg-gray-a3', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        'ml-auto text-xs tracking-widest text-gray-light',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        'flex min-h-7 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-highlighted:bg-gray-a3 data-popup-open:bg-gray-a3 data-[inset=true]:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <MaterialSymbol\n        className=\"ml-auto text-sm text-gray-light\"\n        name=\"chevron_right\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\n// composes the public Content; the align/offset defaults visually align the\n// submenu with its parent menu\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      align=\"start\"\n      alignOffset={-3}\n      side=\"right\"\n      sideOffset={0}\n      className={cn('w-auto min-w-32', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n}\n"],"mappings":"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"}

package/dist/components/empty-state.cjs

@@ -0,0 +1,41 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/empty-state.tsx
+const emptyStateVariants = (0, require("class-variance-authority").cva)("flex flex-col items-center gap-4 px-6 py-12 text-center", {
+	variants: { variant: {
+		dashed: "rounded-2xl border border-dashed border-gray",
+		ghost: ""
+	} },
+	defaultVariants: { variant: "dashed" }
+});
+function EmptyState({ action, description, icon, title, variant }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: emptyStateVariants({ variant }),
+		children: [
+			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex size-12 items-center justify-center rounded-xl bg-base-gray-soft",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
+					className: "text-[20px] text-gray-light",
+					name: icon
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "text-base font-bold text-gray",
+					children: title
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mx-auto max-w-md text-sm text-gray-light",
+					children: description
+				})]
+			}),
+			action
+		]
+	});
+}
+//#endregion
+exports.EmptyState = EmptyState;
+
+//# sourceMappingURL=empty-state.cjs.map

package/dist/components/empty-state.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.cjs","names":["MaterialSymbol"],"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\n\nconst emptyStateVariants = cva(\n  'flex flex-col items-center gap-4 px-6 py-12 text-center',\n  {\n    variants: {\n      variant: {\n        dashed: 'rounded-2xl border border-dashed border-gray',\n        ghost: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'dashed',\n    },\n  },\n)\n\ninterface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {\n  title: string\n  description?: string\n  icon?: MaterialSymbolIconName\n  action?: ReactNode\n}\n\nexport function EmptyState({\n  action,\n  description,\n  icon,\n  title,\n  variant,\n}: EmptyStateProps) {\n  return (\n    <div className={emptyStateVariants({ variant })}>\n      {icon && (\n        <div className=\"flex size-12 items-center justify-center rounded-xl bg-base-gray-soft\">\n          <MaterialSymbol className=\"text-[20px] text-gray-light\" name={icon} />\n        </div>\n      )}\n      <div className=\"flex flex-col gap-1\">\n        <h3 className=\"text-base font-bold text-gray\">{title}</h3>\n        {description && (\n          <p className=\"mx-auto max-w-md text-sm text-gray-light\">\n            {description}\n          </p>\n        )}\n      </div>\n      {action}\n    </div>\n  )\n}\n\nexport type { EmptyStateProps }\n"],"mappings":";;;;;AAOA,MAAM,sBAAA,qCAAA,EAAA,KACJ,2DACA;CACE,UAAU,EACR,SAAS;EACP,QAAQ;EACR,OAAO;CACT,EACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CACF;AASA,SAAgB,WAAW,EACzB,QACA,aACA,MACA,OACA,WACkB;CAClB,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAW,mBAAmB,EAAE,QAAQ,CAAC;YAA9C;GACG,QACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACb,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,gBAAD;KAAgB,WAAU;KAA8B,MAAM;IAAO,CAAA;GAClE,CAAA;GAEP,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;KAAI,WAAU;eAAiC;IAAU,CAAA,GACxD,eACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;KAAG,WAAU;eACV;IACA,CAAA,CAEF;;GACJ;EACE;;AAET"}

package/dist/components/empty-state.d.cts

@@ -0,0 +1,26 @@
+"use client";
+
+import { MaterialSymbolIconName } from "../icons/material-symbol.cjs";
+import { ReactNode } from "react";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/components/empty-state.d.ts
+declare const emptyStateVariants: (props?: ({
+  variant?: "ghost" | "dashed" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {
+  title: string;
+  description?: string;
+  icon?: MaterialSymbolIconName;
+  action?: ReactNode;
+}
+declare function EmptyState({
+  action,
+  description,
+  icon,
+  title,
+  variant
+}: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { EmptyState, type EmptyStateProps };
+//# sourceMappingURL=empty-state.d.cts.map

package/dist/components/empty-state.d.ts

@@ -0,0 +1,26 @@
+"use client";
+
+import { MaterialSymbolIconName } from "../icons/material-symbol.js";
+import { ReactNode } from "react";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/components/empty-state.d.ts
+declare const emptyStateVariants: (props?: ({
+  variant?: "ghost" | "dashed" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {
+  title: string;
+  description?: string;
+  icon?: MaterialSymbolIconName;
+  action?: ReactNode;
+}
+declare function EmptyState({
+  action,
+  description,
+  icon,
+  title,
+  variant
+}: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { EmptyState, type EmptyStateProps };
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/components/empty-state.js

@@ -0,0 +1,41 @@
+"use client";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/empty-state.tsx
+const emptyStateVariants = cva("flex flex-col items-center gap-4 px-6 py-12 text-center", {
+	variants: { variant: {
+		dashed: "rounded-2xl border border-dashed border-gray",
+		ghost: ""
+	} },
+	defaultVariants: { variant: "dashed" }
+});
+function EmptyState({ action, description, icon, title, variant }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: emptyStateVariants({ variant }),
+		children: [
+			icon && /* @__PURE__ */ jsx("div", {
+				className: "flex size-12 items-center justify-center rounded-xl bg-base-gray-soft",
+				children: /* @__PURE__ */ jsx(MaterialSymbol, {
+					className: "text-[20px] text-gray-light",
+					name: icon
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-base font-bold text-gray",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "mx-auto max-w-md text-sm text-gray-light",
+					children: description
+				})]
+			}),
+			action
+		]
+	});
+}
+//#endregion
+export { EmptyState };
+
+//# sourceMappingURL=empty-state.js.map

package/dist/components/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\n\nconst emptyStateVariants = cva(\n  'flex flex-col items-center gap-4 px-6 py-12 text-center',\n  {\n    variants: {\n      variant: {\n        dashed: 'rounded-2xl border border-dashed border-gray',\n        ghost: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'dashed',\n    },\n  },\n)\n\ninterface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {\n  title: string\n  description?: string\n  icon?: MaterialSymbolIconName\n  action?: ReactNode\n}\n\nexport function EmptyState({\n  action,\n  description,\n  icon,\n  title,\n  variant,\n}: EmptyStateProps) {\n  return (\n    <div className={emptyStateVariants({ variant })}>\n      {icon && (\n        <div className=\"flex size-12 items-center justify-center rounded-xl bg-base-gray-soft\">\n          <MaterialSymbol className=\"text-[20px] text-gray-light\" name={icon} />\n        </div>\n      )}\n      <div className=\"flex flex-col gap-1\">\n        <h3 className=\"text-base font-bold text-gray\">{title}</h3>\n        {description && (\n          <p className=\"mx-auto max-w-md text-sm text-gray-light\">\n            {description}\n          </p>\n        )}\n      </div>\n      {action}\n    </div>\n  )\n}\n\nexport type { EmptyStateProps }\n"],"mappings":";;;;;AAOA,MAAM,qBAAqB,IACzB,2DACA;CACE,UAAU,EACR,SAAS;EACP,QAAQ;EACR,OAAO;CACT,EACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CACF;AASA,SAAgB,WAAW,EACzB,QACA,aACA,MACA,OACA,WACkB;CAClB,OACE,qBAAC,OAAD;EAAK,WAAW,mBAAmB,EAAE,QAAQ,CAAC;YAA9C;GACG,QACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD;KAAgB,WAAU;KAA8B,MAAM;IAAO,CAAA;GAClE,CAAA;GAEP,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,MAAD;KAAI,WAAU;eAAiC;IAAU,CAAA,GACxD,eACC,oBAAC,KAAD;KAAG,WAAU;eACV;IACA,CAAA,CAEF;;GACJ;EACE;;AAET"}

package/dist/components/energy-bar-chart.cjs

@@ -0,0 +1,23 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_components_bar_chart = require("./bar-chart.cjs");
+const require_components_number_flow = require("./number-flow.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/energy-bar-chart.tsx
+function EnergyBarChart({ totalSuffix, totalFormat, className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_bar_chart.BarChart, {
+		...rest,
+		className,
+		renderTotal: (value, animated) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_number_flow, {
+			value,
+			animated,
+			...totalSuffix !== void 0 && { suffix: totalSuffix },
+			...totalFormat !== void 0 && { format: totalFormat },
+			className: "text-base font-bold text-gray tabular-nums"
+		})
+	});
+}
+//#endregion
+exports.EnergyBarChart = EnergyBarChart;
+
+//# sourceMappingURL=energy-bar-chart.cjs.map

package/dist/components/energy-bar-chart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"energy-bar-chart.cjs","names":["BarChart","NumberFlow"],"sources":["../../src/components/energy-bar-chart.tsx"],"sourcesContent":["import {\n  BarChart,\n  type BarChartCategory,\n  type BarChartLineSeries,\n  type BarChartSeries,\n} from './bar-chart'\nimport NumberFlow, { type Format } from './number-flow'\n\nexport type Category = BarChartCategory\n\nexport interface HourBucket {\n  hour: number\n  solar: number\n  battery: number\n  grid: number\n}\n\nexport type EnergyBarSeries<TDatum = HourBucket> = BarChartSeries<TDatum>\nexport type EnergyBarLineSeries<TDatum = HourBucket> =\n  BarChartLineSeries<TDatum>\n\ninterface EnergyBarChartProps<TDatum> {\n  data: TDatum[]\n  series: BarChartSeries<TDatum>[]\n  lines?: BarChartLineSeries<TDatum>[]\n  getCategory: (datum: TDatum) => Category\n  categories?: Category[]\n  categoryTicks?: Category[]\n  formatCategory?: (category: Category) => string\n  formatTooltipCategory?: (category: Category) => string\n  highlightedCategory?: Category\n  showHighlightLine?: boolean\n  title?: string\n  yAxisUnit?: string\n  formatValue?: (value: number) => string\n  totalSuffix?: string\n  totalFormat?: Format\n  height?: number\n  className?: string\n}\n\nexport function EnergyBarChart<TDatum>({\n  totalSuffix,\n  totalFormat,\n  className,\n  ...rest\n}: EnergyBarChartProps<TDatum>): React.ReactElement {\n  return (\n    <BarChart<TDatum>\n      {...rest}\n      className={className}\n      renderTotal={(value, animated) => (\n        <NumberFlow\n          value={value}\n          animated={animated}\n          {...(totalSuffix !== undefined && { suffix: totalSuffix })}\n          {...(totalFormat !== undefined && { format: totalFormat })}\n          className=\"text-base font-bold text-gray tabular-nums\"\n        />\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;AAyCA,SAAgB,eAAuB,EACrC,aACA,aACA,WACA,GAAG,QAC+C;CAClD,OACE,iBAAA,GAAA,kBAAA,KAACA,6BAAAA,UAAD;EACE,GAAI;EACO;EACX,cAAc,OAAO,aACnB,iBAAA,GAAA,kBAAA,KAACC,gCAAD;GACS;GACG;GACV,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,YAAY;GACxD,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,YAAY;GACxD,WAAU;EACX,CAAA;CAEJ,CAAA;AAEL"}

package/dist/components/energy-bar-chart.d.cts

@@ -0,0 +1,43 @@
+"use client";
+
+import { BarChartCategory, BarChartLineSeries, BarChartSeries } from "./bar-chart.cjs";
+import { t as Format } from "../number-flow-Bch81ixZ.cjs";
+
+//#region src/components/energy-bar-chart.d.ts
+type Category = BarChartCategory;
+interface HourBucket {
+  hour: number;
+  solar: number;
+  battery: number;
+  grid: number;
+}
+type EnergyBarSeries<TDatum = HourBucket> = BarChartSeries<TDatum>;
+type EnergyBarLineSeries<TDatum = HourBucket> = BarChartLineSeries<TDatum>;
+interface EnergyBarChartProps<TDatum> {
+  data: TDatum[];
+  series: BarChartSeries<TDatum>[];
+  lines?: BarChartLineSeries<TDatum>[];
+  getCategory: (datum: TDatum) => Category;
+  categories?: Category[];
+  categoryTicks?: Category[];
+  formatCategory?: (category: Category) => string;
+  formatTooltipCategory?: (category: Category) => string;
+  highlightedCategory?: Category;
+  showHighlightLine?: boolean;
+  title?: string;
+  yAxisUnit?: string;
+  formatValue?: (value: number) => string;
+  totalSuffix?: string;
+  totalFormat?: Format;
+  height?: number;
+  className?: string;
+}
+declare function EnergyBarChart<TDatum>({
+  totalSuffix,
+  totalFormat,
+  className,
+  ...rest
+}: EnergyBarChartProps<TDatum>): React.ReactElement;
+//#endregion
+export { Category, EnergyBarChart, EnergyBarLineSeries, EnergyBarSeries, HourBucket };
+//# sourceMappingURL=energy-bar-chart.d.cts.map

package/dist/components/energy-bar-chart.d.ts

@@ -0,0 +1,43 @@
+"use client";
+
+import { BarChartCategory, BarChartLineSeries, BarChartSeries } from "./bar-chart.js";
+import { t as Format } from "../number-flow-Bch81ixZ.js";
+
+//#region src/components/energy-bar-chart.d.ts
+type Category = BarChartCategory;
+interface HourBucket {
+  hour: number;
+  solar: number;
+  battery: number;
+  grid: number;
+}
+type EnergyBarSeries<TDatum = HourBucket> = BarChartSeries<TDatum>;
+type EnergyBarLineSeries<TDatum = HourBucket> = BarChartLineSeries<TDatum>;
+interface EnergyBarChartProps<TDatum> {
+  data: TDatum[];
+  series: BarChartSeries<TDatum>[];
+  lines?: BarChartLineSeries<TDatum>[];
+  getCategory: (datum: TDatum) => Category;
+  categories?: Category[];
+  categoryTicks?: Category[];
+  formatCategory?: (category: Category) => string;
+  formatTooltipCategory?: (category: Category) => string;
+  highlightedCategory?: Category;
+  showHighlightLine?: boolean;
+  title?: string;
+  yAxisUnit?: string;
+  formatValue?: (value: number) => string;
+  totalSuffix?: string;
+  totalFormat?: Format;
+  height?: number;
+  className?: string;
+}
+declare function EnergyBarChart<TDatum>({
+  totalSuffix,
+  totalFormat,
+  className,
+  ...rest
+}: EnergyBarChartProps<TDatum>): React.ReactElement;
+//#endregion
+export { Category, EnergyBarChart, EnergyBarLineSeries, EnergyBarSeries, HourBucket };
+//# sourceMappingURL=energy-bar-chart.d.ts.map

package/dist/components/energy-bar-chart.js

@@ -0,0 +1,22 @@
+"use client";
+import { BarChart } from "./bar-chart.js";
+import NumberFlow from "./number-flow.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/energy-bar-chart.tsx
+function EnergyBarChart({ totalSuffix, totalFormat, className, ...rest }) {
+	return /* @__PURE__ */ jsx(BarChart, {
+		...rest,
+		className,
+		renderTotal: (value, animated) => /* @__PURE__ */ jsx(NumberFlow, {
+			value,
+			animated,
+			...totalSuffix !== void 0 && { suffix: totalSuffix },
+			...totalFormat !== void 0 && { format: totalFormat },
+			className: "text-base font-bold text-gray tabular-nums"
+		})
+	});
+}
+//#endregion
+export { EnergyBarChart };
+
+//# sourceMappingURL=energy-bar-chart.js.map