@keybindy/react 1.1.7 → 1.1.9

package/dist/ShortcutLabel.js

@@ -1,38 +1,57 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 
 /**
- * `<ShortcutLabel />` is a utility React component that visually renders a keyboard shortcut label.
- *
- * It accepts an array of keys (e.g. `["Ctrl", "S"]`) and renders a styled label using platform-aware
- * symbols (⌘ for Mac, Ctrl for others). Users can also provide a custom render function to override
- * the default display logic for advanced layouts or custom themes.
- *
- * @component
+ * ... (rest of the description) ...
  *
  * @example
  * // Default usage
  * <ShortcutLabel keys={['ctrl', 's']} />
  *
  * @example
- * // With custom renderKey
+ * // With multiple bindings
+ * <ShortcutLabel keys={[['ctrl', 's'], ['meta', 's']]} />
+ *
+ * @example
+ * // With custom render prop
+ * <ShortcutLabel
+ *   keys={['ctrl', 'shift', 'a']}
+ *   render={(keys) => {
+ *     // 'keys' here will be ['ctrl', 'shift', 'a']
+ *     return keys.map((key) => (
+ *       <span key={key} style={{ color: '#00eaff' }}>
+ *         {key.toUpperCase()}
+ *       </span>
+ *     ));
+ *   }}
+ * />
+ *
+ * @example
+ * // With custom render prop for multiple bindings
  * <ShortcutLabel
- *   keys={['ctrl', 'alt', 'delete']}
- *   renderKey={(key, i, all) => (
- *     <>
- *       <span style={{ color: '#00eaff' }}>{key.toUpperCase()}</span>
- *       {i < all.length - 1 && <span style={{ opacity: 0.5 }}> + </span>}
- *     </>
- *   )}
+ *   keys={[['ctrl', 's'], ['meta', 's']]}
+ *   render={(bindings) => {
+ *     // 'bindings' here will be [['ctrl', 's'], ['meta', 's']]
+ *     return bindings.map((binding, bindingIndex) => (
+ *       <React.Fragment key={bindingIndex}>
+ *         {binding.map((key, keyIndex) => (
+ *           <span key={keyIndex} style={{ fontWeight: 'bold' }}>
+ *             {key}
+ *           </span>
+ *         ))}
+ *         {bindingIndex < bindings.length - 1 && ' or '}
+ *       </React.Fragment>
+ *     ));
+ *   }}
  * />
  *
  * @param {ShortcutLabelProps} props - Props for the ShortcutLabel component
- * @param {string[]} props.keys - The list of keys to display.
- * @param {Function} [props.renderKey] - Optional custom render function for full control over how each key appears.
+ * @param {string[] | string[][]} props.keys - The list of keys to display.
+ * @param {Function} [props.render] - Optional custom render function for full control over how your keys are rendered.
  *
  * @returns {JSX.Element} Rendered shortcut label
  */
-const ShortcutLabel = ({ keys, renderKey, style, ...props }) => {
+const ShortcutLabel = ({ keys, render, style, ...props }) => {
     const isMac = typeof navigator !== 'undefined' && /Mac/.test(navigator.userAgent);
     const defaultRenderKey = (key) => {
         switch (key.toLowerCase()) {
@@ -50,11 +69,13 @@ const ShortcutLabel = ({ keys, renderKey, style, ...props }) => {
                 return key.toUpperCase();
         }
     };
-    const rendered = renderKey
-        ? keys.map((key, i) => (jsx(React.Fragment, { children: renderKey(key, i, keys) }, i)))
-        : defaultRenderKey
-            ? [keys.map(key => defaultRenderKey(key)).join(' + ')]
-            : [];
+    const renderBinding = (binding) => {
+        if (render) {
+            return render(binding);
+        }
+        return binding.map(key => defaultRenderKey(key)).join(' + ');
+    };
+    const isNestedArray = Array.isArray(keys[0]);
     return (jsx("kbd", { style: {
             fontFamily: 'monospace',
             padding: '2.5px 5px',
@@ -63,7 +84,11 @@ const ShortcutLabel = ({ keys, renderKey, style, ...props }) => {
             borderRadius: '4px',
             userSelect: 'none',
             ...style,
-        }, ...props, children: rendered }));
+        }, ...props, children: isNestedArray
+            ? render
+                ? renderBinding(keys)
+                : keys.map((binding, index) => (jsxs(React.Fragment, { children: [renderBinding(binding), index < keys.length - 1 && ' / '] }, index)))
+            : renderBinding(keys) }));
 };
 
 export { ShortcutLabel };

package/dist/index.d.ts

@@ -56,60 +56,70 @@ type KeybindyProps = {
 };
 declare const Keybindy: React.NamedExoticComponent<KeybindyProps>;
 
