@koide-labs/ui 0.0.0 → 0.0.2

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

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

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

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

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

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

@@ -1,134 +0,0 @@
-/* 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

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

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

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