@blenx-dev/components 0.0.0

package/dist/components/Button/button.css.js

@@ -0,0 +1,37 @@
+/* empty css                                               */
+/* empty css                                             */
+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/Button/button.css.ts
+var variant = createRuntimeFn({
+	defaultClassName: "_1xjvr4t9",
+	variantClassNames: {
+		intent: {
+			primary: "_1xjvr4ta",
+			neutral: "_1xjvr4tb",
+			success: "_1xjvr4tc",
+			warning: "_1xjvr4td",
+			danger: "_1xjvr4te",
+			info: "_1xjvr4tf",
+			mono: "_1xjvr4tg"
+		},
+		size: {
+			xsmall: "_1xjvr4th",
+			small: "_1xjvr4ti",
+			icon: "_1xjvr4tj",
+			medium: "_1xjvr4tk",
+			large: "_1xjvr4tl"
+		},
+		variant: {
+			solid: "_1xjvr4tm",
+			soft: "_1xjvr4tn",
+			outline: "_1xjvr4to",
+			ghost: "_1xjvr4tp",
+			link: "_1xjvr4tq"
+		}
+	},
+	defaultVariants: {},
+	compoundVariants: []
+});
+//#endregion
+export { variant };

package/dist/components/Button/button.js

@@ -0,0 +1,28 @@
+import clsx from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { applyBaseSprinkles } from "../../utils/ve-style.utils.js";
+import { Spinner } from "../Spinner/spinner.js";
+import { variant } from "./button.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+//#region src/components/Button/button.tsx
+function Button$1({ children, variant: variant$1 = "solid", intent, size = "small", disabled: disabledProp, loading, className, ...props }) {
+	const isDisabled = Boolean(loading || disabledProp);
+	const resolvedVariant = intent === "mono" ? "soft" : variant$1;
+	const [boxProps, restProps] = applyBaseSprinkles(props);
+	return /* @__PURE__ */ jsxs(Button, {
+		className: clsx(boxProps, variant({
+			variant: resolvedVariant,
+			intent: intent ?? "primary",
+			size
+		}), className),
+		"aria-disabled": loading || void 0,
+		"data-loading": loading ? "" : void 0,
+		"data-slot": "button",
+		nativeButton: !props.render,
+		disabled: isDisabled,
+		...restProps,
+		children: [loading && /* @__PURE__ */ jsx(Spinner, { "data-slot": "button-loading-indicator" }), children]
+	});
+}
+//#endregion
+export { Button$1 as Button };

package/dist/components/Calendar/calendar.css.js

@@ -0,0 +1,23 @@
+/* empty css                                               */
+/* empty css                                             */
+/* empty css                        */
+//#region src/components/Calendar/calendar.css.ts
+var root = "ygj0r20";
+var months = "ygj0r21";
+var monthCaption = "ygj0r22";
+var captionLabel = "ygj0r23";
+var nav = "ygj0r24";
+var buttonNav = "ygj0r25";
+var monthGrid = "ygj0r26";
+var weekday = "ygj0r27";
+var day = "ygj0r28";
+var dayButton = "ygj0r29";
+var dayButtonSelected = "ygj0r2a";
+var dayButtonToday = "ygj0r2b";
+var dayButtonDisabled = "ygj0r2c";
+var dayButtonOutside = "ygj0r2d";
+var footer = "ygj0r2e";
+var dropdowns = "ygj0r2f";
+var dropdown = "ygj0r2g";
+//#endregion
+export { buttonNav, captionLabel, day, dayButton, dayButtonDisabled, dayButtonOutside, dayButtonSelected, dayButtonToday, dropdown, dropdowns, footer, monthCaption, monthGrid, months, nav, root, weekday };

package/dist/components/Calendar/calendar.js

