/** * Utility functions for normalizing component props to match Figma specifications * while maintaining backward compatibility with existing lowercase usage. * * Figma uses PascalCase (e.g., "Standard", "Inverse") but codebase uses lowercase. * These helpers accept both formats and normalize to lowercase for internal use. */ /** * Normalize mode prop values (Standard/Inverse -> standard/inverse) */ export function normalizeMode( value: string | undefined, defaultValue: "standard" | "inverse" = "standard" ): "standard" | "inverse" { if (!value) return defaultValue; const normalized = value.toLowerCase(); if (normalized === "standard" || normalized === "inverse") { return normalized; } return defaultValue; } /** * Normalize state prop values (Default/Hover/Focus/Selected -> default/hover/focus/selected) */ export function normalizeState( value: string | undefined, defaultValue: "default" | "hover" | "focus" | "selected" = "default" ): "default" | "hover" | "focus" | "selected" { if (!value) return defaultValue; const normalized = value.toLowerCase(); if ( normalized === "default" || normalized === "hover" || normalized === "focus" || normalized === "selected" ) { return normalized; } return defaultValue; } /** * Normalize state prop values for form inputs (Default/Active/Hover/Focus) */ export function normalizeInputState( value: string | undefined, defaultValue: "default" | "active" | "hover" | "focus" = "default" ): "default" | "active" | "hover" | "focus" { if (!value) return defaultValue; const normalized = value.toLowerCase(); if ( normalized === "default" || normalized === "active" || normalized === "hover" || normalized === "focus" ) { return normalized; } return defaultValue; } /** * Normalize toggle state prop values (Default/Hover/Focus/Selected) */ export function normalizeToggleState( value: string | undefined, defaultValue: "default" | "hover" | "focus" | "selected" = "default" ): "default" | "hover" | "focus" | "selected" { if (!value) return defaultValue; const normalized = value.toLowerCase(); if ( normalized === "default" || normalized === "hover" || normalized === "focus" || normalized === "selected" ) { return normalized; } return defaultValue; } /** * Type helper for case-insensitive mode prop */ export type ModeValue = "standard" | "inverse" | "Standard" | "Inverse"; /** * Type helper for case-insensitive state prop */ export type StateValue = | "default" | "hover" | "focus" | "selected" | "Default" | "Hover" | "Focus" | "Selected"; /** * Type helper for case-insensitive input state prop */ export type InputStateValue = | "default" | "active" | "hover" | "focus" | "Default" | "Active" | "Hover" | "Focus"; /** * Normalize button variant prop values */ export function normalizeVariant( value: string | undefined, defaultValue: "filled" = "filled" ): "filled" | "filled-inverse" | "outline" | "outline-inverse" | "ghost" | "ghost-inverse" | "danger" | "danger-inverse" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const variants = [ "filled", "filled-inverse", "outline", "outline-inverse", "ghost", "ghost-inverse", "danger", "danger-inverse", ]; if (variants.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize button size prop values */ export function normalizeSize( value: string | undefined, defaultValue: "xsmall" = "xsmall" ): "xsmall" | "small" | "medium" | "large" | "xlarge" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const sizes = ["xsmall", "small", "medium", "large", "xlarge"]; if (sizes.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize alert status prop values */ export function normalizeAlertStatus( value: string | undefined, defaultValue: "default" = "default" ): "default" | "positive" | "warning" | "danger" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const statuses = ["default", "positive", "warning", "danger"]; if (statuses.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize alert type prop values */ export function normalizeAlertType( value: string | undefined, defaultValue: "toast" = "toast" ): "toast" | "banner" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const types = ["toast", "banner"]; if (types.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize tooltip position prop values */ export function normalizeTooltipPosition( value: string | undefined, defaultValue: "top" = "top" ): "top" | "bottom" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const positions = ["top", "bottom"]; if (positions.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Type helper for case-insensitive variant prop */ export type VariantValue = | "filled" | "filled-inverse" | "outline" | "outline-inverse" | "ghost" | "ghost-inverse" | "danger" | "danger-inverse" | "Filled" | "Filled-Inverse" | "Outline" | "Outline-Inverse" | "Ghost" | "Ghost-Inverse" | "Danger" | "Danger-Inverse"; /** * Type helper for case-insensitive size prop */ export type SizeValue = | "xsmall" | "small" | "medium" | "large" | "xlarge" | "XSmall" | "Small" | "Medium" | "Large" | "XLarge"; /** * Normalize menu bar size prop values */ export function normalizeMenuBarSize( value: string | undefined, defaultValue: "default" = "default" ): "xsmall" | "default" | "medium" | "large" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const sizes = ["xsmall", "default", "medium", "large"]; if (sizes.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize menu bar item variant prop values */ export function normalizeMenuBarItemVariant( value: string | undefined, defaultValue: "default" = "default" ): "default" | "home" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const variants = ["default", "home"]; if (variants.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize navigation item variant prop values */ export function normalizeNavigationItemVariant( value: string | undefined, defaultValue: "default" = "default" ): "default" { if (!value) return defaultValue; const normalized = value.toLowerCase(); if (normalized === "default") { return "default"; } return defaultValue; } /** * Normalize navigation item size prop values */ export function normalizeNavigationItemSize( value: string | undefined, defaultValue: "default" = "default" ): "default" | "xsmall" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const sizes = ["default", "xsmall"]; if (sizes.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize content lockup variant prop values */ export function normalizeContentLockupVariant( value: string | undefined, defaultValue: "hero" = "hero" ): "hero" | "feature" | "learn" | "ask" | "ask-inverse" | "modal" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const variants = ["hero", "feature", "learn", "ask", "ask-inverse", "modal"]; if (variants.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize alignment prop values */ export function normalizeAlignment( value: string | undefined, defaultValue: "center" = "center" ): "center" | "left" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const alignments = ["center", "left"]; if (alignments.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize content container size prop values */ export function normalizeContentContainerSize( value: string | undefined, defaultValue: "responsive" = "responsive" ): "xs" | "responsive" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const sizes = ["xs", "responsive"]; if (sizes.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize content thumbnail variant prop values */ export function normalizeContentThumbnailVariant( value: string | undefined, defaultValue: "vertical" = "vertical" ): "vertical" | "horizontal" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const variants = ["vertical", "horizontal"]; if (variants.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize section header variant prop values */ export function normalizeSectionHeaderVariant( value: string | undefined, defaultValue: "default" = "default" ): "default" | "multi-line" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const variants = ["default", "multi-line"]; if (variants.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize quote block variant prop values */ export function normalizeQuoteBlockVariant( value: string | undefined, defaultValue: "standard" = "standard" ): "compact" | "standard" | "extended" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const variants = ["compact", "standard", "extended"]; if (variants.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize number card size prop values (already PascalCase in codebase, supports both) */ export function normalizeNumberCardSize( value: string | undefined, defaultValue: "Medium" = "Medium" ): "Small" | "Medium" | "Large" | "XLarge" { if (!value) return defaultValue; // Check if already PascalCase if (value === "Small" || value === "Medium" || value === "Large" || value === "XLarge") { return value; } // Normalize lowercase to PascalCase const normalized = value.toLowerCase(); if (normalized === "small") return "Small"; if (normalized === "medium") return "Medium"; if (normalized === "large") return "Large"; if (normalized === "xlarge") return "XLarge"; return defaultValue; } /** * Normalize ask organizer variant prop values */ export function normalizeAskOrganizerVariant( value: string | undefined, defaultValue: "centered" = "centered" ): "centered" | "left-aligned" | "compact" | "inverse" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const variants = ["centered", "left-aligned", "compact", "inverse"]; if (variants.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize context menu item size prop values */ export function normalizeContextMenuItemSize( value: string | undefined, defaultValue: "medium" = "medium" ): "small" | "medium" | "large" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const sizes = ["small", "medium", "large"]; if (sizes.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize image placeholder color prop values */ export function normalizeImagePlaceholderColor( value: string | undefined, defaultValue: "blue" = "blue" ): "blue" | "green" | "purple" | "red" | "orange" | "teal" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const colors = ["blue", "green", "purple", "red", "orange", "teal"]; if (colors.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize toggle group position prop values */ export function normalizeToggleGroupPosition( value: string | undefined, defaultValue: "left" = "left" ): "left" | "middle" | "right" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const positions = ["left", "middle", "right"]; if (positions.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize label variant prop values */ export function normalizeLabelVariant( value: string | undefined, defaultValue: "default" = "default" ): "default" | "horizontal" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const variants = ["default", "horizontal"]; if (variants.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; } /** * Normalize small/medium/large size prop values (for SelectInput, TextArea, etc.) */ export function normalizeSmallMediumLargeSize( value: string | undefined, defaultValue: "medium" = "medium" ): "small" | "medium" | "large" { if (!value) return defaultValue; const normalized = value.toLowerCase(); const sizes = ["small", "medium", "large"]; if (sizes.includes(normalized)) { return normalized as typeof defaultValue; } return defaultValue; }