@dbcdk/react-components 0.0.2 → 0.0.3

package/dist/components/icon/Icon.module.css

@@ -0,0 +1,34 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--color-secondary);
+}
+
+.icon {
+  display: flex;
+}
+
+.icon svg {
+  height: var(--icon-size);
+}
+
+.success {
+  color: var(--color-success);
+}
+
+.error {
+  color: var(--color-error);
+}
+
+.warning {
+  color: var(--color-warning);
+}
+
+.info {
+  color: var(--color-info);
+}
+
+.brand {
+  color: var(--color-text-on-primary);
+}

package/dist/components/input/Input.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('../input/Input.module.css');
+var ClearButton = require('../clear-button/ClearButton');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+const Input = react.forwardRef(function Input2({ label, icon, minWidth, inputSize, variant = "outlined", autoFocus, onClear, ...rest }, ref) {
+  const inputRef = react.useRef(null);
+  react.useEffect(() => {
+    var _a;
+    if (autoFocus) (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, [autoFocus]);
+  console.log(rest);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: label, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.inputWrapper, children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: label,
+          ...rest,
+          ref: mergeRefs(inputRef, ref),
+          style: { minWidth: minWidth || "200px" },
+          className: `${styles__default.default.input} ${icon ? styles__default.default.inputWithIcon : ""} ${inputSize ? styles__default.default[inputSize] : ""} ${styles__default.default[variant]}`
+        }
+      ),
+      onClear && rest.value && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear, absolute: true })
+    ] })
+  ] });
+});
+Input.displayName = "Input";
+
+exports.Input = Input;

package/dist/components/input/Input.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { Size } from '../../types/sizes.types';
+export type InputVariant = 'outlined' | 'filled' | 'standalone';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    icon?: React.ReactNode;
+    autoFocus?: boolean;
+    minWidth?: string;
+    inputSize?: Size;
+    variant?: InputVariant;
+    onClear?: () => void;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input/Input.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect } from 'react';
+import styles from '../input/Input.module.css';
+import { ClearButton } from '../clear-button/ClearButton';
+
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+const Input = forwardRef(function Input2({ label, icon, minWidth, inputSize, variant = "outlined", autoFocus, onClear, ...rest }, ref) {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    if (autoFocus) (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, [autoFocus]);
+  console.log(rest);
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: label, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
+      icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: label,
+          ...rest,
+          ref: mergeRefs(inputRef, ref),
+          style: { minWidth: minWidth || "200px" },
+          className: `${styles.input} ${icon ? styles.inputWithIcon : ""} ${inputSize ? styles[inputSize] : ""} ${styles[variant]}`
+        }
+      ),
+      onClear && rest.value && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear, absolute: true })
+    ] })
+  ] });
+});
+Input.displayName = "Input";
+
+export { Input };

package/dist/components/input/Input.module.css

@@ -0,0 +1,112 @@
+/* Wrapper */
+.inputWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text);
+}
+
+/* Input */
+.inputWrapper input {
+  color: inherit;
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  box-sizing: border-box;
+
+  background-color: var(--color-surface);
+  border: var(--border-width-thin) solid var(--color-border);
+  border-radius: var(--border-radius-default);
+
+  /* density-aware paddings/heights */
+  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));
+
+  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);
+}
+
+/* Placeholder */
+.inputWrapper input::placeholder {
+  color: var(--color-text-muted);
+}
+
+/* Hover & focus */
+.inputWrapper input:hover {
+  border-color: var(--color-border-strong);
+}
+.inputWrapper input:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: var(--focus-ring);
+}
+
+/* Filled (borderless) variant for embedded contexts */
+.inputWrapper input.filled {
+  background-color: var(--color-surface);
+  border: 0;
+}
+
+/* Standalone / elevated variant */
+.inputWrapper input.standalone {
+  border-radius: var(--border-radius-rounded);
+  background-color: var(--color-surface);
+  box-shadow: var(--shadow-xs), var(--shadow-md);
+}
+.inputWrapper input.standalone:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: var(--focus-ring);
+}
+
+/* Sizes */
+.inputWrapper input.sm {
+  min-block-size: calc(var(--component-size-sm) + var(--density));
+  font-size: var(--font-size-sm);
+}
+.inputWrapper input.md {
+  min-block-size: calc(var(--component-size-md) + var(--density));
+  font-size: var(--font-size-sm);
+}
+.inputWrapper input.lg {
+  min-block-size: calc(var(--component-size-lg) + var(--density));
+  font-size: var(--font-size-lg);
+}
+
+/* With leading icon */
+.inputWrapper input.inputWithIcon {
+  padding-inline-start: calc(var(--icon-size) + var(--spacing-lg));
+}
+
+/* Icon */
+.icon {
+  position: absolute;
+  inset-inline-start: var(--spacing-md);
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--icon-size);
+  block-size: var(--icon-size);
+  pointer-events: none;
+  color: var(--color-secondary);
+}
+.icon svg {
+  color: inherit;
+  inline-size: var(--icon-size);
+  block-size: var(--icon-size);
+}
+
+/* Outlined (transparent) variant */
+.outlined {
+  background-color: transparent;
+}
+
+/* Date/time picker indicator (WebKit) */
+.inputWrapper input[type='datetime-local']::-webkit-calendar-picker-indicator {
+  filter: invert(0.7);
+}

