@kubit-ui-web/react-components 2.0.0-beta.52 → 2.0.0-beta.53

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @kubit-ui-web/react-components
 
+## 2.0.0-beta.53
+
+### Major Changes
+
+- Include borderRadius prop to skeleton (#62)
+
 ## 2.0.0-beta.52
 
 ### Major Changes

package/dist/cjs/components/skeleton/skeleton2.js

@@ -1 +1 @@
-const e=require(`../../lib/hooks/useClassName/useClassName.js`),t=require(`./skeletonStandAlone.js`);let n=require(`react`),r=require(`react/jsx-runtime`);const i=(0,n.forwardRef)(({additionalClasses:n,additionalShapeClasses:i,shapeVariant:a,variant:o,...s},c)=>{let l=e.useClassName({component:`SKELETON`,variant:o}),u=e.useClassName({component:`SKELETON`,variant:a});return(0,r.jsx)(t.SkeletonStandAlone,{...s,ref:c,cssClasses:l,cssShapeClasses:u,shapeVariant:o})});exports.Skeleton=i;
+const e=require(`../../lib/hooks/useClassName/useClassName.js`),t=require(`./skeletonStandAlone.js`);let n=require(`react`),r=require(`react/jsx-runtime`);const i=(0,n.forwardRef)(({additionalClasses:n,additionalShapeClasses:i,shapeVariant:a,variant:o,...s},c)=>{let l=e.useClassName({additionalClassNames:n,component:`SKELETON`,variant:o}),u=e.useClassName({additionalClassNames:i,component:`SKELETON`,variant:a});return(0,r.jsx)(t.SkeletonStandAlone,{...s,ref:c,cssClasses:l,cssShapeClasses:u,shapeVariant:o})});exports.Skeleton=i;

package/dist/cjs/components/skeleton/skeletonStandAlone.js

@@ -1 +1 @@
-const e=require(`../../lib/utils/pickCustomAttributes/pickCustomAttributes.js`),t=require(`../../lib/utils/classNames/classNames.js`);;/* empty css          */let n=require(`react`),r=require(`react/jsx-runtime`);const i=(0,n.forwardRef)(({cssClasses:n,cssShapeClasses:i,duration:a=`1.2s`,height:o,width:s,...c},l)=>{let u=e.pickCustomAttributes(c);return(0,r.jsx)(`div`,{ref:l,className:t.classNames(`kbt-skeleton`,n?.skeleton,i?.skeleton),"data-testid":`skeleton`,style:{"--skeleton-duration":a,"--skeleton-height":o,"--skeleton-width":s},...u})});exports.SkeletonStandAlone=i;
+const e=require(`../../lib/utils/pickCustomAttributes/pickCustomAttributes.js`),t=require(`../../lib/utils/classNames/classNames.js`);;/* empty css          */let n=require(`react`),r=require(`react/jsx-runtime`);const i=(0,n.forwardRef)(({borderRadius:i=``,cssClasses:a,cssShapeClasses:o,duration:s=`1.2s`,height:c=`20px`,width:l=`100%`,...u},d)=>{let f=e.pickCustomAttributes(u),p=(0,n.useMemo)(()=>a?.dynamic_values({$skeletonBorderRadius:i,$skeletonDuration:s,$skeletonHeight:c,$skeletonWidth:l}).object,[c,l,i,s]);return(0,r.jsx)(`div`,{ref:d,className:t.classNames(`kbt-skeleton`,a?.skeleton,o?.skeleton),"data-testid":`skeleton`,style:p,...f})});exports.SkeletonStandAlone=i;

package/dist/esm/components/skeleton/skeleton2.js

@@ -4,9 +4,11 @@ import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 const Skeleton = forwardRef(({ additionalClasses: e, additionalShapeClasses: t, shapeVariant: n, variant: r, ...i }, a) => {
 	let o = useClassName({
+		additionalClassNames: e,
 		component: "SKELETON",
 		variant: r
 	}), s = useClassName({
+		additionalClassNames: t,
 		component: "SKELETON",
 		variant: n
 	});

package/dist/esm/components/skeleton/skeletonStandAlone.js

@@ -1,20 +1,26 @@
 import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
 import { classNames } from "../../lib/utils/classNames/classNames.js";
 /* empty css         */
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-const SkeletonStandAlone = forwardRef(({ cssClasses: e, cssShapeClasses: t, duration: n = "1.2s", height: r, width: i, ...a }, o) => {
-	let s = pickCustomAttributes(a);
+const SkeletonStandAlone = forwardRef(({ borderRadius: e = "", cssClasses: t, cssShapeClasses: n, duration: r = "1.2s", height: i = "20px", width: a = "100%", ...o }, s) => {
+	let c = pickCustomAttributes(o), l = useMemo(() => t?.dynamic_values({
+		$skeletonBorderRadius: e,
+		$skeletonDuration: r,
+		$skeletonHeight: i,
+		$skeletonWidth: a
+	}).object, [
+		i,
+		a,
+		e,
+		r
+	]);
 	return /* @__PURE__ */ jsx("div", {
-		ref: o,
-		className: classNames("kbt-skeleton", e?.skeleton, t?.skeleton),
+		ref: s,
+		className: classNames("kbt-skeleton", t?.skeleton, n?.skeleton),
 		"data-testid": "skeleton",
-		style: {
-			"--skeleton-duration": n,
-			"--skeleton-height": r,
-			"--skeleton-width": i
-		},
-		...s
+		style: l,
+		...c
 	});
 });
 export { SkeletonStandAlone };

package/dist/types/index.d.ts

@@ -1841,6 +1841,15 @@ declare type ComponentsTypesComponents = {
         $_default: {
             skeleton: string;
         };
+        dynamic_values: (styles: {
+            $skeletonWidth: string;
+            $skeletonHeight: string;
+            $skeletonBorderRadius: string;
+            $skeletonDuration: string;
+        }) => {
+            string: string;
+            object: object;
+        };
     };
     SLIDER: {
         slider: string;
@@ -5528,8 +5537,8 @@ declare type SkeletonCssClasses = ComponentSelected<ComponentsTypesComponents['S
  */
 export declare interface SkeletonProps<Variant = undefined extends string ? unknown : string> extends SkeletonStandAloneProps {
     variant?: Variant;
-    additionalClasses?: string;
-    additionalShapeClasses?: string;
+    additionalClasses?: Partial<SkeletonCssClasses>;
+    additionalShapeClasses?: Partial<SkeletonCssClasses>;
 }
 
 export declare type SkeletonShapeStyles<Shape extends string> = CssLibPropsType & {
@@ -5543,6 +5552,7 @@ export declare type SkeletonShapeStyles<Shape extends string> = CssLibPropsType
 export declare interface SkeletonStandAloneProps extends SkeletonAriaProps, DataAttributes {
     width?: string;
     height?: string;
+    borderRadius?: string;
     duration?: string;
     cssClasses?: SkeletonCssClasses;
     shapeVariant?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "2.0.0-beta.52",
+  "version": "2.0.0-beta.53",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -171,7 +171,7 @@
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.18",
     "vitest-axe": "^0.1.0",
-    "@kubit-ui-web/design-system": "2.0.0-beta.11"
+    "@kubit-ui-web/design-system": "2.0.0-beta.12"
   },
   "publishConfig": {
     "access": "public",