@blenx-dev/components 0.0.0

package/dist/components/Combobox/combobox.js

@@ -0,0 +1,236 @@
+import clsx from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { ScrollArea } from "../ScrollArea/scroll-area.js";
+import { CloseButton } from "../CloseButton/close-button.js";
+import "../CloseButton/index.js";
+import { Input } from "../Input/input.js";
+import { adornment, chip, chipRemove, chips, chipsInput, empty, group, groupLabel, inputDefault, inputGroup, inputLg, inputSm, item, itemContent, itemIndicator, list, popup, popupShell, positioner, row, separator, status } from "./combobox.css.js";
+import { CaretUpDownIcon, CheckIcon, XIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/components/Combobox/combobox.tsx
+var ComboboxContext = React$1.createContext({
+	chipsRef: null,
+	multiple: false
+});
+function Combobox$1(props) {
+	const chipsRef = React$1.useRef(null);
+	const contextValue = React$1.useMemo(() => ({
+		chipsRef,
+		multiple: Boolean(props.multiple)
+	}), [props.multiple]);
+	return /* @__PURE__ */ jsx(ComboboxContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Combobox.Root, { ...props })
+	});
+}
+function ComboboxChipsInput({ size, className, ...props }) {
+	const resolvedSize = size ?? "default";
+	return /* @__PURE__ */ jsx(Combobox.Input, {
+		className: clsx(chipsInput, className),
+		"data-size": typeof resolvedSize === "string" ? resolvedSize : void 0,
+		"data-slot": "combobox-chips-input",
+		size: typeof resolvedSize === "number" ? resolvedSize : void 0,
+		...props
+	});
+}
+function ComboboxTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Trigger, {
+		className,
+		"data-slot": "combobox-trigger",
+		...props
+	});
+}
+function ComboboxClear({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Clear, {
+		className: clsx(adornment, className),
+		"data-slot": "combobox-clear",
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(XIcon, {
+			size: 18,
+			weight: "regular"
+		})
+	});
+}
+function ComboboxInput({ showTrigger = true, showClear = false, startAddon: startAddonNode, size, triggerProps, clearProps, render: renderProp, className, ...props }) {
+	const resolvedSize = size ?? "default";
+	const renderSize = resolvedSize === "sm" || resolvedSize === "lg" ? resolvedSize : "default";
+	const inputCls = clsx(resolvedSize === "sm" ? inputSm : resolvedSize === "lg" ? inputLg : inputDefault, className);
+	return /* @__PURE__ */ jsxs(Combobox.InputGroup, {
+		className: inputGroup,
+		"data-slot": "combobox-input-group",
+		children: [
+			startAddonNode && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: clsx("fztm384", resolvedSize === "sm" ? "fztm385" : "fztm386"),
+				"data-slot": "combobox-start-addon",
+				children: startAddonNode
+			}),
+			/* @__PURE__ */ jsx(Combobox.Input, {
+				"data-slot": "combobox-input",
+				render: renderProp ?? /* @__PURE__ */ jsx(Input, { size: renderSize }),
+				className: inputCls,
+				...props
+			}),
+			showTrigger && /* @__PURE__ */ jsx(Combobox.Trigger, {
+				className: clsx("fztm387", resolvedSize === "sm" ? "fztm388" : "fztm389", resolvedSize === "sm" ? "fztm38a" : "fztm38b"),
+				"data-slot": "combobox-trigger",
+				...triggerProps,
+				children: /* @__PURE__ */ jsx(CaretUpDownIcon, {
+					size: resolvedSize === "sm" ? 16 : 18,
+					weight: "regular"
+				})
+			}),
+			showClear && /* @__PURE__ */ jsx(ComboboxClear, {
+				className: clsx("fztm387", resolvedSize === "sm" ? "fztm388" : "fztm389", resolvedSize === "sm" ? "fztm38a" : "fztm38b"),
+				render: /* @__PURE__ */ jsx(CloseButton, {}),
+				...clearProps
+			})
+		]
+	});
+}
+function ComboboxPopup({ children, side = "bottom", sideOffset = 4, alignOffset, align = "start", anchor: anchorProp, portalProps, className, ...props }) {
+	const { chipsRef } = React$1.useContext(ComboboxContext);
+	const anchor = anchorProp ?? chipsRef;
+	return /* @__PURE__ */ jsx(Combobox.Portal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			align,
+			alignOffset,
+			anchor,
+			className: positioner,
+			"data-slot": "combobox-positioner",
+			side,
+			sideOffset,
+			children: /* @__PURE__ */ jsx("span", {
+				className: clsx(popupShell, className),
+				children: /* @__PURE__ */ jsx(Combobox.Popup, {
+					className: popup,
+					"data-slot": "combobox-popup",
+					...props,
+					children
+				})
+			})
+		})
+	});
+}
+function ComboboxItem({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		className: clsx(item, className),
+		"data-slot": "combobox-item",
+		...props,
+		children: [/* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			className: itemIndicator,
+			children: /* @__PURE__ */ jsx(CheckIcon, {
+				size: 16,
+				weight: "bold"
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: itemContent,
+			children
+		})]
+	});
+}
+function ComboboxSeparator(props) {
+	return /* @__PURE__ */ jsx(Combobox.Separator, {
+		className: separator,
+		"data-slot": "combobox-separator",
+		...props
+	});
+}
+function ComboboxGroup(props) {
+	return /* @__PURE__ */ jsx(Combobox.Group, {
+		className: group,
+		"data-slot": "combobox-group",
+		...props
+	});
+}
+function ComboboxGroupLabel(props) {
+	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+		className: groupLabel,
+		"data-slot": "combobox-group-label",
+		...props
+	});
+}
+function ComboboxEmpty(props) {
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		className: empty,
+		"data-slot": "combobox-empty",
+		...props
+	});
+}
+function ComboboxRow(props) {
+	return /* @__PURE__ */ jsx(Combobox.Row, {
+		className: row,
+		"data-slot": "combobox-row",
+		...props
+	});
+}
+function ComboboxValue(props) {
+	return /* @__PURE__ */ jsx(Combobox.Value, {
+		"data-slot": "combobox-value",
+		...props
+	});
+}
+function ComboboxList(props) {
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		scrollbarGutter: true,
+		scrollFade: true,
+		children: /* @__PURE__ */ jsx(Combobox.List, {
+			className: list,
+			"data-slot": "combobox-list",
+			...props
+		})
+	});
+}
+function ComboboxStatus(props) {
+	return /* @__PURE__ */ jsx(Combobox.Status, {
+		className: status,
+		"data-slot": "combobox-status",
+		...props
+	});
+}
+function ComboboxCollection(props) {
+	return /* @__PURE__ */ jsx(Combobox.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+}
+function ComboboxChips({ children, startAddon: startAddonNode, className, ...props }) {
+	const { chipsRef } = React$1.useContext(ComboboxContext);
+	return /* @__PURE__ */ jsxs(Combobox.Chips, {
+		"data-slot": "combobox-chips",
+		ref: chipsRef,
+		className: clsx(chips, className),
+		...props,
+		children: [startAddonNode && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			"data-slot": "combobox-start-addon",
+			className: "fztm38r",
+			children: startAddonNode
+		}), children]
+	});
+}
+function ComboboxChip({ children, removeProps, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox.Chip, {
+		className: clsx(chip, className),
+		"data-slot": "combobox-chip",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ComboboxChipRemove, { ...removeProps })]
+	});
+}
+function ComboboxChipRemove({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+		"aria-label": "Remove",
+		className: clsx(chipRemove, className),
+		"data-slot": "combobox-chip-remove",
+		...props,
+		children: /* @__PURE__ */ jsx(XIcon, {
+			size: 16,
+			weight: "regular"
+		})
+	});
+}
+var useComboboxFilter = Combobox.useFilter;
+//#endregion
+export { Combobox$1 as Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContext, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxFilter };

