@kingsimba/nc-ui 0.1.24 → 0.1.26

package/dist/index.d.ts

@@ -1132,4 +1132,20 @@ export declare function ViewportProvider({ children }: {
     children: ReactNode;
 }): JSX_2.Element;
 
+export declare function YamlTextArea({ value, onChange, onValidationChange, readOnly, minHeight, maxHeight, debounceMs, className, style, language, }: YamlTextAreaProps): JSX_2.Element;
+
+export declare interface YamlTextAreaProps {
+    value: string;
+    onChange: (value: string) => void;
+    onValidationChange?: (isValid: boolean, error?: string) => void;
+    readOnly?: boolean;
+    minHeight?: number;
+    maxHeight?: number;
+    debounceMs?: number;
+    className?: string;
+    style?: default_2.CSSProperties;
+    /** Language for syntax highlighting and validation. Default: 'yaml'. */
+    language?: 'yaml' | 'json';
+}
+
 export { }

package/dist/index.js

@@ -6,8 +6,9 @@ import { d as xe, E as rt, R as ot, T as st, g as it, V as ct, b as at, a as lt,
 import ke, { useState as E, useRef as W, useMemo as me, useEffect as B, createContext as se, useContext as J, Children as ut, isValidElement as pt, forwardRef as ft, useImperativeHandle as ht, useCallback as O, Suspense as mt } from "react";
 import { createPortal as ue } from "react-dom";
 import { useTranslation as Q } from "react-i18next";
-import gt from "i18next";
-import { c as bt } from "./clsx-OuTLNxxd.js";
+import { c as gt } from "./YamlTextArea-ee1d1TLc.js";
+import { Y as fr } from "./YamlTextArea-ee1d1TLc.js";
+import bt from "i18next";
 function He({
   size: e = "default",
   color: t,
@@ -396,7 +397,7 @@ function Bn({
     t == null || t(M), h(!1), k(""), P && ((D = w.current) == null || D.blur());
   }, Z = () => {
     t == null || t(void 0), k(""), h(!1);
-  }, G = (M) => {
+  }, Y = (M) => {
     if (!m) {
       (M.key === "ArrowDown" || M.key === "ArrowUp") && (h(!0), M.preventDefault());
       return;
@@ -450,7 +451,7 @@ function Bn({
                 }, 0))), c || (M = w.current) == null || M.blur();
               },
               onChange: (M) => c && k(M.target.value),
-              onKeyDown: G,
+              onKeyDown: Y,
               value: m && c ? g : (y == null ? void 0 : y.label) || "",
               readOnly: o || !c,
               style: {
@@ -814,7 +815,7 @@ function St({ visible: e, onClick: t, size: n = "default" }) {
     }
   );
 }
-function Gn({
+function Yn({
   value: e,
   defaultValue: t = "",
   onChange: n,
@@ -835,9 +836,9 @@ function Gn({
   validator: k,
   showErrorMessage: v = !0
 }) {
-  const N = W(null), w = W(null), [A, $] = E(!1), [L, T] = E(!1), y = e !== void 0, [R, C] = E(t), S = y ? e : R, z = k ? k(S) : null, F = !!z, Z = p === "password", G = Z && m && !a && !h, M = l && S && !a && L, P = b === "small" ? 32 : 44;
+  const N = W(null), w = W(null), [A, $] = E(!1), [L, T] = E(!1), y = e !== void 0, [R, C] = E(t), S = y ? e : R, z = k ? k(S) : null, F = !!z, Z = p === "password", Y = Z && m && !a && !h, M = l && S && !a && L, P = b === "small" ? 32 : 44;
   let D = 12;
-  M && G ? D = P * 2 : (M || G) && (D = P);
+  M && Y ? D = P * 2 : (M || Y) && (D = P);
   const V = u ? b === "small" ? 28 : 34 : void 0, Ze = () => {
     var te, ce;
     y || C(""), n == null || n(""), o == null || o(), h ? (te = w.current) == null || te.focus() : (ce = N.current) == null || ce.focus();
@@ -898,13 +899,13 @@ function Gn({
           }
         }
       ),
-      M && /* @__PURE__ */ s(Ct, { onClick: Ze, size: b, rightOffset: G ? P + 4 : 4 }),
-      G && /* @__PURE__ */ s(St, { visible: A, onClick: () => $(!A), size: b })
+      M && /* @__PURE__ */ s(Ct, { onClick: Ze, size: b, rightOffset: Y ? P + 4 : 4 }),
+      Y && /* @__PURE__ */ s(St, { visible: A, onClick: () => $(!A), size: b })
     ] }),
     F && v && /* @__PURE__ */ s("span", { className: "nc-error-message", children: z })
   ] });
 }
