@kittler/tailwind-breakpoint-indicator 1.0.0 → 1.0.2

package/dist/index.d.ts

@@ -1,22 +1,24 @@
-export interface BreakpointHelperOptions {
-    /**
-     * Whether the helper is enabled. If not provided, will try to detect dev mode.
-     * @default undefined (auto-detect)
-     */
-    enabled?: boolean;
-    /**
-     * Duration in milliseconds to hide the helper when hide button is clicked.
-     * @default 20000 (20 seconds)
-     */
-    hideDuration?: number;
-    /**
-     * Custom container selector. If provided, will use existing element instead of creating one.
-     * @default undefined (creates new element)
-     */
-    containerSelector?: string;
-}
-/**
- * Initializes the breakpoint helper
- */
-export declare function initBreakpointHelper(options?: BreakpointHelperOptions): void;
-//# sourceMappingURL=index.d.ts.map
+export declare interface BreakpointHelperOptions {
+    /**
+     * Whether the helper is enabled. If not provided, will try to detect dev mode.
+     * @default undefined (auto-detect)
+     */
+    enabled?: boolean;
+    /**
+     * Duration in milliseconds to hide the helper when hide button is clicked.
+     * @default 20000 (20 seconds)
+     */
+    hideDuration?: number;
+    /**
+     * Custom container selector. If provided, will use existing element instead of creating one.
+     * @default undefined (creates new element)
+     */
+    containerSelector?: string;
+}
+
+/**
+ * Initializes the breakpoint helper
+ */
+export declare function initBreakpointHelper(options?: BreakpointHelperOptions): void;
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kittler/tailwind-breakpoint-indicator",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Visual breakpoint indicator for Tailwind CSS development",
   "type": "module",
   "main": "./dist/index.js",

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAwGD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,GAAE,uBAA4B,GAAG,IAAI,CA+ChF"}

package/dist/index.umd.js

