@koide-labs/ui 0.0.0

package/src/components/dialog/index.tsx

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

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

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

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

package/src/components/heading/index.tsx

@@ -0,0 +1,112 @@
+import { mergeProps, useRender } from "@base-ui/react";
+import { createContext, useContext } from "react";
+
+import type { Size } from "~/styles/tokens";
+
+import { Text, type TextProps } from "../text";
+
+import styles from "./heading.module.css";
+
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+
+const levelToClassName: Record<Level, Size> = {
+  1: "3xl",
+  2: "2xl",
+  3: "xl",
+  4: "lg",
+  5: "md",
+  6: "md",
+} as const;
+
+const LevelContext = createContext<number>(0);
+
+export interface HeadingProps extends useRender.ComponentProps<"h1"> {
+  /**
+   * Explicitly set heading level, which determines size.
+   * Defaults to level provided by section.
+   */
+  level?: Level;
+
+  /**
+   * Override text size.
+   * For example, you may want an h2 but render it as "sm".
+   */
+  size?: Size;
+
+  /**
+   * Override text color.
+   */
+  color?: TextProps["color"];
+}
+
+export function Heading({
+  level,
+  size,
+  color,
+  render,
+  ...props
+}: HeadingProps) {
+  const levelContext = useContext(LevelContext);
+  const normalizedLevel = normalizeLevel(level || levelContext);
+
+  const element = useRender({
+    defaultTagName: `h${normalizedLevel}`,
+    render,
+    props: mergeProps(
+      {
+        className: styles["heading"],
+      },
+      props,
+    ),
+  });
+  return (
+    <Text
+      render={element}
+      size={size || levelToClassName[normalizedLevel]}
+      color={color}
+    />
+  );
+}
+
+// Sections inspired by Carbon Design
+// https://react.carbondesignsystem.com/?path=%2Fdocs%2Fcomponents-heading--overview
+export interface SectionProps extends useRender.ComponentProps<"section"> {
+  /**
+   * Explicitly set section level, but does not override heading level
+   * Automatically increases by one level from the current section
+   *
+   * @example
+   * <Section level={1}>
+   *    <Heading>1</Heading>
+   * </Section>
+   *
+   * @example
+   * <Section>
+   *    <Heading>1</Heading>
+   *    <Section>
+   *        <Heading>2</Heading>
+   *        <Heading level={6}>6</Heading>
+   *    </Section>
+   * </Section>
+   */
+  level?: Level;
+}
+
+export function Section({ level, render, ...props }: SectionProps) {
+  const levelContext = useContext(LevelContext) ?? 0;
+  const normalizedLevel = normalizeLevel(level || levelContext + 1);
+  const element = useRender({
+    defaultTagName: "section",
+    render,
+    props,
+  });
+  return (
+    <LevelContext.Provider value={normalizedLevel}>
+      {element}
+    </LevelContext.Provider>
+  );
+}
+
+function normalizeLevel(level: number = 1) {
+  return Math.max(Math.min(level, 6), 1) as Level;
+}