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

package/dist/hooks/useThemableProps.d.ts

@@ -0,0 +1,68 @@
+import { default as React } from 'react';
+
+/**
+ * Options for useThemableProps hook
+ */
+export interface UseThemablePropsOptions {
+    /** Component primary color - any valid CSS color value */
+    color?: string;
+    /** Roundness for component corners/caps (normalized 0.0-1.0) */
+    roundness?: number;
+    /** User-provided style object (takes precedence over generated CSS variables) */
+    style?: React.CSSProperties;
+}
+/**
+ * Return value from useThemableProps hook
+ */
+export interface UseThemablePropsResult {
+    /** Merged style object with CSS variables and user styles */
+    style: React.CSSProperties;
+    /** Clamped roundness value (undefined if not provided) */
+    clampedRoundness?: number;
+}
+/**
+ * Hook that encapsulates CSS variable computation for themable components.
+ *
+ * This hook handles:
+ * - Clamping normalized roundness values to valid ranges
+ * - Generating CSS variables from themable props (color, roundness)
+ * - Automatically inferring linecap from roundness (0.0 = square, >0.0 = round)
+ * - Computing color variants (primary-50, primary-20) when color is provided
+ * - Merging with user-provided style (user style takes precedence)
+ *
+ * **Roundness and Linecap Relationship:**
+ * The roundness attribute serves as a single source of truth for the overall "feeling" of the UI.
+ * For arc-based components (like knobs), the roundness value automatically determines the stroke-linecap:
+ * - `roundness = 0.0` → `stroke-linecap: square` (sharp, technical look)
+ * - `roundness > 0.0` → `stroke-linecap: round` (smooth, rounded look)
+ *
+ * This hook sets both `--audioui-roundness-base` and `--audioui-linecap-base` CSS variables
+ * when a roundness prop is provided, ensuring consistent visual styling across all components.
+ *
+ * The hook returns a style object that can be spread directly onto component elements,
+ * along with clamped values that can be used for viewProps.
+ * CSS variables are set on the element, allowing child components to read them via `var(--audioui-*)`.
+ *
+ * @param options - Configuration object with color, roundness, and style
+ * @returns Object containing style and clamped roundness value
+ *
+ * @example
+ * ```tsx
+ * function MyComponent({ color, roundness, style }: ThemableProps & BaseProps) {
+ *   const { style: themableStyle } = useThemableProps({
+ *     color,
+ *     roundness,
+ *     style,
+ *   });
+ *
+ *   return (
+ *     <div style={themableStyle}>
+ *       {/* Child components can read CSS variables via var(--audioui-primary-color) *\/}
+ *       <ViewComponent roundness={roundness ?? "var(--audioui-roundness-button)"} />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useThemableProps({ color, roundness, style }: UseThemablePropsOptions): UseThemablePropsResult;
+//# sourceMappingURL=useThemableProps.d.ts.map

package/dist/hooks/useThemableProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemableProps.d.ts","sourceRoot":"","sources":["../../src/hooks/useThemableProps.ts"],"names":[],"mappings":"AAMA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACpC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACnC,6DAA6D;IAC7D,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,uBAAuB,GAAG,sBAAsB,CA8B7G"}

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+export { default as OptionView } from './components/primitives/controls/OptionView';
+export { default as Button } from './components/defaults/controls/Button';
+export { default as Knob } from './components/defaults/controls/Knob';
+export { default as CycleButton } from './components/defaults/controls/CycleButton';
+export { default as Slider } from './components/defaults/controls/Slider';
+export { default as ContinuousControl } from './components/primitives/controls/ContinuousControl';
+export { default as DiscreteControl } from './components/primitives/controls/DiscreteControl';
+export { default as BooleanControl } from './components/primitives/controls/BooleanControl';
+export { default as FilmStripContinuousControl } from './components/generic/controls/FilmStripContinuousControl';
+export { default as FilmStripDiscreteControl } from './components/generic/controls/FilmStripDiscreteControl';
+export { default as FilmStripBooleanControl } from './components/generic/controls/FilmStripBooleanControl';
+export { default as ImageKnob } from './components/generic/controls/ImageKnob';
+export { default as ImageRotarySwitch } from './components/generic/controls/ImageRotarySwitch';
+export { default as ImageSwitch } from './components/generic/controls/ImageSwitch';
+export { default as ValueRing } from './components/primitives/svg/ValueRing';
+export type { ValueRingProps } from './components/primitives/svg/ValueRing';
+export { default as RotaryImage } from './components/primitives/svg/RotaryImage';
+export type { RotaryImageProps } from './components/primitives/svg/RotaryImage';
+export { default as RadialImage } from './components/primitives/svg/RadialImage';
+export type { RadialImageProps } from './components/primitives/svg/RadialImage';
+export { default as RadialHtmlOverlay } from './components/primitives/svg/RadialHtmlOverlay';
+export type { RadialHtmlOverlayProps } from './components/primitives/svg/RadialHtmlOverlay';
+export { default as FilmstripImage } from './components/primitives/svg/FilmstripImage';
+export type { FilmstripImageProps } from './components/primitives/svg/FilmstripImage';
+export { default as Image } from './components/primitives/svg/Image';
+export type { ImageProps } from './components/primitives/svg/Image';
+export { default as RevealingPath } from './components/primitives/svg/RevealingPath';
+export type { RevealingPathProps } from './components/primitives/svg/RevealingPath';
+export { default as TickRing } from './components/primitives/svg/TickRing';
+export type { TickRingProps } from './components/primitives/svg/TickRing';
+export { default as LabelRing } from './components/primitives/svg/LabelRing';
+export type { LabelRingProps } from './components/primitives/svg/LabelRing';
+export { default as LinearStrip } from './components/primitives/svg/LinearStrip';
+export type { LinearStripProps } from './components/primitives/svg/LinearStrip';
+export { default as ValueStrip } from './components/primitives/svg/ValueStrip';
+export type { ValueStripProps } from './components/primitives/svg/ValueStrip';
+export { default as LinearCursor } from './components/primitives/svg/LinearCursor';
+export type { LinearCursorProps } from './components/primitives/svg/LinearCursor';
+export { default as ButtonView } from './components/defaults/controls/ButtonView';
+export { default as KnobView } from './components/defaults/controls/KnobView';
+export { default as SliderView, VerticalSliderView, HorizontalSliderView, } from './components/defaults/controls/SliderView';
+export { default as Keys } from './components/defaults/devices/Keys';
+export { default as AdaptiveBox } from './components/primitives/AdaptiveBox';
+export type { AdaptiveBoxSvgProps, AdaptiveBoxLabelProps, AdaptiveBoxHtmlOverlayProps, } from './components/primitives/AdaptiveBox';
+export { setThemeColor, setThemeRoundness, setTheme, getThemeColor, getThemeRoundness } from './utils/theme';
+export type { ThemeConfig } from './utils/theme';
+export type { CycleButtonProps } from './components/defaults/controls/CycleButton';
+export type { OptionViewProps } from './components/primitives/controls/OptionView';
+export type { KnobProps } from './components/defaults/controls/Knob';
+export type { SliderProps } from './components/defaults/controls/Slider';
+export type { ButtonProps } from './components/defaults/controls/Button';
+export type { ContinuousControlComponentProps } from './components/primitives/controls/ContinuousControl';
+export type { DiscreteControlComponentProps } from './components/primitives/controls/DiscreteControl';
+export type { BooleanControlComponentProps } from './components/primitives/controls/BooleanControl';
+export type { FilmStripContinuousControlProps, FilmstripProps, } from './components/generic/controls/FilmStripContinuousControl';
+export type { FilmStripDiscreteControlProps } from './components/generic/controls/FilmStripDiscreteControl';
+export type { FilmStripBooleanControlProps } from './components/generic/controls/FilmStripBooleanControl';
+export type { ImageKnobProps, RotaryImageProps as RotaryImageControlProps, } from './components/generic/controls/ImageKnob';
+export type { ImageRotarySwitchProps } from './components/generic/controls/ImageRotarySwitch';
+export type { ImageSwitchComponentProps, ImageSwitchProps } from './components/generic/controls/ImageSwitch';
+export type { KeysProps } from './components/defaults/devices/Keys';
+export type { ButtonViewProps } from './components/defaults/controls/ButtonView';
+export type { KnobViewProps } from './components/defaults/controls/KnobView';
+export type { SliderViewProps } from './components/defaults/controls/SliderView';
+export type { AdaptiveSizeProps, AdaptiveBoxProps, BaseProps, ContinuousControlProps, DiscreteControlProps, BooleanControlProps, InteractiveControlProps, ThemableProps, ControlComponent, ControlComponentView, ControlComponentViewProps, AudioControlEvent, ControlComponentMetadata, KnobVariant, SliderVariant, SliderCursorSize, ValueLabelMode, } from './components/types';
+export { bipolarFormatter, midiBipolarFormatter, withUnit, withPrecision, combineFormatters, percentageFormatter, frequencyFormatter, calculateCenterValue, } from '@cutoff/audio-ui-core';
+export { noteNumToNote, noteToNoteNum, isNoteOn, createNoteNumSet, } from '@cutoff/audio-ui-core';
+export { DEFAULT_ROUNDNESS, DEFAULT_THICKNESS } from '@cutoff/audio-ui-core';
+export * from '@cutoff/audio-ui-core';
+export * from './hooks/useAudioParameter';
+export * from './hooks/useAdaptiveSize';
+export * from './hooks/useThemableProps';
+export * from './hooks/useDiscreteParameterResolution';
+export * from './hooks/useContinuousParameterResolution';
+export * from './hooks/useBooleanParameterResolution';
+export * from './hooks/useNoteInteraction';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}