@koide-labs/ui 0.0.0

package/src/components/surface/surface.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { type ReactNode } from "react";
+
+import { surfaceBackgrounds } from "~/stories/data";
+
+import { Surface, type Background, type SurfaceProps } from ".";
+import { tokens } from "../../styles/tokens";
+import { Text } from "../text";
+
+const meta = {
+  title: "Surface",
+  component: Surface,
+  parameters: { layout: "centered" },
+  argTypes: {
+    background: {
+      control: "select",
+      options: surfaceBackgrounds,
+    },
+    elevated: {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<typeof Surface>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    background: "default",
+    elevated: false,
+  },
+  render: (args) => (
+    <PaddedSurface {...args}>
+      <Text>Hello world</Text>
+    </PaddedSurface>
+  ),
+};
+
+export const Stacking: Story = {
+  argTypes: {
+    background: {
+      table: {
+        disable: true,
+      },
+    },
+    elevated: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: () => (
+    <PaddedSurface label="root">
+      <PaddedSurface label="default" elevated>
+        <PaddedSurface label="higher" elevated>
+          <PaddedSurface label="highest" elevated />
+        </PaddedSurface>
+      </PaddedSurface>
+    </PaddedSurface>
+  ),
+};
+
+function PaddedSurface({
+  label,
+  children,
+  ...props
+}: SurfaceProps & { label?: Background; children?: ReactNode }) {
+  return (
+    <Surface
+      style={{ padding: tokens.space24, minWidth: tokens.space256 }}
+      background={label}
+      {...props}
+    >
+      {label ? (
+        <Text style={{ marginBottom: children ? tokens.space16 : 0 }}>
+          {label}
+        </Text>
+      ) : null}
+      {children}
+    </Surface>
+  );
+}

package/src/components/switch/index.tsx

@@ -0,0 +1,23 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+
+import { View, type Color } from "../view";
+
+import styles from "./switch.module.css";
+
+export function Switch({
+  color = "primary",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  color?: Color;
+}) {
+  return (
+    <View
+      render={<SwitchPrimitive.Root {...props} />}
+      className={styles["switch"]}
+      interactive="fill-outline"
+      color={color}
+    >
+      <SwitchPrimitive.Thumb className={styles["switch__thumb"]} />
+    </View>
+  );
+}

package/src/components/switch/switch.module.css

@@ -0,0 +1,45 @@
+.switch {
+  position: relative;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--surface-interactive-border);
+  border-radius: var(--border-radius-round);
+  background: var(--surface-interactive-border);
+  width: 40px;
+  height: 24px;
+
+  &[data-checked] {
+    background: var(--view-colorway-dimmer);
+  }
+
+  &[data-checked]:not([disabled], [data-disabled]) {
+    background: var(--view-colorway-default);
+
+    &:hover {
+      border-color: var(--view-colorway-stronger);
+    }
+  }
+}
+
+.switch__thumb {
+  --switch-size: 16px;
+  --switch-padding: 4px;
+
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: var(--switch-padding);
+  transform: translateY(-50%);
+  transition:
+    left var(--transition-duration-snappy) ease-out,
+    right var(--transition-duration-snappy) ease-out;
+  border-radius: var(--border-radius-round);
+  background-color: var(--white);
+  aspect-ratio: 1/1;
+  width: var(--switch-size);
+  height: var(--switch-size);
+
+  &[data-checked] {
+    left: calc(100% - var(--switch-size) - var(--switch-padding));
+  }
+}

package/src/components/switch/switch.stories.tsx

@@ -0,0 +1,48 @@
+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 { Switch } from ".";
+import { Surface } from "../surface";
+
+const meta = {
+  title: "Input/Switch",
+  component: Switch,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    color: "primary",
+    disabled: false,
+  },
+  render: (args) => <Switch {...args} />,
+};
+
+export const AllInteractiveStyles: Story = {
+  render: (args) => (
+    <AllVariants
+      variantName="background"
+      variants={surfaceBackgrounds}
+      style={{ backgroundColor: "transparent", flexDirection: "row" }}
+      element={
+        <Surface
+          style={{
+            padding: tokens.space16,
+            gap: tokens.space8,
+            borderWidth: "1px",
+            borderColor: tokens.outlineDimmest,
+          }}
+        >
+          <Switch {...args} />
+        </Surface>
+      }
+    />
+  ),
+};

