@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/text-area/Textarea.d.ts

@@ -1,14 +0,0 @@
-type TextareaProps = {
-    value: string;
-    inputChanged: (value: string) => void;
-    disabled?: boolean;
-    loading?: React.ReactNode;
-    rows: number;
-    showCount?: boolean;
-    tooltip?: string;
-    showTooltip?: boolean;
-    adjustHeight?: boolean;
-    placeholder?: string;
-};
-export declare function Textarea({ value, inputChanged, disabled, loading, rows, showCount, tooltip, showTooltip, placeholder, adjustHeight, ...props }: TextareaProps & React.HtmlHTMLAttributes<HTMLTextAreaElement>): React.ReactNode;
-export {};

package/dist/components/text-area/Textarea.js

@@ -1,56 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useCallback, useMemo } from 'react';
-import styles from './Textarea.module.css';
-
-function Textarea({
-  value,
-  inputChanged,
-  disabled,
-  loading,
-  rows = 3,
-  showCount,
-  tooltip,
-  showTooltip,
-  placeholder,
-  adjustHeight,
-  ...props
-}) {
-  const onInput = useCallback(
-    (e) => {
-      const textarea = e.currentTarget;
-      const currentTextValue = textarea.value;
-      if (adjustHeight && textarea) {
-        textarea.style.height = "auto";
-        textarea.style.height = `${textarea.scrollHeight}px`;
-      }
-      inputChanged(currentTextValue);
-    },
-    [inputChanged, adjustHeight]
-  );
-  const inputField = useMemo(
-    () => /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        placeholder,
-        rows,
-        value,
-        onInput,
-        disabled,
-        ...props
-      }
-    ),
-    [value, disabled, placeholder, rows, onInput]
-  );
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    showTooltip ? /* @__PURE__ */ jsx("span", { title: tooltip, children: inputField }) : inputField,
-    /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
-      loading && /* @__PURE__ */ jsx("div", { children: loading }),
-      showCount && /* @__PURE__ */ jsxs("div", { className: styles.internalCount, children: [
-        value == null ? void 0 : value.length,
-        " tegn i denne boks"
-      ] })
-    ] })
-  ] });
-}
-
-export { Textarea };

package/dist/components/text-area/Textarea.module.css

@@ -1,3 +0,0 @@
-.container textarea {
-    width: 100%;
-}

package/dist/components/tooltip/Tooltip.cjs

@@ -1,78 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styles = require('./Tooltip.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const Tooltip = ({
-  children,
-  content,
-  placement = "top",
-  className,
-  open,
-  flip = true,
-  offset = 8,
-  ...rest
-}) => {
-  const id = react.useId();
-  const wrapperRef = react.useRef(null);
-  const bubbleRef = react.useRef(null);
-  const [resolvedPlacement, setResolvedPlacement] = react.useState(placement);
-  react.useEffect(() => setResolvedPlacement(placement), [placement]);
-  const recomputePlacement = () => {
-    if (!flip) return setResolvedPlacement(placement);
-    const wrapper = wrapperRef.current;
-    const bubble = bubbleRef.current;
-    if (!wrapper || !bubble) return;
-    const wrapperRect = wrapper.getBoundingClientRect();
-    const bubbleRect = bubble.getBoundingClientRect();
-    const spaceAbove = wrapperRect.top - (bubbleRect.height + offset);
-    const spaceBelow = window.innerHeight - wrapperRect.bottom - (bubbleRect.height + offset);
-    if (placement === "top") {
-      setResolvedPlacement(spaceAbove >= 0 ? "top" : "bottom");
-    } else if (placement === "bottom") {
-      setResolvedPlacement(spaceBelow >= 0 ? "bottom" : "top");
-    } else {
-      setResolvedPlacement(placement);
-    }
-  };
-  react.useLayoutEffect(() => {
-    const wrapper = wrapperRef.current;
-    if (!wrapper) return;
-    const onShow = () => recomputePlacement();
-    const onResize = () => recomputePlacement();
-    const onScroll = () => recomputePlacement();
-    wrapper.addEventListener("mouseenter", onShow);
-    wrapper.addEventListener("focusin", onShow);
-    window.addEventListener("resize", onResize);
-    window.addEventListener("scroll", onScroll, { passive: true });
-    if (open) recomputePlacement();
-    return () => {
-      wrapper.removeEventListener("mouseenter", onShow);
-      wrapper.removeEventListener("focusin", onShow);
-      window.removeEventListener("resize", onResize);
-      window.removeEventListener("scroll", onScroll);
-    };
-  }, [open, placement, flip, offset]);
-  const rootClass = [styles__default.default.container, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: wrapperRef,
-      className: rootClass,
-      "data-open": open ? "true" : void 0,
-      "data-placement": resolvedPlacement,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.trigger, "aria-describedby": id, tabIndex: 0, children }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: bubbleRef, id, role: "tooltip", className: styles__default.default.bubble, children: content })
-      ]
-    }
-  );
-};
-
-exports.Tooltip = Tooltip;

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,11 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
-export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
-export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
-    children: ReactNode;
-    content: ReactNode;
-    placement?: TooltipPlacement;
-    open?: boolean;
-    flip?: boolean;
-    offset?: number;
-}
-export declare const Tooltip: React.FC<TooltipProps>;

