@koide-labs/ui 0.0.0 → 0.0.2

package/src/components/anchor/anchor.module.css

@@ -1,18 +0,0 @@
-.anchor {
-  cursor: pointer;
-  color: var(--primary-stronger);
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-default);
-  line-height: var(--line-height-default);
-  text-decoration: underline;
-
-  &:visited {
-    color: var(--blurple-stronger);
-  }
-}
-
-.anchor__icon {
-  /* you got me. a magic number in a sea of tokens. */
-  vertical-align: -5%;
-  margin-left: var(--space-2);
-}

package/src/components/anchor/anchor.stories.tsx

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { tokens } from "~/styles/tokens";
-
-import { Anchor } from ".";
-import { Surface } from "../surface";
-import { Text } from "../text";
-
-const meta = {
-  title: "Anchor",
-  component: Anchor,
-  parameters: { layout: "centered" },
-} satisfies Meta<typeof Anchor>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { href: "https://npham.dev", external: true },
-  render: (props) => (
-    <Surface elevated style={{ padding: tokens.space16 }}>
-      <Text>
-        Visit my amazing <Anchor {...props}>portfolio</Anchor> or perish.
-      </Text>
-    </Surface>
-  ),
-};

package/src/components/anchor/index.tsx

@@ -1,45 +0,0 @@
-import { mergeProps, useRender } from "@base-ui/react";
-
-import { Icon } from "../icon";
-
-import styles from "./anchor.module.css";
-
-export type AnchorProps = useRender.ComponentProps<"a"> & {
-  /**
-   * Open this link in a new tab
-   */
-  external?: boolean;
-};
-
-export function Anchor({ external, render, children, ...props }: AnchorProps) {
-  const element = useRender({
-    defaultTagName: "a",
-    render,
-    props: mergeProps(
-      {
-        className: styles["anchor"],
-        ...(external
-          ? {
-              target: "_blank",
-              rel: "noreferrer",
-            }
-          : {}),
-        children: (
-          <>
-            {children}
-            {external ? (
-              <Icon
-                name="external-link-line"
-                size="sm"
-                className={styles["anchor__icon"]}
-              />
-            ) : null}
-          </>
-        ),
-      },
-      props,
-    ),
-  });
-
-  return element;
-}

package/src/components/avatar/avatar.module.css

@@ -1,56 +0,0 @@
-.avatar {
-  display: flex;
-  position: relative;
-  flex-shrink: 0;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--outline-dimmest);
-  border-radius: var(--border-radius-round);
-  background-color: var(--background-highest);
-  width: var(--avatar-size);
-  height: var(--avatar-size);
-  overflow: hidden;
-}
-
-.avatar__image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.avatar__fallback {
-  display: flex;
-  flex: 1 1 0%;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--border-radius-round);
-  width: 100%;
-  height: 100%;
-  color: var(--foreground-dimmest);
-  font-size: calc(var(--avatar-size) / 2.5);
-}
-
-/* Avatar size variants */
-.avatar_size_sm {
-  --avatar-size: var(--space-24);
-}
-
-.avatar_size_md {
-  --avatar-size: var(--space-32);
-}
-
-.avatar_size_lg {
-  --avatar-size: var(--space-40);
-}
-
-.avatar_size_xl {
-  --avatar-size: var(--space-48);
-}
-
-.avatar_size_2xl {
-  --avatar-size: var(--space-56);
-}
-
-.avatar_size_3xl {
-  --avatar-size: var(--space-64);
-}

package/src/components/avatar/avatar.stories.tsx

