@dbcdk/react-components 0.0.95 → 0.0.97

package/dist/components/chip/Chip.js

@@ -1,31 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from 'lucide-react';
-import { useState, useRef, useEffect } from 'react';
-import styles from './Chip.module.css';
-import { Icon } from '../icon/Icon';
-import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-export function Chip({ children, severity = 'neutral', loading, disableIcon = true, fullWidth = false, size = 'sm', customIcon, type = 'rounded', selected = false, onClose, }) {
-    const [chipWidth, setChipWidth] = useState(undefined);
-    const chipRef = useRef(null);
-    useEffect(() => {
-        if (chipRef.current) {
-            setChipWidth(`${chipRef.current.offsetWidth}px`);
-        }
-    }, [loading]);
-    if (loading) {
-        return _jsx(SkeletonLoaderItem, { width: chipWidth !== null && chipWidth !== void 0 ? chipWidth : '100px', height: "26px", radius: "25px" });
-    }
-    const hasLeading = Boolean(customIcon) || (Boolean(severity) && !disableIcon);
-    const hasClose = typeof onClose === 'function';
-    return (_jsxs("div", { ref: chipRef, className: [
-            styles.container,
-            severity ? styles[severity] : '',
-            fullWidth ? styles.fullWidth : '',
-            styles[size],
-            styles[type],
-            hasLeading ? styles.hasLeading : '',
-            hasClose ? styles.hasClose : '',
-            selected ? styles.selected : '',
-        ].join(' '), children: [hasLeading ? (_jsxs("span", { className: styles.leading, children: [severity && !disableIcon && _jsx(Icon, { severity: severity }), customIcon] })) : null, _jsx("span", { className: styles.label, children: children }), hasClose && (_jsx("button", { type: "button", onClick: onClose, className: styles.close, "aria-label": "Luk", children: _jsx(X, {}) }))] }));
-}

package/dist/components/chip/Chip.module.css

