@koide-labs/ui 0.0.0 → 0.0.2

package/src/components/radio/index.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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