@blenx-dev/components 0.0.0

package/dist/components/Select/select.js

@@ -0,0 +1,129 @@
+import clsx from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { Field, FieldError, FieldLabel } from "../Field/field.js";
+import { groupLabel, icon, item, itemIndicator, label, popup, scrollArrow, separator, trigger } from "./select.css.js";
+import { CaretDownIcon, CaretUpIcon, CheckIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+//#region src/components/Select/select.tsx
+function SelectRoot({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Root, {
+		...props,
+		children
+	});
+}
+function SelectLabel(props) {
+	return /* @__PURE__ */ jsx(Select.Label, {
+		className: label,
+		...props
+	});
+}
+function SelectTrigger({ size = "default", className, style, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Trigger, {
+		className: clsx(trigger, size === "sm" && "_15t74bn2", size === "lg" && "_15t74bn3", className),
+		style,
+		...props
+	});
+}
+function SelectValue({ placeholder, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		placeholder,
+		...props
+	});
+}
+function SelectIcon(props) {
+	return /* @__PURE__ */ jsx(Select.Icon, {
+		className: icon,
+		...props,
+		children: /* @__PURE__ */ jsx(CaretDownIcon, { size: 16 })
+	});
+}
+function SelectPortal(props) {
+	return /* @__PURE__ */ jsx(Select.Portal, { ...props });
+}
+function SelectPositioner({ sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Positioner, {
+		sideOffset,
+		...props
+	});
+}
+function SelectPopup(props) {
+	return /* @__PURE__ */ jsx(Select.Popup, {
+		className: popup,
+		...props
+	});
+}
+function SelectList(props) {
+	return /* @__PURE__ */ jsx(Select.List, { ...props });
+}
+function SelectItem({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		className: item,
+		...props,
+		children: [/* @__PURE__ */ jsx(Select.ItemIndicator, {
+			className: itemIndicator,
+			children: /* @__PURE__ */ jsx(CheckIcon, {
+				size: 14,
+				weight: "bold"
+			})
+		}), /* @__PURE__ */ jsx(Select.ItemText, { children })]
+	});
+}
+function SelectSeparator(props) {
+	return /* @__PURE__ */ jsx(Select.Separator, {
+		className: separator,
+		...props
+	});
+}
+function SelectGroup(props) {
+	return /* @__PURE__ */ jsx(Select.Group, { ...props });
+}
+function SelectGroupLabel(props) {
+	return /* @__PURE__ */ jsx(Select.GroupLabel, {
+		className: groupLabel,
+		...props
+	});
+}
+function SelectScrollUpArrow(props) {
+	return /* @__PURE__ */ jsx(Select.ScrollUpArrow, {
+		className: scrollArrow,
+		...props,
+		children: /* @__PURE__ */ jsx(CaretUpIcon, { size: 12 })
+	});
+}
+function SelectScrollDownArrow(props) {
+	return /* @__PURE__ */ jsx(Select.ScrollDownArrow, {
+		className: scrollArrow,
+		...props,
+		children: /* @__PURE__ */ jsx(CaretDownIcon, { size: 12 })
+	});
+}
+function SelectWrapper({ label, error, children }) {
+	return /* @__PURE__ */ jsxs(Field, {
+		invalid: Boolean(error),
+		children: [
+			label && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+			children,
+			error && /* @__PURE__ */ jsx(FieldError, { children: error })
+		]
+	});
+}
+var Select$1 = {
+	Root: SelectRoot,
+	Label: SelectLabel,
+	Trigger: SelectTrigger,
+	Value: SelectValue,
+	Icon: SelectIcon,
+	Portal: SelectPortal,
+	Positioner: SelectPositioner,
+	Popup: SelectPopup,
+	List: SelectList,
+	Item: SelectItem,
+	Separator: SelectSeparator,
+	Group: SelectGroup,
+	GroupLabel: SelectGroupLabel,
+	ScrollUpArrow: SelectScrollUpArrow,
+	ScrollDownArrow: SelectScrollDownArrow,
+	Wrapper: SelectWrapper
+};
+//#endregion
+export { Select$1 as Select, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectLabel, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, SelectWrapper };

package/dist/components/Separator/separator.css.js

