@galaxy-io/dls 1.0.3

package/dist/theme/variants/light.js

@@ -0,0 +1,125 @@
+//#region src/theme/variants/light.ts
+var GALAXY_LIGHT_COLOR = {
+	text: {
+		primary: "#101010",
+		primaryAlt: "#ffffff",
+		secondary: "#3f3f3f",
+		secondaryAlt: "#acacac",
+		tertiary: "#9e9e9e",
+		tertiaryAlt: "#868686",
+		success: "#4cb782",
+		warning: "#ff6b24",
+		error: "#e53f4f",
+		pink: "#ff4595",
+		orange: "#e99243",
+		yellow: "#cbc24d",
+		lime: "#9cca55",
+		green: "#4cb782",
+		blue: "#4885ff",
+		teal: "#20b2a5",
+		purple: "#b080f3",
+		disabled: "#b8b8b8",
+		galaxy: "#0059B8",
+		galaxyAlt: "#0060c8"
+	},
+	background: {
+		base: "#ffffff",
+		baseAlt: "#131313",
+		primary: "#fafafa",
+		primaryAlt: "#161616",
+		secondary: "#f0f0f0",
+		secondaryAlt: "#242424",
+		tertiary: "#f5f5f5",
+		tertiaryAlt: "#202020",
+		success: "#e3f6ec",
+		successAlt: "#1d3329",
+		warning: "#ffe6d2",
+		warningAlt: "#3f2e19",
+		error: "#fce8ec",
+		errorAlt: "#3d1f24",
+		pink: "#f8e6f7",
+		pinkAlt: "#361c23",
+		orange: "#fdefdc",
+		orangeAlt: "#3d2a12",
+		yellow: "#faf8d2",
+		yellowAlt: "#404022",
+		lime: "#e4f8c5",
+		limeAlt: "#263017",
+		blue: "#e6f2ff",
+		blueAlt: "#232f3b",
+		teal: "#e6f7f9",
+		tealAlt: "#2a393c",
+		purple: "#f2f0ff",
+		purpleAlt: "#272442",
+		disabled: "#ffffff",
+		disabledAlt: "#1e1e1e",
+		galaxy: "#0059B8",
+		galaxyAlt: "#0060c8"
+	},
+	border: {
+		primary: "#cdcecd",
+		secondary: "#d5d6d7",
+		tertiary: "#e0e0e0",
+		selected: "#d5d6d7",
+		success: "#62c796",
+		warning: "#f78d55",
+		error: "#e26178",
+		disabled: "#e7e7e7",
+		pink: "#f57bb0",
+		orange: "#e2a65c",
+		yellow: "#d4cc6a",
+		lime: "#9cca55",
+		blue: "#7aa7f8",
+		teal: "#4cc2b7",
+		purple: "#b080f3",
+		galaxy: "#0059B8",
+		galaxyAlt: "#0060c8"
+	},
+	icon: {
+		primary: "#101010",
+		primaryAlt: "#ffffff",
+		secondary: "#3f3f3f",
+		secondaryAlt: "#acacac",
+		tertiary: "#9e9e9e",
+		tertiaryAlt: "#868686",
+		success: "#4cb782",
+		warning: "#ff6b24",
+		error: "#e53f4f",
+		pink: "#ff4595",
+		orange: "#e99243",
+		yellow: "#cbc24d",
+		lime: "#966a55",
+		blue: "#4885ff",
+		teal: "#20b2a5",
+		purple: "#b080f3",
+		disabled: "#b8b8b8",
+		galaxy: "#0059B8",
+		galaxyAlt: "#0060c8"
+	},
+	opacity: {
+		bw100: "rgba(255, 255, 255, 1)",
+		bw100Alt: "rgba(0, 0, 0, 1)",
+		bw80: "rgba(255, 255, 255, 0.8)",
+		bw80Alt: "rgba(0, 0, 0, 0.8)",
+		bw64: "rgba(255, 255, 255, 0.64)",
+		bw64Alt: "rgba(0, 0, 0, 0.64)",
+		bw48: "rgba(255, 255, 255, 0.48)",
+		bw48Alt: "rgba(0, 0, 0, 0.48)",
+		bw32: "rgba(255, 255, 255, 0.32)",
+		bw32Alt: "rgba(0, 0, 0, 0.32)",
+		bw24: "rgba(255, 255, 255, 0.24)",
+		bw24Alt: "rgba(0, 0, 0, 0.24)",
+		bw16: "rgba(255, 255, 255, 0.16)",
+		bw16Alt: "rgba(0, 0, 0, 0.16)",
+		bw12: "rgba(255, 255, 255, 0.12)",
+		bw12Alt: "rgba(0, 0, 0, 0.12)",
+		bw8: "rgba(255, 255, 255, 0.08)",
+		bw8Alt: "rgba(0, 0, 0, 0.08)",
+		b4: "rgba(255, 255, 255, 0.04)",
+		b4Alt: "rgba(0, 0, 0, 0.04)",
+		bw0: "rgba(255, 255, 255, 0)",
+		bw0Alt: "rgba(0, 0, 0, 0)"
+	}
+};
+//#endregion
+export { GALAXY_LIGHT_COLOR };

