xiod-ui 1.0.0

package/dist/components/checkbox.d.ts

@@ -0,0 +1,16 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
+//#region src/components/checkbox.d.ts
+declare function CheckboxGroup({ className, ...props }: CheckboxGroup$1.Props): React$1.JSX.Element;
+declare const checkboxItemVariants: (props?: ({
+  variant?: "default" | "diamond" | "expressive" | "sharp" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const checkboxIndicatorVariants: (props?: ({
+  variant?: "default" | "diamond" | "expressive" | "sharp" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface CheckboxProps extends Checkbox$1.Root.Props, VariantProps<typeof checkboxItemVariants> {}
+declare function Checkbox({ className, variant, ...props }: CheckboxProps): React$1.JSX.Element;
+//#endregion
+export { Checkbox, Checkbox as CheckboxGroupItem, CheckboxGroup, checkboxIndicatorVariants, checkboxItemVariants };

package/dist/components/checkbox.js

@@ -0,0 +1,86 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
+//#region src/components/checkbox.tsx
+function CheckboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CheckboxGroup$1, {
+		className: cn("flex flex-col items-start gap-3", className),
+		"data-slot": "checkbox-group",
+		...props
+	});
+}
+const checkboxItemVariants = cva("relative inline-flex size-4.5 shrink-0 items-center justify-center border border-input bg-background not-dark:bg-clip-padding shadow-xs/5 outline-none ring-ring transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:shadow-[0_1px_var(--border)] not-data-checked:not-data-disabled:inset-shadow-[0_1.5px_3px_var(--input)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 data-disabled:opacity-64 sm:size-4 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 [[data-disabled],[data-checked],[aria-invalid]]:shadow-none", {
+	variants: { variant: {
+		default: "rounded-[.25rem] before:rounded-[3px]",
+		diamond: "rotate-45 rounded-[.35rem] before:rounded-[5px]",
+		expressive: "rounded-full before:rounded-full",
+		sharp: "rounded-none before:rounded-none"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const checkboxIndicatorVariants = cva("-inset-px absolute flex items-center justify-center pointer-events-none transition-[transform,opacity,background-color] duration-200 ease-out data-unchecked:scale-50 data-unchecked:opacity-0 data-checked:scale-100 data-checked:opacity-100 data-checked:bg-primary data-checked:text-primary-foreground data-checked:inset-shadow-[0_1px_--alpha(var(--primary-foreground)/16%)] data-checked:shadow-primary/24 data-checked:shadow-xs data-indeterminate:scale-100 data-indeterminate:opacity-100 data-indeterminate:bg-primary data-indeterminate:text-primary-foreground data-indeterminate:inset-shadow-[0_1px_--alpha(var(--primary-foreground)/16%)] data-indeterminate:shadow-primary/24 data-indeterminate:shadow-xs", {
+	variants: { variant: {
+		default: "rounded-[.25rem]",
+		diamond: "rounded-[.35rem]",
+		expressive: "rounded-full",
+		sharp: "rounded-none"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Checkbox({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		className: cn(checkboxItemVariants({ variant }), className),
+		"data-slot": "checkbox",
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+			className: cn(checkboxIndicatorVariants({ variant })),
+			"data-slot": "checkbox-indicator",
+			keepMounted: true,
+			render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", {
+				...indicatorProps,
+				children: state.indeterminate ? /* @__PURE__ */ jsx("svg", {
+					className: cn("size-3.5 sm:size-3", variant === "diamond" && "-rotate-45"),
+					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", {
+						className: "transition-[stroke-dashoffset] duration-200 ease-out",
+						d: "M5.252 12h13.496",
+						strokeDasharray: "14",
+						strokeDashoffset: state.indeterminate ? 0 : 14,
+						style: { transitionDelay: state.indeterminate ? "50ms" : "0ms" }
+					})
+				}) : /* @__PURE__ */ jsx("svg", {
+					className: cn("size-3.5 sm:size-3", variant === "diamond" && "-rotate-45"),
+					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", {
+						className: "transition-[stroke-dashoffset] duration-200 ease-out",
+						d: "M5.252 12.7 10.2 18.63 18.748 5.37",
+						strokeDasharray: "24",
+						strokeDashoffset: state.checked ? 0 : 24,
+						style: { transitionDelay: state.checked ? "50ms" : "0ms" }
+					})
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { Checkbox, Checkbox as CheckboxGroupItem, CheckboxGroup, checkboxIndicatorVariants, checkboxItemVariants };

package/dist/components/circular-progress.d.ts

@@ -0,0 +1,28 @@
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/circular-progress.d.ts
+export interface CircularProgressProps extends useRender.ComponentProps<"div"> {
+  /**
+   * The progress value (0 to max). If undefined, the indicator will be indeterminate.
+   */
+  value?: number | null;
+  /**
+   * The maximum progress value. Defaults to 100.
+   */
+  max?: number;
+  /**
+   * The size of the circular progress indicator.
+   * Can be a string identifier ("sm" to "2xl") or explicit pixel dimensions.
+   */
+  size?: number | "sm" | "default" | "lg" | "xl" | "2xl";
+  /**
+   * Defines standard rendering or wavy geometries wrapping the progress stroke.
+   */
+  variant?: "default" | "expressive";
+  /**
+   * The stroke width of the SVG circle.
+   */
+  strokeWidth?: number;
+}
+export declare function CircularProgress({ render, value, max, size: sizeProp, variant, strokeWidth: strokeWidthProp, ...props }: CircularProgressProps): React$1.ReactElement;
+//#endregion

package/dist/components/circular-progress.js

@@ -0,0 +1,127 @@
+"use client";
+import { cn } from "cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/circular-progress.tsx
+function getSizeConfig(sizeProp, strokeProp) {
+	if (typeof sizeProp === "number") return {
+		size: sizeProp,
+		stroke: strokeProp ?? Math.max(2, Math.floor(sizeProp / 12)),
+		amplitude: sizeProp / 24,
+		waves: 8 + Math.floor(sizeProp / 16)
+	};
+	const map = {
+		sm: {
+			size: 32,
+			stroke: 3,
+			amplitude: 1.5,
+			waves: 8
+		},
+		default: {
+			size: 40,
+			stroke: 4,
+			amplitude: 2,
+			waves: 10
+		},
+		lg: {
+			size: 64,
+			stroke: 5,
+			amplitude: 3,
+			waves: 12
+		},
+		xl: {
+			size: 96,
+			stroke: 6,
+			amplitude: 4,
+			waves: 14
+		},
+		"2xl": {
+			size: 128,
+			stroke: 8,
+			amplitude: 5,
+			waves: 16
+		}
+	};
+	const config = map[sizeProp] || map.default;
+	if (strokeProp !== void 0) config.stroke = strokeProp;
+	return config;
+}
+function generateWavyCirclePath(size, strokeWidth, amplitude, numWaves) {
+	const center = size / 2;
+	const baseRadius = center - strokeWidth / 2 - amplitude;
+	const points = [];
+	for (let i = 0; i <= 360; i++) {
+		const angle = i * Math.PI / 180;
+		const currentRadius = baseRadius + amplitude * Math.sin(numWaves * angle);
+		const x = center + currentRadius * Math.cos(angle);
+		const y = center + currentRadius * Math.sin(angle);
+		points.push(`${i === 0 ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`);
+	}
+	return `${points.join(" ")} Z`;
+}
+function CircularProgress({ render, value, max = 100, size: sizeProp = "default", variant = "default", strokeWidth: strokeWidthProp, ...props }) {
+	const { size, stroke: strokeWidth, amplitude, waves } = getSizeConfig(sizeProp, strokeWidthProp);
+	const isIndeterminate = value === void 0 || value === null;
+	const safeValue = isIndeterminate ? 0 : Math.min(Math.max(value, 0), max);
+	const percentage = isIndeterminate ? 25 : safeValue / max * 100;
+	const center = size / 2;
+	const radius = center - strokeWidth / 2;
+	const circumference = 2 * Math.PI * radius;
+	const strokeDashoffsetDefault = circumference - percentage / 100 * circumference;
+	const wavyPath = variant === "expressive" ? generateWavyCirclePath(size, strokeWidth, amplitude, waves) : "";
+	const defaultProps = {
+		className: cn("relative inline-flex items-center justify-center shrink-0", isIndeterminate && "animate-spin"),
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		...isIndeterminate ? {} : { "aria-valuenow": safeValue },
+		"data-state": isIndeterminate ? "indeterminate" : "determinate",
+		"data-slot": "circular-progress",
+		style: {
+			width: size,
+			height: size
+		},
+		children: /* @__PURE__ */ jsx("svg", {
+			className: "h-full w-full -rotate-90 pointer-events-none",
+			viewBox: `0 0 ${size} ${size}`,
+			children: variant === "expressive" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", {
+				d: wavyPath,
+				className: "fill-transparent stroke-muted transition-colors duration-200",
+				strokeWidth,
+				strokeLinejoin: "round"
+			}), /* @__PURE__ */ jsx("path", {
+				d: wavyPath,
+				className: cn("fill-transparent stroke-primary", !isIndeterminate && "transition-[stroke-dashoffset] duration-300 ease-in-out"),
+				strokeWidth,
+				strokeLinejoin: "round",
+				strokeLinecap: "round",
+				pathLength: "100",
+				strokeDasharray: "100",
+				strokeDashoffset: 100 - percentage
+			})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+				className: "fill-transparent stroke-muted transition-colors duration-200",
+				cx: center,
+				cy: center,
+				r: radius,
+				strokeWidth
+			}), /* @__PURE__ */ jsx("circle", {
+				className: cn("fill-transparent stroke-primary", !isIndeterminate && "transition-[stroke-dashoffset] duration-300 ease-in-out"),
+				cx: center,
+				cy: center,
+				r: radius,
+				strokeWidth,
+				strokeDasharray: circumference,
+				strokeDashoffset: strokeDashoffsetDefault,
+				strokeLinecap: "round"
+			})] })
+		})
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { CircularProgress };

package/dist/components/collapsible.d.ts

@@ -0,0 +1,8 @@
+import * as React$1 from "react";
+import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
+//#region src/components/collapsible.d.ts
+declare function Collapsible({ ...props }: Collapsible$1.Root.Props): React$1.JSX.Element;
+declare function CollapsibleTrigger({ className, ...props }: Collapsible$1.Trigger.Props): React$1.JSX.Element;
+declare function CollapsiblePanel({ className, ...props }: Collapsible$1.Panel.Props): React$1.JSX.Element;
+//#endregion
+export { Collapsible, CollapsiblePanel as CollapsibleContent, CollapsiblePanel, CollapsibleTrigger };

package/dist/components/collapsible.js

@@ -0,0 +1,27 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
+//#region src/components/collapsible.tsx
+function Collapsible({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.Root, {
+		"data-slot": "collapsible",
+		...props
+	});
+}
+function CollapsibleTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
+		className: cn("relative cursor-pointer pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", className),
+		"data-slot": "collapsible-trigger",
+		...props
+	});
+}
+function CollapsiblePanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
+		className: cn("h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0", className),
+		"data-slot": "collapsible-panel",
+		...props
+	});
+}
+//#endregion
+export { Collapsible, CollapsiblePanel as CollapsibleContent, CollapsiblePanel, CollapsibleTrigger };

package/dist/components/color-picker.d.ts

@@ -0,0 +1,159 @@
+import * as React$1 from "react";
+//#region src/components/color-picker.d.ts
+export interface BlossomColorPickerValue {
+  hue: number;
+  saturation: number;
+  lightness?: number;
+  originalSaturation?: number;
+  alpha: number;
+  layer: "inner" | "outer";
+}
+export interface BlossomColorPickerColor extends BlossomColorPickerValue {
+  hex: string;
+  hsl: string;
+  hsla: string;
+  rgb: string;
+  rgba: string;
+  r: number;
+  g: number;
+  b: number;
+}
+export type ColorInput = string | {
+  h: number;
+  s: number;
+  l: number;
+};
+export type SliderPosition = "top" | "bottom" | "left" | "right";
+export declare const OUTER_COLORS: {
+  h: number;
+  s: number;
+  l: number;
+}[];
+export declare const INNER_COLORS: {
+  h: number;
+  s: number;
+  l: number;
+}[];
+export declare const DEFAULT_COLORS: {
+  h: number;
+  s: number;
+  l: number;
+}[];
+export declare function lightnessToSliderValue(l: number): number;
+export declare function sliderValueToLightness(sliderValue: number): number;
+export declare function hexToHsl(hex: string): {
+  h: number;
+  s: number;
+  l: number;
+};
+export declare function rgbToHsl(r: number, g: number, b: number): {
+  h: number;
+  s: number;
+  l: number;
+};
+export declare function parseColor(input: ColorInput): {
+  h: number;
+  s: number;
+  l: number;
+};
+export declare function hslToHex(h: number, s: number, l: number): string;
+export declare function getVisualSaturation(sliderValue: number, baseSaturation: number): number;
+export declare function hslToString(h: number, s: number, l: number): string;
+export declare function hslaToString(h: number, s: number, l: number, a: number): string;
+export declare function hslToRgb(h: number, s: number, l: number): {
+  r: number;
+  g: number;
+  b: number;
+};
+export declare function rgbaToString(r: number, g: number, b: number, a: number): string;
+export declare function createColorOutput(hue: number, sliderValue: number, visualSaturation: number, baseSaturation: number, lightness: number, alpha: number, layer: "inner" | "outer"): BlossomColorPickerColor;
+export declare function organizeColorsIntoLayers(colors: {
+  h: number;
+  s: number;
+  l: number;
+}[]): {
+  h: number;
+  s: number;
+  l: number;
+}[][];
+export declare function calculateLayerRadii(layers: {
+  h: number;
+  s: number;
+  l: number;
+}[][] | {
+  h: number;
+  s: number;
+  l: number;
+}[][], coreSize: number, petalSize: number): number[];
+export declare function calculateLayerRotations(layers: {
+  h: number;
+  s: number;
+  l: number;
+}[][]): number[];
+export declare function calculateBarRadius(layerRadii: number[], petalSize: number, coreSize: number, barGap: number): number;
+export declare function calculateContainerSize(barRadius: number, circularBarWidth: number, showAlphaSlider: boolean, showOpacitySlider: boolean, sliderOffset: number, sliderWidth: number): number;
+export declare function getPetalZIndex(index: number, bottomIndex: number, totalPetals: number, layerIdx: number, totalLayers: number, isBottomLeft?: boolean, isBottomRight?: boolean): number;
+export declare function polarToCartesian(cx: number, cy: number, r: number, angleInDegrees: number): {
+  x: number;
+  y: number;
+};
+export declare function describeArc(cx: number, cy: number, r: number, startAng: number, endAng: number): string;
+export declare function getCenterAngle(position: SliderPosition): number;
+export declare function getOppositePosition(position: SliderPosition): SliderPosition;
+export declare function calculateSliderValueFromPoint(dx: number, dy: number, centerAngle: number, halfSweep: number, position: SliderPosition): number;
+export declare function calculateArcGradientColors(hue: number, baseSaturation: number, steps: number): string[];
+export interface ComputeAdaptivePositionInput {
+  elementRect: DOMRect;
+  containerSize: number;
+  currentShiftOffset: {
+    x: number;
+    y: number;
+  };
+  windowWidth: number;
+  windowHeight: number;
+  sliderPosition?: SliderPosition;
+  adaptivePositioning: boolean;
+  circularBarWidth: number;
+  sliderOffset: number;
+}
+export interface ComputeAdaptivePositionResult {
+  effectivePosition: SliderPosition;
+  shiftOffset: {
+    x: number;
+    y: number;
+  };
+}
+export declare function computeAdaptivePosition({ elementRect, containerSize, currentShiftOffset, windowWidth, windowHeight, sliderPosition, adaptivePositioning, circularBarWidth, sliderOffset }: ComputeAdaptivePositionInput): ComputeAdaptivePositionResult;
+export interface BlossomColorPickerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange"> {
+  value?: BlossomColorPickerValue;
+  defaultValue?: BlossomColorPickerValue;
+  colors?: ColorInput[];
+  onChange?: (color: BlossomColorPickerColor) => void;
+  onCollapse?: (color: BlossomColorPickerColor) => void;
+  disabled?: boolean;
+  openOnHover?: boolean;
+  initialExpanded?: boolean;
+  animationDuration?: number;
+  showAlphaSlider?: boolean;
+  showOpacitySlider?: boolean;
+  coreSize?: number;
+  petalSize?: number;
+  showCoreColor?: boolean;
+  sliderPosition?: SliderPosition;
+  adaptivePositioning?: boolean;
+  circularBarWidth?: number;
+  sliderWidth?: number;
+  sliderOffset?: number;
+  collapsible?: boolean;
+}
+export declare function BlossomColorPicker({ value, defaultValue, colors, onChange, onCollapse, disabled, openOnHover, initialExpanded, animationDuration, showAlphaSlider, showOpacitySlider, coreSize, petalSize, showCoreColor, sliderPosition, adaptivePositioning, circularBarWidth, sliderWidth, sliderOffset, collapsible, className, ref, ...props }: BlossomColorPickerProps & {
+  ref?: React$1.Ref<HTMLDivElement>;
+}): React$1.JSX.Element;
+export interface ColorPickerProps extends Omit<BlossomColorPickerProps, "className"> {
+  darkMode?: boolean;
+  className?: string;
+}
+export declare function ColorPicker({ value, defaultValue, colors, onChange, onCollapse, disabled, openOnHover, initialExpanded, animationDuration, showAlphaSlider, coreSize, petalSize, showCoreColor, sliderPosition, adaptivePositioning, circularBarWidth, sliderWidth, sliderOffset, collapsible, darkMode, className, ref, ...props }: ColorPickerProps & {
+  ref?: React$1.Ref<HTMLDivElement>;
+}): React$1.JSX.Element;
+//#endregion