package/dist/components/menu/Menu.cjs

@@ -0,0 +1,96 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles = require('./Menu.module.css');
+
+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 MenuBase = React__namespace.forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      ref,
+      role: "menu",
+      className: [styles__default.default.container, className].filter(Boolean).join(" "),
+      ...props,
+      children
+    }
+  )
+);
+MenuBase.displayName = "Menu";
+const isInteractiveEl = (el) => React__namespace.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
+const MenuItem = React__namespace.forwardRef(
+  ({ children, active, disabled, className, ...liProps }, ref) => {
+    if (isInteractiveEl(children)) {
+      const child = children;
+      const childClass = [styles__default.default.item, active ? styles__default.default.active : ""].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "li",
+        {
+          ref,
+          role: "none",
+          className: [styles__default.default.row, className].filter(Boolean).join(" "),
+          ...liProps,
+          children: React__namespace.cloneElement(child, {
+            role: "menuitem",
+            tabIndex: -1,
+            "aria-selected": active || void 0,
+            "aria-disabled": disabled || void 0,
+            className: [child.props.className, styles__default.default.interactive, childClass].filter(Boolean).join(" ")
+          })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        ref,
+        role: "none",
+        className: [styles__default.default.row, className].filter(Boolean).join(" "),
+        ...liProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            role: "menuitem",
+            tabIndex: -1,
+            "aria-selected": active || void 0,
+            "aria-disabled": disabled || void 0,
+            className: [styles__default.default.interactive, styles__default.default.item, active ? styles__default.default.active : ""].filter(Boolean).join(" "),
+            type: "button",
+            disabled,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+MenuItem.displayName = "Menu.Item";
+const Menu = Object.assign(
+  MenuBase,
+  { Item: MenuItem }
+);
+
+exports.Menu = Menu;

package/dist/components/menu/Menu.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
+    children: React.ReactNode;
+}
+export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    children: React.ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+}
+export declare const Menu: React.FC<MenuProps> & {
+    Item: React.FC<MenuItemProps>;
+};

package/dist/components/menu/Menu.js

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import styles from './Menu.module.css';
+
+const MenuBase = React.forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref,
+      role: "menu",
+      className: [styles.container, className].filter(Boolean).join(" "),
+      ...props,
+      children
+    }
+  )
+);
+MenuBase.displayName = "Menu";
+const isInteractiveEl = (el) => React.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
+const MenuItem = React.forwardRef(
+  ({ children, active, disabled, className, ...liProps }, ref) => {
+    if (isInteractiveEl(children)) {
+      const child = children;
+      const childClass = [styles.item, active ? styles.active : ""].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsx(
+        "li",
+        {
+          ref,
+          role: "none",
+          className: [styles.row, className].filter(Boolean).join(" "),
+          ...liProps,
+          children: React.cloneElement(child, {
+            role: "menuitem",
+            tabIndex: -1,
+            "aria-selected": active || void 0,
+            "aria-disabled": disabled || void 0,
+            className: [child.props.className, styles.interactive, childClass].filter(Boolean).join(" ")
+          })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        role: "none",
+        className: [styles.row, className].filter(Boolean).join(" "),
+        ...liProps,
+        children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            role: "menuitem",
+            tabIndex: -1,
+            "aria-selected": active || void 0,
+            "aria-disabled": disabled || void 0,
+            className: [styles.interactive, styles.item, active ? styles.active : ""].filter(Boolean).join(" "),
+            type: "button",
+            disabled,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+MenuItem.displayName = "Menu.Item";
+const Menu = Object.assign(
+  MenuBase,
+  { Item: MenuItem }
+);
+
+export { Menu };

package/dist/components/menu/Menu.module.css

@@ -0,0 +1,95 @@
+/* =========================
+   Panel (apply to dialog content)
+   ========================= */
+.panel {
+  background: var(--color-surface);
+  color: var(--color-text);
+  border: var(--border-width-thin) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--spacing-xs);
+}
+
+/* =========================
+   List (ul) — reset only
+   ========================= */
+.container {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+
+  display: flex;
+  flex-direction: column;
+}
+
+/* space between rows without adding inner borders */
+.container > li + li {
+  margin-block-start: var(--spacing-2xs);
+}
+
+/* li wrapper (non-focusable) */
+.row {
+  display: contents;
+}
+
+/* =========================
+   Interactive child (a/button/Link)
+   ========================= */
+.interactive {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-xs);
+
+  inline-size: 100%;
+  text-align: start;
+  text-decoration: none;
+
+  padding-block: calc(var(--spacing-xs) + var(--density));
+  padding-inline: var(--spacing-md);
+
+  background: transparent;
+  border: none;
+
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--color-text);
+  cursor: pointer;
+
+  border-radius: var(--border-radius-sm);
+
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard);
+}
+.interactive:hover {
+  background-color: var(--color-surface-hover);
+}
+.interactive:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Selected / active */
+.active,
+.interactive[aria-selected='true'] {
+  background-color: var(--color-bg-selected);
+  color: var(--color-text);
+}
+
+/* Disabled */
+.interactive[aria-disabled='true'],
+.interactive:disabled {
+  color: var(--color-disabled-text);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Icons inside items */
+.interactive svg {
+  inline-size: var(--icon-size);
+  block-size: var(--icon-size);
+}

package/dist/components/multi-select/MultiSelect.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var Button = require('../button/Button');
+var Menu = require('../menu/Menu');
+var Popover = require('../popover/Popover');
+var Chip = require('../chip/Chip');
+var ClearButton = require('../clear-button/ClearButton');
+
+function MultiSelect({
+  options,
+  selectedValues = [],
+  onChange,
+  children,
+  variant = "outlined",
+  size = "md",
+  onClear
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Popover,
+    {
+      trigger: (onClick, icon) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant, onClick, size, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          children || "V\xE6lg",
+          " ",
+          selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", severity: "info", children: `${selectedValues.length}` }) : null
+        ] }),
+        onClear && selectedValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear }),
+        icon
+      ] }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: selectedValues == null ? void 0 : selectedValues.includes(option.value), children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: () => {
+            onChange(option.value);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { pointerEvents: "none", display: "flex", alignItems: "center" }, children: (selectedValues == null ? void 0 : selectedValues.includes(option.value)) ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, {}) }),
+            option.label
+          ]
+        }
+      ) }, option.value)) })
+    }
+  );
+}
+
+exports.MultiSelect = MultiSelect;

