@koide-labs/ui 0.0.0

package/src/components/view/view_colorway.module.css

@@ -0,0 +1,280 @@
+.view_colorway {
+  /* loading styles */
+  --view-loading-low-pulse: var(--view-colorway-dimmest);
+  --view-loading-high-pulse: transparent;
+
+  transition-duration: var(--transition-duration-snappy);
+  transition-timing-function: var(--transition-timing-function-snappy);
+  cursor: not-allowed;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--border-radius-default);
+
+  &:not([disabled], [data-disabled]) {
+    cursor: pointer;
+  }
+}
+
+.view_colorway_static {
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--border-radius-default);
+}
+
+/* Variants */
+.view_colorway_outline {
+  transition-property: color, background-color, box-shadow;
+  border-color: var(--view-colorway-dimmer);
+  background-color: transparent;
+  color: var(--view-colorway-dimmer);
+
+  &:not([disabled], [data-disabled]) {
+    color: var(--view-colorway-stronger);
+
+    &:active {
+      transition: none;
+      border-color: var(--view-colorway-stronger) !important;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px var(--view-colorway-strongest);
+
+      &:not(:focus-visible) {
+        box-shadow: none;
+      }
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        border-color: var(--view-colorway-default);
+        background-color: var(--view-colorway-dimmer);
+        color: var(--view-colorway-strongest);
+      }
+    }
+  }
+}
+
+.view_colorway_outline-static {
+  box-shadow: none;
+  border-color: var(--view-colorway-dimmer);
+  background-color: transparent;
+  color: var(--view-colorway-stronger);
+}
+
+.view_colorway_mute-static {
+  box-shadow: none;
+  background-color: var(--view-colorway-dimmest);
+  color: var(--view-colorway-strongest);
+}
+
+.view_colorway_no-fill {
+  transition-property: color, background-color, box-shadow;
+  background-color: transparent;
+  color: var(--view-colorway-dimmer);
+
+  &:not([disabled], [data-disabled]) {
+    color: var(--view-colorway-stronger);
+
+    &:focus {
+      box-shadow: 0 0 0 2px var(--view-colorway-strongest);
+
+      &:not(:focus-visible) {
+        box-shadow: none;
+      }
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--view-colorway-dimmer);
+        color: var(--view-colorway-strongest);
+      }
+    }
+  }
+}
+
+.view_colorway_fill {
+  transition-property: background-color, box-shadow;
+  background-color: var(--view-colorway-dimmest);
+  color: var(--view-colorway-default);
+
+  &:not([disabled], [data-disabled]) {
+    background-color: var(--view-colorway-dimmer);
+    color: var(--view-colorway-strongest);
+
+    &:focus {
+      box-shadow: 0 0 0 2px var(--view-colorway-stronger);
+
+      &:not(:focus-visible) {
+        box-shadow: none;
+      }
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--view-colorway-default);
+      }
+    }
+  }
+}
+
+.view_colorway_fill-static {
+  box-shadow: none;
+  background-color: var(--view-colorway-dimmer);
+  color: var(--view-colorway-strongest);
+}
+
+.view_colorway_fill-outline {
+  transition-property: background-color, box-shadow;
+  box-shadow: none;
+  border-color: var(--view-colorway-dimmer);
+  background-color: var(--view-colorway-dimmest);
+  color: var(--view-colorway-default);
+
+  &:not([disabled], [data-disabled]) {
+    border-color: var(--view-colorway-dimmer);
+    background-color: var(--view-colorway-dimmest);
+    color: var(--view-colorway-strongest);
+
+    &:active {
+      transition: none;
+      border-color: var(--view-colorway-stronger) !important;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px var(--view-colorway-stronger);
+
+      &:not(:focus-visible) {
+        box-shadow: none;
+      }
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        border-color: var(--view-colorway-default);
+      }
+    }
+  }
+}
+
+/* Colors! */
+.view_colorway_color-primary {
+  --view-colorway-dimmest: var(--primary-dimmest);
+  --view-colorway-dimmer: var(--primary-dimmer);
+  --view-colorway-default: var(--primary-default);
+  --view-colorway-stronger: var(--primary-stronger);
+  --view-colorway-strongest: var(--primary-strongest);
+}
+
+.view_colorway_color-positive {
+  --view-colorway-dimmest: var(--positive-dimmest);
+  --view-colorway-dimmer: var(--positive-dimmer);
+  --view-colorway-default: var(--positive-default);
+  --view-colorway-stronger: var(--positive-stronger);
+  --view-colorway-strongest: var(--positive-strongest);
+}
+
+.view_colorway_color-negative {
+  --view-colorway-dimmest: var(--negative-dimmest);
+  --view-colorway-dimmer: var(--negative-dimmer);
+  --view-colorway-default: var(--negative-default);
+  --view-colorway-stronger: var(--negative-stronger);
+  --view-colorway-strongest: var(--negative-strongest);
+}
+
+.view_colorway_color-warning {
+  --view-colorway-dimmest: var(--warning-dimmest);
+  --view-colorway-dimmer: var(--warning-dimmer);
+  --view-colorway-default: var(--warning-default);
+  --view-colorway-stronger: var(--warning-stronger);
+  --view-colorway-strongest: var(--warning-strongest);
+}
+
+.view_colorway_color-red {
+  --view-colorway-dimmest: var(--red-dimmest);
+  --view-colorway-dimmer: var(--red-dimmer);
+  --view-colorway-default: var(--red-default);
+  --view-colorway-stronger: var(--red-stronger);
+  --view-colorway-strongest: var(--red-strongest);
+}
+
+.view_colorway_color-orange {
+  --view-colorway-dimmest: var(--orange-dimmest);
+  --view-colorway-dimmer: var(--orange-dimmer);
+  --view-colorway-default: var(--orange-default);
+  --view-colorway-stronger: var(--orange-stronger);
+  --view-colorway-strongest: var(--orange-strongest);
+}
+
+.view_colorway_color-yellow {
+  --view-colorway-dimmest: var(--yellow-dimmest);
+  --view-colorway-dimmer: var(--yellow-dimmer);
+  --view-colorway-default: var(--yellow-default);
+  --view-colorway-stronger: var(--yellow-stronger);
+  --view-colorway-strongest: var(--yellow-strongest);
+}
+
+.view_colorway_color-green {
+  --view-colorway-dimmest: var(--green-dimmest);
+  --view-colorway-dimmer: var(--green-dimmer);
+  --view-colorway-default: var(--green-default);
+  --view-colorway-stronger: var(--green-stronger);
+  --view-colorway-strongest: var(--green-strongest);
+}
+
+.view_colorway_color-teal {
+  --view-colorway-dimmest: var(--teal-dimmest);
+  --view-colorway-dimmer: var(--teal-dimmer);
+  --view-colorway-default: var(--teal-default);
+  --view-colorway-stronger: var(--teal-stronger);
+  --view-colorway-strongest: var(--teal-strongest);
+}
+
+.view_colorway_color-blue {
+  --view-colorway-dimmest: var(--blue-dimmest);
+  --view-colorway-dimmer: var(--blue-dimmer);
+  --view-colorway-default: var(--blue-default);
+  --view-colorway-stronger: var(--blue-stronger);
+  --view-colorway-strongest: var(--blue-strongest);
+}
+
+.view_colorway_color-blurple {
+  --view-colorway-dimmest: var(--blurple-dimmest);
+  --view-colorway-dimmer: var(--blurple-dimmer);
+  --view-colorway-default: var(--blurple-default);
+  --view-colorway-stronger: var(--blurple-stronger);
+  --view-colorway-strongest: var(--blurple-strongest);
+}
+
+.view_colorway_color-purple {
+  --view-colorway-dimmest: var(--purple-dimmest);
+  --view-colorway-dimmer: var(--purple-dimmer);
+  --view-colorway-default: var(--purple-default);
+  --view-colorway-stronger: var(--purple-stronger);
+  --view-colorway-strongest: var(--purple-strongest);
+}
+
+.view_colorway_color-magenta {
+  --view-colorway-dimmest: var(--magenta-dimmest);
+  --view-colorway-dimmer: var(--magenta-dimmer);
+  --view-colorway-default: var(--magenta-default);
+  --view-colorway-stronger: var(--magenta-stronger);
+  --view-colorway-strongest: var(--magenta-strongest);
+}
+
+.view_colorway_color-pink {
+  --view-colorway-dimmest: var(--pink-dimmest);
+  --view-colorway-dimmer: var(--pink-dimmer);
+  --view-colorway-default: var(--pink-default);
+  --view-colorway-stronger: var(--pink-stronger);
+  --view-colorway-strongest: var(--pink-strongest);
+}
+
+.view_colorway_color-grey {
+  --view-colorway-dimmest: var(--grey-dimmest);
+  --view-colorway-dimmer: var(--grey-dimmer);
+  --view-colorway-default: var(--grey-default);
+  --view-colorway-stronger: var(--grey-stronger);
+  --view-colorway-strongest: var(--grey-strongest);
+}

