@dbcdk/react-components 0.0.1 → 0.0.3

package/dist/components/button/Button.cjs

@@ -0,0 +1,79 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles = require('./Button.module.css');
+var lucideReact = require('lucide-react');
+var Tooltip = require('../tooltip/Tooltip');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const Button = React__namespace.forwardRef(function Button2({
+  variant = "outlined",
+  size = "md",
+  icon,
+  children,
+  loading,
+  active,
+  spinIcon,
+  tooltip,
+  isLink,
+  ...rest
+}, ref) {
+  let buttonEl;
+  const className = [
+    styles__default.default.button,
+    styles__default.default[variant],
+    styles__default.default[size],
+    active ? styles__default.default.active : "",
+    loading ? styles__default.default.loading : "",
+    isLink ? styles__default.default.link : "",
+    rest.className || ""
+  ].filter(Boolean).join(" ");
+  if (isLink && React__namespace.isValidElement(children)) {
+    buttonEl = React__namespace.cloneElement(children, {
+      className,
+      ...rest,
+      ref,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.icon} ${spinIcon ? "spin" : ""}`, children: icon }),
+        children.props.children,
+        loading && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, {}) })
+      ] })
+    });
+  } else {
+    buttonEl = /* @__PURE__ */ jsxRuntime.jsxs("button", { ref, className, ...rest, children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.icon} ${spinIcon ? "spin" : ""}`, children: icon }),
+      children,
+      loading && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, {}) })
+    ] });
+  }
+  if (tooltip) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, children: buttonEl });
+  }
+  return buttonEl;
+});
+Button.displayName = "Button";
+
+exports.Button = Button;

package/dist/components/button/Button.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'default' | 'inline' | 'success' | 'danger';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: 'sm' | 'md' | 'lg';
+    icon?: React.ReactNode;
+    loading?: boolean;
+    active?: boolean;
+    spinIcon?: boolean;
+    tooltip?: string;
+    isLink?: boolean;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/Button.js

@@ -0,0 +1,54 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import styles from './Button.module.css';
+import { LoaderCircle } from 'lucide-react';
+import { Tooltip } from '../tooltip/Tooltip';
+
+const Button = React.forwardRef(function Button2({
+  variant = "outlined",
+  size = "md",
+  icon,
+  children,
+  loading,
+  active,
+  spinIcon,
+  tooltip,
+  isLink,
+  ...rest
+}, ref) {
+  let buttonEl;
+  const className = [
+    styles.button,
+    styles[variant],
+    styles[size],
+    active ? styles.active : "",
+    loading ? styles.loading : "",
+    isLink ? styles.link : "",
+    rest.className || ""
+  ].filter(Boolean).join(" ");
+  if (isLink && React.isValidElement(children)) {
+    buttonEl = React.cloneElement(children, {
+      className,
+      ...rest,
+      ref,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${spinIcon ? "spin" : ""}`, children: icon }),
+        children.props.children,
+        loading && /* @__PURE__ */ jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsx(LoaderCircle, {}) })
+      ] })
+    });
+  } else {
+    buttonEl = /* @__PURE__ */ jsxs("button", { ref, className, ...rest, children: [
+      icon && /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${spinIcon ? "spin" : ""}`, children: icon }),
+      children,
+      loading && /* @__PURE__ */ jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsx(LoaderCircle, {}) })
+    ] });
+  }
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, children: buttonEl });
+  }
+  return buttonEl;
+});
+Button.displayName = "Button";
+
+export { Button };

package/dist/components/button/Button.module.css

