@koide-labs/ui 0.0.0

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

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { AllVariants } from "~/stories/components/all-variants";
+import { colorVariants, sizes } from "~/stories/data";
+import { tokens } from "~/styles/tokens";
+
+import { Button } from ".";
+import { Surface } from "../surface";
+import { Text } from "../text";
+import { View } from "../view";
+
+const meta = {
+  title: "Button",
+  component: Button,
+  parameters: { layout: "centered" },
+  argTypes: {
+    size: {
+      control: "select",
+      options: sizes,
+    },
+    loading: {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    interactive: "primary_fill",
+    leftIcon: "square-line",
+  },
+  render: (props) => <Button {...props}>Hello World</Button>,
+};
+
+export const Link: Story = {
+  args: {
+    size: "md",
+    leftIcon: "external-link-line",
+    interactive: "primary_fill",
+    loading: false,
+  },
+  render: (args) => (
+    <Button
+      {...args}
+      render={<a href="https://natmfat.com" target="_blank" rel="noreferrer" />}
+      nativeButton={false}
+    >
+      Open Website
+    </Button>
+  ),
+};
+
+export const AllSizes: Story = {
+  args: {
+    interactive: "fill",
+    leftIcon: "square-line",
+  },
+  render: (args) => (
+    <AllVariants
+      variantName="size"
+      variants={sizes}
+      element={
+        <Button style={{ width: "fit-content" }} {...args}>
+          Hello World
+        </Button>
+      }
+    />
+  ),
+};
+
+<Surface elevated style={{ gap: tokens.space16, padding: tokens.space16 }}>
+  {colorVariants.map((variant) => (
+    <View key={variant} style={{ gap: tokens.space2 }}>
+      <Text color="dimmest">{variant}</Text>
+    </View>
+  ))}
+</Surface>;
+
+export const AllPrimaryVariants: Story = {
+  argTypes: {
+    interactive: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    size: "md",
+    leftIcon: "square-line",
+    loading: false,
+    disabled: false,
+  },
+  render: (args) => (
+    <AllVariants
+      variantName="interactive"
+      variants={colorVariants.map((variant) => `primary_${variant}`)}
+      element={
+        <Button style={{ width: "fit-content" }} {...args}>
+          Hello World
+        </Button>
+      }
+    />
+  ),
+};

package/src/components/button/index.tsx

@@ -0,0 +1,63 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import clsx from "clsx";
+import type { ComponentProps } from "react";
+
+import { textify } from "~/-utils";
+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 "./button.module.css";
+
+export type ButtonProps = ComponentProps<"button"> &
+  ViewProps<"button"> & {
+    /**
+     * Size of the button
+     */
+    size?: Size;
+
+    /**
+     * Icon to display on the left side of the button content
+     */
+    leftIcon?: IconName;
+
+    /**
+     * Icon to display on the right side of the button content
+     */
+    rightIcon?: IconName;
+
+    /**
+     * The button can remain keyboard accessible while being rendered as another tag
+     * {@link https://base-ui.com/react/components/button}
+     */
+    nativeButton?: boolean;
+  };
+
+export function Button({
+  size = "md",
+  leftIcon,
+  rightIcon,
+  children,
+  render,
+  ...props
+}: ButtonProps) {
+  return (
+    <View<"button">
+      interactive={true}
+      render={
+        <ButtonPrimitive
+          className={clsx(styles["button"], styles[`button_height_${size}`])}
+          focusableWhenDisabled={!!props.loading}
+          render={render}
+        />
+      }
+      {...props}
+    >
+      {leftIcon ? <Icon name={leftIcon} size={size} /> : null}
+      {textify(children, { size, color: "inherit" })}
+      {rightIcon ? <Icon name={rightIcon} size={size} /> : null}
+    </View>
+  );
+}

package/src/components/checkbox/checkbox.module.css

@@ -0,0 +1,36 @@
+.checkbox__label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-8);
+}
+
+.checkbox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--border-radius-4);
+  width: 20px;
+  height: 20px;
+
+  &[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);
+    }
+  }
+}
+
+.checkbox__indicator {
+  pointer-events: none;
+  color: var(--white);
+
+  &[data-unchecked] {
+    display: none;
+  }
+}

package/src/components/checkbox/checkbox.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Checkbox } from ".";
+
+const meta = {
+  title: "Input/Checkbox",
+  component: Checkbox,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+    label: "Enable notifications",
+  },
+  render: (args) => <Checkbox {...args} />,
+};

package/src/components/checkbox/index.tsx

