@koide-labs/ui 0.0.0

package/src/components/radio/index.tsx

@@ -0,0 +1,67 @@
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import clsx from "clsx";
+import { createContext, useContext } from "react";
+
+import { Text } from "../text";
+import { View, type Color } from "../view";
+
+import radioGroupStyles from "./radio-group.module.css";
+import radioStyles from "./radio.module.css";
+
+const RadioContext = createContext<Color>("primary");
+
+export function RadioGroup({
+  color = "primary",
+  className,
+  ...props
+}: RadioGroupPrimitive.Props & {
+  /** Optional color for child radio elements. Defaults to "primary". */
+  color?: Color;
+}) {
+  return (
+    <RadioContext.Provider value={color}>
+      <RadioGroupPrimitive
+        className={clsx(radioGroupStyles["radio-group"], className)}
+        {...props}
+      />
+    </RadioContext.Provider>
+  );
+}
+
+export function Radio({
+  color,
+  label,
+  className,
+  ...props
+}: RadioPrimitive.Root.Props & {
+  /** Optional label. If one is provided, we wrap radio in a label element. Otherwise, we just return a standard radio. */
+  label?: string;
+
+  /** Optional color. Defaults to the radio group color, often primary. */
+  color?: Color;
+}) {
+  const colorContext = useContext(RadioContext);
+  const normalizedColor: Color = color || colorContext || "primary";
+
+  const radio = (
+    <View
+      render={<RadioPrimitive.Root {...props} />}
+      interactive="fill-outline"
+      color={normalizedColor}
+      className={clsx(radioStyles["radio"], className)}
+    >
+      <RadioPrimitive.Indicator className={radioStyles["radio__indicator"]} />
+    </View>
+  );
+
+  if (label) {
+    return (
+      <label className={radioStyles["radio__label"]}>
+        {radio} <Text>{label}</Text>
+      </label>
+    );
+  }
+
+  return radio;
+}

package/src/components/radio/radio-group.module.css

@@ -0,0 +1,5 @@
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}

package/src/components/radio/radio.module.css

@@ -0,0 +1,36 @@
+.radio {
+  border-radius: var(--border-radius-round);
+  aspect-ratio: 1 / 1;
+  width: 20px;
+  height: 20px;
+}
+
+.radio__indicator {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  &::after {
+    display: block;
+    border-radius: var(--border-radius-round);
+    background: var(--view-colorway-dimmer);
+    width: 12px;
+    height: 12px;
+    pointer-events: none;
+    content: "";
+  }
+
+  &:not([disabled], [data-disabled])::after {
+    background: var(--view-colorway-default);
+  }
+}
+
+.radio__label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-8);
+}

package/src/components/radio/radio.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { tokens } from "~/styles/tokens";
+
+import { Radio, RadioGroup } from ".";
+
+const meta = {
+  title: "Input/Radio",
+  component: RadioGroup,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+  },
+  render: (args) => (
+    <RadioGroup style={{ width: tokens.space256 }} {...args}>
+      <Radio value="public" label="Public" />
+      <Radio value="private" label="Private" />
+    </RadioGroup>
+  ),
+};

package/src/components/search-bar/index.tsx