package/dist/components/Command/command.css.js

@@ -0,0 +1,18 @@
+/* empty css                                               */
+/* empty css                                             */
+/* empty css                       */
+//#region src/components/Command/command.css.ts
+var root = "_1c0t4640";
+var inputWrapper = "_1c0t4641";
+var inputIcon = "_1c0t4642";
+var input = "_1c0t4643";
+var list = "_1c0t4644";
+var group = "_1c0t4645";
+var groupHeading = "_1c0t4646";
+var item = "_1c0t4647";
+var itemActive = "_1c0t4648";
+var itemDisabled = "_1c0t4649";
+var separator = "_1c0t464a";
+var empty = "_1c0t464b";
+//#endregion
+export { empty, group, groupHeading, input, inputIcon, inputWrapper, item, itemActive, itemDisabled, list, root, separator };

package/dist/components/Command/command.js

@@ -0,0 +1,264 @@
+import clsx from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { empty, group, input, inputIcon, inputWrapper, item, list, root, separator } from "./command.css.js";
+import { MagnifyingGlass } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+//#region src/components/Command/command.tsx
+var CommandContext = createContext(null);
+function useCommandContext() {
+	const ctx = useContext(CommandContext);
+	if (!ctx) throw new Error("Command compound components must be used within <Command>");
+	return ctx;
+}
+var listboxIdCounter = 0;
+function nextListboxId() {
+	return `cmd-listbox-${++listboxIdCounter}`;
+}
+function Command({ children, onItemSelect, className, style }) {
+	const [query, setQuery] = useState("");
+	const [activeIndex, setActiveIndex] = useState(-1);
+	const [items, setItems] = useState(/* @__PURE__ */ new Map());
+	const listboxId = useRef(nextListboxId()).current;
+	const handleItemSelect = useCallback((value) => {
+		onItemSelect?.(value);
+	}, [onItemSelect]);
+	const registerItem = useCallback((item) => {
+		setItems((prev) => {
+			const next = new Map(prev);
+			next.set(item.id, item);
+			return next;
+		});
+		return () => {
+			setItems((prev) => {
+				const next = new Map(prev);
+				next.delete(item.id);
+				return next;
+			});
+		};
+	}, []);
+	const filteredItems = useMemo(() => {
+		const allItems = [...items.values()];
+		if (!query.trim()) return allItems;
+		const q = query.toLowerCase().trim();
+		return allItems.filter((item) => {
+			if (item.disabled) return false;
+			if (item.value.toLowerCase().includes(q)) return true;
+			if (item.keywords?.some((k) => k.toLowerCase().includes(q))) return true;
+			return false;
+		});
+	}, [query, items]);
+	useEffect(() => {
+		setActiveIndex(-1);
+	}, [query]);
+	const contextValue = useMemo(() => ({
+		query,
+		setQuery,
+		filteredItems,
+		activeIndex,
+		setActiveIndex,
+		onItemSelect: handleItemSelect,
+		registerItem,
+		listboxId
+	}), [
+		query,
+		filteredItems,
+		activeIndex,
+		handleItemSelect,
+		registerItem,
+		listboxId
+	]);
+	return /* @__PURE__ */ jsx(CommandContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			role: "combobox",
+			"aria-expanded": true,
+			"aria-haspopup": "listbox",
+			"aria-controls": listboxId,
+			className: clsx(root, className),
+			style,
+			children
+		})
+	});
+}
+function CommandInput({ placeholder = "Search…", className, style }) {
+	const { query, setQuery } = useCommandContext();
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Escape" && query) {
+			e.preventDefault();
+			e.stopPropagation();
+			setQuery("");
+			return;
+		}
+		if (e.key === "Escape") {
+			e.target.blur();
+			return;
+		}
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			(e.currentTarget.parentElement?.nextElementSibling)?.focus();
+		}
+	}, [query, setQuery]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(inputWrapper, className),
+		style,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: inputIcon,
+			children: /* @__PURE__ */ jsx(MagnifyingGlass, {
+				size: 16,
+				weight: "regular"
+			})
+		}), /* @__PURE__ */ jsx("input", {
+			className: input,
+			role: "searchbox",
+			placeholder,
+			value: query,
+			onChange: (e) => setQuery(e.target.value),
+			onKeyDown: handleKeyDown,
+			autoComplete: "off",
+			autoCorrect: "off",
+			spellCheck: false
+		})]
+	});
+}
+function CommandList({ children, className, style }) {
+	const { filteredItems, activeIndex, setActiveIndex, onItemSelect, listboxId } = useCommandContext();
+	const listRef = useRef(null);
+	const handleKeyDown = useCallback((e) => {
+		if (filteredItems.length === 0) return;
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				setActiveIndex((prev) => {
+					return prev < filteredItems.length - 1 ? prev + 1 : 0;
+				});
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				setActiveIndex((prev) => {
+					return prev > 0 ? prev - 1 : filteredItems.length - 1;
+				});
+				break;
+			case "Enter": {
+				e.preventDefault();
+				const activeItem = filteredItems[activeIndex];
+				if (activeItem && !activeItem.disabled) onItemSelect(activeItem.value);
+				break;
+			}
+			case "Escape":
+				e.preventDefault();
+				e.target.blur();
+				break;
+		}
+	}, [
+		filteredItems,
+		setActiveIndex,
+		onItemSelect,
+		activeIndex
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: listRef,
+		id: listboxId,
+		role: "listbox",
+		tabIndex: -1,
+		className: clsx(list, className),
+		style,
+		onKeyDown: handleKeyDown,
+		children
+	});
+}
+function CommandEmpty({ children, className, style }) {
+	const { query, filteredItems } = useCommandContext();
+	if (query.trim() && filteredItems.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: clsx(empty, className),
+		style,
+		children: children ?? "No results found."
+	});
+	return null;
+}
+function CommandGroup({ heading, children, className, style }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": heading,
+		className: clsx(group, className),
+		style,
+		children: [heading && /* @__PURE__ */ jsx("div", {
+			className: "_1c0t4646",
+			children: heading
+		}), children]
+	});
+}
+function CommandItem({ value, keywords, disabled = false, children, className, style }) {
+	const { filteredItems, activeIndex, setActiveIndex, registerItem, onItemSelect } = useCommandContext();
+	useEffect(() => {
+		const unregister = registerItem({
+			id: value,
+			value,
+			keywords,
+			disabled
+		});
+		return () => {
+			unregister();
+		};
+	}, [
+		value,
+		keywords,
+		disabled,
+		registerItem
+	]);
+	const isVisible = useMemo(() => filteredItems.some((item) => item.id === value), [filteredItems, value]);
+	const itemIndex = useMemo(() => filteredItems.findIndex((item) => item.id === value), [filteredItems, value]);
+	const isActive = activeIndex >= 0 && itemIndex === activeIndex;
+	const itemRef = useRef(null);
+	useEffect(() => {
+		if (isActive && itemRef.current) itemRef.current.scrollIntoView({ block: "nearest" });
+	}, [isActive]);
+	const handleClick = useCallback(() => {
+		if (!disabled) onItemSelect(value);
+	}, [
+		disabled,
+		onItemSelect,
+		value
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			if (!disabled) onItemSelect(value);
+		}
+	}, [
+		disabled,
+		onItemSelect,
+		value
+	]);
+	const handleMouseEnter = useCallback(() => {
+		if (!disabled && itemIndex >= 0) setActiveIndex(itemIndex);
+	}, [
+		disabled,
+		setActiveIndex,
+		itemIndex
+	]);
+	if (!isVisible) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: itemRef,
+		role: "option",
+		"aria-selected": isActive,
+		"aria-disabled": disabled,
+		"data-value": value,
+		tabIndex: -1,
+		className: clsx(item, isActive && "_1c0t4648", disabled && "_1c0t4649", className),
+		style,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		onMouseEnter: handleMouseEnter,
+		children
+	});
+}
+function CommandSeparator({ className, style }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		className: clsx(separator, className),
+		style
+	});
+}
+//#endregion
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator };

