@cutoff/audio-ui-react 1.0.0-preview.20260123.1125

package/dist/components/primitives/svg/LinearCursor.d.ts

@@ -0,0 +1,72 @@
+import { default as React, CSSProperties } from 'react';
+
+export type LinearCursorProps = {
+    /** X coordinate of the center point of the strip */
+    cx: number;
+    /** Y coordinate of the center point of the strip */
+    cy: number;
+    /** Length of the strip */
+    length: number;
+    /** Rotation angle in degrees (0 = vertical, -90 or 270 = horizontal) */
+    rotation?: number;
+    /** Normalized value between 0 and 1, driving the cursor position */
+    normalizedValue: number;
+    /** Width of the cursor (x axis) */
+    width: number;
+    /** Aspect ratio of the cursor (numeric value, e.g., 1 = 1:1, 1.5 = 1.5:1). Height = width / aspectRatio. Ignored when imageHref is provided. */
+    aspectRatio: number;
+    /** Optional image URL to display as cursor. When provided, roundness and aspectRatio are ignored (image preserves its natural aspect ratio). */
+    imageHref?: string;
+    /** Corner roundness (normalized 0.0-1.0, maps to 0-20, or CSS variable string). 1.0 = ellipse/circle, 0.0-1.0 (excl.) = rounded rectangle. Ignored when imageHref is provided. */
+    roundness?: number | string;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+};
+/**
+ * A reusable SVG primitive that renders a cursor that slides along a linear strip.
+ * The cursor position is driven by a normalized value (0.0 to 1.0).
+ *
+ * The cursor slides along a virtual bar centered at (cx, cy) with a defined length.
+ * - normalizedValue 0.0: cursor at the bottom of the virtual bar
+ * - normalizedValue 1.0: cursor at the top of the virtual bar
+ *
+ * The rotation prop represents the rotation of the virtual bar (not the cursor itself).
+ * The cursor rotates around the strip center (cx, cy) along with the bar.
+ *
+ * The cursor can be rendered as:
+ * - An image (via imageHref)
+ * - An SVG shape (rectangle or ellipse based on roundness)
+ *
+ * This component is designed to be used inside an <svg> element.
+ *
+ * @param {number} cx - X coordinate of the center point of the strip
+ * @param {number} cy - Y coordinate of the center point of the strip
+ * @param {number} length - Length of the strip
+ * @param {number} [rotation=0] - Rotation angle in degrees of the virtual bar (0 = vertical, -90 or 270 = horizontal)
+ * @param {number} normalizedValue - Normalized value between 0 and 1, driving the cursor position
+ * @param {number} width - Width of the cursor (x axis)
+ * @param {number} aspectRatio - Aspect ratio of the cursor (numeric value, e.g., 1 = 1:1, 1.5 = 1.5:1). Height = width / aspectRatio. Ignored when imageHref is provided.
+ * @param {string} [imageHref] - Optional image URL to display as cursor. When provided, roundness and aspectRatio are ignored (image preserves its natural aspect ratio).
+ * @param {number | string} [roundness] - Corner roundness (normalized 0.0-1.0, maps to 0-20, or CSS variable string). 1.0 = ellipse/circle. Ignored when imageHref is provided.
+ * @param {string} [className] - CSS class name
+ * @param {CSSProperties} [style] - Inline styles
+ * @returns {JSX.Element} SVG element representing the cursor
+ *
+ * @example
+ * ```tsx
+ * // Vertical cursor (rectangle)
+ * <LinearCursor cx={50} cy={150} length={260} normalizedValue={0.65} width={6} aspectRatio={1} />
+ *
+ * // Horizontal cursor (ellipse)
+ * <LinearCursor cx={150} cy={50} length={260} rotation={-90} normalizedValue={0.75} width={8} aspectRatio={1} roundness={1} />
+ *
+ * // Image-based cursor (aspectRatio and roundness ignored, image preserves natural aspect ratio)
+ * <LinearCursor cx={50} cy={150} length={260} normalizedValue={0.5} width={20} aspectRatio={1} imageHref="/cursor.png" />
+ * ```
+ */
+declare function LinearCursor({ cx, cy, length, rotation, normalizedValue, width, aspectRatio, imageHref, roundness, className, style, }: LinearCursorProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof LinearCursor>;
+export default _default;
+//# sourceMappingURL=LinearCursor.d.ts.map

package/dist/components/primitives/svg/LinearCursor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearCursor.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/svg/LinearCursor.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAW,MAAM,OAAO,CAAC;AAGtD,MAAM,MAAM,iBAAiB,GAAG;IAC5B,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,eAAe,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,gJAAgJ;IAChJ,WAAW,EAAE,MAAM,CAAC;IACpB,gJAAgJ;IAChJ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kLAAkL;IAClL,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,iBAAS,YAAY,CAAC,EAClB,EAAE,EACF,EAAE,EACF,MAAM,EACN,QAAY,EACZ,eAAe,EACf,KAAK,EACL,WAAW,EACX,SAAS,EACT,SAA6B,EAC7B,SAAS,EACT,KAAK,GACR,EAAE,iBAAiB,2CA6GnB;;AAED,wBAAwC"}

package/dist/components/primitives/svg/LinearStrip.d.ts

@@ -0,0 +1,49 @@
+import { default as React, CSSProperties } from 'react';
+
+export type LinearStripProps = {
+    /** X coordinate of the center point */
+    cx: number;
+    /** Y coordinate of the center point */
+    cy: number;
+    /** Length of the strip */
+    length: number;
+    /** Rotation angle in degrees (0 = vertical, -90 or 270 = horizontal) */
+    rotation?: number;
+    /** Width of the strip (thickness) */
+    thickness: number;
+    /** Corner roundness (normalized 0.0-1.0, maps to 0-20, or CSS variable string) */
+    roundness?: number | string;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+};
+/**
+ * A reusable SVG primitive that renders a linear strip (rectangle) for linear controls.
+ * The strip is positioned at a center point (cx, cy) and can be rotated to any angle.
+ *
+ * This component is designed to be used inside an <svg> element.
+ *
+ * @param {number} cx - X coordinate of the center point
+ * @param {number} cy - Y coordinate of the center point
+ * @param {number} length - Length of the strip (height of the rectangle)
+ * @param {number} [rotation=0] - Rotation angle in degrees (0 = vertical, -90 or 270 = horizontal)
+ * @param {number} thickness - Width of the strip (thickness of the rectangle)
+ * @param {number | string} [roundness] - Corner roundness (normalized 0.0-1.0, maps to 0-20, or CSS variable string)
+ * @param {string} [className] - CSS class name
+ * @param {CSSProperties} [style] - Inline styles
+ * @returns {JSX.Element} SVG rect element representing the linear strip
+ *
+ * @example
+ * ```tsx
+ * // Vertical strip (default)
+ * <LinearStrip cx={50} cy={150} length={260} thickness={6} />
+ *
+ * // Horizontal strip (rotated -90 degrees)
+ * <LinearStrip cx={150} cy={50} length={260} thickness={6} rotation={-90} />
+ * ```
+ */
+declare function LinearStrip({ cx, cy, length, rotation, thickness, roundness, className, style, }: LinearStripProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof LinearStrip>;
+export default _default;
+//# sourceMappingURL=LinearStrip.d.ts.map

package/dist/components/primitives/svg/LinearStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearStrip.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/svg/LinearStrip.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAW,MAAM,OAAO,CAAC;AAItD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAS,WAAW,CAAC,EACjB,EAAE,EACF,EAAE,EACF,MAAM,EACN,QAAY,EACZ,SAAS,EACT,SAA6B,EAC7B,SAAS,EACT,KAAK,GACR,EAAE,gBAAgB,2CA0DlB;;AAED,wBAAuC"}

package/dist/components/primitives/svg/RadialHtmlOverlay.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+
+export type RadialHtmlOverlayProps = {
+    /** X coordinate of the center point */
+    cx: number;
+    /** Y coordinate of the center point */
+    cy: number;
+    /** Radius from center to the edge of the content box. The content will be a square with side = radius * 2 */
+    radius: number;
+    /** Content to render inside the overlay */
+    children?: React.ReactNode;
+    /** Additional CSS class name */
+    className?: string;
+    /** Inline styles for the foreignObject */
+    style?: React.CSSProperties;
+    /** Pointer events behavior (default: "none" to let clicks pass through to SVG below, set to "auto" if interactive) */
+    pointerEvents?: "none" | "auto";
+};
+/**
+ * A primitive that renders HTML content inside an SVG at a radial position.
+ * It creates a square foreignObject centered at (cx, cy) with size based on radius.
+ *
+ * This is the preferred way to render text inside knobs, as it leverages the browser's
+ * native HTML text rendering engine (Flexbox, wrapping, fonts) which is superior to SVG text.
+ */
+declare function RadialHtmlOverlay({ cx, cy, radius, children, className, style, pointerEvents, }: RadialHtmlOverlayProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof RadialHtmlOverlay>;
+export default _default;
+//# sourceMappingURL=RadialHtmlOverlay.d.ts.map

package/dist/components/primitives/svg/RadialHtmlOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialHtmlOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/svg/RadialHtmlOverlay.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,sBAAsB,GAAG;IACjC,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,6GAA6G;IAC7G,MAAM,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,sHAAsH;IACtH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACnC,CAAC;AAEF;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EACvB,EAAE,EACF,EAAE,EACF,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,aAAsB,GACzB,EAAE,sBAAsB,2CAmCxB;;AAED,wBAA6C"}

package/dist/components/primitives/svg/RadialImage.d.ts

@@ -0,0 +1,36 @@
+import { default as React, CSSProperties } from 'react';
+
+export type RadialImageProps = {
+    /** X coordinate of the center point */
+    cx: number;
+    /** Y coordinate of the center point */
+    cy: number;
+    /** Radius the content should fit within */
+    radius: number;
+    /** Optional image URL to display */
+    imageHref?: string;
+    /** Optional SVG content to display (e.g., icon components) */
+    children?: React.ReactNode;
+    /** Optional SVG transform attribute */
+    transform?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /**
+     * Inline styles.
+     * Supports `color` property for icon theming - icons using currentColor will inherit this value.
+     */
+    style?: CSSProperties;
+};
+/**
+ * A primitive component that displays static content at radial coordinates.
+ * The content is sized to fit within the specified radius and centered at (cx, cy).
+ *
+ * This component can display an image (via imageHref) or arbitrary SVG content (via children).
+ * It is designed to work alongside ValueRing and RotaryImage components in composing knobs.
+ *
+ * Useful for displaying icons or static images within knob compositions.
+ */
+declare function RadialImage({ cx, cy, radius, imageHref, children, transform, className, style }: RadialImageProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof RadialImage>;
+export default _default;
+//# sourceMappingURL=RadialImage.d.ts.map

package/dist/components/primitives/svg/RadialImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialImage.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/svg/RadialImage.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG;IAC3B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;GAQG;AACH,iBAAS,WAAW,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CA2B1G;;AAED,wBAAuC"}

package/dist/components/primitives/svg/RevealingPath.d.ts

@@ -0,0 +1,37 @@
+import { default as React, SVGProps } from 'react';
+
+export interface RevealingPathProps extends Omit<SVGProps<SVGPathElement>, "strokeDasharray" | "strokeDashoffset" | "pathLength"> {
+    /**
+     * Normalized value between 0 and 1 indicating how much of the path to reveal.
+     * 0 = path is completely hidden
+     * 1 = path is completely visible
+     */
+    normalizedValue: number;
+    /**
+     * The internal resolution used for the path length calculation.
+     * Higher values might offer smoother animations but "100" is usually sufficient for percentage-based fills.
+     * Defaults to 100.
+     */
+    resolution?: number;
+}
+/**
+ * A primitive SVG component that reveals a path from start to end using CSS stroke-dashoffset.
+ *
+ * This component uses the SVG `pathLength` attribute to normalize the path's length
+ * calculation, allowing for performant "filling" animations without calculating
+ * the actual geometric length of the path in JavaScript.
+ *
+ * Usage:
+ * ```tsx
+ * <RevealingPath
+ *   d="M..."
+ *   normalizedValue={0.5} // 50% revealed from the start
+ *   stroke="currentColor"
+ *   fill="none"
+ * />
+ * ```
+ */
+declare function RevealingPath({ normalizedValue, resolution, className, style, ...props }: RevealingPathProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof RevealingPath>;
+export default _default;
+//# sourceMappingURL=RevealingPath.d.ts.map

package/dist/components/primitives/svg/RevealingPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RevealingPath.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/svg/RevealingPath.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC5C,QAAQ,CAAC,cAAc,CAAC,EACxB,iBAAiB,GAAG,kBAAkB,GAAG,YAAY,CACxD;IACG;;;;OAIG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,aAAa,CAAC,EAAE,eAAe,EAAE,UAAgB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAyB3G;;AAED,wBAAyC"}

package/dist/components/primitives/svg/RingArc.d.ts

@@ -0,0 +1,21 @@
+import { default as React, CSSProperties } from 'react';
+
+export type RingArcProps = {
+    startAngle: number;
+    endAngle: number;
+    style: CSSProperties | undefined;
+    cx: number;
+    cy: number;
+    radius: number;
+    thickness: number;
+    strokeLinecap: "round" | "square" | "butt" | string;
+};
+/**
+ * Helper component to render either a circle or path based on whether it's a full circle.
+ *
+ * @internal
+ */
+declare function RingArc({ startAngle, endAngle, style, cx, cy, radius, thickness, strokeLinecap }: RingArcProps): import("react/jsx-runtime").JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof RingArc>;
+export default _default;
+//# sourceMappingURL=RingArc.d.ts.map

package/dist/components/primitives/svg/RingArc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RingArc.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/svg/RingArc.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAW,MAAM,OAAO,CAAC;AAGtD,MAAM,MAAM,YAAY,GAAG;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;CACvD,CAAC;AAEF;;;;GAIG;AACH,iBAAS,OAAO,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,YAAY,kDA0CvG;;AAED,wBAAmC"}

package/dist/components/primitives/svg/RotaryImage.d.ts

@@ -0,0 +1,43 @@
+import { default as React, CSSProperties } from 'react';
+
+export type RotaryImageProps = {
+    /** X coordinate of the center point */
+    cx: number;
+    /** Y coordinate of the center point */
+    cy: number;
+    /** Radius of the rotary control (used for bounds/image sizing) */
+    radius: number;
+    /** Normalized value between 0 and 1 */
+    normalizedValue: number;
+    /** Whether to start the arc from center (bipolar mode) */
+    bipolar?: boolean;
+    /** Openness of the arc in degrees (default 90) */
+    openness?: number;
+    /** Optional image URL to display */
+    imageHref?: string;
+    /** Optional SVG content to rotate */
+    children?: React.ReactNode;
+    /** Optional rotation angle offset in degrees (default 0) */
+    rotation?: number;
+    /** Optional number of discrete positions. When defined, the value will snap to the nearest position. */
+    positions?: number;
+    /** Optional X coordinate for the center of rotation (defaults to cx) */
+    pivotX?: number;
+    /** Optional Y coordinate for the center of rotation (defaults to cy) */
+    pivotY?: number;
+    /** Additional CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+};
+/**
+ * A primitive component that rotates its content based on a normalized value.
+ * Designed to work with the same angle logic as ValueRing.tsx.
+ *
+ * This component wraps RadialImage and applies rotation based on the normalized value.
+ * It can display an image (via imageHref) or arbitrary SVG content (via children).
+ */
+declare function RotaryImage({ cx, cy, radius, normalizedValue, bipolar, openness, imageHref, children, rotation, positions, pivotX, pivotY, className, style, }: RotaryImageProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof RotaryImage>;
+export default _default;
+//# sourceMappingURL=RotaryImage.d.ts.map

package/dist/components/primitives/svg/RotaryImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RotaryImage.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/svg/RotaryImage.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI7C,MAAM,MAAM,gBAAgB,GAAG;IAC3B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,kEAAkE;IAClE,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wGAAwG;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;GAMG;AACH,iBAAS,WAAW,CAAC,EACjB,EAAE,EACF,EAAE,EACF,MAAM,EACN,eAAe,EACf,OAAe,EACf,QAAa,EACb,SAAS,EACT,QAAQ,EACR,QAAY,EACZ,SAAS,EACT,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,GACR,EAAE,gBAAgB,2CAqBlB;;AAED,wBAAuC"}

package/dist/components/primitives/svg/TickRing.d.ts

@@ -0,0 +1,53 @@
+import { default as React, CSSProperties, ReactNode } from 'react';
+
+export type TickData = {
+    x: number;
+    y: number;
+    angle: number;
+    index: number;
+};
+export type TickRingProps = {
+    /** X coordinate of the center point */
+    cx: number;
+    /** Y coordinate of the center point */
+    cy: number;
+    /** Outer radius of the ring (ticks extend inward) */
+    radius: number;
+    /** Length of the ticks in pixels (or diameter of dots) */
+    thickness?: number;
+    /** Openness of the ring in degrees (default 90) */
+    openness?: number;
+    /** Rotation offset in degrees (default 0) */
+    rotation?: number;
+    /** Total number of ticks to distribute evenly */
+    count?: number;
+    /** Angle in degrees between ticks (alternative to count) */
+    step?: number;
+    /**
+     * Shape of the ticks:
+     * - "line": Radial lines (optimized single path)
+     * - "dot": Circles (optimized single path)
+     * - "pill": Rounded lines (using stroke-linecap round)
+     */
+    variant?: "line" | "dot" | "pill";
+    /**
+     * Optional callback to render custom content at each tick position.
+     * If provided, the component bails out of single-path optimization and renders generic ReactNodes.
+     */
+    renderTick?: (data: TickData) => ReactNode;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+};
+/**
+ * A reusable SVG primitive that renders a ring of tick marks.
+ * Useful for creating scales on knobs and dials.
+ *
+ * Supports optimized single-path rendering for lines and dots,
+ * or custom rendering via renderTick callback.
+ */
+declare function TickRing({ cx, cy, radius, thickness, openness, rotation, count, step, variant, renderTick, className, style, }: TickRingProps): import("react/jsx-runtime").JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof TickRing>;
+export default _default;
+//# sourceMappingURL=TickRing.d.ts.map

package/dist/components/primitives/svg/TickRing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TickRing.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/svg/TickRing.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAGjE,MAAM,MAAM,QAAQ,GAAG;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IACxB,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,qDAAqD;IACrD,MAAM,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,SAAS,CAAC;IAC3C,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;GAMG;AACH,iBAAS,QAAQ,CAAC,EACd,EAAE,EACF,EAAE,EACF,MAAM,EACN,SAAa,EACb,QAAa,EACb,QAAY,EACZ,KAAK,EACL,IAAI,EACJ,OAAgB,EAChB,UAAU,EACV,SAAS,EACT,KAAK,GACR,EAAE,aAAa,kDAsHf;;AAED,wBAAoC"}

package/dist/components/primitives/svg/ValueRing.d.ts

@@ -0,0 +1,38 @@
+import { default as React, CSSProperties } from 'react';
+
+export type ValueRingProps = {
+    /** X coordinate of the center point */
+    cx: number;
+    /** Y coordinate of the center point */
+    cy: number;
+    /** Radius of the ring */
+    radius: number;
+    /** Normalized value between 0 and 1 */
+    normalizedValue: number;
+    /** Whether to start the arc from center (bipolar mode) */
+    bipolar?: boolean;
+    /** Thickness of the knob's stroke (1-20 pixels) */
+    thickness?: number;
+    /** Roundness for stroke linecap (false = square, true = round, or CSS variable string) */
+    roundness?: boolean | string;
+    /** Openness of the ring in degrees (value between 0-360º; 0º: closed; 90º: 3/4 open; 180º: half-circle;) */
+    openness?: number;
+    /** Optional rotation angle offset in degrees (default 0) */
+    rotation?: number;
+    /** Optional number of discrete positions. When defined, the value will snap to the nearest position. */
+    positions?: number;
+    /** Optional style overrides for the foreground (value) arc */
+    fgArcStyle?: CSSProperties;
+    /** Optional style overrides for the background arc */
+    bgArcStyle?: CSSProperties;
+};
+/**
+ * A reusable SVG fragment that renders a ring (arc) used in circular controls like knobs.
+ * It handles the calculation of SVG paths for both the background track and the foreground value indicator.
+ *
+ * This component is designed to be used inside an <svg> element.
+ */
+declare function ValueRing({ cx, cy, radius, normalizedValue, bipolar, thickness, roundness, openness, rotation, positions, fgArcStyle, bgArcStyle, }: ValueRingProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ValueRing>;
+export default _default;
+//# sourceMappingURL=ValueRing.d.ts.map

package/dist/components/primitives/svg/ValueRing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueRing.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/svg/ValueRing.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAW,MAAM,OAAO,CAAC;AAItD,MAAM,MAAM,cAAc,GAAG;IACzB,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,yBAAyB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wGAAwG;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,sDAAsD;IACtD,UAAU,CAAC,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF;;;;;GAKG;AACH,iBAAS,SAAS,CAAC,EACf,EAAE,EACF,EAAE,EACF,MAAM,EACN,eAAe,EACf,OAAe,EACf,SAAa,EACb,SAAS,EACT,QAAa,EACb,QAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,GACb,EAAE,cAAc,2CA8DhB;;AAED,wBAAqC"}

package/dist/components/primitives/svg/ValueStrip.d.ts

@@ -0,0 +1,59 @@
+import { default as React, CSSProperties } from 'react';
+
+export type ValueStripProps = {
+    /** X coordinate of the center point */
+    cx: number;
+    /** Y coordinate of the center point */
+    cy: number;
+    /** Length of the strip */
+    length: number;
+    /** Rotation angle in degrees (0 = vertical, -90 or 270 = horizontal) */
+    rotation?: number;
+    /** Width of the strip (thickness) */
+    thickness: number;
+    /** Corner roundness (normalized 0.0-1.0, maps to 0-20, or CSS variable string) */
+    roundness?: number | string;
+    /** Normalized value between 0 and 1 */
+    normalizedValue: number;
+    /** Whether to start fill from center (bipolar mode) */
+    bipolar?: boolean;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+};
+/**
+ * A reusable SVG primitive that renders the active (foreground) portion of a linear strip.
+ * Designed to work in tandem with LinearStrip (background).
+ *
+ * The strip is positioned at a center point (cx, cy) and can be rotated to any angle.
+ * - In unipolar mode (default), it fills from the "bottom" (relative to rotation) to the current value.
+ * - In bipolar mode, it fills from the center to the current value.
+ *
+ * This component is designed to be used inside an <svg> element.
+ *
+ * @param {number} cx - X coordinate of the center point
+ * @param {number} cy - Y coordinate of the center point
+ * @param {number} length - Length of the strip
+ * @param {number} [rotation=0] - Rotation angle in degrees (0 = vertical, -90 or 270 = horizontal)
+ * @param {number} thickness - Width of the strip (thickness)
+ * @param {number | string} [roundness] - Corner roundness (normalized 0.0-1.0, maps to 0-20, or CSS variable string)
+ * @param {number} normalizedValue - Normalized value between 0 and 1
+ * @param {boolean} [bipolar=false] - Whether to start fill from center (bipolar mode)
+ * @param {string} [className] - CSS class name
+ * @param {CSSProperties} [style] - Inline styles
+ * @returns {JSX.Element | null} SVG rect element representing the filled portion, or null if height is too small
+ *
+ * @example
+ * ```tsx
+ * // Vertical value strip (unipolar)
+ * <ValueStrip cx={50} cy={150} length={260} thickness={6} normalizedValue={0.65} />
+ *
+ * // Horizontal value strip (bipolar)
+ * <ValueStrip cx={150} cy={50} length={260} thickness={6} rotation={-90} normalizedValue={0.75} bipolar />
+ * ```
+ */
+declare function ValueStrip({ cx, cy, length, rotation, thickness, roundness, normalizedValue, bipolar, className, style, }: ValueStripProps): import("react/jsx-runtime").JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof ValueStrip>;
+export default _default;
+//# sourceMappingURL=ValueStrip.d.ts.map

package/dist/components/primitives/svg/ValueStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueStrip.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/svg/ValueStrip.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAW,MAAM,OAAO,CAAC;AAGtD,MAAM,MAAM,eAAe,GAAG;IAC1B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,uCAAuC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,iBAAS,UAAU,CAAC,EAChB,EAAE,EACF,EAAE,EACF,MAAM,EACN,QAAY,EACZ,SAAS,EACT,SAA6B,EAC7B,eAAe,EACf,OAAe,EACf,SAAS,EACT,KAAK,GACR,EAAE,eAAe,kDAyEjB;;AAED,wBAAsC"}