@@ -1,236 +0,0 @@
-.container {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  white-space: nowrap;
-
-  color: var(--chip-fg, var(--color-fg-default));
-  background: var(--chip-bg, transparent);
-  border: 1px solid var(--chip-border, transparent);
-  border-radius: var(--border-radius-rounded);
-
-  padding-inline: var(--spacing-sm);
-  padding-block: var(--spacing-2xs);
-
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-default);
-
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    color var(--transition-fast) var(--ease-standard),
-    border-color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard),
-    transform var(--transition-fast) var(--ease-standard);
-}
-
-.container:focus-visible {
-  outline: none;
-}
-
-.rounded {
-  border-radius: var(--border-radius-rounded);
-}
-
-.default {
-  border-radius: var(--border-radius-default);
-}
-
-/* Types */
-
-.outlined {
-  --chip-bg: var(--color-bg-surface);
-  --chip-border: var(--chip-outlined-border, var(--color-border-subtle));
-  --chip-fg: var(--chip-outlined-fg, var(--color-fg-muted));
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-}
-
-.outlined:hover {
-  background-color: var(--color-bg-surface);
-  border-color: var(--chip-outlined-border-hover, var(--color-border-default));
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  color: var(--chip-outlined-fg-hover, var(--color-fg-default));
-}
-
-.outlined:focus-visible {
-  outline: none;
-  border-color: var(--color-border-selected);
-  box-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.03),
-    inset 0 0 0 1px var(--color-border-selected);
-  color: var(--chip-outlined-fg-hover, var(--color-fg-default));
-}
-
-/* Content */
-
-.leading {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-}
-
-.label {
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-}
-
-.leading svg,
-.close svg {
-  inline-size: var(--icon-size-sm);
-  block-size: var(--icon-size-sm);
-  color: currentColor;
-}
-
-.sm .leading svg {
-  inline-size: var(--icon-size-xs);
-  block-size: var(--icon-size-xs);
-}
-
-/* Sizes */
-
-.sm {
-  height: var(--component-size-xs);
-  font-size: var(--font-size-xs);
-}
-
-.md {
-  height: var(--component-size-sm);
-}
-
-.lg {
-  height: var(--component-size-md);
-  padding-block: var(--spacing-xs);
-}
-
-/* Status variants */
-
-.neutral {
-  --chip-bg: var(--color-bg-toolbar);
-  --chip-fg: var(--color-fg-default);
-  --chip-border: transparent;
-  --chip-outlined-border: var(--color-border-subtle);
-  --chip-outlined-border-hover: var(--color-border-default);
-  --chip-outlined-fg: var(--color-fg-muted);
-  --chip-outlined-fg-hover: var(--color-fg-default);
-  box-shadow: none;
-}
-
-.success {
-  --chip-bg: var(--color-status-success-bg);
-  --chip-fg: var(--color-status-success-fg);
-  --chip-border: transparent;
-  --chip-outlined-border: var(--color-status-success-border);
-  --chip-outlined-border-hover: var(--color-status-success-border);
-  --chip-outlined-fg: var(--color-status-success-fg);
-  --chip-outlined-fg-hover: var(--color-status-success-fg);
-  box-shadow: inset 0 0 0 1px var(--color-status-success-border);
-}
-
-.warning {
-  --chip-bg: var(--color-status-warning-bg);
-  --chip-fg: var(--color-status-warning-fg);
-  --chip-border: transparent;
-  --chip-outlined-border: var(--color-status-warning-border);
-  --chip-outlined-border-hover: var(--color-status-warning-border);
-  --chip-outlined-fg: var(--color-status-warning-fg);
-  --chip-outlined-fg-hover: var(--color-status-warning-fg);
-  box-shadow: inset 0 0 0 1px var(--color-status-warning-border);
-}
-
-.error {
-  --chip-bg: var(--color-status-error-bg);
-  --chip-fg: var(--color-status-error-fg);
-  --chip-border: transparent;
-  --chip-outlined-border: var(--color-status-error-border);
-  --chip-outlined-border-hover: var(--color-status-error-border);
-  --chip-outlined-fg: var(--color-status-error-fg);
-  --chip-outlined-fg-hover: var(--color-status-error-fg);
-  box-shadow: inset 0 0 0 1px var(--color-status-error-border);
-}
-
-.info {
-  --chip-bg: var(--color-status-info-bg);
-  --chip-fg: var(--color-status-info-fg);
-  --chip-border: transparent;
-  --chip-outlined-border: var(--color-status-info-border);
-  --chip-outlined-border-hover: var(--color-status-info-border);
-  --chip-outlined-fg: var(--color-status-info-fg);
-  --chip-outlined-fg-hover: var(--color-status-info-fg);
-  box-shadow: inset 0 0 0 1px var(--color-status-info-border);
-}
-
-.brand {
-  --chip-bg: var(--color-brand);
-  --chip-fg: var(--color-fg-on-brand);
-  --chip-border: transparent;
-  --chip-outlined-border: color-mix(in srgb, var(--color-brand) 50%, transparent);
-  --chip-outlined-border-hover: var(--color-brand);
-  --chip-outlined-fg: var(--color-brand);
-  --chip-outlined-fg-hover: var(--color-brand);
-  box-shadow: inset 0 0 0 1px transparent;
-}
-
-/* Selected */
-
-.selected {
-  background: var(--color-bg-selected);
-  color: var(--color-brand);
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}
-
-.selected:hover {
-  background-color: var(--color-bg-selected);
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-  color: var(--color-brand);
-}
-
-.selected:focus-visible {
-  outline: none;
-  background-color: var(--color-bg-selected);
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-  color: var(--color-brand);
-}
-
-/* Layout */
-
-.fullWidth {
-  inline-size: 100%;
-  justify-content: center;
-}
-
-/* Close button */
-
-.close {
-  all: unset;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: inherit;
-
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-  border-radius: var(--border-radius-round);
-  border: 1px solid transparent;
-  box-sizing: border-box;
-
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    border-color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard);
-}
-
-.close:hover {
-  background-color: var(--color-bg-hover-subtle);
-}
-
-.close:focus-visible {
-  outline: none;
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}

package/dist/components/circle/Circle.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './Circle.module.css';
-export function Circle({ severity, children, glow, muted, pulse, size = 'sm', }) {
-    return (_jsxs("span", { className: styles.container, "data-size": size, children: [_jsx("span", { "data-glow": glow, "data-pulse": pulse, "data-size": size, "data-muted": muted, className: `${styles.circle} ${styles[severity]}` }), children] }));
-}

package/dist/components/circle/Circle.module.css