package/dist/components/Container/container.css.js

@@ -0,0 +1,28 @@
+import { createRuntimeFn } from "../../node_modules/.bun/@vanilla-extract_recipes@0.5.7_19e937df7e0b57ed/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+/* empty css                         */
+//#region src/components/Container/container.css.ts
+var containerRecipe = createRuntimeFn({
+	defaultClassName: "_88ggzd0",
+	variantClassNames: {
+		size: {
+			xxs: "_88ggzd1",
+			xs: "_88ggzd2",
+			sm: "_88ggzd3",
+			md: "_88ggzd4",
+			lg: "_88ggzd5",
+			xl: "_88ggzd6",
+			"2xl": "_88ggzd7",
+			"3xl": "_88ggzd8",
+			full: "_88ggzd9"
+		},
+		centered: { true: "_88ggzda" },
+		contentCentered: { true: "_88ggzdb" }
+	},
+	defaultVariants: {
+		size: "lg",
+		centered: true
+	},
+	compoundVariants: []
+});
+//#endregion
+export { containerRecipe };

package/dist/components/Container/container.js

@@ -0,0 +1,18 @@
+import clsx from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { Box } from "../Box/box.js";
+import { containerRecipe } from "./container.css.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Container/container.tsx
+function Container({ size, centered = true, contentCentered, ...props }) {
+	return /* @__PURE__ */ jsx(Box, {
+		...props,
+		flexShrink: 0,
+		className: clsx(containerRecipe({
+			size,
+			centered,
+			contentCentered
+		}))
+	});
+}
+//#endregion
+export { Container };

