@arkitektbedriftene/fe-lib 0.3.10 → 0.3.12

package/dist/lib/rich-text/Editor.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode, type ReactElement } from "react";
 import { type InitialConfigType } from "@lexical/react/LexicalComposer";
-export declare const RichTextEditor: ({ isLoading, children, placeholderText, nodes, plugins, toolbar, content, }: {
+export declare const RichTextEditor: ({ isLoading, children, placeholderText, nodes, plugins, toolbar, content, hideBorder, onBlur, }: {
     isLoading: boolean;
     children: ReactNode;
     placeholderText?: string | undefined;
@@ -8,4 +8,6 @@ export declare const RichTextEditor: ({ isLoading, children, placeholderText, no
     plugins?: ReactNode;
     toolbar?: ReactNode;
     content: ReactElement;
+    hideBorder?: boolean | undefined;
+    onBlur?: (() => void) | undefined;
 }) => JSX.Element;

package/dist/lib/ui/components/Badge.d.ts

@@ -0,0 +1,118 @@
+export declare const Badge: import("@stitches/react/types/styled-component").StyledComponent<"span", {
+    color?: "warning" | "danger" | "success" | "primary" | "secondary" | undefined;
+}, {
+    lg: "(min-width: 1200px)";
+    print: "print";
+}, import("@stitches/react/types/css-util").CSS<{
+    lg: "(min-width: 1200px)";
+    print: "print";
+}, {
+    colors: {
+        gray50: string;
+        gray100: string;
+        gray200: string;
+        gray300: string;
+        gray400: string;
+        gray500: string;
+        gray600: string;
+        gray700: string;
+        gray800: string;
+        gray900: string;
+        blue50: string;
+        blue100: string;
+        blue200: string;
+        blue300: string;
+        blue400: string;
+        blue500: string;
+        blue600: string;
+        blue700: string;
+        blue800: string;
+        blue900: string;
+        yellow50: string;
+        yellow100: string;
+        yellow200: string;
+        yellow300: string;
+        yellow400: string;
+        yellow500: string;
+        yellow600: string;
+        yellow700: string;
+        yellow800: string;
+        yellow900: string;
+        orange500: string;
+        red50: string;
+        red100: string;
+        red200: string;
+        red300: string;
+        red400: string;
+        red500: string;
+        red600: string;
+        red700: string;
+        red800: string;
+        red900: string;
+        green50: string;
+        green100: string;
+        green200: string;
+        green300: string;
+        green400: string;
+        green500: string;
+        green600: string;
+        green700: string;
+        green800: string;
+        green900: string;
+        primaryTextOnLightBg: string;
+        primaryBg: string;
+        primaryBgHover: string;
+        primaryTextOnWhite: string;
+        bodyGray: string;
+        hoverDarker: string;
+        borderDarker: string;
+        selectedDarker: string;
+        selectedOnBodyGray: string;
+        darkGrayBg: string;
+        border: string;
+        text: string;
+        secondaryText: string;
+        focusRing: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+    };
+    fontWeights: {
+        normal: string;
+        medium: string;
+        bold: string;
+    };
+    space: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+    };
+    shadows: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        overlayCard: string;
+    };
+    radii: {
+        xs: string;
+        sm: string;
+        md: string;
+        mdmd: string;
+        full: string;
+    };
+    zIndices: {
+        toast: number;
+        overlayCard: number;
+        modal: number;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;

package/dist/lib/ui/components/Popover.d.ts

@@ -19,5 +19,124 @@ export declare const PopoverTrigger: ({ children }: {
 }) => JSX.Element;
 export declare const PopoverContent: ({ children, overlayCardProps }: {
     children: React.ReactNode;
-    overlayCardProps: OverlayCardProps;
+    overlayCardProps?: (Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+    }, "css"> & import("@stitches/react/types/styled-component").TransformProps<{}, {
+        lg: "(min-width: 1200px)";
+        print: "print";
+    }> & {
+        css?: import("@stitches/react/types/css-util").CSS<{
+            lg: "(min-width: 1200px)";
+            print: "print";
+        }, {
+            colors: {
+                gray50: string;
+                gray100: string;
+                gray200: string;
+                gray300: string;
+                gray400: string;
+                gray500: string;
+                gray600: string;
+                gray700: string;
+                gray800: string;
+                gray900: string;
+                blue50: string;
+                blue100: string;
+                blue200: string;
+                blue300: string;
+                blue400: string;
+                blue500: string;
+                blue600: string;
+                blue700: string;
+                blue800: string;
+                blue900: string;
+                yellow50: string;
+                yellow100: string;
+                yellow200: string;
+                yellow300: string;
+                yellow400: string;
+                yellow500: string;
+                yellow600: string;
+                yellow700: string;
+                yellow800: string;
+                yellow900: string;
+                orange500: string;
+                red50: string;
+                red100: string;
+                red200: string;
+                red300: string;
+                red400: string;
+                red500: string;
+                red600: string;
+                red700: string;
+                red800: string;
+                red900: string;
+                green50: string;
+                green100: string;
+                green200: string;
+                green300: string;
+                green400: string;
+                green500: string;
+                green600: string;
+                green700: string;
+                green800: string;
+                green900: string;
+                primaryTextOnLightBg: string;
+                primaryBg: string;
+                primaryBgHover: string;
+                primaryTextOnWhite: string;
+                bodyGray: string;
+                hoverDarker: string;
+                borderDarker: string;
+                selectedDarker: string;
+                selectedOnBodyGray: string;
+                darkGrayBg: string;
+                border: string;
+                text: string;
+                secondaryText: string;
+                focusRing: string;
+            };
+            fontSizes: {
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                "3xl": string;
+            };
+            fontWeights: {
+                normal: string;
+                medium: string;
+                bold: string;
+            };
+            space: {
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                6: string;
+                8: string;
+            };
+            shadows: {
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                overlayCard: string;
+            };
+            radii: {
+                xs: string;
+                sm: string;
+                md: string;
+                mdmd: string;
+                full: string;
+            };
+            zIndices: {
+                toast: number;
+                overlayCard: number;
+                modal: number;
+            };
+        }, import("@stitches/react/types/config").DefaultThemeMap, {}> | undefined;
+    }) | undefined;
 }) => JSX.Element | null;

package/dist/lib/ui/ui.d.ts

@@ -6,3 +6,4 @@ export * from './components/OverlayCard';
 export * from './components/Popover';
 export * from './components/Box';
 export * from './components/Tooltip';
+export * from './components/Badge';

package/dist/rich-text.es.js

@@ -1,19 +1,19 @@
-import { createHeadlessEditor as C } from "@lexical/headless";
-import { $generateHtmlFromNodes as N } from "@lexical/html";
-import { $getRoot as h, ParagraphNode as T, $createParagraphNode as y, $createTextNode as S } from "lexical";
-import { trimTextContentFromAnchor as E } from "@lexical/selection";
-import { AutoLinkNode as $, LinkNode as F } from "@lexical/link";
-import { ListNode as L, ListItemNode as j } from "@lexical/list";
-import { HeadingNode as w, QuoteNode as v } from "@lexical/rich-text";
-import { TableNode as R, TableRowNode as H, TableCellNode as k } from "@lexical/table";
+import { createHeadlessEditor as T } from "@lexical/headless";
+import { $generateHtmlFromNodes as y } from "@lexical/html";
+import { $getRoot as p, ParagraphNode as S, $createParagraphNode as E, $createTextNode as $ } from "lexical";
+import { trimTextContentFromAnchor as F } from "@lexical/selection";
+import { AutoLinkNode as L, LinkNode as j } from "@lexical/link";
+import { ListNode as w, ListItemNode as v } from "@lexical/list";
+import { HeadingNode as R, QuoteNode as H } from "@lexical/rich-text";
+import { TableNode as k, TableRowNode as P, TableCellNode as I } from "@lexical/table";
 import { j as c } from "./jsx-runtime-d0aa4c5b.js";
-import { createContext as P, useState as I, useRef as p, useCallback as u, useContext as M, useMemo as B } from "react";
-import { c as d, s as q, B as f, S as z } from "./Popover-2318823a.js";
-import { LexicalComposer as A } from "@lexical/react/LexicalComposer";
-import { RichTextPlugin as D } from "@lexical/react/LexicalRichTextPlugin";
-import V from "@lexical/react/LexicalErrorBoundary";
+import { createContext as M, useState as B, useRef as f, useCallback as h, useContext as q, useMemo as z } from "react";
+import { c as d, s as A, B as x, S as D } from "./Badge-3f33be41.js";
+import { LexicalComposer as V } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin as W } from "@lexical/react/LexicalRichTextPlugin";
+import J from "@lexical/react/LexicalErrorBoundary";
 import "react-dom";
-const W = ({
+const O = ({
   text: e,
   maxChars: i,
   maxLines: s
@@ -28,31 +28,31 @@ const W = ({
     e[t] === `
 ` && n++, t++;
   return e.slice(0, t).length;
-}, J = ({
+}, Q = ({
   editor: e,
   maxChars: i,
   maxLines: s
 }) => {
-  const r = h(), o = r.getTextContent(), n = W({ text: o, maxChars: i, maxLines: s }), t = o.length - n, m = r.select().anchor;
-  E(e, m, t);
-  const l = r.getLastChild();
-  return l instanceof T && l.getChildrenSize() === 0 && l.remove(), t;
-}, O = (e) => e[0] === "{", xe = (e, i, s) => {
+  const r = p(), o = r.getTextContent(), n = O({ text: o, maxChars: i, maxLines: s }), t = o.length - n, m = r.select().anchor;
+  F(e, m, t);
+  const a = r.getLastChild();
+  return a instanceof S && a.getChildrenSize() === 0 && a.remove(), t;
+}, G = (e) => e[0] === "{", ge = (e, i, s) => {
   let r = 0;
-  const o = C({
+  const o = T({
     nodes: i,
     editable: !1
   });
   if (e)
     try {
-      if (typeof e == "string" && !O(e))
+      if (typeof e == "string" && !G(e))
         o.update(() => {
-          const t = h(), a = y();
-          a.append(S(e.trim())), t.append(a);
+          const t = p(), l = E();
+          l.append($(e.trim())), t.append(l);
         });
       else {
         const t = o.parseEditorState(e, () => {
-          r = J({
+          r = Q({
             editor: o,
             maxLines: s == null ? void 0 : s.maxLines
           });
@@ -64,48 +64,48 @@ const W = ({
     }
   let n = "";
   return o.update(() => {
-    n = N(o);
+    n = y(o);
   }), { html: n, trimCount: r };
-}, be = [
+}, Ce = [
+  R,
+  H,
   w,
   v,
   L,
   j,
-  $,
-  F,
-  R,
-  H,
-  k
-], Q = d({
+  k,
+  P,
+  I
+], K = d({
   fontWeight: "bold"
-}), G = d({
+}), U = d({
   fontStyle: "italic"
-}), K = d({
+}), X = d({
   textDecoration: "underline"
-}), U = d({
+}), Y = d({
   listStyleType: "none"
-}), X = d({
+}), Z = d({
   borderLeft: "4px solid #ccc",
   color: "#666",
   fontStyle: "italic",
   margin: "1.5em 10px",
   padding: "0.5em 10px"
-}), Y = {
-  quote: X().className,
+}), _ = {
+  quote: Z().className,
   text: {
-    bold: Q().className,
-    italic: G().className,
-    underline: K().className
+    bold: K().className,
+    italic: U().className,
+    underline: X().className
   },
   list: {
     nested: {
-      listitem: U().className
+      listitem: Y().className
     }
   }
-}, x = P({ hasFocus: !1, editorRef: { current: null } }), Z = ({ onBlur: e }) => {
-  const [i, s] = I(!1), r = p(null), o = u(() => {
+}, b = M({ hasFocus: !1, editorRef: { current: null } }), ee = ({ onBlur: e }) => {
+  const [i, s] = B(!1), r = f(null), o = h(() => {
     s(!0), r.current && window.clearTimeout(r.current);
-  }, []), n = u(() => {
+  }, []), n = h(() => {
     r.current = window.setTimeout(() => {
       s(!1), e == null || e();
     }, 0);
@@ -117,7 +117,7 @@ const W = ({
       onBlur: n
     }
   };
-}, ge = () => M(x), _ = q("div", {
+}, Ne = () => q(b), te = A("div", {
   border: "1px solid $borderDarker",
   borderRadius: "$md",
   position: "relative",
@@ -147,10 +147,10 @@ const W = ({
       }
     }
   ]
-}), ee = ({
+}), oe = ({
   isLoading: e
 }) => /* @__PURE__ */ c.jsx(
-  f,
+  x,
   {
     css: {
       visibility: e ? "visible" : "hidden",
@@ -159,44 +159,47 @@ const W = ({
       right: "1rem",
       display: "flex"
     },
-    children: /* @__PURE__ */ c.jsx(z, {})
+    children: /* @__PURE__ */ c.jsx(D, {})
   }
-), Ce = ({
+), Te = ({
   isLoading: e,
   children: i,
   placeholderText: s,
   nodes: r,
   plugins: o,
   toolbar: n,
-  content: t
+  content: t,
+  hideBorder: l,
+  onBlur: m
 }) => {
-  const { hasFocus: a, attributes: m } = Z({}), l = p(null), b = B(() => ({ hasFocus: a, editorRef: l }), [a]);
-  return /* @__PURE__ */ c.jsx(x.Provider, { value: b, children: /* @__PURE__ */ c.jsxs(
-    A,
+  const { hasFocus: a, attributes: g } = ee({ onBlur: m }), u = f(null), C = z(() => ({ hasFocus: a, editorRef: u }), [a]);
+  return /* @__PURE__ */ c.jsx(b.Provider, { value: C, children: /* @__PURE__ */ c.jsxs(
+    V,
     {
       initialConfig: {
         namespace: "CommentEditor",
-        onError: (g) => {
-          console.error(g);
+        onError: (N) => {
+          console.error(N);
         },
-        theme: Y,
+        theme: _,
         nodes: r,
         editable: !0
       },
       children: [
         /* @__PURE__ */ c.jsxs(
-          _,
+          te,
           {
-            ref: l,
+            ref: u,
             hasFocus: a,
-            ...m,
+            hideBorder: l,
+            ...g,
             children: [
               /* @__PURE__ */ c.jsx(
-                D,
+                W,
                 {
                   contentEditable: t,
                   placeholder: s ? /* @__PURE__ */ c.jsx(
-                    f,
+                    x,
                     {
                       css: {
                         position: "absolute",
@@ -209,11 +212,11 @@ const W = ({
                       children: s
                     }
                   ) : null,
-                  ErrorBoundary: V
+                  ErrorBoundary: J
                 }
               ),
               o,
-              /* @__PURE__ */ c.jsx(ee, { isLoading: e }),
+              /* @__PURE__ */ c.jsx(oe, { isLoading: e }),
               n
             ]
           }
@@ -224,11 +227,11 @@ const W = ({
   ) });
 };
 export {
-  Ce as RichTextEditor,
-  be as defaultNodes,
-  O as isJSON,
-  x as richTextContext,
-  xe as stateToHTML,
-  Z as useHasFocusWithin,
-  ge as useRichTextContext
+  Te as RichTextEditor,
+  Ce as defaultNodes,
+  G as isJSON,
+  b as richTextContext,
+  ge as stateToHTML,
+  ee as useHasFocusWithin,
+  Ne as useRichTextContext
 };

package/dist/ui.es.js

@@ -1,14 +1,14 @@
-import { P as t, a as n, b as p } from "./Popover-2318823a.js";
-import { A as v, B as j, d as u, O as C, S as P, c as b, g as h, k as y, s as O } from "./Popover-2318823a.js";
+import { P as t, a as n, b as p } from "./Badge-3f33be41.js";
+import { A as v, e as j, B as u, d as C, O as P, S as b, c as h, g as y, k as B, s as O } from "./Badge-3f33be41.js";
 import { j as o } from "./jsx-runtime-d0aa4c5b.js";
 import { useState as i } from "react";
 import "react-dom";
-const g = ({ children: s, content: r }) => {
-  const [e, a] = i(!1);
+const c = ({ children: s, content: e }) => {
+  const [r, a] = i(!1);
   return /* @__PURE__ */ o.jsxs(
     t,
     {
-      open: e,
+      open: r,
       onOpenChange: a,
       trigger: "hover",
       placement: "top",
@@ -23,23 +23,24 @@ const g = ({ children: s, content: r }) => {
             fontSize: "$sm",
             padding: "$1 $2"
           }
-        }, children: r })
+        }, children: e })
       ]
     }
   );
 };
 export {
   v as Alert,
-  j as Box,
-  u as Button,
-  C as OverlayCard,
+  j as Badge,
+  u as Box,
+  C as Button,
+  P as OverlayCard,
   t as Popover,
   p as PopoverContent,
   n as PopoverTrigger,
-  P as Spinner,
-  g as Tooltip,
-  b as css,
-  h as globalCss,
-  y as keyframes,
+  b as Spinner,
+  c as Tooltip,
+  h as css,
+  y as globalCss,
+  B as keyframes,
   O as styled
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkitektbedriftene/fe-lib",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.es.js",

package/src/lib/rich-text/Editor.tsx

@@ -2,7 +2,6 @@ import { useRef, type ReactNode, useMemo, type ReactElement } from "react";
 import { Box, Spinner, styled } from "../ui/ui";
 import { type InitialConfigType, LexicalComposer } from "@lexical/react/LexicalComposer";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
 import { lexicalTheme } from "./theme";
 import { useHasFocusWithin, richTextContext } from "./editorContext";
@@ -70,6 +69,8 @@ export const RichTextEditor = ({
   plugins,
   toolbar,
   content,
+  hideBorder,
+  onBlur,
 }: {
   isLoading: boolean;
   children: ReactNode;
@@ -78,8 +79,10 @@ export const RichTextEditor = ({
   plugins?: ReactNode;
   toolbar?: ReactNode;
   content: ReactElement;
+  hideBorder?: boolean;
+  onBlur?: () => void;
 }) => {
-  const { hasFocus, attributes } = useHasFocusWithin({});
+  const { hasFocus, attributes } = useHasFocusWithin({ onBlur });
   const editorRef = useRef<HTMLDivElement>(null);
   const contextValue = useMemo(() => ({ hasFocus, editorRef }), [hasFocus]);
 
@@ -99,6 +102,7 @@ export const RichTextEditor = ({
         <Container
           ref={editorRef}
           hasFocus={hasFocus}
+          hideBorder={hideBorder}
           {...attributes}
         >
           <RichTextPlugin

package/src/lib/ui/components/Badge.tsx

@@ -0,0 +1,42 @@
+import { styled } from "../stitches.config";
+
+export const Badge = styled("span", {
+  flex: "0 0 auto",
+  display: "inline-flex",
+  padding: "$1 $2",
+  fontSize: "$xs",
+  fontWeight: "$medium",
+  lineHeight: "1",
+  whiteSpace: "nowrap",
+  borderRadius: "$sm",
+  overflow: "hidden",
+
+  variants: {
+    color: {
+      success: {
+        backgroundColor: "$green200",
+        color: "$green800",
+      },
+      warning: {
+        backgroundColor: "$yellow100",
+        color: "$yellow700",
+      },
+      danger: {
+        backgroundColor: "$red200",
+        color: "$red800",
+      },
+      primary: {
+        backgroundColor: "$blue200",
+        color: "$blue800",
+      },
+      secondary: {
+        backgroundColor: "$gray200",
+        color: "$gray800",
+      },
+    }
+  },
+
+  defaultVariants: {
+    color: "primary",
+  },
+});

package/src/lib/ui/components/Popover.tsx

@@ -134,7 +134,7 @@ export const PopoverTrigger = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-export const PopoverContent = ({ children, overlayCardProps }: { children: React.ReactNode, overlayCardProps: OverlayCardProps }) => {
+export const PopoverContent = ({ children, overlayCardProps }: { children: React.ReactNode, overlayCardProps?: OverlayCardProps }) => {
   const {
     getFloatingProps,
     isMounted,

package/src/lib/ui/ui.ts

@@ -7,3 +7,4 @@ export * from './components/OverlayCard';
 export * from './components/Popover';
 export * from './components/Box';
 export * from './components/Tooltip';
+export * from './components/Badge';