@uninspired/cookie-banner 0.0.1

package/dist/script.d.ts

@@ -0,0 +1,60 @@
+import * as z from 'zod/mini';
+
+declare type BannerItemOptions = BannerItemOptionsRequired | BannerItemOptionsOptional;
+
+declare interface BannerItemOptionsBase {
+    value: string;
+    label: string;
+    defaultSelected?: boolean;
+    sublabel?: string;
+    required?: boolean;
+    description?: string;
+}
+
+declare interface BannerItemOptionsOptional extends BannerItemOptionsBase {
+    required: false;
+    script: ScriptDefinition;
+}
+
+declare interface BannerItemOptionsRequired extends BannerItemOptionsBase {
+    required: true;
+    script: undefined;
+}
+
+declare interface BannerOptions {
+    localStorageKey?: string;
+    heading?: string;
+    subheading?: string;
+    selectLabel?: string;
+    hideLabel?: string;
+    saveLabel?: string;
+    declineLabel?: string;
+    defaultSettingsOpen?: boolean;
+    privacyPolicy?: {
+        label: string;
+        url: string;
+    };
+    items: BannerItemOptions[];
+}
+
+export declare function mountBanner(options: BannerOptions, targetElement?: HTMLElement | string): void;
+
+declare type ScriptDefinition = z.infer<typeof scriptDefinitionSchema>;
+
+declare const scriptDefinitionSchema: z.ZodMiniDiscriminatedUnion<[z.ZodMiniObject<{
+    variant: z.ZodMiniLiteral<"remote">;
+    type: z.ZodMiniOptional<z.ZodMiniString<string>>;
+    src: z.ZodMiniString<string>;
+    async: z.ZodMiniOptional<z.ZodMiniBoolean<boolean>>;
+    defer: z.ZodMiniOptional<z.ZodMiniBoolean<boolean>>;
+    crossorigin: z.ZodMiniOptional<z.ZodMiniString<string>>;
+    integrity: z.ZodMiniOptional<z.ZodMiniString<string>>;
+}, z.core.$strip>, z.ZodMiniObject<{
+    variant: z.ZodMiniLiteral<"inline">;
+    type: z.ZodMiniOptional<z.ZodMiniString<string>>;
+    async: z.ZodMiniOptional<z.ZodMiniBoolean<boolean>>;
+    defer: z.ZodMiniOptional<z.ZodMiniBoolean<boolean>>;
+    content: z.ZodMiniString<string>;
+}, z.core.$strip>], "variant">;
+
+export { }

package/dist/script.js

@@ -0,0 +1,16 @@
+import { J as c, u as i, B as u } from "./index-BfHatbv4.js";
+function s(e, o) {
+  const t = o === void 0;
+  let n;
+  if (typeof o == "string") {
+    const r = document.querySelector(o);
+    if (!r)
+      throw new Error(`Element with selector "${o}" not found`);
+    n = r;
+  } else
+    n = o;
+  c(/* @__PURE__ */ i(u, { noTarget: t, ...e }), n ?? document.body);
+}
+export {
+  s as mountBanner
+};

package/dist/style.css