package/src/components/view/view_interactive.module.css

@@ -0,0 +1,127 @@
+.view_interactive {
+  /* loading styles */
+  --view-loading-low-pulse: var(--outline-dimmest);
+  --view-loading-high-pulse: var(--surface-interactive-background);
+
+  transition-duration: var(--transition-duration-snappy);
+  transition-timing-function: var(--transition-timing-function-snappy);
+  cursor: not-allowed;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--border-radius-default);
+  background-color: transparent;
+  color: var(--foreground-dimmest);
+
+  &:not([disabled], [data-disabled]) {
+    cursor: pointer;
+
+    &:focus:focus-visible {
+      outline-color: transparent;
+      outline-width: var(--space-2);
+      outline-offset: var(--space-4);
+      box-shadow: var(--shadow-focus);
+    }
+  }
+}
+
+/* Variants */
+.view_interactive_fill {
+  transition-property: background-color, box-shadow;
+  background-color: var(--surface-interactive-background);
+
+  &:not([disabled], [data-disabled]) {
+    color: inherit;
+
+    &:active {
+      border-color: var(--primary-default);
+      background-color: var(--surface-interactive-background-active);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--surface-interactive-background-active);
+      }
+    }
+  }
+}
+
+.view_interactive_no-fill {
+  transition-property: background-color, box-shadow;
+
+  &:not([disabled], [data-disabled]) {
+    color: inherit;
+
+    &:not(textarea):active {
+      border-color: var(--primary-default);
+      background-color: var(--surface-interactive-background);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--surface-interactive-background);
+      }
+    }
+  }
+}
+
+.view_interactive_outline {
+  transition-property: background-color, box-shadow;
+  border-color: var(--surface-interactive-border);
+
+  &:not([disabled], [data-disabled]) {
+    color: inherit;
+
+    &:not(textarea):active {
+      border-color: var(--primary-default);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--surface-interactive-background);
+      }
+    }
+  }
+}
+
+/* default interactive style */
+.view_interactive_fill-outline {
+  transition-property: box-shadow;
+  background-color: var(--surface-interactive-background);
+
+  &:not([disabled], [data-disabled]) {
+    border-color: var(--surface-interactive-border);
+    color: inherit;
+
+    &:not(textarea):active {
+      transition: none;
+      border-color: var(--primary-default);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        border-color: var(--surface-interactive-border-hover);
+      }
+    }
+  }
+}
+
+.view_interactive_list-item {
+  transition-property: box-shadow;
+  border-radius: 0;
+
+  &:not([disabled], [data-disabled]) {
+    color: inherit;
+
+    &:not(textarea):active {
+      border-color: var(--primary-default);
+      background-color: var(--surface-interactive-background-active);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--surface-interactive-background);
+      }
+    }
+  }
+}

