@koide-labs/ui 0.0.0 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koide-labs/ui",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "type": "module",
   "main": "./dist/index.js",
   "exports": {
@@ -12,8 +12,20 @@
       "types": "./dist/components/*/index.d.ts",
       "default": "./dist/components/*/index.js"
     },
-    "./styles/*.css": "./dist/assets/styles/*.css"
+    "./integrations/tailwind.css": "./dist/integrations/tailwind.css",
+    "./integrations/*": {
+      "types": "./dist/integrations/*/index.d.ts",
+      "default": "./dist/integrations/*/index.js"
+    },
+    "./styles/core.css": "./dist/styles/core.css",
+    "./styles/tokens": {
+      "types": "./dist/styles/tokens.d.ts",
+      "default": "./dist/styles/tokens.js"
+    }
   },
+  "files": [
+    "dist"
+  ],
   "packageManager": "pnpm@10.19.0",
   "scripts": {
     "dev": "vite",
@@ -44,6 +56,10 @@
     "react-dom": "^19.2.0",
     "react-markdown": "^10.1.0"
   },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
     "@eslint/js": "^9.39.1",

package/.husky/pre-commit

@@ -1 +0,0 @@
-pnpm exec lint-staged

package/.storybook/main.ts

@@ -1,25 +0,0 @@
-import { withoutVitePlugins } from "@storybook/builder-vite";
-import type { StorybookConfig } from "@storybook/react-vite";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@chromatic-com/storybook",
-    "@storybook/addon-vitest",
-    "@storybook/addon-a11y",
-    "@storybook/addon-docs",
-  ],
-  framework: "@storybook/react-vite",
-  viteFinal: async (config) => {
-    return {
-      ...config,
-      plugins: await withoutVitePlugins(config.plugins, [
-        "vite:lib-inject-css",
-      ]),
-    };
-  },
-  core: {
-    disableTelemetry: true,
-  },
-};
-export default config;

package/.storybook/preview-head.html

@@ -1,6 +0,0 @@
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap"
-  rel="stylesheet"
-/>

package/.storybook/preview.tsx

@@ -1,48 +0,0 @@
-import type { Preview } from "@storybook/react-vite";
-
-import "../src/styles/core.css";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    a11y: {
-      // 'todo' - show a11y violations in the test UI only
-      // 'error' - fail CI on a11y violations
-      // 'off' - skip a11y checks entirely
-      test: "todo",
-    },
-  },
-  globalTypes: {
-    theme: {
-      name: "Theme",
-      description: "Global theme for components.",
-      defaultValue: "light",
-      toolbar: {
-        icon: "paintbrush",
-        items: [
-          { value: "light", title: "Light" },
-          { value: "dark", title: "Dark" },
-        ],
-        showName: true,
-      },
-    },
-  },
-  decorators: [
-    (Story, context) => {
-      document.body.dataset.theme = context.globals.theme || "light";
-
-      return (
-        <div className="root">
-          <Story />
-        </div>
-      );
-    },
-  ],
-};
-
-export default preview;

package/.storybook/vitest.setup.ts

@@ -1,8 +0,0 @@
-import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
-import { setProjectAnnotations } from "@storybook/react-vite";
-
-import * as projectAnnotations from "./preview";
-
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/eslint.config.mjs

