@koide-labs/ui 0.0.0

package/src/components/icon/icon.module.css

@@ -0,0 +1,36 @@
+.icon {
+  --icon-size: var(--space-16);
+
+  vertical-align: middle;
+  width: var(--icon-size);
+  min-width: var(--icon-size);
+  height: var(--icon-size);
+  min-height: var(--icon-size);
+  font-size: var(--icon-size);
+}
+
+/* Maximize performance by declaring styles instead of inline styles */
+.icon_size_sm {
+  /* TODO revisit this - we kind of depend on icons to be at least 16 px, so maybe expose an "xs" size? idk */
+  --icon-size: var(--space-16);
+}
+
+.icon_size_md {
+  --icon-size: var(--space-16);
+}
+
+.icon_size_lg {
+  --icon-size: var(--space-20);
+}
+
+.icon_size_xl {
+  --icon-size: var(--space-24);
+}
+
+.icon_size_2xl {
+  --icon-size: var(--space-32);
+}
+
+.icon_size_3xl {
+  --icon-size: var(--space-48);
+}

package/src/components/icon/icon.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { colorTokens, tokens } from "~/styles/tokens";
+
+import { Icon } from ".";
+
+const iconSizeOptions = ["sm", "md", "lg", "xl", "2xl", "3xl"] as const;
+
+const meta = {
+  title: "Icon",
+  component: Icon,
+  parameters: { layout: "centered" },
+  argTypes: {
+    color: {
+      control: "select",
+      options: Object.values(colorTokens),
+    },
+    size: {
+      control: "select",
+      options: iconSizeOptions,
+    },
+  },
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    name: "heart-fill",
+    color: tokens.primaryDefault,
+    size: "md",
+  },
+  render: (props) => (
+    <div>
+      <Icon {...props} />
+    </div>
+  ),
+};

package/src/components/icon/index.tsx

@@ -0,0 +1,60 @@
+import clsx from "clsx";
+import { type ComponentProps } from "react";
+import svgSprite from "remixicon/fonts/remixicon.symbol.svg";
+
+import { type ColorToken, type Size } from "~/styles/tokens";
+
+import { type IconName } from "./icon-names";
+
+import styles from "./icon.module.css";
+
+export interface IconProps extends Omit<ComponentProps<"svg">, "name"> {
+  /**
+   * Overrides the icon size provider.
+   * Defaults to "md".
+   */
+  size?: Size;
+
+  /** Icon name */
+  name: IconName;
+
+  /**
+   * Icon fill color
+   * You probably should provide a color token, but we allow any color
+   */
+  color?: ColorToken | (string & {});
+
+  /**
+   * Use like `img alt` attribute.
+   * Leave empty if icon is purely decorative.
+   */
+  alt?: string;
+}
+
+export function Icon({
+  size = "md",
+  name,
+  color,
+  alt,
+  className,
+  ...props
+}: IconProps) {
+  const href = `${svgSprite}#ri-${name}`;
+
+  return (
+    <svg
+      preserveAspectRatio="xMidYMin"
+      viewBox="0 0 24 24"
+      aria-hidden={!alt}
+      focusable={false}
+      xmlns="http://www.w3.org/2000/svg"
+      fill={color || "currentColor"}
+      className={clsx(styles["icon"], styles[`icon_size_${size}`], className)}
+      {...props}
+    >
+      {/* https://css-tricks.com/accessible-svg-icons/ */}
+      {alt ? <title>{alt}</title> : null}
+      <use xlinkHref={href} href={href} />
+    </svg>
+  );
+}

package/src/components/icon-button/icon-button.module.css

@@ -0,0 +1,33 @@
+.icon-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--border-radius-default);
+  aspect-ratio: 1 / 1;
+  width: var(--icon-button-size);
+  height: var(--icon-button-size);
+}
+
+.icon-button_size_sm {
+  --icon-button-size: var(--space-24);
+}
+
+.icon-button_size_md {
+  --icon-button-size: var(--space-32);
+}
+
+.icon-button_size_lg {
+  --icon-button-size: var(--space-40);
+}
+
+.icon-button_size_xl {
+  --icon-button-size: var(--space-48);
+}
+
+.icon-button_size_2xl {
+  --icon-button-size: var(--space-56);
+}
+
+.icon-button_size_3xl {
+  --icon-button-size: var(--space-64);
+}

