feat: add component keyboard-key

Author: Ohh-889

packages/ui/package.json

@@ -11,9 +11,7 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "build": "pnpm run pgk:prod && pnpm run build:components && pnpm run registry",
     "build:components": "tsdown",

packages/ui/src/components/keyboard-key/KeyboardKey.tsx

@@ -1,22 +1,20 @@
 'use client';
 
-import { forwardRef } from 'react';
-
 import { cn } from '@/lib';
 
 import { keyboardKeyVariants } from './keyboard-key-variants';
 import type { KeyboardKeyProps } from './types';
 import { useKeyboardKey } from './use-keyboard-key';
 
-export const KeyboardKey = forwardRef<HTMLDivElement, KeyboardKeyProps>((props, ref) => {
+export const KeyboardKey = (props: KeyboardKeyProps) => {
   const { children, className, size, value, variant, ...rest } = props;
 
-  const { getKeyboardKey } = useKeyboardKey();
-
   const { item } = keyboardKeyVariants({ size, variant });
 
   const mergedCls = cn(item(), className);
 
+  const { getKeyboardKey } = useKeyboardKey();
+
   const getValues = () => {
     if (!value) {
       return [];
@@ -34,14 +32,14 @@ export const KeyboardKey = forwardRef<HTMLDivElement, KeyboardKeyProps>((props,
   return (
     <div
       className={mergedCls}
-      ref={ref}
+      data-size={size}
+      data-slot="keyboard-key"
+      data-variant={variant}
       {...rest}
     >
       {children ? children(values) : values.map(v => <span key={v}>{v}</span>)}
     </div>
   );
-});
-
-KeyboardKey.displayName = 'KeyboardKey';
+};
 
 export default KeyboardKey;

packages/ui/src/components/keyboard-key/KeyboardKeyGroup.tsx

@@ -0,0 +1,42 @@
+import { Fragment } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import KeyboardKey from './KeyboardKey';
+import { keyboardKeyVariants } from './keyboard-key-variants';
+import type { KeyboardKeyGroupProps } from './types';
+
+const KeyboardKeyGroup = (props: KeyboardKeyGroupProps) => {
+  const { className, classNames, separator = '+', size, values, variant, ...rest } = props;
+
+  const { group, separator: separatorCls } = keyboardKeyVariants({ size, variant });
+
+  const mergedCls = cn(group(), className || classNames?.group);
+
+  const separatorMergedCls = cn(separatorCls(), classNames?.separator);
+
+  return (
+    <div
+      {...rest}
+      className={mergedCls}
+      data-size={size}
+      data-slot="keyboard-key-group"
+      data-variant={variant}
+    >
+      {values?.map((value, index) => (
+        <Fragment key={String(index)}>
+          <KeyboardKey
+            className={classNames?.item}
+            size={size}
+            value={value}
+            variant={variant}
+          />
+
+          {separator && index !== values.length - 1 && <span className={separatorMergedCls}>{separator}</span>}
+        </Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default KeyboardKeyGroup;

packages/ui/src/components/keyboard-key/index.ts

@@ -1,4 +1,5 @@
 export { default as KeyboardKey } from './KeyboardKey';
+export { default as KeyboardKeyGroup } from './KeyboardKeyGroup';
 
 export * from './types';
 

packages/ui/src/components/keyboard-key/keyboard-key-variants.ts

@@ -8,7 +8,7 @@ export const keyboardKeyVariants = tv({
   },
   slots: {
     group: 'flex items-center',
-    item: `inline-flex items-center justify-center w-fit font-medium border border-border  rounded-sm`,
+    item: `inline-flex items-center justify-center w-fit font-medium rounded-sm`,
     separator: 'font-medium text-muted-foreground'
   },
   variants: {
@@ -40,10 +40,10 @@ export const keyboardKeyVariants = tv({
     },
     variant: {
       ghost: {
-        item: ' border-border bg-muted text-muted-foreground'
+        item: 'border-border bg-muted text-muted-foreground border'
       },
       outline: {
-        item: 'border-border bg-background text-muted-foreground'
+        item: 'border-border bg-background text-muted-foreground border'
       },
       solid: {
         item: 'bg-muted-foreground text-muted'

packages/ui/src/components/keyboard-key/types.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 import type { BaseComponentProps, ClassValue } from '@/types/other';
 
 import type { KeyboardKeySlots, KeyboardKeyVariant } from './keyboard-key-variants';
@@ -40,13 +42,14 @@ export interface KeyboardKeyProps<T extends KeyboardKeyValue | KeyboardKeyValue[
   variant?: KeyboardKeyVariant;
 }
 
-export type KeyboardKeyUi = Partial<Record<KeyboardKeySlots, ClassValue>>;
+export type KeyboardKeyClassNames = Partial<Record<KeyboardKeySlots, ClassValue>>;
 
 export interface KeyboardKeyGroupProps<T extends KeyboardKeyValue | KeyboardKeyValue[] = KeyboardKeyValue>
-  extends Omit<KeyboardKeyProps, 'value'> {
-  separator?: string;
-  ui?: KeyboardKeyUi;
-  values?: T[];
+  extends Omit<KeyboardKeyProps, 'children' | 'value'> {
+  classNames?: KeyboardKeyClassNames;
+  render?: (value: T) => React.ReactNode;
+  separator?: ReactNode;
+  values: T[];
 }
 
 export type { KeyboardKeyVariant };

packages/ui/src/components/keyboard-key/use-keyboard-key.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useEffect, useState } from 'react';
 
 export type BuiltinKeyboardKey =
   | 'alt'
@@ -35,7 +35,6 @@ type SpecificKeyboardKeyMap = {
   meta: string;
 };
 
-/* ---------- 静态映射 ---------- */
 export const builtinKeyboardKeyMap: Record<BuiltinKeyboardKey, string> = {
   alt: '',
   arrowdown: '↓',
@@ -64,29 +63,26 @@ export const builtinKeyboardKeyMap: Record<BuiltinKeyboardKey, string> = {
 /*                               Hook                                 */
 /* ------------------------------------------------------------------ */
 export function useKeyboardKey() {
-  const isMacOS = useMemo(() => /Macintosh;/.test(typeof navigator !== 'undefined' ? navigator.userAgent : ''), []);
+  const [isMacOS, setIsMacOS] = useState(false);
 
-  const specificMapRef = useRef<SpecificKeyboardKeyMap>({
-    alt: ' ',
-    ctrl: ' ',
-    meta: ' '
-  });
-
-  useEffect(() => {
-    const m = specificMapRef.current;
-    m.meta = isMacOS ? builtinKeyboardKeyMap.command : builtinKeyboardKeyMap.win;
-    m.alt = isMacOS ? builtinKeyboardKeyMap.option : 'alt';
-    m.ctrl = isMacOS ? '⌃' : 'ctrl';
-  }, [isMacOS]);
+  const specificMapRef: SpecificKeyboardKeyMap = {
+    alt: isMacOS ? builtinKeyboardKeyMap.option : 'alt',
+    ctrl: isMacOS ? '⌃' : 'ctrl',
+    meta: isMacOS ? builtinKeyboardKeyMap.command : builtinKeyboardKeyMap.win
+  };
 
-  const getKeyboardKey = useCallback((value?: KeyboardKeyProps['value']) => {
+  const getKeyboardKey = (value?: KeyboardKeyProps['value']) => {
     if (!value) return '';
 
     if (value === 'meta' || value === 'alt' || value === 'ctrl') {
-      return specificMapRef.current[value as keyof SpecificKeyboardKeyMap];
+      return specificMapRef[value as keyof SpecificKeyboardKeyMap];
     }
 
-    return (builtinKeyboardKeyMap as any)[value] || value.toUpperCase();
+    return builtinKeyboardKeyMap[value as BuiltinKeyboardKey] || value.toUpperCase();
+  };
+
+  useEffect(() => {
+    setIsMacOS(/Macintosh;/.test(navigator.userAgent));
   }, []);
 
   return {