@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/chip/Chip.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
+interface ChipProps {
+    children: ReactNode;
+    severity?: Severity;
+    disableIcon?: boolean;
+    customIcon?: ReactNode;
+    loading?: boolean;
+    fullWidth?: boolean;
+    onClose?: () => void;
+    size?: 'sm' | 'md' | 'lg';
+    type?: 'default' | 'rounded' | 'outlined';
+    selected?: boolean;
+}
+export declare function Chip({ children, severity, loading, disableIcon, fullWidth, size, customIcon, type, selected, onClose, }: ChipProps): JSX.Element;
+export {};

package/dist/components/chip/Chip.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx, 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';
+
+function Chip({
+  children,
+  severity = "neutral",
+  loading,
+  disableIcon = true,
+  fullWidth = false,
+  size = "sm",
+  customIcon,
+  type = "rounded",
+  selected = false,
+  onClose
+}) {
+  const [chipWidth, setChipWidth] = useState(void 0);
+  const chipRef = useRef(null);
+  useEffect(() => {
+    if (chipRef.current) {
+      setChipWidth(`${chipRef.current.offsetWidth}px`);
+    }
+  }, [loading]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(SkeletonLoaderItem, { width: chipWidth != null ? chipWidth : "100px", height: "26px", radius: "25px" });
+  }
+  const hasLeading = Boolean(customIcon) || Boolean(severity) && !disableIcon;
+  const hasClose = typeof onClose === "function";
+  return /* @__PURE__ */ 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 ? /* @__PURE__ */ jsxs("span", { className: styles.leading, children: [
+          severity && !disableIcon && /* @__PURE__ */ jsx(Icon, { severity }),
+          customIcon
+        ] }) : null,
+        /* @__PURE__ */ jsx("span", { className: styles.label, children }),
+        hasClose && /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, className: styles.close, "aria-label": "Luk", children: /* @__PURE__ */ jsx(X, {}) })
+      ]
+    }
+  );
+}
+
+export { Chip };

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

@@ -0,0 +1,247 @@
+.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-lg);
+}
+
+/* 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-neutral);
+  --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;
+}
+
+.accent {
+  --chip-bg: var(--color-accent-bg);
+  --chip-fg: var(--color-accent-fg);
+  --chip-border: transparent;
+  --chip-outlined-border: var(--color-accent-border);
+  --chip-outlined-border-hover: var(--color-accent-border);
+  --chip-outlined-fg: var(--color-accent-fg);
+  --chip-outlined-fg-hover: var(--color-accent-fg);
+  box-shadow: inset 0 0 0 1px var(--color-accent-border);
+}
+
+/* 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.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Tooltip = require('../../components/overlay/tooltip/Tooltip');
+var styles = require('./Circle.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Circle({
+  severity,
+  children,
+  tooltip,
+  glow,
+  muted,
+  pulse,
+  size = "sm"
+}) {
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.container, "data-size": size, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "data-glow": glow,
+        "data-pulse": pulse,
+        "data-size": size,
+        "data-muted": muted,
+        className: `${styles__default.default.circle} ${styles__default.default[severity]}`
+      }
+    ),
+    children
+  ] });
+  if (tooltip) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, children: inner });
+  }
+  return inner;
+}
+
+exports.Circle = Circle;

package/dist/components/circle/Circle.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
+type CircleSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+interface CircleProps {
+    severity: Severity;
+    children?: ReactNode;
+    tooltip?: ReactNode;
+    glow?: boolean;
+    muted?: boolean;
+    pulse?: boolean;
+    size?: CircleSize;
+}
+export declare function Circle({ severity, children, tooltip, glow, muted, pulse, size, }: CircleProps): JSX.Element;
+export {};

package/dist/components/circle/Circle.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Tooltip } from '../../components/overlay/tooltip/Tooltip';
+import styles from './Circle.module.css';
+
+function Circle({
+  severity,
+  children,
+  tooltip,
+  glow,
+  muted,
+  pulse,
+  size = "sm"
+}) {
+  const inner = /* @__PURE__ */ jsxs("span", { className: styles.container, "data-size": size, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-glow": glow,
+        "data-pulse": pulse,
+        "data-size": size,
+        "data-muted": muted,
+        className: `${styles.circle} ${styles[severity]}`
+      }
+    ),
+    children
+  ] });
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, children: inner });
+  }
+  return inner;
+}
+
+export { Circle };

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

@@ -0,0 +1,138 @@
+.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 */
+.neutral {
+  background-color: var(--color-neutral);
+}
+.brand {
+  background-color: var(--color-brand);
+}
+.accent {
+  background-color: var(--color-accent);
+}
+.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);
+}
+
+.accent[data-glow='true'] {
+  box-shadow: 0 0 0 2px var(--color-accent-bg);
+}
+
+.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.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var styles = require('./ClearButton.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function ClearButton({ onClick, ariaLabel = "Ryd" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.clearButton, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      className: styles__default.default.button,
+      type: "button",
+      "aria-label": ariaLabel,
+      "data-input-role": "clear",
+      onMouseDown: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick == null ? void 0 : onClick(e);
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
+    }
+  ) });
+}
+
+exports.ClearButton = ClearButton;

package/dist/components/clear-button/ClearButton.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import * as React from 'react';
+interface ClearButtonProps {
+    onClick?: (event?: React.MouseEvent | React.KeyboardEvent) => void;
+    ariaLabel?: string;
+}
+export declare function ClearButton({ onClick, ariaLabel }: ClearButtonProps): ReactNode;
+export {};

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

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { X } from 'lucide-react';
+import styles from './ClearButton.module.css';
+
+function ClearButton({ onClick, ariaLabel = "Ryd" }) {
+  return /* @__PURE__ */ jsx("span", { className: styles.clearButton, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: styles.button,
+      type: "button",
+      "aria-label": ariaLabel,
+      "data-input-role": "clear",
+      onMouseDown: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick == null ? void 0 : onClick(e);
+      },
+      children: /* @__PURE__ */ jsx(X, { size: 16 })
+    }
+  ) });
+}
+
+export { ClearButton };

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

@@ -0,0 +1,26 @@
+.clearButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.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);
+}