package/dist/components/multi-select/MultiSelect.d.ts

@@ -0,0 +1,18 @@
+import { ButtonVariant } from '../button/Button';
+interface MultiselectOption {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+}
+interface MultiSelectProps {
+    options: MultiselectOption[];
+    selectedValues: string[];
+    onChange: (selectedValue: string) => void;
+    placeholder?: string;
+    children?: React.ReactNode;
+    variant?: ButtonVariant;
+    size?: 'sm' | 'md' | 'lg';
+    onClear?: () => void;
+}
+export declare function MultiSelect({ options, selectedValues, onChange, children, variant, size, onClear, }: MultiSelectProps): React.ReactNode;
+export {};

package/dist/components/multi-select/MultiSelect.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Check, Square } from 'lucide-react';
+import { Button } from '../button/Button';
+import { Menu } from '../menu/Menu';
+import { Popover } from '../popover/Popover';
+import { Chip } from '../chip/Chip';
+import { ClearButton } from '../clear-button/ClearButton';
+
+function MultiSelect({
+  options,
+  selectedValues = [],
+  onChange,
+  children,
+  variant = "outlined",
+  size = "md",
+  onClear
+}) {
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      trigger: (onClick, icon) => /* @__PURE__ */ jsxs(Button, { variant, onClick, size, children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          children || "V\xE6lg",
+          " ",
+          selectedValues.length > 0 ? /* @__PURE__ */ jsx(Chip, { size: "sm", severity: "info", children: `${selectedValues.length}` }) : null
+        ] }),
+        onClear && selectedValues.length > 0 && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }),
+        icon
+      ] }),
+      children: /* @__PURE__ */ jsx(Menu, { children: options.map((option) => /* @__PURE__ */ jsx(Menu.Item, { active: selectedValues == null ? void 0 : selectedValues.includes(option.value), children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => {
+            onChange(option.value);
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { pointerEvents: "none", display: "flex", alignItems: "center" }, children: (selectedValues == null ? void 0 : selectedValues.includes(option.value)) ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Square, {}) }),
+            option.label
+          ]
+        }
+      ) }, option.value)) })
+    }
+  );
+}
+
+export { MultiSelect };