@efolusi/meridian 1.5.0

package/files/FileDrop.d.ts

@@ -0,0 +1,15 @@
+export interface FileDropProps {
+  /** Receives the dropped/picked File[] */
+  onFiles?: (files: File[]) => void;
+  /** input accept string, e.g. "image/*,.pdf" */
+  accept?: string;
+  /** @default true */
+  multiple?: boolean;
+  /** Replaces "Drop files here or browse" */
+  title?: React.ReactNode;
+  /** Muted line, e.g. "PNG, MP4, PDF — up to 2 GB" */
+  hint?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function FileDrop(props: FileDropProps): React.JSX.Element;

package/files/FileDrop.js

@@ -0,0 +1,75 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-filedrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:32px 24px;border:1px dashed var(--sand-300);border-radius:var(--radius-md);background:var(--surface-card);cursor:pointer;text-align:center;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
+.ef-filedrop:hover,.ef-filedrop--over{border-color:var(--accent);background:var(--surface-subtle)}
+.ef-filedrop:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-filedrop__icon{color:var(--sand-400)}
+.ef-filedrop--over .ef-filedrop__icon,.ef-filedrop:hover .ef-filedrop__icon{color:var(--text-primary)}
+.ef-filedrop__title{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary)}
+.ef-filedrop__title u{text-decoration-color:var(--caramel-500);text-underline-offset:3px}
+.ef-filedrop__hint{font-size:var(--text-xs);color:var(--text-muted)}
+`;
+export function FileDrop({
+  onFiles,
+  accept,
+  multiple = true,
+  title,
+  hint,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-filedrop', CSS);
+  const [over, setOver] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const handle = files => {
+    if (onFiles && files && files.length) onFiles([...files]);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    role: "button",
+    tabIndex: 0,
+    className: `ef-filedrop${over ? ' ef-filedrop--over' : ''}${className ? ' ' + className : ''}`,
+    style: style,
+    onClick: () => inputRef.current && inputRef.current.click(),
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        inputRef.current.click();
+      }
+    },
+    onDragOver: e => {
+      e.preventDefault();
+      setOver(true);
+    },
+    onDragLeave: () => setOver(false),
+    onDrop: e => {
+      e.preventDefault();
+      setOver(false);
+      handle(e.dataTransfer.files);
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ef-filedrop__icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "upload",
+    size: 22
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "ef-filedrop__title"
+  }, title || /*#__PURE__*/React.createElement("span", null, "Drop files here or ", /*#__PURE__*/React.createElement("u", null, "browse"))), hint ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-filedrop__hint"
+  }, hint) : null, /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    type: "file",
+    accept: accept,
+    multiple: multiple,
+    style: {
+      display: 'none'
+    },
+    onChange: e => {
+      handle(e.target.files);
+      e.target.value = '';
+    }
+  }));
+}

package/files/FileTile.d.ts

@@ -0,0 +1,19 @@
+export interface FileTileProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string;
+  /** e.g. "4.2 MB" */
+  size?: string;
+  /** Icon family; inferred from extension when omitted */
+  kind?: 'image' | 'video' | 'audio' | 'code' | 'archive' | 'doc';
+  /** Meta text after size, e.g. "Converted" */
+  status?: string;
+  /** 0–100 shows an upload bar instead of meta */
+  progress?: number;
+  /** Red meta line */
+  error?: string;
+  onRemove?: () => void;
+  /** Extra right-side controls */
+  actions?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function FileTile(props: FileTileProps): React.JSX.Element;

package/files/FileTile.js

@@ -0,0 +1,96 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { IconButton } from "../forms/IconButton.js";
+import { Progress } from "../feedback/Progress.js";
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-filetile{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card)}
+.ef-filetile__icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--sand-700)}
+.ef-filetile__name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ef-filetile__meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:1px}
+.ef-filetile__meta--err{color:var(--danger-600)}
+`;
+const KIND_ICON = {
+  image: 'image',
+  video: 'video',
+  audio: 'music',
+  code: 'code',
+  archive: 'package',
+  doc: 'file-text'
+};
+const EXT_KIND = {
+  png: 'image',
+  jpg: 'image',
+  jpeg: 'image',
+  gif: 'image',
+  svg: 'image',
+  webp: 'image',
+  mp4: 'video',
+  mov: 'video',
+  webm: 'video',
+  mp3: 'audio',
+  wav: 'audio',
+  flac: 'audio',
+  js: 'code',
+  ts: 'code',
+  py: 'code',
+  json: 'code',
+  zip: 'archive',
+  tar: 'archive',
+  gz: 'archive',
+  pdf: 'doc',
+  doc: 'doc',
+  docx: 'doc',
+  md: 'doc',
+  txt: 'doc',
+  csv: 'doc'
+};
+export function FileTile({
+  name,
+  size,
+  kind,
+  status,
+  progress,
+  error,
+  onRemove,
+  actions,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-filetile', CSS);
+  const ext = (name || '').split('.').pop().toLowerCase();
+  const icon = KIND_ICON[kind || EXT_KIND[ext]] || 'file';
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-filetile${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ef-filetile__icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 17
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-filetile__name"
+  }, name), error ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-filetile__meta ef-filetile__meta--err"
+  }, error) : progress != null ? /*#__PURE__*/React.createElement(Progress, {
+    value: progress,
+    style: {
+      marginTop: 5,
+      maxWidth: 220
+    }
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "ef-filetile__meta"
+  }, [size, status].filter(Boolean).join(' · '))), actions, onRemove ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: "x",
+    label: "Remove",
+    size: "sm",
+    onClick: onRemove
+  }) : null);
+}

