@dbcdk/react-components 0.0.4 → 0.0.5

package/dist/components/input/Input.js

@@ -2,6 +2,7 @@ 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';
+import { Button } from '../button/Button';
 
 function mergeRefs(...refs) {
   return (node) => {
@@ -12,30 +13,70 @@ function mergeRefs(...refs) {
     }
   };
 }
-const Input = forwardRef(function Input2({ label, icon, minWidth, inputSize, variant = "outlined", autoFocus, onClear, ...rest }, ref) {
+const Input = forwardRef(function Input2({
+  label,
+  icon,
+  minWidth,
+  width,
+  fullWidth,
+  inputSize = "md",
+  variant = "outlined",
+  autoFocus,
+  onClear,
+  onButtonClick,
+  buttonLabel,
+  buttonIcon,
+  style,
+  ...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 })
-    ] })
-  ] });
+  const hasButton = Boolean(onButtonClick || buttonLabel || buttonIcon);
+  const rootStyle = {
+    ...style != null ? style : {},
+    ...minWidth ? { ["--input-min-width"]: minWidth } : null,
+    ...width ? { ["--input-width"]: width } : null
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: rootStyle,
+      className: [
+        styles.container,
+        fullWidth ? styles.fullWidth : "",
+        onClear ? styles.withClear : "",
+        hasButton ? styles.withButton : ""
+      ].filter(Boolean).join(" "),
+      children: [
+        label && /* @__PURE__ */ jsx("label", { htmlFor: label, children: label }),
+        /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
+          icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: label,
+              ...rest,
+              ref: mergeRefs(inputRef, ref),
+              className: [
+                styles.input,
+                icon ? styles.inputWithIcon : "",
+                inputSize ? styles[inputSize] : "",
+                styles[variant]
+              ].filter(Boolean).join(" ")
+            }
+          ),
+          onClear && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear, absolute: true })
+        ] }),
+        hasButton && /* @__PURE__ */ jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, children: [
+          buttonIcon != null ? buttonIcon : null,
+          buttonLabel != null ? buttonLabel : null
+        ] })
+      ]
+    }
+  );
 });
 Input.displayName = "Input";
 

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

@@ -1,27 +1,51 @@
-/* Wrapper */
-.inputWrapper {
-  position: relative;
+/* Root control group */
+.container {
+  /* inline-flex makes width behave weird in parents */
   display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+
+  /* width control */
+  inline-size: var(--input-width, auto);
+  min-inline-size: var(--input-min-width, 0);
+  max-inline-size: var(--input-max-width, none);
+}
+
+/* When you want it to take available space */
+.fullWidth {
+  display: flex;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+/* The "field" (input + icons + clear) */
+.field {
+  position: relative;
+  display: flex;
   align-items: center;
-  color: var(--color-text);
+  flex: 1 1 auto;
+  min-inline-size: 0; /* critical for ellipsis inside flex */
+  color: var(--color-fg-default);
 }
 
-/* Input */
-.inputWrapper input {
-  color: inherit;
+/* Actual input */
+.input {
+  flex: 1 1 auto;
+  min-inline-size: 0; /* critical */
+  inline-size: 100%;
+
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
   box-sizing: border-box;
+  text-overflow: ellipsis;
 
-  background-color: var(--color-surface);
-  border: var(--border-width-thin) solid var(--color-border);
+  background-color: var(--color-bg-surface);
+  border: var(--border-width-thin) solid var(--color-border-default);
   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),
@@ -29,59 +53,75 @@
     box-shadow var(--transition-fast) var(--ease-standard);
 }
 
+/* Button group styling */
+.withButton .input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Optional: if ClearButton is absolutely positioned, reserve space */
+.withClear .input {
+  padding-inline-end: calc(var(--control-padding-x) + 28px);
+}
+
 /* Placeholder */
-.inputWrapper input::placeholder {
-  color: var(--color-text-muted);
+.input::placeholder {
+  color: var(--color-fg-muted);
 }
 
 /* Hover & focus */
-.inputWrapper input:hover {
+.input:hover {
   border-color: var(--color-border-strong);
 }
-.inputWrapper input:focus-visible {
+.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);
+/* Variants */
+.filled {
+  background-color: var(--color-bg-surface);
   border: 0;
 }
-
-/* Standalone / elevated variant */
-.inputWrapper input.standalone {
+.standalone {
   border-radius: var(--border-radius-rounded);
-  background-color: var(--color-surface);
+  background-color: var(--color-bg-surface);
   box-shadow: var(--shadow-xs), var(--shadow-md);
 }
-.inputWrapper input.standalone:focus-visible {
+.standalone:focus-visible {
   outline: none;
   border-color: var(--color-border-selected);
   box-shadow: var(--focus-ring);
 }
+.outlined {
+  background-color: transparent;
+}
 
 /* Sizes */
-.inputWrapper input.sm {
-  min-block-size: calc(var(--component-size-sm) + var(--density));
+.xs {
+  block-size: calc(var(--component-size-xs) + var(--density));
+  font-size: var(--font-size-sm);
+  padding: 0 var(--spacing-xxs);
+}
+.sm {
+  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));
+.md {
+  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));
+.lg {
+  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));
+/* Leading icon */
+.inputWithIcon {
+  padding-inline-start: calc(var(--icon-size-md) + var(--spacing-lg));
 }
 
-/* Icon */
 .icon {
   position: absolute;
   inset-inline-start: var(--spacing-md);
@@ -90,23 +130,30 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
   pointer-events: none;
-  color: var(--color-secondary);
+  color: var(--color-fg-subtle);
 }
 .icon svg {
-  color: inherit;
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
 }
 
-/* Outlined (transparent) variant */
-.outlined {
-  background-color: transparent;
+/* Trailing action button (outside field) */
+.trailingButton {
+  flex: 0 0 auto;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: var(--border-width-thin) solid transparent;
+  margin-left: calc(-1 * var(--border-width-thin));
+}
+.trailingButton:hover {
+  border-color: var(--color-border-default);
+  z-index: 2;
 }
 
 /* Date/time picker indicator (WebKit) */
-.inputWrapper input[type='datetime-local']::-webkit-calendar-picker-indicator {
+.input[type='datetime-local']::-webkit-calendar-picker-indicator {
   filter: invert(0.7);
 }

package/dist/components/link/Link.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles = require('./Link.module.css');
+var lucideReact = require('lucide-react');
+
+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);
+
+function Link({ component, icon, disableIcon }) {
+  const originalProps = component.props;
+  return React__namespace.cloneElement(
+    component,
+    {
+      ...originalProps,
+      className: styles__default.default.link
+    },
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.content, children: originalProps.children }),
+      icon || !disableIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, {}) })
+    ] })
+  );
+}
+
+exports.Link = Link;

