@koide-labs/ui 0.0.0

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

@@ -0,0 +1,74 @@
+import { NumberField } from "@base-ui/react/number-field";
+import clsx from "clsx";
+import { useId } from "react";
+
+import { IconButton } from "../icon-button";
+import { Input } from "../input";
+import { Separator } from "../separator";
+import { Text } from "../text";
+import { View } from "../view";
+
+import styles from "./number-input.module.css";
+
+//  TODO find icon for scrub area
+
+export type NumberInputProps = NumberField.Root.Props & {
+  /** Optional label, includes scrub area */
+  label?: string;
+};
+
+export function NumberInput({
+  label,
+  /** Apply className to NumberField.Input */
+  className,
+  /** Apply style to NumberField.Input */
+  style,
+  ...props
+}: NumberInputProps) {
+  const defaultId = useId();
+  const id = props.id || defaultId;
+  return (
+    <NumberField.Root
+      id={id}
+      className={styles["number-input__root"]}
+      {...props}
+    >
+      {label ? (
+        <NumberField.ScrubArea className={styles["number-input__scrub-area"]}>
+          <label htmlFor={id}>
+            <Text color="dimmer">{label}</Text>
+          </label>
+        </NumberField.ScrubArea>
+      ) : null}
+
+      <NumberField.Group className={styles["number-input__group"]}>
+        <Input
+          render={
+            <NumberField.Input
+              className={clsx(styles["number-input"], className)}
+              style={style}
+            />
+          }
+        />
+        <View className={styles["number-input__controls"]}>
+          <IconButton
+            size="sm"
+            alt="Decrement"
+            icon="subtract-line"
+            render={<NumberField.Decrement />}
+          />
+          <Separator
+            orientation="vertical"
+            className={styles["number-input__separator"]}
+          />
+          <IconButton
+            size="sm"
+            alt="Increment"
+            icon="add-line"
+            render={<NumberField.Increment />}
+          />
+        </View>
+      </NumberField.Group>
+    </NumberField.Root>
+  );
+}

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

@@ -0,0 +1,41 @@
+.number-input__root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+/*
+  https://stackoverflow.com/questions/72789466/remove-the-up-down-increment-decrement-buttons-on-number-inputs-using-css
+  Hide increment/decrement buttons on input
+*/
+.number-input[type="number"]::-webkit-inner-spin-button,
+.number-input[type="number"]::-webkit-outer-spin-button {
+  /* stylelint-disable-next-line */
+  -webkit-appearance: none;
+  padding-right: var(--space-32);
+  text-overflow: ellipsis;
+}
+
+.number-input__scrub-area {
+  cursor: ew-resize;
+  user-select: none;
+}
+
+.number-input__group {
+  position: relative;
+}
+
+.number-input__controls {
+  display: flex;
+  position: absolute;
+  top: 50%;
+  right: var(--space-4);
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-4);
+  transform: translateY(-50%);
+}
+
+.number-input__separator {
+  height: var(--space-16);
+}

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { tokens } from "~/styles/tokens";
+
+import { NumberInput } from ".";
+
+const meta = {
+  title: "Input/Number",
+  component: NumberInput,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof NumberInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Amount",
+  },
+  render: (args) => (
+    <NumberInput {...args} style={{ width: tokens.space256 }} />
+  ),
+};

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

