@alikhalilll/a-skeleton 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/.media/hero.png +0 -0
  2. package/.media/hero.svg +232 -0
  3. package/README.md +459 -170
  4. package/dist/index.cjs +3696 -828
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +534 -43
  7. package/dist/index.d.ts +534 -43
  8. package/dist/index.js +3677 -830
  9. package/dist/index.js.map +1 -1
  10. package/dist/nuxt/index.cjs +16 -1
  11. package/dist/nuxt/index.cjs.map +1 -1
  12. package/dist/nuxt/index.js +16 -1
  13. package/dist/nuxt/index.js.map +1 -1
  14. package/dist/resolver/index.cjs +16 -1
  15. package/dist/resolver/index.cjs.map +1 -1
  16. package/dist/resolver/index.js +16 -1
  17. package/dist/resolver/index.js.map +1 -1
  18. package/dist/styles.css +56 -11
  19. package/package.json +8 -2
  20. package/src/components/ASkeleton.vue +216 -98
  21. package/src/components/ASkeletonClone.vue +106 -0
  22. package/src/components/ASkeletonLayer.vue +20 -32
  23. package/src/components/CloneNode.ts +161 -0
  24. package/src/components/StructuralLayerNode.ts +157 -0
  25. package/src/components/icons.ts +45 -0
  26. package/src/components/variants/ASkeletonArticle.vue +33 -0
  27. package/src/components/variants/ASkeletonAvatar.vue +42 -0
  28. package/src/components/variants/ASkeletonButton.vue +37 -0
  29. package/src/components/variants/ASkeletonCard.vue +47 -0
  30. package/src/components/variants/ASkeletonChart.vue +56 -0
  31. package/src/components/variants/ASkeletonChip.vue +32 -0
  32. package/src/components/variants/ASkeletonDivider.vue +26 -0
  33. package/src/components/variants/ASkeletonForm.vue +32 -0
  34. package/src/components/variants/ASkeletonHeading.vue +47 -0
  35. package/src/components/variants/ASkeletonImage.vue +57 -0
  36. package/src/components/variants/ASkeletonInput.vue +33 -0
  37. package/src/components/variants/ASkeletonListItem.vue +40 -0
  38. package/src/components/variants/ASkeletonTable.vue +49 -0
  39. package/src/components/variants/ASkeletonText.vue +49 -0
  40. package/src/components/variants/ASkeletonVideo.vue +55 -0
  41. package/src/composables/useShapeProbe.ts +33 -9
  42. package/src/composables/useSkeleton.ts +33 -21
  43. package/src/composables/useSkeletonCache.ts +282 -24
  44. package/src/index.ts +48 -2
  45. package/src/nuxt/index.ts +16 -0
  46. package/src/resolver/index.ts +16 -0
  47. package/src/types.ts +124 -5
  48. package/src/utils/buildStructuralSkeleton.ts +400 -103
  49. package/src/utils/captureStyles.ts +378 -0
  50. package/src/utils/domRead.ts +143 -0
  51. package/src/utils/walkDom.ts +261 -16
  52. package/src/utils/walkStructural.ts +418 -0
  53. package/web-types.json +10 -4
@@ -3,7 +3,22 @@ let _nuxt_kit = require("@nuxt/kit");
3
3
  const COMPONENTS = {
4
4
  ASkeleton: "@alikhalilll/a-skeleton",
5
5
  ASkeletonLayer: "@alikhalilll/a-skeleton",
6
- ASkeletonBlock: "@alikhalilll/a-skeleton"
6
+ ASkeletonBlock: "@alikhalilll/a-skeleton",
7
+ ASkeletonText: "@alikhalilll/a-skeleton",
8
+ ASkeletonHeading: "@alikhalilll/a-skeleton",
9
+ ASkeletonAvatar: "@alikhalilll/a-skeleton",
10
+ ASkeletonImage: "@alikhalilll/a-skeleton",
11
+ ASkeletonVideo: "@alikhalilll/a-skeleton",
12
+ ASkeletonButton: "@alikhalilll/a-skeleton",
13
+ ASkeletonInput: "@alikhalilll/a-skeleton",
14
+ ASkeletonListItem: "@alikhalilll/a-skeleton",
15
+ ASkeletonCard: "@alikhalilll/a-skeleton",
16
+ ASkeletonTable: "@alikhalilll/a-skeleton",
17
+ ASkeletonChart: "@alikhalilll/a-skeleton",
18
+ ASkeletonForm: "@alikhalilll/a-skeleton",
19
+ ASkeletonArticle: "@alikhalilll/a-skeleton",
20
+ ASkeletonDivider: "@alikhalilll/a-skeleton",
21
+ ASkeletonChip: "@alikhalilll/a-skeleton"
7
22
  };
