xiod-ui 1.0.0

package/dist/components/toggle.js

@@ -0,0 +1,36 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
+//#region src/components/toggle.tsx
+const toggleVariants = cva("[&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base text-foreground outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-input/32 data-pressed:inset-shadow-[0_1px_var(--border)] data-pressed:text-accent-foreground sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			default: "h-9 min-w-9 px-[calc(--spacing(2)-1px)] sm:h-8 sm:min-w-8",
+			lg: "h-10 min-w-10 px-[calc(--spacing(2.5)-1px)] sm:h-9 sm:min-w-9",
+			sm: "h-8 min-w-8 px-[calc(--spacing(1.5)-1px)] sm:h-7 sm:min-w-7"
+		},
+		variant: {
+			default: "border-transparent",
+			outline: "border-input bg-background not-dark:bg-clip-padding shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_var(--border)] dark:bg-input/32 dark:data-pressed:bg-input/48 dark:hover:bg-input/64 data-pressed:inset-shadow-[0_1px_var(--border)] [:disabled,:active,[data-pressed]]:shadow-none"
+		}
+	}
+});
+function Toggle({ className, variant, size, ...props }) {
+	return /* @__PURE__ */ jsx(Toggle$1, {
+		className: cn(toggleVariants({
+			className,
+			size,
+			variant
+		})),
+		"data-slot": "toggle",
+		...props
+	});
+}
+//#endregion
+export { Toggle, toggleVariants };

package/dist/components/toolbar.d.ts

@@ -0,0 +1,11 @@
+import * as React$1 from "react";
+import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
+//#region src/components/toolbar.d.ts
+declare function Toolbar({ className, ...props }: Toolbar$1.Root.Props): React$1.JSX.Element;
+declare function ToolbarButton({ className, ...props }: Toolbar$1.Button.Props): React$1.JSX.Element;
+declare function ToolbarLink({ className, ...props }: Toolbar$1.Link.Props): React$1.JSX.Element;
+declare function ToolbarInput({ className, ...props }: Toolbar$1.Input.Props): React$1.JSX.Element;
+declare function ToolbarGroup({ className, ...props }: Toolbar$1.Group.Props): React$1.JSX.Element;
+declare function ToolbarSeparator({ className, ...props }: Toolbar$1.Separator.Props): React$1.JSX.Element;
+//#endregion
+export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator };

package/dist/components/toolbar.js

@@ -0,0 +1,49 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
+//#region src/components/toolbar.tsx
+function Toolbar({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar$1.Root, {
+		className: cn("relative flex gap-2 rounded-xl border bg-card not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-card-foreground", className),
+		"data-slot": "toolbar",
+		...props
+	});
+}
+function ToolbarButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar$1.Button, {
+		className: cn(className),
+		"data-slot": "toolbar-button",
+		...props
+	});
+}
+function ToolbarLink({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar$1.Link, {
+		className: cn(className),
+		"data-slot": "toolbar-link",
+		...props
+	});
+}
+function ToolbarInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar$1.Input, {
+		className: cn(className),
+		"data-slot": "toolbar-input",
+		...props
+	});
+}
+function ToolbarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar$1.Group, {
+		className: cn("flex items-center gap-1", className),
+		"data-slot": "toolbar-group",
+		...props
+	});
+}
+function ToolbarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar$1.Separator, {
+		className: cn("shrink-0 bg-border data-[orientation=horizontal]:my-0.5 data-[orientation=vertical]:my-1.5 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch", className),
+		"data-slot": "toolbar-separator",
+		...props
+	});
+}
+//#endregion
+export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator };

package/dist/components/tooltip.d.ts

@@ -0,0 +1,17 @@
+import * as React$1 from "react";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+//#region src/components/tooltip.d.ts
+declare const TooltipCreateHandle: typeof Tooltip$1.createHandle;
+declare const TooltipProvider: React$1.FC<import("@base-ui/react").TooltipProviderProps>;
+declare const Tooltip: <Payload>(props: Tooltip$1.Root.Props<Payload>) => React$1.JSX.Element;
+declare function TooltipTrigger(props: Tooltip$1.Trigger.Props): React$1.JSX.Element;
+declare function TooltipPopup({ className, align, sideOffset, side, anchor, children, hideArrow, ...props }: Tooltip$1.Popup.Props & {
+  align?: Tooltip$1.Positioner.Props["align"];
+  side?: Tooltip$1.Positioner.Props["side"];
+  sideOffset?: Tooltip$1.Positioner.Props["sideOffset"];
+  anchor?: Tooltip$1.Positioner.Props["anchor"];
+  hideArrow?: boolean;
+}): React$1.JSX.Element;
+declare const TooltipArrow: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").TooltipArrowProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tooltip, TooltipArrow, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip.js

