@koide-labs/ui 0.0.0

package/src/components/slider/slider.stories.tsx

@@ -0,0 +1,53 @@
+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 { Slider } from ".";
+import { Surface } from "../surface";
+
+const meta = {
+  title: "Input/Slider",
+  component: Slider,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: 25,
+    disabled: false,
+  },
+  render: (args) => <Slider style={{ width: tokens.space256 }} {...args} />,
+};
+
+export const AllInteractiveStyles: Story = {
+  args: {
+    color: "primary",
+    defaultValue: 25,
+    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,
+          }}
+        >
+          <Slider style={{ width: tokens.space256 }} {...args} />{" "}
+        </Surface>
+      }
+    />
+  ),
+};

package/src/components/spinner/index.tsx

@@ -0,0 +1,14 @@
+import clsx from "clsx";
+
+import { Icon } from "../icon";
+import { View, type ViewProps } from "../view";
+
+import styles from "./spinner.module.css";
+
+export function Spinner({ className, ...props }: ViewProps) {
+  return (
+    <View className={clsx(styles["spinner"], className)} {...props}>
+      <Icon name="loader-2-line" />
+    </View>
+  );
+}

package/src/components/spinner/spinner.module.css

@@ -0,0 +1,13 @@
+.spinner {
+  animation: loading 3s linear infinite;
+}
+
+@keyframes loading {
+  from {
+    rotate: 0deg;
+  }
+
+  to {
+    rotate: 360deg;
+  }
+}

package/src/components/spinner/spinner.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Spinner } from ".";
+
+const meta = {
+  title: "Spinner",
+  component: Spinner,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <Spinner {...args} />,
+};

package/src/components/stacked-avatars/index.tsx

@@ -0,0 +1,88 @@
+import clsx from "clsx";
+
+import { Avatar, type AvatarProps } from "../avatar";
+import { Text } from "../text";
+import { Tooltip } from "../tooltip";
+import { View, type Color } from "../view";
+
+import styles from "./stacked-avatars.module.css";
+
+export interface StackedAvatarsProps {
+  /** User objects */
+  users: Array<
+    AvatarProps & {
+      /** Ring color around the avatar */
+      color: Color;
+    }
+  >;
+
+  /** The maximum number of user to display. Defaults to 3. */
+  visibleUsers?: number;
+
+  /** The size of the avatars. Defaults to "md". */
+  size?: AvatarProps["size"];
+}
+
+export function StackedAvatars({
+  users,
+  visibleUsers = 3,
+  size = "md",
+}: StackedAvatarsProps) {
+  return (
+    <Tooltip
+      className={styles["stacked-avatars__tooltip-content"]}
+      trigger={
+        <View className={styles["stacked-avatars"]}>
+          {users
+            .slice(0, visibleUsers)
+            .map(({ color, className, ...user }, index) => (
+              <View color={color} key={user.username}>
+                <Avatar
+                  size={size}
+                  className={clsx(
+                    styles["stacked-avatars__avatar"],
+                    styles["stacked-avatars__avatar_color"],
+                    className,
+                  )}
+                  style={{ zIndex: index }}
+                  {...user}
+                />
+              </View>
+            ))}
+          {users.length > visibleUsers && (
+            <View
+              className={clsx(
+                styles["stacked-avatars__visible"],
+                styles[`stacked-avatars__visible_size_${size}`],
+              )}
+              style={{ zIndex: visibleUsers + 1 }}
+            >
+              <Text size="sm">+{users.length - visibleUsers}</Text>
+            </View>
+          )}
+        </View>
+      }
+    >
+      {users.map(({ color, className, ...user }) => (
+        <View
+          key={user.username}
+          color={color}
+          className={styles["stacked-avatars__tooltip-user"]}
+        >
+          <Avatar
+            key={user.username}
+            className={clsx(styles["stacked-avatars__avatar_color"], className)}
+            {...user}
+            size="sm"
+          />
+          <Text
+            color="dimmer"
+            className={styles["stacked-avatars__tooltip-text"]}
+          >
+            {user.username}
+          </Text>
+        </View>
+      ))}
+    </Tooltip>
+  );
+}

package/src/components/stacked-avatars/stacked-avatars.module.css

