@uibit/read-time 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 UIBit Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,22 @@
+# Text Read Timer
+
+[Interactive Demonstration](https://rawlings.github.io/uibit/text-read-timer)
+
+Text Read Timer automatically analyzes document length and displays a reading time estimate to users. By calculating read times directly on the client, it helps readers set expectations before committing to long-form articles, improving retention rates and page loyalty.
+
+## Value Delivery
+
+- **Improved Engagement** – Transparent reading estimates give readers context, reducing bounce rates on detailed pages.
+- **Client-Side Calculation** – Counts words and estimates reading durations in real-time on the client side, eliminating backend plugins or metadata fields.
+- **Flexible Integration** – Renders dynamically as a badge, with support for custom slotting so that the timer can be positioned anywhere within article bylines or headers.
+- **Adjustable Parameters** – Supports configurable words-per-minute calibrations to accommodate different audiences and languages.
+
+## Ideal Applications
+
+- **Editorial Platforms & Blogs** – Displaying read times in article summaries, headers, and indexes.
+- **Documentation Sites** – Providing guides and tutorials with clear completion timeframes.
+- **Knowledge Bases** – Helping users locate quick-read answers or detailed guides.
+
+## Further Information
+
+Detailed design guidelines, customizable attributes, and integration examples are available on our documentation site.

package/custom-elements.json

@@ -0,0 +1,244 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "default",
+            "module": "./read-time"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ReadTime",
+          "declaration": {
+            "name": "ReadTime",
+            "module": "./read-time"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/types"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/read-time.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Analyzes the word count of its slotted content and renders a reading-time\nbadge. The calculation happens inside the shadow DOM via a slot\nchange observer — no backend metadata required.\n\nPlace your HTML content in the default slot. The component counts only text\nnodes, ignoring markup and hidden elements.",
+          "name": "ReadTime",
+          "cssProperties": [
+            {
+              "description": "Badge font size",
+              "name": "--uibit-read-time-font-size",
+              "default": "0.8125rem"
+            },
+            {
+              "description": "Badge font weight",
+              "name": "--uibit-read-time-font-weight",
+              "default": "500"
+            },
+            {
+              "description": "Badge text color",
+              "name": "--uibit-read-time-color",
+              "default": "#6b7280"
+            },
+            {
+              "description": "Badge font family",
+              "name": "--uibit-read-time-font-family",
+              "default": "inherit"
+            },
+            {
+              "description": "Gap between icon and label",
+              "name": "--uibit-read-time-gap",
+              "default": "0.375rem"
+            },
+            {
+              "description": "Size of the clock icon",
+              "name": "--uibit-read-time-icon-size",
+              "default": "0.875rem"
+            },
+            {
+              "description": "Color of the clock icon",
+              "name": "--uibit-read-time-icon-color",
+              "default": "currentColor"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The content whose text will be measured",
+              "name": ""
+            },
+            {
+              "description": "Optional named slot to position or override the read-time label/badge",
+              "name": "timer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "wpm",
+              "type": {
+                "text": "number"
+              },
+              "default": "238",
+              "description": "Average reading speed in words per minute.",
+              "attribute": "wpm"
+            },
+            {
+              "kind": "field",
+              "name": "showIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Show the clock icon before the label.",
+              "attribute": "show-icon"
+            },
+            {
+              "kind": "field",
+              "name": "_label",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "_slot",
+              "type": {
+                "text": "HTMLSlotElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_timerSlot",
+              "type": {
+                "text": "HTMLSlotElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_calculate",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_extractText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "node",
+                  "type": {
+                    "text": "Node"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "wpm",
+              "type": {
+                "text": "number"
+              },
+              "default": "238",
+              "description": "Average reading speed in words per minute.",
+              "fieldName": "wpm"
+            },
+            {
+              "name": "show-icon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Show the clock icon before the label.",
+              "fieldName": "showIcon"
+            }
+          ],
+          "superclass": {
+            "name": "UIBitElement",
+            "package": "@uibit/core"
+          },
+          "tagName": "uibit-read-time",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ReadTime",
+          "declaration": {
+            "name": "ReadTime",
+            "module": "src/read-time.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "uibit-read-time",
+          "declaration": {
+            "name": "ReadTime",
+            "module": "src/read-time.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ReadTime",
+            "module": "src/read-time.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css` :host { display: block; font-family: var(--uibit-read-time-font-family, inherit); } .timer { display: inline-flex; align-items: center; gap: var(--uibit-read-time-gap, 0.375rem); font-size: var(--uibit-read-time-font-size, var(--uibit-font-size-sm, 0.8125rem)); font-weight: var(--uibit-read-time-font-weight, var(--uibit-font-weight-medium, 500)); color: var(--uibit-read-time-color, #6b7280); line-height: var(--uibit-line-height-normal, 1.5); } .icon { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--uibit-read-time-icon-color, currentColor); width: var(--uibit-read-time-icon-size, 0.875rem); height: var(--uibit-read-time-icon-size, 0.875rem); } .icon svg { width: 100%; height: 100%; } .label { white-space: nowrap; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [],
+      "exports": []
+    }
+  ]
+}

package/dist/frameworks/angular/index.ts

@@ -0,0 +1,27 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, booleanAttribute, numberAttribute } from '@angular/core';
+import '@uibit/read-time';
+import type { ReadTime as HTMLElementClass } from '@uibit/read-time';
+
+@Component({
+  selector: 'uibit-read-time',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true
+})
+export class NgxReadTime {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.wpm = this.wpm();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.showIcon = this.showIcon();
+      }
+    });
+  }
+
+  readonly wpm = input<number, any>(238, { transform: numberAttribute });
+  readonly showIcon = input<boolean, any>(true, { transform: booleanAttribute });
+}