package/src/components/view/view_loading.module.css

@@ -0,0 +1,58 @@
+/*
+  these variables are defined in colorway & interactive
+  --view-loading-low-pulse
+  --view-loading-high-pulse
+*/
+.view_loading {
+  position: relative;
+  color: var(--foreground-dimmest);
+}
+
+.view_loading_foreground {
+  animation: loading 2s linear infinite;
+  background: linear-gradient(
+    90deg,
+    var(--view-loading-low-pulse),
+    var(--view-loading-high-pulse),
+    var(--view-loading-low-pulse),
+    var(--view-loading-high-pulse)
+  );
+  background-position-x: 0%;
+  background-size: 300% 100%;
+}
+
+.view_loading_background {
+  overflow: hidden;
+
+  &::after {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.5;
+    animation: loading 2s linear infinite;
+    background: linear-gradient(
+      90deg,
+      var(--view-loading-low-pulse),
+      var(--view-loading-high-pulse),
+      var(--view-loading-low-pulse),
+      var(--view-loading-high-pulse)
+    );
+    background-position-x: 0%;
+    background-size: 300% 100%;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    content: "";
+  }
+}
+
+@keyframes loading {
+  0% {
+    background-position-x: 100%;
+  }
+
+  100% {
+    background-position-x: 0%;
+  }
+}