8
23
  const module$1 = (0, _nuxt_kit.defineNuxtModule)({
9
24
  meta: {
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","names":["module"],"sources":["../../src/nuxt/index.ts"],"sourcesContent":["import { defineNuxtModule, addComponent } from '@nuxt/kit';\nimport type { NuxtModule } from '@nuxt/schema';\n\n/**\n * `@alikhalilll/a-skeleton/nuxt` — registers the skeleton components for Nuxt\n * auto-import. The auto-imported names are the package's native names:\n *\n * <ASkeleton :loading>…</ASkeleton> <!-- slot wrapper, two-layer flow -->\n * <ASkeletonLayer :shape=\"…\" /> <!-- replay a CachedShape directly -->\n * <ASkeletonBlock type=\"circle\" w=\"64\" h=\"64\" /> <!-- hand-crafted skeleton primitive -->\n *\n * modules: ['@alikhalilll/a-skeleton/nuxt'],\n * aSkeleton: { prefix: 'A' }, // optional\n *\n * Styles are not auto-injected; add `'@alikhalilll/a-skeleton/styles.css'` to\n * your Nuxt `css` array.\n */\n\nexport interface ModuleOptions {\n /** Optional prefix prepended to the registered component name. */\n prefix?: string;\n}\n\nconst COMPONENTS: Record<string, string> = {\n ASkeleton: '@alikhalilll/a-skeleton',\n ASkeletonLayer: '@alikhalilll/a-skeleton',\n ASkeletonBlock: '@alikhalilll/a-skeleton',\n};\n\nconst module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({\n meta: {\n name: '@alikhalilll/a-skeleton',\n configKey: 'aSkeleton',\n compatibility: { nuxt: '>=3.0.0' },\n },\n defaults: { prefix: '' },\n setup(opts) {\n const prefix = opts.prefix ?? '';\n for (const [exportName, from] of Object.entries(COMPONENTS)) {\n const baseName = exportName.startsWith('A') ? exportName.slice(1) : exportName;\n const registeredName = `${prefix}${prefix ? baseName : exportName}`;\n addComponent({ name: registeredName, export: exportName, filePath: from });\n }\n },\n});\n\nexport default module;\n"],"mappings":";;AAuBA,MAAM,aAAqC;CACzC,WAAW;CACX,gBAAgB;CAChB,gBAAgB;AAClB;AAEA,MAAMA,YAAAA,GAAAA,UAAAA,kBAAoE;CACxE,MAAM;EACJ,MAAM;EACN,WAAW;EACX,eAAe,EAAE,MAAM,UAAU;CACnC;CACA,UAAU,EAAE,QAAQ,GAAG;CACvB,MAAM,MAAM;EACV,MAAM,SAAS,KAAK,UAAU;EAC9B,KAAK,MAAM,CAAC,YAAY,SAAS,OAAO,QAAQ,UAAU,GAAG;GAC3D,MAAM,WAAW,WAAW,WAAW,GAAG,IAAI,WAAW,MAAM,CAAC,IAAI;GAEpE,CAAA,GAAA,UAAA,cAAa;IAAE,MAAM,GADK,SAAS,SAAS,WAAW;IAClB,QAAQ;IAAY,UAAU;GAAK,CAAC;EAC3E;CACF;AACF,CAAC"}
1
+ {"version":3,"file":"index.cjs","names":["module"],"sources":["../../src/nuxt/index.ts"],"sourcesContent":["import { defineNuxtModule, addComponent } from '@nuxt/kit';\nimport type { NuxtModule } from '@nuxt/schema';\n\n/**\n * `@alikhalilll/a-skeleton/nuxt` — registers the skeleton components for Nuxt\n * auto-import. The auto-imported names are the package's native names:\n *\n * <ASkeleton :loading>…</ASkeleton> <!-- slot wrapper, two-layer flow -->\n * <ASkeletonLayer :shape=\"…\" /> <!-- replay a CachedShape directly -->\n * <ASkeletonBlock type=\"circle\" w=\"64\" h=\"64\" /> <!-- hand-crafted skeleton primitive -->\n *\n * modules: ['@alikhalilll/a-skeleton/nuxt'],\n * aSkeleton: { prefix: 'A' }, // optional\n *\n * Styles are not auto-injected; add `'@alikhalilll/a-skeleton/styles.css'` to\n * your Nuxt `css` array.\n */\n\nexport interface ModuleOptions {\n /** Optional prefix prepended to the registered component name. */\n prefix?: string;\n}\n\nconst COMPONENTS: Record<string, string> = {\n ASkeleton: '@alikhalilll/a-skeleton',\n ASkeletonLayer: '@alikhalilll/a-skeleton',\n ASkeletonBlock: '@alikhalilll/a-skeleton',\n /* Variant primitives */\n ASkeletonText: '@alikhalilll/a-skeleton',\n ASkeletonHeading: '@alikhalilll/a-skeleton',\n ASkeletonAvatar: '@alikhalilll/a-skeleton',\n ASkeletonImage: '@alikhalilll/a-skeleton',\n ASkeletonVideo: '@alikhalilll/a-skeleton',\n ASkeletonButton: '@alikhalilll/a-skeleton',\n ASkeletonInput: '@alikhalilll/a-skeleton',\n ASkeletonListItem: '@alikhalilll/a-skeleton',\n ASkeletonCard: '@alikhalilll/a-skeleton',\n ASkeletonTable: '@alikhalilll/a-skeleton',\n ASkeletonChart: '@alikhalilll/a-skeleton',\n ASkeletonForm: '@alikhalilll/a-skeleton',\n ASkeletonArticle: '@alikhalilll/a-skeleton',\n ASkeletonDivider: '@alikhalilll/a-skeleton',\n ASkeletonChip: '@alikhalilll/a-skeleton',\n};\n\nconst module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({\n meta: {\n name: '@alikhalilll/a-skeleton',\n configKey: 'aSkeleton',\n compatibility: { nuxt: '>=3.0.0' },\n },\n defaults: { prefix: '' },\n setup(opts) {\n const prefix = opts.prefix ?? '';\n for (const [exportName, from] of Object.entries(COMPONENTS)) {\n const baseName = exportName.startsWith('A') ? exportName.slice(1) : exportName;\n const registeredName = `${prefix}${prefix ? baseName : exportName}`;\n addComponent({ name: registeredName, export: exportName, filePath: from });\n }\n },\n});\n\nexport default module;\n"],"mappings":";;AAuBA,MAAM,aAAqC;CACzC,WAAW;CACX,gBAAgB;CAChB,gBAAgB;CAEhB,eAAe;CACf,kBAAkB;CAClB,iBAAiB;CACjB,gBAAgB;CAChB,gBAAgB;CAChB,iBAAiB;CACjB,gBAAgB;CAChB,mBAAmB;CACnB,eAAe;CACf,gBAAgB;CAChB,gBAAgB;CAChB,eAAe;CACf,kBAAkB;CAClB,kBAAkB;CAClB,eAAe;AACjB;AAEA,MAAMA,YAAAA,GAAAA,UAAAA,kBAAoE;CACxE,MAAM;EACJ,MAAM;EACN,WAAW;EACX,eAAe,EAAE,MAAM,UAAU;CACnC;CACA,UAAU,EAAE,QAAQ,GAAG;CACvB,MAAM,MAAM;EACV,MAAM,SAAS,KAAK,UAAU;EAC9B,KAAK,MAAM,CAAC,YAAY,SAAS,OAAO,QAAQ,UAAU,GAAG;GAC3D,MAAM,WAAW,WAAW,WAAW,GAAG,IAAI,WAAW,MAAM,CAAC,IAAI;GAEpE,CAAA,GAAA,UAAA,cAAa;IAAE,MAAM,GADK,SAAS,SAAS,WAAW;IAClB,QAAQ;IAAY,UAAU;GAAK,CAAC;EAC3E;CACF;AACF,CAAC"}
@@ -3,7 +3,22 @@ import { addComponent, defineNuxtModule } from "@nuxt/kit";
3
3
  const COMPONENTS = {
4
4
  ASkeleton: "@alikhalilll/a-skeleton",
5
5
  ASkeletonLayer: "@alikhalilll/a-skeleton",
6
- ASkeletonBlock: "@alikhalilll/a-skeleton"
6
+ ASkeletonBlock: "@alikhalilll/a-skeleton",
7
+ ASkeletonText: "@alikhalilll/a-skeleton",
8
+ ASkeletonHeading: "@alikhalilll/a-skeleton",
9
+ ASkeletonAvatar: "@alikhalilll/a-skeleton",
10
+ ASkeletonImage: "@alikhalilll/a-skeleton",
11
+ ASkeletonVideo: "@alikhalilll/a-skeleton",
12
+ ASkeletonButton: "@alikhalilll/a-skeleton",
13
+ ASkeletonInput: "@alikhalilll/a-skeleton",
14
+ ASkeletonListItem: "@alikhalilll/a-skeleton",
15
+ ASkeletonCard: "@alikhalilll/a-skeleton",
16
+ ASkeletonTable: "@alikhalilll/a-skeleton",
17
+ ASkeletonChart: "@alikhalilll/a-skeleton",
18
+ ASkeletonForm: "@alikhalilll/a-skeleton",
19
+ ASkeletonArticle: "@alikhalilll/a-skeleton",
20
+ ASkeletonDivider: "@alikhalilll/a-skeleton",
21
+ ASkeletonChip: "@alikhalilll/a-skeleton"
7
22
  };
8
23
  const module = defineNuxtModule({
9
24
  meta: {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/nuxt/index.ts"],"sourcesContent":["import { defineNuxtModule, addComponent } from '@nuxt/kit';\nimport type { NuxtModule } from '@nuxt/schema';\n\n/**\n * `@alikhalilll/a-skeleton/nuxt` — registers the skeleton components for Nuxt\n * auto-import. The auto-imported names are the package's native names:\n *\n * <ASkeleton :loading>…</ASkeleton> <!-- slot wrapper, two-layer flow -->\n * <ASkeletonLayer :shape=\"…\" /> <!-- replay a CachedShape directly -->\n * <ASkeletonBlock type=\"circle\" w=\"64\" h=\"64\" /> <!-- hand-crafted skeleton primitive -->\n *\n * modules: ['@alikhalilll/a-skeleton/nuxt'],\n * aSkeleton: { prefix: 'A' }, // optional\n *\n * Styles are not auto-injected; add `'@alikhalilll/a-skeleton/styles.css'` to\n * your Nuxt `css` array.\n */\n\nexport interface ModuleOptions {\n /** Optional prefix prepended to the registered component name. */\n prefix?: string;\n}\n\nconst COMPONENTS: Record<string, string> = {\n ASkeleton: '@alikhalilll/a-skeleton',\n ASkeletonLayer: '@alikhalilll/a-skeleton',\n ASkeletonBlock: '@alikhalilll/a-skeleton',\n};\n\nconst module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({\n meta: {\n name: '@alikhalilll/a-skeleton',\n configKey: 'aSkeleton',\n compatibility: { nuxt: '>=3.0.0' },\n },\n defaults: { prefix: '' },\n setup(opts) {\n const prefix = opts.prefix ?? '';\n for (const [exportName, from] of Object.entries(COMPONENTS)) {\n const baseName = exportName.startsWith('A') ? exportName.slice(1) : exportName;\n const registeredName = `${prefix}${prefix ? baseName : exportName}`;\n addComponent({ name: registeredName, export: exportName, filePath: from });\n }\n },\n});\n\nexport default module;\n"],"mappings":";;AAuBA,MAAM,aAAqC;CACzC,WAAW;CACX,gBAAgB;CAChB,gBAAgB;AAClB;AAEA,MAAM,SAAoC,iBAAgC;CACxE,MAAM;EACJ,MAAM;EACN,WAAW;EACX,eAAe,EAAE,MAAM,UAAU;CACnC;CACA,UAAU,EAAE,QAAQ,GAAG;CACvB,MAAM,MAAM;EACV,MAAM,SAAS,KAAK,UAAU;EAC9B,KAAK,MAAM,CAAC,YAAY,SAAS,OAAO,QAAQ,UAAU,GAAG;GAC3D,MAAM,WAAW,WAAW,WAAW,GAAG,IAAI,WAAW,MAAM,CAAC,IAAI;GAEpE,aAAa;IAAE,MAAM,GADK,SAAS,SAAS,WAAW;IAClB,QAAQ;IAAY,UAAU;GAAK,CAAC;EAC3E;CACF;AACF,CAAC"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/nuxt/index.ts"],"sourcesContent":["import { defineNuxtModule, addComponent } from '@nuxt/kit';\nimport type { NuxtModule } from '@nuxt/schema';\n\n/**\n * `@alikhalilll/a-skeleton/nuxt` — registers the skeleton components for Nuxt\n * auto-import. The auto-imported names are the package's native names:\n *\n * <ASkeleton :loading>…</ASkeleton> <!-- slot wrapper, two-layer flow -->\n * <ASkeletonLayer :shape=\"…\" /> <!-- replay a CachedShape directly -->\n * <ASkeletonBlock type=\"circle\" w=\"64\" h=\"64\" /> <!-- hand-crafted skeleton primitive -->\n *\n * modules: ['@alikhalilll/a-skeleton/nuxt'],\n * aSkeleton: { prefix: 'A' }, // optional\n *\n * Styles are not auto-injected; add `'@alikhalilll/a-skeleton/styles.css'` to\n * your Nuxt `css` array.\n */\n\nexport interface ModuleOptions {\n /** Optional prefix prepended to the registered component name. */\n prefix?: string;\n}\n\nconst COMPONENTS: Record<string, string> = {\n ASkeleton: '@alikhalilll/a-skeleton',\n ASkeletonLayer: '@alikhalilll/a-skeleton',\n ASkeletonBlock: '@alikhalilll/a-skeleton',\n /* Variant primitives */\n ASkeletonText: '@alikhalilll/a-skeleton',\n ASkeletonHeading: '@alikhalilll/a-skeleton',\n ASkeletonAvatar: '@alikhalilll/a-skeleton',\n ASkeletonImage: '@alikhalilll/a-skeleton',\n ASkeletonVideo: '@alikhalilll/a-skeleton',\n ASkeletonButton: '@alikhalilll/a-skeleton',\n ASkeletonInput: '@alikhalilll/a-skeleton',\n ASkeletonListItem: '@alikhalilll/a-skeleton',\n ASkeletonCard: '@alikhalilll/a-skeleton',\n ASkeletonTable: '@alikhalilll/a-skeleton',\n ASkeletonChart: '@alikhalilll/a-skeleton',\n ASkeletonForm: '@alikhalilll/a-skeleton',\n ASkeletonArticle: '@alikhalilll/a-skeleton',\n ASkeletonDivider: '@alikhalilll/a-skeleton',\n ASkeletonChip: '@alikhalilll/a-skeleton',\n};\n\nconst module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({\n meta: {\n name: '@alikhalilll/a-skeleton',\n configKey: 'aSkeleton',\n compatibility: { nuxt: '>=3.0.0' },\n },\n defaults: { prefix: '' },\n setup(opts) {\n const prefix = opts.prefix ?? '';\n for (const [exportName, from] of Object.entries(COMPONENTS)) {\n const baseName = exportName.startsWith('A') ? exportName.slice(1) : exportName;\n const registeredName = `${prefix}${prefix ? baseName : exportName}`;\n addComponent({ name: registeredName, export: exportName, filePath: from });\n }\n },\n});\n\nexport default module;\n"],"mappings":";;AAuBA,MAAM,aAAqC;CACzC,WAAW;CACX,gBAAgB;CAChB,gBAAgB;CAEhB,eAAe;CACf,kBAAkB;CAClB,iBAAiB;CACjB,gBAAgB;CAChB,gBAAgB;CAChB,iBAAiB;CACjB,gBAAgB;CAChB,mBAAmB;CACnB,eAAe;CACf,gBAAgB;CAChB,gBAAgB;CAChB,eAAe;CACf,kBAAkB;CAClB,kBAAkB;CAClB,eAAe;AACjB;AAEA,MAAM,SAAoC,iBAAgC;CACxE,MAAM;EACJ,MAAM;EACN,WAAW;EACX,eAAe,EAAE,MAAM,UAAU;CACnC;CACA,UAAU,EAAE,QAAQ,GAAG;CACvB,MAAM,MAAM;EACV,MAAM,SAAS,KAAK,UAAU;EAC9B,KAAK,MAAM,CAAC,YAAY,SAAS,OAAO,QAAQ,UAAU,GAAG;GAC3D,MAAM,WAAW,WAAW,WAAW,GAAG,IAAI,WAAW,MAAM,CAAC,IAAI;GAEpE,aAAa;IAAE,MAAM,GADK,SAAS,SAAS,WAAW;IAClB,QAAQ;IAAY,UAAU;GAAK,CAAC;EAC3E;CACF;AACF,CAAC"}
@@ -2,7 +2,22 @@
2
2
  const COMPONENT_TO_ENTRY = {
3
3
  ASkeleton: "@alikhalilll/a-skeleton",
4
4
  ASkeletonLayer: "@alikhalilll/a-skeleton",
5
- ASkeletonBlock: "@alikhalilll/a-skeleton"
5
+ ASkeletonBlock: "@alikhalilll/a-skeleton",
6
+ ASkeletonText: "@alikhalilll/a-skeleton",
7
+ ASkeletonHeading: "@alikhalilll/a-skeleton",
8
+ ASkeletonAvatar: "@alikhalilll/a-skeleton",
9
+ ASkeletonImage: "@alikhalilll/a-skeleton",
10
+ ASkeletonVideo: "@alikhalilll/a-skeleton",
11
+ ASkeletonButton: "@alikhalilll/a-skeleton",
12
+ ASkeletonInput: "@alikhalilll/a-skeleton",
13
+ ASkeletonListItem: "@alikhalilll/a-skeleton",
14
+ ASkeletonCard: "@alikhalilll/a-skeleton",
15
+ ASkeletonTable: "@alikhalilll/a-skeleton",
16
+ ASkeletonChart: "@alikhalilll/a-skeleton",
17
+ ASkeletonForm: "@alikhalilll/a-skeleton",
18
+ ASkeletonArticle: "@alikhalilll/a-skeleton",
19
+ ASkeletonDivider: "@alikhalilll/a-skeleton",
20
+ ASkeletonChip: "@alikhalilll/a-skeleton"
6
21
  };
7
22
  function ASkeletonResolver(opts = {}) {
8
23
  const prefix = opts.prefix ?? "";
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","names":[],"sources":["../../src/resolver/index.ts"],"sourcesContent":["import type { ComponentResolver } from 'unplugin-vue-components';\n\n/**\n * `@alikhalilll/a-skeleton/resolver` — auto-import resolver for non-Nuxt\n * Vite/Webpack consumers via `unplugin-vue-components`.\n *\n * import Components from 'unplugin-vue-components/vite';\n * import ASkeletonResolver from '@alikhalilll/a-skeleton/resolver';\n * export default { plugins: [Components({ resolvers: [ASkeletonResolver()] })] };\n *\n * Registers `<ASkeleton>`, `<ASkeletonLayer>`, `<ASkeletonBlock>`.\n */\n\nexport interface ResolverOptions {\n /** Optional prefix the consumer uses (e.g. `'A'`). Defaults to the native `A*` names. */\n prefix?: string;\n}\n\nconst COMPONENT_TO_ENTRY: Record<string, string> = {\n ASkeleton: '@alikhalilll/a-skeleton',\n ASkeletonLayer: '@alikhalilll/a-skeleton',\n ASkeletonBlock: '@alikhalilll/a-skeleton',\n};\n\nexport default function ASkeletonResolver(opts: ResolverOptions = {}): ComponentResolver {\n const prefix = opts.prefix ?? '';\n return {\n type: 'component',\n resolve(name) {\n const bare = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;\n const from = COMPONENT_TO_ENTRY[bare];\n if (!from) return;\n return { name: bare, from };\n },\n };\n}\n"],"mappings":";AAkBA,MAAM,qBAA6C;CACjD,WAAW;CACX,gBAAgB;CAChB,gBAAgB;AAClB;AAEA,SAAwB,kBAAkB,OAAwB,CAAC,GAAsB;CACvF,MAAM,SAAS,KAAK,UAAU;CAC9B,OAAO;EACL,MAAM;EACN,QAAQ,MAAM;GACZ,MAAM,OAAO,UAAU,KAAK,WAAW,MAAM,IAAI,KAAK,MAAM,OAAO,MAAM,IAAI;GAC7E,MAAM,OAAO,mBAAmB;GAChC,IAAI,CAAC,MAAM;GACX,OAAO;IAAE,MAAM;IAAM;GAAK;EAC5B;CACF;AACF"}
1
+ {"version":3,"file":"index.cjs","names":[],"sources":["../../src/resolver/index.ts"],"sourcesContent":["import type { ComponentResolver } from 'unplugin-vue-components';\n\n/**\n * `@alikhalilll/a-skeleton/resolver` — auto-import resolver for non-Nuxt\n * Vite/Webpack consumers via `unplugin-vue-components`.\n *\n * import Components from 'unplugin-vue-components/vite';\n * import ASkeletonResolver from '@alikhalilll/a-skeleton/resolver';\n * export default { plugins: [Components({ resolvers: [ASkeletonResolver()] })] };\n *\n * Registers `<ASkeleton>`, `<ASkeletonLayer>`, `<ASkeletonBlock>`.\n */\n\nexport interface ResolverOptions {\n /** Optional prefix the consumer uses (e.g. `'A'`). Defaults to the native `A*` names. */\n prefix?: string;\n}\n\nconst COMPONENT_TO_ENTRY: Record<string, string> = {\n ASkeleton: '@alikhalilll/a-skeleton',\n ASkeletonLayer: '@alikhalilll/a-skeleton',\n ASkeletonBlock: '@alikhalilll/a-skeleton',\n /* Variant primitives */\n ASkeletonText: '@alikhalilll/a-skeleton',\n ASkeletonHeading: '@alikhalilll/a-skeleton',\n ASkeletonAvatar: '@alikhalilll/a-skeleton',\n ASkeletonImage: '@alikhalilll/a-skeleton',\n ASkeletonVideo: '@alikhalilll/a-skeleton',\n ASkeletonButton: '@alikhalilll/a-skeleton',\n ASkeletonInput: '@alikhalilll/a-skeleton',\n ASkeletonListItem: '@alikhalilll/a-skeleton',\n ASkeletonCard: '@alikhalilll/a-skeleton',\n ASkeletonTable: '@alikhalilll/a-skeleton',\n ASkeletonChart: '@alikhalilll/a-skeleton',\n ASkeletonForm: '@alikhalilll/a-skeleton',\n ASkeletonArticle: '@alikhalilll/a-skeleton',\n ASkeletonDivider: '@alikhalilll/a-skeleton',\n ASkeletonChip: '@alikhalilll/a-skeleton',\n};\n\nexport default function ASkeletonResolver(opts: ResolverOptions = {}): ComponentResolver {\n const prefix = opts.prefix ?? '';\n return {\n type: 'component',\n resolve(name) {\n const bare = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;\n const from = COMPONENT_TO_ENTRY[bare];\n if (!from) return;\n return { name: bare, from };\n },\n };\n}\n"],"mappings":";AAkBA,MAAM,qBAA6C;CACjD,WAAW;CACX,gBAAgB;CAChB,gBAAgB;CAEhB,eAAe;CACf,kBAAkB;CAClB,iBAAiB;CACjB,gBAAgB;CAChB,gBAAgB;CAChB,iBAAiB;CACjB,gBAAgB;CAChB,mBAAmB;CACnB,eAAe;CACf,gBAAgB;CAChB,gBAAgB;CAChB,eAAe;CACf,kBAAkB;CAClB,kBAAkB;CAClB,eAAe;AACjB;AAEA,SAAwB,kBAAkB,OAAwB,CAAC,GAAsB;CACvF,MAAM,SAAS,KAAK,UAAU;CAC9B,OAAO;EACL,MAAM;EACN,QAAQ,MAAM;GACZ,MAAM,OAAO,UAAU,KAAK,WAAW,MAAM,IAAI,KAAK,MAAM,OAAO,MAAM,IAAI;GAC7E,MAAM,OAAO,mBAAmB;GAChC,IAAI,CAAC,MAAM;GACX,OAAO;IAAE,MAAM;IAAM;GAAK;EAC5B;CACF;AACF"}
@@ -2,7 +2,22 @@
2
2
  const COMPONENT_TO_ENTRY = {
3
3
  ASkeleton: "@alikhalilll/a-skeleton",
4
4
  ASkeletonLayer: "@alikhalilll/a-skeleton",
5
- ASkeletonBlock: "@alikhalilll/a-skeleton"
5
+ ASkeletonBlock: "@alikhalilll/a-skeleton",
6
+ ASkeletonText: "@alikhalilll/a-skeleton",
7
+ ASkeletonHeading: "@alikhalilll/a-skeleton",
8
+ ASkeletonAvatar: "@alikhalilll/a-skeleton",
9
+ ASkeletonImage: "@alikhalilll/a-skeleton",
10
+ ASkeletonVideo: "@alikhalilll/a-skeleton",
11
+ ASkeletonButton: "@alikhalilll/a-skeleton",
12
+ ASkeletonInput: "@alikhalilll/a-skeleton",
13
+ ASkeletonListItem: "@alikhalilll/a-skeleton",
14
+ ASkeletonCard: "@alikhalilll/a-skeleton",
15
+ ASkeletonTable: "@alikhalilll/a-skeleton",
16
+ ASkeletonChart: "@alikhalilll/a-skeleton",
17
+ ASkeletonForm: "@alikhalilll/a-skeleton",
18
+ ASkeletonArticle: "@alikhalilll/a-skeleton",
19
+ ASkeletonDivider: "@alikhalilll/a-skeleton",
20
+ ASkeletonChip: "@alikhalilll/a-skeleton"
6
21
  };
7
22
  function ASkeletonResolver(opts = {}) {
8
23
  const prefix = opts.prefix ?? "";
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/resolver/index.ts"],"sourcesContent":["import type { ComponentResolver } from 'unplugin-vue-components';\n\n/**\n * `@alikhalilll/a-skeleton/resolver` — auto-import resolver for non-Nuxt\n * Vite/Webpack consumers via `unplugin-vue-components`.\n *\n * import Components from 'unplugin-vue-components/vite';\n * import ASkeletonResolver from '@alikhalilll/a-skeleton/resolver';\n * export default { plugins: [Components({ resolvers: [ASkeletonResolver()] })] };\n *\n * Registers `<ASkeleton>`, `<ASkeletonLayer>`, `<ASkeletonBlock>`.\n */\n\nexport interface ResolverOptions {\n /** Optional prefix the consumer uses (e.g. `'A'`). Defaults to the native `A*` names. */\n prefix?: string;\n}\n\nconst COMPONENT_TO_ENTRY: Record<string, string> = {\n ASkeleton: '@alikhalilll/a-skeleton',\n ASkeletonLayer: '@alikhalilll/a-skeleton',\n ASkeletonBlock: '@alikhalilll/a-skeleton',\n};\n\nexport default function ASkeletonResolver(opts: ResolverOptions = {}): ComponentResolver {\n const prefix = opts.prefix ?? '';\n return {\n type: 'component',\n resolve(name) {\n const bare = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;\n const from = COMPONENT_TO_ENTRY[bare];\n if (!from) return;\n return { name: bare, from };\n },\n };\n}\n"],"mappings":";AAkBA,MAAM,qBAA6C;CACjD,WAAW;CACX,gBAAgB;CAChB,gBAAgB;AAClB;AAEA,SAAwB,kBAAkB,OAAwB,CAAC,GAAsB;CACvF,MAAM,SAAS,KAAK,UAAU;CAC9B,OAAO;EACL,MAAM;EACN,QAAQ,MAAM;GACZ,MAAM,OAAO,UAAU,KAAK,WAAW,MAAM,IAAI,KAAK,MAAM,OAAO,MAAM,IAAI;GAC7E,MAAM,OAAO,mBAAmB;GAChC,IAAI,CAAC,MAAM;GACX,OAAO;IAAE,MAAM;IAAM;GAAK;EAC5B;CACF;AACF"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/resolver/index.ts"],"sourcesContent":["import type { ComponentResolver } from 'unplugin-vue-components';\n\n/**\n * `@alikhalilll/a-skeleton/resolver` — auto-import resolver for non-Nuxt\n * Vite/Webpack consumers via `unplugin-vue-components`.\n *\n * import Components from 'unplugin-vue-components/vite';\n * import ASkeletonResolver from '@alikhalilll/a-skeleton/resolver';\n * export default { plugins: [Components({ resolvers: [ASkeletonResolver()] })] };\n *\n * Registers `<ASkeleton>`, `<ASkeletonLayer>`, `<ASkeletonBlock>`.\n */\n\nexport interface ResolverOptions {\n /** Optional prefix the consumer uses (e.g. `'A'`). Defaults to the native `A*` names. */\n prefix?: string;\n}\n\nconst COMPONENT_TO_ENTRY: Record<string, string> = {\n ASkeleton: '@alikhalilll/a-skeleton',\n ASkeletonLayer: '@alikhalilll/a-skeleton',\n ASkeletonBlock: '@alikhalilll/a-skeleton',\n /* Variant primitives */\n ASkeletonText: '@alikhalilll/a-skeleton',\n ASkeletonHeading: '@alikhalilll/a-skeleton',\n ASkeletonAvatar: '@alikhalilll/a-skeleton',\n ASkeletonImage: '@alikhalilll/a-skeleton',\n ASkeletonVideo: '@alikhalilll/a-skeleton',\n ASkeletonButton: '@alikhalilll/a-skeleton',\n ASkeletonInput: '@alikhalilll/a-skeleton',\n ASkeletonListItem: '@alikhalilll/a-skeleton',\n ASkeletonCard: '@alikhalilll/a-skeleton',\n ASkeletonTable: '@alikhalilll/a-skeleton',\n ASkeletonChart: '@alikhalilll/a-skeleton',\n ASkeletonForm: '@alikhalilll/a-skeleton',\n ASkeletonArticle: '@alikhalilll/a-skeleton',\n ASkeletonDivider: '@alikhalilll/a-skeleton',\n ASkeletonChip: '@alikhalilll/a-skeleton',\n};\n\nexport default function ASkeletonResolver(opts: ResolverOptions = {}): ComponentResolver {\n const prefix = opts.prefix ?? '';\n return {\n type: 'component',\n resolve(name) {\n const bare = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;\n const from = COMPONENT_TO_ENTRY[bare];\n if (!from) return;\n return { name: bare, from };\n },\n };\n}\n"],"mappings":";AAkBA,MAAM,qBAA6C;CACjD,WAAW;CACX,gBAAgB;CAChB,gBAAgB;CAEhB,eAAe;CACf,kBAAkB;CAClB,iBAAiB;CACjB,gBAAgB;CAChB,gBAAgB;CAChB,iBAAiB;CACjB,gBAAgB;CAChB,mBAAmB;CACnB,eAAe;CACf,gBAAgB;CAChB,gBAAgB;CAChB,eAAe;CACf,kBAAkB;CAClB,kBAAkB;CAClB,eAAe;AACjB;AAEA,SAAwB,kBAAkB,OAAwB,CAAC,GAAsB;CACvF,MAAM,SAAS,KAAK,UAAU;CAC9B,OAAO;EACL,MAAM;EACN,QAAQ,MAAM;GACZ,MAAM,OAAO,UAAU,KAAK,WAAW,MAAM,IAAI,KAAK,MAAM,OAAO,MAAM,IAAI;GAC7E,MAAM,OAAO,mBAAmB;GAChC,IAAI,CAAC,MAAM;GACX,OAAO;IAAE,MAAM;IAAM;GAAK;EAC5B;CACF;AACF"}
package/dist/styles.css CHANGED
@@ -1,24 +1,42 @@
1
1
  /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
2
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}:root,.light{--ak-ui-background:0 0% 100%;--ak-ui-foreground:240 10% 3.9%;--ak-ui-card:0 0% 100%;--ak-ui-card-foreground:240 10% 3.9%;--ak-ui-popover:0 0% 100%;--ak-ui-popover-foreground:240 10% 3.9%;--ak-ui-primary:240 5.9% 10%;--ak-ui-primary-foreground:0 0% 98%;--ak-ui-secondary:240 4.8% 95.9%;--ak-ui-secondary-foreground:240 5.9% 10%;--ak-ui-muted:240 4.8% 95.9%;--ak-ui-muted-foreground:240 3.8% 46.1%;--ak-ui-accent:240 4.8% 95.9%;--ak-ui-accent-foreground:240 5.9% 10%;--ak-ui-destructive:0 84.2% 60.2%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 5.9% 90%;--ak-ui-input:240 5.9% 90%;--ak-ui-ring:240 5.9% 10%;--ak-ui-radius:.5rem}.dark{--ak-ui-background:240 10% 3.9%;--ak-ui-foreground:0 0% 98%;--ak-ui-card:240 10% 3.9%;--ak-ui-card-foreground:0 0% 98%;--ak-ui-popover:240 10% 3.9%;--ak-ui-popover-foreground:0 0% 98%;--ak-ui-primary:0 0% 98%;--ak-ui-primary-foreground:240 5.9% 10%;--ak-ui-secondary:240 3.7% 15.9%;--ak-ui-secondary-foreground:0 0% 98%;--ak-ui-muted:240 3.7% 15.9%;--ak-ui-muted-foreground:240 5% 64.9%;--ak-ui-accent:240 3.7% 15.9%;--ak-ui-accent-foreground:0 0% 98%;--ak-ui-destructive:0 62.8% 30.6%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 3.7% 15.9%;--ak-ui-input:240 3.7% 15.9%;--ak-ui-ring:240 4.9% 83.9%}:root,:host{--spacing:.25rem}.relative{position:relative}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.\!mt-3{margin-top:calc(var(--spacing) * 3)!important}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.items-start{align-items:flex-start}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.p-4{padding:calc(var(--spacing) * 4)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}:root{--ak-skeleton-block:hsl(var(--ak-ui-muted) / .55);--ak-skeleton-block-soft:hsl(var(--ak-ui-muted) / .32);--ak-skeleton-shimmer:hsl(var(--ak-ui-foreground) / .08);--ak-skeleton-radius:.375rem;--ak-skeleton-duration:1.6s;--ak-skeleton-pulse-opacity:.48;--ak-skeleton-shimmer-angle:110deg;--ak-skeleton-ring:hsl(var(--ak-ui-foreground) / .04)}.light{--ak-skeleton-shimmer:#ffffffd9;--ak-skeleton-ring:#0000000d}.a-skel-block{background-image:linear-gradient(180deg, var(--ak-skeleton-block) 0%, var(--ak-skeleton-block-soft) 100%);background-color:var(--ak-skeleton-block);border-radius:var(--ak-skeleton-radius);box-shadow:inset 0 0 0 1px var(--ak-skeleton-ring);isolation:isolate;position:relative;overflow:hidden}.a-skel-block--anim-shimmer:after{content:"";background-image:linear-gradient(var(--ak-skeleton-shimmer-angle), transparent 30%, var(--ak-skeleton-shimmer) 50%, transparent 70%);will-change:transform;animation:a-skel-shimmer var(--ak-skeleton-duration) cubic-bezier(.42, 0, .58, 1) infinite;z-index:1;position:absolute;inset:0 -25%;transform:translate(-110%)}.a-skel-block--anim-pulse{animation:a-skel-pulse var(--ak-skeleton-duration) cubic-bezier(.42, 0, .58, 1) infinite;will-change:opacity}@keyframes a-skel-shimmer{0%{transform:translate(-110%)}to{transform:translate(110%)}}@keyframes a-skel-pulse{0%,to{opacity:1}50%{opacity:var(--ak-skeleton-pulse-opacity)}}@media (prefers-reduced-motion:reduce){.a-skel-block--anim-shimmer:after,.a-skel-block--anim-pulse{will-change:auto;animation:none}.a-skel-block--anim-shimmer:after{opacity:.5;transform:translate(0)}}.a-skeleton__layer{contain:layout style paint;content-visibility:auto;position:relative}.a-skeleton__layer>.a-skel-block{contain:strict;position:absolute}.a-skel-block--text{border-radius:calc(var(--ak-skeleton-radius) * .6)}.a-skel-block--circle{background-image:radial-gradient(circle at 35% 30%, var(--ak-skeleton-block) 0%, var(--ak-skeleton-block-soft) 100%)}.a-skel-block--image{background-image:linear-gradient(160deg, var(--ak-skeleton-block) 0%, var(--ak-skeleton-block-soft) 60%, var(--ak-skeleton-block) 100%)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
2
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}:root,.light{--ak-ui-background:0 0% 100%;--ak-ui-foreground:240 10% 3.9%;--ak-ui-card:0 0% 100%;--ak-ui-card-foreground:240 10% 3.9%;--ak-ui-popover:0 0% 100%;--ak-ui-popover-foreground:240 10% 3.9%;--ak-ui-primary:240 5.9% 10%;--ak-ui-primary-foreground:0 0% 98%;--ak-ui-secondary:240 4.8% 95.9%;--ak-ui-secondary-foreground:240 5.9% 10%;--ak-ui-muted:240 4.8% 95.9%;--ak-ui-muted-foreground:240 3.8% 46.1%;--ak-ui-accent:240 4.8% 95.9%;--ak-ui-accent-foreground:240 5.9% 10%;--ak-ui-destructive:0 84.2% 60.2%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 5.9% 90%;--ak-ui-input:240 5.9% 90%;--ak-ui-ring:240 5.9% 10%;--ak-ui-radius:.5rem}.dark{--ak-ui-background:240 10% 3.9%;--ak-ui-foreground:0 0% 98%;--ak-ui-card:240 10% 3.9%;--ak-ui-card-foreground:0 0% 98%;--ak-ui-popover:240 10% 3.9%;--ak-ui-popover-foreground:0 0% 98%;--ak-ui-primary:0 0% 98%;--ak-ui-primary-foreground:240 5.9% 10%;--ak-ui-secondary:240 3.7% 15.9%;--ak-ui-secondary-foreground:0 0% 98%;--ak-ui-muted:240 3.7% 15.9%;--ak-ui-muted-foreground:240 5% 64.9%;--ak-ui-accent:240 3.7% 15.9%;--ak-ui-accent-foreground:0 0% 98%;--ak-ui-destructive:0 62.8% 30.6%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 3.7% 15.9%;--ak-ui-input:240 3.7% 15.9%;--ak-ui-ring:240 4.9% 83.9%}:root,:host{--color-red-500:oklch(63.7% .237 25.331);--color-emerald-600:oklch(59.6% .145 163.225);--color-blue-500:oklch(62.3% .214 259.815);--color-zinc-300:oklch(87.1% .006 286.286);--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-semibold:600;--font-weight-bold:700;--leading-relaxed:1.625;--radius-md:.375rem;--radius-xl:.75rem;--radius-2xl:1rem;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.-top-12{top:calc(var(--spacing) * -12)}.-left-12{left:calc(var(--spacing) * -12)}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.\!mt-3{margin-top:calc(var(--spacing) * 3)!important}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.list-item{display:list-item}.table{display:table}.table-cell{display:table-cell}.table-row{display:table-row}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.h-4{height:calc(var(--spacing) * 4)}.h-16{height:calc(var(--spacing) * 16)}.h-32{height:calc(var(--spacing) * 32)}.h-72{height:calc(var(--spacing) * 72)}.w-4{width:calc(var(--spacing) * 4)}.w-16{width:calc(var(--spacing) * 16)}.w-32{width:calc(var(--spacing) * 32)}.w-72{width:calc(var(--spacing) * 72)}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.\!border{border-style:var(--tw-border-style)!important;border-width:1px!important}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-zinc-300{border-color:var(--color-zinc-300)}.bg-\[\#1A7B4E\]{background-color:#1a7b4e}.bg-\[\#hex\]{background-color:#hex}.bg-blue-500{background-color:var(--color-blue-500)}.bg-emerald-600{background-color:var(--color-emerald-600)}.bg-muted{background-color:hsl(var(--ak-ui-muted))}.bg-red-500{background-color:var(--color-red-500)}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-3{padding-block:calc(var(--spacing) * 3)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-white{color:var(--color-white)}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow\/filter{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}:root{--ak-skel-base:var(--ak-skeleton-block,#d1d4dc);--ak-skel-base-soft:var(--ak-skeleton-block-soft,#e5e7eb);--ak-skel-highlight:var(--ak-skeleton-shimmer,#fffffff2);--ak-skel-radius:var(--ak-skeleton-radius,.5rem);--ak-skel-radius-sm:.25rem;--ak-skel-radius-lg:1rem;--ak-skel-duration:var(--ak-skeleton-duration,1.4s);--ak-skel-pulse-min:var(--ak-skeleton-pulse-opacity,.55);--ak-skel-ring:var(--ak-skeleton-ring,#a9afbc59);--ak-skel-icon:#9aa2b1;--ak-skeleton-shimmer-angle:110deg}.dark{--ak-skel-base:#31363f;--ak-skel-base-soft:#3e4451;--ak-skel-highlight:#ffffff14;--ak-skel-ring:#ffffff0f;--ak-skel-icon:#7d879b}@media (prefers-color-scheme:dark){:root:not(.light){--ak-skel-base:#31363f;--ak-skel-base-soft:#3e4451;--ak-skel-highlight:#ffffff14;--ak-skel-ring:#ffffff0f;--ak-skel-icon:#7d879b}}.light{--ak-skel-base:#d1d4dc;--ak-skel-base-soft:#e5e7eb;--ak-skel-highlight:#fffffff2;--ak-skel-ring:#a9afbc59;--ak-skel-icon:#9aa2b1}.a-skel{isolation:isolate;display:block;position:relative;overflow:hidden}:where(.a-skel){background-color:var(--ak-skel-base);border-radius:var(--ak-skel-radius);box-shadow:inset 0 0 0 1px var(--ak-skel-ring)}.a-skel-block{isolation:isolate;display:block;position:relative;overflow:hidden}:where(.a-skel-block){background-color:var(--ak-skel-base);border-radius:var(--ak-skel-radius);box-shadow:inset 0 0 0 1px var(--ak-skel-ring)}.a-skel-text-host{display:block;position:relative}.a-skel-text-content{-webkit-text-fill-color:transparent;background-color:var(--ak-skel-base);border-radius:var(--ak-skel-radius-sm);-webkit-box-decoration-break:clone;box-decoration-break:clone;-webkit-user-select:none;user-select:none;cursor:default;background-image:none;display:inline;color:#0000!important}.a-skel-anim-pulse,.a-skel-block--anim-pulse,.a-skel-text-content.a-skel-block--anim-pulse,.a-skel-text-content.a-skel-block--anim-shimmer{animation:a-skel-pulse var(--ak-skel-duration) ease-in-out infinite}@keyframes a-skel-pulse{0%,to{opacity:1}50%{opacity:var(--ak-skel-pulse-min)}}.a-skel-anim-shimmer.a-skel:after,.a-skel-block.a-skel-block--anim-shimmer:after{content:"";background-image:linear-gradient(110deg, transparent 30%, var(--ak-skel-highlight) 50%, transparent 70%);will-change:transform;animation:a-skel-shimmer-sweep var(--ak-skel-duration) cubic-bezier(.42, 0, .58, 1) infinite;z-index:1;position:absolute;inset:0 -25%;transform:translate(-110%)}@keyframes a-skel-shimmer-sweep{0%{transform:translate(-110%)}to{transform:translate(110%)}}.a-skel-anim-wave.a-skel,.a-skel-block.a-skel-block--anim-wave{background-image:linear-gradient(90deg, var(--ak-skel-base) 0%, var(--ak-skel-base) 25%, var(--ak-skel-highlight) 50%, var(--ak-skel-base) 75%, var(--ak-skel-base) 100%);animation:a-skel-wave-slide var(--ak-skel-duration) linear infinite;background-repeat:no-repeat;background-size:200% 100%}@keyframes a-skel-wave-slide{0%{background-position:200% 0}to{background-position:-100% 0}}@media (prefers-reduced-motion:reduce){.a-skel-anim-pulse,.a-skel-anim-shimmer,.a-skel-anim-wave,.a-skel-block--anim-pulse,.a-skel-block--anim-shimmer,.a-skel-block--anim-wave,.a-skel-text-content{animation:none!important}.a-skel-anim-shimmer.a-skel:after,.a-skel-block.a-skel-block--anim-shimmer:after{opacity:.3;animation:none;transform:translate(0)}}.a-skeleton{display:block;position:relative}.a-skeleton[data-loading]{overflow-clip-margin:0;contain:paint;overflow:clip}.a-skeleton__mirror *,.a-skeleton__variants *{-webkit-user-select:none;user-select:none;pointer-events:none}.a-skeleton__mirror button,.a-skeleton__mirror input,.a-skeleton__mirror a,.a-skeleton__variants button,.a-skeleton__variants input,.a-skeleton__variants a{cursor:default}.a-skeleton__fallback .a-skel-fallback-default{border-radius:var(--ak-skel-radius);width:100%;height:4rem}.a-skel-variant-text{background-color:var(--ak-skel-base);border-radius:var(--ak-skel-radius-sm);height:.85em;display:block}.a-skel-variant-heading{background-color:var(--ak-skel-base);border-radius:var(--ak-skel-radius-sm);height:1.4em;display:block}.a-skel-variant-avatar{background-color:var(--ak-skel-base);display:inline-block}:where(.a-skel-variant-avatar){border-radius:9999px}.a-skel-variant-image,.a-skel-variant-video{background-color:var(--ak-skel-base);color:var(--ak-skel-icon);justify-content:center;align-items:center;display:flex}:where(.a-skel-variant-image),:where(.a-skel-variant-video){border-radius:var(--ak-skel-radius-lg);aspect-ratio:16/9}.a-skel-variant-button{background-color:var(--ak-skel-base)}:where(.a-skel-variant-button){border-radius:var(--ak-skel-radius)}.a-skel-variant-input{background-color:var(--ak-skel-base);position:relative}:where(.a-skel-variant-input){border-radius:var(--ak-skel-radius);border:1px solid var(--ak-skel-ring);background-color:#0000}.a-skel-variant-input:before{content:"";background-color:var(--ak-skel-base);border-radius:var(--ak-skel-radius-sm);width:35%;height:.6em;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}.a-skel-variant-card{flex-direction:column;gap:.75rem;display:flex}:where(.a-skel-variant-card){border-radius:var(--ak-skel-radius-lg);border:1px solid var(--ak-skel-ring);box-shadow:none;background-color:#0000;padding:1rem}.a-skel-variant-list-item{align-items:center;gap:.75rem;padding:.75rem 0;display:flex}.a-skel-variant-list-item__body{flex-direction:column;flex:1;gap:.4rem;display:flex}.a-skel-variant-table{flex-direction:column;gap:.5rem;width:100%;display:flex}.a-skel-variant-table__row{gap:.5rem;display:grid}.a-skel-variant-chart{align-items:flex-end;gap:.5rem;width:100%;height:8rem;display:flex}.a-skel-variant-chart__bar{background-color:var(--ak-skel-base);border-radius:var(--ak-skel-radius-sm) var(--ak-skel-radius-sm) 0 0;flex:1}.a-skel-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}
3
3
  /* --- bundled SFC styles --- */
4
4
 
5
+ .a-skeleton__clone[data-v-1554ff36] {
6
+ overflow: hidden;
7
+ isolation: isolate;
8
+ }
9
+ .a-skeleton__clone[data-v-1554ff36] .a-skel-clone-leaf {
10
+ display: flex;
11
+ align-items: center;
12
+ justify-content: center;
13
+ color: var(--ak-skel-icon);
14
+ }
15
+ .a-skeleton__clone[data-v-1554ff36] .a-skel-clone-icon {
16
+ width: clamp(20px, 30%, 56px);
17
+ height: clamp(20px, 30%, 56px);
18
+ opacity: 0.6;
19
+ }
20
+ .a-skeleton__clone[data-v-1554ff36] .a-skel-clone-textbar {
21
+ pointer-events: none;
22
+ }
23
+
5
24
  .a-skeleton[data-v-16717541] {
6
25
  display: block;
7
26
  position: relative;
8
27
  }
9
-
10
- /* `.a-skeleton__layer` + `.a-skeleton__layer > .a-skel-block` layout/containment
11
- * live in `styles.src.css` so they're shared with the public `<ASkeletonLayer>`
12
- * component. */
13
- .a-skeleton__structural[data-v-16717541] * {
14
- /* Disable text caret/selection on the structural copy so it doesn't look
15
- * interactive. Layout (flex/grid/spacing/sizing) flows through unchanged. */
28
+ .a-skeleton[data-loading][data-v-16717541] {
29
+ overflow: hidden;
30
+ overflow: clip;
31
+ overflow-clip-margin: 0;
32
+ }
33
+ .a-skeleton__mirror[data-v-16717541] * {
16
34
  user-select: none;
17
35
  pointer-events: none;
18
36
  }
19
- .a-skeleton__structural[data-v-16717541] button,
20
- .a-skeleton__structural[data-v-16717541] input,
21
- .a-skeleton__structural[data-v-16717541] a {
37
+ .a-skeleton__mirror[data-v-16717541] button,
38
+ .a-skeleton__mirror[data-v-16717541] input,
39
+ .a-skeleton__mirror[data-v-16717541] a {
22
40
  cursor: default;
23
41
  }
24
42
  .a-skeleton__fallback[data-v-16717541] .a-skel-fallback-default {
@@ -27,6 +45,33 @@
27
45
  border-radius: 0.5rem;
28
46
  }
29
47
 
48
+ /* Clone-mode capture mount: needs to be in the DOM so we can read computed
49
+ * styles from it, but invisible while the snapshot replay is showing. We use
50
+ * `visibility: hidden` (not `display: none`) so layout is preserved — the
51
+ * snapshot needs real geometry. `pointer-events: none` keeps it inert. */
52
+ .a-skeleton__capture--hidden[data-v-16717541] {
53
+ visibility: hidden;
54
+ pointer-events: none;
55
+ user-select: none;
56
+ /* The capture mount sits behind the replay (z-index 0 vs 1) so the replay
57
+ * paints over it. We keep it in normal flow so its `getBoundingClientRect`
58
+ * still reports the real layout (off-flow positioning would zero it). */
59
+ }
60
+ .a-skeleton__replay[data-v-16717541] {
61
+ position: absolute;
62
+ inset: 0;
63
+ z-index: 1;
64
+ }
65
+ .a-skeleton__mirror--fallback[data-v-16717541] {
66
+ position: absolute;
67
+ inset: 0;
68
+ /* Sits BEHIND the clone replay (z-index: 0) so when the replay mounts on top
69
+ * it covers the mirror. If the replay turns out to be empty / sized wrong,
70
+ * the mirror underneath still gives the user a structural skeleton instead
71
+ * of a blank wrapper. */
72
+ z-index: 0;
73
+ }
74
+
30
75
  .a-skel-block-stack[data-v-bdfba69a] {
31
76
  display: flex;
32
77
  flex-direction: column;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alikhalilll/a-skeleton",
3
- "version": "1.0.0",
3
+ "version": "1.2.0",
4
4
  "description": "Self-generating Vue 3 / Nuxt 3+ skeleton loader. First paint mirrors the slot's HTML structure; second load replays a pixel-aligned shape captured from the real DOM. Themeable via CSS vars. Part of the @alikhalilll/a-* toolkit.",
5
5
  "license": "MIT",
6
6
  "author": "alikhalilll",
@@ -72,7 +72,8 @@
72
72
  "src",
73
73
  "web-types.json",
74
74
  "README.md",
75
- "LICENSE"
75
+ "LICENSE",
76
+ ".media"
76
77
  ],
77
78
  "engines": {
78
79
  "node": ">=18"
@@ -107,11 +108,16 @@
107
108
  "unplugin-vue-components": "^32.1.0",
108
109
  "vue": "^3.5.0",
109
110
  "vue-tsc": "^3.2.4",
111
+ "vitest": "^3.1.0",
112
+ "@vue/test-utils": "^2.4.6",
113
+ "happy-dom": "^15.10.2",
110
114
  "@alikhalilll/a-ui-base": "1.0.0"
111
115
  },
112
116
  "scripts": {
113
117
  "clean": "rimraf dist web-types.json",
114
118
  "build": "tsx ../../../scripts/build/run-component-build.ts",
119
+ "test": "vitest run",
120
+ "test:watch": "vitest",
115
121
  "typecheck": "vue-tsc --noEmit -p tsconfig.json",
116
122
  "validate-dist": "tsx ../../../scripts/validate/dist-validate.ts --pkg a-skeleton",
117
123
  "validate-consumer": "tsx ../../../scripts/validate/consumer-validate.ts --pkg a-skeleton",