@evolve.ui/core-components 1.0.0

package/FavoriteButton-DliYzkfu.cjs

@@ -0,0 +1,204 @@
+const require_Icons = require("./Icons.cjs");
+const require_buttonColorClasses = require("./buttonColorClasses-C3hg1at8.cjs");
+const require_Button = require("./Button.cjs");
+const require_Tooltip = require("./Tooltip.cjs");
+const require_SaveConfetti = require("./SaveConfetti-DSJtuE3b.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/FavoriteButton/hooks/useFavoriteButtonState.ts
+/**
+* Custom hook for managing the active state of the FavoriteButton
+* @returns Object containing the active state and event handlers
+*/
+const useFavoriteButtonState = () => {
+	const [isActive, setIsActive] = (0, react.useState)(false);
+	const handleMouseDown = () => {
+		setIsActive(true);
+	};
+	const handleMouseUp = () => {
+		setIsActive(false);
+	};
+	const handleMouseLeave = () => {
+		if (isActive) setIsActive(false);
+	};
+	return {
+		handleMouseDown,
+		handleMouseLeave,
+		handleMouseUp,
+		isActive
+	};
+};
+//#endregion
+//#region src/FavoriteButton/components/IconOnlyFavoriteButton/IconOnlyFavoriteButton.tsx
+/**
+* Icon-only variant of the FavoriteButton component
+* Displays only a heart icon in either a circle or square shape
+*/
+const IconOnlyFavoriteButton = (0, react.forwardRef)(({ "aria-label": ariaLabel = "Favorite Toggle", className, disabled, favorited, onClick, shape, type, ...restProps }, ref) => {
+	const { handleMouseDown, handleMouseLeave, handleMouseUp, isActive } = useFavoriteButtonState();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"aria-label": ariaLabel,
+		"aria-pressed": Boolean(favorited),
+		className: (0, _evolve_ui_theme_system.cn)("group flex h-[30px] w-[30px] cursor-pointer items-center justify-center border border-solid", {
+			"rounded-container": shape === "square",
+			"rounded-full": shape === "circle"
+		}, "bg-background-primary text-surface-500", { "bg-background-primary text-critical-500": favorited }, "focus-visible:hui-focus-visible-outline focus:outline-none focus-visible:outline-offset-1", "active:text-border-critical-400 active:bg-critical-50", "hover:bg-critical-50 hover:text-critical-400", "disabled:cursor-not-allowed disabled:bg-background-primary disabled:text-border-disabled", className),
+		"data-hui-id": "FavoriteButton",
+		disabled,
+		onClick,
+		onMouseDown: handleMouseDown,
+		onMouseLeave: handleMouseLeave,
+		onMouseUp: handleMouseUp,
+		ref,
+		type,
+		...restProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.HeartStraight, {
+			className: (0, _evolve_ui_theme_system.cn)("mt-[1px] bg-transparent text-current transition-transform duration-200 ease-in-out", { "group-hover:scale-[1.125]": !disabled }),
+			color: "inherit",
+			size: "sm",
+			style: favorited || isActive ? "fill" : "regular"
+		})
+	});
+});
+//#endregion
+//#region src/FavoriteButton/components/LabeledAnimatedFavoriteButton/LabeledAnimatedFavoriteButton.tsx
+const BUTTON_INLINE_STYLES = {
+	fontSize: "var(--font-size-button-200)",
+	fontWeight: "var(--font-weight-button)",
+	textTransform: "var(--text-transform-button)",
+	"--hui-save-color-critical-500": "var(--color-critical-500)",
+	"--hui-save-color-critical-300": "var(--color-critical-300)",
+	"--hui-save-color-critical-200": "var(--color-critical-200)",
+	"--hui-save-color-tertiary-400": "var(--color-tertiary-400)",
+	"--hui-save-color-tertiary-200": "var(--color-tertiary-200)"
+};
+const LabeledAnimatedFavoriteButton = (0, react.forwardRef)(({ "aria-label": ariaLabel = "Favorite Toggle", className, disabled, favorited, favoritedLabel = "Saved", isActivating, isWiggling, label = "Save", onClick, ...restProps }, ref) => {
+	const { handleMouseDown, handleMouseLeave, handleMouseUp, isActive } = useFavoriteButtonState();
+	const internalButtonRef = (0, react.useRef)(null);
+	const confettiRef = (0, react.useRef)(null);
+	(0, react.useImperativeHandle)(ref, () => internalButtonRef.current);
+	(0, react.useEffect)(() => {
+		if (!isActivating || !internalButtonRef.current) return;
+		confettiRef.current?.fire(internalButtonRef.current);
+	}, [isActivating]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		"aria-busy": false,
+		"aria-label": ariaLabel,
+		"aria-live": "polite",
+		"aria-pressed": favorited ?? false,
+		className: (0, _evolve_ui_theme_system.cn)("hui-focus-visible-outline relative flex max-w-full items-center justify-center whitespace-nowrap rounded-button text-center font-primary tracking-[var(--letter-spacing-button)] outline outline-1 -outline-offset-1 transition-colors disabled:text-text-disabled", favorited ? require_buttonColorClasses.outlinedCriticalClasses : require_buttonColorClasses.outlinedNeutralClasses, "gap-[4px] px-sm py-[13px] leading-[8px]", "h-[34px]", { "border-critical-500 text-critical-500": favorited }, "hover:border-critical-700 hover:bg-critical-50 hover:text-critical-700", "active:border-critical-900 active:bg-critical-100 active:text-critical-900", isWiggling && "animate-saveButtonWiggle motion-reduce:animate-none", isWiggling && !favorited && "hui-fb-color-flash", isActivating && "animate-saveButtonPulse motion-reduce:animate-none", className),
+		"data-hui-id": "FavoriteButton",
+		disabled,
+		onClick,
+		onMouseDown: handleMouseDown,
+		onMouseLeave: handleMouseLeave,
+		onMouseUp: handleMouseUp,
+		ref: internalButtonRef,
+		style: BUTTON_INLINE_STYLES,
+		...restProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: (0, _evolve_ui_theme_system.cn)("hui-fb-icon-frame relative flex items-center justify-center", isWiggling && !favorited && "text-critical-500", isWiggling && "animate-saveHeartTwirlBloom motion-reduce:animate-none"),
+			style: {
+				height: "14px",
+				perspective: "200px",
+				width: "14px"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.HeartStraight, {
+				className: (0, _evolve_ui_theme_system.cn)("[transform-style:preserve-3d]", isActivating && "animate-saveHeartPop motion-reduce:animate-none"),
+				color: "inherit",
+				size: "xs",
+				style: favorited || isActive || isWiggling ? "fill" : "bold"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: (0, _evolve_ui_theme_system.cn)("hui-fb-animated-label", isWiggling && "hui-fb-shimmer animate-saveLabelShimmer"),
+			children: favorited ? favoritedLabel : label
+		})]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SaveConfetti.SaveConfetti, { ref: confettiRef })] });
+});
+LabeledAnimatedFavoriteButton.displayName = "LabeledAnimatedFavoriteButton";
+//#endregion
+//#region src/FavoriteButton/components/SmallHeartStraightIcon/SmallHeartStraightIcon.tsx
+const SmallHeartStraightIcon = (0, react.forwardRef)((props, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.HeartStraight, {
+		style: "bold",
+		...props,
+		ref,
+		size: "xs"
+	});
+});
+//#endregion
+//#region src/FavoriteButton/components/LabeledFavoriteButton/LabeledFavoriteButton.tsx
+const LabeledFavoriteButton = (0, react.forwardRef)(({ "aria-label": ariaLabel = "Favorite Toggle", className, disabled, favorited, favoritedLabel = "Saved", label = "Save", onClick, ...restProps }, ref) => {
+	const { handleMouseDown, handleMouseLeave, handleMouseUp, isActive } = useFavoriteButtonState();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		"aria-label": ariaLabel,
+		"aria-pressed": favorited ? true : false,
+		className: (0, _evolve_ui_theme_system.cn)("h-[34px] text-surface-500", { "border-critical-500 text-critical-500": favorited }, "hover:border-critical-700 hover:bg-critical-50 hover:text-critical-700", "active:border-critical-900 active:bg-critical-100 active:text-critical-900", className),
+		"data-hui-id": "FavoriteButton",
+		disabled,
+		iconLeft: SmallHeartStraightIcon,
+		iconStyle: favorited || isActive ? "fill" : "bold",
+		onClick,
+		onMouseDown: handleMouseDown,
+		onMouseLeave: handleMouseLeave,
+		onMouseUp: handleMouseUp,
+		ref,
+		size: "sm",
+		style: favorited ? "critical" : "neutral",
+		variant: "outlined",
+		...restProps,
+		children: favorited ? favoritedLabel : label
+	});
+});
+//#endregion
+//#region src/FavoriteButton/FavoriteButton.tsx
+/**
+* A button that allows users to mark an item as a favorite.
+* The button displays a heart icon that changes appearance when favorited.
+*
+* Be aware that if you're using the tooltip option, make sure to use a unique id
+* and set the `anchorSelect` prop on the tooltip to the id of the button.
+*
+* Available in four variants:
+* - `circle`: Shows only the heart icon in a circular button (default)
+* - `square`: Shows only the heart icon in a square button
+* - `labeled`: Shows a button with text and the heart icon
+* - `labeled-animated`: Shows a labeled button with animation-ready wrappers
+*/
+const FavoriteButton = (0, react.forwardRef)((props, ref) => {
+	const { isActivating, isWiggling, tooltipProps, variant = "circle", ...restProps } = props;
+	const { enabled = false, ...tooltipRestProps } = tooltipProps ?? {};
+	const variantComponents = {
+		circle: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconOnlyFavoriteButton, {
+			ref,
+			shape: "circle",
+			...restProps
+		}),
+		labeled: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabeledFavoriteButton, {
+			ref,
+			...restProps
+		}),
+		"labeled-animated": /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabeledAnimatedFavoriteButton, {
+			ref,
+			isActivating,
+			isWiggling,
+			...restProps
+		}),
+		square: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconOnlyFavoriteButton, {
+			ref,
+			shape: "square",
+			...restProps
+		})
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [enabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, { ...tooltipRestProps }), variantComponents[variant]] });
+});
+//#endregion
+Object.defineProperty(exports, "FavoriteButton", {
+	enumerable: true,
+	get: function() {
+		return FavoriteButton;
+	}
+});
+
+//# sourceMappingURL=FavoriteButton-DliYzkfu.cjs.map

