@koide-labs/ui 0.0.0 → 0.0.2

package/src/components/icon/icon.module.css

@@ -1,36 +0,0 @@
-.icon {
-  --icon-size: var(--space-16);
-
-  vertical-align: middle;
-  width: var(--icon-size);
-  min-width: var(--icon-size);
-  height: var(--icon-size);
-  min-height: var(--icon-size);
-  font-size: var(--icon-size);
-}
-
-/* Maximize performance by declaring styles instead of inline styles */
-.icon_size_sm {
-  /* TODO revisit this - we kind of depend on icons to be at least 16 px, so maybe expose an "xs" size? idk */
-  --icon-size: var(--space-16);
-}
-
-.icon_size_md {
-  --icon-size: var(--space-16);
-}
-
-.icon_size_lg {
-  --icon-size: var(--space-20);
-}
-
-.icon_size_xl {
-  --icon-size: var(--space-24);
-}
-
-.icon_size_2xl {
-  --icon-size: var(--space-32);
-}
-
-.icon_size_3xl {
-  --icon-size: var(--space-48);
-}

package/src/components/icon/icon.stories.tsx

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { colorTokens, tokens } from "~/styles/tokens";
-
-import { Icon } from ".";
-
-const iconSizeOptions = ["sm", "md", "lg", "xl", "2xl", "3xl"] as const;
-
-const meta = {
-  title: "Icon",
-  component: Icon,
-  parameters: { layout: "centered" },
-  argTypes: {
-    color: {
-      control: "select",
-      options: Object.values(colorTokens),
-    },
-    size: {
-      control: "select",
-      options: iconSizeOptions,
-    },
-  },
-} satisfies Meta<typeof Icon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    name: "heart-fill",
-    color: tokens.primaryDefault,
-    size: "md",
-  },
-  render: (props) => (
-    <div>
-      <Icon {...props} />
-    </div>
-  ),
-};

package/src/components/icon/index.tsx

@@ -1,60 +0,0 @@
-import clsx from "clsx";
-import { type ComponentProps } from "react";
-import svgSprite from "remixicon/fonts/remixicon.symbol.svg";
-
-import { type ColorToken, type Size } from "~/styles/tokens";
-
-import { type IconName } from "./icon-names";
-
-import styles from "./icon.module.css";
-
-export interface IconProps extends Omit<ComponentProps<"svg">, "name"> {
-  /**
-   * Overrides the icon size provider.
-   * Defaults to "md".
-   */
-  size?: Size;
-
-  /** Icon name */
-  name: IconName;
-
-  /**
-   * Icon fill color
-   * You probably should provide a color token, but we allow any color
-   */
-  color?: ColorToken | (string & {});
-
-  /**
-   * Use like `img alt` attribute.
-   * Leave empty if icon is purely decorative.
-   */
-  alt?: string;
-}
-
-export function Icon({
-  size = "md",
-  name,
-  color,
-  alt,
-  className,
-  ...props
-}: IconProps) {
-  const href = `${svgSprite}#ri-${name}`;
-
-  return (
-    <svg
-      preserveAspectRatio="xMidYMin"
-      viewBox="0 0 24 24"
-      aria-hidden={!alt}
-      focusable={false}
-      xmlns="http://www.w3.org/2000/svg"
-      fill={color || "currentColor"}
-      className={clsx(styles["icon"], styles[`icon_size_${size}`], className)}
-      {...props}
-    >
-      {/* https://css-tricks.com/accessible-svg-icons/ */}
-      {alt ? <title>{alt}</title> : null}
-      <use xlinkHref={href} href={href} />
-    </svg>
-  );
-}

package/src/components/icon-button/icon-button.module.css

@@ -1,33 +0,0 @@
-.icon-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--border-radius-default);
-  aspect-ratio: 1 / 1;
-  width: var(--icon-button-size);
-  height: var(--icon-button-size);
-}
-
-.icon-button_size_sm {
-  --icon-button-size: var(--space-24);
-}
-
-.icon-button_size_md {
-  --icon-button-size: var(--space-32);
-}
-
-.icon-button_size_lg {
-  --icon-button-size: var(--space-40);
-}
-
-.icon-button_size_xl {
-  --icon-button-size: var(--space-48);
-}
-
-.icon-button_size_2xl {
-  --icon-button-size: var(--space-56);
-}
-
-.icon-button_size_3xl {
-  --icon-button-size: var(--space-64);
-}

package/src/components/icon-button/icon-button.stories.tsx

@@ -1,59 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { AllVariants } from "~/stories/components/all-variants";
-import { sizes } from "~/stories/data";
-
-import { IconButton } from ".";
-
-const meta = {
-  title: "IconButton",
-  component: IconButton,
-  parameters: { layout: "centered" },
-  argTypes: {
-    size: {
-      control: "select",
-      options: sizes,
-    },
-    interactive: {
-      control: "boolean",
-    },
-    loading: {
-      control: "boolean",
-    },
-  },
-} satisfies Meta<typeof IconButton>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    size: "md",
-    icon: "add-line",
-    alt: "Create a new project.",
-    interactive: true,
-    loading: false,
-  },
-  render: (args) => <IconButton {...args} />,
-};
-
-export const AllSizes: Story = {
-  args: {
-    icon: "add-line",
-    alt: "Create a new project.",
-  },
-  argTypes: {
-    size: {
-      control: false,
-    },
-  },
-  render: (props) => (
-    <AllVariants
-      variantName="size"
-      variants={sizes}
-      element={<IconButton interactive {...props} />}
-      style={{ flexDirection: "row" }}
-    />
-  ),
-};