package/dist/tooltip/Tooltip.d.ts

@@ -0,0 +1,37 @@
+import type { PropsWithChildren } from "react";
+export declare enum TooltipPosition {
+    TOP = "top",
+    BOTTOM = "bottom",
+    LEFT = "left",
+    RIGHT = "right",
+    TOP_START = "top-start",
+    TOP_END = "top-end",
+    BOTTOM_START = "bottom-start",
+    BOTTOM_END = "bottom-end",
+    RIGHT_START = "right-start",
+    RIGHT_END = "right-end",
+    LEFT_START = "left-start",
+    LEFT_END = "left-end",
+    AUTO = "auto",
+    AUTO_START = "auto-start",
+    AUTO_END = "auto-end"
+}
+export declare enum TooltipVariant {
+    BASE = "BASE",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY"
+}
+interface TooltipProps {
+    body: string | React.ReactNode;
+    variant?: TooltipVariant;
+    position?: TooltipPosition;
+    delay?: number;
+    offset?: [number, number];
+    isInteractive?: boolean;
+    noPadding?: boolean;
+    noBorder?: boolean;
+    isDisabled?: boolean;
+}
+declare const Tooltip: ({ children, variant, body, position, delay, offset, isInteractive, noPadding, noBorder, isDisabled, }: PropsWithChildren<TooltipProps>) => string | number | boolean | Iterable<import("react").ReactNode> | import("react").JSX.Element | null | undefined;
+export default Tooltip;

package/dist/tooltip/Tooltip.js

@@ -0,0 +1,79 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize } from "../text/Text.js";
+/* empty css                  */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { jsx } from "react/jsx-runtime";
+import Tippy from "@tippyjs/react";
+//#region src/tooltip/Tooltip.tsx
+var TooltipPosition = /* @__PURE__ */ function(TooltipPosition) {
+	TooltipPosition["TOP"] = "top";
+	TooltipPosition["BOTTOM"] = "bottom";
+	TooltipPosition["LEFT"] = "left";
+	TooltipPosition["RIGHT"] = "right";
+	TooltipPosition["TOP_START"] = "top-start";
+	TooltipPosition["TOP_END"] = "top-end";
+	TooltipPosition["BOTTOM_START"] = "bottom-start";
+	TooltipPosition["BOTTOM_END"] = "bottom-end";
+	TooltipPosition["RIGHT_START"] = "right-start";
+	TooltipPosition["RIGHT_END"] = "right-end";
+	TooltipPosition["LEFT_START"] = "left-start";
+	TooltipPosition["LEFT_END"] = "left-end";
+	TooltipPosition["AUTO"] = "auto";
+	TooltipPosition["AUTO_START"] = "auto-start";
+	TooltipPosition["AUTO_END"] = "auto-end";
+	return TooltipPosition;
+}({});
+var TooltipVariant = /* @__PURE__ */ function(TooltipVariant) {
+	TooltipVariant["BASE"] = "BASE";
+	TooltipVariant["PRIMARY"] = "PRIMARY";
+	TooltipVariant["SECONDARY"] = "SECONDARY";
+	TooltipVariant["TERTIARY"] = "TERTIARY";
+	return TooltipVariant;
+}({});
+var TooltipWrapper = /*#__PURE__*/ styled("span")({
+	name: "TooltipWrapper",
+	class: "tbnx4ok",
+	propsAsIs: false
+});
+var _exp = () => ({ $noPadding }) => $noPadding ? "0" : "8px";
+var _exp2 = () => ({ $variant, theme }) => {
+	return match($variant).with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).exhaustive();
+};
+var _exp3 = () => ({ $noBorder, $variant, theme }) => {
+	if ($noBorder) return "none";
+	return match($variant).with("BASE", () => `0.5px solid ${theme.color.border.secondary}`).with("PRIMARY", () => `0.5px solid ${theme.color.border.secondary}`).with("SECONDARY", () => `0.5px solid ${theme.color.border.secondary}`).with("TERTIARY", () => `0.5px solid ${theme.color.border.secondary}`).exhaustive();
+};
+var TooltipContent = withTheme(/*#__PURE__*/ styled("span")({
+	name: "TooltipContent",
+	class: "tjda4tq",
+	propsAsIs: false,
+	vars: {
+		"tjda4tq-0": [_exp()],
+		"tjda4tq-1": [_exp2()],
+		"tjda4tq-2": [_exp3()]
+	}
+}));
+var Tooltip = ({ children, variant = "SECONDARY", body, position = "top", delay = 0, offset = [0, 4], isInteractive = false, noPadding = false, noBorder = false, isDisabled = false }) => {
+	if (isDisabled) return children;
+	return /* @__PURE__ */ jsx(Tippy, {
+		content: /* @__PURE__ */ jsx(TooltipContent, {
+			$variant: variant,
+			$noPadding: noPadding,
+			$noBorder: noBorder,
+			children: typeof body === "string" ? /* @__PURE__ */ jsx(Text, {
+				size: TextSize.BODY_SM,
+				children: body
+			}) : body
+		}),
+		placement: position,
+		delay,
+		duration: 0,
+		offset,
+		interactive: isInteractive,
+		zIndex: 1e4,
+		children: /* @__PURE__ */ jsx(TooltipWrapper, { children })
+	});
+};
+//#endregion
+export { TooltipPosition, TooltipVariant, Tooltip as default };