@@ -0,0 +1,56 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+//#region src/components/tooltip.tsx
+const TooltipCreateHandle = Tooltip$1.createHandle;
+const TooltipProvider = Tooltip$1.Provider;
+const Tooltip = Tooltip$1.Root;
+function TooltipTrigger(props) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+}
+function TooltipPopup({ className, align = "center", sideOffset = 10, side = "top", anchor, children, hideArrow = false, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
+		align,
+		anchor,
+		className: "z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none",
+		"data-slot": "tooltip-positioner",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
+			className: cn("relative flex flex-col h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) text-balance rounded-md border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs shadow-md/5 transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:duration-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+			"data-slot": "tooltip-popup",
+			...props,
+			children: [!hideArrow && /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
+				className: "z-10 flex data-[side=bottom]:-top-[9px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-14px] data-[side=left]:rotate-90 data-[side=right]:left-[-14px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[9px] data-[side=top]:rotate-180",
+				children: /* @__PURE__ */ jsx(ArrowSvg, {})
+			}), /* @__PURE__ */ jsx(Tooltip$1.Viewport, {
+				className: "relative size-full overflow-clip px-(--viewport-inline-padding) py-1 [--viewport-inline-padding:--spacing(2)] data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:truncate **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity",
+				"data-slot": "tooltip-viewport",
+				children
+			})]
+		})
+	}) });
+}
+function ArrowSvg(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "20",
+		height: "10",
+		viewBox: "0 0 20 10",
+		fill: "none",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+			className: "fill-popover"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+			className: "fill-border"
+		})]
+	});
+}
+const TooltipArrow = Tooltip$1.Arrow;
+//#endregion
+export { Tooltip, TooltipArrow, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger };

package/dist/components/waveform.d.ts

@@ -0,0 +1,61 @@
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/waveform.d.ts
+export interface WaveformProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  duration?: number;
+  active?: boolean;
+  processing?: boolean;
+  mode?: "static" | "scrolling" | "live";
+  microphone?: boolean;
+  deviceId?: string;
+  barWidth?: number;
+  barGap?: number;
+  barRadius?: number;
+  barColor?: string;
+  progressColor?: string;
+  fadeEdges?: boolean;
+  fadeWidth?: number;
+  sensitivity?: number;
+  updateRate?: number;
+  seed?: number;
+  data?: number[];
+}
+interface WaveformContextValue {
+  value: number;
+  duration: number;
+  onValueChange?: (value: number) => void;
+  active: boolean;
+  processing: boolean;
+  mode: "static" | "scrolling" | "live";
+  barWidth: number;
+  barGap: number;
+  barRadius: number;
+  barColor?: string;
+  progressColor?: string;
+  fadeEdges: boolean;
+  fadeWidth: number;
+  sensitivity: number;
+  updateRate: number;
+  seed: number;
+  data?: number[];
+  canvasRef: React$1.RefObject<HTMLCanvasElement | null>;
+  containerRef: React$1.RefObject<HTMLDivElement | null>;
+  isDragging: boolean;
+  setIsDragging: (dragging: boolean) => void;
+  seekTo: (clientX: number) => void;
+  liveDataRef: React$1.MutableRefObject<number[]>;
+  needsRedrawRef: React$1.MutableRefObject<boolean>;
+  triggerRedraw: () => void;
+}
+export declare function useWaveform(): WaveformContextValue;
+export declare function Waveform({ children, className, value: controlledValue, defaultValue, onValueChange, duration, active, processing, mode, microphone, deviceId, barWidth, barGap, barRadius, barColor, progressColor, fadeEdges, fadeWidth, sensitivity, updateRate, seed, data, ...props }: WaveformProps): React$1.JSX.Element;
+export interface WaveformVisualProps extends React$1.CanvasHTMLAttributes<HTMLCanvasElement> {}
+export declare function WaveformVisual({ className, ...props }: WaveformVisualProps): React$1.JSX.Element;
+export interface WaveformScrubberProps extends React$1.HTMLAttributes<HTMLDivElement> {}
+export declare function WaveformScrubber({ className, ...props }: WaveformScrubberProps): React$1.JSX.Element;
+export interface WaveformHandleProps extends useRender.ComponentProps<"div"> {}
+export declare function WaveformHandle({ className, render, ...props }: WaveformHandleProps): React$1.ReactElement;
+//#endregion