package/src/components/icon-button/index.tsx

@@ -1,48 +0,0 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import clsx from "clsx";
-
-import { type Size } from "~/styles/tokens";
-
-import { Icon } from "../icon";
-import type { IconName } from "../icon/icon-names";
-import { View, type ViewProps } from "../view";
-
-import styles from "./icon-button.module.css";
-
-export type IconButtonProps = ViewProps<"button"> & {
-  /** Icon to display. */
-  icon: IconName;
-
-  /** Explain what the button does. Required for accessibility. */
-  alt: string;
-
-  /** What size should the IconButton be. Defaults to "md". */
-  size?: Size;
-};
-
-export function IconButton({
-  icon,
-  alt,
-  size = "md",
-  render,
-  ...props
-}: IconButtonProps) {
-  return (
-    <View<"button">
-      interactive={true}
-      render={
-        <ButtonPrimitive
-          className={clsx(
-            styles["icon-button"],
-            styles[`icon-button_size_${size}`],
-          )}
-          focusableWhenDisabled={!!props.loading}
-          render={render}
-        />
-      }
-      {...props}
-    >
-      <Icon name={icon} size={size} alt={alt} />
-    </View>
-  );
-}

package/src/components/inline-code/index.tsx

@@ -1,29 +0,0 @@
-import type { useRender } from "@base-ui/react";
-import clsx from "clsx";
-
-import { Surface } from "../surface";
-import { Text } from "../text";
-import type { Color } from "../view";
-
-import styles from "./inline-code.module.css";
-
-export interface InlineCodeProps extends useRender.ComponentProps<"span"> {
-  color?: Color;
-}
-
-export const InlineCode = ({ color, ...props }: InlineCodeProps) => {
-  return (
-    <Surface
-      elevated
-      className={clsx(
-        styles["inline-code"],
-        color && styles["inline-code_colorway"],
-      )}
-      color={color}
-    >
-      <Text size="sm" color="inherit">
-        <code {...props} />
-      </Text>
-    </Surface>
-  );
-};

package/src/components/inline-code/inline-code.module.css

@@ -1,13 +0,0 @@
-.inline-code {
-  display: inline;
-  border: 1px solid var(--surface-interactive-border);
-  border-radius: var(--border-radius-6);
-  padding: 0 var(--space-4);
-  line-height: var(--line-height-default);
-  font-family: var(--font-family-code);
-  overflow-wrap: anywhere;
-}
-
-.inline-code_colorway {
-  color: var(--view-colorway-default);
-}

package/src/components/inline-code/inline-code.stories.tsx

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { tokens } from "~/styles/tokens";
-
-import { InlineCode } from ".";
-import { Surface } from "../surface";
-import { Text } from "../text";
-
-const meta = {
-  title: "Code/Inline Code",
-  component: InlineCode,
-  parameters: { layout: "centered" },
-} satisfies Meta<typeof InlineCode>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    color: undefined,
-  },
-  render: (args) => (
-    <Surface style={{ padding: tokens.space16 }} elevated>
-      <Text>
-        Import the library with{" "}
-        <InlineCode {...args}>import * from "natmfat"</InlineCode>
-      </Text>
-    </Surface>
-  ),
-};

package/src/components/input/index.tsx

@@ -1,22 +0,0 @@
-import { Input as InputPrimitive } from "@base-ui/react/input";
-import clsx from "clsx";
-
-import { View } from "../view";
-
-import styles from "./input.module.css";
-
-export type InputProps = InputPrimitive.Props;
-
-export function Input({ className, ...props }: InputProps) {
-  return (
-    <View
-      interactive="fill-outline"
-      render={
-        <InputPrimitive
-          className={clsx(styles["input"], className)}
-          {...props}
-        />
-      }
-    />
-  );
-}

package/src/components/input/input.module.css

@@ -1,23 +0,0 @@
-.input {
-  flex: 1 1 0%;
-  outline: none;
-  padding: var(--space-4) var(--space-8);
-  height: var(--space-32);
-  min-height: var(--space-32);
-  font-size: var(--font-size-default);
-  line-height: var(--line-height-input);
-  font-family: var(--font-family-default);
-
-  &::placeholder {
-    color: var(--foreground-dimmest);
-  }
-
-  &:not([disabled], [data-disabled]) {
-    cursor: text;
-    color: var(--foreground-default);
-  }
-}
-
-.input_autosize {
-  resize: none;
-}

package/src/components/input/input.stories.tsx