package/src/components/icon-button/icon-button.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { AllVariants } from "~/stories/components/all-variants";
+import { sizes } from "~/stories/data";
+
+import { IconButton } from ".";
+
+const meta = {
+  title: "IconButton",
+  component: IconButton,
+  parameters: { layout: "centered" },
+  argTypes: {
+    size: {
+      control: "select",
+      options: sizes,
+    },
+    interactive: {
+      control: "boolean",
+    },
+    loading: {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    size: "md",
+    icon: "add-line",
+    alt: "Create a new project.",
+    interactive: true,
+    loading: false,
+  },
+  render: (args) => <IconButton {...args} />,
+};
+
+export const AllSizes: Story = {
+  args: {
+    icon: "add-line",
+    alt: "Create a new project.",
+  },
+  argTypes: {
+    size: {
+      control: false,
+    },
+  },
+  render: (props) => (
+    <AllVariants
+      variantName="size"
+      variants={sizes}
+      element={<IconButton interactive {...props} />}
+      style={{ flexDirection: "row" }}
+    />
+  ),
+};

package/src/components/icon-button/index.tsx

@@ -0,0 +1,48 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import clsx from "clsx";
+
+import { type Size } from "~/styles/tokens";
+
+import { Icon } from "../icon";
+import type { IconName } from "../icon/icon-names";
+import { View, type ViewProps } from "../view";
+
+import styles from "./icon-button.module.css";
+
+export type IconButtonProps = ViewProps<"button"> & {
+  /** Icon to display. */
+  icon: IconName;
+
+  /** Explain what the button does. Required for accessibility. */
+  alt: string;
+
+  /** What size should the IconButton be. Defaults to "md". */
+  size?: Size;
+};
+
+export function IconButton({
+  icon,
+  alt,
+  size = "md",
+  render,
+  ...props
+}: IconButtonProps) {
+  return (
+    <View<"button">
+      interactive={true}
+      render={
+        <ButtonPrimitive
+          className={clsx(
+            styles["icon-button"],
+            styles[`icon-button_size_${size}`],
+          )}
+          focusableWhenDisabled={!!props.loading}
+          render={render}
+        />
+      }
+      {...props}
+    >
+      <Icon name={icon} size={size} alt={alt} />
+    </View>
+  );
+}

package/src/components/inline-code/index.tsx

@@ -0,0 +1,29 @@
+import type { useRender } from "@base-ui/react";
+import clsx from "clsx";
+
+import { Surface } from "../surface";
+import { Text } from "../text";
+import type { Color } from "../view";
+
+import styles from "./inline-code.module.css";
+
+export interface InlineCodeProps extends useRender.ComponentProps<"span"> {
+  color?: Color;
+}
+
+export const InlineCode = ({ color, ...props }: InlineCodeProps) => {
+  return (
+    <Surface
+      elevated
+      className={clsx(
+        styles["inline-code"],
+        color && styles["inline-code_colorway"],
+      )}
+      color={color}
+    >
+      <Text size="sm" color="inherit">
+        <code {...props} />
+      </Text>
+    </Surface>
+  );
+};

package/src/components/inline-code/inline-code.module.css

@@ -0,0 +1,13 @@
+.inline-code {
+  display: inline;
+  border: 1px solid var(--surface-interactive-border);
+  border-radius: var(--border-radius-6);
+  padding: 0 var(--space-4);
+  line-height: var(--line-height-default);
+  font-family: var(--font-family-code);
+  overflow-wrap: anywhere;
+}
+
+.inline-code_colorway {
+  color: var(--view-colorway-default);
+}

package/src/components/inline-code/inline-code.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { tokens } from "~/styles/tokens";
+
+import { InlineCode } from ".";
+import { Surface } from "../surface";
+import { Text } from "../text";
+
+const meta = {
+  title: "Code/Inline Code",
+  component: InlineCode,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof InlineCode>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    color: undefined,
+  },
+  render: (args) => (
+    <Surface style={{ padding: tokens.space16 }} elevated>
+      <Text>
+        Import the library with{" "}
+        <InlineCode {...args}>import * from "natmfat"</InlineCode>
+      </Text>
+    </Surface>
+  ),
+};

package/src/components/input/index.tsx

@@ -0,0 +1,22 @@
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import clsx from "clsx";
+
+import { View } from "../view";
+
+import styles from "./input.module.css";
+
+export type InputProps = InputPrimitive.Props;
+
+export function Input({ className, ...props }: InputProps) {
+  return (
+    <View
+      interactive="fill-outline"
+      render={
+        <InputPrimitive
+          className={clsx(styles["input"], className)}
+          {...props}
+        />
+      }
+    />
+  );
+}

package/src/components/input/input.module.css

@@ -0,0 +1,23 @@
+.input {
+  flex: 1 1 0%;
+  outline: none;
+  padding: var(--space-4) var(--space-8);
+  height: var(--space-32);
+  min-height: var(--space-32);
+  font-size: var(--font-size-default);
+  line-height: var(--line-height-input);
+  font-family: var(--font-family-default);
+
+  &::placeholder {
+    color: var(--foreground-dimmest);
+  }
+
+  &:not([disabled], [data-disabled]) {
+    cursor: text;
+    color: var(--foreground-default);
+  }
+}
+
+.input_autosize {
+  resize: none;
+}