@@ -0,0 +1 @@
+._root_hw69b_1{all:unset;cursor:pointer;will-change:background-color;transition:background-color .15s ease-in-out;font-size:var(--cb-font-size-caption);line-height:var(--cb-line-height-caption);font-family:var(--cb-font-family-caption);letter-spacing:var(--cb-letter-spacing-caption);font-weight:var(--cb-font-weight-caption-bold);padding:var(--cb-space-xs) var(--cb-space-sm);border-radius:var(--cb-radius-md);display:flex;flex-direction:row;align-items:center}._root_hw69b_1._neutral_hw69b_17{background-color:var(--cb-color-button-neutral-background);color:var(--cb-color-button-neutral-foreground)}._root_hw69b_1._neutral_hw69b_17:hover{background-color:var(--cb-color-button-neutral-background-hover)}._root_hw69b_1._neutral_hw69b_17:active{background-color:var(--cb-color-button-neutral-background-active)}._root_hw69b_1._brand_hw69b_30{background-color:var(--cb-color-button-brand-background);color:var(--cb-color-button-brand-foreground)}._root_hw69b_1._brand_hw69b_30:hover{background-color:var(--cb-color-button-brand-background-hover)}._root_hw69b_1._brand_hw69b_30:active{background-color:var(--cb-color-button-brand-background-active)}._root_hw69b_1._ghost_hw69b_43{background-color:var(--cb-color-button-ghost-background);color:var(--cb-color-button-ghost-foreground)}._root_hw69b_1._ghost_hw69b_43:hover{background-color:var(--cb-color-button-ghost-background-hover)}._root_hw69b_1._ghost_hw69b_43:active{background-color:var(--cb-color-button-ghost-background-active)}._root_14l5h_1{color:var(--cb-color-text-default)}._root_14l5h_1._muted_14l5h_4{color:var(--cb-color-text-muted)}._root_14l5h_1._body_14l5h_8{font-size:var(--cb-font-size-body);font-family:var(--cb-font-family-body);line-height:var(--cb-line-height-body);letter-spacing:var(--cb-letter-spacing-body)}._root_14l5h_1._body_14l5h_8._normal_14l5h_14{font-weight:var(--cb-font-weight-body-normal)}._root_14l5h_1._body_14l5h_8._bold_14l5h_18{font-weight:var(--cb-font-weight-body-bold)}._root_14l5h_1._caption_14l5h_23{font-size:var(--cb-font-size-caption);font-family:var(--cb-font-family-caption);line-height:var(--cb-line-height-caption);letter-spacing:var(--cb-letter-spacing-caption)}._root_14l5h_1._caption_14l5h_23._normal_14l5h_14{font-weight:var(--cb-font-weight-caption-normal)}._root_14l5h_1._caption_14l5h_23._bold_14l5h_18{font-weight:var(--cb-font-weight-caption-bold)}._root_14l5h_1 a{all:unset;color:var(--cb-color-text-link);cursor:pointer;text-decoration:none}._root_14l5h_1 a:hover{color:var(--cb-color-text-link-hover);text-decoration:underline}@keyframes _contentShow_1wsw7_1{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes _slideDown_1wsw7_1{0%{max-height:var(--cb-size-settings-max-height);overflow:auto}1%{max-height:var(--cb-size-settings-max-height);overflow:hidden}to{max-height:0;overflow:hidden}}@keyframes _slideUp_1wsw7_1{0%{max-height:0;overflow:hidden}99%{max-height:var(--cb-size-settings-max-height);overflow:hidden}to{max-height:var(--cb-size-settings-max-height);overflow:auto}}._root_1wsw7_42{display:flex;flex-direction:column;gap:var(--cb-space-md);padding:var(--cb-space-md);background-color:var(--cb-color-background-default);box-shadow:var(--cb-shadow-lg);border-radius:var(--cb-radius-md);overflow:hidden;animation:_contentShow_1wsw7_1 .15s cubic-bezier(.16,1,.3,1)}._root_1wsw7_42._noTarget_1wsw7_53{position:fixed;bottom:var(--cb-space-md);left:var(--cb-space-md);width:100%;max-width:var(--cb-size-banner-max-width)}._root_1wsw7_42 ._collapsible_1wsw7_62{display:contents}._root_1wsw7_42 ._collapsible_1wsw7_62 ._header_1wsw7_65{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--cb-space-md)}._root_1wsw7_42 ._collapsible_1wsw7_62 ._header_1wsw7_65 ._heading_1wsw7_72{display:flex;flex-direction:column;align-items:flex-start}._root_1wsw7_42 ._collapsible_1wsw7_62 ._header_1wsw7_65 ._chevron_1wsw7_78{transform:rotate(0);will-change:transform;transition:transform .15s ease-out}._root_1wsw7_42 ._collapsible_1wsw7_62 ._header_1wsw7_65 ._chevron_1wsw7_78._open_1wsw7_83{transform:rotate(180deg)}._root_1wsw7_42 ._collapsible_1wsw7_62 ._settings_1wsw7_89{display:flex;flex-direction:column;background-color:var(--cb-color-background-muted);border-radius:var(--cb-radius-md);overflow:hidden;will-change:max-height,overflow;animation:_slideDown_1wsw7_1 .25s ease-out}._root_1wsw7_42 ._collapsible_1wsw7_62 ._settings_1wsw7_89[data-state=open]{animation:_slideUp_1wsw7_1 .25s ease-out}._root_1wsw7_42 ._collapsible_1wsw7_62 ._footer_1wsw7_103{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--cb-space-md)}._root_1wsw7_42 ._collapsible_1wsw7_62 ._footer_1wsw7_103 ._actions_1wsw7_113{display:flex;flex-direction:row;align-items:center;gap:var(--cb-space-md)}@keyframes _slideDown_mqtha_1{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes _slideUp_mqtha_1{0%{height:var(--radix-accordion-content-height)}to{height:0}}._root_mqtha_19{display:flex;flex-direction:column;overflow:hidden}._root_mqtha_19 ._header_mqtha_24{all:unset;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--cb-space-sm) var(--cb-space-md);cursor:pointer}._root_mqtha_19 ._header_mqtha_24 ._label_mqtha_33{display:flex;flex-direction:column;width:100%}._root_mqtha_19 ._header_mqtha_24 ._actions_mqtha_39{display:flex;flex-direction:row;align-items:center;gap:var(--cb-space-sm)}._root_mqtha_19 ._header_mqtha_24 ._actions_mqtha_39 ._chevron_mqtha_45{color:var(--cb-color-text-default);transition:transform .15s ease-out;will-change:transform;transform:rotate(0)}._root_mqtha_19 ._header_mqtha_24 ._actions_mqtha_39 ._chevron_mqtha_45._open_mqtha_51{transform:rotate(180deg)}._root_mqtha_19 ._description_mqtha_58{padding:var(--cb-space-xs) var(--cb-space-md);max-width:96ch;overflow:hidden}._root_mqtha_19 ._description_mqtha_58[data-state=open]{animation:_slideDown_mqtha_1 .15s ease-out}._root_mqtha_19 ._description_mqtha_58[data-state=closed]{animation:_slideUp_mqtha_1 .15s ease-out}._root_dibqz_1{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--cb-space-sm)}._root_dibqz_1 ._switch_dibqz_8{width:32px;height:20px;padding:2px;border-width:1px;border-style:solid;border-color:var(--cb-color-border-neutral);border-radius:9999px;will-change:background-color;transition:background-color .15s ease-out;background-color:var(--cb-color-switch-background-neutral);position:relative}._root_dibqz_1 ._switch_dibqz_8[data-state=checked]{background-color:var(--cb-color-switch-background-brand)}._root_dibqz_1 ._switch_dibqz_8[data-disabled]{cursor:not-allowed;background-color:var(--cb-color-switch-background-disabled)}._root_dibqz_1 ._switch_dibqz_8:not([data-disabled]){cursor:pointer}._root_dibqz_1 ._switch_dibqz_8:not([data-disabled]):hover{background-color:var(--cb-color-switch-background-light)}._root_dibqz_1 ._switch_dibqz_8 ._thumb_dibqz_38{width:14px;height:14px;position:absolute;left:0;top:0;background-color:var(--cb-color-switch-thumb-background-neutral);box-shadow:var(--cb-shadow-sm);border-radius:9999px;transition:transform .15s ease-out;transform:translate(2px) translateY(2px);will-change:transform}._root_dibqz_1 ._switch_dibqz_8 ._thumb_dibqz_38[data-state=checked]{transform:translate(14px) translateY(2px)}:root{--cb-color-background-default: var(--cb-color-neutral-0);--cb-color-background-muted: var(--cb-color-neutral-50);--cb-color-text-default: var(--cb-color-neutral-900);--cb-color-text-muted: var(--cb-color-neutral-500);--cb-color-text-link: var(--cb-color-brand-600);--cb-color-text-link-hover: var(--cb-color-brand-700);--cb-color-border-neutral: var(--cb-color-neutral-200);--cb-color-border-brand: var(--cb-color-brand-200);--cb-color-switch-background-neutral: var(--cb-color-neutral-100);--cb-color-switch-background-light: var(--cb-color-brand-500);--cb-color-switch-background-brand: var(--cb-color-brand-600);--cb-color-switch-background-disabled: var(--cb-color-neutral-300);--cb-color-switch-thumb-background-neutral: var(--cb-color-neutral-0);--cb-color-button-neutral-background: var(--cb-color-neutral-100);--cb-color-button-neutral-background-hover: var(--cb-color-neutral-200);--cb-color-button-neutral-background-active: var(--cb-color-neutral-100);--cb-color-button-neutral-foreground: var(--cb-color-neutral-700);--cb-color-button-brand-background: var(--cb-color-brand-100);--cb-color-button-brand-background-hover: var(--cb-color-brand-200);--cb-color-button-brand-background-active: var(--cb-color-brand-100);--cb-color-button-brand-foreground: var(--cb-color-brand-700);--cb-color-button-ghost-background: rgba(0, 0, 0, 0);--cb-color-button-ghost-background-hover: var(--cb-color-neutral-200);--cb-color-button-ghost-background-active: var(--cb-color-neutral-100);--cb-color-button-ghost-foreground: var(--cb-color-neutral-700)}

