@scaleflex/ui-tw 0.0.82 → 0.0.83

package/command/command.skeleton.d.ts

@@ -0,0 +1,12 @@
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+import React from 'react';
+type CommandSkeletonProps = {
+    count?: number;
+    size?: FormSizeType;
+    isGroup?: boolean;
+    withIcons?: boolean;
+    withCheckbox?: boolean;
+    className?: string;
+};
+declare function CommandSkeleton({ count, size, isGroup, withIcons, withCheckbox, className, }: CommandSkeletonProps): React.JSX.Element;
+export { CommandSkeleton };

package/command/command.skeleton.js

@@ -0,0 +1,47 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { selectItemVariants } from '@scaleflex/ui-tw/select/select.component';
+import { getOptionInGroupPaddingLeft } from '@scaleflex/ui-tw/select/select.utils';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import React from 'react';
+var iconSizeByFormSize = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'size-4'), FormSize.Md, 'size-4'), FormSize.Lg, 'size-5');
+var rowSizes = ['w-3/4', 'w-2/3', 'w-5/6', 'w-1/2', 'w-11/12', 'w-4/5', 'w-1/3', 'w-1/4'];
+function CommandSkeleton(_ref) {
+  var _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 5 : _ref$count,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
+    _ref$isGroup = _ref.isGroup,
+    isGroup = _ref$isGroup === void 0 ? false : _ref$isGroup,
+    _ref$withIcons = _ref.withIcons,
+    withIcons = _ref$withIcons === void 0 ? false : _ref$withIcons,
+    _ref$withCheckbox = _ref.withCheckbox,
+    withCheckbox = _ref$withCheckbox === void 0 ? false : _ref$withCheckbox,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-slot": "command-skeleton",
+    role: "status",
+    "aria-live": "polite",
+    className: cn('flex flex-col gap-1 px-2', className)
+  }, Array.from({
+    length: count > 8 ? 5 : count
+  }).map(function (_, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      className: cn('flex w-full animate-pulse items-center gap-3 rounded', selectItemVariants({
+        size: size
+      }), isGroup && getOptionInGroupPaddingLeft(size))
+    }, withCheckbox && /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": "true",
+      className: cn('bg-muted shrink-0 rounded-[4px]', size === FormSize.Lg ? 'h-5 w-5' : 'h-4 w-4')
+    }), withIcons && /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": "true",
+      className: cn('bg-muted shrink-0 rounded', iconSizeByFormSize[size])
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "flex-1 space-y-2 overflow-hidden"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('bg-muted/70 h-3 rounded', rowSizes[i])
+    })));
+  }));
+}
+export { CommandSkeleton };

package/command/index.d.ts

@@ -1 +1,2 @@
 export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, } from './command.component';
+export { CommandSkeleton } from './command.skeleton';

package/command/index.js

@@ -1 +1,2 @@
-export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from './command.component';
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from './command.component';
+export { CommandSkeleton } from './command.skeleton';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.82",
+  "version": "0.0.83",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -23,7 +23,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.82",
+    "@scaleflex/icons-tw": "^0.0.83",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",