package/src/components/input/input.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { AllVariants } from "~/stories/components/all-variants";
+import { surfaceBackgrounds } from "~/stories/data";
+import { tokens } from "~/styles/tokens";
+
+import { Input } from ".";
+import { Surface } from "../surface";
+
+const meta = {
+  title: "Input/Text",
+  component: Input,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Hello World",
+    disabled: false,
+  },
+  render: (args) => <Input {...args} style={{ width: tokens.space256 }} />,
+};
+
+export const AllInteractiveStyles: Story = {
+  args: {
+    placeholder: "Hello World",
+    disabled: false,
+  },
+  render: (args) => (
+    <AllVariants
+      variantName="background"
+      variants={surfaceBackgrounds}
+      style={{ backgroundColor: "transparent" }}
+      element={
+        <Surface
+          style={{
+            padding: tokens.space16,
+            gap: tokens.space8,
+            borderWidth: "1px",
+            borderColor: tokens.outlineDimmest,
+          }}
+        >
+          <Input {...args} />
+        </Surface>
+      }
+    />
+  ),
+};

package/src/components/meter/index.tsx

@@ -0,0 +1,55 @@
+import { Meter as MeterPrimitive } from "@base-ui/react/meter";
+import clsx from "clsx";
+
+import { Text } from "../text";
+import { View, type Color } from "../view";
+
+import styles from "./meter.module.css";
+
+export type MeterProps = MeterPrimitive.Root.Props & {
+  /**
+   * What is this meter even for bro?
+   * If one is not provided, we render a standard meter (no label, no value).
+   * You can still provide one yourself through children.
+   * @example
+   * <Meter value={24}>
+   *    <MeterPrimitive.Label render={<Text />} />
+   *    <MeterPrimitive.Value render={<Text />} />
+   * </Meter>
+   */
+  label?: string;
+
+  /** Communicate purpose with color. Defaults to "primary". */
+  color?: Color;
+};
+
+export function Meter({
+  label,
+  color = "primary",
+  className,
+  children,
+  ...props
+}: MeterProps) {
+  return (
+    <View color={color}>
+      <MeterPrimitive.Root
+        className={clsx(styles["meter"], className)}
+        {...props}
+      >
+        {label ? (
+          <>
+            <Text render={<MeterPrimitive.Label />}>{label}</Text>
+            <Text
+              className={styles["meter__value"]}
+              render={<MeterPrimitive.Value />}
+            />
+          </>
+        ) : null}
+        {children}
+        <MeterPrimitive.Track className={styles["meter__track"]}>
+          <MeterPrimitive.Indicator className={styles["meter__indicator"]} />
+        </MeterPrimitive.Track>
+      </MeterPrimitive.Root>
+    </View>
+  );
+}

package/src/components/meter/meter.module.css

@@ -0,0 +1,23 @@
+.meter {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  row-gap: var(--space-4);
+}
+
+.meter__value {
+  grid-column-start: 2;
+  margin: 0;
+  text-align: right;
+}
+
+.meter__track {
+  grid-column: 1 / 3;
+  background-color: var(--surface-interactive-border);
+  height: var(--space-8);
+  overflow: hidden;
+}
+
+.meter__indicator {
+  transition: width var(--transition-duration-chill);
+  background-color: var(--view-colorway-default);
+}

package/src/components/meter/meter.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { colors } from "~/stories/data";
+import { tokens } from "~/styles/tokens";
+
+import { Meter } from ".";
+
+const meta = {
+  title: "Meter",
+  component: Meter,
+  parameters: { layout: "centered" },
+  argTypes: {
+    color: {
+      control: "select",
+      options: colors,
+    },
+  },
+} satisfies Meta<typeof Meter>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    color: "orange",
+    label: "Storage used",
+    value: 24,
+  },
+  render: (args) => <Meter {...args} style={{ width: tokens.space256 }} />,
+};

package/src/components/multiline-input/index.tsx

@@ -0,0 +1,58 @@
+import type { useRender } from "@base-ui/react";
+import autosize from "autosize";
+import clsx from "clsx";
+import { useEffect, useRef } from "react";
+
+import { mergeRefs } from "~/-utils";
+
+import { View } from "../view";
+
+import styles from "../input/input.module.css";
+
+export interface MultilineInputProps extends useRender.ComponentProps<"textarea"> {
+  /** Automatically resize textarea. Defaults to false. */
+  autosize?: boolean;
+}
+
+export function MultilineInput({
+  autosize = false,
+  className,
+  ref,
+  ...props
+}: MultilineInputProps) {
+  const autosizeRef = useAutosize(autosize);
+
+  return (
+    <View
+      interactive="fill-outline"
+      render={
+        <textarea
+          className={clsx(
+            styles["input"],
+            autosize && styles["input_autosize"],
+            className,
+          )}
+          ref={mergeRefs(ref, autosizeRef)}
+          {...props}
+        ></textarea>
+      }
+    />
+  );
+}
+
+function useAutosize(enabled: boolean) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || !enabled) {
+      return;
+    }
+    autosize(element);
+    return () => {
+      autosize.destroy(element);
+    };
+  }, [enabled]);
+
+  return ref;
+}

package/src/components/multiline-input/multiline-input.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { tokens } from "~/styles/tokens";
+
+import { MultilineInput } from ".";
+
+const meta = {
+  title: "Input/Textarea",
+  component: MultilineInput,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof MultilineInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Hello World",
+    disabled: false,
+    autosize: true,
+  },
+  render: (args) => (
+    <MultilineInput {...args} style={{ width: tokens.space256 }} />
+  ),
+};