@vllnt/ui 0.2.1 → 0.3.0-canary.0572c35

package/dist/components/snap-guides/snap-guides.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Snap guides"
+};
+const SnapGuides = forwardRef(
+  (props, ref) => {
+    const { className, guides, labels, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn("pointer-events-none absolute inset-0 z-30", className),
+        "data-snap-guide-count": guides.length,
+        ref,
+        ...rest,
+        children: guides.map((guide) => {
+          const isVertical = guide.orientation === "vertical";
+          const offset = isVertical ? guide.x : guide.y;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "absolute border-primary/70",
+                isVertical ? "inset-y-0 w-px border-l border-dashed" : "inset-x-0 h-px border-t border-dashed"
+              ),
+              "data-snap-guide-id": guide.id,
+              "data-snap-orientation": guide.orientation,
+              style: isVertical ? { left: `${offset.toString()}px` } : { top: `${offset.toString()}px` }
+            },
+            guide.id
+          );
+        })
+      }
+    );
+  }
+);
+SnapGuides.displayName = "SnapGuides";
+export {
+  SnapGuides
+};

package/dist/components/social-fab/social-fab.js

@@ -7,15 +7,15 @@ function ShareMenu({
   onPlatformSelect,
   platforms
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 rounded-md border border-gray-300 bg-background p-1.5 shadow-md dark:border-gray-600", children: platforms.map((p) => {
-    const handleClick = () => {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 rounded-md border border-zinc-300 bg-background p-1.5 shadow-md dark:border-zinc-600", children: platforms.map((p) => {
+    const handleSelectSharePlatform = () => {
       onPlatformSelect(p.key);
     };
     return /* @__PURE__ */ jsx(
       "button",
       {
         className: "rounded px-3 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-        onClick: handleClick,
+        onClick: handleSelectSharePlatform,
         type: "button",
         children: p.label
       },
@@ -24,12 +24,12 @@ function ShareMenu({
   }) });
 }
 function ActionButton({ action }) {
-  const handleClick = action.onClick;
+  const handleRunAction = action.onClick;
   return /* @__PURE__ */ jsx(
     "button",
     {
       className: "rounded px-3 py-1.5 text-left text-sm transition-colors hover:bg-accent",
-      onClick: handleClick,
+      onClick: handleRunAction,
       type: "button",
       children: action.label
     }
@@ -47,7 +47,7 @@ function ActionPanel({
   const handleShareClick = shareAction?.onClick;
   const handleShareMouseEnter = isMobile ? void 0 : onShareHover;
   const handleShareMouseLeave = isMobile ? void 0 : onShareLeave;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 rounded-md border border-gray-300 bg-background p-1.5 shadow-md dark:border-gray-600", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 rounded-md border border-zinc-300 bg-background p-1.5 shadow-md dark:border-zinc-600", children: [
     shareAction ? /* @__PURE__ */ jsx(
       "button",
       {
@@ -69,7 +69,7 @@ function MainFabButton({
   mainText,
   onToggle
 }) {
-  const handleClick = onToggle;
+  const handleToggleSharePanel = onToggle;
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -77,11 +77,11 @@ function MainFabButton({
       "aria-label": isExpanded ? labels.close : labels.share,
       className: cn(
         "flex size-10 items-center justify-center rounded-md",
-        "border border-gray-300 bg-background dark:border-gray-600",
+        "border border-zinc-300 bg-background dark:border-zinc-600",
         "transition-all duration-200 ease-out",
-        "hover:-translate-y-0.5 hover:border-gray-400 hover:shadow-md dark:hover:border-gray-500"
+        "hover:-translate-y-0.5 hover:border-zinc-400 hover:shadow-md dark:hover:border-zinc-500"
       ),
-      onClick: handleClick,
+      onClick: handleToggleSharePanel,
       type: "button",
       children: /* @__PURE__ */ jsx("span", { className: "text-sm font-mono", children: isMobile && isExpanded ? "\u2715" : mainText })
     }
@@ -140,6 +140,7 @@ function ExpandedPanel({
     }
   );
 }
+const EMPTY_SHARE_PLATFORMS = [];
 function SocialFAB({
   actions,
   bottomOffset = 24,
@@ -150,7 +151,7 @@ function SocialFAB({
   onClose,
   onOpen,
   rightOffset = 24,
-  sharePlatforms = []
+  sharePlatforms = EMPTY_SHARE_PLATFORMS
 }) {
   const options = { onAction, onClose, onOpen };
   const fab = useSocialFab(options);

package/dist/components/sparkline-grid/sparkline-grid.js

@@ -30,7 +30,7 @@ const SparklineGrid = React.forwardRef(({ className, columns = 2, items, ...prop
       children: items.map((item) => {
         const isPositive = item.change >= 0;
         const TrendIcon = isPositive ? ArrowUpRight : ArrowDownRight;
-        const stroke = isPositive ? "hsl(142 71% 45%)" : "hsl(348 83% 47%)";
+        const strokeClass = isPositive ? "text-emerald-600 dark:text-emerald-400" : "text-rose-600 dark:text-rose-400";
         return /* @__PURE__ */ jsxs(
           "section",
           {
@@ -49,7 +49,7 @@ const SparklineGrid = React.forwardRef(({ className, columns = 2, items, ...prop
                       isPositive ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(TrendIcon, { className: "h-3.5 w-3.5" }),
+                      /* @__PURE__ */ jsx(TrendIcon, { className: "size-3.5" }),
                       item.change > 0 ? "+" : "",
                       item.change.toFixed(2),
                       "%"
@@ -67,9 +67,10 @@ const SparklineGrid = React.forwardRef(({ className, columns = 2, items, ...prop
                   children: /* @__PURE__ */ jsx(
                     "path",
                     {
+                      className: strokeClass,
                       d: buildSparklinePath(item.data, 120, 48),
                       fill: "none",
-                      stroke,
+                      stroke: "currentColor",
                       strokeLinecap: "round",
                       strokeLinejoin: "round",
                       strokeWidth: "2.5",

package/dist/components/spinner/spinner.js

@@ -7,14 +7,14 @@ function Spinner({ className, size = "md", ...props }) {
       className: cn(
         "animate-spin rounded-full border-2 border-current border-t-transparent",
         {
-          "h-4 w-4": size === "sm",
-          "h-6 w-6": size === "md",
-          "h-8 w-8": size === "lg"
+          "size-4": size === "sm",
+          "size-6": size === "md",
+          "size-8": size === "lg"
         },
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading\u2026" })
     }
   );
 }

package/dist/components/spinner/unicode-spinner.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
@@ -657,9 +658,11 @@ const UnicodeSpinner = React.forwardRef(
     const preset = UNICODE_SPINNER_PRESETS[animation];
     const resolvedInterval = interval ?? preset.interval;
     const [frameIndex, setFrameIndex] = React.useState(0);
-    React.useEffect(() => {
+    const [previousAnimation, setPreviousAnimation] = React.useState(animation);
+    if (previousAnimation !== animation) {
+      setPreviousAnimation(animation);
       setFrameIndex(0);
-    }, [animation]);
+    }
     React.useEffect(() => {
       if (paused) {
         return;

package/dist/components/stat-card/stat-card.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { ArrowDownRight, ArrowRight, ArrowUpRight } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Card, CardContent, CardDescription, CardHeader } from "../card";
+import { Card, CardContent, CardDescription, CardHeader } from "../card/card";
 const statCardVariants = cva("overflow-hidden border shadow-sm", {
   defaultVariants: {
     tone: "neutral"
@@ -47,12 +47,12 @@ const changeVariants = cva(
 );
 function TrendIcon({ trend }) {
   if (trend === "up") {
-    return /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-3.5" });
   }
   if (trend === "down") {
-    return /* @__PURE__ */ jsx(ArrowDownRight, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx(ArrowDownRight, { className: "size-3.5" });
   }
-  return /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5" });
+  return /* @__PURE__ */ jsx(ArrowRight, { className: "size-3.5" });
 }
 const StatCard = React.forwardRef(
   ({
@@ -74,7 +74,7 @@ const StatCard = React.forwardRef(
       ...props,
       children: [
         /* @__PURE__ */ jsx("div", { className: accentVariants({ tone }) }),
-        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4 space-y-0 pb-3", children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4 gap-y-0 pb-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
             /* @__PURE__ */ jsx(CardDescription, { className: "text-xs font-medium uppercase tracking-[0.14em]", children: label }),
             /* @__PURE__ */ jsx("div", { className: "text-3xl font-semibold tracking-tight", children: value })

package/dist/components/state-badge-overlay/index.js

@@ -0,0 +1,6 @@
+import {
+  StateBadgeOverlay
+} from "./state-badge-overlay";
+export {
+  StateBadgeOverlay
+};

package/dist/components/state-badge-overlay/state-badge-overlay.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATE_LABEL = {
+  complete: "Complete",
+  failed: "Failed",
+  idle: "Idle",
+  queued: "Queued",
+  running: "Running",
+  stopped: "Stopped"
+};
+const STATE_TONE = {
+  complete: "border-emerald-500/40 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
+  failed: "border-red-500/40 bg-red-500/15 text-red-700 dark:text-red-300",
+  idle: "border-border bg-muted/40 text-muted-foreground",
+  queued: "border-amber-500/40 bg-amber-500/15 text-amber-700 dark:text-amber-300",
+  running: "border-blue-500/40 bg-blue-500/15 text-blue-700 dark:text-blue-300",
+  stopped: "border-border bg-background text-foreground"
+};
+const STATE_DOT = {
+  complete: "bg-emerald-500",
+  failed: "bg-red-500",
+  idle: "bg-muted-foreground",
+  queued: "bg-amber-500",
+  running: "bg-blue-500 animate-pulse",
+  stopped: "bg-muted-foreground"
+};
+const ANCHOR_TRANSFORM = {
+  "bottom-left": "translate(-100%, 100%)",
+  "bottom-right": "translate(0%, 100%)",
+  "top-left": "translate(-100%, -100%)",
+  "top-right": "translate(0%, -100%)"
+};
+const DEFAULT_LABELS = {
+  region: "State"
+};
+const StateBadgeOverlay = forwardRef((props, ref) => {
+  const {
+    anchor = "top-right",
+    className,
+    label,
+    labels,
+    state,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const text = label ?? STATE_LABEL[state];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": `${resolvedLabels.region}: ${STATE_LABEL[state]}`,
+      className: cn(
+        "pointer-events-none absolute z-20 inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide shadow-sm backdrop-blur",
+        STATE_TONE[state],
+        className
+      ),
+      "data-state-anchor": anchor,
+      "data-state-badge-overlay": true,
+      "data-state-name": state,
+      ref,
+      role: "status",
+      style: {
+        left: x,
+        top: y,
+        transform: ANCHOR_TRANSFORM[anchor]
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn("size-1.5 rounded-full", STATE_DOT[state]),
+            "data-state-badge-dot": true
+          }
+        ),
+        text
+      ]
+    }
+  );
+});
+StateBadgeOverlay.displayName = "StateBadgeOverlay";
+export {
+  StateBadgeOverlay
+};

package/dist/components/static-code/index.js

@@ -0,0 +1,4 @@
+import { StaticCode } from "./static-code";
+export {
+  StaticCode
+};

package/dist/components/static-code/static-code-copy.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { Button } from "../button/button";
+import { useCopyToClipboard } from "../copy-button/copy-button";
+function StaticCodeCopy({ value }) {
+  const { copied, copy } = useCopyToClipboard();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": copied ? "Copied" : "Copy code",
+      className: "absolute right-2 top-2 size-8",
+      onClick: () => {
+        void copy(value);
+      },
+      size: "icon",
+      variant: "ghost",
+      children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
+    }
+  );
+}
+export {
+  StaticCodeCopy
+};

package/dist/components/static-code/static-code.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { cn } from "../../lib/utils";
+import { StaticCodeCopy } from "./static-code-copy";
+function StaticCode({
+  className,
+  code,
+  language = "tsx"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative overflow-x-auto rounded-lg border border-border bg-[#282c34]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          SyntaxHighlighter,
+          {
+            customStyle: {
+              background: "transparent",
+              fontSize: "0.875rem",
+              margin: 0,
+              padding: "1rem"
+            },
+            language,
+            PreTag: "div",
+            style: oneDark,
+            children: code
+          }
+        ),
+        /* @__PURE__ */ jsx(StaticCodeCopy, { value: code })
+      ]
+    }
+  );
+}
+export {
+  StaticCode
+};

package/dist/components/status-board/status-board.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle
-} from "../card";
+} from "../card/card";
 const STATUS_META = {
   critical: {
     badgeVariant: "destructive",
@@ -71,10 +71,16 @@ function getSummary(items) {
       warning: 0
     }
   );
-  return STATUS_ORDER.map((status) => ({
-    count: counts[status],
-    status
-  })).filter((entry) => entry.count > 0);
+  return STATUS_ORDER.reduce(
+    (summary, status) => {
+      const count = counts[status];
+      if (count > 0) {
+        summary.push({ count, status });
+      }
+      return summary;
+    },
+    []
+  );
 }
 function StatusBoardSummary({ items }) {
   return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: getSummary(items).map(({ count, status }) => {
@@ -96,7 +102,7 @@ function StatusBoardCard({ item }) {
             "span",
             {
               "aria-hidden": "true",
-              className: cn("h-2.5 w-2.5 rounded-full", meta.dotClassName)
+              className: cn("size-2.5 rounded-full", meta.dotClassName)
             }
           ),
           /* @__PURE__ */ jsx(CardTitle, { className: "text-base leading-none", children: item.label })
@@ -113,6 +119,7 @@ function StatusBoardCard({ item }) {
 }
 const StatusBoard = React.forwardRef(
   ({
+    as: Heading = "h2",
     className,
     columns = 3,
     description,
@@ -123,7 +130,7 @@ const StatusBoard = React.forwardRef(
     return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ref, ...props, children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold tracking-tight", children: title }),
+          /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold tracking-tight", children: title }),
           description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
         ] }),
         /* @__PURE__ */ jsx(StatusBoardSummary, { items })

package/dist/components/status-indicator/status-indicator.js

@@ -115,9 +115,9 @@ const dotVariants = cva("rounded-full", {
   },
   variants: {
     size: {
-      lg: "h-2.5 w-2.5",
-      md: "h-2 w-2",
-      sm: "h-1.5 w-1.5"
+      lg: "size-2.5",
+      md: "size-2",
+      sm: "size-1.5"
     },
     tone: {
       danger: "bg-red-500",

package/dist/components/step-by-step/step-by-step.js

@@ -10,7 +10,7 @@ function Step({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-4", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold", children: number }),
+      /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold", children: number }),
       /* @__PURE__ */ jsx("div", { className: "w-px flex-1 bg-border mt-2" })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 pb-8 last:pb-0", children: [
@@ -33,7 +33,7 @@ function InteractiveStep({
         "button",
         {
           className: cn(
-            "flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold transition-colors",
+            "flex size-8 items-center justify-center rounded-full text-sm font-bold transition-colors",
             isCompleted ? "bg-green-500 text-white" : "bg-primary text-primary-foreground"
           ),
           onClick: onToggle,
@@ -41,7 +41,7 @@ function InteractiveStep({
           children: isCompleted ? /* @__PURE__ */ jsx(
             "svg",
             {
-              className: "h-4 w-4",
+              className: "size-4",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -93,6 +93,7 @@ function InteractiveStep({
   ] });
 }
 function StepByStep({
+  as: Heading = "h3",
   children,
   className,
   interactive = false,
@@ -112,7 +113,7 @@ function StepByStep({
         /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "h-5 w-5 text-primary",
+            className: "size-5 text-primary",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -127,10 +128,11 @@ function StepByStep({
             )
           }
         ),
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg", children: title })
+        /* @__PURE__ */ jsx(Heading, { className: "font-semibold text-lg", children: title })
       ] }) : null,
       /* @__PURE__ */ jsx("div", { className: "space-y-0", children: steps.map((step, index) => {
         const stepElement = step;
+        const stepKey = `${stepElement.props.title}-${index + 1}`;
         return /* @__PURE__ */ jsx(
           Step,
           {
@@ -138,7 +140,7 @@ function StepByStep({
             title: stepElement.props.title,
             children: stepElement.props.children
           },
-          index
+          stepKey
         );
       }) })
     ] });
@@ -148,7 +150,7 @@ function StepByStep({
       /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "h-5 w-5 text-primary",
+          className: "size-5 text-primary",
           fill: "none",
           stroke: "currentColor",
           viewBox: "0 0 24 24",
@@ -183,7 +185,7 @@ function StepByStep({
         title: step.props.title,
         children: step.props.children
       },
-      index
+      `${step.props.title}-${index + 1}`
     )) })
   ] });
 }

package/dist/components/step-navigation/step-navigation.js

@@ -45,7 +45,7 @@ function StepNavigationImpl({
                 "svg",
                 {
                   "aria-hidden": "true",
-                  className: "h-5 w-5",
+                  className: "size-5",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
@@ -90,7 +90,7 @@ function StepNavigationImpl({
                 "svg",
                 {
                   "aria-hidden": "true",
-                  className: "h-5 w-5",
+                  className: "size-5",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",

package/dist/components/stepper/stepper.js

@@ -13,10 +13,10 @@ function StepIcon({
   stepNumber
 }) {
   if (state === "complete") {
-    return /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" });
+    return /* @__PURE__ */ jsx(Check, { className: "size-4" });
   }
   if (!showNumbers) {
-    return /* @__PURE__ */ jsx(Circle, { className: "h-3.5 w-3.5 fill-current stroke-none" });
+    return /* @__PURE__ */ jsx(Circle, { className: "size-3.5 fill-current stroke-none" });
   }
   return /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold", children: stepNumber });
 }
@@ -52,7 +52,7 @@ function StepperItem({
             {
               "aria-current": stepState === "current" ? "step" : void 0,
               className: cn(
-                "relative z-10 flex h-8 w-8 items-center justify-center rounded-full border text-sm transition-colors",
+                "relative z-10 flex size-8 items-center justify-center rounded-full border text-sm transition-colors",
                 stepState === "complete" && "border-primary bg-primary text-primary-foreground",
                 stepState === "current" && "border-primary bg-primary/10 text-primary shadow-sm",
                 stepState === "upcoming" && "border-border bg-background text-muted-foreground"

package/dist/components/sticky-metric/index.js

@@ -0,0 +1,6 @@
+import {
+  StickyMetric
+} from "./sticky-metric";
+export {
+  StickyMetric
+};