@@ -0,0 +1,24 @@
+import { useState } from "react";
+
+import { IconButton } from "../icon-button";
+import { Input, type InputProps } from "../input";
+import { View } from "../view";
+
+import styles from "./password-input.module.css";
+
+export function PasswordInput(props: Omit<InputProps, "type">) {
+  const [show, setShow] = useState(false);
+  return (
+    <View className={styles["password-input__root"]}>
+      <Input type={show ? "text" : "password"} {...props} />
+      <IconButton
+        alt={show ? "Hide password" : "Show password"}
+        icon={show ? "eye-line" : "eye-close-line"}
+        className={styles["password-input__eye"]}
+        type="button"
+        size="sm"
+        onClick={() => setShow((prevShow) => !prevShow)}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,10 @@
+.password-input__root {
+  position: relative;
+}
+
+.password-input__eye {
+  position: absolute;
+  top: 50%;
+  right: var(--space-2);
+  transform: translateY(-50%);
+}

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

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

package/src/components/pill/index.tsx

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+
+import { textify } from "~/-utils";
+
+import { Icon } from "../icon";
+import type { IconName } from "../icon/icon-names";
+import { View, type ViewProps } from "../view";
+
+import styles from "./pill.module.css";
+
+export type PillProps = ViewProps & {
+  /**
+   * Icon to display on the left side of the pill content
+   */
+  leftIcon?: IconName;
+
+  /**
+   * Icon to display on the right side of the pill content
+   */
+  rightIcon?: IconName;
+};
+
+export function Pill({
+  leftIcon,
+  rightIcon,
+  className,
+  children,
+  ...props
+}: PillProps) {
+  return (
+    <View
+      className={clsx(
+        styles["pill"],
+        leftIcon && styles["pill_icon_left"],
+        rightIcon && styles["pill_icon_right"],
+        className,
+      )}
+      {...props}
+    >
+      {leftIcon ? <Icon name={leftIcon} /> : null}
+      {textify(children, { color: "inherit" })}
+      {rightIcon ? <Icon name={rightIcon} /> : null}
+    </View>
+  );
+}

package/src/components/pill/pill.module.css

@@ -0,0 +1,22 @@
+.pill {
+  flex-shrink: 1;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-4);
+  border-radius: var(--border-radius-round) !important;
+  padding-right: var(--space-8);
+  padding-left: var(--space-8);
+  height: var(--space-24);
+  font-size: var(--font-size-small);
+  user-select: none;
+  white-space: nowrap;
+}
+
+.pill_icon_left {
+  padding-left: var(--space-4);
+}
+
+.pill_icon_right {
+  padding-right: var(--space-4);
+}

package/src/components/pill/pill.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { colors, colorway, interactiveStyles } from "~/stories/data";
+import { disable } from "~/stories/utils";
+import { tokens } from "~/styles/tokens";
+
+import { Pill } from ".";
+import { Text } from "../text";
+import { View } from "../view";
+
+const meta = {
+  title: "Pill",
+  component: Pill,
+  parameters: { layout: "centered" },
+  argTypes: {
+    ...disable(["color", "loading"]),
+    interactive: {
+      control: "select",
+      options: [...interactiveStyles, ...colorway],
+    },
+  },
+} satisfies Meta<typeof Pill>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    interactive: "primary_mute-static",
+    leftIcon: "time-line",
+  },
+  render: (args) => <Pill {...args} children="Beginner friendly" />,
+};
+
+export const AllVariants: Story = {
+  argTypes: {
+    ...disable(["interactive", "color", "loading"]),
+  },
+  render: () => (
+    <View style={{ gap: tokens.space8 }}>
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          gap: tokens.space8,
+          width: "100%",
+        }}
+      >
+        <Pill interactive="fill">#python</Pill>
+        <Pill interactive="outline">#game</Pill>
+        <Text size="sm">interactive</Text>
+      </View>
+
+      {colors.map((color) => (
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            gap: tokens.space8,
+          }}
+          key={color}
+        >
+          <Pill interactive={`${color}_fill`} render={<button />}>
+            #python
+          </Pill>
+
+          <Pill interactive={`${color}_fill-static`}>#game</Pill>
+
+          <Pill leftIcon="time-line" interactive={`${color}_mute-static`}>
+            Beginner friendly
+          </Pill>
+
+          <Pill rightIcon="star-line" interactive={`${color}_outline-static`}>
+            Beginner friendly
+          </Pill>
+
+          <Text size="sm">{color}</Text>
+        </View>
+      ))}
+    </View>
+  ),
+};

package/src/components/popover/index.tsx