package/src/components/tabs/index.tsx

@@ -0,0 +1,126 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import clsx from "clsx";
+import { Fragment } from "react";
+
+import { tokens } from "~/styles/tokens";
+
+import { Button, type ButtonProps } from "../button";
+import { Icon } from "../icon";
+import { Separator, type SeparatorProps } from "../separator";
+import { View } from "../view";
+
+import styles from "./tabs.module.css";
+
+type TabsTriggerProps = {
+  value: TabsPrimitive.Tab.Props["value"];
+  /** Show indicator that tab is complete.  */
+  complete?: boolean;
+} & ButtonProps;
+
+type TabsVariant = "default" | "progress" | "button-group";
+
+export interface TabsProps extends TabsPrimitive.Root.Props {
+  /** Tabs styling that we should use. Defaults to "default". */
+  variant?: TabsVariant;
+
+  /** Disable all triggers */
+  disabled?: boolean;
+
+  tabs: Array<TabsTriggerProps>;
+}
+
+const VARIANT_SEPARATOR: Set<TabsVariant> = new Set(["default", "progress"]);
+
+export function Tabs({
+  variant = "default",
+  disabled = false,
+  tabs,
+  className,
+  children,
+  ...props
+}: TabsProps) {
+  return (
+    <View
+      render={
+        <TabsPrimitive.Root
+          className={clsx(
+            styles["tabs"],
+            styles[`tabs_variant_${variant}`],
+            className,
+          )}
+          {...props}
+        />
+      }
+    >
+      <TabsList>
+        {tabs.map((tabProps, i) => (
+          <Fragment key={tabProps.value}>
+            <TabsTrigger disabled={disabled} {...tabProps} />
+            {i + 1 < tabs.length && VARIANT_SEPARATOR.has(variant) ? (
+              <TabsSeparator
+                orientation={variant === "progress" ? "horizontal" : "vertical"}
+              />
+            ) : null}
+          </Fragment>
+        ))}
+      </TabsList>
+      {children}
+    </View>
+  );
+}
+
+function TabsTrigger({
+  value,
+  className,
+  complete,
+  children,
+  ...props
+}: TabsTriggerProps) {
+  return (
+    <Button
+      interactive="list-item"
+      className={clsx(styles["tabs__trigger"], className)}
+      render={<TabsPrimitive.Tab value={value} />}
+      {...props}
+    >
+      {complete ? (
+        <Icon
+          color={tokens.positiveDefault}
+          name="check-line"
+          className={styles["tabs__trigger-complete"]}
+        />
+      ) : null}
+      {children}
+    </Button>
+  );
+}
+
+function TabsList({ className, ...props }: TabsPrimitive.List.Props) {
+  return (
+    <View
+      render={
+        <TabsPrimitive.List
+          className={clsx(styles["tabs__list"], className)}
+          {...props}
+        />
+      }
+    />
+  );
+}
+
+function TabsSeparator({ className, ...props }: SeparatorProps) {
+  return (
+    <Separator
+      className={clsx(styles["tabs__separator"], className)}
+      {...props}
+    />
+  );
+}
+
+export function TabsPanel({ children, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel {...props}>
+      <View>{children}</View>
+    </TabsPrimitive.Panel>
+  );
+}

package/src/components/tabs/tabs.module.css

