@la-batcave/ui 3.1.2

package/dist/Separator.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Separator };

package/dist/Separator.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { c as p } from "./_shared/utils-eGXXUFl7.js";
+import * as m from "react";
+import { P as d } from "./_shared/index-V-Ajw7Ac.js";
+var f = "Separator", e = "horizontal", v = ["horizontal", "vertical"], s = m.forwardRef((r, o) => {
+  const { decorative: a, orientation: t = e, ...c } = r, i = u(t) ? t : e, l = a ? { role: "none" } : { "aria-orientation": i === "vertical" ? i : void 0, role: "separator" };
+  return /* @__PURE__ */ n(
+    d.div,
+    {
+      "data-orientation": i,
+      ...l,
+      ...c,
+      ref: o
+    }
+  );
+});
+s.displayName = f;
+function u(r) {
+  return v.includes(r);
+}
+var h = s;
+function T({
+  className: r,
+  orientation: o = "horizontal",
+  decorative: a = !0,
+  ...t
+}) {
+  return /* @__PURE__ */ n(
+    h,
+    {
+      "data-slot": "separator",
+      decorative: a,
+      orientation: o,
+      className: p(
+        "shrink-0 bg-border",
+        o === "horizontal" ? "h-px w-full" : "w-px self-stretch",
+        r
+      ),
+      ...t
+    }
+  );
+}
+export {
+  T as Separator
+};

package/dist/Sheet.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps } from "class-variance-authority";
+declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
+export interface SheetOverlayProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> {
+}
+declare const SheetOverlay: React.ForwardRefExoticComponent<SheetOverlayProps & React.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "top" | "bottom" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface SheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare function SheetHeader({ className, ...props }: SheetHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface SheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare function SheetFooter({ className, ...props }: SheetFooterProps): import("react/jsx-runtime").JSX.Element;
+export interface SheetTitleProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> {
+}
+declare const SheetTitle: React.ForwardRefExoticComponent<SheetTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface SheetDescriptionProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> {
+}
+declare const SheetDescription: React.ForwardRefExoticComponent<SheetDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export { Sheet, SheetTrigger, SheetClose, SheetPortal, SheetOverlay, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, sheetVariants, };

package/dist/Sheet.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import * as r from "react";
+import { O as f, P as m, C as p, a as n, T as u, D as h, R as b, b as g } from "./_shared/index-DlSuDb9N.js";
+import { c as x } from "./_shared/index-uPOYJZpG.js";
+import { X as S } from "lucide-react";
+import { c as s } from "./_shared/utils-eGXXUFl7.js";
+const k = b, z = g, P = n, y = m, d = r.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ o(
+  f,
+  {
+    ref: a,
+    className: s(
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+      t
+    ),
+    ...e
+  }
+));
+d.displayName = "SheetOverlay";
+const v = x(
+  "fixed z-50 flex flex-col gap-4 bg-card/95 backdrop-blur-lg border border-border shadow-lg transition-transform focus:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 h-[320px] border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
+        bottom: "inset-x-0 bottom-0 h-[320px] border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
+        left: "inset-y-0 left-0 w-[320px] border-r data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
+        right: "inset-y-0 right-0 w-[320px] border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+), N = r.forwardRef(({ side: t = "right", className: e, children: a, ...l }, c) => /* @__PURE__ */ i(y, { children: [
+  /* @__PURE__ */ o(d, {}),
+  /* @__PURE__ */ i(
+    p,
+    {
+      ref: c,
+      className: s(v({ side: t }), e),
+      ...l,
+      children: [
+        a,
+        /* @__PURE__ */ o(n, { className: "absolute right-4 top-4 w-7 h-7 rounded-md flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring", children: /* @__PURE__ */ o(S, { size: 18 }) })
+      ]
+    }
+  )
+] }));
+N.displayName = "SheetContent";
+function V({ className: t, ...e }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: s("flex flex-col gap-0.5 px-5 pt-5", t),
+      ...e
+    }
+  );
+}
+function F({ className: t, ...e }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: s(
+        "flex items-center justify-end gap-2 py-4 px-5 mt-auto border-t border-border",
+        t
+      ),
+      ...e
+    }
+  );
+}
+const w = r.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ o(
+  u,
+  {
+    ref: a,
+    className: s("text-base font-semibold text-foreground", t),
+    ...e
+  }
+));
+w.displayName = "SheetTitle";
+const R = r.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ o(
+  h,
+  {
+    ref: a,
+    className: s("text-sm text-muted-foreground", t),
+    ...e
+  }
+));
+R.displayName = "SheetDescription";
+export {
+  k as Sheet,
+  P as SheetClose,
+  N as SheetContent,
+  R as SheetDescription,
+  F as SheetFooter,
+  V as SheetHeader,
+  d as SheetOverlay,
+  y as SheetPortal,
+  w as SheetTitle,
+  z as SheetTrigger,
+  v as sheetVariants
+};