package/dist/utils/colors.d.ts

@@ -0,0 +1,84 @@
+export type RGB = {
+    r: number;
+    g: number;
+    b: number;
+};
+export type RGBA = RGB & {
+    a: number;
+};
+export type HSL = {
+    h: number;
+    s: number;
+    l: number;
+};
+export type HSVA = {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+};
+export declare const hexToRgb: (hex: string) => RGB;
+export declare const hexToRgba: (hex: string, a?: number) => RGBA;
+export declare const rgbToHex: ({ r, g, b }: RGB) => string;
+export declare const rgbToHsl: ({ r, g, b }: RGB) => HSL;
+export declare const hslToRgb: ({ h, s, l }: HSL) => RGB;
+export declare const hslToHex: ({ h, s, l }: HSL) => string;
+export declare const hexToHsva: (hex: string) => HSVA;
+export declare const hsvaToHex: (hsva: HSVA) => string;
+/**
+ * Generates a random hex color
+ * @returns A random hex color in the format #RRGGBB
+ */
+export declare const generateRandomHexColor: () => string;
+/**
+ * Gets an opaque hex color
+ * @param hex - The hex color to add opacity to
+ * @param opacity - The opacity to add (0-1)
+ * @returns A hex color with the added opacity
+ */
+export declare const getOpaqueHexColor: (hex: string, opacity?: number) => string;
+/**
+ * Generates a darker hex color by subtracting from each RGB channel (clamped)
+ * @param hex - The hex color to darken
+ * @param amount - Amount to subtract from each channel (0..255-ish)
+ */
+export declare const getDarkerHexColor: (hex: string, amount?: number) => string;
+/**
+ * Generates a lighter hex color by adding to each RGB channel (clamped)
+ * @param hex - The hex color to lighten
+ * @param amount - Amount to add to each channel (0..255-ish)
+ */
+export declare const getLighterHexColor: (hex: string, amount?: number) => string;
+/**
+ * Creates a brighter, more neon/vibrant version of a color.
+ * Lightens the color while increasing saturation to create a neon effect.
+ * This is designed to complement getDarkerPronouncedHexColor - when applied
+ * to the same base color, they create a bright text/dark background pair.
+ *
+ * @param hex - The hex color to transform
+ * @param lightnessTarget - Target lightness (0-1, default 0.82 = 82% lightness for bright neon colors)
+ * @param saturationTarget - Target saturation (0-1, default 0.75 = 75% saturation for vibrant look)
+ * @returns A brighter, more saturated hex color
+ */
+export declare const getBrighterPronouncedHexColor: (hex: string, lightnessTarget?: number, saturationTarget?: number) => string;
+/**
+ * Creates a darker but more pronounced/vibrant version of a color.
+ * Darkens the color while increasing saturation to maintain vibrancy.
+ * This creates a rich, deep color that pairs perfectly with getBrighterPronouncedHexColor.
+ * When both are applied to the same base color, they create complementary pairs.
+ *
+ * @param hex - The hex color to transform
+ * @param lightnessTarget - Target lightness (0-1, default 0.18 = 18% lightness for dark rich colors)
+ * @param saturationTarget - Target saturation (0-1, default 0.35 = 35% saturation for pronounced dark colors)
+ * @returns A darker, more saturated hex color
+ */
+export declare const getDarkerPronouncedHexColor: (hex: string, lightnessTarget?: number, saturationTarget?: number) => string;
+/**
+ * Random pastel color (soft, light, UI-friendly)
+ */
+export declare const generateRandomPastelHexColor: () => string;
+/**
+ * Random vibrant color (saturated, bold, UI-friendly)
+ * Generates colors similar to: #5D9CEC, #4FC1E9, #48CFAD, #A0D468, #FFCE54, #FC6E51, #ED5565, #AC92EC, #EC87C0
+ */
+export declare const generateRandomVibrantHexColor: () => string;

