@ghostly-ui/core 0.2.0

package/README.md

@@ -0,0 +1,84 @@
+# @ghostly-ui/core
+
+CSS-first skeleton loading engine. Zero dependencies. Framework-agnostic.
+
+> Your component IS the skeleton. Ghostly uses CSS to hide text and images, replacing them with animated placeholders -- preserving the exact same layout.
+
+## Install
+
+```bash
+npm install @ghostly-ui/core
+```
+
+## Quick Start
+
+Import the CSS and add `data-ghostly` to any container:
+
+```css
+@import '@ghostly-ui/core/css';
+```
+
+```html
+<div data-ghostly="shimmer">
+  <h2>This becomes a skeleton</h2>
+  <p>So does this</p>
+  <img src="photo.jpg" />
+</div>
+```
+
+Remove the attribute to show real content. That's it.
+
+## Features
+
+- **3 animations** -- shimmer, pulse, wave (all pure CSS)
+- **Dark mode** -- auto-detects via `.dark`, `data-theme="dark"`, or `prefers-color-scheme`
+- **Accessible** -- `prefers-reduced-motion: reduce` disables animations
+- **Zero specificity** -- uses `:where()` selectors, easy to override
+- **Tiny** -- ~2KB gzipped, zero dependencies
+
+## CSS Custom Properties
+
+```css
+:root {
+  --ghostly-color: hsl(220 13% 87%);   /* skeleton base color */
+  --ghostly-shine: hsl(220 13% 94%);   /* shimmer highlight */
+  --ghostly-radius: 4px;                /* border radius */
+  --ghostly-speed: 1.5s;                /* animation duration */
+  --ghostly-transition: 0.3s;           /* fade-out transition */
+}
+```
+
+## Data Attributes
+
+| Attribute | Description |
+|-----------|-------------|
+| `data-ghostly="shimmer\|pulse\|wave"` | Activate skeleton on a container |
+| `data-ghostly-ignore` | Exclude element from skeleton effect |
+| `data-ghostly-lines="1-8"` | Control skeleton line count for text |
+| `data-ghostly-ratio="16/9"` | Set aspect ratio for images |
+| `data-ghostly-smooth` | Enable fade-out transition |
+
+## Tailwind CSS Plugin
+
+```js
+// tailwind.config.js
+import ghostly from '@ghostly-ui/core/tailwind'
+
+export default {
+  plugins: [ghostly],
+}
+```
+
+Utilities: `ghostly-radius-*`, `ghostly-speed-*`, `ghostly-color-[...]`, `ghostly-shine-[...]`, `ghostly:` variant.
+
+## Framework Adapters
+
+- **[@ghostly-ui/react](https://www.npmjs.com/package/@ghostly-ui/react)** -- React components with `<Ghostly>`, `<GhostlyList>`, `<GhostlySuspense>`
+
+## Documentation
+
+Full docs at [ghostly.adanulissess.com](https://ghostly.adanulissess.com)
+
+## License
+
+MIT

package/dist/ghostly.css

@@ -0,0 +1,329 @@
+/* ============================================================
+   GHOSTLY — Zero-config skeleton loaders
+
+   Usage: add data-ghostly="shimmer|pulse|wave" to any container.
+   All leaf elements inside become skeleton blocks automatically.
+   ============================================================ */
+
+/* --- Custom properties (override these to customize) --- */
+
+:root {
+  --ghostly-color: hsl(220 13% 87%);
+  --ghostly-shine: hsl(220 13% 94%);
+  --ghostly-radius: 4px;
+  --ghostly-speed: 1.5s;
+  --ghostly-transition: 0.3s;
+}
+
+/* --- Dark mode (automatic) --- */
+
+.dark,
+[data-theme='dark'] {
+  --ghostly-color: hsl(220 13% 18%);
+  --ghostly-shine: hsl(220 13% 25%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not([data-theme='light']) {
+    --ghostly-color: hsl(220 13% 18%);
+    --ghostly-shine: hsl(220 13% 25%);
+  }
+}
+
+/* ============================================================
+   1. SKELETON TARGET — shared base for all skeleton elements
+   ============================================================ */
+
+/* All targetable elements inside a ghostly container */
+[data-ghostly] :where(
+  h1, h2, h3, h4, h5, h6,
+  p, span, a, li, td, th, dt, dd,
+  label, legend, figcaption, caption, summary,
+  blockquote, cite, q, em, strong, small, mark, code, pre,
+  button, input, textarea, select, option,
+  fieldset, dialog, details, address,
+  time, abbr, sub, sup, del, ins,
+  img, svg, video, canvas, picture, iframe
+) {
+  --_ghostly-target: 1;
+}
+
+/* ============================================================
+   2. CONTAINER — Blocks interaction while loading
+   ============================================================ */
+
+[data-ghostly] {
+  pointer-events: none;
+  user-select: none;
+  cursor: default;
+}
+
+/* ============================================================
+   3. TEXT ELEMENTS — Become opaque skeleton blocks
+   ============================================================ */
+
+[data-ghostly] :where(
+  h1, h2, h3, h4, h5, h6,
+  p, span, a, li, td, th, dt, dd,
+  label, legend, figcaption, caption, summary,
+  blockquote, cite, q, em, strong, small, mark, code, pre,
+  button, input, textarea, select, option,
+  fieldset, dialog, details, address,
+  time, abbr, sub, sup, del, ins
+) {
+  color: transparent !important;
+  background-color: var(--ghostly-color) !important;
+  background-image: none !important;
+  border-radius: var(--ghostly-radius) !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  text-decoration: none !important;
+  outline: none !important;
+  min-height: 1em;
+  min-width: 2rem;
+}
+
+/* Headings get proportional min-height */
+[data-ghostly] :where(h1) { min-height: 1.75em; min-width: 40%; }
+[data-ghostly] :where(h2) { min-height: 1.5em; min-width: 50%; }
+[data-ghostly] :where(h3) { min-height: 1.3em; min-width: 55%; }
+[data-ghostly] :where(h4, h5, h6) { min-height: 1.15em; min-width: 45%; }
+
+/* Paragraphs simulate multi-line text */
+[data-ghostly] :where(p) { min-height: 3em; min-width: 80%; }
+
+/* Code blocks need more height */
+[data-ghostly] :where(pre) { min-height: 5em; min-width: 100%; }
+
+/* Inputs keep their shape */
+[data-ghostly] :where(input, textarea, select) {
+  min-height: 2.5rem;
+  min-width: 6rem;
+}
+
+/* Buttons keep their shape */
+[data-ghostly] :where(button) {
+  min-height: 2.25rem;
+  min-width: 5rem;
+}
+
+/* ============================================================
+   4. CUSTOM LINE COUNT — data-ghostly-lines="N"
+   ============================================================ */
+
+[data-ghostly] :where([data-ghostly-lines="1"]) { min-height: 1em; }
+[data-ghostly] :where([data-ghostly-lines="2"]) { min-height: 2em; }
+[data-ghostly] :where([data-ghostly-lines="3"]) { min-height: 3em; }
+[data-ghostly] :where([data-ghostly-lines="4"]) { min-height: 4em; }
+[data-ghostly] :where([data-ghostly-lines="5"]) { min-height: 5em; }
+[data-ghostly] :where([data-ghostly-lines="6"]) { min-height: 6em; }
+[data-ghostly] :where([data-ghostly-lines="7"]) { min-height: 7em; }
+[data-ghostly] :where([data-ghostly-lines="8"]) { min-height: 8em; }
+
+/* ============================================================
+   5. MEDIA ELEMENTS — Become solid skeleton blocks
+   ============================================================ */
+
+[data-ghostly] :where(img, svg, video, canvas, picture, iframe) {
+  color: transparent !important;
+  background-color: var(--ghostly-color) !important;
+  border-radius: var(--ghostly-radius) !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+
+/* Hide actual content (images, video frames) */
+[data-ghostly] :where(img) {
+  object-position: -9999px;
+}
+
+[data-ghostly] :where(video, iframe) {
+  opacity: 0;
+  background-color: var(--ghostly-color) !important;
+}
+
+/* Images without explicit dimensions — use aspect-ratio */
+[data-ghostly] :where(img:not([width]):not([style*="width"]), picture:not([width])) {
+  aspect-ratio: 16/9;
+  width: 100%;
+}
+
+/* Custom aspect ratio via data attribute */
+[data-ghostly] :where([data-ghostly-ratio="1/1"]) { aspect-ratio: 1/1 !important; }
+[data-ghostly] :where([data-ghostly-ratio="4/3"]) { aspect-ratio: 4/3 !important; }
+[data-ghostly] :where([data-ghostly-ratio="16/9"]) { aspect-ratio: 16/9 !important; }
+[data-ghostly] :where([data-ghostly-ratio="21/9"]) { aspect-ratio: 21/9 !important; }
+[data-ghostly] :where([data-ghostly-ratio="3/4"]) { aspect-ratio: 3/4 !important; }
+[data-ghostly] :where([data-ghostly-ratio="9/16"]) { aspect-ratio: 9/16 !important; }
+
+/* SVG icons (typically small) */
+[data-ghostly] :where(svg) {
+  min-height: 1.5rem;
+  min-width: 1.5rem;
+}
+
+/* ============================================================
+   6. DECORATIVE — Strip visual noise
+   ============================================================ */
+
+[data-ghostly] :where(hr) {
+  border-color: var(--ghostly-color) !important;
+}
+
+[data-ghostly] :where(
+  [class*="badge"],
+  [class*="chip"],
+  [class*="tag"],
+  [class*="avatar"]
+) {
+  color: transparent !important;
+  background-color: var(--ghostly-color) !important;
+  background-image: none !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+
+/* ============================================================
+   7. EXCLUSIONS — data-ghostly-ignore restores original styles
+   ============================================================ */
+
+[data-ghostly] [data-ghostly-ignore],
+[data-ghostly] [data-ghostly-ignore] * {
+  color: inherit !important;
+  background-color: inherit !important;
+  background-image: initial !important;
+  border-color: inherit !important;
+  box-shadow: initial !important;
+  visibility: visible !important;
+  pointer-events: auto;
+  user-select: auto;
+  min-height: initial;
+  min-width: initial;
+  animation: none !important;
+}
+
+/* ============================================================
+   8. ANIMATIONS — Applied via --_ghostly-target marker
+   ============================================================ */
+
+/* --- Shimmer — gradient sweep left to right --- */
+
+[data-ghostly='shimmer'] :where([style*="--_ghostly-target"]),
+[data-ghostly='shimmer'] :where(
+  h1, h2, h3, h4, h5, h6,
+  p, span, a, li, td, th, dt, dd,
+  label, legend, figcaption, caption, summary,
+  blockquote, cite, q, em, strong, small, mark, code, pre,
+  button, input, textarea, select, option,
+  fieldset, dialog, details, address,
+  time, abbr, sub, sup, del, ins,
+  img, svg, video, canvas, picture, iframe
+) {
+  background: linear-gradient(
+    90deg,
+    var(--ghostly-color) 0%,
+    var(--ghostly-color) 33%,
+    var(--ghostly-shine) 50%,
+    var(--ghostly-color) 66%,
+    var(--ghostly-color) 100%
+  ) !important;
+  background-size: 300% 100% !important;
+  animation: ghostly-shimmer var(--ghostly-speed) ease-in-out infinite !important;
+}
+
+@keyframes ghostly-shimmer {
+  0% { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+
+/* --- Pulse — opacity fade in/out --- */
+
+[data-ghostly='pulse'] :where(
+  h1, h2, h3, h4, h5, h6,
+  p, span, a, li, td, th, dt, dd,
+  label, legend, figcaption, caption, summary,
+  blockquote, cite, q, em, strong, small, mark, code, pre,
+  button, input, textarea, select, option,
+  fieldset, dialog, details, address,
+  time, abbr, sub, sup, del, ins,
+  img, svg, video, canvas, picture, iframe
+) {
+  animation: ghostly-pulse var(--ghostly-speed) ease-in-out infinite !important;
+}
+
+@keyframes ghostly-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* --- Wave — cascading pulse with stagger --- */
+
+[data-ghostly='wave'] :where(
+  h1, h2, h3, h4, h5, h6,
+  p, span, a, li, td, th, dt, dd,
+  label, legend, figcaption, caption, summary,
+  blockquote, cite, q, em, strong, small, mark, code, pre,
+  button, input, textarea, select, option,
+  fieldset, dialog, details, address,
+  time, abbr, sub, sup, del, ins,
+  img, svg, video, canvas, picture, iframe
+) {
+  animation: ghostly-wave var(--ghostly-speed) ease-in-out infinite !important;
+}
+
+@keyframes ghostly-wave {
+  0% { opacity: 1; }
+  25% { opacity: 0.3; }
+  50% { opacity: 0.8; }
+  75% { opacity: 0.4; }
+  100% { opacity: 1; }
+}
+
+/* Stagger direct children for cascading effect */
+[data-ghostly='wave'] > :nth-child(1) { animation-delay: 0ms !important; }
+[data-ghostly='wave'] > :nth-child(2) { animation-delay: 80ms !important; }
+[data-ghostly='wave'] > :nth-child(3) { animation-delay: 160ms !important; }
+[data-ghostly='wave'] > :nth-child(4) { animation-delay: 240ms !important; }
+[data-ghostly='wave'] > :nth-child(5) { animation-delay: 320ms !important; }
+[data-ghostly='wave'] > :nth-child(6) { animation-delay: 400ms !important; }
+[data-ghostly='wave'] > :nth-child(7) { animation-delay: 480ms !important; }
+[data-ghostly='wave'] > :nth-child(8) { animation-delay: 560ms !important; }
+[data-ghostly='wave'] > :nth-child(9) { animation-delay: 640ms !important; }
+[data-ghostly='wave'] > :nth-child(10) { animation-delay: 720ms !important; }
+[data-ghostly='wave'] > :nth-child(11) { animation-delay: 800ms !important; }
+[data-ghostly='wave'] > :nth-child(12) { animation-delay: 880ms !important; }
+[data-ghostly='wave'] > :nth-child(n+13) { animation-delay: 960ms !important; }
+
+/* ============================================================
+   9. SMOOTH TRANSITION — fade out when loading ends
+   ============================================================ */
+
+[data-ghostly-smooth] :where(
+  h1, h2, h3, h4, h5, h6,
+  p, span, a, li, td, th, dt, dd,
+  label, legend, figcaption, caption, summary,
+  blockquote, cite, q, em, strong, small, mark, code, pre,
+  button, input, textarea, select, option,
+  fieldset, dialog, details, address,
+  time, abbr, sub, sup, del, ins,
+  img, svg, video, canvas, picture, iframe
+) {
+  transition:
+    color var(--ghostly-transition) ease-out,
+    background-color var(--ghostly-transition) ease-out,
+    background-image var(--ghostly-transition) ease-out,
+    opacity var(--ghostly-transition) ease-out;
+}
+
+/* ============================================================
+   10. ACCESSIBILITY
+   ============================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  [data-ghostly] *,
+  [data-ghostly] *::before,
+  [data-ghostly] *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+}

package/dist/index.cjs

@@ -0,0 +1,84 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CSS_VARS: () => CSS_VARS,
+  RADIUS_MAP: () => RADIUS_MAP,
+  SPEED_MAP: () => SPEED_MAP,
+  VALID_ANIMATIONS: () => VALID_ANIMATIONS,
+  VALID_RADII: () => VALID_RADII,
+  VALID_SPEEDS: () => VALID_SPEEDS,
+  validateGhostlyProps: () => validateGhostlyProps
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/types.ts
+var CSS_VARS = {
+  color: "--ghostly-color",
+  shine: "--ghostly-shine",
+  radius: "--ghostly-radius",
+  speed: "--ghostly-speed"
+};
+var RADIUS_MAP = {
+  none: "0px",
+  xs: "2px",
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  full: "9999px"
+};
+var SPEED_MAP = {
+  slow: "2s",
+  normal: "1.5s",
+  fast: "0.8s"
+};
+var VALID_ANIMATIONS = ["shimmer", "pulse", "wave", "none"];
+var VALID_RADII = ["none", "xs", "sm", "md", "lg", "full"];
+var VALID_SPEEDS = ["slow", "normal", "fast"];
+function validateGhostlyProps(component, props) {
+  if (process.env.NODE_ENV === "production") return;
+  if (props.animation && !VALID_ANIMATIONS.includes(props.animation)) {
+    console.warn(
+      `[Ghostly] <${component}> received invalid animation="${props.animation}". Valid values: ${VALID_ANIMATIONS.join(", ")}`
+    );
+  }
+  if (props.radius && !VALID_RADII.includes(props.radius)) {
+    console.warn(
+      `[Ghostly] <${component}> received invalid radius="${props.radius}". Valid values: ${VALID_RADII.join(", ")}`
+    );
+  }
+  if (props.speed && !VALID_SPEEDS.includes(props.speed)) {
+    console.warn(
+      `[Ghostly] <${component}> received invalid speed="${props.speed}". Valid values: ${VALID_SPEEDS.join(", ")}`
+    );
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CSS_VARS,
+  RADIUS_MAP,
+  SPEED_MAP,
+  VALID_ANIMATIONS,
+  VALID_RADII,
+  VALID_SPEEDS,
+  validateGhostlyProps
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/types.ts"],"sourcesContent":["export type { GhostlyAnimation, GhostlyRadius, GhostlySpeed, GhostlyConfig } from './types'\nexport { CSS_VARS, RADIUS_MAP, SPEED_MAP, VALID_ANIMATIONS, VALID_RADII, VALID_SPEEDS, validateGhostlyProps } from './types'\n","export type GhostlyAnimation = 'shimmer' | 'pulse' | 'wave' | 'none'\n\nexport type GhostlyRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full'\n\nexport type GhostlySpeed = 'slow' | 'normal' | 'fast'\n\nexport interface GhostlyConfig {\n  /** Animation style. Default: 'shimmer' */\n  animation?: GhostlyAnimation\n  /** Border radius for skeleton blocks. Default: 'sm' */\n  radius?: GhostlyRadius\n  /** Animation speed. Default: 'normal' */\n  speed?: GhostlySpeed\n  /** Custom skeleton base color (any CSS color value) */\n  color?: string\n  /** Custom shimmer highlight color (any CSS color value) */\n  shine?: string\n}\n\n/** CSS custom property names used by Ghostly */\nexport const CSS_VARS = {\n  color: '--ghostly-color',\n  shine: '--ghostly-shine',\n  radius: '--ghostly-radius',\n  speed: '--ghostly-speed',\n} as const\n\n/** Maps radius prop to CSS value */\nexport const RADIUS_MAP: Record<GhostlyRadius, string> = {\n  none: '0px',\n  xs: '2px',\n  sm: '4px',\n  md: '8px',\n  lg: '12px',\n  full: '9999px',\n}\n\n/** Maps speed prop to CSS duration */\nexport const SPEED_MAP: Record<GhostlySpeed, string> = {\n  slow: '2s',\n  normal: '1.5s',\n  fast: '0.8s',\n}\n\n/** Valid values for each prop (used for dev validation) */\nexport const VALID_ANIMATIONS: readonly string[] = ['shimmer', 'pulse', 'wave', 'none']\nexport const VALID_RADII: readonly string[] = ['none', 'xs', 'sm', 'md', 'lg', 'full']\nexport const VALID_SPEEDS: readonly string[] = ['slow', 'normal', 'fast']\n\n/**\n * Validates Ghostly config props in development.\n * No-op in production builds (tree-shaken via process.env.NODE_ENV check).\n */\nexport function validateGhostlyProps(\n  component: string,\n  props: Partial<GhostlyConfig>,\n): void {\n  if (process.env.NODE_ENV === 'production') return\n\n  if (props.animation && !VALID_ANIMATIONS.includes(props.animation)) {\n    console.warn(\n      `[Ghostly] <${component}> received invalid animation=\"${props.animation}\". ` +\n      `Valid values: ${VALID_ANIMATIONS.join(', ')}`,\n    )\n  }\n  if (props.radius && !VALID_RADII.includes(props.radius)) {\n    console.warn(\n      `[Ghostly] <${component}> received invalid radius=\"${props.radius}\". ` +\n      `Valid values: ${VALID_RADII.join(', ')}`,\n    )\n  }\n  if (props.speed && !VALID_SPEEDS.includes(props.speed)) {\n    console.warn(\n      `[Ghostly] <${component}> received invalid speed=\"${props.speed}\". ` +\n      `Valid values: ${VALID_SPEEDS.join(', ')}`,\n    )\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACoBO,IAAM,WAAW;AAAA,EACtB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAGO,IAAM,aAA4C;AAAA,EACvD,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAGO,IAAM,YAA0C;AAAA,EACrD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AACR;AAGO,IAAM,mBAAsC,CAAC,WAAW,SAAS,QAAQ,MAAM;AAC/E,IAAM,cAAiC,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM,MAAM;AAC9E,IAAM,eAAkC,CAAC,QAAQ,UAAU,MAAM;AAMjE,SAAS,qBACd,WACA,OACM;AACN,MAAI,QAAQ,IAAI,aAAa,aAAc;AAE3C,MAAI,MAAM,aAAa,CAAC,iBAAiB,SAAS,MAAM,SAAS,GAAG;AAClE,YAAQ;AAAA,MACN,cAAc,SAAS,iCAAiC,MAAM,SAAS,oBACtD,iBAAiB,KAAK,IAAI,CAAC;AAAA,IAC9C;AAAA,EACF;AACA,MAAI,MAAM,UAAU,CAAC,YAAY,SAAS,MAAM,MAAM,GAAG;AACvD,YAAQ;AAAA,MACN,cAAc,SAAS,8BAA8B,MAAM,MAAM,oBAChD,YAAY,KAAK,IAAI,CAAC;AAAA,IACzC;AAAA,EACF;AACA,MAAI,MAAM,SAAS,CAAC,aAAa,SAAS,MAAM,KAAK,GAAG;AACtD,YAAQ;AAAA,MACN,cAAc,SAAS,6BAA6B,MAAM,KAAK,oBAC9C,aAAa,KAAK,IAAI,CAAC;AAAA,IAC1C;AAAA,EACF;AACF;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,37 @@
+type GhostlyAnimation = 'shimmer' | 'pulse' | 'wave' | 'none';
+type GhostlyRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';
+type GhostlySpeed = 'slow' | 'normal' | 'fast';
+interface GhostlyConfig {
+    /** Animation style. Default: 'shimmer' */
+    animation?: GhostlyAnimation;
+    /** Border radius for skeleton blocks. Default: 'sm' */
+    radius?: GhostlyRadius;
+    /** Animation speed. Default: 'normal' */
+    speed?: GhostlySpeed;
+    /** Custom skeleton base color (any CSS color value) */
+    color?: string;
+    /** Custom shimmer highlight color (any CSS color value) */
+    shine?: string;
+}
+/** CSS custom property names used by Ghostly */
+declare const CSS_VARS: {
+    readonly color: "--ghostly-color";
+    readonly shine: "--ghostly-shine";
+    readonly radius: "--ghostly-radius";
+    readonly speed: "--ghostly-speed";
+};
+/** Maps radius prop to CSS value */
+declare const RADIUS_MAP: Record<GhostlyRadius, string>;
+/** Maps speed prop to CSS duration */
+declare const SPEED_MAP: Record<GhostlySpeed, string>;
+/** Valid values for each prop (used for dev validation) */
+declare const VALID_ANIMATIONS: readonly string[];
+declare const VALID_RADII: readonly string[];
+declare const VALID_SPEEDS: readonly string[];
+/**
+ * Validates Ghostly config props in development.
+ * No-op in production builds (tree-shaken via process.env.NODE_ENV check).
+ */
+declare function validateGhostlyProps(component: string, props: Partial<GhostlyConfig>): void;
+
+export { CSS_VARS, type GhostlyAnimation, type GhostlyConfig, type GhostlyRadius, type GhostlySpeed, RADIUS_MAP, SPEED_MAP, VALID_ANIMATIONS, VALID_RADII, VALID_SPEEDS, validateGhostlyProps };

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+type GhostlyAnimation = 'shimmer' | 'pulse' | 'wave' | 'none';
+type GhostlyRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';
+type GhostlySpeed = 'slow' | 'normal' | 'fast';
+interface GhostlyConfig {
+    /** Animation style. Default: 'shimmer' */
+    animation?: GhostlyAnimation;
+    /** Border radius for skeleton blocks. Default: 'sm' */
+    radius?: GhostlyRadius;
+    /** Animation speed. Default: 'normal' */
+    speed?: GhostlySpeed;
+    /** Custom skeleton base color (any CSS color value) */
+    color?: string;
+    /** Custom shimmer highlight color (any CSS color value) */
+    shine?: string;
+}
+/** CSS custom property names used by Ghostly */
+declare const CSS_VARS: {
+    readonly color: "--ghostly-color";
+    readonly shine: "--ghostly-shine";
+    readonly radius: "--ghostly-radius";
+    readonly speed: "--ghostly-speed";
+};
+/** Maps radius prop to CSS value */
+declare const RADIUS_MAP: Record<GhostlyRadius, string>;
+/** Maps speed prop to CSS duration */
+declare const SPEED_MAP: Record<GhostlySpeed, string>;
+/** Valid values for each prop (used for dev validation) */
+declare const VALID_ANIMATIONS: readonly string[];
+declare const VALID_RADII: readonly string[];
+declare const VALID_SPEEDS: readonly string[];
+/**
+ * Validates Ghostly config props in development.
+ * No-op in production builds (tree-shaken via process.env.NODE_ENV check).
+ */
+declare function validateGhostlyProps(component: string, props: Partial<GhostlyConfig>): void;
+
+export { CSS_VARS, type GhostlyAnimation, type GhostlyConfig, type GhostlyRadius, type GhostlySpeed, RADIUS_MAP, SPEED_MAP, VALID_ANIMATIONS, VALID_RADII, VALID_SPEEDS, validateGhostlyProps };

package/dist/index.js

@@ -0,0 +1,51 @@
+// src/types.ts
+var CSS_VARS = {
+  color: "--ghostly-color",
+  shine: "--ghostly-shine",
+  radius: "--ghostly-radius",
+  speed: "--ghostly-speed"
+};
+var RADIUS_MAP = {
+  none: "0px",
+  xs: "2px",
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  full: "9999px"
+};
+var SPEED_MAP = {
+  slow: "2s",
+  normal: "1.5s",
+  fast: "0.8s"
+};
+var VALID_ANIMATIONS = ["shimmer", "pulse", "wave", "none"];
+var VALID_RADII = ["none", "xs", "sm", "md", "lg", "full"];
+var VALID_SPEEDS = ["slow", "normal", "fast"];
+function validateGhostlyProps(component, props) {
+  if (process.env.NODE_ENV === "production") return;
+  if (props.animation && !VALID_ANIMATIONS.includes(props.animation)) {
+    console.warn(
+      `[Ghostly] <${component}> received invalid animation="${props.animation}". Valid values: ${VALID_ANIMATIONS.join(", ")}`
+    );
+  }
+  if (props.radius && !VALID_RADII.includes(props.radius)) {
+    console.warn(
+      `[Ghostly] <${component}> received invalid radius="${props.radius}". Valid values: ${VALID_RADII.join(", ")}`
+    );
+  }
+  if (props.speed && !VALID_SPEEDS.includes(props.speed)) {
+    console.warn(
+      `[Ghostly] <${component}> received invalid speed="${props.speed}". Valid values: ${VALID_SPEEDS.join(", ")}`
+    );
+  }
+}
+export {
+  CSS_VARS,
+  RADIUS_MAP,
+  SPEED_MAP,
+  VALID_ANIMATIONS,
+  VALID_RADII,
+  VALID_SPEEDS,
+  validateGhostlyProps
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["export type GhostlyAnimation = 'shimmer' | 'pulse' | 'wave' | 'none'\n\nexport type GhostlyRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full'\n\nexport type GhostlySpeed = 'slow' | 'normal' | 'fast'\n\nexport interface GhostlyConfig {\n  /** Animation style. Default: 'shimmer' */\n  animation?: GhostlyAnimation\n  /** Border radius for skeleton blocks. Default: 'sm' */\n  radius?: GhostlyRadius\n  /** Animation speed. Default: 'normal' */\n  speed?: GhostlySpeed\n  /** Custom skeleton base color (any CSS color value) */\n  color?: string\n  /** Custom shimmer highlight color (any CSS color value) */\n  shine?: string\n}\n\n/** CSS custom property names used by Ghostly */\nexport const CSS_VARS = {\n  color: '--ghostly-color',\n  shine: '--ghostly-shine',\n  radius: '--ghostly-radius',\n  speed: '--ghostly-speed',\n} as const\n\n/** Maps radius prop to CSS value */\nexport const RADIUS_MAP: Record<GhostlyRadius, string> = {\n  none: '0px',\n  xs: '2px',\n  sm: '4px',\n  md: '8px',\n  lg: '12px',\n  full: '9999px',\n}\n\n/** Maps speed prop to CSS duration */\nexport const SPEED_MAP: Record<GhostlySpeed, string> = {\n  slow: '2s',\n  normal: '1.5s',\n  fast: '0.8s',\n}\n\n/** Valid values for each prop (used for dev validation) */\nexport const VALID_ANIMATIONS: readonly string[] = ['shimmer', 'pulse', 'wave', 'none']\nexport const VALID_RADII: readonly string[] = ['none', 'xs', 'sm', 'md', 'lg', 'full']\nexport const VALID_SPEEDS: readonly string[] = ['slow', 'normal', 'fast']\n\n/**\n * Validates Ghostly config props in development.\n * No-op in production builds (tree-shaken via process.env.NODE_ENV check).\n */\nexport function validateGhostlyProps(\n  component: string,\n  props: Partial<GhostlyConfig>,\n): void {\n  if (process.env.NODE_ENV === 'production') return\n\n  if (props.animation && !VALID_ANIMATIONS.includes(props.animation)) {\n    console.warn(\n      `[Ghostly] <${component}> received invalid animation=\"${props.animation}\". ` +\n      `Valid values: ${VALID_ANIMATIONS.join(', ')}`,\n    )\n  }\n  if (props.radius && !VALID_RADII.includes(props.radius)) {\n    console.warn(\n      `[Ghostly] <${component}> received invalid radius=\"${props.radius}\". ` +\n      `Valid values: ${VALID_RADII.join(', ')}`,\n    )\n  }\n  if (props.speed && !VALID_SPEEDS.includes(props.speed)) {\n    console.warn(\n      `[Ghostly] <${component}> received invalid speed=\"${props.speed}\". ` +\n      `Valid values: ${VALID_SPEEDS.join(', ')}`,\n    )\n  }\n}\n"],"mappings":";AAoBO,IAAM,WAAW;AAAA,EACtB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAGO,IAAM,aAA4C;AAAA,EACvD,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAGO,IAAM,YAA0C;AAAA,EACrD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AACR;AAGO,IAAM,mBAAsC,CAAC,WAAW,SAAS,QAAQ,MAAM;AAC/E,IAAM,cAAiC,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM,MAAM;AAC9E,IAAM,eAAkC,CAAC,QAAQ,UAAU,MAAM;AAMjE,SAAS,qBACd,WACA,OACM;AACN,MAAI,QAAQ,IAAI,aAAa,aAAc;AAE3C,MAAI,MAAM,aAAa,CAAC,iBAAiB,SAAS,MAAM,SAAS,GAAG;AAClE,YAAQ;AAAA,MACN,cAAc,SAAS,iCAAiC,MAAM,SAAS,oBACtD,iBAAiB,KAAK,IAAI,CAAC;AAAA,IAC9C;AAAA,EACF;AACA,MAAI,MAAM,UAAU,CAAC,YAAY,SAAS,MAAM,MAAM,GAAG;AACvD,YAAQ;AAAA,MACN,cAAc,SAAS,8BAA8B,MAAM,MAAM,oBAChD,YAAY,KAAK,IAAI,CAAC;AAAA,IACzC;AAAA,EACF;AACA,MAAI,MAAM,SAAS,CAAC,aAAa,SAAS,MAAM,KAAK,GAAG;AACtD,YAAQ;AAAA,MACN,cAAc,SAAS,6BAA6B,MAAM,KAAK,oBAC9C,aAAa,KAAK,IAAI,CAAC;AAAA,IAC1C;AAAA,EACF;AACF;","names":[]}

package/dist/tailwind.cjs

@@ -0,0 +1,61 @@
+"use strict";
+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/tailwind.ts
+var tailwind_exports = {};
+__export(tailwind_exports, {
+  default: () => tailwind_default
+});
+module.exports = __toCommonJS(tailwind_exports);
+var import_plugin = __toESM(require("tailwindcss/plugin"), 1);
+var tailwind_default = (0, import_plugin.default)(function ghostlyPlugin({ addUtilities, addVariant, matchUtilities }) {
+  addVariant("ghostly", "[data-ghostly] &");
+  addUtilities({
+    ".ghostly-radius-none": { "--ghostly-radius": "0px" },
+    ".ghostly-radius-xs": { "--ghostly-radius": "2px" },
+    ".ghostly-radius-sm": { "--ghostly-radius": "4px" },
+    ".ghostly-radius-md": { "--ghostly-radius": "8px" },
+    ".ghostly-radius-lg": { "--ghostly-radius": "12px" },
+    ".ghostly-radius-full": { "--ghostly-radius": "9999px" }
+  });
+  addUtilities({
+    ".ghostly-speed-slow": { "--ghostly-speed": "2s" },
+    ".ghostly-speed-normal": { "--ghostly-speed": "1.5s" },
+    ".ghostly-speed-fast": { "--ghostly-speed": "0.8s" }
+  });
+  matchUtilities(
+    { "ghostly-color": (value) => ({ "--ghostly-color": value }) },
+    { values: {}, type: ["color"] }
+  );
+  matchUtilities(
+    { "ghostly-shine": (value) => ({ "--ghostly-shine": value }) },
+    { values: {}, type: ["color"] }
+  );
+});
+//# sourceMappingURL=tailwind.cjs.map

package/dist/tailwind.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tailwind.ts"],"sourcesContent":["import plugin from 'tailwindcss/plugin'\n\n/**\n * Tailwind CSS plugin for Ghostly skeleton loaders.\n *\n * Adds utilities for configuring ghostly CSS variables\n * and a `ghostly:` variant for conditional skeleton styles.\n *\n * @example\n * ```js\n * // tailwind.config.js\n * import ghostly from '@ghostly-ui/core/tailwind'\n * export default { plugins: [ghostly] }\n * ```\n *\n * Usage in templates:\n * ```html\n * <div class=\"ghostly-radius-lg ghostly-speed-fast\">\n *   ...\n * </div>\n * ```\n */\nexport default plugin(function ghostlyPlugin({ addUtilities, addVariant, matchUtilities }) {\n  // Variant: `ghostly:` targets elements inside a ghostly container\n  addVariant('ghostly', '[data-ghostly] &')\n\n  // Radius utilities\n  addUtilities({\n    '.ghostly-radius-none': { '--ghostly-radius': '0px' },\n    '.ghostly-radius-xs': { '--ghostly-radius': '2px' },\n    '.ghostly-radius-sm': { '--ghostly-radius': '4px' },\n    '.ghostly-radius-md': { '--ghostly-radius': '8px' },\n    '.ghostly-radius-lg': { '--ghostly-radius': '12px' },\n    '.ghostly-radius-full': { '--ghostly-radius': '9999px' },\n  })\n\n  // Speed utilities\n  addUtilities({\n    '.ghostly-speed-slow': { '--ghostly-speed': '2s' },\n    '.ghostly-speed-normal': { '--ghostly-speed': '1.5s' },\n    '.ghostly-speed-fast': { '--ghostly-speed': '0.8s' },\n  })\n\n  // Color utilities (arbitrary value via matchUtilities)\n  matchUtilities(\n    { 'ghostly-color': (value: string) => ({ '--ghostly-color': value }) },\n    { values: {}, type: ['color'] },\n  )\n\n  matchUtilities(\n    { 'ghostly-shine': (value: string) => ({ '--ghostly-shine': value }) },\n    { values: {}, type: ['color'] },\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAmB;AAsBnB,IAAO,uBAAQ,cAAAA,SAAO,SAAS,cAAc,EAAE,cAAc,YAAY,eAAe,GAAG;AAEzF,aAAW,WAAW,kBAAkB;AAGxC,eAAa;AAAA,IACX,wBAAwB,EAAE,oBAAoB,MAAM;AAAA,IACpD,sBAAsB,EAAE,oBAAoB,MAAM;AAAA,IAClD,sBAAsB,EAAE,oBAAoB,MAAM;AAAA,IAClD,sBAAsB,EAAE,oBAAoB,MAAM;AAAA,IAClD,sBAAsB,EAAE,oBAAoB,OAAO;AAAA,IACnD,wBAAwB,EAAE,oBAAoB,SAAS;AAAA,EACzD,CAAC;AAGD,eAAa;AAAA,IACX,uBAAuB,EAAE,mBAAmB,KAAK;AAAA,IACjD,yBAAyB,EAAE,mBAAmB,OAAO;AAAA,IACrD,uBAAuB,EAAE,mBAAmB,OAAO;AAAA,EACrD,CAAC;AAGD;AAAA,IACE,EAAE,iBAAiB,CAAC,WAAmB,EAAE,mBAAmB,MAAM,GAAG;AAAA,IACrE,EAAE,QAAQ,CAAC,GAAG,MAAM,CAAC,OAAO,EAAE;AAAA,EAChC;AAEA;AAAA,IACE,EAAE,iBAAiB,CAAC,WAAmB,EAAE,mBAAmB,MAAM,GAAG;AAAA,IACrE,EAAE,QAAQ,CAAC,GAAG,MAAM,CAAC,OAAO,EAAE;AAAA,EAChC;AACF,CAAC;","names":["plugin"]}

package/dist/tailwind.d.cts

@@ -0,0 +1,148 @@
+import { N, P } from './resolve-config-QUZ9b-Gn.mjs';
+
+/**
+ * The source code for one or more nodes in the AST
+ *
+ * This generally corresponds to a stylesheet
+ */
+interface Source {
+    /**
+     * The path to the file that contains the referenced source code
+     *
+     * If this references the *output* source code, this is `null`.
+     */
+    file: string | null;
+    /**
+     * The referenced source code
+     */
+    code: string;
+}
+/**
+ * The file and offsets within it that this node covers
+ *
+ * This can represent either:
+ * - A location in the original CSS which caused this node to be created
+ * - A location in the output CSS where this node resides
+ */
+type SourceLocation = [source: Source, start: number, end: number];
+type PluginFn = (api: PluginAPI) => void;
+type PluginWithConfig = {
+    handler: PluginFn;
+    config?: UserConfig;
+    /** @internal */
+    reference?: boolean;
+    src?: SourceLocation | undefined;
+};
+type PluginWithOptions<T> = {
+    (options?: T): PluginWithConfig;
+    __isOptionsFunction: true;
+};
+type Plugin = PluginFn | PluginWithConfig | PluginWithOptions<any>;
+type PluginAPI = {
+    addBase(base: CssInJs): void;
+    addVariant(name: string, variant: string | string[] | CssInJs): void;
+    matchVariant<T = string>(name: string, cb: (value: T | string, extra: {
+        modifier: string | null;
+    }) => string | string[], options?: {
+        values?: Record<string, T>;
+        sort?(a: {
+            value: T | string;
+            modifier: string | null;
+        }, b: {
+            value: T | string;
+            modifier: string | null;
+        }): number;
+    }): void;
+    addUtilities(utilities: Record<string, CssInJs | CssInJs[]> | Record<string, CssInJs | CssInJs[]>[], options?: {}): void;
+    matchUtilities(utilities: Record<string, (value: string, extra: {
+        modifier: string | null;
+    }) => CssInJs | CssInJs[]>, options?: Partial<{
+        type: string | string[];
+        supportsNegativeValues: boolean;
+        values: Record<string, string> & {
+            __BARE_VALUE__?: (value: N) => string | undefined;
+        };
+        modifiers: 'any' | Record<string, string>;
+    }>): void;
+    addComponents(utilities: Record<string, CssInJs> | Record<string, CssInJs>[], options?: {}): void;
+    matchComponents(utilities: Record<string, (value: string, extra: {
+        modifier: string | null;
+    }) => CssInJs>, options?: Partial<{
+        type: string | string[];
+        supportsNegativeValues: boolean;
+        values: Record<string, string> & {
+            __BARE_VALUE__?: (value: N) => string | undefined;
+        };
+        modifiers: 'any' | Record<string, string>;
+    }>): void;
+    theme(path: string, defaultValue?: any): any;
+    config(path?: string, defaultValue?: any): any;
+    prefix(className: string): string;
+};
+type CssInJs = {
+    [key: string]: string | string[] | CssInJs | CssInJs[];
+};
+
+type ResolvableTo<T> = T | ((utils: P) => T);
+type ThemeValue = ResolvableTo<Record<string, unknown>> | null | undefined;
+type ThemeConfig = Record<string, ThemeValue> & {
+    extend?: Record<string, ThemeValue>;
+};
+type ContentFile = string | {
+    raw: string;
+    extension?: string;
+};
+type DarkModeStrategy = false | 'media' | 'class' | ['class', string] | 'selector' | ['selector', string] | ['variant', string | string[]];
+interface UserConfig {
+    presets?: UserConfig[];
+    theme?: ThemeConfig;
+    plugins?: Plugin[];
+}
+interface UserConfig {
+    content?: ContentFile[] | {
+        relative?: boolean;
+        files: ContentFile[];
+    };
+}
+interface UserConfig {
+    darkMode?: DarkModeStrategy;
+}
+interface UserConfig {
+    prefix?: string;
+}
+interface UserConfig {
+    blocklist?: string[];
+}
+interface UserConfig {
+    important?: boolean | string;
+}
+interface UserConfig {
+    future?: 'all' | Record<string, boolean>;
+}
+interface UserConfig {
+    experimental?: 'all' | Record<string, boolean>;
+}
+
+/**
+ * Tailwind CSS plugin for Ghostly skeleton loaders.
+ *
+ * Adds utilities for configuring ghostly CSS variables
+ * and a `ghostly:` variant for conditional skeleton styles.
+ *
+ * @example
+ * ```js
+ * // tailwind.config.js
+ * import ghostly from '@ghostly-ui/core/tailwind'
+ * export default { plugins: [ghostly] }
+ * ```
+ *
+ * Usage in templates:
+ * ```html
+ * <div class="ghostly-radius-lg ghostly-speed-fast">
+ *   ...
+ * </div>
+ * ```
+ */
+declare const _default: PluginWithConfig;
+
+export { _default as default };

package/dist/tailwind.d.ts

@@ -0,0 +1,148 @@
+import { N, P } from './resolve-config-QUZ9b-Gn.mjs';
+
+/**
+ * The source code for one or more nodes in the AST
+ *
+ * This generally corresponds to a stylesheet
+ */
+interface Source {
+    /**
+     * The path to the file that contains the referenced source code
+     *
+     * If this references the *output* source code, this is `null`.
+     */
+    file: string | null;
+    /**
+     * The referenced source code
+     */
+    code: string;
+}
+/**
+ * The file and offsets within it that this node covers
+ *
+ * This can represent either:
+ * - A location in the original CSS which caused this node to be created
+ * - A location in the output CSS where this node resides
+ */
+type SourceLocation = [source: Source, start: number, end: number];
+type PluginFn = (api: PluginAPI) => void;
+type PluginWithConfig = {
+    handler: PluginFn;
+    config?: UserConfig;
+    /** @internal */
+    reference?: boolean;
+    src?: SourceLocation | undefined;
+};
+type PluginWithOptions<T> = {
+    (options?: T): PluginWithConfig;
+    __isOptionsFunction: true;
+};
+type Plugin = PluginFn | PluginWithConfig | PluginWithOptions<any>;
+type PluginAPI = {
+    addBase(base: CssInJs): void;
+    addVariant(name: string, variant: string | string[] | CssInJs): void;
+    matchVariant<T = string>(name: string, cb: (value: T | string, extra: {
+        modifier: string | null;
+    }) => string | string[], options?: {
+        values?: Record<string, T>;
+        sort?(a: {
+            value: T | string;
+            modifier: string | null;
+        }, b: {
+            value: T | string;
+            modifier: string | null;
+        }): number;
+    }): void;
+    addUtilities(utilities: Record<string, CssInJs | CssInJs[]> | Record<string, CssInJs | CssInJs[]>[], options?: {}): void;
+    matchUtilities(utilities: Record<string, (value: string, extra: {
+        modifier: string | null;
+    }) => CssInJs | CssInJs[]>, options?: Partial<{
+        type: string | string[];
+        supportsNegativeValues: boolean;
+        values: Record<string, string> & {
+            __BARE_VALUE__?: (value: N) => string | undefined;
+        };
+        modifiers: 'any' | Record<string, string>;
+    }>): void;
+    addComponents(utilities: Record<string, CssInJs> | Record<string, CssInJs>[], options?: {}): void;
+    matchComponents(utilities: Record<string, (value: string, extra: {
+        modifier: string | null;
+    }) => CssInJs>, options?: Partial<{
+        type: string | string[];
+        supportsNegativeValues: boolean;
+        values: Record<string, string> & {
+            __BARE_VALUE__?: (value: N) => string | undefined;
+        };
+        modifiers: 'any' | Record<string, string>;
+    }>): void;
+    theme(path: string, defaultValue?: any): any;
+    config(path?: string, defaultValue?: any): any;
+    prefix(className: string): string;
+};
+type CssInJs = {
+    [key: string]: string | string[] | CssInJs | CssInJs[];
+};
+
+type ResolvableTo<T> = T | ((utils: P) => T);
+type ThemeValue = ResolvableTo<Record<string, unknown>> | null | undefined;
+type ThemeConfig = Record<string, ThemeValue> & {
+    extend?: Record<string, ThemeValue>;
+};
+type ContentFile = string | {
+    raw: string;
+    extension?: string;
+};
+type DarkModeStrategy = false | 'media' | 'class' | ['class', string] | 'selector' | ['selector', string] | ['variant', string | string[]];
+interface UserConfig {
+    presets?: UserConfig[];
+    theme?: ThemeConfig;
+    plugins?: Plugin[];
+}
+interface UserConfig {
+    content?: ContentFile[] | {
+        relative?: boolean;
+        files: ContentFile[];
+    };
+}
+interface UserConfig {
+    darkMode?: DarkModeStrategy;
+}
+interface UserConfig {
+    prefix?: string;
+}
+interface UserConfig {
+    blocklist?: string[];
+}
+interface UserConfig {
+    important?: boolean | string;
+}
+interface UserConfig {
+    future?: 'all' | Record<string, boolean>;
+}
+interface UserConfig {
+    experimental?: 'all' | Record<string, boolean>;
+}
+
+/**
+ * Tailwind CSS plugin for Ghostly skeleton loaders.
+ *
+ * Adds utilities for configuring ghostly CSS variables
+ * and a `ghostly:` variant for conditional skeleton styles.
+ *
+ * @example
+ * ```js
+ * // tailwind.config.js
+ * import ghostly from '@ghostly-ui/core/tailwind'
+ * export default { plugins: [ghostly] }
+ * ```
+ *
+ * Usage in templates:
+ * ```html
+ * <div class="ghostly-radius-lg ghostly-speed-fast">
+ *   ...
+ * </div>
+ * ```
+ */
+declare const _default: PluginWithConfig;
+
+export { _default as default };

package/dist/tailwind.js

@@ -0,0 +1,30 @@
+// src/tailwind.ts
+import plugin from "tailwindcss/plugin";
+var tailwind_default = plugin(function ghostlyPlugin({ addUtilities, addVariant, matchUtilities }) {
+  addVariant("ghostly", "[data-ghostly] &");
+  addUtilities({
+    ".ghostly-radius-none": { "--ghostly-radius": "0px" },
+    ".ghostly-radius-xs": { "--ghostly-radius": "2px" },
+    ".ghostly-radius-sm": { "--ghostly-radius": "4px" },
+    ".ghostly-radius-md": { "--ghostly-radius": "8px" },
+    ".ghostly-radius-lg": { "--ghostly-radius": "12px" },
+    ".ghostly-radius-full": { "--ghostly-radius": "9999px" }
+  });
+  addUtilities({
+    ".ghostly-speed-slow": { "--ghostly-speed": "2s" },
+    ".ghostly-speed-normal": { "--ghostly-speed": "1.5s" },
+    ".ghostly-speed-fast": { "--ghostly-speed": "0.8s" }
+  });
+  matchUtilities(
+    { "ghostly-color": (value) => ({ "--ghostly-color": value }) },
+    { values: {}, type: ["color"] }
+  );
+  matchUtilities(
+    { "ghostly-shine": (value) => ({ "--ghostly-shine": value }) },
+    { values: {}, type: ["color"] }
+  );
+});
+export {
+  tailwind_default as default
+};
+//# sourceMappingURL=tailwind.js.map

package/dist/tailwind.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tailwind.ts"],"sourcesContent":["import plugin from 'tailwindcss/plugin'\n\n/**\n * Tailwind CSS plugin for Ghostly skeleton loaders.\n *\n * Adds utilities for configuring ghostly CSS variables\n * and a `ghostly:` variant for conditional skeleton styles.\n *\n * @example\n * ```js\n * // tailwind.config.js\n * import ghostly from '@ghostly-ui/core/tailwind'\n * export default { plugins: [ghostly] }\n * ```\n *\n * Usage in templates:\n * ```html\n * <div class=\"ghostly-radius-lg ghostly-speed-fast\">\n *   ...\n * </div>\n * ```\n */\nexport default plugin(function ghostlyPlugin({ addUtilities, addVariant, matchUtilities }) {\n  // Variant: `ghostly:` targets elements inside a ghostly container\n  addVariant('ghostly', '[data-ghostly] &')\n\n  // Radius utilities\n  addUtilities({\n    '.ghostly-radius-none': { '--ghostly-radius': '0px' },\n    '.ghostly-radius-xs': { '--ghostly-radius': '2px' },\n    '.ghostly-radius-sm': { '--ghostly-radius': '4px' },\n    '.ghostly-radius-md': { '--ghostly-radius': '8px' },\n    '.ghostly-radius-lg': { '--ghostly-radius': '12px' },\n    '.ghostly-radius-full': { '--ghostly-radius': '9999px' },\n  })\n\n  // Speed utilities\n  addUtilities({\n    '.ghostly-speed-slow': { '--ghostly-speed': '2s' },\n    '.ghostly-speed-normal': { '--ghostly-speed': '1.5s' },\n    '.ghostly-speed-fast': { '--ghostly-speed': '0.8s' },\n  })\n\n  // Color utilities (arbitrary value via matchUtilities)\n  matchUtilities(\n    { 'ghostly-color': (value: string) => ({ '--ghostly-color': value }) },\n    { values: {}, type: ['color'] },\n  )\n\n  matchUtilities(\n    { 'ghostly-shine': (value: string) => ({ '--ghostly-shine': value }) },\n    { values: {}, type: ['color'] },\n  )\n})\n"],"mappings":";AAAA,OAAO,YAAY;AAsBnB,IAAO,mBAAQ,OAAO,SAAS,cAAc,EAAE,cAAc,YAAY,eAAe,GAAG;AAEzF,aAAW,WAAW,kBAAkB;AAGxC,eAAa;AAAA,IACX,wBAAwB,EAAE,oBAAoB,MAAM;AAAA,IACpD,sBAAsB,EAAE,oBAAoB,MAAM;AAAA,IAClD,sBAAsB,EAAE,oBAAoB,MAAM;AAAA,IAClD,sBAAsB,EAAE,oBAAoB,MAAM;AAAA,IAClD,sBAAsB,EAAE,oBAAoB,OAAO;AAAA,IACnD,wBAAwB,EAAE,oBAAoB,SAAS;AAAA,EACzD,CAAC;AAGD,eAAa;AAAA,IACX,uBAAuB,EAAE,mBAAmB,KAAK;AAAA,IACjD,yBAAyB,EAAE,mBAAmB,OAAO;AAAA,IACrD,uBAAuB,EAAE,mBAAmB,OAAO;AAAA,EACrD,CAAC;AAGD;AAAA,IACE,EAAE,iBAAiB,CAAC,WAAmB,EAAE,mBAAmB,MAAM,GAAG;AAAA,IACrE,EAAE,QAAQ,CAAC,GAAG,MAAM,CAAC,OAAO,EAAE;AAAA,EAChC;AAEA;AAAA,IACE,EAAE,iBAAiB,CAAC,WAAmB,EAAE,mBAAmB,MAAM,GAAG;AAAA,IACrE,EAAE,QAAQ,CAAC,GAAG,MAAM,CAAC,OAAO,EAAE;AAAA,EAChC;AACF,CAAC;","names":[]}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@ghostly-ui/core",
+  "version": "0.2.0",
+  "description": "Zero-config skeleton loaders. Wrap your component, done.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./css": "./dist/ghostly.css",
+    "./tailwind": {
+      "import": {
+        "types": "./dist/tailwind.d.ts",
+        "default": "./dist/tailwind.js"
+      },
+      "require": {
+        "types": "./dist/tailwind.d.cts",
+        "default": "./dist/tailwind.cjs"
+      }
+    }
+  },
+  "files": ["dist", "README.md", "LICENSE"],
+  "sideEffects": ["*.css"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "tailwindcss": "^4.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "skeleton",
+    "loading",
+    "placeholder",
+    "shimmer",
+    "css",
+    "zero-config"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AdanSerrano/ghostly",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/AdanSerrano/ghostly/issues"
+  },
+  "homepage": "https://github.com/AdanSerrano/ghostly#readme"
+}