package/dist/components/tooltip/Tooltip.js

@@ -1,72 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId, useRef, useState, useEffect, useLayoutEffect } from 'react';
-import styles from './Tooltip.module.css';
-
-const Tooltip = ({
-  children,
-  content,
-  placement = "top",
-  className,
-  open,
-  flip = true,
-  offset = 8,
-  ...rest
-}) => {
-  const id = useId();
-  const wrapperRef = useRef(null);
-  const bubbleRef = useRef(null);
-  const [resolvedPlacement, setResolvedPlacement] = useState(placement);
-  useEffect(() => setResolvedPlacement(placement), [placement]);
-  const recomputePlacement = () => {
-    if (!flip) return setResolvedPlacement(placement);
-    const wrapper = wrapperRef.current;
-    const bubble = bubbleRef.current;
-    if (!wrapper || !bubble) return;
-    const wrapperRect = wrapper.getBoundingClientRect();
-    const bubbleRect = bubble.getBoundingClientRect();
-    const spaceAbove = wrapperRect.top - (bubbleRect.height + offset);
-    const spaceBelow = window.innerHeight - wrapperRect.bottom - (bubbleRect.height + offset);
-    if (placement === "top") {
-      setResolvedPlacement(spaceAbove >= 0 ? "top" : "bottom");
-    } else if (placement === "bottom") {
-      setResolvedPlacement(spaceBelow >= 0 ? "bottom" : "top");
-    } else {
-      setResolvedPlacement(placement);
-    }
-  };
-  useLayoutEffect(() => {
-    const wrapper = wrapperRef.current;
-    if (!wrapper) return;
-    const onShow = () => recomputePlacement();
-    const onResize = () => recomputePlacement();
-    const onScroll = () => recomputePlacement();
-    wrapper.addEventListener("mouseenter", onShow);
-    wrapper.addEventListener("focusin", onShow);
-    window.addEventListener("resize", onResize);
-    window.addEventListener("scroll", onScroll, { passive: true });
-    if (open) recomputePlacement();
-    return () => {
-      wrapper.removeEventListener("mouseenter", onShow);
-      wrapper.removeEventListener("focusin", onShow);
-      window.removeEventListener("resize", onResize);
-      window.removeEventListener("scroll", onScroll);
-    };
-  }, [open, placement, flip, offset]);
-  const rootClass = [styles.container, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: wrapperRef,
-      className: rootClass,
-      "data-open": open ? "true" : void 0,
-      "data-placement": resolvedPlacement,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: styles.trigger, "aria-describedby": id, tabIndex: 0, children }),
-        /* @__PURE__ */ jsx("div", { ref: bubbleRef, id, role: "tooltip", className: styles.bubble, children: content })
-      ]
-    }
-  );
-};
-
-export { Tooltip };