@@ -0,0 +1,134 @@
+/* stylelint-disable no-descending-specificity, max-nesting-depth */
+
+/* TODO make this not so bad... ignoring for now because variants are easiest with nesting */
+
+.tabs {
+  gap: var(--space-8);
+}
+
+.tabs__list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+/* Default variant */
+.tabs_variant_default {
+  .tabs__list {
+    box-shadow: inset 0 -1px 0 var(--surface-interactive-border);
+  }
+
+  .tabs__separator {
+    height: var(--space-16);
+  }
+
+  .tabs__trigger {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-width: 0;
+    border-bottom-width: 1px;
+    border-color: var(--surface-interactive-border);
+    border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
+    height: calc(var(--space-32) + var(--space-4));
+  }
+
+  .tabs__trigger[data-active] {
+    border-color: var(--foreground-dimmer);
+  }
+
+  .tabs__trigger:not([disabled], [data-disabled]):active {
+    border-color: var(--primary-default);
+  }
+}
+
+/* Progress variant */
+.tabs_variant_progress {
+  .tabs__list {
+    justify-content: space-between;
+    gap: var(--space-8);
+  }
+
+  .tabs__separator {
+    display: inline-block;
+    flex-shrink: 1;
+    width: var(--space-16);
+  }
+
+  .tabs__trigger {
+    position: relative;
+    flex-wrap: nowrap;
+    gap: var(--space-4);
+    transition-property: none;
+    user-select: none;
+  }
+
+  .tabs__trigger[data-active] {
+    background-color: var(--surface-interactive-background);
+  }
+
+  .tabs__trigger-complete {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(var(--space-6), calc(-1 * var(--space-6)));
+    border-radius: var(--border-radius-default);
+    background-color: var(--positive-dimmest);
+    aspect-ratio: 1 / 1;
+  }
+}
+
+/* Button group variant */
+.tabs_variant_button-group {
+  .tabs__trigger {
+    transition-property: background-color, box-shadow;
+    border-radius: 0;
+  }
+
+  .tabs__trigger:first-child {
+    border-top-left-radius: var(--border-radius-default);
+    border-bottom-left-radius: var(--border-radius-default);
+  }
+
+  .tabs__trigger:last-child {
+    border-top-right-radius: var(--border-radius-default);
+    border-bottom-right-radius: var(--border-radius-default);
+  }
+
+  .tabs__trigger:not([disabled], [data-disabled]) {
+    background-color: var(--surface-interactive-background);
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--surface-interactive-background-active);
+      }
+    }
+  }
+
+  /* TODO: make this not repetitive */
+
+  /* Copied from view colorway. */
+  .tabs__trigger[data-active] {
+    background-color: var(--view-colorway-dimmest);
+    color: var(--view-colorway-default);
+
+    &:not([disabled], [data-disabled]) {
+      background-color: var(--view-colorway-dimmer);
+      color: var(--view-colorway-strongest);
+
+      &:focus {
+        box-shadow: 0 0 0 2px var(--view-colorway-stronger);
+
+        &:not(:focus-visible) {
+          box-shadow: none;
+        }
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--view-colorway-default);
+        }
+      }
+    }
+  }
+}

package/src/components/tabs/tabs.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Tabs, TabsPanel } from ".";
+
+const meta = {
+  title: "Tabs",
+  component: Tabs,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: "default",
+    defaultValue: "tab1",
+    tabs: [
+      { value: "tab1", leftIcon: "code-view", children: "Tab 1" },
+      { value: "tab2", leftIcon: "bar-chart-line", children: "Tab 2" },
+      { value: "tab3", leftIcon: "send-plane-line", children: "Tab 3" },
+    ],
+  },
+  render: (args) => (
+    <Tabs {...args}>
+      <TabsPanel value="tab1">Tab 1</TabsPanel>
+      <TabsPanel value="tab2">Tab 2</TabsPanel>
+      <TabsPanel value="tab3">Tab 3</TabsPanel>
+    </Tabs>
+  ),
+};
+
+export const Progress: Story = {
+  args: {
+    variant: "progress",
+    tabs: [
+      {
+        value: "tab1",
+        leftIcon: "code-view",
+        children: "Tab 1",
+        complete: true,
+      },
+      { value: "tab2", leftIcon: "bar-chart-line", children: "Tab 2" },
+      {
+        value: "tab3",
+        leftIcon: "send-plane-line",
+        children: "Tab 3",
+      },
+    ],
+  },
+  render: (args) => (
+    <Tabs defaultValue="tab1" {...args}>
+      <TabsPanel value="tab1">Tab 1</TabsPanel>
+      <TabsPanel value="tab2">Tab 2</TabsPanel>
+      <TabsPanel value="tab3">Tab 3</TabsPanel>
+    </Tabs>
+  ),
+};
+
+export const ButtonGroup: Story = {
+  args: {
+    variant: "button-group",
+    tabs: [
+      {
+        value: "tab1",
+        leftIcon: "code-view",
+        children: "Tab 1",
+      },
+      {
+        value: "tab2",
+        leftIcon: "bar-chart-line",
+        children: "Tab 2",
+      },
+      {
+        value: "tab3",
+        leftIcon: "send-plane-line",
+        children: "Tab 3",
+      },
+    ],
+  },
+  render: (args) => (
+    <Tabs defaultValue="tab3" {...args}>
+      <TabsPanel value="tab1">Tab 1</TabsPanel>
+      <TabsPanel value="tab2">Tab 2</TabsPanel>
+      <TabsPanel value="tab3">Tab 3</TabsPanel>
+    </Tabs>
+  ),
+};