package/files/FileTypeIcon.d.ts

@@ -0,0 +1,11 @@
+export interface FileTypeIconProps {
+  /** Extension: pdf, csv, png, mp4, zip, json… @default 'txt' */
+  ext?: string;
+  /** Px @default 40 */
+  size?: number;
+  /** Colored extension chip @default true */
+  showExt?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function FileTypeIcon(props: FileTypeIconProps): React.JSX.Element;

package/files/FileTypeIcon.js

@@ -0,0 +1,121 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-filetype{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:6px;color:var(--text-secondary)}
+.ef-filetype__ext{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.04em;padding:1px 4px;border-radius:3px;color:#fff;text-transform:uppercase;line-height:1.3}
+`;
+const KIND = {
+  pdf: {
+    icon: 'file-text',
+    color: 'var(--danger-600)'
+  },
+  doc: {
+    icon: 'file-text',
+    color: 'var(--brand-700)'
+  },
+  docx: {
+    icon: 'file-text',
+    color: 'var(--brand-700)'
+  },
+  txt: {
+    icon: 'file-text',
+    color: 'var(--sand-600)'
+  },
+  md: {
+    icon: 'file-text',
+    color: 'var(--sand-600)'
+  },
+  csv: {
+    icon: 'table',
+    color: 'var(--success-600)'
+  },
+  xls: {
+    icon: 'table',
+    color: 'var(--success-600)'
+  },
+  xlsx: {
+    icon: 'table',
+    color: 'var(--success-600)'
+  },
+  png: {
+    icon: 'image',
+    color: 'var(--brand-500)'
+  },
+  jpg: {
+    icon: 'image',
+    color: 'var(--brand-500)'
+  },
+  svg: {
+    icon: 'image',
+    color: 'var(--brand-500)'
+  },
+  gif: {
+    icon: 'image',
+    color: 'var(--brand-500)'
+  },
+  mp4: {
+    icon: 'video',
+    color: 'var(--warning-600)'
+  },
+  mov: {
+    icon: 'video',
+    color: 'var(--warning-600)'
+  },
+  mp3: {
+    icon: 'mic',
+    color: 'var(--warning-600)'
+  },
+  wav: {
+    icon: 'mic',
+    color: 'var(--warning-600)'
+  },
+  zip: {
+    icon: 'archive',
+    color: 'var(--sand-600)'
+  },
+  json: {
+    icon: 'code',
+    color: 'var(--sand-800)'
+  },
+  js: {
+    icon: 'code',
+    color: 'var(--warning-600)'
+  },
+  ts: {
+    icon: 'code',
+    color: 'var(--brand-700)'
+  }
+};
+export function FileTypeIcon({
+  ext = 'txt',
+  size = 40,
+  showExt = true,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-filetype', CSS);
+  const k = KIND[ext.toLowerCase()] || {
+    icon: 'file',
+    color: 'var(--sand-500)'
+  };
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    className: `ef-filetype${className ? ' ' + className : ''}`,
+    style: {
+      width: size,
+      height: size,
+      ...style
+    },
+    title: '.' + ext
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: k.icon,
+    size: Math.round(size * 0.45)
+  }), showExt ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-filetype__ext",
+    style: {
+      background: k.color
+    }
+  }, ext) : null);
+}

package/finance/PaymentCard.d.ts

@@ -0,0 +1,17 @@
+export interface PaymentCardProps {
+  /** @default 'ADA OBI' */
+  name?: string;
+  /** Masked number @default '•••• •••• •••• 4242' */
+  number?: string;
+  /** @default '09/29' */
+  expiry?: string;
+  /** Top-left brand text @default 'Efolusi' */
+  network?: string;
+  /** @default 'espresso' */
+  variant?: 'espresso' | 'caramel' | 'paper';
+  /** Grayscale frozen state */
+  frozen?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function PaymentCard(props: PaymentCardProps): React.JSX.Element;

package/finance/PaymentCard.js

@@ -0,0 +1,109 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-paycard{position:relative;width:320px;aspect-ratio:1.586;border-radius:14px;padding:20px;display:flex;flex-direction:column;color:var(--brand-50);background:var(--brand-950);overflow:hidden;font-family:var(--font-sans)}
+.ef-paycard--caramel{background:var(--brand-700)}
+.ef-paycard--paper{background:var(--surface-card);color:var(--text-primary);border:1px solid var(--border-strong)}
+.ef-paycard__ring{position:absolute;border-radius:999px;border:1px solid currentColor;opacity:.1;pointer-events:none}
+.ef-paycard__num{font-family:var(--font-mono);font-size:16px;letter-spacing:.12em;margin-top:auto}
+.ef-paycard__row{display:flex;align-items:flex-end;gap:18px;margin-top:12px}
+.ef-paycard__lbl{font-size:8.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.55}
+.ef-paycard__val{font-size:12.5px;font-weight:600;margin-top:2px}
+.ef-paycard__chip{width:34px;height:25px;border-radius:5px;background:linear-gradient(135deg,var(--brand-200),var(--brand-500));opacity:.9}
+`;
+export function PaymentCard({
+  name = 'ADA OBI',
+  number = '•••• •••• •••• 4242',
+  expiry = '09/29',
+  network = 'Efolusi',
+  variant = 'espresso',
+  frozen,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-paycard', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-paycard${variant === 'caramel' ? ' ef-paycard--caramel' : variant === 'paper' ? ' ef-paycard--paper' : ''}${className ? ' ' + className : ''}`,
+    style: {
+      filter: frozen ? 'grayscale(.7) opacity(.75)' : undefined,
+      ...style
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ef-paycard__ring",
+    style: {
+      width: 220,
+      height: 220,
+      right: -70,
+      top: -70
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ef-paycard__ring",
+    style: {
+      width: 220,
+      height: 220,
+      right: -40,
+      top: -110
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--font-display)',
+      fontWeight: 680,
+      letterSpacing: '-0.02em',
+      fontSize: 16
+    }
+  }, network), frozen ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: 'auto',
+      fontSize: 10,
+      fontWeight: 600,
+      letterSpacing: '.08em',
+      textTransform: 'uppercase',
+      opacity: .7
+    }
+  }, "Frozen") : null), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 14
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-paycard__chip",
+    style: {
+      display: 'block'
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "ef-paycard__num"
+  }, number), /*#__PURE__*/React.createElement("div", {
+    className: "ef-paycard__row"
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-paycard__lbl",
+    style: {
+      display: 'block'
+    }
+  }, "Card holder"), /*#__PURE__*/React.createElement("span", {
+    className: "ef-paycard__val",
+    style: {
+      display: 'block'
+    }
+  }, name)), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+    className: "ef-paycard__lbl",
+    style: {
+      display: 'block'
+    }
+  }, "Expires"), /*#__PURE__*/React.createElement("span", {
+    className: "ef-paycard__val",
+    style: {
+      display: 'block'
+    }
+  }, expiry))));
+}