@@ -0,0 +1,60 @@
+import clsx from "clsx";
+import React from "react";
+
+import { Icon } from "../icon";
+import { IconButton } from "../icon-button";
+import { Input } from "../input";
+import { Spinner } from "../spinner";
+import { View } from "../view";
+
+import styles from "./search-bar.module.css";
+
+export interface SearchBarProps extends React.ComponentPropsWithoutRef<"input"> {
+  /**
+   * Is the search bar loading or processing?
+   */
+  loading?: boolean;
+
+  /**
+   * Called when the input is cleared
+   */
+  onClear?: () => void;
+}
+
+export function SearchBar({
+  loading,
+  onClear,
+  className,
+  ...props
+}: SearchBarProps) {
+  return (
+    <View className={clsx(styles["search-bar"], className)}>
+      <Input className={styles["search-bar__input"]} {...props} />
+
+      {!loading && !props.value ? (
+        <View className={styles["search-bar__icon"]}>
+          <Icon name="search-line" />
+        </View>
+      ) : null}
+
+      {loading ? <Spinner className={styles["search-bar__icon"]} /> : null}
+
+      {!loading && props.value ? (
+        <View
+          className={clsx(
+            styles["search-bar__icon"],
+            styles["search-bar__icon_close"],
+          )}
+        >
+          <IconButton
+            icon="close-line"
+            alt="Clear"
+            size="sm"
+            disabled={props.disabled}
+            onClick={onClear}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/search-bar/search-bar.module.css

@@ -0,0 +1,29 @@
+.search-bar {
+  position: relative;
+  height: var(--space-32);
+}
+
+.search-bar__input {
+  position: relative;
+  padding-right: var(--space-32);
+  width: 100%;
+  height: 100%;
+  line-height: var(--line-height-input);
+}
+
+.search-bar__icon {
+  display: flex;
+  position: absolute !important;
+  top: 0;
+  right: 0;
+  justify-content: center;
+  align-items: center;
+  padding: var(--space-8);
+  height: 100%;
+  pointer-events: none;
+}
+
+.search-bar__icon_close {
+  padding: var(--space-4);
+  pointer-events: auto;
+}

package/src/components/search-bar/search-bar.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import { tokens } from "~/styles/tokens";
+
+import { SearchBar } from ".";
+
+const meta = {
+  title: "Search Bar",
+  component: SearchBar,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof SearchBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+    loading: false,
+    placeholder: "Search & run commands.",
+  },
+  render: (args) => {
+    // eslint-disable-next-line -- this is okay in storybook
+    const [value, setValue] = useState("");
+    return (
+      <SearchBar
+        style={{ width: tokens.space256 }}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onClear={() => setValue("")}
+        {...args}
+      />
+    );
+  },
+};

package/src/components/select/index.tsx

@@ -0,0 +1,132 @@
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import clsx from "clsx";
+import { type CSSProperties, type ReactNode } from "react";
+
+import { textify } from "~/-utils";
+
+import { Icon } from "../icon";
+import { View } from "../view";
+
+import transitionStyles from "../../styles/transitions.module.css";
+import styles from "./select.module.css";
+
+export function Select<Value>({
+  placeholder,
+  className,
+  style,
+  ...props
+}: SelectPrimitive.Root.Props<Value, boolean> & {
+  /**
+   * Select placeholder if no value is chosen.
+   *
+   * Behaves differently depending on the type of select.
+   * For a normal select, we simply render an item with a value of null.
+   * For a `multiple` select, we replace the {@link https://base-ui.com/react/components/select#multiple-selection renderValue} function.
+   */
+  placeholder?: string;
+
+  /** Apply styles to SelectPrimitive.trigger */
+  className?: string;
+
+  /** Apply styles to SelectPrimitive.trigger */
+  style?: CSSProperties;
+}) {
+  return (
+    <SelectPrimitive.Root {...props}>
+      <View
+        interactive="fill-outline"
+        render={<SelectPrimitive.Trigger />}
+        style={style}
+        className={clsx(styles["select__trigger"], className)}
+      >
+        <SelectPrimitive.Value>
+          {createRenderText(placeholder, props.items)}
+        </SelectPrimitive.Value>
+        <SelectPrimitive.Icon>
+          <Icon
+            name="arrow-down-s-line"
+            className={styles["select__trigger-icon"]}
+          />
+        </SelectPrimitive.Icon>
+      </View>
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Positioner sideOffset={4} alignItemWithTrigger={false}>
+          <SelectPrimitive.Popup
+            className={transitionStyles["transition_scale"]}
+          >
+            <SelectPrimitive.List className={styles["select__list"]}>
+              {placeholder && !props.multiple ? (
+                <SelectItem value={null} label={placeholder} />
+              ) : null}
+
+              {Array.isArray(props.items)
+                ? props.items.map(({ value, label }) => (
+                    <SelectItem key={value} value={value} label={label} />
+                  ))
+                : typeof props.items === "object"
+                  ? Object.entries(props.items).map(([value, label]) => (
+                      <SelectItem key={value} value={value} label={label} />
+                    ))
+                  : null}
+              {/* TODO support record as well */}
+            </SelectPrimitive.List>
+          </SelectPrimitive.Popup>
+        </SelectPrimitive.Positioner>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+}
+
+function SelectItem<T>(props: { value: T; label: string }) {
+  return (
+    <SelectPrimitive.Item
+      className={styles["select__item"]}
+      value={props.value}
+    >
+      <SelectPrimitive.ItemIndicator
+        className={styles["select__item-indicator"]}
+      >
+        <Icon name="check-line" />
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemText className={styles["select__item-text"]}>
+        {textify(props.label)}
+      </SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+/**
+ * Create the renderText function for multiple selections
+ * @param placeholder Default select value if nothing is selected
+ * @param items Record or array of items defined by SelectPrimitive.Root
+ * @returns renderText function
+ */
+function createRenderText<Value>(
+  placeholder: string | undefined,
+  items: SelectPrimitive.Root.Props<Value, true>["items"],
+) {
+  function findValue(value: string) {
+    if (Array.isArray(items)) {
+      return items.find((item) => item.value === value)?.label;
+    } else if (typeof items === "object" && value in items) {
+      return items[value as keyof typeof items] as ReactNode;
+    }
+  }
+
+  function renderText(value: undefined | string | string[]) {
+    if (!value || !items || value.length === 0) {
+      return placeholder;
+    }
+
+    if (typeof value === "string") {
+      return findValue(value);
+    } else {
+      return [
+        findValue(value[0]) || value[0],
+        value.length > 1 ? ` (+${value.length - 1} more)` : "",
+      ];
+    }
+  }
+
+  return renderText;
+}

package/src/components/select/select.module.css

@@ -0,0 +1,63 @@
+.select__trigger {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-4);
+  padding: 0 var(--space-8);
+  height: var(--space-32);
+
+  &:not([disabled], [data-disabled]) {
+    color: var(--foreground-default);
+  }
+}
+
+/* stylelint-disable-next-line */
+[data-popup-open] .select__trigger-icon {
+  transform: rotate(180deg);
+}
+
+.select__list {
+  position: relative;
+  z-index: 40;
+  box-shadow: var(--shadow-1);
+  border: 1px solid var(--surface-interactive-border);
+  border-radius: var(--border-radius-default);
+  background-color: var(--surface-interactive-background);
+  min-width: var(--anchor-width);
+  max-height: var(--available-height);
+  overflow: hidden;
+}
+
+.select__item {
+  display: grid;
+  position: relative;
+  grid-template-columns: var(--space-16) 1fr;
+  align-items: center;
+  gap: var(--space-4);
+  cursor: default;
+  cursor: not-allowed;
+  outline: none;
+  padding: 0 var(--space-8);
+  width: 100%;
+  height: var(--space-32);
+  color: var(--foreground-dimmest);
+  user-select: none;
+
+  &:not([disabled], [data-disabled]) {
+    cursor: pointer;
+    color: var(--foreground-default);
+  }
+
+  &[data-highlighted] {
+    background-color: var(--surface-interactive-background-active);
+  }
+}
+
+.select__item-indicator {
+  grid-column-start: 1;
+}
+
+.select__item-text {
+  grid-column-start: 2;
+}

package/src/components/select/select.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { tokens } from "~/styles/tokens";
+
+import { Select } from ".";
+
+const meta = {
+  title: "Input/Select",
+  component: Select,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const items = {
+  cpp: "C++",
+  python: "Python",
+  javascript: "JavaScript",
+  ruby: "Ruby",
+};
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <Select
+      {...args}
+      style={{ width: tokens.space256 }}
+      placeholder="Select language"
+      items={items}
+    />
+  ),
+};
+
+export const SelectMultiple: Story = {
+  args: {
+    placeholder: "Select languages...",
+  },
+  render: (args) => (
+    <Select
+      style={{ width: tokens.space256 }}
+      multiple
+      defaultValue={["javascript"]}
+      items={items}
+      {...args}
+    />
+  ),
+};

package/src/components/separator/index.tsx

@@ -0,0 +1,28 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import clsx from "clsx";
+import type { ComponentProps } from "react";
+
+import styles from "./separator.module.css";
+
+export type SeparatorProps = ComponentProps<typeof SeparatorPrimitive> & {
+  /** Separator color */
+  color?: "default" | "stronger";
+};
+
+export function Separator({
+  color = "default",
+  className,
+  ...props
+}: SeparatorProps) {
+  return (
+    <SeparatorPrimitive
+      className={clsx(
+        styles["separator"],
+        styles[`separator_color_${color}`],
+        styles[`separator_orientation_${props.orientation || "horizontal"}`],
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/separator/separator.module.css

@@ -0,0 +1,24 @@
+.separator {
+  flex-grow: 0;
+  flex-shrink: 0;
+  outline: none;
+  border: none;
+}
+
+.separator_color_default {
+  background-color: var(--surface-interactive-border);
+}
+
+.separator_color_stronger {
+  background-color: var(--surface-interactive-border-hover);
+}
+
+.separator_orientation_horizontal {
+  height: 1px;
+  min-height: 1px;
+}
+
+.separator_orientation_vertical {
+  width: 1px;
+  min-width: 1px;
+}

package/src/components/separator/separator.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { tokens } from "~/styles/tokens";
+
+import { Separator } from ".";
+import { Heading } from "../heading";
+import { Text } from "../text";
+import { View } from "../view";
+
+const meta = {
+  title: "Separator",
+  component: Separator,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    color: "default",
+  },
+  render: (args) => (
+    <View style={{ gap: tokens.space12 }}>
+      <View style={{ gap: tokens.space2 }}>
+        <Heading level={2}>@koide-labs/ui</Heading>
+        <Text>It's @koide-labs/ui, built with CSS Modules and Base UI.</Text>
+      </View>
+      <Separator {...args} orientation="horizontal" />
+      <View style={{ flexDirection: "row", gap: tokens.space12 }}>
+        <Text>Home</Text>
+        <Separator {...args} orientation="vertical" />
+        <Text>Pricing</Text>
+        <Separator {...args} orientation="vertical" />
+        <Text>Blog</Text>
+      </View>
+    </View>
+  ),
+};

package/src/components/slider/index.tsx

@@ -0,0 +1,28 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import clsx from "clsx";
+
+import { View, type Color } from "../view";
+
+import styles from "./slider.module.css";
+
+export function Slider({
+  color = "primary",
+  ...props
+}: SliderPrimitive.Root.Props & {
+  color?: Color;
+}) {
+  return (
+    <SliderPrimitive.Root {...props}>
+      <SliderPrimitive.Control className={styles["slider__control"]}>
+        <View
+          render={<SliderPrimitive.Track />}
+          color={color}
+          className={styles["slider__track"]}
+        >
+          <SliderPrimitive.Indicator className={styles["slider__indicator"]} />
+          <SliderPrimitive.Thumb className={clsx(styles["slider__thumb"])} />
+        </View>
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  );
+}

package/src/components/slider/slider.module.css

@@ -0,0 +1,52 @@
+.slider__control {
+  display: flex;
+  align-items: center;
+  touch-action: none;
+  user-select: none;
+}
+
+.slider__track {
+  border-radius: var(--border-radius-round);
+  background-color: var(--surface-interactive-border);
+  width: 100%;
+  height: var(--space-4);
+  user-select: none;
+}
+
+.slider__indicator {
+  border-color: var(--view-colorway-default);
+  border-radius: var(--border-radius-round);
+  background-color: var(--view-colorway-dimmer);
+  user-select: none;
+
+  &:not([disabled], [data-disabled]) {
+    background-color: var(--view-colorway-default);
+  }
+}
+
+.slider__thumb {
+  cursor: not-allowed;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--border-radius-round);
+  background-color: var(--view-colorway-dimmer);
+  aspect-ratio: 1 / 1;
+  width: var(--space-16);
+  height: var(--space-16);
+  user-select: none;
+
+  &:not([disabled], [data-disabled]) {
+    cursor: ew-resize;
+    border-color: var(--view-colorway-default);
+    background-color: var(--view-colorway-default);
+  }
+
+  &:not([disabled], [data-disabled]):hover {
+    border-color: var(--view-colorway-stronger);
+  }
+
+  &:not([disabled], [data-disabled])[data-dragging] {
+    border-color: var(--view-colorway-stronger);
+    background-color: var(--view-colorway-default);
+  }
+}