@arkitektbedriftene/fe-lib 0.3.11 → 0.3.12

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

@@ -8,7 +8,7 @@ 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 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 "./Popover-2318823a.js";
+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";

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.11",
+  "version": "0.3.12",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.es.js",

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';