@@ -0,0 +1,41 @@
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+
+import { Icon } from "../icon";
+import { Text } from "../text";
+import { View, type Color } from "../view";
+
+import styles from "./checkbox.module.css";
+
+export interface CheckboxProps extends CheckboxPrimitive.Root.Props {
+  /** Optional color for checkbox. Defaults to "primary". */
+  color?: Color;
+
+  /** Optional label. If one is provided, we wrap radio in a label element. Otherwise, we just return a standard radio. */
+  label?: string;
+}
+
+export function Checkbox({ color, label, ...props }: CheckboxProps) {
+  const checkbox = (
+    <View
+      color={color}
+      interactive="fill-outline"
+      render={<CheckboxPrimitive.Root aria-label={label} {...props} />}
+      className={styles["checkbox"]}
+    >
+      <CheckboxPrimitive.Indicator className={styles["checkbox__indicator"]}>
+        <Icon name="check-line" size="sm" />
+      </CheckboxPrimitive.Indicator>
+    </View>
+  );
+
+  if (label) {
+    return (
+      <label className={styles["checkbox__label"]}>
+        {checkbox}
+        <Text>{label}</Text>
+      </label>
+    );
+  }
+
+  return checkbox;
+}

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

@@ -0,0 +1,20 @@
+.code {
+  border-radius: var(--border-radius-default);
+  padding: var(--space-8);
+}
+
+.code_title {
+  border-top-left-radius: 0;
+}
+
+.code__value {
+  font-size: var(--font-size-default);
+  font-family: var(--font-family-code);
+}
+
+.code__title {
+  border-top-right-radius: var(--border-radius-default);
+  border-top-left-radius: var(--border-radius-default);
+  padding: var(--space-4) var(--space-8);
+  width: fit-content;
+}

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Code } from ".";
+
+const meta = {
+  title: "Code/Code",
+  component: Code,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Code>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: `import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Code } from ".";
+
+const meta = {
+    title: "Code/Code",
+    component: Code,
+    parameters: { layout: "centered" },
+} satisfies Meta<typeof Code>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        value: \`console.log("hello world")\`,
+        language: "javascript",
+    },
+    render: (args) => <Code {...args} />,
+};`,
+    language: "javascript",
+    title: "code.stories.tsx",
+  },
+  render: (args) => <Code {...args} />,
+};

package/src/components/code/index.tsx

@@ -0,0 +1,73 @@
+import clsx from "clsx";
+import Prism from "prismjs";
+import { useMemo } from "react";
+
+import { Surface } from "../surface";
+import { Text } from "../text";
+import { View } from "../view";
+
+/**
+ * Are you looking for themes?
+ * You should define theme in [data-theme].
+ *
+ * I highly recommend using "postcss-nested-import", so you can do stuff like
+ * [data-theme="light"] {
+ *  @nested-import "prismjs/themes/prism.css";
+ * }
+ */
+
+import styles from "./code.module.css";
+
+export interface CodeProps {
+  /** Use a specific language (you must import the themes you need) */
+  language?: string;
+
+  /** Optional file name or title */
+  title?: string;
+
+  className?: string;
+
+  children?: string;
+}
+
+export function Code({
+  language = "javascript",
+  children = "",
+  title,
+  className,
+}: CodeProps) {
+  const html = useMemo(
+    () =>
+      Prism.highlight(
+        children,
+        Prism.languages[language] ?? Prism.languages.javascript,
+        language,
+      ),
+    [children, language],
+  );
+
+  return (
+    <View className={className}>
+      {title ? (
+        <Surface elevated className={styles["code__title"]}>
+          <Text size="sm" color="dimmer">
+            {title}
+          </Text>
+        </Surface>
+      ) : null}
+      <Surface
+        elevated
+        className={clsx(styles["code"], title && styles["code_title"])}
+      >
+        <pre>
+          <code
+            className={styles["code__value"]}
+            dangerouslySetInnerHTML={{
+              __html: html,
+            }}
+          ></code>
+        </pre>
+      </Surface>
+    </View>
+  );
+}

package/src/components/collapse/collapse.module.css

@@ -0,0 +1,27 @@
+.collapse {
+  opacity: 0;
+  transition:
+    height var(--transition-duration-chill)
+      var(--transition-timing-function-chill),
+    opacity var(--transition-duration-chill)
+      var(--transition-timing-function-chill);
+  height: 0;
+  overflow-y: hidden;
+}
+
+.collapse_expand {
+  opacity: 1;
+  height: var(--collapse-height);
+}
+
+.collapse_hidden {
+  position: fixed;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  opacity: 0;
+  z-index: 0;
+  height: fit-content;
+  pointer-events: none;
+  user-select: none;
+}

package/src/components/collapse/collapse.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Collapse } from ".";
+import { Text } from "../text";
+
+const meta = {
+  title: "Collapse",
+  component: Collapse,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Collapse>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    expand: true,
+  },
+  render: (args) => (
+    <Collapse {...args}>
+      <Text color="inherit" multiline>
+        Hello world
+      </Text>
+    </Collapse>
+  ),
+};

package/src/components/collapse/index.tsx