package/dist/components/CopyButton/copy-button.css.js

@@ -0,0 +1,5 @@
+/* empty css                           */
+//#region src/components/CopyButton/copy-button.css.ts
+var icon = "_16kw4ct0";
+//#endregion
+export { icon };

package/dist/components/CopyButton/copy-button.js

@@ -0,0 +1,41 @@
+import { IconButton } from "../IconButton/icon-button.js";
+import { icon } from "./copy-button.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+//#region src/components/CopyButton/copy-button.tsx
+function CopyButton({ copyValue, onClick, ...props }) {
+	const [copied, setCopied] = useState(false);
+	const handleClick = useCallback((e) => {
+		if (copyValue) navigator.clipboard.writeText(copyValue).then(() => {
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2e3);
+		});
+		onClick?.(e);
+	}, [copyValue, onClick]);
+	return /* @__PURE__ */ jsx(IconButton, {
+		variant: "soft",
+		...props,
+		title: copied ? "Copied!" : `Copy ${copyValue ?? ""}`,
+		onClick: handleClick,
+		children: copied ? /* @__PURE__ */ jsx("svg", {
+			className: icon,
+			viewBox: "0 0 24 24",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+		}) : /* @__PURE__ */ jsxs("svg", {
+			className: icon,
+			viewBox: "0 0 24 24",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("rect", {
+				x: "9",
+				y: "9",
+				width: "13",
+				height: "13",
+				rx: "2",
+				ry: "2"
+			}), /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })]
+		})
+	});
+}
+//#endregion
+export { CopyButton };

package/dist/components/CopyButton/index.js

@@ -0,0 +1 @@
+import "./copy-button.js";

package/dist/components/Dialog/dialog.css.js

@@ -0,0 +1,19 @@
+/* empty css                                               */
+/* empty css                                             */
+/* empty css                      */
+//#region src/components/Dialog/dialog.css.ts
+var backdrop = "_1g3yvu70";
+var viewport = "_1g3yvu71";
+var popup = "_1g3yvu72";
+var viewportShellBottomStickOnMobile = "_1g3yvu73";
+var popupBottomStickOnMobile = "_1g3yvu74";
+var closeButton = "_1g3yvu75";
+var header = "_1g3yvu76";
+var footer = "_1g3yvu77";
+var footerDefault = "_1g3yvu78";
+var footerBare = "_1g3yvu79";
+var title = "_1g3yvu7a";
+var description = "_1g3yvu7b";
+var panel = "_1g3yvu7c";
+//#endregion
+export { backdrop, closeButton, description, footer, footerBare, footerDefault, header, panel, popup, popupBottomStickOnMobile, title, viewport, viewportShellBottomStickOnMobile };