package/dist/Sidebar.d.ts

@@ -0,0 +1,117 @@
+import * as React from "react";
+interface SidebarContextValue {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+declare function useSidebar(): SidebarContextValue;
+export interface SidebarLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Height offset for a fixed navbar above the sidebar (e.g. 56 for h-14).
+     * Controls `top` and `height` of the sidebar on desktop and mobile.
+     * @default 56
+     */
+    navbarHeight?: number;
+}
+declare function SidebarLayout({ navbarHeight, className, children, ...props }: SidebarLayoutProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+declare function SidebarTrigger({ className, ...props }: SidebarTriggerProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Height offset matching the fixed navbar. Passed automatically
+     * when used inside SidebarLayout, but can be overridden.
+     * @default 56
+     */
+    navbarHeight?: number;
+}
+declare function Sidebar({ navbarHeight, className, children, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarInsetProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Height offset matching the fixed navbar for top padding.
+     * @default 56
+     */
+    navbarHeight?: number;
+}
+declare function SidebarInset({ navbarHeight, className, children, ...props }: SidebarInsetProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare function SidebarHeader({ className, ...props }: SidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare function SidebarContent({ className, ...props }: SidebarContentProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare function SidebarFooter({ className, ...props }: SidebarFooterProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Optional group label displayed above the items. */
+    label?: string;
+}
+declare function SidebarGroup({ label, className, children, ...props }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare function SidebarSeparator({ className, ...props }: SidebarSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarItemProps extends React.HTMLAttributes<HTMLElement> {
+    /** Icon component rendered before the label. */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    /** Whether this item is currently active. */
+    active?: boolean;
+    /** Optional badge or indicator rendered on the right side. */
+    badge?: React.ReactNode;
+    /** Render as the child element (e.g., NavLink, anchor). @default false */
+    asChild?: boolean;
+}
+declare function SidebarItem({ icon: Icon, active, badge, asChild, className, children, ...props }: SidebarItemProps): import("react/jsx-runtime").JSX.Element;
+export interface EasySidebarItem {
+    /** Unique key for this item. */
+    key: string;
+    /** Display label. */
+    label: string;
+    /** Icon component. */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    /** Navigation href. Used with renderLink or as a plain <a>. */
+    href?: string;
+    /** Badge content rendered on the right side (string, number, or ReactNode). */
+    badge?: React.ReactNode;
+    /** Whether this item is currently active. */
+    active?: boolean;
+}
+export interface EasySidebarGroup {
+    /** Group label displayed above the items. */
+    label?: string;
+    /** Items in this group. */
+    items: EasySidebarItem[];
+}
+export type EasySidebarEntry = EasySidebarItem | EasySidebarGroup | "separator";
+export interface EasySidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
+    /** Sidebar entries: items, groups, or "separator" strings. */
+    items: EasySidebarEntry[];
+    /** Header content rendered above the navigation. */
+    header?: React.ReactNode;
+    /** Footer content rendered below the navigation. */
+    footer?: React.ReactNode;
+    /**
+     * Custom link renderer. Receives the item and must return a single element.
+     * Used to integrate with react-router NavLink, Next.js Link, etc.
+     * When provided, SidebarItem renders with asChild, merging its props onto
+     * the element you return.
+     *
+     * @example
+     * renderLink={(item) => <NavLink to={item.href}>{item.label}</NavLink>}
+     */
+    renderLink?: (item: EasySidebarItem) => React.ReactElement;
+    /** Callback when an item is clicked. Receives the item key. */
+    onNavigate?: (key: string) => void;
+    /**
+     * Height offset matching the fixed navbar.
+     * @default 56
+     */
+    navbarHeight?: number;
+}
+declare function EasySidebar({ items, header, footer, renderLink, onNavigate, navbarHeight, className, ...props }: EasySidebarProps): import("react/jsx-runtime").JSX.Element;
+export { SidebarLayout, SidebarTrigger, Sidebar, SidebarInset, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarSeparator, SidebarItem, EasySidebar, useSidebar, };

package/dist/Sidebar.js

@@ -0,0 +1,237 @@
+"use client";
+import { jsxs as f, jsx as r, Fragment as S } from "react/jsx-runtime";
+import * as m from "react";
+import { S as k, a as N } from "./_shared/index-BrLJJgkl.js";
+import { X as y, Menu as C } from "lucide-react";
+import { c as i } from "./_shared/utils-eGXXUFl7.js";
+const v = m.createContext({
+  open: !1,
+  setOpen: () => {
+  }
+});
+function x() {
+  return m.useContext(v);
+}
+function P({
+  navbarHeight: e = 56,
+  className: n,
+  children: a,
+  ...o
+}) {
+  const [s, c] = m.useState(!1);
+  return /* @__PURE__ */ r(v.Provider, { value: { open: s, setOpen: c }, children: /* @__PURE__ */ r(
+    "div",
+    {
+      className: i("relative flex min-h-screen", n),
+      ...o,
+      children: a
+    }
+  ) });
+}
+function R({ className: e, ...n }) {
+  const { open: a, setOpen: o } = x();
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      className: i(
+        "inline-flex items-center justify-center w-8 h-8 rounded-md",
+        "text-muted-foreground hover:text-foreground hover:bg-muted",
+        "transition-colors cursor-pointer md:hidden",
+        e
+      ),
+      onClick: () => o((s) => !s),
+      ...n,
+      children: a ? /* @__PURE__ */ r(y, { size: 18 }) : /* @__PURE__ */ r(C, { size: 18 })
+    }
+  );
+}
+function w({ navbarHeight: e = 56, className: n, children: a, ...o }) {
+  const { open: s, setOpen: c } = x();
+  return /* @__PURE__ */ f(S, { children: [
+    s && /* @__PURE__ */ r(
+      "div",
+      {
+        className: "fixed inset-0 z-30 bg-black/50 md:hidden",
+        onClick: () => c(!1)
+      }
+    ),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: i(
+          "fixed left-0 z-30 w-[220px] transition-transform duration-200",
+          "md:sticky md:translate-x-0 md:shrink-0",
+          s ? "translate-x-0" : "-translate-x-full"
+        ),
+        style: {
+          top: e,
+          height: `calc(100vh - ${e}px)`
+        },
+        children: /* @__PURE__ */ r(
+          "aside",
+          {
+            className: i(
+              "flex flex-col h-full bg-card border-r border-border w-full",
+              n
+            ),
+            ...o,
+            children: a
+          }
+        )
+      }
+    )
+  ] });
+}
+function X({ navbarHeight: e = 56, className: n, children: a, ...o }) {
+  return /* @__PURE__ */ r(
+    "main",
+    {
+      className: i("flex-1 min-w-0", n),
+      style: { paddingTop: e },
+      ...o,
+      children: a
+    }
+  );
+}
+function z({ className: e, ...n }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: i("px-3 py-3 shrink-0", e),
+      ...n
+    }
+  );
+}
+function O({ className: e, ...n }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: i("flex-1 overflow-y-auto py-1 px-2 flex flex-col gap-2", e),
+      ...n
+    }
+  );
+}
+function j({ className: e, ...n }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: i("px-2 py-2 shrink-0 border-t border-border", e),
+      ...n
+    }
+  );
+}
+function E({ label: e, className: n, children: a, ...o }) {
+  return /* @__PURE__ */ f("div", { className: i("flex flex-col gap-0.5", n), ...o, children: [
+    e && /* @__PURE__ */ r("span", { className: "px-3 py-1.5 text-[0.6875rem] font-semibold uppercase tracking-wider text-muted-foreground", children: e }),
+    a
+  ] });
+}
+function $({ className: e, ...n }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: i("mx-2 my-2 h-px bg-border", e),
+      ...n
+    }
+  );
+}
+function b({
+  icon: e,
+  active: n,
+  badge: a,
+  asChild: o,
+  className: s,
+  children: c,
+  ...d
+}) {
+  const p = o ? k : "button", { setOpen: u } = x(), h = (t) => {
+    u(!1), d.onClick && d.onClick(t);
+  };
+  return /* @__PURE__ */ f(
+    p,
+    {
+      "data-active": n || void 0,
+      className: i(
+        "flex items-center gap-2.5 w-full px-3 py-2 text-[0.8125rem] font-medium rounded-md transition-all duration-150 cursor-pointer",
+        "border-none bg-transparent text-left",
+        n ? "bg-primary/15 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+        s
+      ),
+      ...d,
+      onClick: h,
+      children: [
+        e && /* @__PURE__ */ r(e, { size: 16, className: "shrink-0" }),
+        o ? /* @__PURE__ */ r(N, { children: c }) : /* @__PURE__ */ r("span", { className: "flex-1 truncate", children: c }),
+        a && /* @__PURE__ */ r("span", { className: "shrink-0", children: a })
+      ]
+    }
+  );
+}
+function F(e) {
+  return typeof e == "object" && "items" in e;
+}
+function G(e) {
+  return e === "separator";
+}
+function q({
+  items: e,
+  header: n,
+  footer: a,
+  renderLink: o,
+  onNavigate: s,
+  navbarHeight: c = 56,
+  className: d,
+  ...p
+}) {
+  const u = (t) => o ? /* @__PURE__ */ r(
+    b,
+    {
+      icon: t.icon,
+      active: t.active,
+      badge: t.badge,
+      asChild: !0,
+      children: o(t)
+    },
+    t.key
+  ) : t.href ? /* @__PURE__ */ r(
+    b,
+    {
+      icon: t.icon,
+      active: t.active,
+      badge: t.badge,
+      asChild: !0,
+      children: /* @__PURE__ */ r("a", { href: t.href, children: t.label })
+    },
+    t.key
+  ) : /* @__PURE__ */ r(
+    b,
+    {
+      icon: t.icon,
+      active: t.active,
+      badge: t.badge,
+      onClick: () => s?.(t.key),
+      children: t.label
+    },
+    t.key
+  );
+  return /* @__PURE__ */ f(w, { navbarHeight: c, className: d, ...p, children: [
+    n && /* @__PURE__ */ r(z, { children: n }),
+    /* @__PURE__ */ r(O, { children: ((t) => t.map((l, g) => G(l) ? /* @__PURE__ */ r($, {}, `sep-${g}`) : F(l) ? /* @__PURE__ */ r(E, { label: l.label, children: l.items.map(u) }, l.label || `group-${g}`) : u(l)))(e) }),
+    a && /* @__PURE__ */ r(j, { children: a })
+  ] });
+}
+export {
+  q as EasySidebar,
+  w as Sidebar,
+  O as SidebarContent,
+  j as SidebarFooter,
+  E as SidebarGroup,
+  z as SidebarHeader,
+  X as SidebarInset,
+  b as SidebarItem,
+  P as SidebarLayout,
+  $ as SidebarSeparator,
+  R as SidebarTrigger,
+  x as useSidebar
+};

