@koide-labs/ui 0.0.0 → 0.0.1

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/command/index.tsx

@@ -1,108 +0,0 @@
-import clsx from "clsx";
-import { Command as CommandPrimitive } from "cmdk";
-import type { ComponentProps } from "react";
-
-import { textify } from "~/-utils";
-
-import { Dialog, type BaseDialogProps } from "../dialog";
-import { Icon } from "../icon";
-import type { IconName } from "../icon/icon-names";
-import { Separator } from "../separator";
-import { Text } from "../text";
-import { View } from "../view";
-
-import styles from "./command.module.css";
-
-// TODO put background in dialog base props
-export type CommandDialogProps = Omit<
-  BaseDialogProps,
-  "title" | "description" | "background"
-> & {
-  placeholder?: string;
-};
-
-export function CommandDialog({
-  placeholder,
-  children,
-  ...props
-}: CommandDialogProps) {
-  return (
-    <Dialog
-      width="sm"
-      background="default"
-      className={styles["command"]}
-      {...props}
-      closable
-    >
-      <CommandPrimitive>
-        <View className={styles["command__input-root"]}>
-          <View
-            interactive="fill-outline"
-            className={styles["command__input"]}
-            render={<CommandPrimitive.Input placeholder={placeholder} />}
-          />
-          <Icon name="search-line" className={styles["command__input-icon"]} />
-        </View>
-
-        <CommandPrimitive.List className={styles["command__list"]}>
-          <CommandPrimitive.Empty>
-            <View className={styles["command__empty"]}>
-              <Text color="dimmer">No results found.</Text>
-            </View>
-          </CommandPrimitive.Empty>
-
-          {children}
-        </CommandPrimitive.List>
-      </CommandPrimitive>
-    </Dialog>
-  );
-}
-
-export function CommandGroup({
-  className,
-  ...props
-}: ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      className={clsx(styles["command__group"], className)}
-      {...props}
-    />
-  );
-}
-
-export function CommandSeparator(
-  props: ComponentProps<typeof CommandPrimitive.Separator>,
-) {
-  return <Separator render={<CommandPrimitive.Separator {...props} />} />;
-}
-
-export function CommandItem({
-  shortcut,
-  icon,
-  className,
-  children,
-  ...props
-}: ComponentProps<typeof CommandPrimitive.Item> & {
-  shortcut?: string;
-  icon?: IconName;
-}) {
-  return (
-    <View
-      interactive="list-item"
-      className={clsx(styles["command__item"], className)}
-      render={<CommandPrimitive.Item {...props} />}
-    >
-      {icon ? <Icon name={icon} /> : undefined}
-      {textify(children)}
-      {shortcut ? (
-        <Text
-          className={clsx(styles["command__shortcut"])}
-          color="dimmer"
-          size="sm"
-        >
-          {shortcut}
-        </Text>
-      ) : null}
-    </View>
-  );
-}

package/src/components/context-menu/context-menu.module.css

@@ -1,36 +0,0 @@
-.context-menu {
-  gap: var(--space-4);
-  box-shadow: var(--shadow-1);
-  border: 1px solid var(--outline-dimmest);
-  border-radius: var(--border-radius-default);
-  padding: var(--space-4);
-  user-select: none;
-}
-
-.context-menu__item {
-  position: relative;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--space-4);
-  outline: none;
-  border: none;
-  border-radius: var(--border-radius-6);
-  padding: var(--space-2) var(--space-4);
-  padding-left: var(--space-24);
-}
-
-.context-menu__item-icon {
-  position: absolute;
-  top: 50%;
-  left: var(--space-4);
-  transform: translateY(-50%);
-}
-
-.context-menu__item-shortcut {
-  margin-left: auto;
-  letter-spacing: 0.1em;
-}
-
-.context-menu__label {
-  padding: var(--space-2) var(--space-4);
-}