package/FavoriteButton-DliYzkfu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoriteButton-DliYzkfu.cjs","names":["HeartStraight","outlinedCriticalClasses","outlinedNeutralClasses","HeartStraight","SaveConfetti","HeartStraight","Button","Tooltip"],"sources":["../src/FavoriteButton/hooks/useFavoriteButtonState.ts","../src/FavoriteButton/components/IconOnlyFavoriteButton/IconOnlyFavoriteButton.tsx","../src/FavoriteButton/components/LabeledAnimatedFavoriteButton/LabeledAnimatedFavoriteButton.tsx","../src/FavoriteButton/components/SmallHeartStraightIcon/SmallHeartStraightIcon.tsx","../src/FavoriteButton/components/LabeledFavoriteButton/LabeledFavoriteButton.tsx","../src/FavoriteButton/FavoriteButton.tsx"],"sourcesContent":["import { useState } from 'react';\n\n/**\n * Custom hook for managing the active state of the FavoriteButton\n * @returns Object containing the active state and event handlers\n */\nexport const useFavoriteButtonState = () => {\n    const [isActive, setIsActive] = useState(false);\n\n    const handleMouseDown = () => {\n        setIsActive(true);\n    };\n\n    const handleMouseUp = () => {\n        setIsActive(false);\n    };\n\n    const handleMouseLeave = () => {\n        if (isActive) {\n            setIsActive(false);\n        }\n    };\n\n    return {\n        handleMouseDown,\n        handleMouseLeave,\n        handleMouseUp,\n        isActive,\n    };\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { forwardRef } from 'react';\n\nimport { HeartStraight } from '../../../Icons';\nimport { useFavoriteButtonState } from '../../hooks/useFavoriteButtonState';\nimport { IconOnlyFavoriteButtonProps } from '../../types/favoriteButton';\n\n/**\n * Icon-only variant of the FavoriteButton component\n * Displays only a heart icon in either a circle or square shape\n */\nexport const IconOnlyFavoriteButton = forwardRef<HTMLButtonElement, IconOnlyFavoriteButtonProps>(\n    (\n        {\n            'aria-label': ariaLabel = 'Favorite Toggle',\n            className,\n            disabled,\n            favorited,\n            onClick,\n            shape,\n            type,\n            ...restProps\n        },\n        ref\n    ) => {\n        const { handleMouseDown, handleMouseLeave, handleMouseUp, isActive } = useFavoriteButtonState();\n\n        return (\n            <button\n                aria-label={ariaLabel}\n                aria-pressed={Boolean(favorited)}\n                className={cn(\n                    // Base styles\n                    'group flex h-[30px] w-[30px] cursor-pointer items-center justify-center border border-solid',\n                    // Shape styles\n                    {\n                        'rounded-container': shape === 'square',\n                        'rounded-full': shape === 'circle',\n                    },\n                    // Default state\n                    'bg-background-primary text-surface-500',\n                    // Selected state\n                    {\n                        'bg-background-primary text-critical-500': favorited,\n                    },\n                    // Focus state\n                    'focus-visible:hui-focus-visible-outline focus:outline-none focus-visible:outline-offset-1',\n                    // Active state - immediately show critical color when clicked\n                    'active:text-border-critical-400 active:bg-critical-50',\n                    // Hover state\n                    'hover:bg-critical-50 hover:text-critical-400',\n                    // Disabled state\n                    'disabled:cursor-not-allowed disabled:bg-background-primary disabled:text-border-disabled',\n                    className\n                )}\n                data-hui-id=\"FavoriteButton\"\n                disabled={disabled}\n                onClick={onClick}\n                onMouseDown={handleMouseDown}\n                onMouseLeave={handleMouseLeave}\n                onMouseUp={handleMouseUp}\n                ref={ref}\n                type={type as 'button' | 'submit' | 'reset' | undefined}\n                {...restProps}\n            >\n                <HeartStraight\n                    className={cn(\n                        'mt-[1px] bg-transparent text-current transition-transform duration-200 ease-in-out',\n                        {\n                            'group-hover:scale-[1.125]': !disabled,\n                        }\n                    )}\n                    color=\"inherit\"\n                    size=\"sm\"\n                    style={favorited || isActive ? 'fill' : 'regular'}\n                />\n            </button>\n        );\n    }\n);\n","import { cn } from '@evolve.ui/theme-system';\nimport { ButtonHTMLAttributes, CSSProperties, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { outlinedCriticalClasses, outlinedNeutralClasses } from '../../../Button/buttonColorClasses';\nimport { HeartStraight } from '../../../Icons';\nimport { SaveConfetti, type SaveConfettiHandle } from '../../../SaveConfetti/SaveConfetti';\nimport { useFavoriteButtonState } from '../../hooks/useFavoriteButtonState';\n\n/**\n * Labeled-animated variant of the FavoriteButton component.\n *\n * Visually identical to the `labeled` variant but exposes `isWiggling` and\n * `isActivating` props that trigger the enhanced save-button nudge animations:\n *\n * - `isWiggling`: side-to-side wiggle (button), 3D twirl + bloom (heart icon),\n *   color flash (critical fill pulse on heart when not favorited), and shimmer (label text).\n *   During nudge the heart uses `fill` weight with critical color; at rest unfavorited uses `bold`.\n *   Apply for ~1300ms, then reset to false to re-arm.\n *\n * - `isActivating`: pulse (button) and heart pop (icon). Apply for ~500ms.\n *\n * Animation CSS is driven by Tailwind `animate-*` utilities from the theme plugin\n * (`theme.extend.animation`) — no runtime style injection. The shimmer uses the\n * `.hui-fb-shimmer` component class from the plugin for its multi-property CSS.\n * The heart-color flash uses `.hui-fb-color-flash` to animate fill on the nested\n * SVG path via a descendant selector. Icon weight: `bold` when unfavorited at rest,\n * `fill` during nudge, favorited, or active press — matching the static `labeled` variant at rest.\n */\n\ntype Props = {\n    /** Accessible label for screen readers. @default 'Favorite Toggle' */\n    'aria-label'?: string;\n    /** Whether the item is currently favorited. */\n    favorited?: boolean;\n    /** Label text shown when favorited. @default 'Saved' */\n    favoritedLabel?: string;\n    /**\n     * When true, fires the save-click animation (button pulse + heart pop) and\n     * a mini confetti burst from the button center.\n     * Reset to false after ~500ms to re-arm.\n     */\n    isActivating?: boolean;\n    /**\n     * When true, fires the nudge animation (wiggle + twirl + shimmer + color flash).\n     * Reset to false after ~1300ms to re-arm.\n     */\n    isWiggling?: boolean;\n    /** Label text shown when not favorited. @default 'Save' */\n    label?: string;\n} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'style'>;\n\ntype AnimationPaletteCSSVar =\n    | '--hui-save-color-critical-500'\n    | '--hui-save-color-critical-300'\n    | '--hui-save-color-critical-200'\n    | '--hui-save-color-tertiary-400'\n    | '--hui-save-color-tertiary-200';\n\nconst BUTTON_INLINE_STYLES: CSSProperties & Record<AnimationPaletteCSSVar, string> = {\n    fontSize: 'var(--font-size-button-200)',\n    fontWeight: 'var(--font-weight-button)',\n    textTransform: 'var(--text-transform-button)' as CSSProperties['textTransform'],\n    // Expose canonical animation palette tokens for downstream orchestration.\n    '--hui-save-color-critical-500': 'var(--color-critical-500)',\n    '--hui-save-color-critical-300': 'var(--color-critical-300)',\n    '--hui-save-color-critical-200': 'var(--color-critical-200)',\n    '--hui-save-color-tertiary-400': 'var(--color-tertiary-400)',\n    '--hui-save-color-tertiary-200': 'var(--color-tertiary-200)',\n};\n\nexport const LabeledAnimatedFavoriteButton = forwardRef<HTMLButtonElement, Props>(\n    (\n        {\n            'aria-label': ariaLabel = 'Favorite Toggle',\n            className,\n            disabled,\n            favorited,\n            favoritedLabel = 'Saved',\n            isActivating,\n            isWiggling,\n            label = 'Save',\n            onClick,\n            ...restProps\n        },\n        ref\n    ) => {\n        const { handleMouseDown, handleMouseLeave, handleMouseUp, isActive } = useFavoriteButtonState();\n\n        const internalButtonRef = useRef<HTMLButtonElement>(null);\n        const confettiRef = useRef<SaveConfettiHandle>(null);\n\n        // Preserve consumer-facing ref contract while keeping internal button access for confetti\n        useImperativeHandle(ref, () => internalButtonRef.current!);\n\n        // Fire confetti burst when the save-click animation triggers\n        useEffect(() => {\n            if (!isActivating || !internalButtonRef.current) {\n                return;\n            }\n            confettiRef.current?.fire(internalButtonRef.current);\n        }, [isActivating]);\n\n        return (\n            <>\n                <button\n                    aria-busy={false}\n                    aria-label={ariaLabel}\n                    aria-live=\"polite\"\n                    aria-pressed={favorited ?? false}\n                    className={cn(\n                        // Base — exact match to Button's base class string\n                        'hui-focus-visible-outline relative flex max-w-full items-center justify-center whitespace-nowrap rounded-button text-center font-primary tracking-[var(--letter-spacing-button)] outline outline-1 -outline-offset-1 transition-colors disabled:text-text-disabled',\n                        // Color classes — same conditional used by LabeledFavoriteButton\n                        favorited ? outlinedCriticalClasses : outlinedNeutralClasses,\n                        // sm size\n                        'gap-[4px] px-sm py-[13px] leading-[8px]',\n                        // Height override (matches LabeledFavoriteButton)\n                        'h-[34px]',\n                        // Favorited state border\n                        { 'border-critical-500 text-critical-500': favorited },\n                        // Hover/active overrides — same className passed by LabeledFavoriteButton to Button\n                        'hover:border-critical-700 hover:bg-critical-50 hover:text-critical-700',\n                        'active:border-critical-900 active:bg-critical-100 active:text-critical-900',\n                        // Nudge animation — wiggle on button root + color flash on nested SVG path\n                        isWiggling && 'animate-saveButtonWiggle motion-reduce:animate-none',\n                        isWiggling && !favorited && 'hui-fb-color-flash',\n                        // Save-click animation — pulse on button root\n                        isActivating && 'animate-saveButtonPulse motion-reduce:animate-none',\n                        className\n                    )}\n                    data-hui-id=\"FavoriteButton\"\n                    disabled={disabled}\n                    onClick={onClick}\n                    onMouseDown={handleMouseDown}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseUp={handleMouseUp}\n                    ref={internalButtonRef}\n                    style={BUTTON_INLINE_STYLES}\n                    {...restProps}\n                >\n                    {/*\n                     * Perspective wrapper — 3D twirl animation targets this element.\n                     * Width/height matches Button's internal iconLeft container (14px for xs icon).\n                     */}\n                    <span\n                        className={cn(\n                            'hui-fb-icon-frame relative flex items-center justify-center',\n                            // Critical color during nudge so fill weight reads red immediately (not surface-500 grey)\n                            isWiggling && !favorited && 'text-critical-500',\n                            // Nudge animation — 3D twirl + bloom on icon frame\n                            isWiggling && 'animate-saveHeartTwirlBloom motion-reduce:animate-none'\n                        )}\n                        style={{ height: '14px', perspective: '200px', width: '14px' }}\n                    >\n                        <HeartStraight\n                            className={cn(\n                                '[transform-style:preserve-3d]',\n                                // Save-click animation — heart pop on SVG element\n                                isActivating && 'animate-saveHeartPop motion-reduce:animate-none'\n                            )}\n                            color=\"inherit\"\n                            size=\"xs\"\n                            style={favorited || isActive || isWiggling ? 'fill' : 'bold'}\n                        />\n                    </span>\n                    {/* Shimmer wrapper — .hui-fb-shimmer bundles background-clip + gradient + animation */}\n                    <span\n                        className={cn('hui-fb-animated-label', isWiggling && 'hui-fb-shimmer animate-saveLabelShimmer')}\n                    >\n                        {favorited ? favoritedLabel : label}\n                    </span>\n                </button>\n                <SaveConfetti ref={confettiRef} />\n            </>\n        );\n    }\n);\n\nLabeledAnimatedFavoriteButton.displayName = 'LabeledAnimatedFavoriteButton';\n","import { ComponentProps, forwardRef } from 'react';\n\nimport { CaretRight, HeartStraight } from '../../../Icons';\n\nexport const SmallHeartStraightIcon = forwardRef<SVGSVGElement, ComponentProps<typeof CaretRight>>((props, ref) => {\n    return (\n        <HeartStraight\n            style=\"bold\"\n            {...props}\n            ref={ref}\n            size=\"xs\"\n        />\n    );\n});\n","import { cn } from '@evolve.ui/theme-system';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Button } from '../../../Button/Button';\nimport { useFavoriteButtonState } from '../../hooks/useFavoriteButtonState';\nimport { SmallHeartStraightIcon } from '../SmallHeartStraightIcon/SmallHeartStraightIcon';\n\n/**\n * Labeled variant of the FavoriteButton component\n * Displays a button with text and a heart icon\n */\n\ntype Props = {\n    'aria-label'?: string;\n    favorited?: boolean;\n    favoritedLabel?: string;\n    label?: string;\n} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'children'>;\n\nexport const LabeledFavoriteButton = forwardRef<HTMLButtonElement, Props>(\n    (\n        {\n            'aria-label': ariaLabel = 'Favorite Toggle',\n            className,\n            disabled,\n            favorited,\n            favoritedLabel = 'Saved',\n            label = 'Save',\n            onClick,\n            ...restProps\n        },\n        ref\n    ) => {\n        const { handleMouseDown, handleMouseLeave, handleMouseUp, isActive } = useFavoriteButtonState();\n\n        return (\n            <Button\n                aria-label={ariaLabel}\n                aria-pressed={favorited ? true : false}\n                className={cn(\n                    // Base styles\n                    'h-[34px] text-surface-500',\n                    // Selected state\n                    {\n                        'border-critical-500 text-critical-500': favorited,\n                    },\n                    // Hover state - same for both favorited and non-favorited\n                    'hover:border-critical-700 hover:bg-critical-50 hover:text-critical-700',\n                    // Active states - different for favorited and non-favorited\n                    'active:border-critical-900 active:bg-critical-100 active:text-critical-900',\n                    className\n                )}\n                data-hui-id=\"FavoriteButton\"\n                disabled={disabled}\n                iconLeft={SmallHeartStraightIcon}\n                iconStyle={favorited || isActive ? 'fill' : 'bold'}\n                onClick={onClick}\n                onMouseDown={handleMouseDown}\n                onMouseLeave={handleMouseLeave}\n                onMouseUp={handleMouseUp}\n                ref={ref}\n                size=\"sm\"\n                style={favorited ? 'critical' : 'neutral'}\n                variant=\"outlined\"\n                {...restProps}\n            >\n                {favorited ? favoritedLabel : label}\n            </Button>\n        );\n    }\n);\n","import { forwardRef } from 'react';\n\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { IconOnlyFavoriteButton } from './components/IconOnlyFavoriteButton/IconOnlyFavoriteButton';\nimport { LabeledAnimatedFavoriteButton } from './components/LabeledAnimatedFavoriteButton/LabeledAnimatedFavoriteButton';\nimport { LabeledFavoriteButton } from './components/LabeledFavoriteButton/LabeledFavoriteButton';\nimport { FavoriteButtonProps } from './types/favoriteButton';\n\n/**\n * A button that allows users to mark an item as a favorite.\n * The button displays a heart icon that changes appearance when favorited.\n *\n * Be aware that if you're using the tooltip option, make sure to use a unique id\n * and set the `anchorSelect` prop on the tooltip to the id of the button.\n *\n * Available in four variants:\n * - `circle`: Shows only the heart icon in a circular button (default)\n * - `square`: Shows only the heart icon in a square button\n * - `labeled`: Shows a button with text and the heart icon\n * - `labeled-animated`: Shows a labeled button with animation-ready wrappers\n */\nexport const FavoriteButton = forwardRef<HTMLButtonElement, FavoriteButtonProps>((props, ref) => {\n    const { isActivating, isWiggling, tooltipProps, variant = 'circle', ...restProps } = props;\n    const { enabled = false, ...tooltipRestProps } = tooltipProps ?? {};\n\n    // Use a mapping object to determine which component to render\n    const variantComponents = {\n        circle: (\n            <IconOnlyFavoriteButton\n                ref={ref}\n                shape=\"circle\"\n                {...restProps}\n            />\n        ),\n        labeled: (\n            <LabeledFavoriteButton\n                ref={ref}\n                {...restProps}\n            />\n        ),\n        'labeled-animated': (\n            <LabeledAnimatedFavoriteButton\n                ref={ref}\n                isActivating={isActivating}\n                isWiggling={isWiggling}\n                {...restProps}\n            />\n        ),\n        square: (\n            <IconOnlyFavoriteButton\n                ref={ref}\n                shape=\"square\"\n                {...restProps}\n            />\n        ),\n    };\n\n    return (\n        <>\n            {enabled && <Tooltip {...tooltipRestProps} />}\n            {variantComponents[variant]}\n        </>\n    );\n});\n"],"mappings":"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"}

package/FeatureFlagDevToolsUI-B13AuQ2A.mjs

@@ -0,0 +1,276 @@
+import { BodyPrimary, H2 } from "./Typography/Text.mjs";
+import { Button } from "./Button.mjs";
+import { t as Callout } from "./Callout-Olv0CM82.mjs";
+import { ToggleSwitch } from "./toggleSwitch.mjs";
+import { t as useFeatureFlags } from "./useFeatureFlags-Dmf_37f8.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/FeatureFlags/devTools/utils/cookies.ts
+/**
+* Parses document.cookie string into a key-value object
+* Returns empty object during SSR when document is not available
+*
+* @returns Object mapping cookie names to their decoded values
+*/
+const parseCookies = () => {
+	if (typeof document === "undefined" || !document.cookie) return {};
+	return document.cookie.split("; ").reduce((acc, cookie) => {
+		const equalIndex = cookie.indexOf("=");
+		if (equalIndex === -1) return acc;
+		const name = cookie.substring(0, equalIndex);
+		const value = cookie.substring(equalIndex + 1);
+		try {
+			acc[decodeURIComponent(name.trim())] = decodeURIComponent(value.trim());
+		} catch {}
+		return acc;
+	}, {});
+};
+/**
+* Gets a specific cookie value by name
+*/
+const getCookie = (name) => {
+	return parseCookies()[name];
+};
+/**
+* Sets a cookie with the specified options
+* Does nothing during SSR when document is not available
+*/
+const setCookie = (name, value, options) => {
+	if (typeof document === "undefined") return;
+	let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(String(value))}`;
+	if (options.expires) cookie += `; expires=${options.expires.toUTCString()}`;
+	if (options.path) cookie += `; path=${options.path}`;
+	if (options.sameSite) cookie += `; samesite=${options.sameSite}`;
+	if (options.secure) cookie += "; secure";
+	document.cookie = cookie;
+};
+/**
+* Removes a cookie by setting its expiry to the past
+*/
+const removeCookie = (name, options) => {
+	setCookie(name, "", {
+		...options,
+		expires: /* @__PURE__ */ new Date(0)
+	});
+};
+/**
+* Reads cookies to find feature flag overrides
+*
+* Looks for cookies that match feature flag key names and returns
+* a FeatureFlags object with the overridden values
+*
+* @param flagKeys - Array of flag keys to check for cookie overrides
+* @example
+* // If a cookie named "ff_team-1234_home-page-is-green" exists with value "true"
+* const overrides = getFeatureFlagOverrides(['ff_team-1234_home-page-is-green']);
+* // Returns: { 'ff_team-1234_home-page-is-green': true }
+*/
+const getFeatureFlagOverrides = (flagKeys) => {
+	const overrides = {};
+	flagKeys.forEach((flagKey) => {
+		const cookieValue = getCookie(flagKey);
+		if (cookieValue !== void 0 && cookieValue !== "") overrides[flagKey] = cookieValue === "true" || cookieValue === "1";
+	});
+	return overrides;
+};
+/**
+* Sets a feature flag override cookie
+*
+* @param featureFlagKey - The feature flag key to override
+* @param value - The boolean value to set
+*
+* Note: Cookies are set without a domain attribute to make them specific
+* to the current hostname
+*/
+const setFeatureFlagOverride = (featureFlagKey, value) => {
+	const expires = /* @__PURE__ */ new Date();
+	expires.setDate(expires.getDate() + 30);
+	setCookie(featureFlagKey, value, {
+		expires,
+		path: "/",
+		sameSite: "lax",
+		secure: true
+	});
+};
+/**
+* Removes a feature flag override cookie
+*
+* @param featureFlagKey - The feature flag key to remove
+*
+* Note: Cookies are removed without a domain attribute since they're
+* specific to the current hostname
+*/
+const removeFeatureFlagOverride = (featureFlagKey) => {
+	removeCookie(featureFlagKey, { path: "/" });
+};
+/**
+* Determines the source of a feature flag's value
+*
+* @param hasOverride - Whether the flag has a local cookie override
+* @param currentValue - The current value from the remote feature-flag service (undefined means not set)
+* @returns A human-readable string indicating the value source
+*/
+const getFeatureFlagValueSource = (hasOverride, currentValue) => {
+	if (hasOverride) return "Cookie Override";
+	return currentValue !== void 0 ? "Remote" : "Default (false)";
+};
+//#endregion
+//#region src/FeatureFlags/devTools/FeatureFlagDevToolsUI.tsx
+/**
+* DevTool component for managing feature flag overrides via cookies
+*
+* This component displays all feature flags from the HammerUI provider and allows
+* developers to locally override flag values using browser cookies for testing purposes.
+*
+* Features:
+* - Displays all feature flags from your feature-flag service with their current values
+* - Toggle switches to enable/disable flags locally via cookie overrides
+* - Shows the source of each flag value (Remote, Cookie Override, or Default)
+* - Remove button to clear cookie overrides and revert to remote values
+* - Warning callout when changes require a page reload
+* - Optional link to manage flags in your feature-flag service
+*
+* @example
+* ```tsx
+* <FeatureFlagDevToolsUI />
+* ```
+*
+* @example
+* ```tsx
+* <FeatureFlagDevToolsUI className="max-w-full" manageFlagsUrl="https://flags.example.com" />
+* ```
+*/
+const FeatureFlagDevToolsUI = ({ className, manageFlagsUrl } = {}) => {
+	const featureFlagsObject = useFeatureFlags();
+	const featureFlags = Object.entries(featureFlagsObject);
+	const [, setOverrideVersion] = useState(0);
+	const overrides = getFeatureFlagOverrides(featureFlags.map(([key]) => key));
+	const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+	/**
+	* Forces component to re-render by incrementing version state
+	* Used after setting/removing cookie overrides to reflect changes in UI
+	*/
+	const forceRefresh = useCallback(() => {
+		setOverrideVersion((v) => v + 1);
+	}, []);
+	/**
+	* Handles toggle switch changes - sets a cookie override for the flag
+	* Note: Page reload is required for the override to take effect in the app
+	*/
+	const handleToggleChange = useCallback((key, toggled) => {
+		setFeatureFlagOverride(key, toggled);
+		setHasUnsavedChanges(true);
+		forceRefresh();
+	}, [forceRefresh]);
+	/**
+	* Removes a cookie override, reverting the flag to its remote value
+	* Note: Page reload is required for the change to take effect in the app
+	*/
+	const handleRemoveOverride = useCallback((key) => {
+		removeFeatureFlagOverride(key);
+		setHasUnsavedChanges(true);
+		forceRefresh();
+	}, [forceRefresh]);
+	/**
+	* Gets the effective toggle value - prioritizes cookie override over the remote value
+	* Falls back to false if no value is set
+	*/
+	const getToggleValue = useCallback((key, currentValue) => {
+		if (key in overrides) return overrides[key];
+		return currentValue ?? false;
+	}, [overrides]);
+	/**
+	* Checks if a flag has a local cookie override
+	*/
+	const hasOverride = useCallback((key) => {
+		return key in overrides;
+	}, [overrides]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("mb-2xl flex w-3/4 flex-col gap-sm mdMax:w-full", className),
+		children: [
+			/* @__PURE__ */ jsx(H2, { children: "Feature Flags" }),
+			/* @__PURE__ */ jsx(Callout, {
+				message: "Feature flags are pulled from your feature-flag service. You can override them locally using cookie overrides for testing. Note: You'll need to refresh the page after toggling an override for the change to take effect.",
+				primaryButton: manageFlagsUrl ? {
+					onClick: () => window.open(manageFlagsUrl, "_blank"),
+					text: "Manage Feature Flags"
+				} : void 0,
+				status: "info",
+				title: "Feature Flag Overrides"
+			}),
+			hasUnsavedChanges && /* @__PURE__ */ jsx(Callout, {
+				message: "Feature flag overrides have been updated. Reload the page to apply the changes.",
+				primaryButton: {
+					onClick: () => window.location.reload(),
+					text: "Reload Page"
+				},
+				status: "warning",
+				title: "Reload Required"
+			}),
+			featureFlags.length === 0 ? /* @__PURE__ */ jsx(BodyPrimary, { children: "No feature flags available" }) : /* @__PURE__ */ jsxs("table", {
+				className: "w-full border-collapse border border-border-secondary",
+				children: [
+					/* @__PURE__ */ jsxs("colgroup", { children: [
+						/* @__PURE__ */ jsx("col", {}),
+						/* @__PURE__ */ jsx("col", { className: "w-64" }),
+						/* @__PURE__ */ jsx("col", { className: "w-56" })
+					] }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							className: "border border-border-secondary p-2 text-left",
+							children: "Feature Flag"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "border border-border-secondary p-2 text-left",
+							children: "Current Value"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "border border-border-secondary p-2 text-left",
+							children: "Source"
+						})
+					] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: featureFlags.map(([key, currentValue]) => {
+						const isOverridden = hasOverride(key);
+						const cellClassName = "border border-border-secondary p-2";
+						return /* @__PURE__ */ jsxs("tr", {
+							className: "odd:bg-background-secondary",
+							children: [
+								/* @__PURE__ */ jsx("td", {
+									className: cellClassName,
+									children: /* @__PURE__ */ jsx(BodyPrimary, { children: key })
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: cellClassName,
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-xs",
+										children: [/* @__PURE__ */ jsx(ToggleSwitch, {
+											"aria-label": `Toggle ${key}`,
+											id: `toggle-${key}`,
+											isToggled: getToggleValue(key, currentValue),
+											onToggleChange: (toggled) => handleToggleChange(key, toggled ?? false)
+										}), isOverridden && /* @__PURE__ */ jsx(Button, {
+											onClick: () => handleRemoveOverride(key),
+											size: "sm",
+											style: "critical",
+											variant: "outlined",
+											children: "Remove"
+										})]
+									})
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: cellClassName,
+									children: /* @__PURE__ */ jsx(BodyPrimary, { children: getFeatureFlagValueSource(isOverridden, currentValue) })
+								})
+							]
+						}, key);
+					}) })
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { FeatureFlagDevToolsUI as t };
+
+//# sourceMappingURL=FeatureFlagDevToolsUI-B13AuQ2A.mjs.map

package/FeatureFlagDevToolsUI-B13AuQ2A.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureFlagDevToolsUI-B13AuQ2A.mjs","names":[],"sources":["../src/FeatureFlags/devTools/utils/cookies.ts","../src/FeatureFlags/devTools/FeatureFlagDevToolsUI.tsx"],"sourcesContent":["/**\n * Parses document.cookie string into a key-value object\n * Returns empty object during SSR when document is not available\n *\n * @returns Object mapping cookie names to their decoded values\n */\nconst parseCookies = (): Record<string, string> => {\n    // Check if we're in the browser environment\n    if (typeof document === 'undefined' || !document.cookie) {\n        return {};\n    }\n\n    return document.cookie.split('; ').reduce(\n        (acc, cookie) => {\n            const equalIndex = cookie.indexOf('=');\n            if (equalIndex === -1) {\n                return acc;\n            }\n\n            const name = cookie.substring(0, equalIndex);\n            const value = cookie.substring(equalIndex + 1);\n\n            try {\n                acc[decodeURIComponent(name.trim())] = decodeURIComponent(value.trim());\n            } catch {\n                // Skip malformed cookies that can't be decoded\n            }\n\n            return acc;\n        },\n        {} as Record<string, string>\n    );\n};\n\n/**\n * Gets a specific cookie value by name\n */\nconst getCookie = (name: string): string | undefined => {\n    const cookies = parseCookies();\n    return cookies[name];\n};\n\n/**\n * Sets a cookie with the specified options\n * Does nothing during SSR when document is not available\n */\nconst setCookie = (\n    name: string,\n    value: string | boolean,\n    options: {\n        expires?: Date;\n        path?: string;\n        sameSite?: 'strict' | 'lax' | 'none';\n        secure?: boolean;\n    }\n) => {\n    // Check if we're in the browser environment\n    if (typeof document === 'undefined') {\n        return;\n    }\n\n    let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(String(value))}`;\n\n    if (options.expires) {\n        cookie += `; expires=${options.expires.toUTCString()}`;\n    }\n\n    if (options.path) {\n        cookie += `; path=${options.path}`;\n    }\n\n    if (options.sameSite) {\n        cookie += `; samesite=${options.sameSite}`;\n    }\n\n    if (options.secure) {\n        cookie += '; secure';\n    }\n\n    document.cookie = cookie;\n};\n\n/**\n * Removes a cookie by setting its expiry to the past\n */\nconst removeCookie = (name: string, options: { path?: string }) => {\n    setCookie(name, '', {\n        ...options,\n        expires: new Date(0),\n    });\n};\n\n/**\n * Reads cookies to find feature flag overrides\n *\n * Looks for cookies that match feature flag key names and returns\n * a FeatureFlags object with the overridden values\n *\n * @param flagKeys - Array of flag keys to check for cookie overrides\n * @example\n * // If a cookie named \"ff_team-1234_home-page-is-green\" exists with value \"true\"\n * const overrides = getFeatureFlagOverrides(['ff_team-1234_home-page-is-green']);\n * // Returns: { 'ff_team-1234_home-page-is-green': true }\n */\nexport const getFeatureFlagOverrides = (flagKeys: string[]) => {\n    const overrides: Record<string, boolean> = {};\n\n    flagKeys.forEach((flagKey) => {\n        const cookieValue = getCookie(flagKey);\n\n        // Only include if cookie exists and has a non-empty value\n        if (cookieValue !== undefined && cookieValue !== '') {\n            // Convert cookie value to boolean\n            // Handles: 'true', 'false', true, false, 1, 0, '1', '0'\n            overrides[flagKey] = cookieValue === 'true' || cookieValue === '1';\n        }\n    });\n\n    return overrides;\n};\n\n/**\n * Sets a feature flag override cookie\n *\n * @param featureFlagKey - The feature flag key to override\n * @param value - The boolean value to set\n *\n * Note: Cookies are set without a domain attribute to make them specific\n * to the current hostname\n */\nexport const setFeatureFlagOverride = (featureFlagKey: string, value: boolean) => {\n    const expires = new Date();\n    expires.setDate(expires.getDate() + 30); // 30 days expiration\n\n    setCookie(featureFlagKey, value, {\n        expires,\n        path: '/',\n        sameSite: 'lax',\n        secure: true,\n    });\n};\n\n/**\n * Removes a feature flag override cookie\n *\n * @param featureFlagKey - The feature flag key to remove\n *\n * Note: Cookies are removed without a domain attribute since they're\n * specific to the current hostname\n */\nexport const removeFeatureFlagOverride = (featureFlagKey: string) => {\n    removeCookie(featureFlagKey, {\n        path: '/',\n    });\n};\n\n/**\n * Determines the source of a feature flag's value\n *\n * @param hasOverride - Whether the flag has a local cookie override\n * @param currentValue - The current value from the remote feature-flag service (undefined means not set)\n * @returns A human-readable string indicating the value source\n */\nexport const getFeatureFlagValueSource = (hasOverride: boolean, currentValue: boolean | undefined): string => {\n    if (hasOverride) {\n        return 'Cookie Override';\n    }\n    return currentValue !== undefined ? 'Remote' : 'Default (false)';\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useCallback, useState } from 'react';\n\nimport { Button } from '../../Button/Button';\nimport { Callout } from '../../Callout/Callout';\nimport { ToggleSwitch } from '../../ToggleSwitch/ToggleSwitch';\nimport { BodyPrimary, H2 } from '../../Typography/Text/Text';\nimport { useFeatureFlags } from '../hooks/useFeatureFlags';\nimport {\n    getFeatureFlagOverrides,\n    getFeatureFlagValueSource,\n    removeFeatureFlagOverride,\n    setFeatureFlagOverride,\n} from './utils/cookies';\n\n/**\n * Props for FeatureFlagDevToolsUI component\n */\ntype Props = {\n    /** Additional CSS classes to apply to the component */\n    className?: string;\n    /** URL of your feature-flag service's management console. When provided, a \"Manage Feature Flags\" button is rendered. */\n    manageFlagsUrl?: string;\n};\n\n/**\n * DevTool component for managing feature flag overrides via cookies\n *\n * This component displays all feature flags from the HammerUI provider and allows\n * developers to locally override flag values using browser cookies for testing purposes.\n *\n * Features:\n * - Displays all feature flags from your feature-flag service with their current values\n * - Toggle switches to enable/disable flags locally via cookie overrides\n * - Shows the source of each flag value (Remote, Cookie Override, or Default)\n * - Remove button to clear cookie overrides and revert to remote values\n * - Warning callout when changes require a page reload\n * - Optional link to manage flags in your feature-flag service\n *\n * @example\n * ```tsx\n * <FeatureFlagDevToolsUI />\n * ```\n *\n * @example\n * ```tsx\n * <FeatureFlagDevToolsUI className=\"max-w-full\" manageFlagsUrl=\"https://flags.example.com\" />\n * ```\n */\nexport const FeatureFlagDevToolsUI = ({ className, manageFlagsUrl }: Props = {}) => {\n    // Get all feature flags from the HammerUI provider context\n    const featureFlagsObject = useFeatureFlags();\n    const featureFlags = Object.entries(featureFlagsObject) as Array<[string, boolean | undefined]>;\n\n    // State for forcing component re-render when overrides change\n    const [, setOverrideVersion] = useState(0);\n    const flagKeys = featureFlags.map(([key]) => key);\n\n    // Get current cookie overrides for all flags\n    const overrides = getFeatureFlagOverrides(flagKeys);\n\n    // Track if there are unsaved changes that require a page reload\n    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n\n    /**\n     * Forces component to re-render by incrementing version state\n     * Used after setting/removing cookie overrides to reflect changes in UI\n     */\n    const forceRefresh = useCallback(() => {\n        setOverrideVersion((v) => v + 1);\n    }, []);\n\n    /**\n     * Handles toggle switch changes - sets a cookie override for the flag\n     * Note: Page reload is required for the override to take effect in the app\n     */\n    const handleToggleChange = useCallback(\n        (key: string, toggled: boolean) => {\n            setFeatureFlagOverride(key, toggled);\n            setHasUnsavedChanges(true);\n            forceRefresh();\n        },\n        [forceRefresh]\n    );\n\n    /**\n     * Removes a cookie override, reverting the flag to its remote value\n     * Note: Page reload is required for the change to take effect in the app\n     */\n    const handleRemoveOverride = useCallback(\n        (key: string) => {\n            removeFeatureFlagOverride(key);\n            setHasUnsavedChanges(true);\n            forceRefresh();\n        },\n        [forceRefresh]\n    );\n\n    /**\n     * Gets the effective toggle value - prioritizes cookie override over the remote value\n     * Falls back to false if no value is set\n     */\n    const getToggleValue = useCallback(\n        (key: string, currentValue: boolean | undefined): boolean => {\n            if (key in overrides) {\n                return overrides[key];\n            }\n            return currentValue ?? false;\n        },\n        [overrides]\n    );\n\n    /**\n     * Checks if a flag has a local cookie override\n     */\n    const hasOverride = useCallback(\n        (key: string): boolean => {\n            return key in overrides;\n        },\n        [overrides]\n    );\n\n    return (\n        <div className={cn('mb-2xl flex w-3/4 flex-col gap-sm mdMax:w-full', className)}>\n            <H2>Feature Flags</H2>\n\n            {/* Info callout explaining the feature flag override system */}\n            <Callout\n                message=\"Feature flags are pulled from your feature-flag service. You can override them locally using cookie overrides for testing. Note: You'll need to refresh the page after toggling an override for the change to take effect.\"\n                primaryButton={\n                    manageFlagsUrl\n                        ? {\n                              onClick: () => window.open(manageFlagsUrl, '_blank'),\n                              text: 'Manage Feature Flags',\n                          }\n                        : undefined\n                }\n                status=\"info\"\n                title=\"Feature Flag Overrides\"\n            />\n\n            {/* Warning callout shown when changes have been made but page hasn't been reloaded */}\n            {hasUnsavedChanges && (\n                <Callout\n                    message=\"Feature flag overrides have been updated. Reload the page to apply the changes.\"\n                    primaryButton={{\n                        onClick: () => window.location.reload(),\n                        text: 'Reload Page',\n                    }}\n                    status=\"warning\"\n                    title=\"Reload Required\"\n                />\n            )}\n\n            {/* Empty state - no feature flags available */}\n            {featureFlags.length === 0 ? (\n                <BodyPrimary>No feature flags available</BodyPrimary>\n            ) : (\n                // Table showing all feature flags with their values and controls\n                <table className=\"w-full border-collapse border border-border-secondary\">\n                    <colgroup>\n                        <col />\n                        <col className=\"w-64\" />\n                        <col className=\"w-56\" />\n                    </colgroup>\n                    <thead>\n                        <tr>\n                            <th className=\"border border-border-secondary p-2 text-left\">Feature Flag</th>\n                            <th className=\"border border-border-secondary p-2 text-left\">Current Value</th>\n                            <th className=\"border border-border-secondary p-2 text-left\">Source</th>\n                        </tr>\n                    </thead>\n                    <tbody>\n                        {featureFlags.map(([key, currentValue]) => {\n                            const isOverridden = hasOverride(key);\n                            const cellClassName = 'border border-border-secondary p-2';\n\n                            return (\n                                <tr\n                                    className=\"odd:bg-background-secondary\"\n                                    key={key}\n                                >\n                                    {/* Flag name column */}\n                                    <td className={cellClassName}>\n                                        <BodyPrimary>{key}</BodyPrimary>\n                                    </td>\n\n                                    {/* Toggle switch and remove button column */}\n                                    <td className={cellClassName}>\n                                        <div className=\"flex items-center gap-xs\">\n                                            {/* Toggle to set cookie override */}\n                                            <ToggleSwitch\n                                                aria-label={`Toggle ${key}`}\n                                                id={`toggle-${key}`}\n                                                isToggled={getToggleValue(key, currentValue)}\n                                                onToggleChange={(toggled) => handleToggleChange(key, toggled ?? false)}\n                                            />\n                                            {/* Remove button only shows when a cookie override exists */}\n                                            {isOverridden && (\n                                                <Button\n                                                    onClick={() => handleRemoveOverride(key)}\n                                                    size=\"sm\"\n                                                    style=\"critical\"\n                                                    variant=\"outlined\"\n                                                >\n                                                    Remove\n                                                </Button>\n                                            )}\n                                        </div>\n                                    </td>\n\n                                    {/* Source column - shows where the value comes from */}\n                                    <td className={cellClassName}>\n                                        <BodyPrimary>\n                                            {getFeatureFlagValueSource(isOverridden, currentValue)}\n                                        </BodyPrimary>\n                                    </td>\n                                </tr>\n                            );\n                        })}\n                    </tbody>\n                </table>\n            )}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/FeatureFlagDevToolsUI-CutvngLI.d.cts

@@ -0,0 +1,39 @@
+//#region src/FeatureFlags/devTools/FeatureFlagDevToolsUI.d.ts
+/**
+ * Props for FeatureFlagDevToolsUI component
+ */
+type Props = {
+  /** Additional CSS classes to apply to the component */className?: string; /** URL of your feature-flag service's management console. When provided, a "Manage Feature Flags" button is rendered. */
+  manageFlagsUrl?: string;
+};
+/**
+ * DevTool component for managing feature flag overrides via cookies
+ *
+ * This component displays all feature flags from the HammerUI provider and allows
+ * developers to locally override flag values using browser cookies for testing purposes.
+ *
+ * Features:
+ * - Displays all feature flags from your feature-flag service with their current values
+ * - Toggle switches to enable/disable flags locally via cookie overrides
+ * - Shows the source of each flag value (Remote, Cookie Override, or Default)
+ * - Remove button to clear cookie overrides and revert to remote values
+ * - Warning callout when changes require a page reload
+ * - Optional link to manage flags in your feature-flag service
+ *
+ * @example
+ * ```tsx
+ * <FeatureFlagDevToolsUI />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <FeatureFlagDevToolsUI className="max-w-full" manageFlagsUrl="https://flags.example.com" />
+ * ```
+ */
+declare const FeatureFlagDevToolsUI: ({
+  className,
+  manageFlagsUrl
+}?: Props) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { FeatureFlagDevToolsUI as t };
+//# sourceMappingURL=FeatureFlagDevToolsUI-CutvngLI.d.cts.map

package/FeatureFlagDevToolsUI-CutvngLI.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureFlagDevToolsUI-CutvngLI.d.cts","names":[],"sources":["../src/FeatureFlags/devTools/FeatureFlagDevToolsUI.tsx"],"mappings":";;;;KAkBK,KAAA;EAED,uDAAA,SAAA,WA6BS;EA3BT,cAAc;AAAA;;;;;;;;;;;;;;AA2MjB;;;;;;;;;;;cAhLY,qBAAA;EAAyB,SAAA;EAAA;AAAA,IAA+B,KAAA,iCAAU,GAAA,CAAA,OAAA"}