@koide-labs/ui 0.0.0 → 0.0.2

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

@@ -1,99 +0,0 @@
-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

@@ -1,242 +0,0 @@
-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

@@ -1,71 +0,0 @@
-.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

@@ -1,29 +0,0 @@
-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}
-    />
-  ),
-};

package/src/components/dialog/index.tsx

@@ -1,148 +0,0 @@
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
-import clsx from "clsx";
-import type { ComponentProps, ReactElement, ReactNode } from "react";
-
-import type { Size } from "~/styles/tokens";
-
-import { Button, type ButtonProps } from "../button";
-import { IconButton } from "../icon-button";
-import { Surface, type Background } from "../surface";
-import { Text } from "../text";
-import { View } from "../view";
-
-import transitionStyles from "../../styles/transitions.module.css";
-import styles from "./dialog.module.css";
-
-export type BaseDialogProps = {
-  /**
-   * The title of the dialog.
-   * Renders DialogPrimitive.Title at "2xl" size.
-   */
-  title?: string;
-
-  /**
-   * The description of the dialog.
-   * Renders DialogPrimitive.Description at default size & dimmer color.
-   */
-  description?: string;
-
-  /** Dialog content */
-  children?: ReactNode;
-
-  /**
-   * Specify trigger to open alert. You can still used a {@link https://base-ui.com/react/components/dialog#detached-triggers detached trigger}
-   */
-  trigger?: ReactElement;
-
-  /**
-   * Maximum width of the dialog. Defaults to "md".
-   */
-  width?: Extract<Size, "sm" | "md" | "lg">;
-
-  /**
-   * Override popup background. Defaults to "root"
-   */
-  background?: Background;
-
-  /**
-   * Vertically center dialog (or not). You probably shouldn't if you suspect
-   * content will overflow.
-   */
-  centered?: boolean;
-
-  /**
-   * Apply className to the dialog content
-   */
-  className?: string;
-};
-
-export type DialogProps = ComponentProps<typeof DialogPrimitive.Root> &
-  BaseDialogProps & {
-    /**
-     * Show close icon
-     */
-    closable?: boolean;
-  };
-
-export function Dialog({
-  title,
-  description,
-  trigger,
-  width = "md",
-  background = "root",
-  centered,
-  closable,
-  children,
-  className,
-  ...props
-}: DialogProps) {
-  return (
-    <DialogPrimitive.Root {...props}>
-      {trigger ? <DialogPrimitive.Trigger render={trigger} /> : null}
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Backdrop
-          className={clsx(
-            styles["dialog__backdrop"],
-            transitionStyles["transition_opacity"],
-          )}
-        />
-        <DialogPrimitive.Popup
-          className={clsx(
-            styles["dialog__popup"],
-            centered && styles["dialog__popup_centered"],
-            transitionStyles["transition_scale"],
-          )}
-        >
-          <Surface
-            background={background}
-            className={clsx(
-              styles["dialog__content"],
-              styles[`dialog__content_width_${width}`],
-              className,
-            )}
-          >
-            {title || description ? (
-              <View className={styles["dialog__header"]}>
-                {title ? (
-                  <Text render={<DialogPrimitive.Title />} size="2xl">
-                    {title}
-                  </Text>
-                ) : null}
-                {description ? (
-                  <Text
-                    multiline
-                    color="dimmer"
-                    render={<DialogPrimitive.Description />}
-                  >
-                    {description}
-                  </Text>
-                ) : null}
-              </View>
-            ) : null}
-
-            {children}
-
-            {closable ? (
-              <DialogPrimitive.Close
-                data-framework-close
-                className={styles["dialog__close"]}
-                render={
-                  <IconButton
-                    size="sm"
-                    icon="close-line"
-                    alt="Close"
-                    interactive="no-fill"
-                  />
-                }
-              />
-            ) : null}
-          </Surface>
-        </DialogPrimitive.Popup>
-      </DialogPrimitive.Portal>
-    </DialogPrimitive.Root>
-  );
-}
-
-export function DialogClose(props: ButtonProps) {
-  return <DialogPrimitive.Close render={<Button {...props} />} />;
-}

package/src/components/heading/heading.module.css

@@ -1,3 +0,0 @@
-.heading {
-  font-weight: var(--font-weight-medium);
-}

package/src/components/heading/heading.stories.tsx

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Heading, Section, type HeadingProps } from ".";
-
-const meta = {
-  title: "Typography/Heading",
-  component: Heading,
-  parameters: { layout: "centered" },
-  argTypes: {
-    level: {
-      control: "select",
-    },
-  },
-} satisfies Meta<HeadingProps>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    level: 1,
-  },
-  render: ({ level }) => (
-    <Heading level={level}>Hello World (h{level})</Heading>
-  ),
-};
-
-export const AutoLevel: Story = {
-  args: {
-    level: 1,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "When nested within `Section` components, `Heading` will automatically determine its level based on the current section depth.",
-      },
-    },
-  },
-  render: (props) => (
-    <Section {...props}>
-      <Heading>Hello World</Heading>
-      <Section>
-        <Heading>Hello World</Heading>
-        <Section>
-          <Heading>Hello World</Heading>
-        </Section>
-      </Section>
-    </Section>
-  ),
-};