@koide-labs/ui 0.0.0 → 0.0.2

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

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

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

@@ -1,58 +0,0 @@
-/*
-  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

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

package/src/index.ts

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

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

@@ -1,62 +0,0 @@
-.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;
-}