@@ -1,29 +0,0 @@
-// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-
-import js from "@eslint/js";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from "eslint-plugin-react-refresh";
-import storybook from "eslint-plugin-storybook";
-import { defineConfig, globalIgnores } from "eslint/config";
-import globals from "globals";
-import tseslint from "typescript-eslint";
-
-export default defineConfig([
-  globalIgnores(["dist", ".archived", ".husky", "storybook-static"]),
-  {
-    plugins: {
-      storybook: storybook,
-    },
-    files: ["**/*.{ts,tsx}"],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-]);

package/lint-staged.config.js

@@ -1,15 +0,0 @@
-/**
- * @filename lint-staged.config.cjs
- * @type {import("lint-staged").Configuration}
- */
-export default {
-  "*": ["pnpm run format"],
-  /**
-   * Feels like it goes against what lint-staged is meant for
-   * But its supported and we really should typecheck before committing
-   * https://github.com/lint-staged/lint-staged?tab=readme-ov-file#example-run-tsc-on-changes-to-typescript-files-but-do-not-pass-any-filename-arguments
-   */
-  "**/*.{ts,tsx}?(x)": () => ["pnpm run typecheck"],
-  "**/*.{ts,tsx}": ["pnpm run lint:ts"],
-  "**/*.css": ["pnpm run lint:style"],
-};

package/pnpm-workspace.yaml

@@ -1,2 +0,0 @@
-onlyBuiltDependencies:
-  - cmdk

package/postcss.config.mjs

@@ -1,7 +0,0 @@
-export default {
-  plugins: {
-    autoprefixer: {},
-    "postcss-nesting": {},
-    "postcss-nested-import": {},
-  },
-};

package/prettier.config.mjs

@@ -1,24 +0,0 @@
-import "@ianvs/prettier-plugin-sort-imports";
-
-/**
- * @filename prettier.config.mjs
- * @type {import("prettier").Config & import("@ianvs/prettier-plugin-sort-imports").PluginConfig}
- */
-export default {
-  singleQuote: false,
-  semi: true,
-  plugins: ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-css-order"],
-  importOrder: [
-    "<BUILTIN_MODULES>", // Node.js built-in modules
-    "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
-    "",
-    "^~/(.*)$",
-    "",
-    "^[./](?!.*\\.module\\.css$)",
-    "",
-    "\\.module\\.css$",
-  ],
-  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
-  importOrderTypeScriptVersion: "5.0.0",
-  cssDeclarationSorterOrder: "concentric-css",
-};

package/scripts/build-icon-types.ts

@@ -1,38 +0,0 @@
-import fs from "fs/promises";
-import path from "path";
-import process from "process";
-import url from "url";
-import * as prettier from "prettier";
-import remixicon from "remixicon/fonts/remixicon.glyph.json";
-
-// https://stackoverflow.com/questions/46745014/alternative-for-dirname-in-node-js-when-using-es6-modules
-const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
-
-const PRETTIER_CONFIG = path.resolve(__dirname, "../prettier.config.mjs");
-const EXPORT_FILE = path.resolve(
-  __dirname,
-  "../src/components/icon/icon-names.ts",
-);
-
-async function buildIconTypes() {
-  const text = `export type IconName = ${Object.keys(remixicon)
-    .map((icon) => `"${icon}"`)
-    .join("|")};`;
-  const options = await prettier.resolveConfig(PRETTIER_CONFIG);
-  const formatted = await prettier.format(text, {
-    ...options,
-    parser: "typescript",
-  });
-  await fs.writeFile(EXPORT_FILE, formatted);
-}
-
-buildIconTypes()
-  .then(() => {
-    console.info("Built icon types.");
-    process.exit(0);
-  })
-  .catch((error) => {
-    console.error(error);
-    console.error("Failed to build icon types.");
-    process.exit(1);
-  });

package/src/-utils.tsx

@@ -1,64 +0,0 @@
-import type * as React from "react";
-
-import { Text, type TextProps } from "~/components/text";
-
-export function omit<T extends object>(
-  record: T,
-  keys: (keyof T)[],
-): Omit<T, (typeof keys)[number]> {
-  const shallowClone = { ...record };
-  for (const key of keys) {
-    delete shallowClone[key];
-  }
-
-  return shallowClone;
-}
-
-export function pick<T extends Record<string, string>, K extends keyof T>(
-  record: T,
-  keys: Array<K>,
-) {
-  const result = {} as Pick<T, K>;
-  for (const key of keys) {
-    if (key in record) {
-      result[key] = record[key];
-    }
-  }
-  return result;
-}
-
-/**
- * Convert a ReactNode into a Text element if it's a string
- * This allows us to accept ReactNode props but properly convert them into text
- * @param node ReactNode to conver to text
- * @param props optional text props
- * @returns ReactNode or Text
- */
-export function textify(
-  node: React.ReactNode,
-  props: TextProps = {
-    color: "inherit",
-  },
-) {
-  return typeof node === "string" ? <Text {...props}>{node}</Text> : node;
-}
-
-/**
- * Merge many refs to pass to one element.
- *
- * Adapted from
- * https://github.com/gregberge/react-merge-refs/blob/main/src/index.tsx
- */
-export function mergeRefs<T = unknown>(
-  ...refs: Array<React.RefObject<T> | React.RefAttributes<T>["ref"] | undefined>
-): React.RefCallback<T> {
-  return (value) => {
-    refs.forEach((ref) => {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref) {
-        (ref as React.RefObject<T | null>).current = value;
-      }
-    });
-  };
-}

package/src/components/accordion/accordion.module.css

