@koide-labs/ui 0.0.0 → 0.0.2

package/README.md

@@ -1,11 +1,61 @@
 # @koide-labs/ui
 
-Accessible, fresh, and simple. Built with [Base UI](https://base-ui.com/).
+Accessible, fresh, and simple.
 
-## Installation
+- Consistent design with CSS Modules
+- Token-first development for site-wide theming
+- Accessible components with [Base UI](https://base-ui.com/)
 
-_This package is currently unpublished._
+## Installation
 
 ```bash
 pnpm add @koide-labs/ui
 ```
+
+Because we import CSS modules for each component, you must add this to your Vite config.
+
+```ts
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  ssr: {
+    noExternal: ["@koide-labs/ui"],
+  },
+});
+```
+
+## Styling
+
+I highly recommend using TailwindCSS.
+
+```css
+@import "tailwindcss" important;
+@import "@koide-labs/integrations/tailwind.css";
+@import "@koide-labs/styles/core.css";
+```
+
+### Fonts
+
+- IBM Plex Sans
+- IBM Plex Mono
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link
+  rel="preconnect"
+  href="https://fonts.gstatic.com"
+  crossorigin="anonymous"
+/>
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
+/>
+```
+
+## Development
+
+Run the Storybook development server.
+
+```
+pnpm run storybook
+```

package/{src/-types.ts → dist/-types.d.ts}

@@ -1,8 +1,3 @@
 export type ValueOf<T> = T[keyof T];
-
 export type Override<T, U> = Omit<T, keyof U> & U;
-
-export type InvertRecord<T extends Record<string, string>> = Record<
-  T[keyof T],
-  keyof T
->;
+export type InvertRecord<T extends Record<string, string>> = Record<T[keyof T], keyof T>;

package/dist/-types.js

@@ -0,0 +1 @@
+

package/dist/-utils.d.ts

@@ -0,0 +1,19 @@
+import { TextProps } from './components/text';
+import type * as React from "react";
+export declare function omit<T extends object>(record: T, keys: (keyof T)[]): Omit<T, (typeof keys)[number]>;
+export declare function pick<T extends Record<string, string>, K extends keyof T>(record: T, keys: Array<K>): Pick<T, K>;
+/**
+ * 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 declare function textify(node: React.ReactNode, props?: TextProps): number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+/**
+ * Merge many refs to pass to one element.
+ *
+ * Adapted from
+ * https://github.com/gregberge/react-merge-refs/blob/main/src/index.tsx
+ */
+export declare function mergeRefs<T = unknown>(...refs: Array<React.RefObject<T> | React.RefAttributes<T>["ref"] | undefined>): React.RefCallback<T>;

package/dist/-utils.js

@@ -0,0 +1,33 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Text as e } from "./components/text/index.js";
+function s(t, n) {
+  const o = { ...t };
+  for (const r of n)
+    delete o[r];
+  return o;
+}
+function u(t, n) {
+  const o = {};
+  for (const r of n)
+    r in t && (o[r] = t[r]);
+  return o;
+}
+function l(t, n = {
+  // TODO look for any regressions
+  color: "inherit"
+}) {
+  return typeof t == "string" ? /* @__PURE__ */ i(e, { ...n, children: t }) : t;
+}
+function m(...t) {
+  return (n) => {
+    t.forEach((o) => {
+      typeof o == "function" ? o(n) : o && (o.current = n);
+    });
+  };
+}
+export {
+  m as mergeRefs,
+  s as omit,
+  u as pick,
+  l as textify
+};

package/dist/Button-DrPFFzo7.js

@@ -0,0 +1,31 @@
+import * as o from "react";
+import { u as l } from "./useButton-DfIwsdb8.js";
+import { u as c } from "./useRenderElement-DwToLA61.js";
+const m = /* @__PURE__ */ o.forwardRef(function(t, s) {
+  const {
+    render: B,
+    className: b,
+    disabled: n = !1,
+    focusableWhenDisabled: a = !1,
+    nativeButton: r = !0,
+    ...u
+  } = t, e = !!n, {
+    getButtonProps: i,
+    buttonRef: d
+  } = l({
+    disabled: e,
+    focusableWhenDisabled: a,
+    native: r
+  }), f = o.useMemo(() => ({
+    disabled: e
+  }), [e]);
+  return c("button", t, {
+    state: f,
+    ref: [s, d],
+    props: [u, i]
+  });
+});
+process.env.NODE_ENV !== "production" && (m.displayName = "Button");
+export {
+  m as B
+};

package/dist/CompositeRoot-CVk5a-pR.js

@@ -0,0 +1,233 @@
+import * as f from "react";
+import { c as ee, b as Z, E as se, u as ie } from "./useRenderElement-DwToLA61.js";
+import { a as re, C as ae } from "./useButton-DfIwsdb8.js";
+import { u as de, C as le } from "./useCompositeListItem-OkcAim_1.js";
+import { i as ce } from "./isElementDisabled-Cbd8W9kH.js";
+import { u as j } from "./useStableCallback-CkTrVkNX.js";
+import { s as q, A as ue, a as fe, i as J, b as z, c as v, H as he, E as ge, d as $, e as B, V as me, f as Ie, g as pe, h as xe, M as Re } from "./composite-C9L5QmZL.js";
+import { g as Ee, a as ye, c as Ce, b as U, d as be, e as Ae, f as Me, h as Ke, i as _e } from "./composite-Bx7Szd_T.js";
+import { u as He } from "./DirectionContext-C2o_MF_i.js";
+import { jsx as Q } from "react/jsx-runtime";
+function Fe(h = {}) {
+  const {
+    highlightItemOnHover: g,
+    highlightedIndex: r,
+    onHighlightedIndexChange: c
+  } = re(), {
+    ref: C,
+    index: t
+  } = de(h), d = r === t, b = f.useRef(null), K = ee(C, b);
+  return {
+    compositeProps: f.useMemo(() => ({
+      tabIndex: d ? 0 : -1,
+      onFocus() {
+        c(t);
+      },
+      onMouseMove() {
+        const s = b.current;
+        if (!g || !s)
+          return;
+        const A = s.hasAttribute("disabled") || s.ariaDisabled === "true";
+        !d && !A && s.focus();
+      }
+    }), [d, c, t, g]),
+    compositeRef: K,
+    index: t
+  };
+}
+const Se = "data-composite-item-active", Oe = [];
+function ke(h) {
+  const {
+    itemSizes: g,
+    cols: r = 1,
+    loopFocus: c = !0,
+    dense: C = !1,
+    orientation: t = "both",
+    direction: d,
+    highlightedIndex: b,
+    onHighlightedIndexChange: K,
+    rootRef: k,
+    enableHomeAndEndKeys: s = !1,
+    stopEventPropagation: A = !1,
+    disabledIndices: a,
+    modifierKeys: T = Oe
+  } = h, [N, G] = f.useState(0), _ = r > 1, R = f.useRef(null), L = ee(R, k), n = f.useRef([]), H = f.useRef(!1), l = b ?? N, E = j((e, i = !1) => {
+    if ((K ?? G)(e), i) {
+      const m = n.current[e];
+      q(R.current, m, d, t);
+    }
+  }), P = j((e) => {
+    if (e.size === 0 || H.current)
+      return;
+    H.current = !0;
+    const i = Array.from(e.keys()), m = i.find((u) => u?.hasAttribute(Se)) ?? null, I = m ? i.indexOf(m) : -1;
+    I !== -1 && E(I), q(R.current, m, d, t);
+  }), S = f.useMemo(() => ({
+    "aria-orientation": t === "both" ? void 0 : t,
+    ref: L,
+    onFocus(e) {
+      !R.current || !J(e.target) || e.target.setSelectionRange(0, e.target.value.length ?? 0);
+    },
+    onKeyDown(e) {
+      const i = s ? ue : fe;
+      if (!i.has(e.key) || Te(e, T) || !R.current)
+        return;
+      const I = d === "rtl", u = I ? $ : v, W = {
+        horizontal: u,
+        vertical: z,
+        both: u
+      }[t], M = I ? v : $, Y = {
+        horizontal: M,
+        vertical: B,
+        both: M
+      }[t];
+      if (J(e.target) && !ce(e.target)) {
+        const y = e.target.selectionStart, p = e.target.selectionEnd, V = e.target.value ?? "";
+        if (y == null || e.shiftKey || y !== p || e.key !== Y && y < V.length || e.key !== W && y > 0)
+          return;
+      }
+      let o = l;
+      const D = Ee(n, a), w = ye(n, a);
+      if (_) {
+        const y = g || Array.from({
+          length: n.current.length
+        }, () => ({
+          width: 1,
+          height: 1
+        })), p = Ce(y, r, C), V = p.findIndex((x) => x != null && !U(n, x, a)), ne = p.reduce((x, O, oe) => O != null && !U(n, O, a) ? oe : x, -1);
+        o = p[be({
+          current: p.map((x) => x ? n.current[x] : null)
+        }, {
+          event: e,
+          orientation: t,
+          loopFocus: c,
+          cols: r,
+          // treat undefined (empty grid spaces) as disabled indices so we
+          // don't end up in them
+          disabledIndices: Me([...a || n.current.map((x, O) => U(n, O) ? O : void 0), void 0], p),
+          minIndex: V,
+          maxIndex: ne,
+          prevIndex: Ae(
+            l > w ? D : l,
+            y,
+            p,
+            r,
+            // use a corner matching the edge closest to the direction we're
+            // moving in so we don't end up in the same item. Prefer
+            // top/left over bottom/right.
+            // eslint-disable-next-line no-nested-ternary
+            e.key === z ? "bl" : e.key === v ? "tr" : "tl"
+          ),
+          rtl: I
+        })];
+      }
+      const X = {
+        horizontal: [u],
+        vertical: [z],
+        both: [u, z]
+      }[t], F = {
+        horizontal: [M],
+        vertical: [B],
+        both: [M, B]
+      }[t], te = _ ? i : {
+        horizontal: s ? pe : xe,
+        vertical: s ? me : Ie,
+        both: i
+      }[t];
+      s && (e.key === he ? o = D : e.key === ge && (o = w)), o === l && (X.includes(e.key) || F.includes(e.key)) && (c && o === w && X.includes(e.key) ? o = D : c && o === D && F.includes(e.key) ? o = w : o = Ke(n, {
+        startingIndex: o,
+        decrement: F.includes(e.key),
+        disabledIndices: a
+      })), o !== l && !_e(n, o) && (A && e.stopPropagation(), te.has(e.key) && e.preventDefault(), E(o, !0), queueMicrotask(() => {
+        n.current[o]?.focus();
+      }));
+    }
+  }), [r, C, d, a, n, s, l, _, g, c, L, T, E, t, A]);
+  return f.useMemo(() => ({
+    props: S,
+    highlightedIndex: l,
+    onHighlightedIndexChange: E,
+    elementsRef: n,
+    disabledIndices: a,
+    onMapChange: P,
+    relayKeyboardEvent: S.onKeyDown
+  }), [S, l, E, n, a, P]);
+}
+function Te(h, g) {
+  for (const r of Re.values())
+    if (!g.includes(r) && h.getModifierState(r))
+      return !0;
+  return !1;
+}
+function Ve(h) {
+  const {
+    render: g,
+    className: r,
+    refs: c = Z,
+    props: C = Z,
+    state: t = se,
+    stateAttributesMapping: d,
+    highlightedIndex: b,
+    onHighlightedIndexChange: K,
+    orientation: k,
+    dense: s,
+    itemSizes: A,
+    loopFocus: a,
+    cols: T,
+    enableHomeAndEndKeys: N,
+    onMapChange: G,
+    stopEventPropagation: _ = !0,
+    rootRef: R,
+    disabledIndices: L,
+    modifierKeys: n,
+    highlightItemOnHover: H = !1,
+    tag: l = "div",
+    ...E
+  } = h, P = He(), {
+    props: S,
+    highlightedIndex: e,
+    onHighlightedIndexChange: i,
+    elementsRef: m,
+    onMapChange: I,
+    relayKeyboardEvent: u
+  } = ke({
+    itemSizes: A,
+    cols: T,
+    loopFocus: a,
+    dense: s,
+    orientation: k,
+    highlightedIndex: b,
+    onHighlightedIndexChange: K,
+    rootRef: R,
+    stopEventPropagation: _,
+    enableHomeAndEndKeys: N,
+    direction: P,
+    disabledIndices: L,
+    modifierKeys: n
+  }), W = ie(l, h, {
+    state: t,
+    ref: c,
+    props: [S, ...C, E],
+    stateAttributesMapping: d
+  }), M = f.useMemo(() => ({
+    highlightedIndex: e,
+    onHighlightedIndexChange: i,
+    highlightItemOnHover: H,
+    relayKeyboardEvent: u
+  }), [e, i, H, u]);
+  return /* @__PURE__ */ Q(ae.Provider, {
+    value: M,
+    children: /* @__PURE__ */ Q(le, {
+      elementsRef: m,
+      onMapChange: (Y) => {
+        G?.(Y), I(Y);
+      },
+      children: W
+    })
+  });
+}
+export {
+  Se as A,
+  Ve as C,
+  Fe as u
+};

package/dist/DirectionContext-C2o_MF_i.js

@@ -0,0 +1,9 @@
+import * as t from "react";
+const e = /* @__PURE__ */ t.createContext(void 0);
+process.env.NODE_ENV !== "production" && (e.displayName = "DirectionContext");
+function o() {
+  return t.useContext(e)?.direction ?? "ltr";
+}
+export {
+  o as u
+};

package/dist/FieldItemContext-DAvk99to.js

@@ -0,0 +1,11 @@
+import * as t from "react";
+const e = /* @__PURE__ */ t.createContext({
+  disabled: !1
+});
+process.env.NODE_ENV !== "production" && (e.displayName = "FieldItemContext");
+function n() {
+  return t.useContext(e);
+}
+export {
+  n as u
+};