@bspk/ui 1.1.11 → 1.1.13

package/dist/EmptyState.d.ts

@@ -15,6 +15,12 @@ export type EmptyStateProps = {
      * @required
      */
     body: string;
+    /**
+     * The text alignment of the body.
+     *
+     * @default center
+     */
+    bodyAlign?: 'center' | 'left' | 'right';
     /**
      * This property may be undefined or an object containing required CallToActionButton properties.
      *
@@ -27,7 +33,7 @@ export type EmptyStateProps = {
  *
  * @name EmptyState
  */
-declare function EmptyState({ children, header, body, callToAction }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+declare function EmptyState({ children, header, body, callToAction, bodyAlign }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
 declare namespace EmptyState {
     var bspkName: string;
 }

package/dist/EmptyState.js

@@ -7,11 +7,11 @@ import { Txt } from './Txt';
  *
  * @name EmptyState
  */
-function EmptyState({ children, header, body, callToAction }) {
+function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }) {
     return (_jsxs(Layout, { align: "center", column: true, "data-bspk": "empty-state", style: {
             margin: 'var(--spacing-sizing-04)',
             maxWidth: '500px',
-        }, children: [children, _jsxs(Layout, { align: "center", column: true, gap: "4", children: [_jsx(Txt, { as: "div", variant: "heading-h5", children: header }), _jsx(Txt, { as: "div", variant: "body-base", children: body })] }), callToAction && (_jsx(Button, { label: callToAction.label, onClick: callToAction.onClick, size: callToAction.size || 'medium', variant: "primary" }))] }));
+        }, children: [children, _jsxs(Layout, { align: "center", column: true, gap: "4", children: [_jsx(Txt, { as: "header", variant: "heading-h5", children: header }), _jsx(Txt, { as: "p", style: { textAlign: bodyAlign }, variant: "body-base", children: body })] }), callToAction && (_jsx(Button, { label: callToAction.label, onClick: callToAction.onClick, size: callToAction.size || 'medium', variant: "primary" }))] }));
 }
 EmptyState.bspkName = 'EmptyState';
 export { EmptyState };

package/dist/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../src/EmptyState.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AA2B5B;;;;GAIG;AACH,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAmB;IACzE,OAAO,CACH,MAAC,MAAM,IACH,KAAK,EAAC,QAAQ,EACd,MAAM,qBACI,aAAa,EACvB,KAAK,EAAE;YACH,MAAM,EAAE,0BAA0B;YAClC,QAAQ,EAAE,OAAO;SACpB,aAEA,QAAQ,EACT,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,QAAC,GAAG,EAAC,GAAG,aACjC,KAAC,GAAG,IAAC,EAAE,EAAC,KAAK,EAAC,OAAO,EAAC,YAAY,YAC7B,MAAM,GACL,EACN,KAAC,GAAG,IAAC,EAAE,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,YAC5B,IAAI,GACH,IACD,EACR,YAAY,IAAI,CACb,KAAC,MAAM,IACH,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAE,YAAY,CAAC,IAAI,IAAI,QAAQ,EACnC,OAAO,EAAC,SAAS,GACnB,CACL,IACI,CACZ,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../src/EmptyState.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAiC5B;;;;GAIG;AACH,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,GAAG,QAAQ,EAAmB;IAC/F,OAAO,CACH,MAAC,MAAM,IACH,KAAK,EAAC,QAAQ,EACd,MAAM,qBACI,aAAa,EACvB,KAAK,EAAE;YACH,MAAM,EAAE,0BAA0B;YAClC,QAAQ,EAAE,OAAO;SACpB,aAEA,QAAQ,EACT,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,QAAC,GAAG,EAAC,GAAG,aACjC,KAAC,GAAG,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,YAAY,YAChC,MAAM,GACL,EACN,KAAC,GAAG,IAAC,EAAE,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,OAAO,EAAC,WAAW,YAC3D,IAAI,GACH,IACD,EACR,YAAY,IAAI,CACb,KAAC,MAAM,IACH,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAE,YAAY,CAAC,IAAI,IAAI,QAAQ,EACnC,OAAO,EAAC,SAAS,GACnB,CACL,IACI,CACZ,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/Skeleton.d.ts

@@ -1,26 +1,65 @@
 import './skeleton.scss';
 import { TxtVariant } from './utils/txtVariants';