package/dist/utils/colors.js

@@ -0,0 +1,323 @@
+//#region src/utils/colors.ts
+var clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+var clamp01 = (n) => clamp(n, 0, 1);
+var rand = (min, max) => Math.random() * (max - min) + min;
+var wrap360 = (h) => (h % 360 + 360) % 360;
+var normalizeHex = (hex) => {
+	let h = hex.trim().toLowerCase();
+	if (!h.startsWith("#")) h = `#${h}`;
+	if (h.length === 4) {
+		const r = h[1], g = h[2], b = h[3];
+		return `#${r}${r}${g}${g}${b}${b}`;
+	}
+	if (h.length !== 7) throw new Error(`Invalid hex color: "${hex}". Expected #RRGGBB or #RGB`);
+	return h;
+};
+var hexToRgb = (hex) => {
+	const h = normalizeHex(hex);
+	return {
+		r: parseInt(h.slice(1, 3), 16),
+		g: parseInt(h.slice(3, 5), 16),
+		b: parseInt(h.slice(5, 7), 16)
+	};
+};
+var hexToRgba = (hex, a = 1) => {
+	const { r, g, b } = hexToRgb(hex);
+	return {
+		r,
+		g,
+		b,
+		a
+	};
+};
+var rgbToHex = ({ r, g, b }) => "#" + [
+	r,
+	g,
+	b
+].map((v) => clamp(Math.round(v), 0, 255).toString(16).padStart(2, "0")).join("");
+var rgbToHsl = ({ r, g, b }) => {
+	r /= 255;
+	g /= 255;
+	b /= 255;
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const delta = max - min;
+	let h = 0;
+	let s = 0;
+	const l = (max + min) / 2;
+	if (delta !== 0) {
+		s = delta / (1 - Math.abs(2 * l - 1));
+		switch (max) {
+			case r:
+				h = (g - b) / delta % 6;
+				break;
+			case g:
+				h = (b - r) / delta + 2;
+				break;
+			case b:
+				h = (r - g) / delta + 4;
+				break;
+		}
+		h *= 60;
+		if (h < 0) h += 360;
+	}
+	return {
+		h,
+		s,
+		l
+	};
+};
+var hslToRgb = ({ h, s, l }) => {
+	h = wrap360(h);
+	s = clamp01(s);
+	l = clamp01(l);
+	const c = (1 - Math.abs(2 * l - 1)) * s;
+	const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+	const m = l - c / 2;
+	let r = 0, g = 0, b = 0;
+	if (h < 60) [r, g, b] = [
+		c,
+		x,
+		0
+	];
+	else if (h < 120) [r, g, b] = [
+		x,
+		c,
+		0
+	];
+	else if (h < 180) [r, g, b] = [
+		0,
+		c,
+		x
+	];
+	else if (h < 240) [r, g, b] = [
+		0,
+		x,
+		c
+	];
+	else if (h < 300) [r, g, b] = [
+		x,
+		0,
+		c
+	];
+	else [r, g, b] = [
+		c,
+		0,
+		x
+	];
+	return {
+		r: (r + m) * 255,
+		g: (g + m) * 255,
+		b: (b + m) * 255
+	};
+};
+var hslToHex = ({ h, s, l }) => {
+	const { r, g, b } = hslToRgb({
+		h,
+		s,
+		l
+	});
+	return rgbToHex({
+		r,
+		g,
+		b
+	});
+};
+var rgbToHsva = ({ r, g, b }) => {
+	r /= 255;
+	g /= 255;
+	b /= 255;
+	const max = Math.max(r, g, b);
+	const delta = max - Math.min(r, g, b);
+	let h = 0;
+	if (delta !== 0) {
+		if (max === r) h = (g - b) / delta % 6;
+		else if (max === g) h = (b - r) / delta + 2;
+		else h = (r - g) / delta + 4;
+		h *= 60;
+		if (h < 0) h += 360;
+	}
+	const s = max === 0 ? 0 : delta / max * 100;
+	const v = max * 100;
+	return {
+		h,
+		s,
+		v,
+		a: 1
+	};
+};
+var hsvaToRgb = ({ h, s, v, a: _a }) => {
+	const sNorm = s / 100;
+	const vNorm = v / 100;
+	const c = vNorm * sNorm;
+	const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+	const m = vNorm - c;
+	let r = 0, g = 0, b = 0;
+	if (h < 60) [r, g, b] = [
+		c,
+		x,
+		0
+	];
+	else if (h < 120) [r, g, b] = [
+		x,
+		c,
+		0
+	];
+	else if (h < 180) [r, g, b] = [
+		0,
+		c,
+		x
+	];
+	else if (h < 240) [r, g, b] = [
+		0,
+		x,
+		c
+	];
+	else if (h < 300) [r, g, b] = [
+		x,
+		0,
+		c
+	];
+	else [r, g, b] = [
+		c,
+		0,
+		x
+	];
+	return {
+		r: Math.round((r + m) * 255),
+		g: Math.round((g + m) * 255),
+		b: Math.round((b + m) * 255)
+	};
+};
+var hexToHsva = (hex) => {
+	return rgbToHsva(hexToRgb(hex));
+};
+var hsvaToHex = (hsva) => {
+	return rgbToHex(hsvaToRgb(hsva));
+};
+/**
+* Generates a random hex color
+* @returns A random hex color in the format #RRGGBB
+*/
+var generateRandomHexColor = () => {
+	return `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, "0")}`;
+};
+/**
+* Gets an opaque hex color
+* @param hex - The hex color to add opacity to
+* @param opacity - The opacity to add (0-1)
+* @returns A hex color with the added opacity
+*/
+var getOpaqueHexColor = (hex, opacity = .5) => {
+	const { r, g, b } = hexToRgb(hex);
+	return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+/**
+* Generates a darker hex color by subtracting from each RGB channel (clamped)
+* @param hex - The hex color to darken
+* @param amount - Amount to subtract from each channel (0..255-ish)
+*/
+var getDarkerHexColor = (hex, amount = 50) => {
+	const { r, g, b } = hexToRgb(hex);
+	return rgbToHex({
+		r: r - amount,
+		g: g - amount,
+		b: b - amount
+	});
+};
+/**
+* Generates a lighter hex color by adding to each RGB channel (clamped)
+* @param hex - The hex color to lighten
+* @param amount - Amount to add to each channel (0..255-ish)
+*/
+var getLighterHexColor = (hex, amount = 50) => {
+	const { r, g, b } = hexToRgb(hex);
+	return rgbToHex({
+		r: r + amount,
+		g: g + amount,
+		b: b + amount
+	});
+};
+/**
+* Creates a brighter, more neon/vibrant version of a color.
+* Lightens the color while increasing saturation to create a neon effect.
+* This is designed to complement getDarkerPronouncedHexColor - when applied
+* to the same base color, they create a bright text/dark background pair.
+*
+* @param hex - The hex color to transform
+* @param lightnessTarget - Target lightness (0-1, default 0.82 = 82% lightness for bright neon colors)
+* @param saturationTarget - Target saturation (0-1, default 0.75 = 75% saturation for vibrant look)
+* @returns A brighter, more saturated hex color
+*/
+var getBrighterPronouncedHexColor = (hex, lightnessTarget = .82, saturationTarget = .75) => {
+	const { r, g, b } = hexToRgb(hex);
+	const { h, s } = rgbToHsl({
+		r,
+		g,
+		b
+	});
+	const newLightness = clamp01(lightnessTarget);
+	return hslToHex({
+		h,
+		s: clamp01(Math.max(saturationTarget, s * 1.2)),
+		l: newLightness
+	});
+};
+/**
+* Creates a darker but more pronounced/vibrant version of a color.
+* Darkens the color while increasing saturation to maintain vibrancy.
+* This creates a rich, deep color that pairs perfectly with getBrighterPronouncedHexColor.
+* When both are applied to the same base color, they create complementary pairs.
+*
+* @param hex - The hex color to transform
+* @param lightnessTarget - Target lightness (0-1, default 0.18 = 18% lightness for dark rich colors)
+* @param saturationTarget - Target saturation (0-1, default 0.35 = 35% saturation for pronounced dark colors)
+* @returns A darker, more saturated hex color
+*/
+var getDarkerPronouncedHexColor = (hex, lightnessTarget = .18, saturationTarget = .35) => {
+	const { r, g, b } = hexToRgb(hex);
+	const { h, s } = rgbToHsl({
+		r,
+		g,
+		b
+	});
+	const newLightness = clamp01(lightnessTarget);
+	return hslToHex({
+		h,
+		s: clamp01(Math.max(saturationTarget, s * 1.1)),
+		l: newLightness
+	});
+};
+/**
+* Random pastel color (soft, light, UI-friendly)
+*/
+var generateRandomPastelHexColor = () => {
+	return hslToHex({
+		h: rand(0, 360),
+		s: rand(.25, .55),
+		l: rand(.75, .9)
+	});
+};
+/**
+* Random vibrant color (saturated, bold, UI-friendly)
+* Generates colors similar to: #5D9CEC, #4FC1E9, #48CFAD, #A0D468, #FFCE54, #FC6E51, #ED5565, #AC92EC, #EC87C0
+*/
+var generateRandomVibrantHexColor = () => {
+	const hueRanges = [
+		[0, 60],
+		[60, 90],
+		[90, 150],
+		[150, 210],
+		[210, 270],
+		[270, 330],
+		[330, 360]
+	];
+	const range = hueRanges[Math.floor(Math.random() * hueRanges.length)];
+	return hslToHex({
+		h: rand(range[0], range[1]),
+		s: rand(.6, .95),
+		l: rand(.5, .75)
+	});
+};
+//#endregion
+export { generateRandomHexColor, generateRandomPastelHexColor, generateRandomVibrantHexColor, getBrighterPronouncedHexColor, getDarkerHexColor, getDarkerPronouncedHexColor, getLighterHexColor, getOpaqueHexColor, hexToHsva, hexToRgb, hexToRgba, hslToHex, hslToRgb, hsvaToHex, rgbToHex, rgbToHsl };

package/dist/utils/linaria.d.ts

@@ -0,0 +1 @@
+export declare function getCssSizeValue(value?: number | string, fallback?: number | string): string;

package/dist/utils/linaria.js

@@ -0,0 +1,8 @@
+//#region src/utils/linaria.ts
+function getCssSizeValue(value, fallback) {
+	if (typeof value === "number") return `${value}px`;
+	if (typeof fallback === "number") return `${fallback}px`;
+	return value ?? fallback ?? "0";
+}
+//#endregion
+export { getCssSizeValue };

package/dist/widget/Widget.d.ts

@@ -0,0 +1,28 @@
+import type { PropsWithChildren } from "react";
+export declare enum WidgetVariant {
+    BASE = "BASE",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY",
+    ERROR = "ERROR",
+    DISABLED = "DISABLED"
+}
+interface WidgetProps {
+    header?: string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    fillWidth?: boolean;
+    fillHeight?: boolean;
+    padding?: React.CSSProperties["padding"];
+    noPadding?: boolean;
+    noHover?: boolean;
+    noBorder?: boolean;
+    isGradient?: boolean;
+    isSelected?: boolean;
+    variant?: WidgetVariant;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare const Widget: ({ children, minHeight, maxHeight, minWidth, maxWidth, fillWidth, fillHeight, padding, noPadding, noHover, noBorder, isSelected, variant, onClick, }: PropsWithChildren<WidgetProps>) => import("react").JSX.Element;
+export default Widget;