Kbd

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Kbd } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function Basic() {8  return (9    <div {...stylex.props(s.row4)}>10      <Kbd>11        <Kbd.Abbr keyValue="command" />12        <Kbd.Content>K</Kbd.Content>13      </Kbd>14      <Kbd>15        <Kbd.Abbr keyValue="shift" />16        <Kbd.Content>P</Kbd.Content>17      </Kbd>18      <Kbd>19        <Kbd.Abbr keyValue="ctrl" />20        <Kbd.Content>C</Kbd.Content>21      </Kbd>22      <Kbd>23        <Kbd.Abbr keyValue="option" />24        <Kbd.Content>D</Kbd.Content>25      </Kbd>26    </div>27  );28}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Kbd } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function Variants() {8  return (9    <div {...stylex.props(s.column4)}>10      {[11        { label: "Copy:", key: "C" },12        { label: "Paste:", key: "V" },13        { label: "Cut:", key: "X" },14      ].map((action) => (15        <div key={action.key} {...stylex.props(s.row2)}>16          <span>{action.label}</span>17          <Kbd>18            <Kbd.Abbr keyValue="command" />19            <Kbd.Content>{action.key}</Kbd.Content>20          </Kbd>21          <Kbd variant="light">22            <Kbd.Abbr keyValue="command" />23            <Kbd.Content>{action.key}</Kbd.Content>24          </Kbd>25        </div>26      ))}27    </div>28  );29}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Kbd } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function NavigationKeys() {8  return (9    <div {...stylex.props(s.column4)}>10      <div {...stylex.props(s.row2)}>11        <span {...stylex.props(s.textSm, s.muted)}>Arrow Keys:</span>12        <div {...stylex.props(s.row2)}>13          <Kbd>14            <Kbd.Abbr keyValue="up" />15          </Kbd>16          <Kbd>17            <Kbd.Abbr keyValue="down" />18          </Kbd>19          <Kbd>20            <Kbd.Abbr keyValue="left" />21          </Kbd>22          <Kbd>23            <Kbd.Abbr keyValue="right" />24          </Kbd>25        </div>26      </div>27      <div {...stylex.props(s.row2)}>28        <span {...stylex.props(s.textSm, s.muted)}>Page Navigation:</span>29        <div {...stylex.props(s.row2)}>30          <Kbd>31            <Kbd.Abbr keyValue="pageup" />32          </Kbd>33          <Kbd>34            <Kbd.Abbr keyValue="pagedown" />35          </Kbd>36          <Kbd>37            <Kbd.Abbr keyValue="home" />38          </Kbd>39          <Kbd>40            <Kbd.Abbr keyValue="end" />41          </Kbd>42        </div>43      </div>44    </div>45  );46}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Kbd } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function InlineUsage() {8  return (9    <div>10      <p {...stylex.props(s.textSm)}>11        Press{" "}12        <Kbd>13          <Kbd.Content>Esc</Kbd.Content>14        </Kbd>{" "}15        to close the dialog.16      </p>17      <p {...stylex.props(s.textSm, s.space4)}>18        Use{" "}19        <Kbd>20          <Kbd.Abbr keyValue="command" />21          <Kbd.Content>K</Kbd.Content>22        </Kbd>{" "}23        to open the command palette.24      </p>25      <p {...stylex.props(s.textSm, s.space4)}>26        Navigate with{" "}27        <Kbd>28          <Kbd.Abbr keyValue="up" />29        </Kbd>{" "}30        and{" "}31        <Kbd>32          <Kbd.Abbr keyValue="down" />33        </Kbd>{" "}34        arrow keys.35      </p>36      <p {...stylex.props(s.textSm, s.space4)}>37        Save your work with{" "}38        <Kbd>39          <Kbd.Abbr keyValue="command" />40          <Kbd.Content>S</Kbd.Content>41        </Kbd>{" "}42        regularly.43      </p>44    </div>45  );46}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Kbd } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function InstructionalText() {8  return (9    <div>10      <div {...stylex.props(s.kbdPanel)}>11        <h4 {...stylex.props(s.kbdHeading)}>Quick Actions</h4>12        <ul {...stylex.props(s.textSm)}>13          <li>14            • Open search:{" "}15            <Kbd>16              <Kbd.Abbr keyValue="command" />17              <Kbd.Content>K</Kbd.Content>18            </Kbd>19          </li>20          <li {...stylex.props(s.space2)}>21            • Toggle sidebar:{" "}22            <Kbd>23              <Kbd.Abbr keyValue="command" />24              <Kbd.Content>B</Kbd.Content>25            </Kbd>26          </li>27          <li {...stylex.props(s.space2)}>28            • New file:{" "}29            <Kbd>30              <Kbd.Abbr keyValue="command" />31              <Kbd.Content>N</Kbd.Content>32            </Kbd>33          </li>34          <li {...stylex.props(s.space2)}>35            • Quick save:{" "}36            <Kbd>37              <Kbd.Abbr keyValue="command" />38              <Kbd.Content>S</Kbd.Content>39            </Kbd>40          </li>41        </ul>42      </div>43    </div>44  );45}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Kbd } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function SpecialKeys() {8  return (9    <div>10      <p {...stylex.props(s.textSm)}>11        Press{" "}12        <Kbd>13          <Kbd.Abbr keyValue="enter" />14        </Kbd>{" "}15        to confirm or{" "}16        <Kbd>17          <Kbd.Abbr keyValue="escape" />18        </Kbd>{" "}19        to cancel.20      </p>21      <p {...stylex.props(s.textSm, s.space3)}>22        Use{" "}23        <Kbd>24          <Kbd.Abbr keyValue="tab" />25        </Kbd>{" "}26        to navigate between form fields and{" "}27        <Kbd>28          <Kbd.Abbr keyValue="shift" />29          <Kbd.Abbr keyValue="tab" />30        </Kbd>{" "}31        to go back.32      </p>33      <p {...stylex.props(s.textSm, s.space3)}>34        Hold{" "}35        <Kbd>36          <Kbd.Abbr keyValue="space" />37        </Kbd>{" "}38        to temporarily enable panning mode.39      </p>40    </div>41  );42}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Kbd } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function CustomStyles() {8  return (9    <div {...stylex.props(s.row3)}>10      <Kbd xstyle={s.kbdAccent}>11        <Kbd.Abbr keyValue="command" />12        <Kbd.Content>K</Kbd.Content>13      </Kbd>14      <Kbd xstyle={s.kbdDefault}>15        <Kbd.Abbr keyValue="shift" />16        <Kbd.Content>P</Kbd.Content>17      </Kbd>18    </div>19  );20}