@@ -0,0 +1,59 @@
+import { mergeProps, useRender } from "@base-ui/react";
+import clsx from "clsx";
+import { useLayoutEffect, useRef, useState, type ReactNode } from "react";
+
+import styles from "./collapse.module.css";
+
+interface CollapseProps extends useRender.ComponentProps<"div"> {
+  /** Shrink or expand the div. Defaults to true. */
+  expand?: boolean;
+
+  children?: ReactNode;
+
+  /** Supplied as a dependency to recalculate the height of the children */
+  recalculate?: unknown;
+}
+
+export function Collapse({
+  expand = true,
+  render,
+  recalculate,
+  ...props
+}: CollapseProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(0);
+
+  // calculate height of children
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const clonedRef = ref.current.cloneNode(true) as HTMLElement;
+    clonedRef.removeAttribute("style");
+    clonedRef.style.width = `${ref.current.offsetWidth}px`;
+    clonedRef.className = styles["collapse_hidden"];
+    document.body.appendChild(clonedRef);
+    setHeight(clonedRef.offsetHeight);
+    clonedRef.remove();
+  }, [recalculate]);
+
+  const element = useRender({
+    defaultTagName: "div",
+    render,
+    ref,
+    props: mergeProps(
+      {
+        "aria-hidden": !expand,
+        className: clsx(
+          styles["collapse"],
+          expand && styles["collapse_expand"],
+        ),
+        style: { "--collapse-height": `${height}px` },
+      },
+      props,
+    ),
+  });
+
+  return element;
+}

package/src/components/command/command.module.css

@@ -0,0 +1,95 @@
+.command {
+  --command-padding: var(--space-6);
+
+  border: none;
+  padding: 0;
+
+  /* stylelint-disable-next-line */
+  [data-framework-close] {
+    top: var(--space-4);
+    right: var(--space-4);
+  }
+}
+
+.command__empty {
+  padding: var(--space-28) var(--space-16);
+  padding-top: calc(var(--space-28) + var(--command-padding));
+  text-align: center;
+}
+
+.command__input-root {
+  position: relative;
+  height: var(--space-32);
+}
+
+.command__input {
+  flex-grow: 1;
+  flex-shrink: 1;
+  border-bottom-right-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  background-color: transparent;
+  padding: var(--space-4) var(--space-32);
+  width: 100%;
+  height: 100%;
+  line-height: var(--line-height-input);
+
+  &::placeholder {
+    color: var(--foreground-dimmest);
+  }
+
+  &:not([disabled], [data-disabled]) {
+    cursor: text;
+  }
+}
+
+.command__input-icon {
+  position: absolute;
+  top: var(--space-8);
+  left: var(--space-8);
+}
+
+.command__list {
+  border: 1px solid var(--surface-interactive-border);
+  border-top: 0;
+  border-bottom-right-radius: var(--border-radius-default) !important;
+  border-bottom-left-radius: var(--border-radius-default) !important;
+  padding-bottom: var(--command-padding);
+  max-height: var(--space-256);
+  overflow: hidden auto;
+}
+
+.command__group {
+  padding-top: var(--space-6);
+
+  /* stylelint-disable-next-line */
+  [cmdk-group-heading] {
+    border: 1px solid transparent;
+    padding: 0 var(--space-12) var(--space-2) var(--space-12);
+    color: var(--foreground-dimmer);
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-small);
+  }
+}
+
+.command__item {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-8);
+  padding: var(--space-4) var(--space-12);
+  height: var(--space-32);
+  user-select: none;
+
+  &[data-selected="true"] {
+    background-color: var(--interactive-background);
+  }
+}
+
+.command__shortcut {
+  margin-left: auto;
+
+  /*
+    https://tailwindcss.com/docs/letter-spacing
+    tracking widest
+    */
+  letter-spacing: 0.1em;
+}

package/src/components/command/command.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CommandSeparator } from "cmdk";
+
+import { CommandDialog, CommandGroup, CommandItem } from ".";
+import { Button } from "../button";
+
+const meta = {
+  title: "Dialog/Command Dialog",
+  component: CommandDialog,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof CommandDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <CommandDialog
+      trigger={<Button children="Open Command Dialog" />}
+      placeholder="Search and run commands."
+      {...args}
+    >
+      <CommandGroup heading="Suggestions">
+        <CommandItem icon="calendar-line" children="Calendar" shortcut="⌘+C" />
+        <CommandItem icon="search-line" children="Search Emoji" />
+        <CommandItem icon="calculator-line" children="Calculator" />
+      </CommandGroup>
+      <CommandSeparator />
+      <CommandGroup heading="Settings">
+        <CommandItem icon="user-line" children="Profile" />
+        <CommandItem icon="mail-line" children="Mail" />
+        <CommandItem icon="settings-4-line" children="Settings" />
+      </CommandGroup>
+    </CommandDialog>
+  ),
+};