@chayns-ui/core 0.7.0 → 0.8.0

package/dist/avatar.css

@@ -1,5 +1,7 @@
 @layer chayns.components {
   .chayns-avatar {
+    --chayns-avatar-initials-lightness: 25%;
+
     position: relative;
     display: inline-flex;
     flex: none;
@@ -9,7 +11,7 @@
     block-size: var(--k44);
     overflow: visible;
     border-radius: 50%;
-    background: var(--accent);
+    background: var(--chayns-avatar-initials-color, var(--accent));
     color: var(--on-accent);
     font-size: var(--fs-body);
     font-weight: 600;
@@ -17,16 +19,8 @@
     vertical-align: middle;
   }
 
-  .chayns-avatar--tone-0 {
-    background: var(--accent);
-  }
-
-  .chayns-avatar--tone-1 {
-    background: var(--accent-hover);
-  }
-
-  .chayns-avatar--tone-2 {
-    background: var(--accent-active);
+  :is(.chayns-theme--dark .chayns-avatar, .chayns-theme--dark.chayns-avatar) {
+    --chayns-avatar-initials-lightness: 70%;
   }
 
   .chayns-avatar--small {

package/dist/components/avatar/Avatar.d.ts

@@ -1,4 +1,5 @@
 import type { AvatarProps } from './Avatar.types.js';
+export declare const getColorFromInitials: (input: string) => string;
 declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 export default Avatar;
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/components/avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAsBrD,QAAA,MAAM,MAAM,sHA2CV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAarD,eAAO,MAAM,oBAAoB,GAAI,OAAO,MAAM,KAAG,MASpD,CAAC;AAEF,QAAA,MAAM,MAAM,sHA8CV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/dist/components/avatar/Avatar.js

@@ -6,27 +6,30 @@ var getInitials = (name) => {
 	if (words.length === 0) return "";
 	return `${words[0]?.charAt(0) ?? ""}${words.length > 1 ? words.at(-1)?.charAt(0) ?? "" : ""}`.toUpperCase();
 };
-var getTone = (name) => {
+var getColorFromInitials = (input) => {
 	let hash = 0;
-	for (const character of name) hash = hash * 31 + character.codePointAt(0) >>> 0;
-	return hash % 3;
+	for (let index = 0; index < input.length; index += 1) hash = input.charCodeAt(index) + ((hash << 5) - hash);
+	return `hsl(${Math.abs(hash) % 360} 65% var(--chayns-avatar-initials-lightness))`;
 };
-var Avatar = forwardRef(function Avatar({ alt, badge, className, name, size = "default", src, ...spanProps }, ref) {
+var Avatar = forwardRef(function Avatar({ alt, badge, className, name, size = "default", src, style, ...spanProps }, ref) {
 	const [failedSource, setFailedSource] = useState();
 	const showImage = Boolean(src) && failedSource !== src;
 	const initials = getInitials(name);
-	const tone = getTone(name);
+	const initialsColorStyle = {
+		"--chayns-avatar-initials-color": getColorFromInitials(name),
+		...style
+	};
 	return /* @__PURE__ */ jsxs("span", {
 		...spanProps,
 		"aria-label": alt ?? name,
 		className: [
 			"chayns-avatar",
-			`chayns-avatar--tone-${tone}`,
 			`chayns-avatar--${size}`,
 			className
 		].filter(Boolean).join(" "),
 		role: "img",
 		ref,
+		style: initialsColorStyle,
 		children: [showImage ? /* @__PURE__ */ jsx("img", {
 			alt: "",
 			className: "chayns-avatar__image",
@@ -44,6 +47,6 @@ var Avatar = forwardRef(function Avatar({ alt, badge, className, name, size = "d
 	});
 });
 //#endregion
-export { Avatar as default };
+export { Avatar as default, getColorFromInitials };
 
 //# sourceMappingURL=Avatar.js.map

package/dist/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react';\n\nimport type { AvatarProps } from './Avatar.types.js';\n\nconst getInitials = (name: string) => {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  if (words.length === 0) {\n    return '';\n  }\n\n  const first = words[0]?.charAt(0) ?? '';\n  const last = words.length > 1 ? (words.at(-1)?.charAt(0) ?? '') : '';\n  return `${first}${last}`.toUpperCase();\n};\n\nconst getTone = (name: string) => {\n  let hash = 0;\n  for (const character of name) {\n    hash = (hash * 31 + character.codePointAt(0)!) >>> 0;\n  }\n\n  return hash % 3;\n};\n\nconst Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { alt, badge, className, name, size = 'default', src, ...spanProps },\n  ref,\n) {\n  const [failedSource, setFailedSource] = useState<string>();\n  const showImage = Boolean(src) && failedSource !== src;\n  const initials = getInitials(name);\n  const tone = getTone(name);\n\n  return (\n    <span\n      {...spanProps}\n      aria-label={alt ?? name}\n      className={[\n        'chayns-avatar',\n        `chayns-avatar--tone-${tone}`,\n        `chayns-avatar--${size}`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      role=\"img\"\n      ref={ref}\n    >\n      {showImage ? (\n        <img\n          alt=\"\"\n          className=\"chayns-avatar__image\"\n          onError={() => setFailedSource(src)}\n          src={src}\n        />\n      ) : (\n        <span aria-hidden=\"true\" className=\"chayns-avatar__initials\">\n          {initials}\n        </span>\n      )}\n      {badge ? (\n        <span aria-hidden=\"true\" className=\"chayns-avatar__badge\">\n          {badge}\n        </span>\n      ) : null}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"mappings":";;;AAIA,IAAM,eAAe,SAAiB;CACpC,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CACrD,IAAI,MAAM,WAAW,GACnB,OAAO;CAKT,OAAO,GAFO,MAAM,EAAE,EAAE,OAAO,CAAC,KAAK,KACxB,MAAM,SAAS,IAAK,MAAM,GAAG,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,KAAM,KACzC,YAAY;AACvC;AAEA,IAAM,WAAW,SAAiB;CAChC,IAAI,OAAO;CACX,KAAK,MAAM,aAAa,MACtB,OAAQ,OAAO,KAAK,UAAU,YAAY,CAAC,MAAQ;CAGrD,OAAO,OAAO;AAChB;AAEA,IAAM,SAAS,WAAyC,SAAS,OAC/D,EAAE,KAAK,OAAO,WAAW,MAAM,OAAO,WAAW,KAAK,GAAG,aACzD,KACA;CACA,MAAM,CAAC,cAAc,mBAAmB,SAAiB;CACzD,MAAM,YAAY,QAAQ,GAAG,KAAK,iBAAiB;CACnD,MAAM,WAAW,YAAY,IAAI;CACjC,MAAM,OAAO,QAAQ,IAAI;CAEzB,OACE,qBAAC,QAAD;EACE,GAAI;EACJ,cAAY,OAAO;EACnB,WAAW;GACT;GACA,uBAAuB;GACvB,kBAAkB;GAClB;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACX,MAAK;EACA;EAZP,UAAA,CAcG,YACC,oBAAC,OAAD;GACE,KAAI;GACJ,WAAU;GACV,eAAe,gBAAgB,GAAG;GAC7B;EACN,CAAA,IAED,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAChC,UAAA;EACG,CAAA,GAEP,QACC,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAChC,UAAA;EACG,CAAA,IACJ,IACA;;AAEV,CAAC"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, useState, type CSSProperties } from 'react';\n\nimport type { AvatarProps } from './Avatar.types.js';\n\nconst getInitials = (name: string) => {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  if (words.length === 0) {\n    return '';\n  }\n\n  const first = words[0]?.charAt(0) ?? '';\n  const last = words.length > 1 ? (words.at(-1)?.charAt(0) ?? '') : '';\n  return `${first}${last}`.toUpperCase();\n};\n\nexport const getColorFromInitials = (input: string): string => {\n  let hash = 0;\n\n  for (let index = 0; index < input.length; index += 1) {\n    hash = input.charCodeAt(index) + ((hash << 5) - hash);\n  }\n\n  const hue = Math.abs(hash) % 360;\n  return `hsl(${hue} 65% var(--chayns-avatar-initials-lightness))`;\n};\n\nconst Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { alt, badge, className, name, size = 'default', src, style, ...spanProps },\n  ref,\n) {\n  const [failedSource, setFailedSource] = useState<string>();\n  const showImage = Boolean(src) && failedSource !== src;\n  const initials = getInitials(name);\n  const initialsColorStyle: CSSProperties & Record<'--chayns-avatar-initials-color', string> = {\n    '--chayns-avatar-initials-color': getColorFromInitials(name),\n    ...style,\n  };\n\n  return (\n    <span\n      {...spanProps}\n      aria-label={alt ?? name}\n      className={[\n        'chayns-avatar',\n        `chayns-avatar--${size}`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      role=\"img\"\n      ref={ref}\n      style={initialsColorStyle}\n    >\n      {showImage ? (\n        <img\n          alt=\"\"\n          className=\"chayns-avatar__image\"\n          onError={() => setFailedSource(src)}\n          src={src}\n        />\n      ) : (\n        <span aria-hidden=\"true\" className=\"chayns-avatar__initials\">\n          {initials}\n        </span>\n      )}\n      {badge ? (\n        <span aria-hidden=\"true\" className=\"chayns-avatar__badge\">\n          {badge}\n        </span>\n      ) : null}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"mappings":";;;AAIA,IAAM,eAAe,SAAiB;CACpC,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CACrD,IAAI,MAAM,WAAW,GACnB,OAAO;CAKT,OAAO,GAFO,MAAM,EAAE,EAAE,OAAO,CAAC,KAAK,KACxB,MAAM,SAAS,IAAK,MAAM,GAAG,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,KAAM,KACzC,YAAY;AACvC;AAEA,IAAa,wBAAwB,UAA0B;CAC7D,IAAI,OAAO;CAEX,KAAK,IAAI,QAAQ,GAAG,QAAQ,MAAM,QAAQ,SAAS,GACjD,OAAO,MAAM,WAAW,KAAK,MAAM,QAAQ,KAAK;CAIlD,OAAO,OADK,KAAK,IAAI,IAAI,IAAI,IACX;AACpB;AAEA,IAAM,SAAS,WAAyC,SAAS,OAC/D,EAAE,KAAK,OAAO,WAAW,MAAM,OAAO,WAAW,KAAK,OAAO,GAAG,aAChE,KACA;CACA,MAAM,CAAC,cAAc,mBAAmB,SAAiB;CACzD,MAAM,YAAY,QAAQ,GAAG,KAAK,iBAAiB;CACnD,MAAM,WAAW,YAAY,IAAI;CACjC,MAAM,qBAAuF;EAC3F,kCAAkC,qBAAqB,IAAI;EAC3D,GAAG;CACL;CAEA,OACE,qBAAC,QAAD;EACE,GAAI;EACJ,cAAY,OAAO;EACnB,WAAW;GACT;GACA,kBAAkB;GAClB;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACX,MAAK;EACA;EACL,OAAO;EAZT,UAAA,CAcG,YACC,oBAAC,OAAD;GACE,KAAI;GACJ,WAAU;GACV,eAAe,gBAAgB,GAAG;GAC7B;EACN,CAAA,IAED,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAChC,UAAA;EACG,CAAA,GAEP,QACC,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAChC,UAAA;EACG,CAAA,IACJ,IACA;;AAEV,CAAC"}

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,4 @@
+import type { SkeletonProps } from './Skeleton.types.js';
+declare const Skeleton: import("react").ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default Skeleton;
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/skeleton/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,QAAA,MAAM,QAAQ,uHAsBZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/components/skeleton/Skeleton.js

@@ -0,0 +1,20 @@
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skeleton/Skeleton.tsx
+var Skeleton = forwardRef(function Skeleton({ "aria-hidden": _ariaHidden, children: _children, className, role: _role, shape = "rounded", tabIndex: _tabIndex, ...divProps }, ref) {
+	const resolvedClassName = [
+		"chayns-skeleton",
+		`chayns-skeleton--${shape}`,
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx("div", {
+		...divProps,
+		"aria-hidden": "true",
+		className: resolvedClassName,
+		ref
+	});
+});
+//#endregion
+export { Skeleton as default };
+
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport type { SkeletonProps } from './Skeleton.types.js';\n\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(\n  {\n    'aria-hidden': _ariaHidden,\n    children: _children,\n    className,\n    role: _role,\n    shape = 'rounded',\n    tabIndex: _tabIndex,\n    ...divProps\n  },\n  ref,\n) {\n  void _ariaHidden;\n  void _children;\n  void _role;\n  void _tabIndex;\n\n  const resolvedClassName = ['chayns-skeleton', `chayns-skeleton--${shape}`, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return <div {...divProps} aria-hidden=\"true\" className={resolvedClassName} ref={ref} />;\n});\n\nexport default Skeleton;\n"],"mappings":";;;AAIA,IAAM,WAAW,WAA0C,SAAS,SAClE,EACE,eAAe,aACf,UAAU,WACV,WACA,MAAM,OACN,QAAQ,WACR,UAAU,WACV,GAAG,YAEL,KACA;CAMA,MAAM,oBAAoB;EAAC;EAAmB,oBAAoB;EAAS;CAAS,CAAC,CAClF,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAU,eAAY;EAAO,WAAW;EAAwB;CAAM,CAAA;AACxF,CAAC"}

package/dist/components/skeleton/Skeleton.types.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare const SKELETON_SHAPES: readonly ["square", "rounded", "circular"];
+export type SkeletonShape = (typeof SKELETON_SHAPES)[number];
+export interface SkeletonProps extends Omit<ComponentPropsWithRef<'div'>, 'aria-hidden' | 'children' | 'role' | 'tabIndex'> {
+    shape?: SkeletonShape;
+    children?: never;
+    role?: never;
+    tabIndex?: never;
+    'aria-hidden'?: never;
+}
+//# sourceMappingURL=Skeleton.types.d.ts.map

package/dist/components/skeleton/Skeleton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.types.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,eAAO,MAAM,eAAe,4CAA6C,CAAC;AAC1E,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,qBAAqB,CAAC,KAAK,CAAC,EAC5B,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CACjD;IACC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB"}

package/dist/components/skeleton/Skeleton.types.js

@@ -0,0 +1,10 @@
+//#region src/components/skeleton/Skeleton.types.ts
+var SKELETON_SHAPES = [
+	"square",
+	"rounded",
+	"circular"
+];
+//#endregion
+export { SKELETON_SHAPES };
+
+//# sourceMappingURL=Skeleton.types.js.map

package/dist/components/skeleton/Skeleton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.types.js","names":[],"sources":["../../../src/components/skeleton/Skeleton.types.ts"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react';\n\nexport const SKELETON_SHAPES = ['square', 'rounded', 'circular'] as const;\nexport type SkeletonShape = (typeof SKELETON_SHAPES)[number];\n\nexport interface SkeletonProps extends Omit<\n  ComponentPropsWithRef<'div'>,\n  'aria-hidden' | 'children' | 'role' | 'tabIndex'\n> {\n  shape?: SkeletonShape;\n  children?: never;\n  role?: never;\n  tabIndex?: never;\n  'aria-hidden'?: never;\n}\n"],"mappings":";AAEA,IAAa,kBAAkB;CAAC;CAAU;CAAW;AAAU"}

package/dist/index.d.ts

@@ -6,6 +6,9 @@ export type { IconButtonBaseProps, IconButtonProps, } from './components/icon-bu
 export { default as Badge } from './components/badge/Badge.js';
 export { BADGE_SIZES, BADGE_TONES } from './components/badge/Badge.types.js';
 export type { BadgeProps, BadgeSize, BadgeTone } from './components/badge/Badge.types.js';
+export { default as Skeleton } from './components/skeleton/Skeleton.js';
+export { SKELETON_SHAPES } from './components/skeleton/Skeleton.types.js';
+export type { SkeletonProps, SkeletonShape } from './components/skeleton/Skeleton.types.js';
 export { default as Banner } from './components/banner/Banner.js';
 export { BANNER_TONES } from './components/banner/Banner.types.js';
 export type { BannerProps, BannerTone, ClosableBannerProps, StaticBannerProps, } from './components/banner/Banner.types.js';

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -3,6 +3,8 @@ import IconButton from "./components/icon-button/IconButton.js";
 import { BUTTON_VARIANTS } from "./components/button/Button.types.js";
 import Badge from "./components/badge/Badge.js";
 import { BADGE_SIZES, BADGE_TONES } from "./components/badge/Badge.types.js";
+import Skeleton from "./components/skeleton/Skeleton.js";
+import { SKELETON_SHAPES } from "./components/skeleton/Skeleton.types.js";
 import Banner from "./components/banner/Banner.js";
 import { BANNER_TONES } from "./components/banner/Banner.types.js";
 import ComboBox from "./components/combo-box/ComboBox.js";
@@ -24,4 +26,4 @@ import List from "./components/list/List.js";
 import Accordion from "./components/accordion/Accordion.js";
 import AccordionGroup from "./components/accordion-group/AccordionGroup.js";
 import { ACCORDION_APPEARANCES } from "./components/accordion/Accordion.types.js";
-export { ACCORDION_APPEARANCES, Accordion, AccordionGroup, Avatar, AvatarGroup, BADGE_SIZES, BADGE_TONES, BANNER_TONES, BUTTON_VARIANTS, Badge, Banner, Button, Card, Checkbox, ComboBox, DATE_TIME_PICKER_MINUTE_STEPS, DATE_TIME_PICKER_MODES, DateTimePicker, IconButton, List, Popup_default as Popup, PopupList, RadioGroup, SegmentedControl, SplitButton, Switch, TextArea, TextField };
+export { ACCORDION_APPEARANCES, Accordion, AccordionGroup, Avatar, AvatarGroup, BADGE_SIZES, BADGE_TONES, BANNER_TONES, BUTTON_VARIANTS, Badge, Banner, Button, Card, Checkbox, ComboBox, DATE_TIME_PICKER_MINUTE_STEPS, DATE_TIME_PICKER_MODES, DateTimePicker, IconButton, List, Popup_default as Popup, PopupList, RadioGroup, SKELETON_SHAPES, SegmentedControl, Skeleton, SplitButton, Switch, TextArea, TextField };

package/dist/skeleton.css

@@ -0,0 +1,41 @@
+@layer chayns.components {
+  .chayns-skeleton {
+    display: block;
+    background: linear-gradient(
+      90deg,
+      var(--surface-alt) 25%,
+      var(--border-soft) 37%,
+      var(--surface-alt) 63%
+    );
+    background-size: 800px 100%;
+    animation: chayns-skeleton-shimmer 1.4s ease infinite;
+  }
+
+  .chayns-skeleton--square {
+    border-radius: 0;
+  }
+
+  .chayns-skeleton--rounded {
+    border-radius: 6px;
+  }
+
+  .chayns-skeleton--circular {
+    border-radius: 50%;
+  }
+
+  @keyframes chayns-skeleton-shimmer {
+    0% {
+      background-position: -400px 0;
+    }
+
+    100% {
+      background-position: 400px 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-skeleton {
+      animation: none;
+    }
+  }
+}

package/dist/styles.css

@@ -1,5 +1,6 @@
 @import url('./button.css');
 @import url('./badge.css');
+@import url('./skeleton.css');
 @import url('./banner.css');
 @import url('./combo-box.css');
 @import url('./card.css');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chayns-ui/core",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Accessible React core components for chayns UI",
   "license": "MIT",
   "type": "module",
@@ -24,6 +24,7 @@
     },
     "./button.css": "./dist/button.css",
     "./badge.css": "./dist/badge.css",
+    "./skeleton.css": "./dist/skeleton.css",
     "./banner.css": "./dist/banner.css",
     "./combo-box.css": "./dist/combo-box.css",
     "./card.css": "./dist/card.css",