@koide-labs/ui 0.0.3 → 0.0.4

package/README.md

@@ -9,7 +9,7 @@ Accessible, fresh, and simple.
 ## Installation
 
 ```bash
-pnpm add @koide-labs/ui
+pnpm add @koide-labs/ui remixicon
 ```
 
 Because we import CSS modules for each component, you must add this to your Vite config.
@@ -24,17 +24,7 @@ export default defineConfig({
 });
 ```
 
-## Styling
-
-I highly recommend using TailwindCSS.
-
-```css
-@import "tailwindcss" important;
-@import "@koide-labs/integrations/tailwind.css";
-@import "@koide-labs/styles/core.css";
-```
-
-### Fonts
+Then, include the necessary fonts.
 
 - IBM Plex Sans
 - IBM Plex Mono
@@ -52,6 +42,16 @@ I highly recommend using TailwindCSS.
 />
 ```
 
+## Styling
+
+I highly recommend using TailwindCSS.
+
+```css
+@import "tailwindcss" important;
+@import "@koide-labs/ui/integrations/tailwind.css";
+@import "@koide-labs/ui/styles/core.css";
+```
+
 ## Development
 
 Run the Storybook development server.

package/dist/components/accordion/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as k, jsxs as ne } from "react/jsx-runtime";
 import { c as Ce } from "../../clsx-OuTLNxxd.js";
 import { textify as te } from "../../-utils.js";

package/dist/components/alert-dialog/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as o, jsxs as g } from "react/jsx-runtime";
 import { c as _ } from "../../clsx-OuTLNxxd.js";
 import { Button as v } from "../button/index.js";
@@ -8,7 +9,7 @@ import { t as D } from "../../transitions.module-CWX8e5cx.js";
 import { u as R, a as I, D as T, b, c as w, d as N, e as O, f as S, s as n, g as k, h as B, i as j } from "../../dialog.module-BeF-6XAo.js";
 import * as A from "react";
 import { a as V } from "../../useRenderElement-DwToLA61.js";
