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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- Create isOnlyDesktop (#61)
+
 ## 2.0.0-beta.51
 
 ### Major Changes

package/dist/cjs/components/modal/utils/onlyDesktopSize.js

@@ -1 +1 @@
-const e=require(`../../../lib/types/breakpoints/breakpoints.js`);exports.onlyDesktopSize=(t,n)=>e.DeviceBreakpointsTypeUtils.isDesktopOrLargeDesktop(t)?n:void 0;
+const e=require(`../../../lib/types/breakpoints/breakpoints.js`);exports.onlyDesktopSize=(t,n)=>e.DeviceBreakpointsTypeUtils.isDesktop(t)?n:void 0;

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/cjs/lib/hooks/useMediaDevice/useActiveBreakpoints.js

@@ -1 +1 @@
-const e=require(`../../types/breakpoints/breakpoints.js`),t=require(`./useMediaDevice.js`);exports.useActiveBreakpoints=()=>{let n=t.useMediaDevice();return{device:n,isDesktop:e.DeviceBreakpointsTypeUtils.isDesktop(n),isDesktopOrLargeDesktop:e.DeviceBreakpointsTypeUtils.isDesktopOrLargeDesktop(n),isLargeDesktop:e.DeviceBreakpointsTypeUtils.isLargeDesktop(n),isMobile:e.DeviceBreakpointsTypeUtils.isMobile(n),isMobileOrTablet:e.DeviceBreakpointsTypeUtils.isMobileOrTablet(n),isTablet:e.DeviceBreakpointsTypeUtils.isTablet(n)}};
+const e=require(`../../types/breakpoints/breakpoints.js`),t=require(`./useMediaDevice.js`);exports.useActiveBreakpoints=()=>{let n=t.useMediaDevice();return{device:n,isDesktop:e.DeviceBreakpointsTypeUtils.isDesktop(n),isLargeDesktop:e.DeviceBreakpointsTypeUtils.isLargeDesktop(n),isMobile:e.DeviceBreakpointsTypeUtils.isMobile(n),isMobileOrTablet:e.DeviceBreakpointsTypeUtils.isMobileOrTablet(n),isOnlyDesktop:e.DeviceBreakpointsTypeUtils.isOnlyDesktop(n),isTablet:e.DeviceBreakpointsTypeUtils.isTablet(n)}};

package/dist/cjs/lib/types/breakpoints/breakpoints.js

@@ -1 +1 @@
-const e={DESKTOP:`desktop`,LARGE_DESKTOP:`large_desktop`,MOBILE:`mobile`,TABLET:`tablet`},t={isDesktop:t=>t===e.DESKTOP,isDesktopOrLargeDesktop:e=>t.isDesktop(e)||t.isLargeDesktop(e),isLargeDesktop:t=>t===e.LARGE_DESKTOP,isMobile:t=>t===e.MOBILE,isMobileOrTablet:e=>t.isMobile(e)||t.isTablet(e),isTablet:t=>t===e.TABLET};exports.DEVICE_BREAKPOINTS=e,exports.DeviceBreakpointsTypeUtils=t;
+const e={DESKTOP:`desktop`,LARGE_DESKTOP:`large_desktop`,MOBILE:`mobile`,TABLET:`tablet`},t={isDesktop:n=>n===e.DESKTOP||t.isLargeDesktop(n),isLargeDesktop:t=>t===e.LARGE_DESKTOP,isMobile:t=>t===e.MOBILE,isMobileOrTablet:e=>t.isMobile(e)||t.isTablet(e),isOnlyDesktop:t=>t===e.DESKTOP,isTablet:t=>t===e.TABLET};exports.DEVICE_BREAKPOINTS=e,exports.DeviceBreakpointsTypeUtils=t;

package/dist/esm/components/modal/utils/onlyDesktopSize.js

@@ -1,3 +1,3 @@
 import { DeviceBreakpointsTypeUtils } from "../../../lib/types/breakpoints/breakpoints.js";
-const onlyDesktopSize = (e, t) => DeviceBreakpointsTypeUtils.isDesktopOrLargeDesktop(e) ? t : void 0;
+const onlyDesktopSize = (e, t) => DeviceBreakpointsTypeUtils.isDesktop(e) ? t : void 0;
 export { onlyDesktopSize };

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/esm/lib/hooks/useMediaDevice/useActiveBreakpoints.js

@@ -5,10 +5,10 @@ const useActiveBreakpoints = () => {
 	return {
 		device: e,
 		isDesktop: DeviceBreakpointsTypeUtils.isDesktop(e),
-		isDesktopOrLargeDesktop: DeviceBreakpointsTypeUtils.isDesktopOrLargeDesktop(e),
 		isLargeDesktop: DeviceBreakpointsTypeUtils.isLargeDesktop(e),
 		isMobile: DeviceBreakpointsTypeUtils.isMobile(e),
 		isMobileOrTablet: DeviceBreakpointsTypeUtils.isMobileOrTablet(e),
+		isOnlyDesktop: DeviceBreakpointsTypeUtils.isOnlyDesktop(e),
 		isTablet: DeviceBreakpointsTypeUtils.isTablet(e)
 	};
 };

package/dist/esm/lib/types/breakpoints/breakpoints.js

@@ -4,11 +4,11 @@ const DEVICE_BREAKPOINTS = {
 	MOBILE: "mobile",
 	TABLET: "tablet"
 }, DeviceBreakpointsTypeUtils = {
-	isDesktop: (t) => t === DEVICE_BREAKPOINTS.DESKTOP,
-	isDesktopOrLargeDesktop: (e) => DeviceBreakpointsTypeUtils.isDesktop(e) || DeviceBreakpointsTypeUtils.isLargeDesktop(e),
+	isDesktop: (n) => n === DEVICE_BREAKPOINTS.DESKTOP || DeviceBreakpointsTypeUtils.isLargeDesktop(n),
 	isLargeDesktop: (t) => t === DEVICE_BREAKPOINTS.LARGE_DESKTOP,
 	isMobile: (t) => t === DEVICE_BREAKPOINTS.MOBILE,
 	isMobileOrTablet: (e) => DeviceBreakpointsTypeUtils.isMobile(e) || DeviceBreakpointsTypeUtils.isTablet(e),
+	isOnlyDesktop: (t) => t === DEVICE_BREAKPOINTS.DESKTOP,
 	isTablet: (t) => t === DEVICE_BREAKPOINTS.TABLET
 };
 export { DEVICE_BREAKPOINTS, DeviceBreakpointsTypeUtils };

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;
@@ -3196,10 +3205,6 @@ export declare const DeviceBreakpointsTypeUtils: {
      * Returns true if the device is a desktop device.
      */
     isDesktop: (device: DeviceBreakpointsType) => boolean;
-    /**
-     * Returns true if the device is either desktop or large desktop.
-     */
-    isDesktopOrLargeDesktop: (device: DeviceBreakpointsType) => boolean;
     /**
      * Returns true if the device is a large desktop device.
      */
@@ -3212,6 +3217,10 @@ export declare const DeviceBreakpointsTypeUtils: {
      * Returns true if the device is either mobile or tablet.
      */
     isMobileOrTablet: (device: DeviceBreakpointsType) => boolean;
+    /**
+     * Returns true if the device is either desktop or large desktop.
+     */
+    isOnlyDesktop: (device: DeviceBreakpointsType) => boolean;
     /**
      * Returns true if the device is a tablet device.
      */
@@ -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.51",
+  "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.8"
+    "@kubit-ui-web/design-system": "2.0.0-beta.12"
   },
   "publishConfig": {
     "access": "public",