ssovee-os-web-ui 0.1.31 → 0.1.32

package/README.md

@@ -59,7 +59,6 @@ export function Example() {
 
 ### Simple window
 
-{% raw %}
 ```tsx
 import { WindowWithoutSideMenu, Typography } from "ssovee-os-web-ui";
 
@@ -82,11 +81,9 @@ export function NotesWindow() {
   );
 }
 ```
-{% endraw %}
 
 ### Window with sidebar menu
 
-{% raw %}
 ```tsx
 import { WindowWithSideMenu, Typography, Button } from "ssovee-os-web-ui";
 
@@ -121,7 +118,23 @@ export function SettingsWindow() {
   );
 }
 ```
-{% endraw %}
+
+## Skeleton loader
+
+```tsx
+import { Skeleton } from "ssovee-os-web-ui";
+
+export function LoadingState() {
+  return (
+    <div style={{ display: "grid", gap: 12 }}>
+      <Skeleton variant="text" lines={3} />
+      <Skeleton variant="avatar" className="h-12 w-12" />
+      <Skeleton variant="image" className="h-40" />
+      <Skeleton variant="card" lines={4} />
+    </div>
+  );
+}
+```
 
 ## Plugin playground
 
@@ -173,6 +186,7 @@ The package exports these components and types for external use:
 - `Dropdown`
 - `DropdownOption`
 - `Loading`
+- `Skeleton`
 - `Toast`
 - `Alert`
 - `Modal`

package/dist/index.cjs

@@ -783,6 +783,105 @@ var Loading = ({
   return content;
 };
 var Loading_default = Loading;
+var basePulseClasses = "bg-surface-1/35 dark:bg-surface-3/20 rounded-md overflow-hidden";
+var lineWidths = ["w-full", "w-11/12", "w-4/5", "w-3/5"];
+var Skeleton = ({
+  variant = "text",
+  lines = 3,
+  lineClassName,
+  className,
+  animate = true,
+  ...props
+}) => {
+  const pulseClasses = animate ? "animate-pulse" : "";
+  if (variant === "avatar") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(basePulseClasses, pulseClasses, "rounded-full h-10 w-10", className),
+        "aria-hidden": "true",
+        ...props
+      }
+    );
+  }
+  if (variant === "image") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(basePulseClasses, pulseClasses, "h-40 w-full", className),
+        "aria-hidden": "true",
+        ...props
+      }
+    );
+  }
+  if (variant === "rect") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(basePulseClasses, pulseClasses, "h-12 w-full", className),
+        "aria-hidden": "true",
+        ...props
+      }
+    );
+  }
+  if (variant === "card") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "w-full rounded-xl border border-surface-1/40 bg-secondary/60 p-4",
+          className
+        ),
+        "aria-hidden": "true",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(basePulseClasses, pulseClasses, "h-10 w-10 rounded-full") }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(basePulseClasses, pulseClasses, "h-3 w-1/3 rounded") }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(basePulseClasses, pulseClasses, "h-3 w-1/4 rounded") })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 space-y-2", children: Array.from({ length: Math.max(lines, 2) }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                basePulseClasses,
+                pulseClasses,
+                "h-3 rounded",
+                lineWidths[index % lineWidths.length],
+                lineClassName
+              )
+            },
+            `card-line-${index}`
+          )) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("w-full space-y-2", className),
+      "aria-hidden": "true",
+      ...props,
+      children: Array.from({ length: Math.max(lines, 1) }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            basePulseClasses,
+            pulseClasses,
+            "h-3 rounded",
+            lineWidths[index % lineWidths.length],
+            lineClassName
+          )
+        },
+        `text-line-${index}`
+      ))
+    }
+  );
+};
+var Skeleton_default = Skeleton;
 var Toast = ({
   heading,
   message,
@@ -1513,6 +1612,9 @@ var SearchInput = React22__namespace.default.forwardRef(
     const inputRef = React22.useRef(null);
     React22.useImperativeHandle(ref, () => inputRef.current);
     const { addShortcutListener, removeShortcutListener, formatKeys, getShortcutByCommand } = useShortcutFormatter_default();
+    React22.useEffect(() => {
+      setSearchValue(value ?? "");
+    }, [value]);
     const handleChange = (e) => {
       const newValue = e.target.value;
       setSearchValue(newValue);
@@ -1553,17 +1655,31 @@ var SearchInput = React22__namespace.default.forwardRef(
       outline: "bg-transparent border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
     };
     const sizeClasses = {
-      sm: "h-8 px-2 pl-8 text-sm",
-      md: "h-10 px-3 pl-10 text-base",
-      lg: "h-12 px-4 pl-12 text-lg"
+      sm: "h-8 px-2 pl-8 text-sm leading-tight",
+      md: "h-10 px-3 pl-10 text-base leading-tight",
+      lg: "h-12 px-4 pl-12 text-lg leading-tight"
     };
     const iconSizeClasses = {
       sm: "w-4 h-4",
       md: "w-5 h-5",
       lg: "w-6 h-6"
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400", children: /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { className: iconSizeClasses[size] }) }),
+    const iconPositionClasses = {
+      sm: "left-2",
+      md: "left-3",
+      lg: "left-3.5"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "pointer-events-none absolute top-1/2 -translate-y-1/2 text-neutral-400",
+            iconPositionClasses[size]
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { className: iconSizeClasses[size] })
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -1575,6 +1691,7 @@ var SearchInput = React22__namespace.default.forwardRef(
           className: cn(
             baseClasses,
             variantClasses[variant],
+            "w-full min-w-0",
             sizeClasses[size],
             showClearButton && searchValue ? "pr-10" : "",
             className
@@ -1586,7 +1703,9 @@ var SearchInput = React22__namespace.default.forwardRef(
         "button",
         {
           onClick: handleClear,
-          className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors",
+          className: "absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors",
+          "aria-label": "Clear search",
+          type: "button",
           children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: iconSizeClasses[size], fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
         }
       )
@@ -3145,6 +3264,7 @@ exports.Progress = Progress_default;
 exports.Radio = Radio_default;
 exports.SearchInput = SearchInput_default;
 exports.Select = Select_default;
+exports.Skeleton = Skeleton_default;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCaption = TableCaption;