@@ -1,44 +0,0 @@
-.accordion {
-  border-bottom: 1px solid var(--surface-interactive-border);
-}
-
-.accordion__header {
-  display: flex;
-}
-
-.accordion__trigger-icon {
-  transform: rotate(-45deg);
-  transition: transform var(--transition-duration-snappy)
-    var(--transition-timing-function-snappy);
-}
-
-.accordion__trigger {
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 0 !important;
-  padding: var(--space-8) var(--space-12);
-  line-height: 1;
-
-  &[data-panel-open] .accordion__trigger-icon {
-    transform: rotate(0);
-  }
-}
-
-.accordion__panel {
-  transition: height var(--transition-duration-chill)
-    var(--transition-timing-function-chill);
-  height: var(--accordion-panel-height);
-  overflow: hidden;
-
-  &[data-starting-style],
-  &[data-ending-style] {
-    height: 0;
-  }
-}
-
-.accordion__panel-content {
-  padding: var(--space-12);
-}

package/src/components/accordion/accordion.stories.tsx

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { tokens } from "~/styles/tokens";
-
-import { Accordion, AccordionItem } from ".";
-
-const meta = {
-  title: "Accordion",
-  component: Accordion,
-  parameters: { layout: "centered" },
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Accordion
-      multiple
-      defaultValue={["item-1"]}
-      style={{ width: tokens.space256 }}
-    >
-      <AccordionItem
-        value="item-1"
-        header={"I am the header"}
-        content={"Hello, I am inside the accordion"}
-      />
-      <AccordionItem
-        value="item-2"
-        header={"I am the header"}
-        content={"Hello, I am inside the accordion"}
-      />
-    </Accordion>
-  ),
-};

package/src/components/accordion/index.tsx

@@ -1,67 +0,0 @@
-import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
-import clsx from "clsx";
-import type { ComponentProps, ReactNode } from "react";
-
-import { textify } from "~/-utils";
-
-import { Icon } from "../icon";
-import { Surface } from "../surface";
-import { View } from "../view";
-
-import styles from "./accordion.module.css";
-
-export const Accordion = AccordionPrimitive.Root;
-
-export type AccordionItemProps = Omit<
-  ComponentProps<typeof AccordionPrimitive.Item>,
-  "render"
-> & {
-  /** The content to display in the accordion header trigger. */
-  header: ReactNode;
-
-  /** The content to display within the expandable accordion panel. */
-  content: ReactNode;
-
-  /** Apply className to the accordion trigger */
-  className?: string;
-};
-
-export function AccordionItem({
-  header,
-  content,
-  className,
-  ...props
-}: AccordionItemProps) {
-  return (
-    <AccordionPrimitive.Item className={styles["accordion"]} {...props}>
-      <AccordionPrimitive.Header className={styles["accordion__header"]}>
-        <Surface
-          elevated
-          render={
-            <View
-              interactive="list-item"
-              render={
-                <AccordionPrimitive.Trigger
-                  className={clsx(styles["accordion__trigger"], className)}
-                />
-              }
-            >
-              {textify(header)}
-              <Icon
-                name="close-line"
-                className={styles["accordion__trigger-icon"]}
-              />
-            </View>
-          }
-        />
-      </AccordionPrimitive.Header>
-      <AccordionPrimitive.Panel className={styles["accordion__panel"]}>
-        <View className={styles["accordion__panel-content"]}>
-          {textify(content, {
-            multiline: true,
-          })}
-        </View>
-      </AccordionPrimitive.Panel>
-    </AccordionPrimitive.Item>
-  );
-}

package/src/components/alert-dialog/alert-dialog.module.css

@@ -1,5 +0,0 @@
-.alert-dialog__actions {
-  flex-direction: row;
-  justify-content: end;
-  gap: var(--space-8);
-}

package/src/components/alert-dialog/alert-dialog.stories.tsx

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { AlertDialog } from ".";
-import { Button } from "../button";
-
-const meta = {
-  title: "Dialog/Alert Dialog",
-  component: AlertDialog,
-  parameters: { layout: "centered" },
-  argTypes: {
-    width: {
-      control: "select",
-      options: ["sm", "md", "lg"],
-    },
-  },
-} satisfies Meta<typeof AlertDialog>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  argTypes: {
-    children: {
-      table: {
-        disable: true,
-      },
-    },
-    trigger: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  args: {
-    title: "Are you absolutely sure?",
-    description:
-      "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
-    actions: [{ children: "Cancel" }, { children: "Yes, delete account." }],
-    width: "md",
-    centered: false,
-  },
-  render: (props) => (
-    <AlertDialog
-      {...props}
-      trigger={
-        <Button leftIcon="delete-bin-line" interactive="red_outline">
-          Delete acount
-        </Button>
-      }
-    />
-  ),
-};

