@jonmatum/react-cookie-devtool/dist/index.cjs

[](https://www.npmjs.com/package/@jonmatum/react-cookie-devtool) [](LICENSE) ![React](https://img.shields

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  CookieDevTool: () => CookieDevTool,
  CookieDevToolSheet: () => CookieDevToolSheet
});
module.exports = __toCommonJS(index_exports);

// src/components/ui/button.tsx
var React = __toESM(require("react"), 1);
var import_react_slot = require("@radix-ui/react-slot");
var import_class_variance_authority = require("class-variance-authority");

// src/lib/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}

// src/components/ui/button.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var buttonVariants = (0, import_class_variance_authority.cva)(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline"
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9"
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default"
    }
  }
);
var Button = React.forwardRef(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? import_react_slot.Slot : "button";
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      Comp,
      {
        className: cn(buttonVariants({ variant, size, className })),
        ref,
        ...props
      }
    );
  }
);
Button.displayName = "Button";

// src/components/ui/input.tsx
var React2 = __toESM(require("react"), 1);
var import_jsx_runtime2 = require("react/jsx-runtime");
var Input = React2.forwardRef(
  ({ className, type, ...props }, ref) => {
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      "input",
      {
        type,
        className: cn(
          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        ),
        ref,
        ...props
      }
    );
  }
);
Input.displayName = "Input";

// src/components/ui/label.tsx
var React3 = __toESM(require("react"), 1);
var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
var import_class_variance_authority2 = require("class-variance-authority");
var import_jsx_runtime3 = require("react/jsx-runtime");
var labelVariants = (0, import_class_variance_authority2.cva)(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
);
var Label = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
  LabelPrimitive.Root,
  {
    ref,
    className: cn(labelVariants(), className),
    ...props
  }
));
Label.displayName = LabelPrimitive.Root.displayName;

// src/components/ui/select.tsx
var React4 = __toESM(require("react"), 1);
var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
var import_lucide_react = require("lucide-react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var Select = SelectPrimitive.Root;
var SelectValue = SelectPrimitive.Value;
var SelectTrigger = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
  SelectPrimitive.Trigger,
  {
    ref,
    className: cn(
      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    ),
    ...props,
    children: [
      children,
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
    ]
  }
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
var SelectScrollUpButton = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
  SelectPrimitive.ScrollUpButton,
  {
    ref,
    className: cn(
      "flex cursor-default items-center justify-center py-1",
      className
    ),
    ...props,
    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.ChevronUp, { className: "h-4 w-4" })
  }
));
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
var SelectScrollDownButton = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
  SelectPrimitive.ScrollDownButton,
  {
    ref,
    className: cn(
      "flex cursor-default items-center justify-center py-1",
      className
    ),
    ...props,
    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.ChevronDown, { className: "h-4 w-4" })
  }
));
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
var SelectContent = React4.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
  SelectPrimitive.Content,
  {
    ref,
    className: cn(
      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
      className
    ),
    position,
    ...props,
    children: [
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectScrollUpButton, {}),
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
        SelectPrimitive.Viewport,
        {
          className: cn(
            "p-1",
            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
          ),
          children
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectScrollDownButton, {})
    ]
  }
) }));
SelectContent.displayName = SelectPrimitive.Content.displayName;
var SelectLabel = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
  SelectPrimitive.Label,
  {
    ref,
    className: cn("px-2 py-1.5 text-sm font-semibold", className),
    ...props
  }
));
SelectLabel.displayName = SelectPrimitive.Label.displayName;
var SelectItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
  SelectPrimitive.Item,
  {
    ref,
    className: cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    ),
    ...props,
    children: [
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.Check, { className: "h-4 w-4" }) }) }),
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectPrimitive.ItemText, { children })
    ]
  }
));
SelectItem.displayName = SelectPrimitive.Item.displayName;
var SelectSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
  SelectPrimitive.Separator,
  {
    ref,
    className: cn("-mx-1 my-1 h-px bg-muted", className),
    ...props
  }
));
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