-export type SkeletonVariant = TxtVariant | 'other';
 export type SkeletonProps = {
     /**
-     * The text variant of the skeleton. If 'other' skeleton will expand to size of nearest relative positioned parent.
+     * The variant of the skeleton that best hints the content being loaded.
      *
-     * @default other
+     * @default text
      */
-    variant?: SkeletonVariant;
+    variant?: 'circular' | 'photo' | 'profile' | 'rectangular' | 'text' | 'thumbnail';
     /**
-     * The number of lines showing. Ignored when variant is other.
+     * The variant of the text being loaded. This is only used when variant is 'text'.
      *
-     * @default 1
+     * @default body-base
      */
-    lines?: number;
+    textVariant?: TxtVariant;
+    /**
+     * The number of lines showing. This is only used when variant is 'text'.
+     *
+     * @default 3
+     */
+    textLines?: number;
+    /**
+     * The width of the skeleton. This is ignored when variant is 'text', 'profile', or 'thumbnail'.
+     *
+     * @default 200
+     */
+    width?: number | string;
+    /**
+     * The height of the skeleton. This is ignored when variant is 'text', 'profile', or 'thumbnail'.
+     *
+     * @default 100
+     */
+    height?: number | string;
 };
 /**
  * A visual placeholder for an element while it is in a loading state.
  *
+ * The data for your components might not be immediately available. You can improve the perceived responsiveness of the
+ * page by using skeletons. It feels like things are happening immediately, then the information is incrementally
+ * displayed on the screen.
+ *
+ * @example
+ *     function Example() {
+ *         return item ? (
+ *             <img
+ *                 style={{
+ *                     width: 210,
+ *                     height: 118,
+ *                 }}
+ *                 alt={item.title}
+ *                 src={item.src}
+ *             />
+ *         ) : (
+ *             <Skeleton variant="photo" width={210} height={118} />
+ *         );
+ *     }
+ *
+ * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
+ *
  * @name Skeleton
  */