package/dist/components/link/Link.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface LinkProps {
+    component: React.ReactElement;
+    className?: string;
+    icon?: React.ReactNode;
+    disableIcon?: boolean;
+}
+export declare function Link({ component, icon, disableIcon }: LinkProps): React.ReactElement;
+export {};

package/dist/components/link/Link.js

@@ -0,0 +1,21 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import styles from './Link.module.css';
+import { ArrowRight } from 'lucide-react';
+
+function Link({ component, icon, disableIcon }) {
+  const originalProps = component.props;
+  return React.cloneElement(
+    component,
+    {
+      ...originalProps,
+      className: styles.link
+    },
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: styles.content, children: originalProps.children }),
+      icon || !disableIcon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon != null ? icon : /* @__PURE__ */ jsx(ArrowRight, {}) })
+    ] })
+  );
+}
+
+export { Link };

package/dist/components/link/Link.module.css

@@ -0,0 +1,32 @@
+.link {
+  display: inline-flex;
+  gap: var(--spacing-xs);
+  position: relative;
+  text-decoration: none;
+  font-weight: bold;
+  color: inherit;
+  font-size: inherit;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  color: var(--color-brand);
+}
+
+.link svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
+.link::after {
+  content: '';
+  display: block;
+  height: var(--border-width-medium);
+  background-color: var(--color-brand);
+  width: 100%;
+  align-self: flex-end;
+  position: absolute;
+  left: 0;
+  bottom: calc(var(--spacing-xxs) * -1);
+}

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

@@ -1,18 +1,3 @@
-/* =========================
-   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;
@@ -20,35 +5,29 @@
   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));
+  /* choose your density */
+  padding-block: calc(var(--spacing-xs) + var(--density-comfortable));
   padding-inline: var(--spacing-md);
 
   background: transparent;
@@ -56,7 +35,7 @@
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
-  color: var(--color-text);
+  color: var(--color-fg-default);
   cursor: pointer;
 
   border-radius: var(--border-radius-sm);
@@ -65,31 +44,30 @@
     background-color var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard);
 }
+
 .interactive:hover {
-  background-color: var(--color-surface-hover);
+  background-color: var(--color-bg-hover-subtle);
 }
+
 .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);
+  color: var(--color-fg-default);
 }
 
-/* Disabled */
 .interactive[aria-disabled='true'],
 .interactive:disabled {
-  color: var(--color-disabled-text);
+  color: var(--color-disabled-fg);
   cursor: not-allowed;
   pointer-events: none;
 }
 
-/* Icons inside items */
 .interactive svg {
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
 }

package/dist/components/meta-bar/MetaBar.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles = require('./MetaBar.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function MetaBar({ items, separator = "\u2022" }) {
+  const visibleItems = items.filter(
+    (item) => item.value !== null && item.value !== void 0 && item.value !== ""
+  );
+  if (visibleItems.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.meta, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      item.label && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        item.label,
+        ": "
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.value })
+    ] }),
+    index < visibleItems.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: styles__default.default.dot, children: separator })
+  ] }, index)) });
+}
+
+exports.MetaBar = MetaBar;

package/dist/components/meta-bar/MetaBar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface MetaItem {
+    label?: React.ReactNode;
+    value: React.ReactNode;
+}
+interface MetaBarProps {
+    items: MetaItem[];
+    separator?: React.ReactNode;
+}
+export declare function MetaBar({ items, separator }: MetaBarProps): JSX.Element | null;
+export {};

package/dist/components/meta-bar/MetaBar.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import styles from './MetaBar.module.css';
+
+function MetaBar({ items, separator = "\u2022" }) {
+  const visibleItems = items.filter(
+    (item) => item.value !== null && item.value !== void 0 && item.value !== ""
+  );
+  if (visibleItems.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: styles.meta, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      item.label && /* @__PURE__ */ jsxs("span", { children: [
+        item.label,
+        ": "
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: item.value })
+    ] }),
+    index < visibleItems.length - 1 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles.dot, children: separator })
+  ] }, index)) });
+}
+
+export { MetaBar };

package/dist/components/meta-bar/MetaBar.module.css

@@ -0,0 +1,12 @@
+.meta {
+  color: var(--color-fg-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+
+.dot {
+  opacity: 0.6;
+}