@@ -1,61 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { AllVariants } from "~/stories/components/all-variants";
-import { sizes } from "~/stories/data";
-
-import { Avatar } from ".";
-
-const meta = {
-  title: "Avatar",
-  component: Avatar,
-  parameters: { layout: "centered" },
-  argTypes: {
-    size: {
-      control: "select",
-      options: sizes,
-    },
-  },
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    image: "https://avatars.githubusercontent.com/u/146884027?v=4",
-    username: "npham-dev",
-    size: "md",
-  },
-  render: (props) => <Avatar {...props} />,
-};
-
-export const Fallback: Story = {
-  args: {
-    username: "npham-dev",
-    size: "md",
-  },
-  render: (props) => <Avatar {...props} />,
-};
-
-export const AllSizes: Story = {
-  args: {
-    image: "https://avatars.githubusercontent.com/u/146884027?v=4",
-    username: "npham-dev",
-  },
-  argTypes: {
-    size: {
-      control: false,
-    },
-  },
-  render: (props) => (
-    <AllVariants
-      variantName="size"
-      variants={sizes}
-      element={<Avatar {...props} />}
-      style={{
-        flexDirection: "row",
-      }}
-    />
-  ),
-};

package/src/components/avatar/index.tsx

@@ -1,82 +0,0 @@
-import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
-import clsx from "clsx";
-
-import type { Size } from "~/styles/tokens";
-
-import styles from "./avatar.module.css";
-
-export interface AvatarProps extends AvatarPrimitive.Root.Props {
-  /**
-   * Avatar url; if not provided, uses fallback based on username or fullName.
-   */
-  image?: string | null;
-
-  /**
-   * Used for initials if avatar image is not provided.
-   */
-  username: string;
-
-  /**
-   * User's first & last name. Used for initials, takes precedence over username.
-   */
-  fullName?: string;
-
-  /**
-   * Size of the avatar, defaults to "md".
-   */
-  size?: Size;
-}
-
-export function Avatar({
-  image,
-  username,
-  fullName,
-  size = "md",
-  className,
-  ...props
-}: AvatarProps) {
-  const fallback = getAvatarFallback(username, fullName);
-  return (
-    <AvatarPrimitive.Root
-      className={clsx(
-        styles["avatar"],
-        styles[`avatar_size_${size}`],
-        className,
-      )}
-      {...props}
-    >
-      {image ? (
-        <AvatarPrimitive.Image
-          src={image}
-          className={styles["avatar__image"]}
-        />
-      ) : null}
-      <AvatarPrimitive.Fallback className={styles["avatar__fallback"]}>
-        {fallback}
-      </AvatarPrimitive.Fallback>
-    </AvatarPrimitive.Root>
-  );
-}
-
-/**
- * Create 2 letter avatar fallback (depending on  what is provided) \
- * Prioritizes full name over usernmae
- * @param username user selected name
- * @param fullName real name of the user
- * @returns 2 letter, uppercase avatar fallback
- */
-function getAvatarFallback(username: string, fullName?: string) {
-  let fallback = username.substring(0, 2);
-
-  if (fullName) {
-    // if full name w/ lastName is provided, use first and last initials
-    // otherwise use first two letters of the name
-    const [firstName, lastName] = fullName.split(" ");
-    fallback =
-      firstName && lastName
-        ? firstName.charAt(0) + lastName.charAt(0)
-        : fullName.substring(0, 2);
-  }
-
-  return fallback.toLocaleUpperCase();
-}

package/src/components/badge/badge.module.css

@@ -1,35 +0,0 @@
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-4);
-  cursor: default;
-  border-radius: var(--border-radius-16);
-  background-color: var(--view-colorway-dimmer);
-  padding: var(--space-4) var(--space-8);
-  height: var(--space-24);
-  color: var(--view-colorway-strongest);
-  font-size: var(--font-size-small);
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.badge_shiny {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  transition: none;
-  background-image: radial-gradient(
-    circle at top left,
-    var(--view-colorway-dimmest) 34%,
-    var(--view-colorway-dimmer) 50%,
-    var(--view-colorway-dimmest) 66%
-  );
-  background-position: left;
-  background-size: 300% 100%;
-
-  &:hover {
-    transition: background-position 600ms
-      var(--transition-timing-function-chill);
-    background-position: right;
-  }
-}

package/src/components/badge/badge.stories.tsx

