feat: add ShortcutTag component with customizable props and stories

src/index.tsx

@@ -156,6 +156,9 @@ export * from "./stories/slider";
 // --- Stepper ---
 export * from "./stories/stepper";
 
+// --- Shortcut Tag ---
+export * from "./stories/shortcut-tag";
+
 // --- Table ---
 export {
   Caption,
@@ -168,7 +171,7 @@ export {
   Row as TableRow,
 } from "./stories/table";
 
-export { GroupRow, GroupedTable } from "./stories/table/grouped";
+export { GroupedTable, GroupRow } from "./stories/table/grouped";
 
 // --- Tabs ---
 export * from "./stories/tabs";

src/stories/shortcut-tag/index.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ShortcutTag } from ".";
+
+const meta = {
+  title: "Atoms/ShortcutTag",
+  component: ShortcutTag,
+
+  parameters: {
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof ShortcutTag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: "Space",
+  },
+};
+
+export const Ctrl: Story = {
+  args: {
+    ctrl: true,
+  },
+};

src/stories/shortcut-tag/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import styled from "styled-components";
+import { isMac } from "../theme/utils";
+import { SM } from "../typography/typescale";
+import { ReactComponent as CmdIcon } from "./assets/cmd.svg";
+
+const ShortcutTagWrapper = styled.div`
+  padding: 10px;
+  border-radius: 4px;
+  background-color: ${({ theme }) => theme.palette.blue[100]};
+  color: ${({ theme }) => theme.palette.grey[700]};
+  cursor: default;
+  user-select: none;
+  ${SM} {
+    display: flex;
+  }
+`;
+
+type ShortcutContent =
+  | { text: React.ReactNode; ctrl?: never }
+  | { ctrl: true; text?: never };
+
+export type ShortcutTagProps = ShortcutContent &
+  React.HTMLAttributes<HTMLDivElement>;
+
+const ShortcutTag = (props: ShortcutTagProps) => {
+  return (
+    <ShortcutTagWrapper {...props}>
+      <SM isBold>
+        {props.ctrl ? !isMac() ? <CmdIcon width={16} /> : "Ctrl" : null}
+        {props.text ? props.text : null}
+      </SM>
+    </ShortcutTagWrapper>
+  );
+};
+
+export { ShortcutTag };