package/dist/Skeleton.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Animated placeholder for loading states. Renders a pulsing rounded
+ * rectangle that fills its container width by default.
+ *
+ * @description Use width/height via className or inline style to control size.
+ *
+ * @example
+ * <Skeleton className="h-4 w-48" />
+ *
+ * @example
+ * <Skeleton className="h-12 w-full" />
+ */
+declare function Skeleton({ className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Number of text lines to render.
+     * @default 3
+     */
+    lines?: number;
+    /**
+     * Gap between lines.
+     * @default "gap-2"
+     */
+    gap?: string;
+}
+/**
+ * Multiple skeleton lines simulating a block of text.
+ * The last line is rendered shorter (75% width) for a natural look.
+ *
+ * @example
+ * <SkeletonText lines={4} />
+ *
+ * @example
+ * <SkeletonText lines={2} className="max-w-sm" />
+ */
+declare function SkeletonText({ lines, gap, className, ...props }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonCircleProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Diameter of the circle in Tailwind size class (e.g. "size-10").
+     * @default "size-10"
+     */
+    size?: string;
+}
+/**
+ * Circular skeleton placeholder, useful for avatar or icon placeholders.
+ *
+ * @example
+ * <SkeletonCircle />
+ *
+ * @example
+ * <SkeletonCircle size="size-16" />
+ */
+declare function SkeletonCircle({ size, className, ...props }: SkeletonCircleProps): import("react/jsx-runtime").JSX.Element;
+export { Skeleton, SkeletonText, SkeletonCircle };

package/dist/Skeleton.js

@@ -0,0 +1,47 @@
+import { jsx as t } from "react/jsx-runtime";
+import { c as n } from "./_shared/utils-eGXXUFl7.js";
+function m({ className: e, ...r }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: n("animate-pulse rounded-md bg-muted", e),
+      ...r
+    }
+  );
+}
+function s({
+  lines: e = 3,
+  gap: r,
+  className: a,
+  ...o
+}) {
+  return /* @__PURE__ */ t("div", { className: n("flex flex-col", r || "gap-2", a), ...o, children: Array.from({ length: e }, (u, l) => /* @__PURE__ */ t(
+    m,
+    {
+      className: n("h-3.5", l === e - 1 && e > 1 && "w-3/4")
+    },
+    l
+  )) });
+}
+function i({
+  size: e,
+  className: r,
+  ...a
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: n(
+        "animate-pulse rounded-full bg-muted",
+        e || "size-10",
+        r
+      ),
+      ...a
+    }
+  );
+}
+export {
+  m as Skeleton,
+  i as SkeletonCircle,
+  s as SkeletonText
+};