@@ -1,60 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { colors } from "~/stories/data";
-import { disable } from "~/stories/utils";
-import { tokens } from "~/styles/tokens";
-
-import { Badge } from ".";
-import { View } from "../view";
-
-const meta = {
-  title: "Badge",
-  component: Badge,
-  parameters: { layout: "centered" },
-  argTypes: {
-    color: {
-      control: "select",
-      options: colors,
-    },
-  },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    color: "orange",
-    icon: "sparkling-line",
-    name: "Pro",
-    shiny: true,
-  },
-  render: (args) => <Badge {...args} />,
-};
-
-export const ExampleBadges: Story = {
-  argTypes: {
-    ...disable(["icon", "name", "color", "shiny", "tagline"]),
-  },
-  args: {
-    name: "",
-    color: "primary",
-  },
-  render: () => (
-    <View
-      style={{
-        flexDirection: "row",
-        flexWrap: "wrap",
-        gap: tokens.space8,
-        maxWidth: tokens.space256,
-      }}
-    >
-      <Badge name="Admin" color="yellow" />
-      <Badge name="Detective" color="green" />
-      <Badge icon="checkbox-circle-line" name="Verified" color="green" />
-      <Badge name="Language Jammer" color="purple" />
-      <Badge name="Community Monitor" color="teal" />
-    </View>
-  ),
-};

package/src/components/badge/index.tsx

@@ -1,71 +0,0 @@
-import { mergeProps, useRender } from "@base-ui/react";
-import { clsx } from "clsx";
-
-import { Icon } from "../icon";
-import type { IconName } from "../icon/icon-names";
-import { Text } from "../text";
-import { Tooltip } from "../tooltip";
-import { View, type Color } from "../view";
-
-import styles from "./badge.module.css";
-
-export interface BadgeProps extends Omit<
-  useRender.ComponentProps<"span">,
-  "children"
-> {
-  /** Optional icon, goes before name */
-  icon?: IconName;
-
-  /** Name of badge to be displayed, goes after icon */
-  name: string;
-
-  /** Communicate purpose with color. Defaults to "primary". */
-  color?: Color;
-
-  /** Add shiny hover effect. */
-  shiny?: boolean;
-
-  /** Tagline of badge. */
-  tagline?: string;
-}
-
-export function Badge({
-  icon,
-  name,
-  color,
-  shiny,
-  tagline,
-  render,
-  ...props
-}: BadgeProps) {
-  const element = useRender({
-    defaultTagName: "span",
-    render,
-    props: mergeProps(
-      {
-        className: clsx(styles["badge"], shiny && styles["badge_shiny"]),
-        children: (
-          <>
-            {icon ? <Icon name={icon} /> : null}
-            {name}
-          </>
-        ),
-      },
-      props,
-    ),
-  });
-
-  const label = <View color={color}>{element}</View>;
-
-  if (!tagline) {
-    return label;
-  }
-
-  return (
-    <Tooltip trigger={label}>
-      <Text size="sm" multiline>
-        {tagline}
-      </Text>
-    </Tooltip>
-  );
-}

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

@@ -1,42 +0,0 @@
-.button {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: var(--space-8);
-  box-sizing: border-box;
-  border-radius: var(--border-radius-default);
-  padding-inline: var(--button-padding-inline);
-  height: var(--button-height);
-  white-space: nowrap;
-}
-
-.button_height_sm {
-  --button-padding-inline: var(--space-12);
-  --button-height: var(--space-28);
-}
-
-.button_height_md {
-  --button-padding-inline: var(--space-16);
-  --button-height: var(--space-32);
-}
-
-.button_height_lg {
-  --button-padding-inline: var(--space-20);
-  --button-height: var(--space-40);
-}
-
-.button_height_xl {
-  --button-padding-inline: var(--space-24);
-  --button-height: var(--space-48);
-}
-
-.button_height_2xl {
-  --button-padding-inline: var(--space-28);
-  --button-height: var(--space-56);
-}
-
-.button_height_3xl {
-  --button-padding-inline: var(--space-32);
-  --button-height: var(--space-64);
-}

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

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

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