refactor(primitives): move skeleton to primitives

package.json

@@ -107,7 +107,12 @@
   },
   "pnpm": {
     "overrides": {
+      "axios@>=1.15.2 <1.18.0": "1.18.0",
+      "brace-expansion@<1.1.16": "1.1.16",
+      "brace-expansion@>=2.0.0 <2.1.2": "2.1.2",
+      "fast-uri@>=3.0.0 <=3.1.3": "3.1.4",
       "form-data": "4.0.6",
+      "js-yaml@>=3.0.0 <3.15.0": "3.15.0",
       "undici": "7.28.0",
       "ws": "8.21.0"
     }

scripts/verify-package-consumption.mjs

@@ -4,7 +4,7 @@ import { createRequire } from 'node:module';
 import { tmpdir } from 'node:os';
 import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { Button, Divider, Spacer } from '@stack-and-flow/design-system';
+import { Button, Divider, Skeleton, Spacer } from '@stack-and-flow/design-system';
 
 const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
 const loadCjs = createRequire(import.meta.url);
@@ -23,6 +23,10 @@ if (typeof Spacer !== 'function') {
   throw new TypeError(`Expected ESM Spacer export to be a function, received ${typeof Spacer}`);
 }
 
+if (typeof Skeleton !== 'function') {
+  throw new TypeError(`Expected ESM Skeleton export to be a function, received ${typeof Skeleton}`);
+}
+
 if (typeof cjsExports.Button !== 'function') {
   throw new TypeError(`Expected CJS Button export to be a function, received ${typeof cjsExports.Button}`);
 }
@@ -35,6 +39,10 @@ if (typeof cjsExports.Spacer !== 'function') {
   throw new TypeError(`Expected CJS Spacer export to be a function, received ${typeof cjsExports.Spacer}`);
 }
 
+if (typeof cjsExports.Skeleton !== 'function') {
+  throw new TypeError(`Expected CJS Skeleton export to be a function, received ${typeof cjsExports.Skeleton}`);
+}
+
 const cssPath = resolve(packageRoot, 'dist/design-system.css');
 if (stylesPath !== cssPath) {
   throw new Error(`Expected styles subpath to resolve to ${cssPath}, received ${stylesPath}`);
@@ -140,10 +148,13 @@ try {
 import type {
   DividerColor,
   DividerProps,
+  SkeletonProps,
+  SkeletonRounded,
+  SkeletonSize,
   SpacerProps,
   SpacerScale
 } from '@stack-and-flow/design-system';
-import { Button, Divider, Popover, Select, Spacer } from '@stack-and-flow/design-system';
+import { Button, Divider, Popover, Select, Skeleton, Spacer } from '@stack-and-flow/design-system';
 
 const buttonProps: ComponentProps<typeof Button> = {
   text: 'Save',
@@ -165,6 +176,17 @@ const spacerProps: ComponentProps<typeof Spacer> = {
 };
 const explicitSpacerProps: SpacerProps = spacerProps;
 
+const skeletonSize: SkeletonSize = 'title';
+const skeletonRounded: SkeletonRounded = 'lg';
+const skeletonProps: ComponentProps<typeof Skeleton> = {
+  size: skeletonSize,
+  rounded: skeletonRounded,
+  ariaHidden: false,
+  role: 'status',
+  'aria-label': 'Loading profile'
+};
+const explicitSkeletonProps: SkeletonProps = skeletonProps;
+
 const selectProps: ComponentProps<typeof Select> = {
   ariaLabel: 'Framework',
   options: [{ key: 'react', label: 'React' }]
@@ -173,6 +195,7 @@ const selectProps: ComponentProps<typeof Select> = {
 const button = <Button {...buttonProps} />;
 const divider = <Divider {...dividerProps} />;
 const spacer = <Spacer {...spacerProps} />;
+const skeleton = <Skeleton {...skeletonProps} />;
 const select = <Select {...selectProps} />;
 const popover = (
   <Popover>
@@ -186,6 +209,8 @@ void divider;
 void explicitDividerProps;
 void spacer;
 void explicitSpacerProps;
+void skeleton;
+void explicitSkeletonProps;
 void select;
 void popover;
 `
@@ -194,7 +219,7 @@ void popover;
     writeFileSync(
       resolve(consumerDir, 'smoke.mjs'),
       `import { createRequire } from 'node:module';
-import { Button, Divider, Spacer } from '@stack-and-flow/design-system';
+import { Button, Divider, Skeleton, Spacer } from '@stack-and-flow/design-system';
 
 const require = createRequire(import.meta.url);
 const cjsExports = require('@stack-and-flow/design-system');
@@ -209,6 +234,9 @@ if (typeof Divider !== 'function') {
 if (typeof Spacer !== 'function') {
   throw new TypeError('Expected ESM Spacer export to be a function');
 }
+if (typeof Skeleton !== 'function') {
+  throw new TypeError('Expected ESM Skeleton export to be a function');
+}
 if (typeof cjsExports.Button !== 'function') {
   throw new TypeError('Expected CJS Button export to be a function');
 }
@@ -218,6 +246,9 @@ if (typeof cjsExports.Divider !== 'function') {
 if (typeof cjsExports.Spacer !== 'function') {
   throw new TypeError('Expected CJS Spacer export to be a function');
 }
+if (typeof cjsExports.Skeleton !== 'function') {
+  throw new TypeError('Expected CJS Skeleton export to be a function');
+}
 if (!stylesPath.endsWith('dist/design-system.css')) {
   throw new Error(\`Expected styles subpath to resolve to dist/design-system.css, received \${stylesPath}\`);
 }
@@ -240,5 +271,5 @@ if (!stylesPath.endsWith('dist/design-system.css')) {
 }
 
 console.log(
-  'Package consumption verified: ESM/CJS root Button, Divider, and Spacer imports, styles subpath, and React 18/19 consumers are available.'
+  'Package consumption verified: ESM/CJS root Button, Divider, Skeleton, and Spacer imports, styles subpath, and React 18/19 consumers are available.'
 );

src/components/atoms/skeleton/Skeleton.stories.tsx → src/components/primitives/skeleton/Skeleton.stories.tsx

@@ -18,7 +18,7 @@ const swatchClass = 'flex flex-col gap-2';
  * Skeleton instances to preview the shape of loading content without hardcoding dimensions.
  */
 const meta: Meta<typeof Skeleton> = {
-  title: 'Atoms/Skeleton',
+  title: 'Primitives/Skeleton',
   component: Skeleton,
   parameters: {
     docs: {
@@ -31,6 +31,7 @@ export default meta;
 
 type Story = StoryObj<typeof Skeleton>;
 
+/** Demonstrates the default text placeholder footprint and medium radius used by the component defaults. */
 export const Default: Story = {
   render: () => (
     <div className={frameClass}>

src/index.ts

@@ -20,7 +20,6 @@ export { LottieAnimation } from './components/atoms/lottie-animation';
 export { Popover } from './components/atoms/popover';
 export { Progress } from './components/atoms/progress';
 export { Select } from './components/atoms/select';
-export { Skeleton } from './components/atoms/skeleton';
 export { Slider } from './components/atoms/slider';
 export { Switch } from './components/atoms/switch';
 export { Table } from './components/atoms/table';
@@ -53,5 +52,7 @@ export { ToastProvider, toast } from './components/organisms/toast';
 // ─── Primitives ──────────────────────────────────────────────────────────────
 export { Divider } from './components/primitives/divider';
 export type * from './components/primitives/divider/types';
+export { Skeleton } from './components/primitives/skeleton';
+export type * from './components/primitives/skeleton/types';
 export { Spacer } from './components/primitives/spacer';
 export type * from './components/primitives/spacer/types';