-declare function Skeleton({ variant, lines: linesProp }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function Skeleton({ width, height, textLines, textVariant: textSize, variant, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Skeleton {
     var bspkName: string;
 }

package/dist/Skeleton.js

@@ -1,20 +1,46 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { styleAdd } from './utils/styleAdd';
 styleAdd(`[data-bspk=skeleton]{/*! 
---margin: is set via inline style
+--text-margin: is set via inline style
+--text-height: is set via inline style
 --height: is set via inline style
-*/width:100%;display:flex;flex-direction:column;gap:var(--margin);animation:skeleton-pulse 1.5s infinite}@keyframes skeleton-pulse{0%{opacity:.8}50%{opacity:.4}100%{opacity:.8}}[data-bspk=skeleton]:empty{width:auto;height:auto;position:absolute;inset:0;background:var(--foreground-neutral-skeleton-element);border-radius:var(--radius-small)}[data-bspk=skeleton] [data-line]{width:100%;background:var(--foreground-neutral-skeleton-element);border-radius:var(--radius-small);height:var(--height)}`);;
+--width: is set via inline style
+*/display:flex;flex-direction:column;gap:var(--text-margin);animation:skeleton-pulse 1.5s infinite;background:var(--foreground-neutral-skeleton-element)}@keyframes skeleton-pulse{0%{opacity:.8}50%{opacity:.4}100%{opacity:.8}}[data-bspk=skeleton][data-variant=rectangular],[data-bspk=skeleton][data-variant=photo]{min-width:var(--spacing-sizing-08);min-height:var(--spacing-sizing-08);height:var(--height, var(--width));width:var(--width, var(--height));border-radius:var(--radius-small)}[data-bspk=skeleton][data-variant=photo]{border-radius:var(--radius-medium)}[data-bspk=skeleton][data-variant=circular]{border-radius:100%;width:var(--width);aspect-ratio:1/1}[data-bspk=skeleton][data-variant=profile]{border-radius:100%;width:var(--spacing-sizing-10);aspect-ratio:1/1}[data-bspk=skeleton][data-variant=thumbnail]{width:var(--spacing-sizing-12);height:var(--spacing-sizing-12);border-radius:var(--radius-small)}[data-bspk=skeleton][data-variant=text]{background:rgba(0,0,0,0);min-height:unset;max-height:unset;width:100%;height:fit-content}[data-bspk=skeleton][data-variant=text] [data-line]{width:100%;background:var(--foreground-neutral-skeleton-element);border-radius:var(--radius-small);height:var(--text-height)}[data-bspk=skeleton][data-variant=text]:has([data-line]:nth-child(2)) [data-line]:last-child{width:80%}`);;
 /**
  * A visual placeholder for an element while it is in a loading state.
  *
+ * The data for your components might not be immediately available. You can improve the perceived responsiveness of the
+ * page by using skeletons. It feels like things are happening immediately, then the information is incrementally
+ * displayed on the screen.
+ *
+ * @example
+ *     function Example() {
+ *         return item ? (
+ *             <img
+ *                 style={{
+ *                     width: 210,
+ *                     height: 118,
+ *                 }}
+ *                 alt={item.title}
+ *                 src={item.src}
+ *             />
+ *         ) : (
+ *             <Skeleton variant="photo" width={210} height={118} />
+ *         );
+ *     }
+ *
+ * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
+ *
  * @name Skeleton
  */
-function Skeleton({ variant = 'other', lines: linesProp = 3 }) {
-    const lines = Math.max(1, linesProp || 0);
-    return (_jsx("div", { "data-bspk": "skeleton", style: {
-            '--margin': `calc(var(--${variant}-line-height) - var(--${variant}-size))`,
-            '--height': `var(--${variant}-size)`,
-        }, children: variant !== 'other' && [...Array(lines)].map((_, index) => _jsx("div", { "data-line": true }, index)) }));
+function Skeleton({ width = 100, height = 100, textLines, textVariant: textSize, variant = 'rectangular', }) {
+    return (_jsx("div", { "data-bspk": "skeleton", "data-variant": variant, style: {
+            '--height': typeof height === 'number' ? `${height}px` : height,
+            '--text-height': `var(--${textSize}-size)`,
+            '--text-margin': `calc(var(--${textSize}-line-height) - var(--${textSize}-size))`,
+            '--width': typeof width === 'number' ? `${width}px` : width,
+        }, children: variant === 'text' &&
+            [...Array(Math.max(1, textLines || 0))].map((_, index) => _jsx("div", { "data-line": true }, index)) }));
 }
 Skeleton.bspkName = 'Skeleton';
 export { Skeleton };

package/dist/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../src/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AAsBzB;;;;GAIG;AACH,SAAS,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,KAAK,EAAE,SAAS,GAAG,CAAC,EAAiB;IACxE,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC;IAE1C,OAAO,CACH,2BACc,UAAU,EACpB,KAAK,EACD;YACI,UAAU,EAAE,cAAc,OAAO,yBAAyB,OAAO,SAAS;YAC1E,UAAU,EAAE,SAAS,OAAO,QAAQ;SACtB,YAGrB,OAAO,KAAK,OAAO,IAAI,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,mCAAoB,KAAK,CAAI,CAAC,GACxF,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../src/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AAsCzB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,SAAS,QAAQ,CAAC,EACd,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,GAAG,EACZ,SAAS,EACT,WAAW,EAAE,QAAQ,EACrB,OAAO,GAAG,aAAa,GACX;IACZ,OAAO,CACH,2BACc,UAAU,kBACN,OAAO,EACrB,KAAK,EACD;YACI,UAAU,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;YAC/D,eAAe,EAAE,SAAS,QAAQ,QAAQ;YAC1C,eAAe,EAAE,cAAc,QAAQ,yBAAyB,QAAQ,SAAS;YACjF,SAAS,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK;SAC7C,YAGrB,OAAO,KAAK,MAAM;YACf,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,mCAAoB,KAAK,CAAI,CAAC,GAC1F,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/skeleton.css

@@ -1,4 +1,6 @@
 [data-bspk=skeleton]{/*! 
---margin: is set via inline style
+--text-margin: is set via inline style
+--text-height: is set via inline style
 --height: is set via inline style
-*/width:100%;display:flex;flex-direction:column;gap:var(--margin);animation:skeleton-pulse 1.5s infinite}@keyframes skeleton-pulse{0%{opacity:.8}50%{opacity:.4}100%{opacity:.8}}[data-bspk=skeleton]:empty{width:auto;height:auto;position:absolute;inset:0;background:var(--foreground-neutral-skeleton-element);border-radius:var(--radius-small)}[data-bspk=skeleton] [data-line]{width:100%;background:var(--foreground-neutral-skeleton-element);border-radius:var(--radius-small);height:var(--height)}
+--width: is set via inline style
+*/display:flex;flex-direction:column;gap:var(--text-margin);animation:skeleton-pulse 1.5s infinite;background:var(--foreground-neutral-skeleton-element)}@keyframes skeleton-pulse{0%{opacity:.8}50%{opacity:.4}100%{opacity:.8}}[data-bspk=skeleton][data-variant=rectangular],[data-bspk=skeleton][data-variant=photo]{min-width:var(--spacing-sizing-08);min-height:var(--spacing-sizing-08);height:var(--height, var(--width));width:var(--width, var(--height));border-radius:var(--radius-small)}[data-bspk=skeleton][data-variant=photo]{border-radius:var(--radius-medium)}[data-bspk=skeleton][data-variant=circular]{border-radius:100%;width:var(--width);aspect-ratio:1/1}[data-bspk=skeleton][data-variant=profile]{border-radius:100%;width:var(--spacing-sizing-10);aspect-ratio:1/1}[data-bspk=skeleton][data-variant=thumbnail]{width:var(--spacing-sizing-12);height:var(--spacing-sizing-12);border-radius:var(--radius-small)}[data-bspk=skeleton][data-variant=text]{background:rgba(0,0,0,0);min-height:unset;max-height:unset;width:100%;height:fit-content}[data-bspk=skeleton][data-variant=text] [data-line]{width:100%;background:var(--foreground-neutral-skeleton-element);border-radius:var(--radius-small);height:var(--text-height)}[data-bspk=skeleton][data-variant=text]:has([data-line]:nth-child(2)) [data-line]:last-child{width:80%}

package/meta-types.ts

@@ -6,11 +6,11 @@ export type BaseMeta = {
     name: string;
     description?: string;
     file?: string;
+    example?: string;
 };
 
 export type TypeMeta = BaseMeta & {
     id: string;
-    example?: string;
     references?: string[];
     properties?: TypeProperty[];
 };
@@ -35,12 +35,15 @@ export type ComponentMeta = BaseMeta & {
     modified: string;
     css: string;
     hasTouchTarget: boolean;
+    usage?: {
+        code: string;
+        description?: string;
+    };
 };
 
 export type UtilityMeta = BaseMeta & {
     param?: string;
     returns?: string;
-    example?: string;
 };
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/meta.ts

@@ -169,6 +169,13 @@ function generateComponentMeta({
 
     const css = fs.existsSync(cssPath) ? fs.readFileSync(cssPath, { encoding: 'utf-8' }) : '';
 
+    const usage = componentDoc.example
+        ? {
+              code: componentDoc.example,
+              description: componentDoc.exampleDescription,
+          }
+        : undefined;
+
     return {
         description: componentDoc.description,
         file: componentFile.split(componentsDir)[1],
@@ -176,6 +183,7 @@ function generateComponentMeta({
         slug,
         dependencies,
         modified: stats.mtime.toISOString(),
+        usage,
         css,
         hasTouchTarget: css.includes('data-touch-target'),
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.1.11",
+    "version": "1.1.13",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [

package/src/EmptyState.tsx

@@ -21,6 +21,12 @@ export type EmptyStateProps = {
      * @required
      */
     body: string;
+    /**
+     * The text alignment of the body.
+     *
+     * @default center
+     */
+    bodyAlign?: 'center' | 'left' | 'right';
     /**
      * This property may be undefined or an object containing required CallToActionButton properties.
      *
@@ -34,7 +40,7 @@ export type EmptyStateProps = {
  *
  * @name EmptyState
  */
-function EmptyState({ children, header, body, callToAction }: EmptyStateProps) {
+function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }: EmptyStateProps) {
     return (
         <Layout
             align="center"
@@ -47,10 +53,10 @@ function EmptyState({ children, header, body, callToAction }: EmptyStateProps) {
         >
             {children}
             <Layout align="center" column gap="4">
-                <Txt as="div" variant="heading-h5">
+                <Txt as="header" variant="heading-h5">
                     {header}
                 </Txt>
-                <Txt as="div" variant="body-base">
+                <Txt as="p" style={{ textAlign: bodyAlign }} variant="body-base">
                     {body}
                 </Txt>
             </Layout>

package/src/Skeleton.tsx

@@ -3,42 +3,88 @@ import { CSSProperties } from 'react';
 
 import { TxtVariant } from './utils/txtVariants';
 
-export type SkeletonVariant = TxtVariant | 'other';
-
 export type SkeletonProps = {
     /**
-     * The text variant of the skeleton. If 'other' skeleton will expand to size of nearest relative positioned parent.
+     * The variant of the skeleton that best hints the content being loaded.
+     *
+     * @default text
+     */
+    variant?: 'circular' | 'photo' | 'profile' | 'rectangular' | 'text' | 'thumbnail';
+    /**
+     * The variant of the text being loaded. This is only used when variant is 'text'.
+     *
+     * @default body-base
+     */
+    textVariant?: TxtVariant;
+    /**
+     * The number of lines showing. This is only used when variant is 'text'.
      *
-     * @default other
+     * @default 3
      */
-    variant?: SkeletonVariant;
+    textLines?: number;
     /**
-     * The number of lines showing. Ignored when variant is other.
+     * The width of the skeleton. This is ignored when variant is 'text', 'profile', or 'thumbnail'.
      *
-     * @default 1
+     * @default 200
      */
-    lines?: number;
+    width?: number | string;
+    /**
+     * The height of the skeleton. This is ignored when variant is 'text', 'profile', or 'thumbnail'.
+     *
+     * @default 100
+     */
+    height?: number | string;
 };
 
 /**
  * A visual placeholder for an element while it is in a loading state.
  *
+ * The data for your components might not be immediately available. You can improve the perceived responsiveness of the
+ * page by using skeletons. It feels like things are happening immediately, then the information is incrementally
+ * displayed on the screen.
+ *
+ * @example
+ *     function Example() {
+ *         return item ? (
+ *             <img
+ *                 style={{
+ *                     width: 210,
+ *                     height: 118,
+ *                 }}
+ *                 alt={item.title}
+ *                 src={item.src}
+ *             />
+ *         ) : (
+ *             <Skeleton variant="photo" width={210} height={118} />
+ *         );
+ *     }
+ *
+ * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
+ *
  * @name Skeleton
  */
-function Skeleton({ variant = 'other', lines: linesProp = 3 }: SkeletonProps) {
-    const lines = Math.max(1, linesProp || 0);
-
+function Skeleton({
+    width = 100,
+    height = 100,
+    textLines,
+    textVariant: textSize,
+    variant = 'rectangular',
+}: SkeletonProps) {
     return (
         <div
             data-bspk="skeleton"
+            data-variant={variant}
             style={
                 {
-                    '--margin': `calc(var(--${variant}-line-height) - var(--${variant}-size))`,
-                    '--height': `var(--${variant}-size)`,
+                    '--height': typeof height === 'number' ? `${height}px` : height,
+                    '--text-height': `var(--${textSize}-size)`,
+                    '--text-margin': `calc(var(--${textSize}-line-height) - var(--${textSize}-size))`,
+                    '--width': typeof width === 'number' ? `${width}px` : width,
                 } as CSSProperties
             }
         >
-            {variant !== 'other' && [...Array(lines)].map((_, index) => <div data-line key={index} />)}
+            {variant === 'text' &&
+                [...Array(Math.max(1, textLines || 0))].map((_, index) => <div data-line key={index} />)}
         </div>
     );
 }

package/src/skeleton.scss

@@ -1,14 +1,16 @@
 [data-bspk='skeleton'] {
     /*! 
-    --margin: is set via inline style
+    --text-margin: is set via inline style
+    --text-height: is set via inline style
     --height: is set via inline style
+    --width: is set via inline style
     */
 
-    width: 100%;
     display: flex;
     flex-direction: column;
-    gap: var(--margin);
+    gap: var(--text-margin);
     animation: skeleton-pulse 1.5s infinite;
+    background: var(--foreground-neutral-skeleton-element);
 
     @keyframes skeleton-pulse {
         0% {
@@ -24,20 +26,57 @@
         }
     }
 
-    &:empty {
-        width: auto;
-        height: auto;
-        position: absolute;
-        inset: 0;
-        background: var(--foreground-neutral-skeleton-element);
+    &[data-variant='rectangular'],
+    &[data-variant='photo'] {
+        min-width: var(--spacing-sizing-08);
+        min-height: var(--spacing-sizing-08);
+        height: var(--height, var(--width));
+        width: var(--width, var(--height));
         border-radius: var(--radius-small);
     }
 
-    [data-line] {
-        width: 100%;
-        background: var(--foreground-neutral-skeleton-element);
+    &[data-variant='photo'] {
+        border-radius: var(--radius-medium);
+    }
+
+    &[data-variant='circular'] {
+        border-radius: 100%;
+        width: var(--width);
+        aspect-ratio: 1/1;
+    }
+
+    &[data-variant='profile'] {
+        border-radius: 100%;
+        width: var(--spacing-sizing-10);
+        aspect-ratio: 1/1;
+    }
+
+    &[data-variant='thumbnail'] {
+        width: var(--spacing-sizing-12);
+        height: var(--spacing-sizing-12);
         border-radius: var(--radius-small);
-        height: var(--height);
+    }
+
+    &[data-variant='text'] {
+        background: transparent;
+        min-height: unset;
+        max-height: unset;
+        width: 100%;
+        height: fit-content;
+
+        [data-line] {
+            width: 100%;
+            background: var(--foreground-neutral-skeleton-element);
+            border-radius: var(--radius-small);
+            height: var(--text-height);
+        }
+
+        // if there are 2 lines or more, make the last line 80% width
+        &:has([data-line]:nth-child(2)) {
+            [data-line]:last-child {
+                width: 80%;
+            }
+        }
     }
 }