@@ -0,0 +1,94 @@
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import clsx from "clsx";
+import type { ReactElement, ReactNode } from "react";
+
+import { Heading } from "../heading";
+import { Surface, type Background } from "../surface";
+import { Text } from "../text";
+import { TooltipArrow } from "../tooltip/tooltip-arrow";
+import { View } from "../view";
+
+import transitionStyles from "../../styles/transitions.module.css";
+import tooltipStyles from "../tooltip/tooltip.module.css";
+import styles from "./popover.module.css";
+
+type PopoverRootProps = Omit<PopoverPrimitive.Root.Props, "children">;
+type PopoverPositionerProps = Pick<
+  PopoverPrimitive.Positioner.Props,
+  "align" | "side"
+>;
+
+export type PopoverProps = PopoverRootProps &
+  PopoverPositionerProps & {
+    /** Optional title description. */
+    title?: string;
+
+    /** Optional popover description. */
+    description?: string;
+
+    /** Specify trigger to open popover. */
+    trigger?: ReactElement;
+
+    /** Surface background popover should use. Defaults to "root". */
+    background?: Background;
+
+    /** Apply className to PopoverPrimitive.Popup */
+    className?: string;
+
+    /** Popover content */
+    children?: ReactNode;
+  };
+
+export function Popover({
+  align,
+  side,
+  title,
+  description,
+  background = "root",
+  trigger,
+  className,
+  children,
+  ...props
+}: PopoverProps) {
+  return (
+    <PopoverPrimitive.Root {...props}>
+      {trigger ? <PopoverPrimitive.Trigger render={trigger} /> : null}
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Positioner align={align} side={side} sideOffset={8}>
+          <PopoverPrimitive.Popup
+            render={<Surface background={background} />}
+            className={clsx(
+              tooltipStyles["tooltip"],
+              styles["popover"],
+              transitionStyles["transition_scale"],
+              className,
+            )}
+          >
+            <PopoverPrimitive.Arrow className={tooltipStyles["tooltip__arrow"]}>
+              <TooltipArrow />
+            </PopoverPrimitive.Arrow>
+            {title || description ? (
+              <View className={styles["popover__header"]}>
+                {title ? (
+                  <PopoverPrimitive.Title
+                    render={<Heading level={2} size="2xl" />}
+                  >
+                    {title}
+                  </PopoverPrimitive.Title>
+                ) : null}
+                {description ? (
+                  <PopoverPrimitive.Description
+                    render={<Text color="dimmer" />}
+                  >
+                    {description}
+                  </PopoverPrimitive.Description>
+                ) : null}
+              </View>
+            ) : null}
+            {children}
+          </PopoverPrimitive.Popup>
+        </PopoverPrimitive.Positioner>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}

package/src/components/popover/popover.module.css

@@ -0,0 +1,8 @@
+.popover {
+  gap: var(--space-8);
+  padding: var(--space-8);
+}
+
+.popover__header {
+  gap: var(--space-4);
+}

package/src/components/popover/popover.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { surfaceBackgrounds } from "~/stories/data";
+import { disable } from "~/stories/utils";
+
+import { Popover } from ".";
+import { IconButton } from "../icon-button";
+
+const meta = {
+  title: "Popover",
+  component: Popover,
+  parameters: { layout: "centered" },
+  argTypes: {
+    align: {
+      control: "inline-radio",
+      options: ["start", "center", "end"],
+    },
+    side: {
+      control: "select",
+      options: ["top", "bottom", "left", "right"],
+    },
+    background: {
+      control: "select",
+      options: surfaceBackgrounds,
+    },
+  },
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  argTypes: {
+    ...disable(["trigger", "children", "className"]),
+  },
+  args: {
+    title: "Notifications",
+    description: "You're all caught up!",
+    align: "center",
+    side: "bottom",
+  },
+  render: (args) => (
+    <Popover
+      trigger={
+        <IconButton icon="notification-line" alt="Notifications" interactive />
+      }
+      {...args}
+    />
+  ),
+};
+
+// TODO notifications story (unfortunately we need button group (tabs) b4 we do this)

package/src/components/preview-card/index.tsx

@@ -0,0 +1,68 @@
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+import clsx from "clsx";
+import type { ReactElement, ReactNode } from "react";
+
+import { Surface, type Background } from "../surface";
+import { TooltipArrow } from "../tooltip/tooltip-arrow";
+
+import transitionStyles from "../../styles/transitions.module.css";
+import tooltipStyles from "../tooltip/tooltip.module.css";
+import styles from "./preview-card.module.css";
+
+export type PreviewCardProps = PreviewCardPrimitive.Root.Props &
+  Pick<PreviewCardPrimitive.Positioner.Props, "align" | "side"> & {
+    /**
+     * Specify trigger to open preview.
+     * You should use an Anchor component.
+     */
+    trigger?: ReactElement;
+
+    /** Surface background preview card should use. Defaults to "root". */
+    background?: Background;
+
+    /** Apply styles to preview card content. */
+    className?: string;
+
+    /** Preview card content */
+    children?: ReactNode;
+  };
+
+export function PreviewCard({
+  align,
+  side,
+  background,
+  trigger,
+  children,
+  className,
+  ...props
+}: PreviewCardProps) {
+  return (
+    <PreviewCardPrimitive.Root {...props}>
+      {trigger ? <PreviewCardPrimitive.Trigger render={trigger} /> : null}
+      <PreviewCardPrimitive.Portal>
+        <PreviewCardPrimitive.Positioner
+          align={align}
+          side={side}
+          sideOffset={8}
+        >
+          <PreviewCardPrimitive.Popup
+            render={<Surface background={background} />}
+            className={clsx(
+              tooltipStyles["tooltip"],
+              styles["preview-card"],
+              transitionStyles["transition_scale"],
+              className,
+            )}
+          >
+            <PreviewCardPrimitive.Arrow
+              className={tooltipStyles["tooltip__arrow"]}
+            >
+              <TooltipArrow />
+            </PreviewCardPrimitive.Arrow>
+            {children}
+          </PreviewCardPrimitive.Popup>
+        </PreviewCardPrimitive.Positioner>
+      </PreviewCardPrimitive.Portal>
+    </PreviewCardPrimitive.Root>
+  );
+}

package/src/components/preview-card/preview-card.module.css

@@ -0,0 +1,5 @@
+.preview-card {
+  gap: var(--space-8);
+  padding: var(--space-8);
+  max-width: var(--space-256);
+}

package/src/components/preview-card/preview-card.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { surfaceBackgrounds } from "~/stories/data";
+import { disable } from "~/stories/utils";
+import { tokens } from "~/styles/tokens";
+
+import { PreviewCard } from ".";
+import { Anchor } from "../anchor";
+import { Text } from "../text";
+
+const meta = {
+  title: "Preview Card",
+  component: PreviewCard,
+  parameters: { layout: "centered" },
+  argTypes: {
+    ...disable(["trigger", "className", "children"]),
+    background: {
+      control: "select",
+      options: surfaceBackgrounds,
+    },
+  },
+} satisfies Meta<typeof PreviewCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    background: "highest",
+  },
+  render: (args) => (
+    <Text>
+      The principles of good{" "}
+      <PreviewCard {...args} trigger={<Anchor>typography</Anchor>}>
+        <img
+          width="448"
+          height="300"
+          src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
+          alt="Station Hofplein signage in Rotterdam, Netherlands"
+          style={{
+            borderRadius: tokens.borderRadiusDefault,
+            width: "100%",
+            height: "auto",
+          }}
+        />
+        <Text style={{ flex: "1 1 auto" }} multiline>
+          <strong style={{ fontWeight: tokens.fontWeightMedium }}>
+            Typography
+          </strong>{" "}
+          is the art and science of arranging type to make written language
+          clear, visually appealing, and effective in communication.
+        </Text>
+      </PreviewCard>{" "}
+      remain into the digital age.
+    </Text>
+  ),
+};