@@ -1,6 +0,0 @@
-(function(o,t){typeof exports=="object"&&typeof module<"u"?t(exports):typeof define=="function"&&define.amd?define(["exports"],t):(o=typeof globalThis<"u"?globalThis:o||self,t(o.TailwindBreakpointIndicator={}))})(this,(function(o){"use strict";var t=typeof document<"u"?document.currentScript:null;const u={hideDuration:2e4};function m(){const r={url:typeof document>"u"&&typeof location>"u"?require("url").pathToFileURL(__filename).href:typeof document>"u"?location.href:t&&t.tagName.toUpperCase()==="SCRIPT"&&t.src||new URL("index.umd.js",document.baseURI).href};if(typeof{url:typeof document>"u"&&typeof location>"u"?require("url").pathToFileURL(__filename).href:typeof document>"u"?location.href:t&&t.tagName.toUpperCase()==="SCRIPT"&&t.src||new URL("index.umd.js",document.baseURI).href}<"u"&&r.env?.DEV||typeof globalThis<"u"&&globalThis.process?.env?.NODE_ENV==="development")return!0;if(typeof window<"u"){const e=window.location.hostname;if(e==="localhost"||e==="127.0.0.1"||e.startsWith("192.168."))return!0}return!1}function h(){const r=document.createElement("div");r.id="breakpoint-helper",r.className="breakpoint-helper",r.setAttribute("style","display: none");const e=document.createElement("div");e.className="breakpoint-helper-content";const l=document.createElement("span");l.className="breakpoint-helper-label breakpoint-helper-base",l.innerHTML='<strong class="breakpoint-helper-badge">base</strong> 32rem (512px) @media (width >= 32rem)';const n=document.createElement("span");n.className="breakpoint-helper-label breakpoint-helper-sm",n.innerHTML='<strong class="breakpoint-helper-badge">sm</strong> 40rem (640px) @media (width >= 40rem)';const i=document.createElement("span");i.className="breakpoint-helper-label breakpoint-helper-md",i.innerHTML='<strong class="breakpoint-helper-badge">md</strong> 48rem (768px) @media (width >= 48rem)';const p=document.createElement("span");p.className="breakpoint-helper-label breakpoint-helper-lg",p.innerHTML='<strong class="breakpoint-helper-badge">lg</strong> 64rem (1024px) @media (width >= 64rem)';const s=document.createElement("span");s.className="breakpoint-helper-label breakpoint-helper-xl",s.innerHTML='<strong class="breakpoint-helper-badge">xl</strong> 80rem (1280px) @media (width >= 80rem)';const c=document.createElement("span");c.className="breakpoint-helper-label breakpoint-helper-2xl",c.innerHTML='<strong class="breakpoint-helper-badge">2xl</strong> 96rem (1536px) @media (width >= 96rem)',e.appendChild(l),e.appendChild(n),e.appendChild(i),e.appendChild(p),e.appendChild(s),e.appendChild(c);const a=document.createElement("button");return a.id="breakpoint-helper-hide-btn",a.type="button",a.className="breakpoint-helper-hide-btn",a.setAttribute("aria-label","Skrýt breakpoint helper na 20 sekund"),a.innerHTML=`
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="breakpoint-helper-icon">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-    </svg>
-  `,e.appendChild(a),r.appendChild(e),r}function d(r={}){const e={...u,...r};if(!(e.enabled!==void 0?e.enabled:m()))return;let n=null;e.containerSelector?n=document.querySelector(e.containerSelector):n=document.getElementById("breakpoint-helper"),n||(n=h(),document.body.appendChild(n)),n.style.display="block";const i=n.querySelector("#breakpoint-helper-hide-btn");i&&i.addEventListener("click",()=>{n&&(n.style.display="none",setTimeout(()=>{n&&(n.style.display="block")},e.hideDuration))})}typeof window<"u"&&m()&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{d()}):d()),o.initBreakpointHelper=d,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));
-//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.umd.js","sources":["../src/index.ts"],"sourcesContent":["export interface BreakpointHelperOptions {\r\n  /**\r\n   * Whether the helper is enabled. If not provided, will try to detect dev mode.\r\n   * @default undefined (auto-detect)\r\n   */\r\n  enabled?: boolean\r\n  \r\n  /**\r\n   * Duration in milliseconds to hide the helper when hide button is clicked.\r\n   * @default 20000 (20 seconds)\r\n   */\r\n  hideDuration?: number\r\n  \r\n  /**\r\n   * Custom container selector. If provided, will use existing element instead of creating one.\r\n   * @default undefined (creates new element)\r\n   */\r\n  containerSelector?: string\r\n}\r\n\r\nconst DEFAULT_OPTIONS: Required<Omit<BreakpointHelperOptions, 'enabled' | 'containerSelector'>> = {\r\n  hideDuration: 20000\r\n}\r\n\r\n/**\r\n * Detects if we're in development mode\r\n */\r\nfunction isDevMode(): boolean {\r\n  // Vite\r\n  const meta = import.meta as { env?: { DEV?: boolean } }\r\n  if (typeof import.meta !== 'undefined' && meta.env?.DEV) {\r\n    return true\r\n  }\r\n  \r\n  // Node.js / Webpack / Other bundlers\r\n  if (typeof globalThis !== 'undefined') {\r\n    const proc = (globalThis as unknown as { process?: { env?: { NODE_ENV?: string } } }).process\r\n    if (proc?.env?.NODE_ENV === 'development') {\r\n      return true\r\n    }\r\n  }\r\n  \r\n  // Fallback: check if we're in a development-like environment\r\n  if (typeof window !== 'undefined') {\r\n    // Check for common dev indicators\r\n    const hostname = window.location.hostname\r\n    if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.')) {\r\n      return true\r\n    }\r\n  }\r\n  \r\n  return false\r\n}\r\n\r\n/**\r\n * Creates the breakpoint helper HTML element\r\n */\r\nfunction createBreakpointHelperElement(): HTMLElement {\r\n  const container = document.createElement('div')\r\n  container.id = 'breakpoint-helper'\r\n  container.className = 'breakpoint-helper'\r\n  container.setAttribute('style', 'display: none')\r\n  \r\n  const content = document.createElement('div')\r\n  content.className = 'breakpoint-helper-content'\r\n  \r\n  // Base breakpoint\r\n  const baseSpan = document.createElement('span')\r\n  baseSpan.className = 'breakpoint-helper-label breakpoint-helper-base'\r\n  baseSpan.innerHTML = '<strong class=\"breakpoint-helper-badge\">base</strong> 32rem (512px) @media (width >= 32rem)'\r\n  \r\n  // SM breakpoint\r\n  const smSpan = document.createElement('span')\r\n  smSpan.className = 'breakpoint-helper-label breakpoint-helper-sm'\r\n  smSpan.innerHTML = '<strong class=\"breakpoint-helper-badge\">sm</strong> 40rem (640px) @media (width >= 40rem)'\r\n  \r\n  // MD breakpoint\r\n  const mdSpan = document.createElement('span')\r\n  mdSpan.className = 'breakpoint-helper-label breakpoint-helper-md'\r\n  mdSpan.innerHTML = '<strong class=\"breakpoint-helper-badge\">md</strong> 48rem (768px) @media (width >= 48rem)'\r\n  \r\n  // LG breakpoint\r\n  const lgSpan = document.createElement('span')\r\n  lgSpan.className = 'breakpoint-helper-label breakpoint-helper-lg'\r\n  lgSpan.innerHTML = '<strong class=\"breakpoint-helper-badge\">lg</strong> 64rem (1024px) @media (width >= 64rem)'\r\n  \r\n  // XL breakpoint\r\n  const xlSpan = document.createElement('span')\r\n  xlSpan.className = 'breakpoint-helper-label breakpoint-helper-xl'\r\n  xlSpan.innerHTML = '<strong class=\"breakpoint-helper-badge\">xl</strong> 80rem (1280px) @media (width >= 80rem)'\r\n  \r\n  // 2XL breakpoint\r\n  const xl2Span = document.createElement('span')\r\n  xl2Span.className = 'breakpoint-helper-label breakpoint-helper-2xl'\r\n  xl2Span.innerHTML = '<strong class=\"breakpoint-helper-badge\">2xl</strong> 96rem (1536px) @media (width >= 96rem)'\r\n  \r\n  content.appendChild(baseSpan)\r\n  content.appendChild(smSpan)\r\n  content.appendChild(mdSpan)\r\n  content.appendChild(lgSpan)\r\n  content.appendChild(xlSpan)\r\n  content.appendChild(xl2Span)\r\n  \r\n  // Hide button\r\n  const hideButton = document.createElement('button')\r\n  hideButton.id = 'breakpoint-helper-hide-btn'\r\n  hideButton.type = 'button'\r\n  hideButton.className = 'breakpoint-helper-hide-btn'\r\n  hideButton.setAttribute('aria-label', 'Skrýt breakpoint helper na 20 sekund')\r\n  \r\n  hideButton.innerHTML = `\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"breakpoint-helper-icon\">\r\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\" />\r\n    </svg>\r\n  `\r\n  \r\n  content.appendChild(hideButton)\r\n  container.appendChild(content)\r\n  \r\n  return container\r\n}\r\n\r\n/**\r\n * Initializes the breakpoint helper\r\n */\r\nexport function initBreakpointHelper(options: BreakpointHelperOptions = {}): void {\r\n  const opts = {\r\n    ...DEFAULT_OPTIONS,\r\n    ...options\r\n  }\r\n  \r\n  // Determine if enabled\r\n  const enabled = opts.enabled !== undefined ? opts.enabled : isDevMode()\r\n  \r\n  if (!enabled) {\r\n    return\r\n  }\r\n  \r\n  // Check if element already exists or use custom selector\r\n  let breakpointHelper: HTMLElement | null = null\r\n  \r\n  if (opts.containerSelector) {\r\n    breakpointHelper = document.querySelector(opts.containerSelector)\r\n  } else {\r\n    breakpointHelper = document.getElementById('breakpoint-helper')\r\n  }\r\n  \r\n  // Create element if it doesn't exist\r\n  if (!breakpointHelper) {\r\n    breakpointHelper = createBreakpointHelperElement()\r\n    document.body.appendChild(breakpointHelper)\r\n  }\r\n  \r\n  // Show the helper\r\n  breakpointHelper.style.display = 'block'\r\n  \r\n  // Setup hide button functionality\r\n  const hideButton = breakpointHelper.querySelector('#breakpoint-helper-hide-btn') as HTMLButtonElement | null\r\n  \r\n  if (hideButton) {\r\n    hideButton.addEventListener('click', () => {\r\n      if (breakpointHelper) {\r\n        breakpointHelper.style.display = 'none'\r\n        \r\n        setTimeout(() => {\r\n          if (breakpointHelper) {\r\n            breakpointHelper.style.display = 'block'\r\n          }\r\n        }, opts.hideDuration)\r\n      }\r\n    })\r\n  }\r\n}\r\n\r\n/**\r\n * Auto-initialize if imported directly (for convenience)\r\n */\r\nif (typeof window !== 'undefined') {\r\n  // Only auto-init in browser environment\r\n  // Check if we should auto-init (dev mode)\r\n  if (isDevMode()) {\r\n    // Use requestAnimationFrame to ensure DOM is ready\r\n    if (document.readyState === 'loading') {\r\n      document.addEventListener('DOMContentLoaded', () => {\r\n        initBreakpointHelper()\r\n      })\r\n    } else {\r\n      initBreakpointHelper()\r\n    }\r\n  }\r\n}\r\n"],"names":["DEFAULT_OPTIONS","isDevMode","meta","_documentCurrentScript","hostname","createBreakpointHelperElement","container","content","baseSpan","smSpan","mdSpan","lgSpan","xlSpan","xl2Span","hideButton","initBreakpointHelper","options","opts","breakpointHelper"],"mappings":"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"}

package/dist/styles.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAA"}