@@ -0,0 +1,104 @@
+"use client";
+import clsx from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { Button } from "../Button/button.js";
+import { buttonNav, captionLabel, day, dayButton, dropdown, dropdowns, footer, monthCaption, monthGrid, months, nav, root, weekday } from "./calendar.css.js";
+import { CaretLeftIcon, CaretRightIcon, CaretUpDownIcon } from "@phosphor-icons/react";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { DayPicker } from "react-day-picker";
+//#region src/components/Calendar/calendar.tsx
+function StyledDayButton({ day: _day, modifiers, className, ...props }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	const isSelected = modifiers.selected;
+	const isToday = modifiers.today;
+	const isDisabled = modifiers.disabled;
+	const isOutside = modifiers.outside;
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		className: clsx(dayButton, isSelected && "ygj0r2a", isToday && "ygj0r2b", isDisabled && "ygj0r2c", isOutside && "ygj0r2d", className),
+		...props
+	});
+}
+function Calendar({ className, components: userComponents, ...props }) {
+	return /* @__PURE__ */ jsx(DayPicker, {
+		classNames: {
+			root: clsx(root, className),
+			months,
+			month: "",
+			month_caption: monthCaption,
+			caption_label: captionLabel,
+			nav,
+			button_previous: buttonNav,
+			button_next: buttonNav,
+			chevron: "",
+			month_grid: monthGrid,
+			weekdays: "",
+			weekday,
+			weeks: "",
+			week: "",
+			day,
+			day_button: "",
+			footer,
+			dropdowns,
+			dropdown,
+			dropdown_root: "",
+			months_dropdown: "",
+			years_dropdown: "",
+			week_number: "",
+			week_number_header: "",
+			selected: "",
+			today: "",
+			disabled: "",
+			hidden: "",
+			outside: "",
+			focused: "",
+			range_start: "",
+			range_end: "",
+			range_middle: "",
+			weeks_before_enter: "",
+			weeks_before_exit: "",
+			weeks_after_enter: "",
+			weeks_after_exit: "",
+			caption_after_enter: "",
+			caption_after_exit: "",
+			caption_before_enter: "",
+			caption_before_exit: ""
+		},
+		components: {
+			Chevron: ({ orientation, ...chevronProps }) => {
+				if (orientation === "left") return /* @__PURE__ */ jsx(Button, {
+					size: "icon",
+					variant: "ghost",
+					children: /* @__PURE__ */ jsx(CaretLeftIcon, {
+						...chevronProps,
+						"aria-hidden": "true"
+					})
+				});
+				if (orientation === "right") return /* @__PURE__ */ jsx(Button, {
+					size: "icon",
+					variant: "ghost",
+					children: /* @__PURE__ */ jsx(CaretRightIcon, {
+						...chevronProps,
+						"aria-hidden": "true"
+					})
+				});
+				return /* @__PURE__ */ jsx(Button, {
+					size: "icon",
+					variant: "ghost",
+					children: /* @__PURE__ */ jsx(CaretUpDownIcon, {
+						...chevronProps,
+						"aria-hidden": "true"
+					})
+				});
+			},
+			...userComponents,
+			DayButton: StyledDayButton
+		},
+		...props
+	});
+}
+//#endregion
+export { Calendar };

package/dist/components/Card/card.js