package/forms/Button.d.ts

@@ -0,0 +1,15 @@
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** @default 'primary' */
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'brand';
+  /** @default 'md' */
+  size?: 'sm' | 'md' | 'lg';
+  /** Lucide icon name rendered before the label */
+  iconLeft?: string;
+  /** Lucide icon name rendered after the label */
+  iconRight?: string;
+  fullWidth?: boolean;
+  /** Shows a spinner and disables the button */
+  loading?: boolean;
+  children?: React.ReactNode;
+}
+export declare function Button(props: ButtonProps): React.JSX.Element;

package/forms/Button.js

@@ -0,0 +1,82 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+const CSS = `
+.ef-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--radius-sm);font-family:var(--font-sans);font-weight:var(--weight-semibold);cursor:pointer;white-space:nowrap;user-select:none;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-med) var(--ease-spring)}
+.ef-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-btn:active:not(:disabled){transform:scale(.985)}
+.ef-btn:disabled{opacity:.45;cursor:not-allowed}
+.ef-btn--sm{height:var(--control-h-sm);padding:0 10px;font-size:var(--text-sm)}
+.ef-btn--md{height:var(--control-h-md);padding:0 14px;font-size:var(--text-md)}
+.ef-btn--lg{height:var(--control-h-lg);padding:0 20px;font-size:var(--text-lg)}
+.ef-btn--primary{background:var(--accent);color:var(--accent-contrast)}
+.ef-btn--primary:hover:not(:disabled){background:var(--accent-hover)}
+.ef-btn--primary:active:not(:disabled){background:var(--accent-active)}
+.ef-btn--secondary{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
+.ef-btn--secondary:hover:not(:disabled){background:var(--surface-sunken)}
+.ef-btn--ghost{background:transparent;color:var(--text-secondary)}
+.ef-btn--ghost:hover:not(:disabled){background:var(--surface-sunken);color:var(--text-primary)}
+.ef-btn--danger{background:var(--danger-600);color:var(--danger-contrast)}
+.ef-btn--danger:hover:not(:disabled){background:var(--danger-700)}
+.ef-btn--brand{background:var(--brand-700);color:#fff}
+.ef-btn--brand:hover:not(:disabled){background:var(--brand-800)}
+@keyframes ef-spin{to{transform:rotate(360deg)}}
+.ef-btn__spin{display:inline-flex;animation:ef-spin .7s linear infinite}
+`;
+export function injectEfCss(id, text) {
+  if (typeof document === 'undefined' || document.getElementById(id)) return;
+  const s = document.createElement('style');
+  s.id = id;
+  s.textContent = text;
+  document.head.appendChild(s);
+}
+/**
+ * Point several refs at one node.
+ *
+ * A component that forwards a ref usually needs the same node itself — to
+ * anchor an overlay, trap focus, or measure. Lowercase, so it stays an internal
+ * helper rather than part of the public namespace.
+ */
+export function mergeRefs(...refs) {
+  return node => {
+    for (const r of refs) {
+      if (!r) continue;
+      if (typeof r === 'function') r(node);else r.current = node;
+    }
+  };
+}
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  iconLeft,
+  iconRight,
+  fullWidth,
+  loading,
+  disabled,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-btn', CSS);
+  const isz = size === 'sm' ? 14 : size === 'lg' ? 18 : 16;
+  return /*#__PURE__*/React.createElement("button", _extends({
+    className: `ef-btn ef-btn--${variant} ef-btn--${size}${className ? ' ' + className : ''}`,
+    disabled: disabled || loading,
+    style: {
+      width: fullWidth ? '100%' : undefined,
+      ...style
+    }
+  }, rest), loading ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-btn__spin"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "loader-circle",
+    size: isz
+  })) : iconLeft ? /*#__PURE__*/React.createElement(Icon, {
+    name: iconLeft,
+    size: isz
+  }) : null, children, iconRight ? /*#__PURE__*/React.createElement(Icon, {
+    name: iconRight,
+    size: isz
+  }) : null);
+}