package/src/components/visually-hidden/index.ts

@@ -0,0 +1 @@
+export { VisuallyHidden } from "@radix-ui/react-visually-hidden";

package/src/index.ts

@@ -0,0 +1,49 @@
+export { Accordion, AccordionItem } from "./components/accordion";
+export { AlertDialog } from "./components/alert-dialog";
+export { Anchor } from "./components/anchor";
+export { Avatar } from "./components/avatar";
+export { Badge } from "./components/badge";
+export { Button } from "./components/button";
+export { Checkbox } from "./components/checkbox";
+export { Code } from "./components/code";
+export { Collapse } from "./components/collapse";
+export {
+  CommandDialog,
+  CommandGroup,
+  CommandSeparator,
+  CommandItem,
+} from "./components/command";
+export { Dialog, DialogClose } from "./components/dialog";
+export { Heading, Section } from "./components/heading";
+export { IconButton } from "./components/icon-button";
+export { Icon } from "./components/icon";
+export { InlineCode } from "./components/inline-code";
+export { Input } from "./components/input";
+export { Meter } from "./components/meter";
+export { MultilineInput } from "./components/multiline-input";
+export { NumberInput } from "./components/number-input";
+export { PasswordInput } from "./components/password-input";
+export { Pill } from "./components/pill";
+export { Popover } from "./components/popover";
+export { PreviewCard } from "./components/preview-card";
+export { RadioGroup, Radio } from "./components/radio";
+export { SearchBar } from "./components/search-bar";
+export { Select } from "./components/select";
+export { Separator } from "./components/separator";
+export { Slider } from "./components/slider";
+export { StackedAvatars } from "./components/stacked-avatars";
+export { StatusBanner } from "./components/status-banner";
+export { Surface } from "./components/surface";
+export { Switch } from "./components/switch";
+export { Tabs } from "./components/tabs";
+export { Text } from "./components/text";
+export { ThemeProvider, useThemeContext } from "./components/theme-provider";
+export { Timestamp } from "./components/timestamp";
+export {
+  ToastProvider,
+  ToastViewport,
+  useToastManager,
+} from "./components/toast";
+export { TooltipProvider, Tooltip } from "./components/tooltip";
+export { View } from "./components/view";
+export { VisuallyHidden } from "./components/visually-hidden";

package/src/integrations/react-markdown/index.tsx