@@ -0,0 +1,79 @@
+.stacked-avatars {
+  flex-direction: row;
+  transform: translateX(0);
+  padding-left: 10px;
+}
+
+.stacked-avatars__avatar {
+  cursor: default;
+  margin-left: -10px;
+}
+
+.stacked-avatars__avatar_color {
+  border-color: var(--view-colorway-default);
+}
+
+.stacked-avatars__visible {
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  margin-left: -10px;
+  border: 1px solid var(--outline-dimmest);
+  border-radius: var(--border-radius-round);
+  background-color: var(--background-default);
+  aspect-ratio: 1 / 1;
+  width: var(--stacked-avatars-size);
+  height: var(--stacked-avatars-size);
+  overflow: hidden;
+  color: var(--foreground-dimmer);
+}
+
+/* TODO maybe copy text size as well because rn +1 doesn't move */
+
+/* Size variants copied from Avatar component */
+.stacked-avatars__visible_size_sm {
+  --stacked-avatars-size: var(--space-24);
+}
+
+.stacked-avatars__visible_size_md {
+  --stacked-avatars-size: var(--space-32);
+}
+
+.stacked-avatars__visible_size_lg {
+  --stacked-avatars-size: var(--space-40);
+}
+
+.stacked-avatars__visible_size_xl {
+  --stacked-avatars-size: var(--space-48);
+}
+
+.stacked-avatars__visible_size_2xl {
+  --stacked-avatars-size: var(--space-56);
+}
+
+.stacked-avatars__visible_size_3xl {
+  --stacked-avatars-size: var(--space-64);
+}
+
+/* Tooltip content */
+.stacked-avatars__tooltip-content {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: var(--space-4);
+  padding: var(--space-8);
+  width: 100%;
+  max-width: var(--space-128);
+}
+
+.stacked-avatars__tooltip-user {
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-6);
+  width: 100%;
+}
+
+.stacked-avatars__tooltip-text {
+  flex: 1 1 auto;
+}

package/src/components/stacked-avatars/stacked-avatars.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { sizes } from "~/stories/data";
+
+import { StackedAvatars } from ".";
+
+const meta = {
+  title: "Stacked Avatars",
+  component: StackedAvatars,
+  parameters: { layout: "centered" },
+  argTypes: {
+    size: {
+      control: "select",
+      options: sizes,
+    },
+  },
+} satisfies Meta<typeof StackedAvatars>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    users: [
+      {
+        color: "red",
+        image: "https://natmfat.com/logo.png",
+        username: "natmfat",
+      },
+      {
+        color: "green",
+        username: "green",
+      },
+      {
+        color: "blue",
+        username: "blue",
+      },
+      {
+        color: "yellow",
+        username: "yellow",
+      },
+    ],
+    visibleUsers: 3,
+    size: "md",
+  },
+  render: (args) => <StackedAvatars {...args} />,
+};

package/src/components/status-banner/index.tsx

@@ -0,0 +1,96 @@
+import { useRender } from "@base-ui/react";
+import clsx from "clsx";
+
+import type { Size } from "~/styles/tokens";
+
+import { Heading } from "../heading";
+import { Icon } from "../icon";
+import type { IconName } from "../icon/icon-names";
+import { Text } from "../text";
+import { View, type Color } from "../view";
+
+import styles from "./status-banner.module.css";
+
+export interface StatusBannerProps extends Omit<
+  useRender.ComponentProps<"div">,
+  "children"
+> {
+  /** Communicate purpose with color */
+  color?: Color;
+
+  /** Icon on the left side  */
+  icon: IconName;
+
+  /** Optional title */
+  title?: string;
+
+  /** Actual content of the status banner */
+  description: string;
+
+  /** Size, defaults to lg */
+  size?: Extract<Size, "md" | "lg">;
+}
+
+// map status banner size to size of indivdual elements
+const sizeMap: Record<
+  NonNullable<StatusBannerProps["size"]>,
+  {
+    icon: Size;
+    title: Size;
+    description: Size;
+  }
+> = {
+  md: {
+    icon: "md",
+    title: "md",
+    description: "sm",
+  },
+  lg: {
+    icon: "xl",
+    title: "lg",
+    description: "md",
+  },
+};
+
+// TODO figure out if you can really just pass on render like this or if useRender is required
+
+export function StatusBanner({
+  color,
+  icon,
+  title,
+  description,
+  size = "lg",
+  render,
+  ...props
+}: StatusBannerProps) {
+  return (
+    <View
+      render={render}
+      {...props}
+      color={color}
+      className={clsx(
+        styles["status-banner"],
+        styles[`status-banner_size_${size}`],
+        color
+          ? styles["status-banner_variant_colorway"]
+          : styles["status-banner_variant_neutral"],
+      )}
+    >
+      {icon ? <Icon name={icon} size={sizeMap[size].icon} /> : null}
+
+      <View className={styles["status-banner__content"]}>
+        <Heading level={1} size={sizeMap[size].title} color="inherit">
+          {title}
+        </Heading>
+        <Text
+          className={styles["status-banner__description"]}
+          multiline
+          size={sizeMap[size].description}
+          color="inherit"
+        >
+          {description}
+        </Text>
+      </View>
+    </View>
+  );
+}

package/src/components/status-banner/status-banner.module.css