+type AllowedKeys = Omit<Keys, 'Ctrl (Left)' | 'Ctrl (Right)' | 'Shift (Left)' | 'Shift (Right)' | 'Alt (Left)' | 'Alt (Right)' | 'Meta (Left)' | 'Meta (Right)'>;
 interface ShortcutLabelProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
     /**
-     * Array of keys to display
+     * Array of keys to display. Can be a single binding `['Ctrl', 'S']` or multiple bindings `[['Ctrl', 'S'], ['Cmd', 'S']]`.
      */
-    keys: Omit<Keys, 'Ctrl (Left)' | 'Ctrl (Right)' | 'Shift (Left)' | 'Shift (Right)' | 'Alt (Left)' | 'Alt (Right)' | 'Meta (Left)' | 'Meta (Right)'>[];
+    keys: AllowedKeys[] | AllowedKeys[][];
     /**
-     * Custom render function for each key
+     * Custom render function for full control over how your keys are rendered.
+     * This function receives the entire `keys` array (either `string[]` or `string[][]`)
+     * and should return the ReactNode to be displayed.
      */
-    renderKey?: (
-    /**
-     * The key to render
-     */
-    key: string, 
-    /**
-     * The index of the key in the array
-     */
-    index: number, 
-    /**
-     * All keys in the array
-     */
-    allKeys: string[]) => React.ReactNode;
+    render?: (keys: AllowedKeys[] | AllowedKeys[][]) => React.ReactNode;
 }
 /**
- * `<ShortcutLabel />` is a utility React component that visually renders a keyboard shortcut label.
- *
- * It accepts an array of keys (e.g. `["Ctrl", "S"]`) and renders a styled label using platform-aware
- * symbols (⌘ for Mac, Ctrl for others). Users can also provide a custom render function to override
- * the default display logic for advanced layouts or custom themes.
- *
- * @component
+ * ... (rest of the description) ...
  *
  * @example
  * // Default usage
  * <ShortcutLabel keys={['ctrl', 's']} />
  *
  * @example
- * // With custom renderKey
+ * // With multiple bindings
+ * <ShortcutLabel keys={[['ctrl', 's'], ['meta', 's']]} />
+ *
+ * @example
+ * // With custom render prop
+ * <ShortcutLabel
+ *   keys={['ctrl', 'shift', 'a']}
+ *   render={(keys) => {
+ *     // 'keys' here will be ['ctrl', 'shift', 'a']
+ *     return keys.map((key) => (
+ *       <span key={key} style={{ color: '#00eaff' }}>
+ *         {key.toUpperCase()}
+ *       </span>
+ *     ));
+ *   }}
+ * />
+ *
+ * @example
+ * // With custom render prop for multiple bindings
  * <ShortcutLabel
- *   keys={['ctrl', 'alt', 'delete']}
- *   renderKey={(key, i, all) => (
- *     <>
- *       <span style={{ color: '#00eaff' }}>{key.toUpperCase()}</span>
- *       {i < all.length - 1 && <span style={{ opacity: 0.5 }}> + </span>}
- *     </>
- *   )}
+ *   keys={[['ctrl', 's'], ['meta', 's']]}
+ *   render={(bindings) => {
+ *     // 'bindings' here will be [['ctrl', 's'], ['meta', 's']]
+ *     return bindings.map((binding, bindingIndex) => (
+ *       <React.Fragment key={bindingIndex}>
+ *         {binding.map((key, keyIndex) => (
+ *           <span key={keyIndex} style={{ fontWeight: 'bold' }}>
+ *             {key}
+ *           </span>
+ *         ))}
+ *         {bindingIndex < bindings.length - 1 && ' or '}
+ *       </React.Fragment>
+ *     ));
+ *   }}
  * />
  *
  * @param {ShortcutLabelProps} props - Props for the ShortcutLabel component
- * @param {string[]} props.keys - The list of keys to display.
- * @param {Function} [props.renderKey] - Optional custom render function for full control over how each key appears.
+ * @param {string[] | string[][]} props.keys - The list of keys to display.
+ * @param {Function} [props.render] - Optional custom render function for full control over how your keys are rendered.
  *
  * @returns {JSX.Element} Rendered shortcut label
  */
-declare const ShortcutLabel: ({ keys, renderKey, style, ...props }: ShortcutLabelProps) => react_jsx_runtime.JSX.Element;
+declare const ShortcutLabel: ({ keys, render, style, ...props }: ShortcutLabelProps) => react_jsx_runtime.JSX.Element;
 
 type UseKeybindyReturn = {
     register: (keys: Keys[] | Keys[][], handler: ShortcutHandler, options?: ShortcutOptions) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keybindy/react",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "Keybindy for React: Simple, scoped keyboard shortcuts that require little setup. designed to smoothly blend in with your React applications, allowing for robust keybinding functionality without the overhead.",
   "author": {
     "name": "PRASSamin",