package/dist/frameworks/astro/index.d.ts

@@ -0,0 +1,10 @@
+import type { ReadTime as HTMLElementClass } from '@uibit/read-time';
+import '@uibit/read-time';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-read-time': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+    }
+  }
+}

package/dist/frameworks/nuxt/index.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('@uibit/read-time');
+  }
+});

package/dist/frameworks/preact/index.d.ts

@@ -0,0 +1,14 @@
+import type { JSX } from 'preact';
+import type { ReadTime as HTMLElementClass } from '@uibit/read-time';
+import '@uibit/read-time';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-read-time': JSX.HTMLAttributes<HTMLElementClass> & {
+      wpm?: number;
+      showIcon?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

@@ -0,0 +1,10 @@
+import { component$, Slot } from '@builder.io/qwik';
+import '@uibit/read-time';
+
+export const ReadTime = component$<any>((props) => {
+  return (
+    <uibit-read-time {...props}>
+      <Slot />
+    </uibit-read-time>
+  );
+});

package/dist/frameworks/react/index.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { ReadTime as HTMLElementClass } from '@uibit/read-time';
+import '@uibit/read-time';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-read-time': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      wpm?: number;
+      showIcon?: boolean;
+        };
+      }
+    }
+  }
+}

package/dist/frameworks/solid/index.d.ts

@@ -0,0 +1,15 @@
+import type { JSX } from 'solid-js';
+import type { ReadTime as HTMLElementClass } from '@uibit/read-time';
+import '@uibit/read-time';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-read-time': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              wpm?: number;
+      showIcon?: boolean;
+
+      };
+    }
+  }
+}

package/dist/frameworks/stencil/index.d.ts