-function Yn({
+function Gn({
   children: e,
   onClick: t,
   showBorder: n = !0,
@@ -1704,7 +1705,7 @@ const tr = {
   show: (e) => Lt(e)
 };
 function nr(e) {
-  const t = gt.createInstance(), n = {};
+  const t = bt.createInstance(), n = {};
   for (const o in e)
     n[o] = { translation: e[o] };
   const r = typeof document < "u" && document.documentElement.lang || "en";
@@ -1932,7 +1933,7 @@ class Ht {
     this.listeners.forEach((t) => t());
   }
 }
-const Y = new Ht(), Ve = se(null);
+const G = new Ht(), Ve = se(null);
 function Wt() {
   const e = J(Ve);
   if (!e)
@@ -2012,7 +2013,7 @@ class Vt extends ke.Component {
     ) : this.props.children;
   }
 }
-function Ge({ appId: e, isActive: t, onClose: n }) {
+function Ye({ appId: e, isActive: t, onClose: n }) {
   const { t: r } = Q(), o = oe.get(e), [i, a] = E(""), [c, l] = E(null), [p, f] = E(null), [b, d] = E(!1), [u, m] = E(!1);
   ke.useEffect(() => {
     o != null && o.titleKey && a(r(o.titleKey));
@@ -2101,16 +2102,16 @@ function Ge({ appId: e, isActive: t, onClose: n }) {
     }
   );
 }
-const fe = 768, he = 1024, Ye = {
+const fe = 768, he = 1024, Ge = {
   isMobile: !1,
   isTablet: !1,
   isDesktop: !0,
   width: typeof window < "u" ? window.innerWidth : 1024,
   height: typeof window < "u" ? window.innerHeight : 768
-}, je = se(Ye);
+}, je = se(Ge);
 function rr({ children: e }) {
   const [t, n] = E(() => {
-    if (typeof window > "u") return Ye;
+    if (typeof window > "u") return Ge;
     const r = window.innerWidth, o = window.innerHeight;
     return {
       isMobile: r < fe,
@@ -2137,7 +2138,7 @@ function rr({ children: e }) {
 function Ke() {
   return J(je);
 }
-const Ne = "-", Gt = (e) => {
+const Ne = "-", Yt = (e) => {
   const t = jt(e), {
     conflictingClassGroups: n,
     conflictingClassGroupModifiers: r
@@ -2145,7 +2146,7 @@ const Ne = "-", Gt = (e) => {
   return {
     getClassGroupId: (a) => {
       const c = a.split(Ne);
-      return c[0] === "" && c.length !== 1 && c.shift(), _e(c, t) || Yt(a);
+      return c[0] === "" && c.length !== 1 && c.shift(), _e(c, t) || Gt(a);
     },
     getConflictingClassGroupIds: (a, c) => {
       const l = n[a] || [];
@@ -2165,7 +2166,7 @@ const Ne = "-", Gt = (e) => {
   return (a = t.validators.find(({
     validator: c
   }) => c(i))) == null ? void 0 : a.classGroupId;
-}, Be = /^\[(.+)\]$/, Yt = (e) => {
+}, Be = /^\[(.+)\]$/, Gt = (e) => {
   if (Be.test(e)) {
     const t = Be.exec(e)[1], n = t == null ? void 0 : t.substring(0, t.indexOf(":"));
     if (n)
@@ -2283,7 +2284,7 @@ const Ne = "-", Gt = (e) => {
 }, Jt = (e) => ({
   cache: Ut(e.cacheSize),
   parseClassName: qt(e),
-  ...Gt(e)
+  ...Yt(e)
 }), Qt = /\s+/, Zt = (e, t) => {
   const {
     parseClassName: n,
@@ -2366,7 +2367,7 @@ const H = (e) => {
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   sn.test(e) && !cn.test(e)
 ), Je = () => !1, vn = (e) => an.test(e), wn = (e) => ln.test(e), yn = () => {
-  const e = H("colors"), t = H("spacing"), n = H("blur"), r = H("brightness"), o = H("borderColor"), i = H("borderRadius"), a = H("borderSpacing"), c = H("borderWidth"), l = H("contrast"), p = H("grayscale"), f = H("hueRotate"), b = H("invert"), d = H("gap"), u = H("gradientColorStops"), m = H("gradientColorStopPositions"), h = H("inset"), g = H("margin"), k = H("opacity"), v = H("padding"), N = H("saturate"), w = H("scale"), A = H("sepia"), $ = H("skew"), L = H("space"), T = H("translate"), y = () => ["auto", "contain", "none"], R = () => ["auto", "hidden", "clip", "visible", "scroll"], C = () => ["auto", I, t], S = () => [I, t], z = () => ["", j, q], F = () => ["auto", re, I], Z = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], G = () => ["solid", "dashed", "dotted", "double", "none"], M = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], P = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], D = () => ["", "0", I], ge = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], V = () => [re, I];
+  const e = H("colors"), t = H("spacing"), n = H("blur"), r = H("brightness"), o = H("borderColor"), i = H("borderRadius"), a = H("borderSpacing"), c = H("borderWidth"), l = H("contrast"), p = H("grayscale"), f = H("hueRotate"), b = H("invert"), d = H("gap"), u = H("gradientColorStops"), m = H("gradientColorStopPositions"), h = H("inset"), g = H("margin"), k = H("opacity"), v = H("padding"), N = H("saturate"), w = H("scale"), A = H("sepia"), $ = H("skew"), L = H("space"), T = H("translate"), y = () => ["auto", "contain", "none"], R = () => ["auto", "hidden", "clip", "visible", "scroll"], C = () => ["auto", I, t], S = () => [I, t], z = () => ["", j, q], F = () => ["auto", re, I], Z = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], Y = () => ["solid", "dashed", "dotted", "double", "none"], M = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], P = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], D = () => ["", "0", I], ge = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], V = () => [re, I];
   return {
     cacheSize: 500,
     separator: ":",
@@ -3181,7 +3182,7 @@ const H = (e) => {
        * @see https://tailwindcss.com/docs/text-decoration-style
        */
       "text-decoration-style": [{
-        decoration: [...G(), "wavy"]
+        decoration: [...Y(), "wavy"]
       }],
       /**
        * Text Decoration Thickness
@@ -3555,7 +3556,7 @@ const H = (e) => {
        * @see https://tailwindcss.com/docs/border-style
        */
       "border-style": [{
-        border: [...G(), "hidden"]
+        border: [...Y(), "hidden"]
       }],
       /**
        * Divide Width X
@@ -3593,7 +3594,7 @@ const H = (e) => {
        * @see https://tailwindcss.com/docs/divide-style
        */
       "divide-style": [{
-        divide: G()
+        divide: Y()
       }],
       /**
        * Border Color
@@ -3670,7 +3671,7 @@ const H = (e) => {
        * @see https://tailwindcss.com/docs/outline-style
        */
       "outline-style": [{
-        outline: ["", ...G()]
+        outline: ["", ...Y()]
       }],
       /**
        * Outline Offset
@@ -4396,10 +4397,10 @@ const H = (e) => {
   };
 }, xn = /* @__PURE__ */ tn(yn);
 function kn(...e) {
-  return xn(bt(e));
+  return xn(gt(e));
 }
 function or({ autoWidth: e = !0, className: t, style: n }) {
-  const [r, o] = E(() => _.getActiveAppId()), [i, a] = E(() => Y.getRunningApps()), { isMobile: c } = Ke();
+  const [r, o] = E(() => _.getActiveAppId()), [i, a] = E(() => G.getRunningApps()), { isMobile: c } = Ke();
   B(() => {
     const g = _.subscribe("activeAppId", (k) => {
       o(k);
@@ -4407,16 +4408,16 @@ function or({ autoWidth: e = !0, className: t, style: n }) {
     return () => {
       g();
     };
-  }, []), B(() => Y.subscribe(() => {
-    a(Y.getRunningApps());
+  }, []), B(() => G.subscribe(() => {
+    a(G.getRunningApps());
   }), []), B(() => {
     if (!new URLSearchParams(window.location.search).has("app")) {
       const v = _.getActiveAppId();
-      v && !Y.isRunning(v) && Y.launchApp(v);
+      v && !G.isRunning(v) && G.launchApp(v);
     }
   }, []);
   const l = (g) => {
-    Y.closeApp(g);
+    G.closeApp(g);
   }, p = r ? oe.get(r) : null, b = (p == null ? void 0 : p.width) ?? 400, d = r !== null, h = { ...{
     overflow: "hidden",
     display: d ? "flex" : "none",
@@ -4426,7 +4427,7 @@ function or({ autoWidth: e = !0, className: t, style: n }) {
     ...e && d ? { width: c ? "100%" : b } : {}
   }, ...n };
   return /* @__PURE__ */ s("div", { className: kn("nc-app-panel", t), style: h, children: i.map((g) => /* @__PURE__ */ s(
-    Ge,
+    Ye,
     {
       appId: g.appId,
       isActive: r === g.appId,
@@ -4440,7 +4441,7 @@ function sr({
   className: t = "",
   showIndicators: n = !0
 }) {
-  const { isMobile: r } = Ke(), [o, i] = E(() => _.getActiveAppId()), [a, c] = E(() => Y.getRunningApps());
+  const { isMobile: r } = Ke(), [o, i] = E(() => _.getActiveAppId()), [a, c] = E(() => G.getRunningApps());
   B(() => {
     const u = _.subscribe("activeAppId", (m) => {
       i(m);
@@ -4448,11 +4449,11 @@ function sr({
     return () => {
       u();
     };
-  }, []), B(() => Y.subscribe(() => {
-    c(Y.getRunningApps());
+  }, []), B(() => G.subscribe(() => {
+    c(G.getRunningApps());
   }), []);
   const l = (u) => {
-    o === u ? Y.setActiveApp(null) : Y.launchApp(u);
+    o === u ? G.setActiveApp(null) : G.launchApp(u);
   }, p = e.map((u) => oe.get(u)).filter((u) => !!u), f = a.filter((u) => !e.includes(u.appId)).map((u) => ({ running: u, def: oe.get(u.appId) })).filter((u) => !!u.def), b = (u) => a.some((m) => m.appId === u), d = r ? 24 : 28;
   return /* @__PURE__ */ x("div", { className: `nc-app-taskbar ${r ? "nc-mobile" : "nc-desktop"} ${t}`, children: [
     p.map((u) => {
@@ -4514,7 +4515,7 @@ function ir({
           style: i,
           onClick: (l) => l.stopPropagation(),
           children: /* @__PURE__ */ s(
-            Ge,
+            Ye,
             {
               appId: e,
               isActive: !0,
@@ -4616,7 +4617,7 @@ function dr() {
 export {
   He as ActivityIndicator,
   Tn as Alert,
-  Ge as AppContainer,
+  Ye as AppContainer,
   Ve as AppContext,
   ir as AppDialog,
   or as AppPanel,
@@ -4634,9 +4635,9 @@ export {
   ne as DialogClose,
   Hn as EditButton,
   On as Hyperlink,
-  Gn as Input,
+  Yn as Input,
   jn as ListGroup,
-  Yn as ListGroupItem,
+  Gn as ListGroupItem,
   _n as MonthRangePicker,
   Kn as MultiSelect,
   dr as NavStackContainer,
@@ -4652,12 +4653,13 @@ export {
   Qn as Toggle,
   Wn as TrashButton,
   rr as ViewportProvider,
+  fr as YamlTextArea,
   oe as appRegistry,
   _ as appStateStore,
   kn as cn,
   nr as createAppI18nFactory,
   tr as notificationManager,
-  Y as runningAppsStore,
+  G as runningAppsStore,
   Lt as showNotification,
   Wt as useApp,
   At as useDialog,