@@ -0,0 +1,156 @@
+.link {
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+  color: var(--color-link);
+  transition:
+    color var(--transition-fast) var(--ease-standard),
+    text-decoration-color var(--transition-fast) var(--ease-standard);
+  text-underline-offset: 0.15em;
+}
+.link:hover {
+  color: var(--color-link-hover);
+  text-decoration: underline;
+}
+.link:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-inline-sm);
+
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: 1;
+
+  border: var(--border-width-thin) solid transparent;
+  border-radius: var(--border-radius-default);
+
+  padding-inline: var(--control-padding-x);
+  padding-block: calc(var(--control-padding-y) + var(--density));
+  min-block-size: calc(var(--component-size-md) + var(--density));
+
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+
+  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);
+}
+
+.button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.button:disabled,
+.button[aria-disabled='true'] {
+  cursor: not-allowed;
+  pointer-events: none;
+  color: var(--color-disabled-text);
+  background-color: var(--color-disabled-bg);
+  border-color: var(--color-disabled-border);
+}
+
+.button svg,
+.icon svg {
+  inline-size: var(--icon-size);
+  block-size: var(--icon-size);
+}
+.icon {
+  display: inline-flex;
+}
+
+.button.sm {
+  padding-inline: var(--spacing-sm);
+  min-block-size: calc(var(--component-size-sm) + var(--density));
+}
+.button.lg {
+  padding-inline: var(--spacing-lg);
+  min-block-size: calc(var(--component-size-lg) + var(--density));
+}
+
+.primary {
+  background-color: var(--color-primary);
+  color: var(--color-text-on-primary);
+  border-color: transparent;
+}
+.primary:hover {
+  background-color: var(--color-primary-hover);
+}
+
+.secondary {
+  background-color: var(--color-secondary);
+  color: var(--color-text-on-secondary);
+  border-color: transparent;
+}
+.secondary:hover {
+  background-color: var(--color-secondary-hover);
+}
+
+.default {
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  border-color: var(--color-border);
+}
+.default:hover {
+  background-color: var(--color-surface-hover);
+  border-color: var(--color-border-strong);
+}
+
+.outlined {
+  background-color: transparent;
+  color: var(--color-text);
+  border-color: var(--color-border);
+}
+.outlined:hover {
+  border-color: var(--color-border-strong);
+}
+
+.success {
+  background-color: transparent;
+  color: var(--color-text-success);
+  border-color: var(--color-border-success);
+}
+.success .icon {
+  color: var(--color-success);
+}
+.success:hover {
+  border-color: var(--color-text);
+}
+
+.danger {
+  background-color: transparent;
+  color: var(--color-text-error);
+  border-color: var(--color-border-error);
+}
+.danger .icon {
+  color: var(--color-error);
+}
+.danger:hover {
+  border-color: var(--color-text);
+}
+
+.button.inline {
+  padding: var(--spacing-xxs);
+  min-block-size: unset;
+  background-color: transparent;
+  color: var(--color-text);
+  border-color: transparent;
+}
+
+.button.inline:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.active {
+  background-color: var(--color-primary);
+  color: var(--color-text-on-primary);
+  border-color: var(--color-border-selected);
+}

package/dist/components/card/Card.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Headline = require('../headline/Headline');
+var styles = require('./Card.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Card({ header, content, image, link: Link, width }) {
+  const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.imageContainer, children: image }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { marker: true, severity: "brand", size: 2, weight: 500, children: header }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: content })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: styles__default.default.container,
+      style: width ? { ["--width"]: `${width}%` } : void 0,
+      children: Link ? /* @__PURE__ */ jsxRuntime.jsx(Link, { children: cardContent }) : cardContent
+    }
+  );
+}
+
+exports.Card = Card;

package/dist/components/card/Card.d.ts

@@ -0,0 +1,11 @@
+interface CardProps {
+    header: string;
+    content: React.ReactNode | string;
+    image?: React.ReactNode;
+    link?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+    width?: 25 | 33 | 50 | 66 | 75 | 100;
+}
+export declare function Card({ header, content, image, link: Link, width }: CardProps): JSX.Element;
+export {};

package/dist/components/card/Card.js

@@ -0,0 +1,23 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Headline } from '../headline/Headline';
+import styles from './Card.module.css';
+
+function Card({ header, content, image, link: Link, width }) {
+  const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: styles.imageContainer, children: image }),
+    /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+      /* @__PURE__ */ jsx(Headline, { marker: true, severity: "brand", size: 2, weight: 500, children: header }),
+      /* @__PURE__ */ jsx("div", { children: content })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: styles.container,
+      style: width ? { ["--width"]: `${width}%` } : void 0,
+      children: Link ? /* @__PURE__ */ jsx(Link, { children: cardContent }) : cardContent
+    }
+  );
+}
+
+export { Card };

package/dist/components/card/Card.module.css

@@ -0,0 +1,69 @@
+/* Card container */
+.container {
+  inline-size: 100%;
+  color: var(--color-text);
+  background: var(--color-surface);
+  border: var(--border-width-thin) solid var(--color-border);
+  border-radius: var(--border-radius-lg);
+
+  /* elevation */
+  box-shadow: var(--shadow-sm);
+  padding: var(--spacing-md);
+
+  transition:
+    color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard),
+    transform var(--transition-fast) var(--ease-standard);
+}
+
+.container:hover {
+  color: var(--color-highlight);
+  cursor: pointer;
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
+}
+
+/* Responsive width (uses your width var if provided) */
+@media screen and (min-width: 768px) {
+  .container {
+    inline-size: calc(var(--width, 100%) - var(--spacing-md));
+  }
+}
+
+/* Media note: if you use custom media, define:
+   @custom-media --dbc-bp-md (min-width: 768px);
+   then swap the query above to: @media (--dbc-bp-md) { ... } */
+
+/* Image wrapper */
+.imageContainer {
+  overflow: hidden;
+  border-start-start-radius: var(--border-radius-lg);
+  border-start-end-radius: var(--border-radius-lg);
+}
+
+/* Media */
+.container img {
+  inline-size: 100%;
+  block-size: auto;
+  border-block-end: var(--border-width-thin) solid var(--color-border);
+  transform: scale(1);
+}
+
+/* Headings & text */
+.container h3 {
+  margin: var(--spacing-sm) 0;
+  color: inherit;
+}
+
+.container p {
+  margin: var(--spacing-sm) 0;
+  line-height: var(--line-height-tight);
+}
+
+/* Optional: image hover zoom (tokenized) */
+/*
+.container:hover img {
+  transition: transform var(--transition-normal) var(--ease-standard);
+  transform: scale(1.02);
+}
+*/