@@ -0,0 +1,13 @@
+import type { ReadTime as HTMLElementClass } from '@uibit/read-time';
+import '@uibit/read-time';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-read-time': HTMLElementClass & {
+    wpm?: number;
+    showIcon?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import '@uibit/read-time';
+  import type { ReadTime as HTMLElementClass } from '@uibit/read-time';
+  
+  let {
+    wpm = undefined,
+      showIcon = undefined,
+      timer = undefined,
+      children
+  } = $props<{
+    children?: any;
+    wpm?: number;
+    showIcon?: boolean;
+    timer?: import('svelte').Snippet;
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && wpm !== undefined) {
+      elementRef.wpm = wpm;
+    }
+    if (elementRef && showIcon !== undefined) {
+      elementRef.showIcon = showIcon;
+    }
+  });
+  
+</script>
+
+<uibit-read-time bind:this={elementRef} {...$$restProps}>
+  {#if timer}
+    <div slot="timer">
+      {@render timer()}
+    </div>
+  {/if}
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-read-time>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,23 @@
+import { defineComponent, h } from 'vue';
+import type { ReadTime as HTMLElementClass } from '@uibit/read-time';
+import '@uibit/read-time';
+
+export const ReadTime = defineComponent({
+  name: 'ReadTime',
+  props: {
+    wpm: { type: [String, Number, Boolean, Array, Object] as any },
+    showIcon: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: [],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+
+
+      return h('uibit-read-time', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default, ReadTime } from './read-time';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAChD,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default, ReadTime } from './read-time';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAChD,cAAc,SAAS,CAAC"}

package/dist/read-time.d.ts

@@ -0,0 +1,36 @@
+import { UIBitElement } from '@uibit/core';
+/**
+ * Analyzes the word count of its slotted content and renders a reading-time
+ * badge. The calculation happens inside the shadow DOM via a slot
+ * change observer — no backend metadata required.
+ *
+ * Place your HTML content in the default slot. The component counts only text
+ * nodes, ignoring markup and hidden elements.
+ *
+ * @slot - The content whose text will be measured
+ * @slot timer - Optional named slot to position or override the read-time label/badge
+ *
+ * @cssprop [--uibit-read-time-font-size=0.8125rem] - Badge font size
+ * @cssprop [--uibit-read-time-font-weight=500] - Badge font weight
+ * @cssprop [--uibit-read-time-color=#6b7280] - Badge text color
+ * @cssprop [--uibit-read-time-font-family=inherit] - Badge font family
+ * @cssprop [--uibit-read-time-gap=0.375rem] - Gap between icon and label
+ * @cssprop [--uibit-read-time-icon-size=0.875rem] - Size of the clock icon
+ * @cssprop [--uibit-read-time-icon-color=currentColor] - Color of the clock icon
+ */
+export declare class ReadTime extends UIBitElement {
+    static styles: import("lit").CSSResult;
+    /** Average reading speed in words per minute. */
+    wpm: number;
+    /** Show the clock icon before the label. */
+    showIcon: boolean;
+    private _label;
+    private _slot?;
+    private _timerSlot?;
+    firstUpdated(): void;
+    private _calculate;
+    private _extractText;
+    render(): import("lit").TemplateResult<1>;
+}
+export default ReadTime;
+//# sourceMappingURL=read-time.d.ts.map

package/dist/read-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"read-time.d.ts","sourceRoot":"","sources":["../src/read-time.ts"],"names":[],"mappings":"AACA,OAAO,EAAsC,YAAY,EAAY,MAAM,aAAa,CAAC;AAKzF;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,QAAS,SAAQ,YAAY;IACxC,MAAM,CAAC,MAAM,0BAAU;IAEvB,iDAAiD;IACH,GAAG,SAAO;IACxD,4CAA4C;IACS,QAAQ,UAAQ;IAE5D,OAAO,CAAC,MAAM,CAAM;IAE7B,OAAO,CAAC,KAAK,CAAC,CAAkB;IAChC,OAAO,CAAC,UAAU,CAAC,CAAkB;IAErC,YAAY,SAQX;IAED,OAAO,CAAC,UAAU;IA0ClB,OAAO,CAAC,YAAY;IAkBpB,MAAM,oCAUL;CACF;eAEc,QAAQ"}

package/dist/read-time.js

@@ -0,0 +1,133 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { customElement, fromLucide, getIcon, UIBitElement, msg, str } from '@uibit/core';
+import { Clock } from 'lucide';
+import { property, state } from 'lit/decorators.js';
+import { styles } from './styles';
+/**
+ * Analyzes the word count of its slotted content and renders a reading-time
+ * badge. The calculation happens inside the shadow DOM via a slot
+ * change observer — no backend metadata required.
+ *
+ * Place your HTML content in the default slot. The component counts only text
+ * nodes, ignoring markup and hidden elements.
+ *
+ * @slot - The content whose text will be measured
+ * @slot timer - Optional named slot to position or override the read-time label/badge
+ *
+ * @cssprop [--uibit-read-time-font-size=0.8125rem] - Badge font size
+ * @cssprop [--uibit-read-time-font-weight=500] - Badge font weight
+ * @cssprop [--uibit-read-time-color=#6b7280] - Badge text color
+ * @cssprop [--uibit-read-time-font-family=inherit] - Badge font family
+ * @cssprop [--uibit-read-time-gap=0.375rem] - Gap between icon and label
+ * @cssprop [--uibit-read-time-icon-size=0.875rem] - Size of the clock icon
+ * @cssprop [--uibit-read-time-icon-color=currentColor] - Color of the clock icon
+ */
+let ReadTime = class ReadTime extends UIBitElement {
+    constructor() {
+        super(...arguments);
+        /** Average reading speed in words per minute. */
+        this.wpm = 238;
+        /** Show the clock icon before the label. */
+        this.showIcon = true;
+        this._label = '';
+    }
+    static { this.styles = styles; }
+    firstUpdated() {
+        this._slot = this.shadowRoot?.querySelector('slot:not([name])');
+        this._slot?.addEventListener('slotchange', () => this._calculate());
+        this._timerSlot = this.shadowRoot?.querySelector('slot[name="timer"]');
+        this._timerSlot?.addEventListener('slotchange', () => this._calculate());
+        this._calculate();
+    }
+    _calculate() {
+        if (!this._slot)
+            return;
+        const assigned = this._slot.assignedNodes({ flatten: true });
+        let text = '';
+        for (const node of assigned) {
+            text += this._extractText(node);
+        }
+        const words = text.trim().split(/\s+/).filter(Boolean).length;
+        const minutes = Math.ceil(words / this.wpm);
+        const timeStr = minutes < 1 ? msg('less than 1 min') : msg(str `${minutes} min`);
+        const defaultLabel = minutes < 1 ? msg('Less than 1 min read') : msg(str `${minutes} min read`);
+        this._label = defaultLabel;
+        // Update any slotted elements inside slot="timer"
+        if (this._timerSlot) {
+            const assignedTimer = this._timerSlot.assignedElements({ flatten: true });
+            for (const el of assignedTimer) {
+                let template = el.getAttribute('data-template');
+                if (template === null) {
+                    const rawText = el.textContent || '';
+                    if (rawText.includes('{time}')) {
+                        template = rawText;
+                        el.setAttribute('data-template', template);
+                    }
+                    else {
+                        template = '';
+                        el.setAttribute('data-template', '');
+                    }
+                }
+                if (template) {
+                    el.textContent = template.replace('{time}', timeStr);
+                }
+                else if (!el.textContent || el.textContent.trim() === '' || el.hasAttribute('data-auto-update')) {
+                    el.textContent = this._label;
+                    el.setAttribute('data-auto-update', '');
+                }
+            }
+        }
+        this.dispatchCustomEvent('read-time-change', { words, minutes });
+    }
+    _extractText(node) {
+        if (node.nodeType === Node.TEXT_NODE)
+            return node.textContent || '';
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            // Skip the timer slot itself if it happens to be nested or queried
+            if (el.getAttribute('slot') === 'timer')
+                return '';
+            const style = window.getComputedStyle(el);
+            if (style.display === 'none' || style.visibility === 'hidden')
+                return '';
+            let t = '';
+            for (const child of Array.from(el.childNodes)) {
+                t += this._extractText(child);
+            }
+            return t;
+        }
+        return '';
+    }
+    render() {
+        return html `
+      <slot name="timer">
+        <div class="timer" part="timer">
+          ${this.showIcon ? html `<span class="icon" part="icon">${getIcon('clock', 14, fromLucide(Clock))}</span>` : ''}
+          <span class="label" part="label">${this._label}</span>
+        </div>
+      </slot>
+      <slot></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number, attribute: 'wpm' })
+], ReadTime.prototype, "wpm", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-icon' })
+], ReadTime.prototype, "showIcon", void 0);
+__decorate([
+    state()
+], ReadTime.prototype, "_label", void 0);
+ReadTime = __decorate([
+    customElement('uibit-read-time')
+], ReadTime);
+export { ReadTime };
+export default ReadTime;
+//# sourceMappingURL=read-time.js.map

package/dist/read-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"read-time.js","sourceRoot":"","sources":["../src/read-time.ts"],"names":[],"mappings":"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"}

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiClB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,36 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    font-family: var(--uibit-read-time-font-family, inherit);
+  }
+
+  .timer {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--uibit-read-time-gap, 0.375rem);
+    font-size: var(--uibit-read-time-font-size, var(--uibit-font-size-sm, 0.8125rem));
+    font-weight: var(--uibit-read-time-font-weight, var(--uibit-font-weight-medium, 500));
+    color: var(--uibit-read-time-color, #6b7280);
+    line-height: var(--uibit-line-height-normal, 1.5);
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--uibit-read-time-icon-color, currentColor);
+    width: var(--uibit-read-time-icon-size, 0.875rem);
+    height: var(--uibit-read-time-icon-size, 0.875rem);
+  }
+
+  .icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .label {
+    white-space: nowrap;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCxB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type ReadTime from './read-time';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-read-time': ReadTime;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,aAAa,CAAC;AAExC,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,QAAQ,CAAC;KAC/B;CACA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@uibit/read-time",
+  "version": "0.1.0",
+  "description": "Text-analyzer badge that scans the word count of its slotted content and outputs an estimated reading time string. No backend metadata required — works directly in any CMS template.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./custom-elements.json": "./custom-elements.json",
+    "./react": "./dist/frameworks/react/index.d.ts",
+    "./vue": "./dist/frameworks/vue/index.ts",
+    "./svelte": "./dist/frameworks/svelte/index.svelte",
+    "./angular": "./dist/frameworks/angular/index.ts",
+    "./solid": "./dist/frameworks/solid/index.d.ts",
+    "./astro": "./dist/frameworks/astro/index.astro",
+    "./qwik": "./dist/frameworks/qwik/index.tsx",
+    "./nuxt": "./dist/frameworks/nuxt/index.ts",
+    "./preact": "./dist/frameworks/preact/index.d.ts",
+    "./stencil": "./dist/frameworks/stencil/index.d.ts"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "custom-elements.json"
+  ],
+  "keywords": [
+    "reading-time",
+    "text-analysis",
+    "badge",
+    "cms",
+    "web-component",
+    "lit"
+  ],
+  "author": "Jonathan Rawlings",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/components/read-time"
+  },
+  "dependencies": {
+    "lucide": "^1.24.0",
+    "@uibit/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.43",
+    "lit": "^3.3.3",
+    "typescript": "7.0.2",
+    "@uibit/codegen": "0.1.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "react": ">=18",
+    "vue": ">=3",
+    "svelte": ">=4 || ^5",
+    "@angular/core": ">=14"
+  },
+  "customElements": "custom-elements.json",
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    }
+  },
+  "uibit": {
+    "id": "read-time",
+    "title": "Read Time",
+    "category": "Text",
+    "tagName": "uibit-read-time"
+  },
+  "scripts": {
+    "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
+    "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
+    "typecheck": "tsc --noEmit"
+  }
+}