// src/components/CookieDevTool.tsx
var import_react = require("react");
var import_lucide_react2 = require("lucide-react");
var import_jsx_runtime5 = require("react/jsx-runtime");
var posClasses = {
  "top-left": "top-4 left-4",
  "top-right": "top-4 right-4",
  "bottom-left": "bottom-4 left-4",
  "bottom-right": "bottom-4 right-4"
};
var CookieDevTool = ({ position = "bottom-right" }) => {
  const [open, setOpen] = (0, import_react.useState)(false);
  const [key, setKey] = (0, import_react.useState)("");
  const [value, setValue] = (0, import_react.useState)("");
  const [cookies, setCookies] = (0, import_react.useState)({});
  const [feedback, setFeedback] = (0, import_react.useState)(null);
  (0, import_react.useEffect)(() => {
    if (open) parseCookies();
  }, [open]);
  const isDemo = typeof window !== "undefined" && window?.location?.host.includes("github.io");
  const isProd = process.env.NODE_ENV === "production";
  if (isProd && !isDemo) return null;
  const parseCookies = () => {
    const parsed = {};
    document.cookie.split(";").forEach((cookie) => {
      const [k, ...v] = cookie.trim().split("=");
      if (k) parsed[k] = v.join("=");
    });
    setCookies(parsed);
  };
  const handleSetCookie = () => {
    if (!key) {
      setFeedback({ message: "Please provide a cookie key.", type: "error" });
      return;
    }
    document.cookie = `${key}=${value}; path=/`;
    setFeedback({ message: `Cookie "${key}" set!`, type: "success" });
    parseCookies();
    setTimeout(() => setFeedback(null), 3e3);
  };
  const handleClearCookie = () => {
    if (!key) {
      setFeedback({ message: "Please provide a cookie key to clear.", type: "error" });
      return;
    }
    document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
    setFeedback({ message: `Cookie "${key}" cleared.`, type: "success" });
    setKey("");
    setValue("");
    parseCookies();
    setTimeout(() => setFeedback(null), 3e3);
  };
  const handleSelectCookie = (selectedKey) => {
    if (selectedKey === "__new__") {
      setKey("");
      setValue("");
    } else {
      setKey(selectedKey);
      setValue(cookies[selectedKey] || "");
    }
  };
  const handleClearAllCookies = () => {
    if (Object.keys(cookies).length === 0) {
      setFeedback({ message: "No cookies to clear.", type: "error" });
      return;
    }
    Object.keys(cookies).forEach((cookieKey) => {
      document.cookie = `${cookieKey}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
    });
    setCookies({});
    setKey("");
    setValue("");
    setFeedback({ message: "All cookies cleared.", type: "success" });
    setTimeout(() => setFeedback(null), 3e3);
  };
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `fixed z-50 ${posClasses[position]} transition-all`, children: [
    !open && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
      Button,
      {
        variant: "outline",
        onClick: () => setOpen(true),
        className: "flex items-center gap-2",
        children: [
          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Cookie, { size: 16 }),
          " Cookies"
        ]
      }
    ),
    open && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative mt-2 w-80 p-5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-2xl transition-all backdrop-blur-sm text-zinc-900 dark:text-zinc-100", children: [
      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "text-lg font-semibold", children: "Manage Cookies" }),
      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
        "button",
        {
          onClick: () => setOpen(false),
          className: "absolute top-3 right-3 text-zinc-600 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white transition w-8 h-8 flex items-center justify-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500",
          "aria-label": "Close panel",
          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.X, { size: 16 })
        }
      ),
      feedback && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
        "div",
        {
          className: `mt-2 relative flex items-start gap-2 text-sm px-4 py-3 rounded-md border transition-colors ${feedback.type === "success" ? "bg-green-100 text-green-800 border-green-300 dark:bg-green-900 dark:text-green-200 dark:border-green-700" : "bg-red-100 text-red-800 border-red-300 dark:bg-red-900 dark:text-red-200 dark:border-red-700"}`,
          children: [
            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
              feedback.type === "success" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.CheckCircle, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.AlertTriangle, { size: 16 }),
              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: feedback.message })
            ] }),
            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
              "button",
              {
                onClick: () => setFeedback(null),
                className: "absolute right-2 top-2 text-inherit opacity-60 hover:opacity-100 transition w-6 h-6 flex items-center justify-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500",
                "aria-label": "Dismiss feedback",
                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.X, { size: 16 })
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-3 mt-4", children: [
        Object.keys(cookies).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { children: "Select Cookie" }),
          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Select, { onValueChange: handleSelectCookie, value: key || "__new__", children: [
            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectValue, { placeholder: "Select a cookie" }) }),
            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(SelectContent, { children: [
              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectItem, { value: "__new__", children: "+ New Cookie" }),
              Object.entries(cookies).map(([cookieKey]) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectItem, { value: cookieKey, children: cookieKey }, cookieKey))
            ] })
          ] })
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { htmlFor: "cookie-key", children: "Key" }),
          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
            Input,
            {
              id: "cookie-key",
              value: key,
              onChange: (e) => setKey(e.target.value),
              placeholder: "e.g. session_token"
            }
          )
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { htmlFor: "cookie-value", children: "Value" }),
          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
            Input,
            {
              id: "cookie-value",
              value,
              onChange: (e) => setValue(e.target.value),
              placeholder: "e.g. abc123"
            }
          )
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2 pt-2", children: [
          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { className: "w-full", onClick: handleSetCookie, children: "Set Cookie" }),
          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
            Button,
            {
              variant: "outline",
              className: "w-full",
              onClick: handleClearCookie,
              disabled: !key,
              children: "Clear Cookie"
            }
          ),
          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
            Button,
            {
              variant: "destructive",
              className: "w-full flex items-center justify-center gap-2",
              onClick: handleClearAllCookies,
              children: [
                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Trash2, { size: 16 }),
                "Clear All Cookies"
              ]
            }
          )
        ] })
      ] })
    ] })
  ] });
};

// src/components/CookieDevToolSheet.tsx
var import_react2 = require("react");

// src/components/ui/sheet.tsx
var React5 = __toESM(require("react"), 1);
var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
var import_class_variance_authority3 = require("class-variance-authority");
var import_lucide_react3 = require("lucide-react");
var import_jsx_runtime6 = require("react/jsx-runtime");
var Sheet = SheetPrimitive.Root;
var SheetTrigger = SheetPrimitive.Trigger;
var SheetPortal = SheetPrimitive.Portal;
var SheetOverlay = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
  SheetPrimitive.Overlay,
  {
    className: cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    ),
    ...props,
    ref
  }
));
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
var sheetVariants = (0, import_class_variance_authority3.cva)(
  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
      }
    },
    defaultVariants: {
      side: "right"
    }
  }
);
var SheetContent = React5.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(SheetPortal, { children: [
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SheetOverlay, {}),
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
    SheetPrimitive.Content,
    {
      ref,
      className: cn(sheetVariants({ side }), className),
      ...props,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.X, { className: "h-4 w-4" }),
          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Close" })
        ] }),
        children
      ]
    }
  )
] }));
SheetContent.displayName = SheetPrimitive.Content.displayName;
var SheetHeader = ({
  className,
  ...props
}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
  "div",
  {
    className: cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    ),
    ...props
  }
);
SheetHeader.displayName = "SheetHeader";
var SheetFooter = ({
  className,
  ...props
}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
  "div",
  {
    className: cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    ),
    ...props
  }
);
SheetFooter.displayName = "SheetFooter";
var SheetTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
  SheetPrimitive.Title,
  {
    ref,
    className: cn("text-lg font-semibold text-foreground", className),
    ...props
  }
));
SheetTitle.displayName = SheetPrimitive.Title.displayName;
var SheetDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
  SheetPrimitive.Description,
  {
    ref,
    className: cn("text-sm text-muted-foreground", className),
    ...props
  }
));
SheetDescription.displayName = SheetPrimitive.Description.displayName;

// src/components/CookieDevToolSheet.tsx
var import_lucide_react4 = require("lucide-react");
var import_jsx_runtime7 = require("react/jsx-runtime");
var CookieDevToolSheet = () => {
  const [open, setOpen] = (0, import_react2.useState)(false);
  const [key, setKey] = (0, import_react2.useState)("");
  const [value, setValue] = (0, import_react2.useState)("");
  const [cookies, setCookies] = (0, import_react2.useState)({});
  const [feedback, setFeedback] = (0, import_react2.useState)(null);
  (0, import_react2.useEffect)(() => {
    if (open) {
      parseCookies();
    }
  }, [open]);
  const isDemo = typeof window !== "undefined" && window.location.host.includes("github.io");
  const isProd = process.env.NODE_ENV === "production";
  if (isProd && !isDemo) return null;
  const parseCookies = () => {
    const parsed = {};
    document.cookie.split(";").forEach((cookie) => {
      const [k, ...v] = cookie.trim().split("=");
      if (k && k.trim() !== "") {
        parsed[k] = v.join("=");
      }
    });
    setCookies(parsed);
  };
  const handleSetCookie = () => {
    if (!key) {
      setFeedback({ message: "Please provide a cookie key.", type: "error" });
      return;
    }
    document.cookie = `${key}=${value}; path=/`;
    setFeedback({ message: `Cookie "${key}" set!`, type: "success" });
    parseCookies();
    setTimeout(() => setFeedback(null), 3e3);
  };
  const handleClearCookie = () => {
    if (!key) {
      setFeedback({ message: "Please provide a cookie key to clear.", type: "error" });
      return;
    }
    document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
    setFeedback({ message: `Cookie "${key}" cleared.`, type: "success" });
    setKey("");
    setValue("");
    parseCookies();
    setTimeout(() => setFeedback(null), 3e3);
  };
  const handleSelectCookie = (selectedKey) => {
    if (selectedKey === "__new__") {
      setKey("");
      setValue("");
    } else {
      setKey(selectedKey);
      setValue(cookies[selectedKey] || "");
    }
  };
  const handleClearAllCookies = () => {
    if (Object.keys(cookies).length === 0) {
      setFeedback({ message: "No cookies to clear.", type: "error" });
      return;
    }
    Object.keys(cookies).forEach((cookieKey) => {
      document.cookie = `${cookieKey}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
    });
    setCookies({});
    setKey("");
    setValue("");
    setFeedback({ message: "All cookies cleared.", type: "success" });
    setTimeout(() => setFeedback(null), 3e3);
  };
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Sheet, { open, onOpenChange: setOpen, children: [
    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SheetTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Button, { variant: "outline", className: "flex items-center gap-2", children: [
      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.Cookie, { size: 16 }),
      " Cookies"
    ] }) }),
    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SheetContent, { side: "right", className: "w-[400px] sm:w-[400px]", children: [
      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SheetHeader, { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SheetTitle, { children: "Manage Cookies" }) }),
      feedback && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
        "div",
        {
          className: `relative flex items-start gap-2 text-sm px-4 py-3 rounded-md border mb-4 transition-colors ${feedback.type === "success" ? "bg-green-100 text-green-800 border-green-300 dark:bg-green-900 dark:text-green-200 dark:border-green-700" : "bg-red-100 text-red-800 border-red-300 dark:bg-red-900 dark:text-red-200 dark:border-red-700"}`,
          children: [
            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
              feedback.type === "success" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.CheckCircle, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.AlertTriangle, { size: 16 }),
              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: feedback.message })
            ] }),
            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
              "button",
              {
                onClick: () => setFeedback(null),
                className: "absolute right-2 top-2 text-inherit opacity-60 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-400 dark:focus-visible:ring-zinc-600 rounded-sm transition",
                "aria-label": "Dismiss feedback",
                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.X, { size: 16 })
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "py-4 space-y-3", children: [
        Object.keys(cookies).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1", children: [
          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { children: "Select Cookie" }),
          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Select, { onValueChange: handleSelectCookie, value: key || "__new__", children: [
            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectValue, { placeholder: "Select a cookie" }) }),
            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SelectContent, { children: [
              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectItem, { value: "__new__", children: "+ New Cookie" }),
              Object.entries(cookies).filter(([cookieKey]) => cookieKey.trim() !== "").map(([cookieKey]) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectItem, { value: cookieKey, children: cookieKey }, cookieKey))
            ] })
          ] })
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1", children: [
          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { htmlFor: "cookie-key", children: "Key" }),
          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
            Input,
            {
              id: "cookie-key",
              value: key,
              onChange: (e) => setKey(e.target.value),
              placeholder: "e.g. session_token"
            }
          )
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1", children: [
          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { htmlFor: "cookie-value", children: "Value" }),
          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
            Input,
            {
              id: "cookie-value",
              value,
              onChange: (e) => setValue(e.target.value),
              placeholder: "e.g. abc123"
            }
          )
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2 pt-2", children: [
          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { className: "w-full", onClick: handleSetCookie, children: "Set Cookie" }),
          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
            Button,
            {
              variant: "outline",
              className: "w-full",
              onClick: handleClearCookie,
              disabled: !key,
              children: "Clear Cookie"
            }
          ),
          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
            Button,
            {
              variant: "destructive",
              className: "w-full flex items-center justify-center gap-2",
              onClick: handleClearAllCookies,
              children: [
                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react4.Trash2, { size: 16 }),
                "Clear All Cookies"
              ]
            }
          )
        ] })
      ] })
    ] })
  ] });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  CookieDevTool,
  CookieDevToolSheet
});
//# sourceMappingURL=index.cjs.map