@koide-labs/ui 0.0.0 → 0.0.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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