package/src/components/alert-dialog/index.tsx

@@ -1,138 +0,0 @@
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
-import clsx from "clsx";
-import type { ComponentProps } from "react";
-
-import { Button, type ButtonProps } from "../button";
-import type { BaseDialogProps } from "../dialog";
-import { Surface } from "../surface";
-import { Text } from "../text";
-import { View } from "../view";
-
-import transitionStyles from "../../styles/transitions.module.css";
-import dialogStyles from "../dialog/dialog.module.css";
-import styles from "./alert-dialog.module.css";
-
-/**
- * General guidance:
- *
- * Should you have nested modals? Absolutely not. It's confusing to navigate and
- * obliterates the stacking context by putting multiple root surfaces on top of
- * each other.
- *
- * Should you have payloads? Probably not... Currently unsupported but that
- * style of generalization feels kind of anti-composition
- */
-
-export type AlertDialogProps = ComponentProps<
-  typeof AlertDialogPrimitive.Root
-> &
-  BaseDialogProps & {
-    /**
-     *
-     * The actions to display in the alert dialog. You must have at least two
-     * actions. By default, actions will be `interactive` and the last action will
-     * have `colorway` "negative_fill".
-     *
-     */
-    actions: Array<ButtonProps>;
-  };
-
-export function AlertDialog({
-  title,
-  description,
-  children,
-  actions,
-  trigger,
-  width = "md",
-  background = "root",
-  centered = false,
-  className,
-  ...props
-}: AlertDialogProps) {
-  if (actions.length < 2) {
-    console.error("You must have at least two actions.");
-  }
-
-  return (
-    <AlertDialogPrimitive.Root {...props}>
-      {trigger ? <AlertDialogPrimitive.Trigger render={trigger} /> : null}
-      <AlertDialogPrimitive.Portal>
-        <AlertDialogPrimitive.Backdrop
-          className={clsx(
-            dialogStyles["dialog__backdrop"],
-            transitionStyles["transition_opacity"],
-          )}
-        />
-        <AlertDialogPrimitive.Popup
-          className={clsx(
-            dialogStyles["dialog__popup"],
-            centered && dialogStyles["dialog__popup_centered"],
-            transitionStyles["transition_scale"],
-          )}
-        >
-          <Surface
-            background={background}
-            className={clsx(
-              dialogStyles["dialog__content"],
-              dialogStyles[`dialog__content_width_${width}`],
-              className,
-            )}
-          >
-            {title || description ? (
-              <View className={dialogStyles["dialog__header"]}>
-                {title ? (
-                  <Text render={<AlertDialogPrimitive.Title />} size="2xl">
-                    {title}
-                  </Text>
-                ) : null}
-                {description ? (
-                  <Text
-                    multiline
-                    color="dimmer"
-                    render={<AlertDialogPrimitive.Description />}
-                  >
-                    {description}
-                  </Text>
-                ) : null}
-              </View>
-            ) : null}
-            {children}
-            <View className={styles["alert-dialog__actions"]}>
-              {actions.map(({ children, ...action }, i) => (
-                <AlertDialogClose
-                  key={i}
-                  {...getButtonProps(action, i + 1 === actions.length)}
-                >
-                  {children}
-                </AlertDialogClose>
-              ))}
-            </View>
-          </Surface>
-        </AlertDialogPrimitive.Popup>
-      </AlertDialogPrimitive.Portal>
-    </AlertDialogPrimitive.Root>
-  );
-}
-
-export function AlertDialogClose(props: ButtonProps) {
-  return <AlertDialogPrimitive.Close render={<Button {...props} />} />;
-}
-
-/**
- * Sensible defaults for actions (buttons)
- * @param props Action provided by AlertDialog
- * @param isLast Is this the last action provided in the array?
- * @returns Props with defaults
- */
-function getButtonProps(props: ButtonProps, isLast?: boolean): ButtonProps {
-  if (isLast) {
-    return {
-      interactive: "negative_fill",
-      ...props,
-    };
-  }
-  return {
-    interactive: true,
-    ...props,
-  };
-}