package/dist/components/tooltip/Tooltip.module.css

@@ -1,84 +0,0 @@
-.container {
-  position: relative;
-  display: inline-flex;
-}
-
-.trigger {
-  width: 100%;
-}
-.trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-  border-radius: var(--border-radius-default);
-}
-
-.bubble {
-  position: absolute;
-  background: var(--color-text);
-  color: var(--color-text-inverse);
-  font-size: var(--font-size-xs);
-  padding: var(--spacing-xxs) var(--spacing-sm);
-  border-radius: var(--border-radius-default);
-  line-height: var(--line-height-tight);
-  white-space: nowrap;
-  z-index: var(--z-tooltip);
-  pointer-events: none;
-  opacity: 0;
-  transform: translate(-50%, -8px);
-  left: 50%;
-  bottom: calc(100% + var(--spacing-xs));
-  transition:
-    opacity var(--transition-fast),
-    transform var(--transition-fast);
-}
-
-.container[data-placement='top'] .bubble {
-  left: 50%;
-  bottom: calc(100% + var(--spacing-xs));
-  transform: translate(-50%, -8px);
-}
-.container[data-placement='bottom'] .bubble {
-  top: calc(100% + var(--spacing-xs));
-  left: 50%;
-  transform: translate(-50%, 8px);
-}
-.container[data-placement='left'] .bubble {
-  right: calc(100% + var(--spacing-xs));
-  top: 50%;
-  transform: translate(-8px, -50%);
-}
-.container[data-placement='right'] .bubble {
-  left: calc(100% + var(--spacing-xs));
-  top: 50%;
-  transform: translate(8px, -50%);
-}
-
-.container:hover .bubble,
-.container:focus-within .bubble,
-.container[data-open='true'] .bubble {
-  opacity: 1;
-  height: fit-content;
-  transform: translate(-50%, 0);
-}
-
-.container[data-placement='bottom']:hover .bubble,
-.container[data-placement='bottom']:focus-within .bubble,
-.container[data-placement='bottom'][data-open='true'] .bubble {
-  transform: translate(-50%, 0);
-}
-.container[data-placement='left']:hover .bubble,
-.container[data-placement='left']:focus-within .bubble,
-.container[data-placement='left'][data-open='true'] .bubble {
-  transform: translate(0, -50%);
-}
-.container[data-placement='right']:hover .bubble,
-.container[data-placement='right']:focus-within .bubble,
-.container[data-placement='right'][data-open='true'] .bubble {
-  transform: translate(0, -50%);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bubble {
-    transition: none;
-  }
-}

package/dist/components/user-display/UserDisplay.cjs

@@ -1,28 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Avatar = require('../avatar/Avatar');
-var styles = require('./UserDisplay.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function UserDisplay({
-  id,
-  name,
-  email,
-  role,
-  avatarUrl
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { imgSrc: avatarUrl, imgAlt: name, fullName: name, size: "xl" }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.userInfo, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h4", { children: name }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: email }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: role })
-    ] })
-  ] });
-}
-
-exports.UserDisplay = UserDisplay;

package/dist/constants/severity.cjs

@@ -1,21 +0,0 @@
-'use strict';
-
-const SeverityBgColor = {
-  neutral: "var(--color-secondary)",
-  brand: "var(--color-primary)",
-  success: "var(--color-success)",
-  error: "var(--color-error)",
-  info: "var(--color-info)",
-  warning: "var(--color-warning)"
-};
-const SeverityTextColor = {
-  neutral: "var(--color-text-inverse)",
-  brand: "var(--color-text-on-primary)",
-  success: "var(--color-text-inverse)",
-  error: "var(--color-text-inverse)",
-  info: "var(--color-text-inverse)",
-  warning: "var(--color-text-inverse)"
-};
-
-exports.SeverityBgColor = SeverityBgColor;
-exports.SeverityTextColor = SeverityTextColor;

package/dist/constants/severity.types.cjs

@@ -1,2 +0,0 @@
-'use strict';
-

package/dist/constants/sizes.cjs