@@ -1,128 +0,0 @@
-.container {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--spacing-xs);
-  white-space: nowrap;
-  font-family: var(--font-family);
-  color: inherit;
-  line-height: 1;
-}
-
-.container[data-size='2xs'] {
-  gap: var(--spacing-xxs);
-  font-size: var(--font-size-xs);
-}
-
-.circle {
-  position: relative;
-  display: inline-block;
-  inline-size: var(--component-size-sm);
-  block-size: var(--component-size-sm);
-  border-radius: var(--border-radius-round);
-  flex-shrink: 0;
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard),
-    opacity var(--transition-normal) var(--ease-standard);
-}
-
-/* Density modifier (optional) */
-.container[data-density='compact'] .circle {
-  inline-size: calc(var(--component-size-xs) - 4px);
-  block-size: calc(var(--component-size-xs) - 4px);
-}
-
-/* Status variants */
-.brand {
-  background-color: var(--color-brand);
-}
-.success {
-  background-color: var(--color-status-success);
-}
-.warning {
-  background-color: var(--color-status-warning);
-}
-.error {
-  background-color: var(--color-status-error);
-}
-.info {
-  background-color: var(--color-status-info);
-}
-
-.brand[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-bg-selected);
-}
-
-.success[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-status-success-bg);
-}
-.warning[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-status-warning-bg);
-}
-.error[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-status-error-bg);
-}
-.info[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-status-info-bg);
-}
-
-.circle[data-size='2xs'] {
-  inline-size: var(--component-size-2xs);
-  block-size: var(--component-size-2xs);
-}
-
-.circle[data-size='xs'] {
-  inline-size: var(--component-size-xxs);
-  block-size: var(--component-size-xxs);
-}
-
-.circle[data-size='sm'] {
-  inline-size: 14px;
-  block-size: 14px;
-}
-
-.circle[data-size='md'] {
-  inline-size: 18px;
-  block-size: 18px;
-}
-
-.circle[data-muted='true'] {
-  opacity: 0.4;
-}
-
-.circle[data-size='lg'] {
-  inline-size: 22px;
-  block-size: 22px;
-}
-
-.circle[data-pulse='true']::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background-color: inherit;
-  animation: circle-pulse 1.6s ease-out infinite;
-  pointer-events: none;
-}
-
-@keyframes circle-pulse {
-  0% {
-    transform: scale(1);
-    opacity: 0.6;
-  }
-  60% {
-    transform: scale(2);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .circle[data-pulse='true']::after {
-    animation: none;
-  }
-}

package/dist/components/clear-button/ClearButton.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { X } from 'lucide-react';
-import styles from './ClearButton.module.css';
-export function ClearButton({ onClick, absolute }) {
-    return (_jsx("span", { className: `${styles.clearButton} ${absolute ? styles.absolute : ''}`, children: _jsx("button", { className: styles.button, type: "button", "data-input-role": "clear", onMouseDown: e => {
-                e.preventDefault();
-                e.stopPropagation();
-            }, onClick: e => {
-                e.preventDefault();
-                e.stopPropagation();
-                onClick === null || onClick === void 0 ? void 0 : onClick(e);
-            }, children: _jsx(X, { size: 16 }) }) }));
-}

package/dist/components/clear-button/ClearButton.module.css

@@ -1,26 +0,0 @@
-.clearButton .button {
-  appearance: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  border: 0;
-  background: transparent;
-  color: var(--color-fg-subtle);
-  font: inherit;
-  line-height: 0;
-  padding: var(--spacing-xxs);
-  cursor: pointer;
-  border-radius: 100%;
-}
-
-.clearButton .button:hover {
-  background-color: var(--color-bg-contextual);
-}
-
-.clearButton.absolute .button {
-  position: absolute;
-  right: var(--spacing-xxs);
-  top: 50%;
-  transform: translateY(-50%);
-}

package/dist/components/code-block/CodeBlock.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextWrap } from 'lucide-react';
-import { isValidElement, useMemo, useState } from 'react';
-import styles from './CodeBlock.module.css';
-import { Button } from '../button/Button';
-import { CopyButton } from '../copy-button/CopyButton';
-const looksLikeStackFrame = (line) => {
-    const t = line.trim();
-    return (t.startsWith('at ') || // Java, JS
-        t.startsWith('...') ||
-        t.startsWith('Caused by:') ||
-        t.startsWith('Suppressed:') ||
-        t.startsWith('Traceback') || // Python header
-        t.startsWith('File ') || // Python
-        t.startsWith('↳') || // some tools
-        /^at\s+\w/.test(t));
-};
-function getTextContent(node) {
-    if (node == null || typeof node === 'boolean')
-        return '';
-    if (typeof node === 'string' || typeof node === 'number')
-        return String(node);
-    if (Array.isArray(node))
-        return node.map(getTextContent).join('');
-    if (isValidElement(node))
-        return getTextContent(node.props.children);
-    return '';
-}
-export function CodeBlock({ code, children, copyButton, copyText, size = 'md', smart = true, wrap = true, }) {
-    const text = typeof code === 'string' ? code : undefined;
-    const hasChildren = children !== undefined && children !== null;
-    const [isWrapped, setIsWrapped] = useState(wrap);
-    const copy = useMemo(() => { var _a; return (_a = copyText !== null && copyText !== void 0 ? copyText : text) !== null && _a !== void 0 ? _a : getTextContent(children); }, [copyText, text, children]);
-    const lines = useMemo(() => (smart && !hasChildren && typeof text === 'string' ? text.split('\n') : null), [smart, hasChildren, text]);
-    return (_jsxs("div", { className: [
-            styles.wrapper,
-            styles[size],
-            isWrapped ? styles.wrap : styles.noWrap,
-            copyButton ? styles.hasActions : '',
-        ]
-            .filter(Boolean)
-            .join(' '), children: [copyButton && (_jsxs("span", { className: styles.actions, "aria-hidden": false, children: [_jsx(Button, { type: "button", variant: "inline", size: "sm", shape: "round", onClick: () => setIsWrapped(v => !v), "aria-pressed": isWrapped, active: isWrapped, title: isWrapped ? 'Ombryd ikke tekst' : 'Ombryd tekst', children: _jsx(TextWrap, { size: 16 }) }), _jsx(CopyButton, { size: "sm", shape: "round", variant: "inline", text: copy })] })), _jsx("pre", { className: styles.container, tabIndex: 0, children: _jsx("code", { className: styles.code, children: hasChildren
-                        ? children
-                        : lines
-                            ? lines.map((line, i) => {
-                                const isFirst = i === 0;
-                                const isFrame = looksLikeStackFrame(line);
-                                const cls = [
-                                    styles.line,
-                                    isFirst ? styles.lineFirst : '',
-                                    isFrame ? styles.lineFrame : '',
-                                ]
-                                    .filter(Boolean)
-                                    .join(' ');
-                                return (_jsxs("span", { className: cls, children: [line, '\n'] }, i));
-                            })
-                            : text }) })] }));
-}