package/dist/theme.css

@@ -0,0 +1,94 @@
+:root {
+  /* Colors */
+  /* Base */
+  --cb-color-neutral-0: rgb(255, 255, 255);
+  --cb-color-neutral-50: rgb(250, 250, 250);
+  --cb-color-neutral-100: rgb(245, 245, 245);
+  --cb-color-neutral-200: rgb(229, 229, 229);
+  --cb-color-neutral-300: rgb(212, 212, 212);
+  --cb-color-neutral-400: rgb(163, 163, 163);
+  --cb-color-neutral-500: rgb(115, 115, 115);
+  --cb-color-neutral-600: rgb(82, 82, 82);
+  --cb-color-neutral-700: rgb(64, 64, 64);
+  --cb-color-neutral-800: rgb(38, 38, 38);
+  --cb-color-neutral-900: rgb(23, 23, 23);
+  --cb-color-neutral-950: rgb(10, 10, 10);
+
+  --cb-color-brand-50: rgb(236, 253, 245);
+  --cb-color-brand-100: rgb(209, 250, 229);
+  --cb-color-brand-200: rgb(167, 243, 208);
+  --cb-color-brand-300: rgb(110, 231, 183);
+  --cb-color-brand-400: rgb(52, 211, 153);
+  --cb-color-brand-500: rgb(16, 185, 129);
+  --cb-color-brand-600: rgb(5, 150, 105);
+  --cb-color-brand-700: rgb(4, 120, 87);
+  --cb-color-brand-800: rgb(6, 95, 70);
+  --cb-color-brand-900: rgb(6, 78, 59);
+
+  --cb-space-base: 4px;
+  --cb-space-xs: calc(var(--cb-space-base) * 1);
+  --cb-space-sm: calc(var(--cb-space-base) * 2);
+  --cb-space-md: calc(var(--cb-space-base) * 4);
+  --cb-space-lg: calc(var(--cb-space-base) * 6);
+  --cb-space-xl: calc(var(--cb-space-base) * 12);
+
+  /* Typography */
+  --cb-font-family-body: "Nunito Sans", sans-serif;
+  --cb-font-size-body: 14px;
+  --cb-font-weight-body-normal: 400;
+  --cb-font-weight-body-bold: 500;
+  --cb-line-height-body: 20px;
+  --cb-letter-spacing-body: 0em;
+
+  --cb-font-family-caption: "Nunito Sans", sans-serif;
+  --cb-font-size-caption: 12px;
+  --cb-font-weight-caption-normal: 400;
+  --cb-font-weight-caption-bold: 500;
+  --cb-line-height-caption: 16px;
+  --cb-letter-spacing-caption: 0em;
+
+  /* Radius */
+  --cb-radius-base: 6px;
+  --cb-radius-sm: calc(var(--cb-radius-base) * 1);
+  --cb-radius-md: calc(var(--cb-radius-base) * 2);
+  --cb-radius-lg: calc(var(--cb-radius-base) * 3);
+
+  /* Shadow */
+  --cb-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --cb-shadow-md:
+    0 4px 16px -2px rgb(0 0 0 / 0.08), 0 2px 4px -1px rgb(0 0 0 / 0.08);
+  --cb-shadow-lg:
+    0 12px 32px -4px rgb(0 0 0 / 0.08), 0 4px 8px -2px rgb(0 0 0 / 0.08);
+
+  /* Sizes */
+  --cb-size-banner-max-width: 448px;
+  --cb-size-settings-max-height: 448px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --cb-color-neutral-0: rgb(10, 10, 10);
+    --cb-color-neutral-50: rgb(23, 23, 23);
+    --cb-color-neutral-100: rgb(38, 38, 38);
+    --cb-color-neutral-200: rgb(64, 64, 64);
+    --cb-color-neutral-300: rgb(82, 82, 82);
+    --cb-color-neutral-400: rgb(115, 115, 115);
+    --cb-color-neutral-500: rgb(163, 163, 163);
+    --cb-color-neutral-600: rgb(212, 212, 212);
+    --cb-color-neutral-700: rgb(229, 229, 229);
+    --cb-color-neutral-800: rgb(245, 245, 245);
+    --cb-color-neutral-900: rgb(250, 250, 250);
+    --cb-color-neutral-950: rgb(255, 255, 255);
+
+    --cb-color-brand-50: rgb(15, 41, 30);
+    --cb-color-brand-100: rgb(17, 49, 35);
+    --cb-color-brand-200: rgb(19, 57, 41);
+    --cb-color-brand-300: rgb(22, 68, 48);
+    --cb-color-brand-400: rgb(27, 84, 58);
+    --cb-color-brand-500: rgb(35, 110, 74);
+    --cb-color-brand-600: rgb(48, 164, 108);
+    --cb-color-brand-700: rgb(60, 177, 121);
+    --cb-color-brand-800: rgb(76, 195, 138);
+    --cb-color-brand-900: rgb(229, 251, 235);
+  }
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@uninspired/cookie-banner",
+  "description": "Auth client for Uninspired Studio Products",
+  "author": "Chris Kolb <chris@uninspired.studio>",
+  "license": "MIT",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    "./*": "./dist/*"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "bunx --bun vite",
+    "build:safe": "tsc -b && bunx --bun vite build",
+    "build": "bunx --bun vite build",
+    "preview": "bunx --bun vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-switch": "^1.2.6",
+    "lucide-react": "^0.575.0",
+    "preact": "^10.27.2",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.2",
+    "@types/node": "^24.10.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}