package/src/components/text/index.tsx

@@ -0,0 +1,69 @@
+import { mergeProps, useRender } from "@base-ui/react";
+import clsx from "clsx";
+
+import type { Size } from "~/styles/tokens";
+
+import viewStyles from "../view/view.module.css";
+import styles from "./text.module.css";
+
+type ColorVariants = "inherit" | "default" | "dimmer" | "dimmest";
+
+export interface TextProps extends Omit<
+  useRender.ComponentProps<"span">,
+  "color"
+> {
+  /**
+   * The color variant of the text.
+   * Defaults to "default".
+   */
+  color?: ColorVariants;
+
+  /**
+   * The size variant of the text.
+   * Defaults to "md".
+   */
+  size?: Size;
+
+  /**
+   * Maximum number of lines that should be displayed.
+   * Defaults to 1 (the minimum).
+   */
+  maxLines?: number;
+
+  /**
+   * A convenient shorthand that has the same effect as setting maxLines to Infinity
+   */
+  multiline?: boolean;
+}
+
+export function Text({
+  color = "default",
+  size = "md",
+  maxLines = 1,
+  multiline,
+  render,
+  ...props
+}: TextProps) {
+  const element = useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps(
+      {
+        className: clsx(
+          viewStyles["view"],
+          styles["text"],
+          styles[`text_color_${color}`],
+          styles[`text_size_${size}`],
+          !multiline && styles["text_clip-line"],
+          !multiline && maxLines > 1 && styles["text_clamp-lines"],
+        ),
+        style: {
+          "--text-max-lines": Math.max(maxLines, 1),
+        },
+      },
+      props,
+    ),
+  });
+
+  return element;
+}

package/src/components/text/text.module.css

@@ -0,0 +1,76 @@
+.text {
+  display: inline;
+  vertical-align: middle;
+  overflow: hidden;
+  overflow-wrap: break-word;
+}
+
+.text_clip-line {
+  display: inline-block;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text_clamp-lines {
+  display: -webkit-box;
+  line-clamp: var(--ui-text-max-lines);
+  -webkit-line-clamp: var(--ui-text-max-lines);
+  -webkit-box-orient: vertical;
+  visibility: visible;
+  white-space: break-spaces;
+}
+
+/* Text color variants */
+.text_color_inherit {
+  color: inherit;
+}
+
+.text_color_default {
+  color: var(--foreground-default);
+}
+
+.text_color_dimmer {
+  color: var(--foreground-dimmer);
+}
+
+.text_color_dimmest {
+  color: var(--foreground-dimmest);
+}
+
+/* Text size variants */
+.text_size_sm {
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+}
+
+.text_size_md {
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-default);
+  line-height: var(--line-height-default);
+}
+
+.text_size_lg {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-subhead-default);
+  line-height: var(--line-height-subhead-default);
+}
+
+.text_size_xl {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-subhead-big);
+  line-height: var(--line-height-subhead-big);
+}
+
+.text_size_2xl {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-header-default);
+  line-height: var(--line-height-header-default);
+}
+
+.text_size_3xl {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-header-big);
+  line-height: var(--line-height-header-big);
+}