@@ -0,0 +1,27 @@
+/* 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/Separator/separator.css.ts
+var separator = createRuntimeFn({
+	defaultClassName: "_1u9hphp0",
+	variantClassNames: {
+		orientation: {
+			horizontal: "_1u9hphp1",
+			vertical: "_1u9hphp2"
+		},
+		tone: {
+			subtle: "_1u9hphp3",
+			strong: "_1u9hphp4"
+		}
+	},
+	defaultVariants: {
+		orientation: "horizontal",
+		tone: "strong"
+	},
+	compoundVariants: []
+});
+var withLabel = "_1u9hphp5";
+var label = "_1u9hphp6";
+//#endregion
+export { label, separator, withLabel };

package/dist/components/Separator/separator.js

@@ -0,0 +1,27 @@
+import clsx from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { label, separator, withLabel } from "./separator.css.js";
+import { jsx } from "react/jsx-runtime";
+import { Separator } from "@base-ui/react/separator";
+//#region src/components/Separator/separator.tsx
+function Separator$1({ orientation = "horizontal", label: label$1, tone = "subtle", className, style, ...props }) {
+	const baseCls = separator({
+		orientation,
+		tone
+	});
+	if (orientation === "horizontal" && label$1) return /* @__PURE__ */ jsx(Separator, {
+		className: clsx(baseCls, withLabel, className),
+		style,
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			className: label,
+			children: label$1
+		})
+	});
+	return /* @__PURE__ */ jsx(Separator, {
+		className: clsx(baseCls, className),
+		style,
+		...props
+	});
+}
+//#endregion
+export { Separator$1 as Separator };

package/dist/components/Sheet/sheet.css.js

@@ -0,0 +1,27 @@
+/* empty css                                               */
+/* empty css                                             */
+/* empty css                     */
+//#region src/components/Sheet/sheet.css.ts
+var backdrop = "_1e3d5zu0";
+var viewport = "_1e3d5zu1";
+var viewportBottom = "_1e3d5zu2";
+var viewportTop = "_1e3d5zu3";
+var viewportLeft = "_1e3d5zu4";
+var viewportRight = "_1e3d5zu5";
+var viewportInset = "_1e3d5zu6";
+var popup = "_1e3d5zu7";
+var popupBottom = "_1e3d5zu8";
+var popupTop = "_1e3d5zu9";
+var popupLeft = "_1e3d5zua";
+var popupRight = "_1e3d5zub";
+var popupInset = "_1e3d5zuc";
+var closeButton = "_1e3d5zud";
+var header = "_1e3d5zue";
+var footer = "_1e3d5zuf";
+var footerDefault = "_1e3d5zug";
+var footerBare = "_1e3d5zuh";
+var title = "_1e3d5zui";
+var description = "_1e3d5zuj";
+var panel = "_1e3d5zuk";
+//#endregion
+export { backdrop, closeButton, description, footer, footerBare, footerDefault, header, panel, popup, popupBottom, popupInset, popupLeft, popupRight, popupTop, title, viewport, viewportBottom, viewportInset, viewportLeft, viewportRight, viewportTop };

package/dist/components/Sheet/sheet.js

@@ -0,0 +1,112 @@
+"use client";
+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 { backdrop, description, footer, header, panel, popup, title, viewport } from "./sheet.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/Sheet/sheet.tsx
+var Sheet = Dialog.Root;
+var SheetPortal = Dialog.Portal;
+function SheetTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "sheet-trigger",
+		...props
+	});
+}
+function SheetClose(props) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "sheet-close",
+		...props
+	});
+}
+function SheetBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		className: clsx(backdrop, className),
+		"data-slot": "sheet-backdrop",
+		...props
+	});
+}
+function SheetViewport({ className, side, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Viewport, {
+		className: clsx(viewport, side === "bottom" && "_1e3d5zu2", side === "top" && "_1e3d5zu3", side === "left" && "_1e3d5zu4", side === "right" && "_1e3d5zu5", variant === "inset" && "_1e3d5zu6", className),
+		"data-slot": "sheet-viewport",
+		...props
+	});
+}
+function SheetPopup({ children, showCloseButton = true, side = "right", variant = "default", closeProps, portalProps, className, ...props }) {
+	return /* @__PURE__ */ jsxs(SheetPortal, {
+		...portalProps,
+		children: [/* @__PURE__ */ jsx(SheetBackdrop, {}), /* @__PURE__ */ jsx(SheetViewport, {
+			side,
+			variant,
+			children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+				className: clsx(popup, side === "bottom" && "_1e3d5zu8", side === "top" && "_1e3d5zu9", side === "left" && "_1e3d5zua", side === "right" && "_1e3d5zub", variant === "inset" && "_1e3d5zuc", className),
+				"data-slot": "sheet-popup",
+				...props,
+				children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
+					"aria-label": "Close",
+					render: /* @__PURE__ */ jsx(CloseButton, {
+						variant: "ghost",
+						className: "_1e3d5zud"
+					}),
+					...closeProps
+				})]
+			})
+		})]
+	});
+}
+function SheetHeader({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: {
+			className: clsx(header, className),
+			"data-slot": "sheet-header",
+			...props
+		},
+		render
+	});
+}
+function SheetFooter({ className, variant = "default", render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: {
+			className: clsx(footer, variant === "default" && "_1e3d5zug", variant === "bare" && "_1e3d5zuh", className),
+			"data-slot": "sheet-footer",
+			...props
+		},
+		render
+	});
+}
+function SheetTitle(props) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		className: title,
+		"data-slot": "sheet-title",
+		...props
+	});
+}
+function SheetDescription(props) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		className: description,
+		"data-slot": "sheet-description",
+		...props
+	});
+}
+function SheetPanel({ scrollFade = true, render, className, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		scrollFade,
+		children: useRender({
+			defaultTagName: "div",
+			props: {
+				className: clsx(panel, className),
+				"data-slot": "sheet-panel",
+				...props
+			},
+			render
+		})
+	});
+}
+//#endregion
+export { Sheet, SheetBackdrop, SheetClose, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPopup, SheetPortal, SheetTitle, SheetTrigger, SheetViewport };

