{"record":{"id":"52c5af7f5baa25dc","repo":"heroui-inc/heroui","slug":"heroui-colorslider-invalid-combination-channel","errorCode":null,"errorMessage":"[HeroUI ColorSlider] Invalid combination: channel=\"${channel}\" requires colorSpace=\"${requiredSpace}\", but received colorSpace=\"${colorSpace}\". Auto-correcting to \"${requiredSpace}\".","messagePattern":"\\[HeroUI ColorSlider\\] Invalid combination: channel=\"(.+?)\" requires colorSpace=\"(.+?)\", but received colorSpace=\"(.+?)\"\\. Auto-correcting to \"(.+?)\"\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/react/src/components/color-slider/color-slider.tsx","lineNumber":75,"sourceCode":"  blue: \"rgb\",\n  lightness: \"hsl\",\n  brightness: \"hsb\",\n};\n\n/** Channels that only work with HSL or HSB (not RGB) */\nconst HSL_HSB_ONLY_CHANNELS = new Set([\"hue\", \"saturation\"]);\n\n/**\n * Validates and returns a valid colorSpace for the given channel.\n * If an invalid combination is detected, logs a warning and returns the correct colorSpace.\n */\nfunction getValidColorSpace(channel: string, colorSpace?: ColorSpace): ColorSpace | undefined {\n  // Check if channel requires a specific color space (e.g., \"red\" requires \"rgb\")\n  const requiredSpace = CHANNEL_TO_REQUIRED_COLORSPACE[channel];\n\n  if (requiredSpace && colorSpace && colorSpace !== requiredSpace) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `[HeroUI ColorSlider] Invalid combination: channel=\"${channel}\" requires colorSpace=\"${requiredSpace}\", ` +\n        `but received colorSpace=\"${colorSpace}\". Auto-correcting to \"${requiredSpace}\".`,\n    );\n\n    return requiredSpace;\n  }\n\n  // Check if channel is HSL/HSB only (hue, saturation) but RGB was specified\n  if (HSL_HSB_ONLY_CHANNELS.has(channel) && colorSpace === \"rgb\") {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `[HeroUI ColorSlider] Invalid combination: channel=\"${channel}\" is not available in RGB color space. ` +\n        `Use colorSpace=\"hsl\" or colorSpace=\"hsb\" instead. Auto-correcting to \"hsl\".`,\n    );\n\n    return \"hsl\";\n  }\n","sourceCodeStart":57,"sourceCodeEnd":93,"githubUrl":"https://github.com/heroui-inc/heroui/blob/7546fff8136f538a2f56a52257c621a5cd616a1d/packages/react/src/components/color-slider/color-slider.tsx#L57-L93","documentation":"ColorSlider validates its channel/colorSpace prop combination. Some channels (e.g. \"red\", \"green\", \"blue\") only exist in a specific color space (\"rgb\"); if you pass a mismatched colorSpace, the component logs a console warning and auto-corrects the colorSpace to the one the channel requires. This is a soft warning, not a thrown error.","triggerScenarios":"Passing channel=\"red\" with colorSpace=\"hsb\" (or any non-rgb space) to <ColorSlider>; generally any channel in CHANNEL_TO_REQUIRED_COLORSPACE combined with a different colorSpace prop.","commonSituations":"Copy-pasting slider configs between hue/saturation sliders and RGB sliders; dynamically generating channel props without constraining colorSpace; upgrading from a version that silently ignored the mismatch.","solutions":["Set colorSpace to the space the channel requires (e.g. channel=\"red\" → colorSpace=\"rgb\")","Derive colorSpace from the channel via a lookup table instead of hardcoding both","If you need hsb/hsl behavior, use a channel that belongs to that space (hue, saturation, brightness)"],"exampleFix":"// before\n<ColorSlider channel=\"red\" colorSpace=\"hsb\" defaultValue=\"#f00\" />\n\n// after\n<ColorSlider channel=\"red\" colorSpace=\"rgb\" defaultValue=\"#f00\" />","handlingStrategy":"validation","validationCode":"const CHANNEL_SPACE: Record<string, ColorSpace> = {\n  red: \"rgb\", green: \"rgb\", blue: \"rgb\",\n  hue: \"hsb\", saturation: \"hsb\", brightness: \"hsb\",\n};\nconst space = CHANNEL_SPACE[channel] ?? colorSpace;\n<ColorSlider channel={channel} colorSpace={space} />;","typeGuard":"const isValidChannelSpace = (channel: string, space?: ColorSpace) =>\n  !space || !CHANNEL_SPACE[channel] || CHANNEL_SPACE[channel] === space;","tryCatchPattern":null,"preventionTips":["Derive colorSpace from channel via a lookup table","Don't share one colorSpace value across sliders with different channel families","Watch the console in dev for auto-correction warnings"],"tags":["color","props-validation","console-warning","color-slider"],"backgroundTag":"invalid-prop-combination-warning","analyzedSha":"7546fff8136f538a2f56a52257c621a5cd616a1d","analyzedAt":"2026-08-28T13:15:49.959Z","schemaVersion":2},"datasetVersion":"2026-08-28T16:17:29.566Z"}