@koide-labs/ui 0.0.0 → 0.0.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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