@@ -1,10 +0,0 @@
-'use strict';
-
-const sizes = {
-  sm: "var(--component-size-sm)",
-  md: "var(--component-size-md)",
-  lg: "var(--component-size-lg)",
-  xl: "var(--component-size-xl)"
-};
-
-exports.sizes = sizes;

package/dist/hooks/useTheme.cjs

@@ -1,58 +0,0 @@
-'use strict';
-
-var react = require('react');
-
-const LINK_ID = "dbc-theme-link";
-const STORAGE_KEY = "dbc_theme";
-function createLinkElement() {
-  if (typeof document === "undefined") return null;
-  let el = document.getElementById(LINK_ID);
-  if (!el) {
-    el = document.createElement("link");
-    el.id = LINK_ID;
-    el.rel = "stylesheet";
-    document.head.appendChild(el);
-  }
-  return el;
-}
-function setLinkHref(href) {
-  const el = createLinkElement();
-  if (el && el.getAttribute("href") !== href) el.setAttribute("href", href);
-}
-function useTheme(initialTheme = "light") {
-  const [theme, setTheme] = react.useState(null);
-  react.useEffect(() => {
-    let stored = initialTheme;
-    try {
-      stored = localStorage.getItem(STORAGE_KEY);
-      console.log("Restored theme from localStorage:", stored);
-    } catch {
-    }
-    if (stored) {
-      setLinkHref(`/themes/${stored}.css`);
-      setTheme(stored);
-      try {
-        localStorage.setItem(STORAGE_KEY, stored);
-      } catch {
-      }
-    }
-  }, []);
-  const switchTheme = react.useCallback((id) => {
-    const href = `/themes/${id}.css`;
-    if (!href) return "";
-    setLinkHref(href);
-    setTheme(id);
-    try {
-      localStorage.setItem(STORAGE_KEY, id);
-      document.cookie = `${STORAGE_KEY}=${encodeURIComponent(
-        id
-      )}; Path=/; Max-Age=${60 * 60 * 24 * 365}`;
-    } catch {
-    }
-    return id;
-  }, []);
-  return { theme, switchTheme, linkId: LINK_ID };
-}
-
-exports.LINK_ID = LINK_ID;
-exports.useTheme = useTheme;

package/dist/hooks/useViewportFill.cjs

@@ -1,52 +0,0 @@
-'use strict';
-
-var react = require('react');
-
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
-function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false } = {}) {
-  const [maxHeight, setMaxHeight] = react.useState(0);
-  const raf = react.useRef(null);
-  const measure = react.useCallback(() => {
-    if (typeof window === "undefined" || !ref.current) return;
-    const el = ref.current;
-    const rect = el.getBoundingClientRect();
-    let top = rect.top;
-    if (includeMarginTop) {
-      const mt = parseFloat(getComputedStyle(el).marginTop || "0") || 0;
-      top -= mt;
-    }
-    const raw = window.innerHeight - bottomOffset - top;
-    const next = Math.max(min, Math.floor(raw));
-    setMaxHeight(next);
-  }, [ref, bottomOffset, min, includeMarginTop]);
-  useIsomorphicLayoutEffect(() => {
-    measure();
-  }, [measure]);
-  react.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const onFrame = () => {
-      if (raf.current) cancelAnimationFrame(raf.current);
-      raf.current = requestAnimationFrame(measure);
-    };
-    window.addEventListener("scroll", onFrame, { passive: true });
-    window.addEventListener("resize", onFrame);
-    let ro = null;
-    if ("ResizeObserver" in window && ref.current) {
-      ro = new ResizeObserver(onFrame);
-      ro.observe(ref.current);
-    }
-    return () => {
-      window.removeEventListener("scroll", onFrame);
-      window.removeEventListener("resize", onFrame);
-      if (ro) ro.disconnect();
-      if (raf.current) cancelAnimationFrame(raf.current);
-    };
-  }, [measure, ref]);
-  return {
-    maxHeight,
-    style: { height: maxHeight, overflow: "auto" },
-    recompute: measure
-  };
-}
-
-exports.useViewportFill = useViewportFill;