@dbcdk/react-components 0.0.167 → 0.0.169

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

@@ -1,16 +0,0 @@
-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

@@ -1,59 +0,0 @@
-'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

@@ -1,247 +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-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

@@ -1,39 +0,0 @@
-'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

@@ -1,14 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,138 +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 */
-.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

@@ -1,33 +0,0 @@
-'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

@@ -1,8 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,26 +0,0 @@
-.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);
-}