@@ -0,0 +1,52 @@
+.status-banner {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--status-banner-gap);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--border-radius-default);
+  padding: var(--status-banner-padding);
+  width: fit-content;
+}
+
+.status-banner_variant_neutral {
+  border-color: var(--surface-interactive-border);
+  background: var(--surface-interactive-background);
+  color: var(--foreground-default);
+}
+
+.status-banner_variant_colorway {
+  border-color: var(--view-colorway-stronger);
+  background: var(--view-colorway-dimmest);
+  color: var(--view-colorway-strongest);
+}
+
+.status-banner_size_md {
+  --status-banner-gap: var(--space-8);
+  --status-banner-padding: var(--space-8);
+  --status-banner-content-gap: 0;
+}
+
+.status-banner_size_lg {
+  --status-banner-gap: var(--space-12);
+  --status-banner-padding: var(--space-12);
+  --status-banner-content-gap: var(--space-2);
+}
+
+.status-banner__content {
+  flex-grow: 1;
+  flex-shrink: 1;
+  gap: var(--status-banner-content-gap);
+}
+
+.status-banner__description {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.status-banner__close {
+  flex-grow: 0;
+  background: transparent !important;
+}

package/src/components/status-banner/status-banner.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { colors } from "~/stories/data";
+
+import { StatusBanner } from ".";
+import { View } from "../view";
+
+const meta = {
+  title: "Block/Status Banner",
+  component: StatusBanner,
+  parameters: { layout: "centered" },
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["md", "lg"],
+    },
+    color: {
+      control: "select",
+      options: colors,
+    },
+  },
+} satisfies Meta<typeof StatusBanner>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: "alarm-warning-line",
+    title: "This plan has been deprecated.",
+    description:
+      "You can continue to use these organizations, but if you want to add users, you’ll have to update to a current plan.",
+    size: "lg",
+    color: "warning",
+  },
+  render: (args) => {
+    return (
+      <View style={{ width: "512px" }}>
+        <StatusBanner {...args} />
+      </View>
+    );
+  },
+};

package/src/components/surface/index.tsx

@@ -0,0 +1,83 @@
+import type { useRender } from "@base-ui/react";
+import clsx from "clsx";
+import { createContext, useContext } from "react";
+
+import { View, type Color } from "../view";
+
+import styles from "./surface.module.css";
+
+export interface SurfaceProps extends useRender.ComponentProps<"div"> {
+  /**
+   * Explicitly sets the background color of the surface.
+   * If this prop is set, the `elevated` prop will be ignored.
+   */
+  background?: Background;
+
+  /**
+   * If true, the surface will be elevated by one level from the current
+   * context. If false, the surface will be at the same level as before.
+   *
+   * If the `background` prop is set, this prop will be ignored.
+   */
+  elevated?: boolean;
+
+  /**
+   * Add CSS color variables.
+   */
+  color?: Color;
+}
+
+const ElevationContext = createContext(0);
+
+export const Surface = ({
+  background,
+  elevated,
+  className,
+  ...props
+}: SurfaceProps) => {
+  // automatically manage elevation
+  let elevation = useContext(ElevationContext);
+  if (background) {
+    elevation = backgroundToElevation(background);
+  } else if (elevated) {
+    elevation++;
+  }
+
+  return (
+    <ElevationContext.Provider value={elevation}>
+      <View
+        className={clsx(
+          styles["surface"],
+          styles[`surface--${elevationToBackground(elevation)}`],
+          className,
+        )}
+        {...props}
+      />
+    </ElevationContext.Provider>
+  );
+};
+
+Surface.displayName = "Surface";
+
+const backgrounds = ["root", "default", "higher", "highest"] as const;
+
+export type Background = (typeof backgrounds)[number];
+
+/**
+ * Convert a background string into a numbered elevation level
+ * @param background Background provided as a string
+ * @returns Background as a number
+ */
+function backgroundToElevation(background: Background = "root") {
+  const elevation = backgrounds.indexOf(background);
+  return Math.min(Math.max(elevation, 0), backgrounds.length - 1);
+}
+
+/**
+ * Convert a numbered elevation level into a background string
+ * @param elevation Background as a number
+ * @returns Background as a string
+ */
+function elevationToBackground(elevation: number = 0): Background {
+  return backgrounds[elevation] || "root";
+}

package/src/components/surface/surface.module.css

@@ -0,0 +1,35 @@
+.surface {
+  background-color: var(--surface-background);
+}
+
+.surface--root {
+  --surface-background: var(--background-root);
+  --surface-interactive-background: var(--background-default);
+  --surface-interactive-background-active: var(--background-higher);
+  --surface-interactive-border: var(--outline-dimmest);
+  --surface-interactive-border-hover: var(--outline-default);
+}
+
+.surface--default {
+  --surface-background: var(--background-default);
+  --surface-interactive-background: var(--background-higher);
+  --surface-interactive-background-active: var(--background-highest);
+  --surface-interactive-border: var(--outline-dimmer);
+  --surface-interactive-border-hover: var(--outline-stronger);
+}
+
+.surface--higher {
+  --surface-background: var(--background-higher);
+  --surface-interactive-background: var(--background-highest);
+  --surface-interactive-background-active: var(--background-default);
+  --surface-interactive-border: var(--outline-default);
+  --surface-interactive-border-hover: var(--outline-strongest);
+}
+
+.surface--highest {
+  --surface-background: var(--background-highest);
+  --surface-interactive-background: var(--background-higher);
+  --surface-interactive-background-active: var(--background-default);
+  --surface-interactive-border: var(--outline-stronger);
+  --surface-interactive-border-hover: var(--outline-strongest);
+}