package/forms/ButtonGroup.d.ts

@@ -0,0 +1,5 @@
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Buttons / IconButtons rendered as one attached segment */
+  children: React.ReactNode;
+}
+export declare function ButtonGroup(props: ButtonGroupProps): React.JSX.Element;

package/forms/ButtonGroup.js

@@ -0,0 +1,22 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "./Button.js";
+const CSS = `
+.ef-btn-group{display:inline-flex;align-items:stretch;isolation:isolate}
+.ef-btn-group>*:not(:first-child){border-top-left-radius:0!important;border-bottom-left-radius:0!important;margin-left:-1px}
+.ef-btn-group>*:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important}
+.ef-btn-group>*:hover,.ef-btn-group>*:focus-visible{z-index:1}
+`;
+export function ButtonGroup({
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-btn-group', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "group",
+    className: `ef-btn-group${className ? ' ' + className : ''}`,
+    style: style
+  }, rest), children);
+}

package/forms/ButtonTile.d.ts

@@ -0,0 +1,21 @@
+export interface ButtonTileProps {
+  /** Lucide icon */
+  icon?: string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function ButtonTile(props: ButtonTileProps): React.JSX.Element;
+
+export interface ButtonTileGroupProps {
+  /** @default 3 */
+  columns?: number;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function ButtonTileGroup(props: ButtonTileGroupProps): React.JSX.Element;