package/dist/components/Slider/slider.css.js

@@ -0,0 +1,17 @@
+/* empty css                                               */
+/* empty css                                             */
+/* empty css                      */
+//#region src/components/Slider/slider.css.ts
+var disabled = "_1s9dutv0";
+var control = "_1s9dutv1";
+var controlHorizontal = "_1s9dutv2";
+var controlVertical = "_1s9dutv3";
+var track = "_1s9dutv4";
+var trackHorizontal = "_1s9dutv5";
+var trackVertical = "_1s9dutv6";
+var indicator = "_1s9dutv7";
+var thumb = "_1s9dutv8";
+var thumbDragging = "_1s9dutv9";
+var value = "_1s9dutva";
+//#endregion
+export { control, controlHorizontal, controlVertical, disabled, indicator, thumb, thumbDragging, track, trackHorizontal, trackVertical, value };

package/dist/components/Slider/slider.js

@@ -0,0 +1,55 @@
+"use client";
+import clsx from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { control, controlHorizontal, controlVertical, indicator, thumb, track, trackHorizontal, trackVertical, value } from "./slider.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Slider } from "@base-ui/react/slider";
+//#region src/components/Slider/slider.tsx
+function Slider$1({ className, children, defaultValue, value: controlledValue, min = 0, max = 100, ...props }) {
+	const values = React$1.useMemo(() => {
+		if (controlledValue !== void 0) return Array.isArray(controlledValue) ? controlledValue : [controlledValue];
+		if (defaultValue !== void 0) return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+		return [min];
+	}, [
+		controlledValue,
+		defaultValue,
+		min
+	]);
+	const orientation = props.orientation || "horizontal";
+	return /* @__PURE__ */ jsxs(Slider.Root, {
+		className: clsx(props.disabled && "_1s9dutv0", className),
+		defaultValue,
+		max,
+		min,
+		thumbAlignment: "edge",
+		value: controlledValue,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Slider.Control, {
+			className: clsx(control, orientation === "horizontal" ? controlHorizontal : controlVertical),
+			"data-slot": "slider-control",
+			children: /* @__PURE__ */ jsxs(Slider.Track, {
+				className: clsx(track, orientation === "horizontal" ? trackHorizontal : trackVertical),
+				"data-slot": "slider-track",
+				children: [/* @__PURE__ */ jsx(Slider.Indicator, {
+					className: indicator,
+					"data-slot": "slider-indicator"
+				}), Array.from({ length: values.length }, (_, index) => /* @__PURE__ */ jsx(Slider.Thumb, {
+					index,
+					render: (thumbRenderProps, state) => /* @__PURE__ */ jsx("div", {
+						...thumbRenderProps,
+						className: clsx(thumbRenderProps.className, thumb, state.dragging && "_1s9dutv9", state.disabled && "_1s9dutv0")
+					})
+				}, index))]
+			})
+		})]
+	});
+}
+function SliderValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Slider.Value, {
+		className: clsx(value, className),
+		"data-slot": "slider-value",
+		...props
+	});
+}
+//#endregion
+export { Slider$1 as Slider, SliderValue };

package/dist/components/Spinner/spinner.css.js

@@ -0,0 +1,5 @@
+/* empty css                       */
+//#region src/components/Spinner/spinner.css.ts
+var spinner = "_14oab8s1";
+//#endregion
+export { spinner };

package/dist/components/Spinner/spinner.js

@@ -0,0 +1,15 @@
+import clsx from "../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { spinner } from "./spinner.css.js";
+import { CircleNotchIcon } from "@phosphor-icons/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Spinner/spinner.tsx
+function Spinner({ className, style, ...props }) {
+	return /* @__PURE__ */ jsx(CircleNotchIcon, {
+		weight: "bold",
+		className: clsx(spinner, className),
+		style,
+		...props
+	});
+}
+//#endregion
+export { Spinner };

package/dist/components/Splitter/splitter.css.js

@@ -0,0 +1,15 @@
+/* empty css                                               */
+/* empty css                                             */
+/* empty css                        */
+//#region src/components/Splitter/splitter.css.ts
+var root = "w4j08r0";
+var rootHorizontal = "w4j08r1";
+var rootVertical = "w4j08r2";
+var rootDisabled = "w4j08r3";
+var panel = "w4j08r4";
+var handle = "w4j08r5";
+var handleActive = "w4j08r6";
+var handleHorizontal = "w4j08r8";
+var handleVertical = "w4j08r9";
+//#endregion
+export { handle, handleActive, handleHorizontal, handleVertical, panel, root, rootDisabled, rootHorizontal, rootVertical };