package/dist/components/code-block/CodeBlock.module.css

@@ -1,124 +0,0 @@
-.wrapper {
-  position: relative;
-  display: inline-block;
-  max-inline-size: 100%;
-  --code-actions-h: var(--component-size-sm);
-  --code-actions-inset: var(--spacing-xs);
-}
-
-/* <pre> */
-.container {
-  position: relative;
-  margin-block: 0;
-  background: var(--color-bg-surface-strong);
-  border: var(--border-width-thin) solid var(--color-border-subtle);
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-xs);
-  padding: var(--spacing-sm);
-  font-family: var(--font-family-mono);
-  line-height: 1.35;
-  overflow: auto;
-  scrollbar-gutter: stable;
-  display: inline-flex;
-  align-items: flex-start;
-  max-inline-size: 100%;
-}
-
-/* Sizes */
-.sm .container {
-  padding: var(--spacing-xs);
-}
-
-.sm .code {
-  font-size: var(--font-size-xs);
-}
-
-.md .code {
-  font-size: var(--font-size-sm);
-}
-
-.lg .code {
-  font-size: var(--font-size-base);
-}
-
-.hasActions .container {
-  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
-}
-
-.sm.hasActions .container {
-  min-block-size: calc(var(--code-actions-h) + var(--spacing-xs) + var(--spacing-xs));
-}
-
-.md.hasActions .container {
-  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
-}
-
-.lg.hasActions .container {
-  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
-}
-
-/* Focus ring */
-.wrapper:focus-within .container {
-  border-color: var(--color-border-selected);
-  box-shadow: var(--shadow-xs), var(--focus-ring);
-}
-
-/* <code> */
-.code {
-  display: block;
-  margin: 0;
-  font-family: var(--font-family-mono);
-  color: var(--color-fg-default);
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-/* Wrapping modes */
-.wrap .code {
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-  word-break: normal;
-}
-
-.noWrap .code {
-  white-space: pre;
-  overflow-wrap: normal;
-  word-break: normal;
-}
-
-.actions {
-  position: absolute;
-  top: var(--code-actions-inset);
-  right: var(--code-actions-inset);
-  z-index: 3;
-  display: inline-flex;
-  gap: var(--spacing-xs);
-  align-items: center;
-  padding: var(--spacing-2xs);
-  border-radius: var(--border-radius-lg);
-  background: color-mix(in oklab, var(--color-bg-surface) 70%, transparent);
-  backdrop-filter: blur(6px);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--transition-fast) var(--ease-standard);
-}
-
-.wrapper:hover .actions,
-.wrapper:focus-within .actions {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.line {
-  display: inline;
-}
-
-.lineFirst {
-  font-family: inherit;
-  font-weight: 500;
-  color: var(--color-fg-default);
-}
-
-.lineFrame {
-  color: var(--color-fg-subtle);
-}