-import '../../index17.css';function $(t) {
+import '../../index18.css';function $(t) {
   const {
     children: r,
     open: i,

package/dist/components/anchor/index.js

@@ -1,16 +1,17 @@
-import { jsxs as c, Fragment as s, jsx as m } from "react/jsx-runtime";
-import { Icon as t } from "../icon/index.js";
-import { u as _ } from "../../useRender-CLx7dR_1.js";
-import { m as i } from "../../useRenderElement-DwToLA61.js";
-import '../../index6.css';const l = "_anchor_71aa4_1", h = "_anchor__icon_71aa4_14", r = {
-  anchor: l,
+"use client";
+import { jsxs as c, Fragment as s, jsx as t } from "react/jsx-runtime";
+import { Icon as m } from "../icon/index.js";
+import { u as i } from "../../useRender-CLx7dR_1.js";
+import { m as l } from "../../useRenderElement-DwToLA61.js";
+import '../../index6.css';const _ = "_anchor_71aa4_1", h = "_anchor__icon_71aa4_14", r = {
+  anchor: _,
   anchor__icon: h
 };
-function x({ external: n, render: o, children: e, ...a }) {
-  return _({
+function x({ external: n, render: e, children: o, ...a }) {
+  return i({
     defaultTagName: "a",
-    render: o,
-    props: i(
+    render: e,
+    props: l(
       {
         className: r.anchor,
         ...n ? {
@@ -18,9 +19,9 @@ function x({ external: n, render: o, children: e, ...a }) {
           rel: "noreferrer"
         } : {},
         children: /* @__PURE__ */ c(s, { children: [
-          e,
-          n ? /* @__PURE__ */ m(
-            t,
+          o,
+          n ? /* @__PURE__ */ t(
+            m,
             {
               name: "external-link-line",
               size: "sm",

package/dist/components/avatar/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as m, jsxs as L } from "react/jsx-runtime";
 import { c as R } from "../../clsx-OuTLNxxd.js";
 import * as o from "react";

package/dist/components/badge/index.js

@@ -1,39 +1,40 @@
-import { jsx as e, jsxs as g, Fragment as c } from "react/jsx-runtime";
+"use client";
+import { jsx as e, jsxs as c, Fragment as g } from "react/jsx-runtime";
 import { c as p } from "../../clsx-OuTLNxxd.js";
 import { Icon as f } from "../icon/index.js";
-import { Text as _ } from "../text/index.js";
-import { Tooltip as b } from "../tooltip/index.js";
-import { View as h } from "../view/index.js";
-import { u } from "../../useRender-CLx7dR_1.js";
+import { Text as u } from "../text/index.js";
+import { Tooltip as _ } from "../tooltip/index.js";
+import { View as b } from "../view/index.js";
+import { u as h } from "../../useRender-CLx7dR_1.js";
 import { m as x } from "../../useRenderElement-DwToLA61.js";
-import '../../index7.css';const y = "_badge_sf2gl_1", T = "_badge_shiny_sf2gl_16", m = {
+import '../../index7.css';const y = "_badge_sf2gl_1", T = "_badge_shiny_sf2gl_16", t = {
   badge: y,
   badge_shiny: T
 };
 function R({
   icon: r,
-  name: t,
+  name: m,
   color: n,
   shiny: i,
   tagline: s,
   render: a,
   ...l
 }) {
-  const d = u({
+  const d = h({
     defaultTagName: "span",
     render: a,
     props: x(
       {
-        className: p(m.badge, i && m.badge_shiny),
-        children: /* @__PURE__ */ g(c, { children: [
+        className: p(t.badge, i && t.badge_shiny),
+        children: /* @__PURE__ */ c(g, { children: [
           r ? /* @__PURE__ */ e(f, { name: r }) : null,
-          t
+          m
         ] })
       },
       l
     )
-  }), o = /* @__PURE__ */ e(h, { color: n, children: d });
-  return s ? /* @__PURE__ */ e(b, { trigger: o, children: /* @__PURE__ */ e(_, { size: "sm", multiline: !0, children: s }) }) : o;
+  }), o = /* @__PURE__ */ e(b, { color: n, children: d });
+  return s ? /* @__PURE__ */ e(_, { trigger: o, children: /* @__PURE__ */ e(u, { size: "sm", multiline: !0, children: s }) }) : o;
 }
 export {
   R as Badge

package/dist/components/button/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as b, jsx as _ } from "react/jsx-runtime";
 import { c as l } from "../../clsx-OuTLNxxd.js";
 import { textify as g } from "../../-utils.js";

package/dist/components/checkbox/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as A, jsx as m } from "react/jsx-runtime";
 import { Icon as we } from "../icon/index.js";
 import { Text as Fe } from "../text/index.js";

package/dist/components/code/index.js

@@ -1,10 +1,11 @@
+"use client";
 import "react/jsx-runtime";
 import "../../clsx-OuTLNxxd.js";
-import { C as a } from "../../index-BX1XbbRk.js";
+import { C } from "../../index-BX1XbbRk.js";
 import "react";
 import "../surface/index.js";
 import "../text/index.js";
 import "../view/index.js";
 export {
-  a as Code
+  C as Code
 };

package/dist/components/collapse/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { c as p } from "../../clsx-OuTLNxxd.js";
 import { useRef as d, useState as i, useLayoutEffect as m } from "react";
 import { u } from "../../useRender-CLx7dR_1.js";
@@ -8,8 +9,8 @@ import '../../index9.css';const f = "_collapse_ejmjl_1", h = "_collapse_expand_e
   collapse_hidden: x
 };
 function R({
-  expand: o = !0,
-  render: s,
+  expand: s = !0,
+  render: o,
   recalculate: c,
   ...a
 }) {
@@ -21,14 +22,14 @@ function R({
     e.removeAttribute("style"), e.style.width = `${l.current.offsetWidth}px`, e.className = t.collapse_hidden, document.body.appendChild(e), r(e.offsetHeight), e.remove();
   }, [c]), u({
     defaultTagName: "div",
-    render: s,
+    render: o,
     ref: l,
     props: _(
       {
-        "aria-hidden": !o,
+        "aria-hidden": !s,
         className: p(
           t.collapse,
-          o && t.collapse_expand
+          s && t.collapse_expand
         ),
         style: { "--collapse-height": `${n}px` }
       },

package/dist/components/command/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as E, jsxs as oe, Fragment as Qe } from "react/jsx-runtime";
 import { c as We } from "../../clsx-OuTLNxxd.js";
 import * as a from "react";

package/dist/components/context-menu/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as c, jsxs as ee } from "react/jsx-runtime";
 import { c as de } from "../../clsx-OuTLNxxd.js";
 import * as t from "react";

package/dist/components/dialog/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import { c as f } from "../../clsx-OuTLNxxd.js";
 import { Button as y } from "../button/index.js";

package/dist/components/heading/index.js

@@ -1,5 +1,6 @@
-import { jsx as s } from "react/jsx-runtime";
-import { createContext as u, useContext as i } from "react";
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { createContext as f, useContext as i } from "react";
 import { Text as x } from "../text/index.js";
 import { u as c } from "../../useRender-CLx7dR_1.js";
 import { m as g } from "../../useRenderElement-DwToLA61.js";
@@ -12,7 +13,7 @@ import '../../index10.css';const p = "_heading_qlffn_1", v = {
   4: "lg",
   5: "md",
   6: "md"
-}, a = u(0);
+}, s = f(0);
 function _({
   level: e,
   size: t,
@@ -20,8 +21,8 @@ function _({
   render: o,
   ...r
 }) {
-  const l = i(a), m = d(e || l), f = c({
-    defaultTagName: `h${m}`,
+  const l = i(s), a = d(e || l), u = c({
+    defaultTagName: `h${a}`,
     render: o,
     props: g(
       {
@@ -30,22 +31,22 @@ function _({
       r
     )
   });
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ m(
     x,
     {
-      render: f,
-      size: t || h[m],
+      render: u,
+      size: t || h[a],
       color: n
     }
   );
 }
 function M({ level: e, render: t, ...n }) {
-  const o = i(a) ?? 0, r = d(e || o + 1), l = c({
+  const o = i(s) ?? 0, r = d(e || o + 1), l = c({
     defaultTagName: "section",
     render: t,
     props: n
   });
-  return /* @__PURE__ */ s(a.Provider, { value: r, children: l });
+  return /* @__PURE__ */ m(s.Provider, { value: r, children: l });
 }
 function d(e = 1) {
   return Math.max(Math.min(e, 6), 1);