@@ -0,0 +1,46 @@
+import { Text } from "../Text/text.js";
+import "../Text/index.js";
+import { Box } from "../Box/box.js";
+import { HStack } from "../Stack/stack.js";
+import { Surface } from "../Surface/surface.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Card/card.tsx
+function Card(props) {
+	return /* @__PURE__ */ jsx(Surface, {
+		p: "medium",
+		withBorder: true,
+		variant: "sunken",
+		...props
+	});
+}
+function CardHeader(props) {
+	return /* @__PURE__ */ jsx(Box, {
+		marginBottom: "md",
+		...props
+	});
+}
+function CardBody(props) {
+	return /* @__PURE__ */ jsx(Box, { ...props });
+}
+function CardFooter(props) {
+	return /* @__PURE__ */ jsx(HStack, {
+		justify: "end",
+		gap: "small",
+		...props
+	});
+}
+function CardTitle(props) {
+	return /* @__PURE__ */ jsx(Text, {
+		variant: "h2",
+		...props
+	});
+}
+function CardDescription(props) {
+	return /* @__PURE__ */ jsx(Text, {
+		variant: "body2",
+		color: "secondary",
+		...props
+	});
+}
+//#endregion
+export { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/components/Checkbox/checkbox.css.js

@@ -0,0 +1,13 @@
+/* empty css                                               */
+/* empty css                                             */
+/* empty css                        */
+//#region src/components/Checkbox/checkbox.css.ts
+var root = "_6qq61v0";
+var rootDisabled = "_6qq61v1";
+var group = "_6qq61v2";
+var indicator = "_6qq61v3";
+var indicatorChecked = "_6qq61v4";
+var indicatorIndeterminate = "_6qq61v5";
+var icon = "_6qq61v6";
+//#endregion
+export { group, icon, indicator, indicatorChecked, indicatorIndeterminate, root, rootDisabled };

package/dist/components/Checkbox/checkbox.js

@@ -0,0 +1,59 @@
+"use client";
+import clsx from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { group, icon, indicator, root } from "./checkbox.css.js";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+//#region src/components/Checkbox/checkbox.tsx
+function CheckboxGroup$1({ className, style, ...props }) {
+	return /* @__PURE__ */ jsx(CheckboxGroup, {
+		className: clsx(group, className),
+		style,
+		...props
+	});
+}
+function Checkbox$1({ className, style, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		...props,
+		render: (rootProps, { disabled }) => /* @__PURE__ */ jsx("span", {
+			...rootProps,
+			className: clsx(root, disabled && "_6qq61v1", className),
+			style,
+			"data-slot": "checkbox",
+			children: /* @__PURE__ */ jsx(Checkbox.Indicator, { render: (_indicatorProps, state) => /* @__PURE__ */ jsx("span", {
+				..._indicatorProps,
+				className: clsx(indicator, state.checked && "_6qq61v4", state.indeterminate && "_6qq61v5"),
+				"data-slot": "checkbox-indicator",
+				children: state.indeterminate ? /* @__PURE__ */ jsx("svg", {
+					"aria-hidden": "true",
+					className: icon,
+					fill: "none",
+					height: "24",
+					stroke: "currentColor",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: "3",
+					viewBox: "0 0 24 24",
+					width: "24",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: /* @__PURE__ */ jsx("path", { d: "M5.252 12h13.496" })
+				}) : /* @__PURE__ */ jsx("svg", {
+					"aria-hidden": "true",
+					className: icon,
+					fill: "none",
+					height: "24",
+					stroke: "currentColor",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: "3",
+					viewBox: "0 0 24 24",
+					width: "24",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })
+				})
+			}) })
+		})
+	});
+}
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxGroup$1 as CheckboxGroup };

package/dist/components/CloseButton/close-button.css.js

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

package/dist/components/CloseButton/close-button.js

@@ -0,0 +1,27 @@
+import { IconButton } from "../IconButton/icon-button.js";
+import { icon } from "./close-button.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/CloseButton/close-button.tsx
+function CloseButton(props) {
+	return /* @__PURE__ */ jsx(IconButton, {
+		...props,
+		children: /* @__PURE__ */ jsxs("svg", {
+			className: icon,
+			viewBox: "0 0 24 24",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("line", {
+				x1: "18",
+				y1: "6",
+				x2: "6",
+				y2: "18"
+			}), /* @__PURE__ */ jsx("line", {
+				x1: "6",
+				y1: "6",
+				x2: "18",
+				y2: "18"
+			})]
+		})
+	});
+}
+//#endregion
+export { CloseButton };

package/dist/components/CloseButton/index.js

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

package/dist/components/ColorPicker/color-picker.js