@@ -1,52 +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 { Input } from ".";
-import { Surface } from "../surface";
-
-const meta = {
-  title: "Input/Text",
-  component: Input,
-  parameters: { layout: "centered" },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    placeholder: "Hello World",
-    disabled: false,
-  },
-  render: (args) => <Input {...args} style={{ width: tokens.space256 }} />,
-};
-
-export const AllInteractiveStyles: Story = {
-  args: {
-    placeholder: "Hello World",
-    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,
-          }}
-        >
-          <Input {...args} />
-        </Surface>
-      }
-    />
-  ),
-};

package/src/components/meter/index.tsx

@@ -1,55 +0,0 @@
-import { Meter as MeterPrimitive } from "@base-ui/react/meter";
-import clsx from "clsx";
-
-import { Text } from "../text";
-import { View, type Color } from "../view";
-
-import styles from "./meter.module.css";
-
-export type MeterProps = MeterPrimitive.Root.Props & {
-  /**
-   * What is this meter even for bro?
-   * If one is not provided, we render a standard meter (no label, no value).
-   * You can still provide one yourself through children.
-   * @example
-   * <Meter value={24}>
-   *    <MeterPrimitive.Label render={<Text />} />
-   *    <MeterPrimitive.Value render={<Text />} />
-   * </Meter>
-   */
-  label?: string;
-
-  /** Communicate purpose with color. Defaults to "primary". */
-  color?: Color;
-};
-
-export function Meter({
-  label,
-  color = "primary",
-  className,
-  children,
-  ...props
-}: MeterProps) {
-  return (
-    <View color={color}>
-      <MeterPrimitive.Root
-        className={clsx(styles["meter"], className)}
-        {...props}
-      >
-        {label ? (
-          <>
-            <Text render={<MeterPrimitive.Label />}>{label}</Text>
-            <Text
-              className={styles["meter__value"]}
-              render={<MeterPrimitive.Value />}
-            />
-          </>
-        ) : null}
-        {children}
-        <MeterPrimitive.Track className={styles["meter__track"]}>
-          <MeterPrimitive.Indicator className={styles["meter__indicator"]} />
-        </MeterPrimitive.Track>
-      </MeterPrimitive.Root>
-    </View>
-  );
-}

package/src/components/meter/meter.module.css

@@ -1,23 +0,0 @@
-.meter {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  row-gap: var(--space-4);
-}
-
-.meter__value {
-  grid-column-start: 2;
-  margin: 0;
-  text-align: right;
-}
-
-.meter__track {
-  grid-column: 1 / 3;
-  background-color: var(--surface-interactive-border);
-  height: var(--space-8);
-  overflow: hidden;
-}
-
-.meter__indicator {
-  transition: width var(--transition-duration-chill);
-  background-color: var(--view-colorway-default);
-}

package/src/components/meter/meter.stories.tsx

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { colors } from "~/stories/data";
-import { tokens } from "~/styles/tokens";
-
-import { Meter } from ".";
-
-const meta = {
-  title: "Meter",
-  component: Meter,
-  parameters: { layout: "centered" },
-  argTypes: {
-    color: {
-      control: "select",
-      options: colors,
-    },
-  },
-} satisfies Meta<typeof Meter>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    color: "orange",
-    label: "Storage used",
-    value: 24,
-  },
-  render: (args) => <Meter {...args} style={{ width: tokens.space256 }} />,
-};

package/src/components/multiline-input/index.tsx

@@ -1,58 +0,0 @@
-import type { useRender } from "@base-ui/react";
-import autosize from "autosize";
-import clsx from "clsx";
-import { useEffect, useRef } from "react";
-
-import { mergeRefs } from "~/-utils";
-
-import { View } from "../view";
-
-import styles from "../input/input.module.css";
-
-export interface MultilineInputProps extends useRender.ComponentProps<"textarea"> {
-  /** Automatically resize textarea. Defaults to false. */
-  autosize?: boolean;
-}
-
-export function MultilineInput({
-  autosize = false,
-  className,
-  ref,
-  ...props
-}: MultilineInputProps) {
-  const autosizeRef = useAutosize(autosize);
-
-  return (
-    <View
-      interactive="fill-outline"
-      render={
-        <textarea
-          className={clsx(
-            styles["input"],
-            autosize && styles["input_autosize"],
-            className,
-          )}
-          ref={mergeRefs(ref, autosizeRef)}
-          {...props}
-        ></textarea>
-      }
-    />
-  );
-}
-
-function useAutosize(enabled: boolean) {
-  const ref = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    const element = ref.current;
-    if (!element || !enabled) {
-      return;
-    }
-    autosize(element);
-    return () => {
-      autosize.destroy(element);
-    };
-  }, [enabled]);
-
-  return ref;
-}

package/src/components/multiline-input/multiline-input.stories.tsx

@@ -1,26 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { tokens } from "~/styles/tokens";
-
-import { MultilineInput } from ".";
-
-const meta = {
-  title: "Input/Textarea",
-  component: MultilineInput,
-  parameters: { layout: "centered" },
-} satisfies Meta<typeof MultilineInput>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    placeholder: "Hello World",
-    disabled: false,
-    autosize: true,
-  },
-  render: (args) => (
-    <MultilineInput {...args} style={{ width: tokens.space256 }} />
-  ),
-};