@@ -0,0 +1,134 @@
+import type { ComponentProps } from "react";
+import MarkdownPrimitive from "react-markdown";
+
+import { omit } from "~/-utils";
+import { Anchor } from "~/components/anchor";
+import { Code } from "~/components/code";
+import { Heading } from "~/components/heading";
+import { Separator } from "~/components/separator";
+import { Text } from "~/components/text";
+import { View } from "~/components/view";
+
+import styles from "./react-markdown.module.css";
+
+export function Markdown({
+  components,
+  children,
+  ...props
+}: ComponentProps<typeof MarkdownPrimitive> & { children: string }) {
+  return (
+    <MarkdownPrimitive
+      {...props}
+      components={{
+        h1: (props) => (
+          <Heading
+            {...omit(props, ["node"])}
+            level={1}
+            className={styles["react-markdown__h1"]}
+          />
+        ),
+        h2: (props) => (
+          <Heading
+            {...omit(props, ["node"])}
+            level={2}
+            className={styles["react-markdown__h2"]}
+          />
+        ),
+        h3: (props) => (
+          <Heading
+            {...omit(props, ["node"])}
+            level={3}
+            className={styles["react-markdown__h3"]}
+          />
+        ),
+        h4: (props) => (
+          <Heading
+            {...omit(props, ["node"])}
+            level={4}
+            className={styles["react-markdown__h4"]}
+          />
+        ),
+        h5: (props) => (
+          <Heading
+            {...omit(props, ["node"])}
+            level={5}
+            className={styles["react-markdown__h5"]}
+          />
+        ),
+        p: (props) => (
+          <Text
+            {...omit(props, ["node"])}
+            multiline
+            className={styles["react-markdown__p"]}
+          />
+        ),
+        hr: () => <Separator />,
+        ul: (props) => (
+          <ul
+            {...omit(props, ["node"])}
+            className={styles["react-markdown__ul"]}
+          />
+        ),
+        ol: (props) => (
+          <ul
+            {...omit(props, ["node"])}
+            className={styles["react-markdown__ol"]}
+          />
+        ),
+        li: (props) => (
+          <li
+            {...omit(props, ["node"])}
+            className={styles["react-markdown__li"]}
+          />
+        ),
+        a: ({ href, ...props }) => (
+          <Anchor
+            {...omit(props, ["node"])}
+            href={href}
+            {...(isExternal(href)
+              ? {
+                  target: "_blank",
+                  rel: "noreferrer",
+                }
+              : {})}
+          />
+        ),
+        code: ({ className, ...props }) => {
+          return (
+            <Code
+              className={styles["react-markdown__code"]}
+              {...omit(props, ["node"])}
+              language={getLanguage(className)}
+            />
+          );
+        },
+        img: ({ alt, ...props }) => (
+          <View className={styles["react-markdown__img-root"]}>
+            <img
+              {...omit(props, ["node"])}
+              alt={alt}
+              className={styles["react-markdown__img"]}
+            />
+            {alt ? (
+              <Text size="sm" color="dimmer" multiline>
+                {alt}
+              </Text>
+            ) : null}
+          </View>
+        ),
+        ...components,
+      }}
+    >
+      {children}
+    </MarkdownPrimitive>
+  );
+}
+
+function getLanguage(className: string = "") {
+  const language = (/language-(\w+)/.exec(className) || [])[0];
+  return language ? language.substring("language-".length) : "text";
+}
+
+function isExternal(href?: string) {
+  return href?.startsWith("https://");
+}

package/src/integrations/react-markdown/react-markdown.module.css

@@ -0,0 +1,62 @@
+.react-markdown {
+  display: flex;
+  flex-direction: column;
+}
+
+.react-markdown__h1,
+.react-markdown__h2 {
+  margin-top: var(--space-24);
+}
+
+.react-markdown__h3,
+.react-markdown__h4 {
+  margin-top: var(--space-16);
+}
+
+.react-markdown__h5,
+.react-markdown__p,
+.react-markdown__code {
+  margin-top: var(--space-8);
+}
+
+.react-markdown__ul {
+  margin-top: var(--space-8);
+  padding-left: var(--space-24);
+  list-style-type: disc;
+}
+
+.react-markdown__ol {
+  margin-top: var(--space-8);
+  padding-left: var(--space-24);
+  list-style-type: decimal;
+}
+
+.react-markdown__li {
+  vertical-align: middle;
+}
+
+/* stylelint-disable */
+.react-markdown__li > ul,
+.react-markdown__li > ol {
+  margin-top: 0;
+}
+/* stylelint-enable */
+
+.react-markdown__img-root {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-8);
+  margin-top: var(--space-8);
+  text-align: center;
+}
+
+.react-markdown__img {
+  border: 1px solid var(--surface-border-interactive);
+  border-radius: var(--border-radius-default);
+  background-color: var(--background-surface);
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+}