@@ -0,0 +1,103 @@
+import { Text } from "../Text/text.js";
+import { VStack } from "../Stack/stack.js";
+import { Button } from "../Button/button.js";
+import { Input } from "../Input/input.js";
+import { ColorSwatch } from "../ColorSwatch/color-swatch.js";
+import { Field, FieldLabel } from "../Field/field.js";
+import { Popover, PopoverArrow, PopoverCompound, PopoverPopup, PopoverPositioner, PopoverTrigger } from "../Popover/popover.js";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { HexAlphaColorPicker, HexColorInput } from "react-colorful";
+//#region src/components/ColorPicker/color-picker.tsx
+var HEX_REGEX = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+function ColorPicker({ value, onChange, label }) {
+	const [open, setOpen] = useState(false);
+	const [internalValue, setInternalValue] = useState(value);
+	const lastValidRef = useRef(value);
+	const triggerRef = useRef(null);
+	const prevValueRef = useRef(value);
+	useEffect(() => {
+		if (prevValueRef.current !== value) {
+			prevValueRef.current = value;
+			setInternalValue(value);
+			lastValidRef.current = value;
+		}
+	}, [value]);
+	const handleOpenChange = useCallback((nextOpen) => {
+		if (!nextOpen && triggerRef.current) triggerRef.current.focus();
+		setOpen(nextOpen);
+	}, []);
+	const handleHexInputChange = useCallback((newColor) => {
+		setInternalValue(newColor);
+		if (HEX_REGEX.test(newColor)) {
+			lastValidRef.current = newColor;
+			onChange(newColor);
+		}
+	}, [onChange]);
+	const revertToLastValid = useCallback(() => {
+		setInternalValue(lastValidRef.current);
+		onChange(lastValidRef.current);
+	}, [onChange]);
+	return /* @__PURE__ */ jsx(Field, { children: /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [
+			label && /* @__PURE__ */ jsx(FieldLabel, {
+				onClick: () => {
+					triggerRef.current?.click();
+					triggerRef.current?.focus();
+				},
+				children: label
+			}),
+			/* @__PURE__ */ jsxs(PopoverTrigger, {
+				ref: triggerRef,
+				"aria-label": label ? `${label} color picker` : "Color picker",
+				render: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline"
+				}),
+				children: [
+					/* @__PURE__ */ jsx(ColorSwatch, {
+						color: value,
+						size: 20
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						variant: "body2",
+						children: value
+					}),
+					/* @__PURE__ */ jsx(CaretDownIcon, {})
+				]
+			}),
+			/* @__PURE__ */ jsx(PopoverCompound.Portal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
+				sideOffset: 6,
+				side: "bottom",
+				align: "start",
+				children: /* @__PURE__ */ jsxs(PopoverPopup, { children: [/* @__PURE__ */ jsx(PopoverArrow, {}), /* @__PURE__ */ jsxs(VStack, {
+					gap: "xsmall",
+					children: [/* @__PURE__ */ jsx(HexAlphaColorPicker, {
+						color: internalValue,
+						onChange: (color) => {
+							setInternalValue(color);
+							lastValidRef.current = color;
+							onChange(color);
+						}
+					}), /* @__PURE__ */ jsx(Input, {
+						size: "sm",
+						render: /* @__PURE__ */ jsx(HexColorInput, {
+							color: internalValue,
+							onChange: handleHexInputChange,
+							onBlur: () => {
+								if (!HEX_REGEX.test(internalValue)) revertToLastValid();
+							},
+							prefixed: true,
+							"aria-label": "Hex color value"
+						})
+					})]
+				})] })
+			}) })
+		]
+	}) });
+}
+//#endregion
+export { ColorPicker };

package/dist/components/ColorSwatch/color-swatch.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ColorSwatch/color-swatch.tsx
+function ColorSwatch({ color, size = 16, style, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		style: {
+			width: size,
+			height: size,
+			backgroundColor: color,
+			borderRadius: 4,
+			...style
+		}
+	});
+}
+//#endregion
+export { ColorSwatch };

package/dist/components/Combobox/combobox.css.js

@@ -0,0 +1,36 @@
+/* empty css                                               */
+/* empty css                                             */
+/* empty css                        */
+//#region src/components/Combobox/combobox.css.ts
+var inputGroup = "fztm380";
+var inputSm = "fztm381";
+var inputDefault = "fztm382";
+var inputLg = "fztm383";
+var startAddon = "fztm384";
+var startAddonSm = "fztm385";
+var startAddonDefault = "fztm386";
+var adornment = "fztm387";
+var adornmentSm = "fztm388";
+var adornmentDefault = "fztm389";
+var adornmentEndSm = "fztm38a";
+var adornmentEndDefault = "fztm38b";
+var positioner = "fztm38c";
+var popupShell = "fztm38d";
+var popup = "fztm38e";
+var separator = "fztm38f";
+var group = "fztm38g";
+var groupLabel = "fztm38h";
+var empty = "fztm38i";
+var row = "fztm38j";
+var list = "fztm38l";
+var status = "fztm38m";
+var item = "fztm38n";
+var itemIndicator = "fztm38o";
+var itemContent = "fztm38p";
+var chips = "fztm38q";
+var chipsStartAddon = "fztm38r";
+var chipsInput = "fztm38t";
+var chip = "fztm38u";
+var chipRemove = "fztm38v";
+//#endregion
+export { adornment, adornmentDefault, adornmentEndDefault, adornmentEndSm, adornmentSm, chip, chipRemove, chips, chipsInput, chipsStartAddon, empty, group, groupLabel, inputDefault, inputGroup, inputLg, inputSm, item, itemContent, itemIndicator, list, popup, popupShell, positioner, row, separator, startAddon, startAddonDefault, startAddonSm, status };