@koide-labs/ui 0.0.0

package/src/components/command/index.tsx

@@ -0,0 +1,108 @@
+import clsx from "clsx";
+import { Command as CommandPrimitive } from "cmdk";
+import type { ComponentProps } from "react";
+
+import { textify } from "~/-utils";
+
+import { Dialog, type BaseDialogProps } from "../dialog";
+import { Icon } from "../icon";
+import type { IconName } from "../icon/icon-names";
+import { Separator } from "../separator";
+import { Text } from "../text";
+import { View } from "../view";
+
+import styles from "./command.module.css";
+
+// TODO put background in dialog base props
+export type CommandDialogProps = Omit<
+  BaseDialogProps,
+  "title" | "description" | "background"
+> & {
+  placeholder?: string;
+};
+
+export function CommandDialog({
+  placeholder,
+  children,
+  ...props
+}: CommandDialogProps) {
+  return (
+    <Dialog
+      width="sm"
+      background="default"
+      className={styles["command"]}
+      {...props}
+      closable
+    >
+      <CommandPrimitive>
+        <View className={styles["command__input-root"]}>
+          <View
+            interactive="fill-outline"
+            className={styles["command__input"]}
+            render={<CommandPrimitive.Input placeholder={placeholder} />}
+          />
+          <Icon name="search-line" className={styles["command__input-icon"]} />
+        </View>
+
+        <CommandPrimitive.List className={styles["command__list"]}>
+          <CommandPrimitive.Empty>
+            <View className={styles["command__empty"]}>
+              <Text color="dimmer">No results found.</Text>
+            </View>
+          </CommandPrimitive.Empty>
+
+          {children}
+        </CommandPrimitive.List>
+      </CommandPrimitive>
+    </Dialog>
+  );
+}
+
+export function CommandGroup({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      className={clsx(styles["command__group"], className)}
+      {...props}
+    />
+  );
+}
+
+export function CommandSeparator(
+  props: ComponentProps<typeof CommandPrimitive.Separator>,
+) {
+  return <Separator render={<CommandPrimitive.Separator {...props} />} />;
+}
+
+export function CommandItem({
+  shortcut,
+  icon,
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Item> & {
+  shortcut?: string;
+  icon?: IconName;
+}) {
+  return (
+    <View
+      interactive="list-item"
+      className={clsx(styles["command__item"], className)}
+      render={<CommandPrimitive.Item {...props} />}
+    >
+      {icon ? <Icon name={icon} /> : undefined}
+      {textify(children)}
+      {shortcut ? (
+        <Text
+          className={clsx(styles["command__shortcut"])}
+          color="dimmer"
+          size="sm"
+        >
+          {shortcut}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/src/components/context-menu/context-menu.module.css

@@ -0,0 +1,36 @@
+.context-menu {
+  gap: var(--space-4);
+  box-shadow: var(--shadow-1);
+  border: 1px solid var(--outline-dimmest);
+  border-radius: var(--border-radius-default);
+  padding: var(--space-4);
+  user-select: none;
+}
+
+.context-menu__item {
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-4);
+  outline: none;
+  border: none;
+  border-radius: var(--border-radius-6);
+  padding: var(--space-2) var(--space-4);
+  padding-left: var(--space-24);
+}
+
+.context-menu__item-icon {
+  position: absolute;
+  top: 50%;
+  left: var(--space-4);
+  transform: translateY(-50%);
+}
+
+.context-menu__item-shortcut {
+  margin-left: auto;
+  letter-spacing: 0.1em;
+}
+
+.context-menu__label {
+  padding: var(--space-2) var(--space-4);
+}

package/src/components/context-menu/context-menu.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { tokens } from "~/styles/tokens";
+
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuMore,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+} from ".";
+import { Text } from "../text";
+import { View } from "../view";
+
+const meta = {
+  title: "ContextMenu",
+  component: ContextMenu,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof ContextMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <>
+      <ContextMenu
+        style={{ width: "200px" }}
+        trigger={
+          <View
+            style={{
+              height: tokens.space128,
+              width: tokens.space256,
+              border: `1px dashed ${tokens.primaryDefault}`,
+              backgroundColor: tokens.primaryDimmest,
+              borderRadius: tokens.borderRadiusDefault,
+              color: tokens.primaryDefault,
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Text color="inherit">Right click here</Text>
+          </View>
+        }
+      >
+        <ContextMenuGroup>
+          <ContextMenuItem icon="arrow-left-line" disabled shortcut="⌘+[">
+            Back
+          </ContextMenuItem>
+          <ContextMenuItem icon="arrow-right-line" shortcut="⌘+]">
+            Forward
+          </ContextMenuItem>
+          <ContextMenuItem icon="refresh-line">Reload</ContextMenuItem>
+          <ContextMenuMore icon="tools-line" label="More Tools">
+            <ContextMenuGroup>
+              <ContextMenuItem icon="download-line">
+                Save Page As
+              </ContextMenuItem>
+              <ContextMenuItem icon="links-line">
+                Create Shortcut
+              </ContextMenuItem>
+              <ContextMenuItem icon="window-2-line">
+                Name Window
+              </ContextMenuItem>
+            </ContextMenuGroup>
+            <ContextMenuSeparator />
+            <ContextMenuItem icon="terminal-box-line">
+              Developer Tools
+            </ContextMenuItem>
+          </ContextMenuMore>
+        </ContextMenuGroup>
+
+        <ContextMenuSeparator />
+
+        <ContextMenuGroup>
+          <ContextMenuCheckboxItem value="bookmarks">
+            Show Bookmarks
+          </ContextMenuCheckboxItem>
+          <ContextMenuCheckboxItem value="show_full_urls">
+            Show Full URLs
+          </ContextMenuCheckboxItem>
+        </ContextMenuGroup>
+
+        <ContextMenuSeparator />
+
+        <ContextMenuGroup label="People">
+          <ContextMenuRadioGroup defaultValue="a">
+            <ContextMenuRadioItem value="a">Pedro Duarte</ContextMenuRadioItem>
+            <ContextMenuRadioItem value="b">Colm Tuite</ContextMenuRadioItem>
+          </ContextMenuRadioGroup>
+        </ContextMenuGroup>
+      </ContextMenu>
+    </>
+  ),
+};

package/src/components/context-menu/index.tsx

@@ -0,0 +1,242 @@
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
+import clsx from "clsx";
+import {
+  createContext,
+  useContext,
+  type CSSProperties,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+
+import { textify } from "~/-utils";
+import { tokens } from "~/styles/tokens";
+
+import { Icon } from "../icon";
+import type { IconName } from "../icon/icon-names";
+import { Separator, type SeparatorProps } from "../separator";
+import { Surface, type Background } from "../surface";
+import { Text } from "../text";
+import { View } from "../view";
+
+import transitionStyles from "../../styles/transitions.module.css";
+import styles from "./context-menu.module.css";
+
+export type ContextMenuProps = ContextMenuPrimitive.Root.Props & {
+  /** Specify trigger to open context menu. */
+  trigger?: ReactElement;
+
+  /** Surface background popup should use. Defaults to "root". Propogates to submenus. */
+  background?: Background;
+
+  /** Context menu content */
+  children?: ReactNode;
+
+  /** Apply className to ContextMenuPrimitive.Popup */
+  className?: string;
+
+  /** Apply styles to ContextMenuPrimitive.Popup  */
+  style?: CSSProperties;
+};
+
+const ContextMenuContext = createContext<Background>("root");
+
+export function ContextMenu({
+  trigger,
+  background = "root",
+  className,
+  children,
+  style,
+  ...props
+}: ContextMenuProps) {
+  return (
+    <ContextMenuContext.Provider value={background}>
+      <ContextMenuPrimitive.Root {...props}>
+        {trigger ? <ContextMenuPrimitive.Trigger render={trigger} /> : null}
+        <ContextMenuPrimitive.Portal>
+          <ContextMenuPrimitive.Positioner>
+            <ContextMenuPrimitive.Popup
+              render={<Surface background={background} />}
+              className={clsx(
+                styles["context-menu"],
+                transitionStyles["transition_fade-out"],
+                className,
+              )}
+              style={style}
+            >
+              {children}
+            </ContextMenuPrimitive.Popup>
+          </ContextMenuPrimitive.Positioner>
+        </ContextMenuPrimitive.Portal>
+      </ContextMenuPrimitive.Root>
+    </ContextMenuContext.Provider>
+  );
+}
+
+export function ContextMenuItem({
+  icon,
+  shortcut,
+  className,
+  children,
+  ...props
+}: ContextMenuPrimitive.Item.Props & {
+  /** Optional item icon to communicate purpose */
+  icon?: IconName;
+
+  /** Indicate that this action can be triggered by a keyboard shortcut */
+  shortcut?: string;
+}) {
+  return (
+    <View
+      render={<ContextMenuPrimitive.Item {...props} />}
+      interactive="list-item"
+      className={clsx(styles["context-menu__item"], className)}
+    >
+      {icon ? (
+        <Icon name={icon} className={styles["context-menu__item-icon"]} />
+      ) : null}
+      {textify(children)}
+      {shortcut ? (
+        <Text
+          className={styles["context-menu__item-shortcut"]}
+          color="dimmest"
+          size="sm"
+        >
+          {shortcut}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+export function ContextMenuSeparator(
+  props: ContextMenuPrimitive.Separator.Props & SeparatorProps,
+) {
+  return <Separator render={<ContextMenuPrimitive.Separator />} {...props} />;
+}
+
+export function ContextMenuGroup({
+  label,
+  children,
+  ...props
+}: ContextMenuPrimitive.Group.Props & {
+  label?: string;
+}) {
+  return (
+    <ContextMenuPrimitive.Group {...props}>
+      {label ? (
+        <Text
+          render={<ContextMenuPrimitive.GroupLabel />}
+          className={styles["context-menu__label"]}
+          color="dimmest"
+          size="sm"
+        >
+          {label}
+        </Text>
+      ) : null}
+      {children}
+    </ContextMenuPrimitive.Group>
+  );
+}
+
+export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+export function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ContextMenuPrimitive.RadioItem.Props) {
+  return (
+    <View
+      interactive="list-item"
+      render={<ContextMenuPrimitive.RadioItem {...props} />}
+      className={clsx(styles["context-menu__item"], className)}
+    >
+      <ContextMenuPrimitive.RadioItemIndicator
+        className={styles["context-menu__item-icon"]}
+      >
+        <Icon name="checkbox-circle-line" color={tokens.primaryDefault} />
+      </ContextMenuPrimitive.RadioItemIndicator>
+      {textify(children)}
+    </View>
+  );
+}
+
+export function ContextMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: ContextMenuPrimitive.RadioItem.Props) {
+  return (
+    <View
+      interactive="list-item"
+      render={<ContextMenuPrimitive.CheckboxItem {...props} />}
+      className={clsx(styles["context-menu__item"], className)}
+    >
+      <ContextMenuPrimitive.CheckboxItemIndicator
+        className={styles["context-menu__item-icon"]}
+      >
+        <Icon name="check-line" color={tokens.primaryDefault} />
+      </ContextMenuPrimitive.CheckboxItemIndicator>
+      {textify(children)}
+    </View>
+  );
+}
+
+export function ContextMenuMore({
+  label,
+  icon,
+  children,
+  className,
+  style,
+  ...props
+}: ContextMenuPrimitive.SubmenuRoot.Props & {
+  label: string;
+
+  /** Optional item icon to communicate purpose */
+  icon?: IconName;
+
+  /** Context menu content */
+  children?: ReactNode;
+
+  /** Apply className to ContextMenuPrimitive.Popup */
+  className?: string;
+
+  /** Apply styles to ContextMenuPrimitive.Popup  */
+  style?: CSSProperties;
+}) {
+  const background = useContext(ContextMenuContext);
+
+  return (
+    <ContextMenuPrimitive.SubmenuRoot {...props}>
+      <View
+        render={<ContextMenuPrimitive.SubmenuTrigger />}
+        className={styles["context-menu__item"]}
+      >
+        {icon ? (
+          <Icon name={icon} className={styles["context-menu__item-icon"]} />
+        ) : null}
+        {textify(label)}
+        <Icon
+          name="arrow-right-line"
+          className={styles["context-menu__item-shortcut"]}
+        />
+      </View>
+
+      <ContextMenuPrimitive.Portal>
+        <ContextMenuPrimitive.Positioner alignOffset={-4} sideOffset={-4}>
+          <ContextMenuPrimitive.Popup
+            render={<Surface background={background} />}
+            className={clsx(
+              styles["context-menu"],
+              transitionStyles["transition_scale"],
+              className,
+            )}
+            style={style}
+          >
+            {children}
+          </ContextMenuPrimitive.Popup>
+        </ContextMenuPrimitive.Positioner>
+      </ContextMenuPrimitive.Portal>
+    </ContextMenuPrimitive.SubmenuRoot>
+  );
+}

package/src/components/dialog/dialog.module.css

@@ -0,0 +1,71 @@
+.dialog__backdrop {
+  position: fixed;
+  z-index: 50;
+  inset: 0;
+  background-color: var(--background-overlay);
+
+  /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
+  @supports (-webkit-touch-callout: none) {
+    position: absolute;
+  }
+}
+
+.dialog__popup {
+  display: block;
+  position: fixed;
+  z-index: 51;
+  inset: 0;
+  isolation: isolate;
+  padding: var(--space-16);
+  height: 100%;
+  overflow: auto;
+}
+
+.dialog__popup_centered {
+  display: flex;
+  place-items: center;
+
+  @media screen and (width >= 512px) {
+    padding: var(--space-32);
+    padding-top: var(--space-64);
+    padding-bottom: var(--space-64);
+  }
+}
+
+.dialog__content {
+  position: relative;
+  flex-grow: 1;
+  flex-shrink: 1;
+  gap: var(--space-16);
+  margin: 0 auto;
+  outline: none;
+  box-shadow: var(--shadow-2);
+  border: 1px solid var(--outline-dimmest);
+  border-radius: var(--border-radius-default);
+  padding: var(--space-16);
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+}
+
+.dialog__content_width_sm {
+  max-width: 384px;
+}
+
+.dialog__content_width_md {
+  max-width: 512px;
+}
+
+.dialog__content_width_lg {
+  max-width: 872px;
+}
+
+.dialog__header {
+  gap: var(--space-4);
+}
+
+.dialog__close {
+  position: absolute;
+  top: var(--space-8);
+  right: var(--space-8);
+}

package/src/components/dialog/dialog.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Dialog } from ".";
+import { Button } from "../button";
+
+const meta = {
+  title: "Dialog/Standard Dialog",
+  component: Dialog,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "On color",
+    description:
+      "Lots of different, solid, highly saturated colors all over the UI. This makes it hard to tell what's important, and means users will be easily distracted.",
+  },
+  render: (args) => (
+    <Dialog
+      closable
+      trigger={<Button leftIcon="palette-line" children="Open Dialog" />}
+      {...args}
+    />
+  ),
+};