package/dist/components/card-container/CardContainer.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Headline = require('../headline/Headline');
+var styles = require('./CardContainer.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function CardContainer({
+  children,
+  headline,
+  subHeadline,
+  expand
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { marker: true, severity: "brand", subHeadline, children: headline }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, style: { ["--expand"]: expand ? "1" : "0" }, children })
+  ] });
+}
+
+exports.CardContainer = CardContainer;

package/dist/components/card-container/CardContainer.d.ts

@@ -0,0 +1,8 @@
+interface CardContainerProps {
+    headline?: string;
+    subHeadline?: string;
+    children?: React.ReactNode[];
+    expand?: boolean;
+}
+export declare function CardContainer({ children, headline, subHeadline, expand, }: CardContainerProps): JSX.Element;
+export {};

package/dist/components/card-container/CardContainer.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Headline } from '../headline/Headline';
+import styles from './CardContainer.module.css';
+
+function CardContainer({
+  children,
+  headline,
+  subHeadline,
+  expand
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Headline, { marker: true, severity: "brand", subHeadline, children: headline }),
+    /* @__PURE__ */ jsx("div", { className: styles.container, style: { ["--expand"]: expand ? "1" : "0" }, children })
+  ] });
+}
+
+export { CardContainer };

package/dist/components/card-container/CardContainer.module.css

@@ -0,0 +1,18 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+  --width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    --width: 33.333%;
+  }
+}
+
+.container > * {
+  flex-grow: var(--expand);
+  flex-shrink: 1;
+  box-sizing: border-box;
+}

package/dist/components/checkbox/Checkbox.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var styles = require('./Checkbox.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Checkbox({
+  checked: controlled,
+  onChange,
+  variant = "outlined",
+  disabled,
+  label,
+  size = "md"
+}) {
+  const [internal, setInternal] = react.useState(false);
+  const isChecked = controlled != null ? controlled : internal;
+  const toggle = () => {
+    const value = !isChecked;
+    setInternal(value);
+    onChange == null ? void 0 : onChange(value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        disabled,
+        type: "button",
+        onClick: toggle,
+        "aria-pressed": isChecked,
+        className: `${styles__default.default.checkbox} ${isChecked ? styles__default.default.checked : ""} ${styles__default.default[variant]} ${styles__default.default[size]}`,
+        children: isChecked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: styles__default.default.icon })
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
+  ] });
+}
+
+exports.Checkbox = Checkbox;

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,12 @@
+type Variant = 'default' | 'primary' | 'outlined';
+type Size = 'sm' | 'md' | 'lg';
+interface CheckboxProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    variant?: Variant;
+    disabled?: boolean;
+    label?: string;
+    size?: Size;
+}
+export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, size, }: CheckboxProps): JSX.Element;
+export {};

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Check } from 'lucide-react';
+import styles from './Checkbox.module.css';
+
+function Checkbox({
+  checked: controlled,
+  onChange,
+  variant = "outlined",
+  disabled,
+  label,
+  size = "md"
+}) {
+  const [internal, setInternal] = useState(false);
+  const isChecked = controlled != null ? controlled : internal;
+  const toggle = () => {
+    const value = !isChecked;
+    setInternal(value);
+    onChange == null ? void 0 : onChange(value);
+  };
+  return /* @__PURE__ */ jsxs("span", { className: styles.container, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        disabled,
+        type: "button",
+        onClick: toggle,
+        "aria-pressed": isChecked,
+        className: `${styles.checkbox} ${isChecked ? styles.checked : ""} ${styles[variant]} ${styles[size]}`,
+        children: isChecked && /* @__PURE__ */ jsx(Check, { className: styles.icon })
+      }
+    ),
+    label && /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
+  ] });
+}
+
+export { Checkbox };

package/dist/components/checkbox/Checkbox.module.css

@@ -0,0 +1,63 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  vertical-align: middle;
+  line-height: 0;
+}
+
+.checkbox {
+  width: var(--component-size-sm);
+  height: var(--component-size-sm);
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-width-thin) solid var(--color-border-strong);
+  border-radius: var(--border-radius-sm);
+  background-color: var(--color-surface);
+  cursor: pointer;
+  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);
+}
+
+.checkbox.sm {
+  width: var(--component-size-xs);
+  height: var(--component-size-xs);
+}
+
+.label {
+  display: block;
+  font-size: var(--font-size-sm);
+}
+
+.checkbox:hover {
+  border-color: var(--color-text);
+}
+
+.checked {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.icon {
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: var(--color-text-on-primary);
+  stroke-width: 3;
+  pointer-events: none;
+}
+
+.outlined.checked {
+  background-color: var(--opac-bg-default);
+  &:not(:hover) {
+    border-color: transparent;
+  }
+
+  .icon {
+    color: var(--color-text);
+  }
+}