@arkitektbedriftene/fe-lib 0.3.16 → 0.3.17

package/dist/ui/components/Toolbar.d.ts

@@ -0,0 +1,489 @@
+/// <reference types="react" />
+import * as T from "@radix-ui/react-toolbar";
+export declare const Toolbar: import("@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<T.ToolbarProps & import("react").RefAttributes<HTMLDivElement>>, {}, {
+    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, {}>>;
+export declare const ToolbarToggleGroup: import("@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<(T.ToolbarToggleGroupSingleProps | T.ToolbarToggleGroupMultipleProps) & import("react").RefAttributes<HTMLDivElement>>, {}, {
+    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, {}>>;
+export declare const ToolbarSeparator: import("@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<T.ToolbarSeparatorProps & import("react").RefAttributes<HTMLDivElement>>, {}, {
+    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, {}>>;
+export declare const ButtonInToolbar: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "css" | "size" | "icon" | "variant"> & import("@stitches/react/types/styled-component").TransformProps<{
+    color?: "warning" | "danger" | "success" | "primary" | "secondary" | undefined;
+    size?: "md" | "lg" | undefined;
+    variant?: "outline" | "transparent" | "primary" | undefined;
+    icon?: boolean | "true" | undefined;
+}, {
+    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;
+} & {
+    as?: import("react").ElementType<any> | undefined;
+    isLoading?: boolean | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type ToolbarButtonProps = {
+    children: React.ReactNode;
+    dropdown?: boolean;
+} & React.ComponentProps<typeof ButtonInToolbar>;
+export declare const ToolbarButton: import("react").ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type ToolbarToogleItemProps = {
+    children: React.ReactNode;
+    value: string;
+} & React.ComponentProps<typeof ButtonInToolbar>;
+export declare const ToolbarToggleItem: import("react").ForwardRefExoticComponent<Omit<ToolbarToogleItemProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/ui/ui.d.ts

@@ -7,5 +7,6 @@ export * from './components/Popover';
 export * from './components/Box';
 export * from './components/Tooltip';
 export * from './components/Badge';
+export * from './components/Toolbar';
 export * from './components/Menu/Menu';
 export * from './components/Menu/DropdownMenu';

package/dist/ui.es.js

@@ -1,54 +1,62 @@
-import { P as t, a as n, b as p } from "./DropdownMenu-8d580c1a.js";
-import { A as v, e as C, B as M, d as h, D as j, j as y, i as D, h as S, f as b, M as w, O as I, S as O, c as P, g as k, k as B, m as A, s as $ } from "./DropdownMenu-8d580c1a.js";
-import { j as o } from "./jsx-runtime-d0aa4c5b.js";
+import { P as t, a as n, b as p } from "./DropdownMenu-c57acb78.js";
+import { A as C, e as I, B as M, d as S, i as h, D as y, q as B, p as D, o as w, n as O, M as P, O as k, S as j, T as A, j as $, h as q, f as z, l as G, c as E, g as F, k as H, m as J, s as K } from "./DropdownMenu-c57acb78.js";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import { useState as m } from "react";
 import "react-dom";
-import "./index.esm-ddc5d570.js";
-const u = ({ children: e, content: s }) => {
-  const [r, a] = m(!1);
-  return /* @__PURE__ */ o.jsxs(
+import "@radix-ui/react-toolbar";
+import "./index.esm-d078f232.js";
+import "@radix-ui/react-dropdown-menu";
+const T = ({ children: r, content: a }) => {
+  const [e, s] = m(!1);
+  return /* @__PURE__ */ l(
     t,
     {
-      open: r,
-      onOpenChange: a,
+      open: e,
+      onOpenChange: s,
       trigger: "hover",
       placement: "top",
       offset: { mainAxis: 8 },
       role: "tooltip",
       children: [
-        /* @__PURE__ */ o.jsx(n, { children: e }),
-        /* @__PURE__ */ o.jsx(p, { overlayCardProps: {
+        /* @__PURE__ */ o(n, { children: r }),
+        /* @__PURE__ */ o(p, { overlayCardProps: {
           css: {
             background: "rgba(0,0,0, 0.9)",
             color: "#fff",
             fontSize: "$sm",
             padding: "$1 $2"
           }
-        }, children: s })
+        }, children: a })
       ]
     }
   );
 };
 export {
-  v as Alert,
-  C as Badge,
+  C as Alert,
+  I as Badge,
   M as Box,
-  h as Button,
-  j as DropdownMenu,
-  y as DropdownMenuCheckboxItem,
+  S as Button,
+  h as ButtonInToolbar,
+  y as DropdownMenu,
+  B as DropdownMenuCheckboxItem,
   D as DropdownMenuIconItem,
-  S as DropdownMenuItem,
-  b as DropdownMenuSeparator,
-  w as MenuOverlayCard,
-  I as OverlayCard,
+  w as DropdownMenuItem,
+  O as DropdownMenuSeparator,
+  P as MenuOverlayCard,
+  k as OverlayCard,
   t as Popover,
   p as PopoverContent,
   n as PopoverTrigger,
-  O as Spinner,
-  u as Tooltip,
-  P as css,
-  k as globalCss,
-  B as keyframes,
-  A as menuItemStyles,
-  $ as styled
+  j as Spinner,
+  A as Toolbar,
+  $ as ToolbarButton,
+  q as ToolbarSeparator,
+  z as ToolbarToggleGroup,
+  G as ToolbarToggleItem,
+  T as Tooltip,
+  E as css,
+  F as globalCss,
+  H as keyframes,
+  J as menuItemStyles,
+  K as styled
 };

package/package.json

@@ -1,9 +1,7 @@
 {
   "name": "@arkitektbedriftene/fe-lib",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "type": "module",
-  "main": "./dist/index.umd.cjs",
-  "module": "./dist/index.es.js",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -50,7 +48,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite build --watch",
     "build": "tsc && vite build",
     "docs": "cd ./src/docs && next",
     "test": "tsc"
@@ -84,6 +82,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-toolbar": "^1.0.4",
     "@stitches/react": "^1.2.8",
     "oidc-client-ts": "^2.2.2",
     "react-icons": "^4.8.0",