@repodeckhz/react 0.6.0

package/README.md

@@ -0,0 +1,87 @@
+# @repodeckhz/react
+
+> Thin React wrapper around the [`repodeck`](../web-component) web component.
+
+Gives React users a familiar `<RepoDeck />` component instead of dealing with custom-element refs directly.
+
+## Install
+
+```bash
+npm install @repodeckhz/react repodeck
+```
+
+## Usage
+
+```tsx
+import { RepoDeck, RepoDeckList } from '@repodeckhz/react';
+
+export default function Page() {
+  return (
+    <div>
+      <RepoDeck
+        owner="your-name"
+        repo="your-repo"
+        preset="standard"
+        showStats
+        onLoad={(data) => console.log('loaded', data)}
+        onModalOpen={() => console.log('modal opened')}
+      />
+
+      <RepoDeckList
+        repos="your-name/project-a,your-name/project-b,your-name/project-c"
+        showStats
+        lazy
+        sort="stars"
+        sortOrder="desc"
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+### `<RepoDeck>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `owner` | `string` | required | GitHub owner |
+| `repo` | `string` | required | GitHub repo |
+| `branch` | `string` | `main` | Branch to read from |
+| `ref` | `string` | (none) | Tag or commit SHA pin |
+| `preset` | `'minimal' \| 'standard' \| 'detailed'` | `standard` | Card preset |
+| `configPath` | `string` | `config-repodeck` | Custom config folder name |
+| `theme` | `'light' \| 'dark' \| 'auto'` | `auto` | Card theme |
+| `modalSections` | `string` | `readme,screenshots,link` | Ordered modal sections |
+| `radius` | `'sharp' \| 'soft' \| 'round' \| string` | `soft` | Corner radius |
+| `dataUrl` | `string` | (none) | Custom data endpoint, `inline`, or `direct` |
+| `token` | `string` | (none) | GitHub token sent to the data endpoint |
+| `showStats` | `boolean` | false | Show stars/forks badge |
+| `lazy` | `boolean` | false | IntersectionObserver lazy load |
+| `hideBranding` | `boolean` | false | Hide "powered by" link |
+| `noOptimize` | `boolean` | false | Disable the default WebP re-encoding of screenshots |
+| `locale` | `'en' \| 'pt' \| 'es' \| 'fr'` | `en` | UI language |
+| `debug` | `boolean` | false | Verbose lifecycle logging |
+| `onLoad` | `(data) => void` | (none) | Called when data loads |
+| `onError` | `(error) => void` | (none) | Called on error |
+| `onModalOpen` | `() => void` | (none) | Called when modal opens |
+| `onModalClose` | `() => void` | (none) | Called when modal closes |
+
+### `<RepoDeckList>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `repos` | `string` | required | Comma-separated `owner/repo` list |
+| `cols` | `string` | (none) | Grid columns (e.g. `3` or `repeat(auto-fit, minmax(280px, 1fr))`) |
+| `gap` | `string` | (none) | Grid gap (e.g. `16px`) |
+| `sort` | `'none' \| 'order' \| 'stars' \| 'name'` | `none` | Sort key |
+| `sortOrder` | `'asc' \| 'desc'` | `asc` | Sort direction |
+| `filterTag` | `string` | (none) | Filter by frontmatter tags |
+| `batchCheck` | `boolean` | false | Check rate limit before loading |
+| `token` | `string` | (none) | GitHub token forwarded to each card |
+| `noOptimize` | `boolean` | false | Disables WebP re-encoding on every card |
+| ... | | | All other props from `<RepoDeck>` are forwarded to each card |
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,145 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('@repodeckhz/web/auto');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var RepoDeck = React__default.default.forwardRef(function RepoDeck2(props, forwardedRef) {
+  const {
+    owner,
+    repo,
+    branch,
+    ref: refAttr,
+    preset,
+    configPath,
+    theme,
+    modalSections,
+    radius,
+    dataUrl,
+    showStats,
+    lazy,
+    hideBranding,
+    locale,
+    debug,
+    noOptimize,
+    token,
+    className,
+    style,
+    onLoad,
+    onError,
+    onModalOpen,
+    onModalClose
+  } = props;
+  const internalRef = React.useRef(null);
+  React.useEffect(() => {
+    const el = internalRef.current;
+    if (!el) return;
+    if (typeof forwardedRef === "function") forwardedRef(el);
+    else if (forwardedRef) forwardedRef.current = el;
+    if (refAttr) el.setAttribute("ref", refAttr);
+    if (onLoad) {
+      const handler = (e) => onLoad(e.detail?.data);
+      el.addEventListener("repodeck:loaded", handler);
+    }
+    if (onError) {
+      const handler = (e) => onError(e.detail?.error);
+      el.addEventListener("repodeck:error", handler);
+    }
+    if (onModalOpen) {
+      el.addEventListener("repodeck:modal-open", onModalOpen);
+    }
+    if (onModalClose) {
+      el.addEventListener("repodeck:modal-close", onModalClose);
+    }
+  }, [forwardedRef, refAttr, onLoad, onError, onModalOpen, onModalClose]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "repo-deck",
+    {
+      ref: internalRef,
+      owner,
+      repo,
+      ...branch ? { branch } : {},
+      ...preset ? { preset } : {},
+      ...configPath ? { "config-path": configPath } : {},
+      ...theme ? { theme } : {},
+      ...modalSections ? { "modal-sections": modalSections } : {},
+      ...radius ? { radius } : {},
+      ...dataUrl ? { "data-url": dataUrl } : {},
+      ...showStats ? { "show-stats": "" } : {},
+      ...lazy ? { lazy: "" } : {},
+      ...hideBranding ? { "hide-branding": "" } : {},
+      ...locale ? { locale } : {},
+      ...debug ? { debug: "" } : {},
+      ...noOptimize ? { "no-optimize": "" } : {},
+      ...token ? { token } : {}
+    }
+  ) });
+});
+var RepoDeckList = React__default.default.forwardRef(function RepoDeckList2(props, forwardedRef) {
+  const {
+    repos,
+    preset,
+    theme,
+    radius,
+    cols,
+    gap,
+    showStats,
+    lazy,
+    locale,
+    sort,
+    sortOrder,
+    filterTag,
+    batchCheck,
+    dataUrl,
+    modalSections,
+    configPath,
+    noOptimize,
+    token,
+    className,
+    style
+  } = props;
+  const internalRef = React.useRef(null);
+  React.useEffect(() => {
+    const el = internalRef.current;
+    if (!el) return;
+    if (typeof forwardedRef === "function") forwardedRef(el);
+    else if (forwardedRef) forwardedRef.current = el;
+  }, [forwardedRef]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "repodeck-list",
+    {
+      ref: internalRef,
+      repos,
+      ...preset ? { preset } : {},
+      ...theme ? { theme } : {},
+      ...radius ? { radius } : {},
+      ...cols ? { cols } : {},
+      ...gap ? { gap } : {},
+      ...showStats ? { "show-stats": "" } : {},
+      ...lazy ? { lazy: "" } : {},
+      ...locale ? { locale } : {},
+      ...sort ? { sort } : {},
+      ...sortOrder ? { "sort-order": sortOrder } : {},
+      ...filterTag ? { "filter-tag": filterTag } : {},
+      ...batchCheck ? { "batch-check": "" } : {},
+      ...dataUrl ? { "data-url": dataUrl } : {},
+      ...modalSections ? { "modal-sections": modalSections } : {},
+      ...configPath ? { "config-path": configPath } : {},
+      ...noOptimize ? { "no-optimize": "" } : {},
+      ...token ? { token } : {}
+    }
+  ) });
+});
+var index_default = RepoDeck;
+
+exports.RepoDeck = RepoDeck;
+exports.RepoDeckList = RepoDeckList;
+exports.default = index_default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","RepoDeck","useRef","useEffect","jsx","RepoDeckList"],"mappings":";;;;;;;;;;;;AA0DO,IAAM,WAAWA,sBAAA,CAAM,UAAA,CAAuC,SAASC,SAAAA,CAC5E,OACA,YAAA,EACA;AACA,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAA,EAAK,OAAA;AAAA,IACL,MAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,WAAA,GAAcC,aAAoB,IAAI,CAAA;AAE5C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,KAAK,WAAA,CAAY,OAAA;AACvB,IAAA,IAAI,CAAC,EAAA,EAAI;AAGT,IAAA,IAAI,OAAO,YAAA,KAAiB,UAAA,EAAY,YAAA,CAAa,EAAE,CAAA;AAAA,SAAA,IAC9C,YAAA,EAAe,YAAA,CAA4D,OAAA,GAAU,EAAA;AAI9F,IAAA,IAAI,OAAA,EAAS,EAAA,CAAG,YAAA,CAAa,KAAA,EAAO,OAAO,CAAA;AAG3C,IAAA,IAAI,MAAA,EAAQ;AACV,MAAA,MAAM,UAAU,CAAC,CAAA,KAAa,MAAA,CAAQ,CAAA,CAAkB,QAAQ,IAAI,CAAA;AACpE,MAAA,EAAA,CAAG,gBAAA,CAAiB,mBAAmB,OAAwB,CAAA;AAAA,IACjE;AACA,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,MAAM,UAAU,CAAC,CAAA,KAAa,OAAA,CAAS,CAAA,CAAkB,QAAQ,KAAK,CAAA;AACtE,MAAA,EAAA,CAAG,gBAAA,CAAiB,kBAAkB,OAAwB,CAAA;AAAA,IAChE;AACA,IAAA,IAAI,WAAA,EAAa;AACf,MAAA,EAAA,CAAG,gBAAA,CAAiB,uBAAuB,WAA4B,CAAA;AAAA,IACzE;AACA,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,EAAA,CAAG,gBAAA,CAAiB,wBAAwB,YAA6B,CAAA;AAAA,IAC3E;AAAA,EACF,CAAA,EAAG,CAAC,YAAA,EAAc,OAAA,EAAS,QAAQ,OAAA,EAAS,WAAA,EAAa,YAAY,CAAC,CAAA;AAEtE,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAsB,KAAA,EACzB,QAAA,kBAAAA,cAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,WAAA;AAAA,MACL,KAAA;AAAA,MACA,IAAA;AAAA,MACC,GAAI,MAAA,GAAS,EAAE,MAAA,KAAW,EAAC;AAAA,MAC3B,GAAI,MAAA,GAAS,EAAE,MAAA,KAAW,EAAC;AAAA,MAC3B,GAAI,UAAA,GAAa,EAAE,aAAA,EAAe,UAAA,KAAe,EAAC;AAAA,MAClD,GAAI,KAAA,GAAQ,EAAE,KAAA,KAAU,EAAC;AAAA,MACzB,GAAI,aAAA,GAAgB,EAAE,gBAAA,EAAkB,aAAA,KAAkB,EAAC;AAAA,MAC3D,GAAI,MAAA,GAAS,EAAE,MAAA,KAAW,EAAC;AAAA,MAC3B,GAAI,OAAA,GAAU,EAAE,UAAA,EAAY,OAAA,KAAY,EAAC;AAAA,MACzC,GAAI,SAAA,GAAY,EAAE,YAAA,EAAc,EAAA,KAAO,EAAC;AAAA,MACxC,GAAI,IAAA,GAAO,EAAE,IAAA,EAAM,EAAA,KAAO,EAAC;AAAA,MAC3B,GAAI,YAAA,GAAe,EAAE,eAAA,EAAiB,EAAA,KAAO,EAAC;AAAA,MAC9C,GAAI,MAAA,GAAS,EAAE,MAAA,KAAW,EAAC;AAAA,MAC3B,GAAI,KAAA,GAAQ,EAAE,KAAA,EAAO,EAAA,KAAO,EAAC;AAAA,MAC7B,GAAI,UAAA,GAAa,EAAE,aAAA,EAAe,EAAA,KAAO,EAAC;AAAA,MAC1C,GAAI,KAAA,GAAQ,EAAE,KAAA,KAAU;AAAC;AAAA,GAC5B,EACF,CAAA;AAEJ,CAAC;AAyCM,IAAM,eAAeJ,sBAAA,CAAM,UAAA,CAA2C,SAASK,aAAAA,CACpF,OACA,YAAA,EACA;AACA,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,WAAA,GAAcH,aAAoB,IAAI,CAAA;AAE5C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,KAAK,WAAA,CAAY,OAAA;AACvB,IAAA,IAAI,CAAC,EAAA,EAAI;AACT,IAAA,IAAI,OAAO,YAAA,KAAiB,UAAA,EAAY,YAAA,CAAa,EAAE,CAAA;AAAA,SAAA,IAC9C,YAAA,EAAe,YAAA,CAA4D,OAAA,GAAU,EAAA;AAAA,EAChG,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAsB,KAAA,EACzB,QAAA,kBAAAA,cAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,WAAA;AAAA,MACL,KAAA;AAAA,MACC,GAAI,MAAA,GAAS,EAAE,MAAA,KAAW,EAAC;AAAA,MAC3B,GAAI,KAAA,GAAQ,EAAE,KAAA,KAAU,EAAC;AAAA,MACzB,GAAI,MAAA,GAAS,EAAE,MAAA,KAAW,EAAC;AAAA,MAC3B,GAAI,IAAA,GAAO,EAAE,IAAA,KAAS,EAAC;AAAA,MACvB,GAAI,GAAA,GAAM,EAAE,GAAA,KAAQ,EAAC;AAAA,MACrB,GAAI,SAAA,GAAY,EAAE,YAAA,EAAc,EAAA,KAAO,EAAC;AAAA,MACxC,GAAI,IAAA,GAAO,EAAE,IAAA,EAAM,EAAA,KAAO,EAAC;AAAA,MAC3B,GAAI,MAAA,GAAS,EAAE,MAAA,KAAW,EAAC;AAAA,MAC3B,GAAI,IAAA,GAAO,EAAE,IAAA,KAAS,EAAC;AAAA,MACvB,GAAI,SAAA,GAAY,EAAE,YAAA,EAAc,SAAA,KAAc,EAAC;AAAA,MAC/C,GAAI,SAAA,GAAY,EAAE,YAAA,EAAc,SAAA,KAAc,EAAC;AAAA,MAC/C,GAAI,UAAA,GAAa,EAAE,aAAA,EAAe,EAAA,KAAO,EAAC;AAAA,MAC1C,GAAI,OAAA,GAAU,EAAE,UAAA,EAAY,OAAA,KAAY,EAAC;AAAA,MACzC,GAAI,aAAA,GAAgB,EAAE,gBAAA,EAAkB,aAAA,KAAkB,EAAC;AAAA,MAC3D,GAAI,UAAA,GAAa,EAAE,aAAA,EAAe,UAAA,KAAe,EAAC;AAAA,MAClD,GAAI,UAAA,GAAa,EAAE,aAAA,EAAe,EAAA,KAAO,EAAC;AAAA,MAC1C,GAAI,KAAA,GAAQ,EAAE,KAAA,KAAU;AAAC;AAAA,GAC5B,EACF,CAAA;AAEJ,CAAC;AAED,IAAO,aAAA,GAAQ","file":"index.cjs","sourcesContent":["/**\r\n * @repodeckhz/react — thin React wrapper around the <repo-deck> web component.\r\n *\r\n * Plan §2: \"wrapper fino em cima do web component, opcional/futuro\".\r\n * This gives React users a familiar <RepoDeck /> component instead of\r\n * dealing with custom-element refs directly.\r\n *\r\n * The web component auto-registers on import — this wrapper just provides\r\n * typed props.\r\n */\r\n\r\n'use client';\r\n\r\nimport React, { useEffect, useRef } from 'react';\r\nimport '@repodeckhz/web/auto';\r\n\r\nexport interface RepoDeckProps {\r\n  owner: string;\r\n  repo: string;\r\n  branch?: string;\r\n  ref?: string;\r\n  preset?: 'minimal' | 'standard' | 'detailed';\r\n  configPath?: string;\r\n  theme?: 'light' | 'dark' | 'auto';\r\n  modalSections?: string;\r\n  radius?: 'sharp' | 'soft' | 'round' | string;\r\n  dataUrl?: string;\r\n  showStats?: boolean;\r\n  lazy?: boolean;\r\n  hideBranding?: boolean;\r\n  locale?: string;\r\n  debug?: boolean;\r\n  /** Disables the default client-side WebP re-encoding of screenshots. */\r\n  noOptimize?: boolean;\r\n  /** GitHub token forwarded to the data endpoint via the Authorization header. */\r\n  token?: string;\r\n  /** Optional className for the wrapper div. */\r\n  className?: string;\r\n  /** Optional style for the wrapper div. */\r\n  style?: React.CSSProperties;\r\n  /** Called when the card data loads. */\r\n  onLoad?: (data: unknown) => void;\r\n  /** Called when the card errors. */\r\n  onError?: (error: unknown) => void;\r\n  /** Called when the modal opens. */\r\n  onModalOpen?: () => void;\r\n  /** Called when the modal closes. */\r\n  onModalClose?: () => void;\r\n}\r\n\r\n/**\r\n * React wrapper for the <repo-deck> Custom Element.\r\n *\r\n * @example\r\n * import { RepoDeck } from '@repodeckhz/react';\r\n *\r\n * <RepoDeck owner=\"your-name\" repo=\"your-repo\" preset=\"standard\" showStats />\r\n */\r\nexport const RepoDeck = React.forwardRef<HTMLElement, RepoDeckProps>(function RepoDeck(\r\n  props,\r\n  forwardedRef,\r\n) {\r\n  const {\r\n    owner,\r\n    repo,\r\n    branch,\r\n    ref: refAttr,\r\n    preset,\r\n    configPath,\r\n    theme,\r\n    modalSections,\r\n    radius,\r\n    dataUrl,\r\n    showStats,\r\n    lazy,\r\n    hideBranding,\r\n    locale,\r\n    debug,\r\n    noOptimize,\r\n    token,\r\n    className,\r\n    style,\r\n    onLoad,\r\n    onError,\r\n    onModalOpen,\r\n    onModalClose,\r\n  } = props as RepoDeckProps & { ref?: string };\r\n\r\n  const internalRef = useRef<HTMLElement>(null);\r\n\r\n  useEffect(() => {\r\n    const el = internalRef.current;\r\n    if (!el) return;\r\n\r\n    // Set the forwarded ref.\r\n    if (typeof forwardedRef === 'function') forwardedRef(el);\r\n    else if (forwardedRef) (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = el;\r\n\r\n    // The `ref` prop (tag/commit pin, plan §16.7) conflicts with React's `ref`\r\n    // for element refs — set it as an attribute imperatively.\r\n    if (refAttr) el.setAttribute('ref', refAttr);\r\n\r\n    // Wire event listeners.\r\n    if (onLoad) {\r\n      const handler = (e: Event) => onLoad((e as CustomEvent).detail?.data);\r\n      el.addEventListener('repodeck:loaded', handler as EventListener);\r\n    }\r\n    if (onError) {\r\n      const handler = (e: Event) => onError((e as CustomEvent).detail?.error);\r\n      el.addEventListener('repodeck:error', handler as EventListener);\r\n    }\r\n    if (onModalOpen) {\r\n      el.addEventListener('repodeck:modal-open', onModalOpen as EventListener);\r\n    }\r\n    if (onModalClose) {\r\n      el.addEventListener('repodeck:modal-close', onModalClose as EventListener);\r\n    }\r\n  }, [forwardedRef, refAttr, onLoad, onError, onModalOpen, onModalClose]);\r\n\r\n  return (\r\n    <div className={className} style={style}>\r\n      <repo-deck\r\n        ref={internalRef}\r\n        owner={owner}\r\n        repo={repo}\r\n        {...(branch ? { branch } : {})}\r\n        {...(preset ? { preset } : {})}\r\n        {...(configPath ? { 'config-path': configPath } : {})}\r\n        {...(theme ? { theme } : {})}\r\n        {...(modalSections ? { 'modal-sections': modalSections } : {})}\r\n        {...(radius ? { radius } : {})}\r\n        {...(dataUrl ? { 'data-url': dataUrl } : {})}\r\n        {...(showStats ? { 'show-stats': '' } : {})}\r\n        {...(lazy ? { lazy: '' } : {})}\r\n        {...(hideBranding ? { 'hide-branding': '' } : {})}\r\n        {...(locale ? { locale } : {})}\r\n        {...(debug ? { debug: '' } : {})}\r\n        {...(noOptimize ? { 'no-optimize': '' } : {})}\r\n        {...(token ? { token } : {})}\r\n      />\r\n    </div>\r\n  );\r\n});\r\n\r\nexport interface RepoDeckListProps {\r\n  repos: string;\r\n  preset?: 'minimal' | 'standard' | 'detailed';\r\n  theme?: 'light' | 'dark' | 'auto';\r\n  radius?: 'sharp' | 'soft' | 'round' | string;\r\n  cols?: string;\r\n  gap?: string;\r\n  showStats?: boolean;\r\n  lazy?: boolean;\r\n  locale?: string;\r\n  sort?: 'none' | 'order' | 'stars' | 'name';\r\n  sortOrder?: 'asc' | 'desc';\r\n  filterTag?: string;\r\n  batchCheck?: boolean;\r\n  dataUrl?: string;\r\n  modalSections?: string;\r\n  configPath?: string;\r\n  /** Disables the default client-side WebP re-encoding of screenshots. */\r\n  noOptimize?: boolean;\r\n  /** GitHub token forwarded to each card's data endpoint (Authorization header). */\r\n  token?: string;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n}\r\n\r\n/**\r\n * React wrapper for the <repodeck-list> Custom Element.\r\n *\r\n * @example\r\n * import { RepoDeckList } from '@repodeckhz/react';\r\n *\r\n * <RepoDeckList\r\n *   repos=\"your-name/project-a,your-name/project-b\"\r\n *   showStats\r\n *   lazy\r\n *   sort=\"stars\"\r\n *   sort-order=\"desc\"\r\n * />\r\n */\r\nexport const RepoDeckList = React.forwardRef<HTMLElement, RepoDeckListProps>(function RepoDeckList(\r\n  props,\r\n  forwardedRef,\r\n) {\r\n  const {\r\n    repos,\r\n    preset,\r\n    theme,\r\n    radius,\r\n    cols,\r\n    gap,\r\n    showStats,\r\n    lazy,\r\n    locale,\r\n    sort,\r\n    sortOrder,\r\n    filterTag,\r\n    batchCheck,\r\n    dataUrl,\r\n    modalSections,\r\n    configPath,\r\n    noOptimize,\r\n    token,\r\n    className,\r\n    style,\r\n  } = props;\r\n\r\n  const internalRef = useRef<HTMLElement>(null);\r\n\r\n  useEffect(() => {\r\n    const el = internalRef.current;\r\n    if (!el) return;\r\n    if (typeof forwardedRef === 'function') forwardedRef(el);\r\n    else if (forwardedRef) (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = el;\r\n  }, [forwardedRef]);\r\n\r\n  return (\r\n    <div className={className} style={style}>\r\n      <repodeck-list\r\n        ref={internalRef}\r\n        repos={repos}\r\n        {...(preset ? { preset } : {})}\r\n        {...(theme ? { theme } : {})}\r\n        {...(radius ? { radius } : {})}\r\n        {...(cols ? { cols } : {})}\r\n        {...(gap ? { gap } : {})}\r\n        {...(showStats ? { 'show-stats': '' } : {})}\r\n        {...(lazy ? { lazy: '' } : {})}\r\n        {...(locale ? { locale } : {})}\r\n        {...(sort ? { sort } : {})}\r\n        {...(sortOrder ? { 'sort-order': sortOrder } : {})}\r\n        {...(filterTag ? { 'filter-tag': filterTag } : {})}\r\n        {...(batchCheck ? { 'batch-check': '' } : {})}\r\n        {...(dataUrl ? { 'data-url': dataUrl } : {})}\r\n        {...(modalSections ? { 'modal-sections': modalSections } : {})}\r\n        {...(configPath ? { 'config-path': configPath } : {})}\r\n        {...(noOptimize ? { 'no-optimize': '' } : {})}\r\n        {...(token ? { token } : {})}\r\n      />\r\n    </div>\r\n  );\r\n});\r\n\r\nexport default RepoDeck;\r\n"]}

package/dist/index.d.cts

@@ -0,0 +1,96 @@
+import React from 'react';
+
+/**
+ * @repodeckhz/react — thin React wrapper around the <repo-deck> web component.
+ *
+ * Plan §2: "wrapper fino em cima do web component, opcional/futuro".
+ * This gives React users a familiar <RepoDeck /> component instead of
+ * dealing with custom-element refs directly.
+ *
+ * The web component auto-registers on import — this wrapper just provides
+ * typed props.
+ */
+
+interface RepoDeckProps {
+    owner: string;
+    repo: string;
+    branch?: string;
+    ref?: string;
+    preset?: 'minimal' | 'standard' | 'detailed';
+    configPath?: string;
+    theme?: 'light' | 'dark' | 'auto';
+    modalSections?: string;
+    radius?: 'sharp' | 'soft' | 'round' | string;
+    dataUrl?: string;
+    showStats?: boolean;
+    lazy?: boolean;
+    hideBranding?: boolean;
+    locale?: string;
+    debug?: boolean;
+    /** Disables the default client-side WebP re-encoding of screenshots. */
+    noOptimize?: boolean;
+    /** GitHub token forwarded to the data endpoint via the Authorization header. */
+    token?: string;
+    /** Optional className for the wrapper div. */
+    className?: string;
+    /** Optional style for the wrapper div. */
+    style?: React.CSSProperties;
+    /** Called when the card data loads. */
+    onLoad?: (data: unknown) => void;
+    /** Called when the card errors. */
+    onError?: (error: unknown) => void;
+    /** Called when the modal opens. */
+    onModalOpen?: () => void;
+    /** Called when the modal closes. */
+    onModalClose?: () => void;
+}
+/**
+ * React wrapper for the <repo-deck> Custom Element.
+ *
+ * @example
+ * import { RepoDeck } from '@repodeckhz/react';
+ *
+ * <RepoDeck owner="your-name" repo="your-repo" preset="standard" showStats />
+ */
+declare const RepoDeck: React.ForwardRefExoticComponent<Omit<RepoDeckProps, "ref"> & React.RefAttributes<HTMLElement>>;
+interface RepoDeckListProps {
+    repos: string;
+    preset?: 'minimal' | 'standard' | 'detailed';
+    theme?: 'light' | 'dark' | 'auto';
+    radius?: 'sharp' | 'soft' | 'round' | string;
+    cols?: string;
+    gap?: string;
+    showStats?: boolean;
+    lazy?: boolean;
+    locale?: string;
+    sort?: 'none' | 'order' | 'stars' | 'name';
+    sortOrder?: 'asc' | 'desc';
+    filterTag?: string;
+    batchCheck?: boolean;
+    dataUrl?: string;
+    modalSections?: string;
+    configPath?: string;
+    /** Disables the default client-side WebP re-encoding of screenshots. */
+    noOptimize?: boolean;
+    /** GitHub token forwarded to each card's data endpoint (Authorization header). */
+    token?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * React wrapper for the <repodeck-list> Custom Element.
+ *
+ * @example
+ * import { RepoDeckList } from '@repodeckhz/react';
+ *
+ * <RepoDeckList
+ *   repos="your-name/project-a,your-name/project-b"
+ *   showStats
+ *   lazy
+ *   sort="stars"
+ *   sort-order="desc"
+ * />
+ */
+declare const RepoDeckList: React.ForwardRefExoticComponent<RepoDeckListProps & React.RefAttributes<HTMLElement>>;
+
+export { RepoDeck, RepoDeckList, type RepoDeckListProps, type RepoDeckProps, RepoDeck as default };

package/dist/index.d.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+
+/**
+ * @repodeckhz/react — thin React wrapper around the <repo-deck> web component.
+ *
+ * Plan §2: "wrapper fino em cima do web component, opcional/futuro".
+ * This gives React users a familiar <RepoDeck /> component instead of
+ * dealing with custom-element refs directly.
+ *
+ * The web component auto-registers on import — this wrapper just provides
+ * typed props.
+ */
+
+interface RepoDeckProps {
+    owner: string;
+    repo: string;
+    branch?: string;
+    ref?: string;
+    preset?: 'minimal' | 'standard' | 'detailed';
+    configPath?: string;
+    theme?: 'light' | 'dark' | 'auto';
+    modalSections?: string;
+    radius?: 'sharp' | 'soft' | 'round' | string;
+    dataUrl?: string;
+    showStats?: boolean;
+    lazy?: boolean;
+    hideBranding?: boolean;
+    locale?: string;
+    debug?: boolean;
+    /** Disables the default client-side WebP re-encoding of screenshots. */
+    noOptimize?: boolean;
+    /** GitHub token forwarded to the data endpoint via the Authorization header. */
+    token?: string;
+    /** Optional className for the wrapper div. */
+    className?: string;
+    /** Optional style for the wrapper div. */
+    style?: React.CSSProperties;
+    /** Called when the card data loads. */
+    onLoad?: (data: unknown) => void;
+    /** Called when the card errors. */
+    onError?: (error: unknown) => void;
+    /** Called when the modal opens. */
+    onModalOpen?: () => void;
+    /** Called when the modal closes. */
+    onModalClose?: () => void;
+}
+/**
+ * React wrapper for the <repo-deck> Custom Element.
+ *
+ * @example
+ * import { RepoDeck } from '@repodeckhz/react';
+ *
+ * <RepoDeck owner="your-name" repo="your-repo" preset="standard" showStats />
+ */
+declare const RepoDeck: React.ForwardRefExoticComponent<Omit<RepoDeckProps, "ref"> & React.RefAttributes<HTMLElement>>;
+interface RepoDeckListProps {
+    repos: string;
+    preset?: 'minimal' | 'standard' | 'detailed';
+    theme?: 'light' | 'dark' | 'auto';
+    radius?: 'sharp' | 'soft' | 'round' | string;
+    cols?: string;
+    gap?: string;
+    showStats?: boolean;
+    lazy?: boolean;
+    locale?: string;
+    sort?: 'none' | 'order' | 'stars' | 'name';
+    sortOrder?: 'asc' | 'desc';
+    filterTag?: string;
+    batchCheck?: boolean;
+    dataUrl?: string;
+    modalSections?: string;
+    configPath?: string;
+    /** Disables the default client-side WebP re-encoding of screenshots. */
+    noOptimize?: boolean;
+    /** GitHub token forwarded to each card's data endpoint (Authorization header). */
+    token?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * React wrapper for the <repodeck-list> Custom Element.
+ *
+ * @example
+ * import { RepoDeckList } from '@repodeckhz/react';
+ *
+ * <RepoDeckList
+ *   repos="your-name/project-a,your-name/project-b"
+ *   showStats
+ *   lazy
+ *   sort="stars"
+ *   sort-order="desc"
+ * />
+ */
+declare const RepoDeckList: React.ForwardRefExoticComponent<RepoDeckListProps & React.RefAttributes<HTMLElement>>;
+
+export { RepoDeck, RepoDeckList, type RepoDeckListProps, type RepoDeckProps, RepoDeck as default };

package/dist/index.js

@@ -0,0 +1,135 @@
+import React, { useRef, useEffect } from 'react';
+import '@repodeckhz/web/auto';
+import { jsx } from 'react/jsx-runtime';
+
+var RepoDeck = React.forwardRef(function RepoDeck2(props, forwardedRef) {
+  const {
+    owner,
+    repo,
+    branch,
+    ref: refAttr,
+    preset,
+    configPath,
+    theme,
+    modalSections,
+    radius,
+    dataUrl,
+    showStats,
+    lazy,
+    hideBranding,
+    locale,
+    debug,
+    noOptimize,
+    token,
+    className,
+    style,
+    onLoad,
+    onError,
+    onModalOpen,
+    onModalClose
+  } = props;
+  const internalRef = useRef(null);
+  useEffect(() => {
+    const el = internalRef.current;
+    if (!el) return;
+    if (typeof forwardedRef === "function") forwardedRef(el);
+    else if (forwardedRef) forwardedRef.current = el;
+    if (refAttr) el.setAttribute("ref", refAttr);
+    if (onLoad) {
+      const handler = (e) => onLoad(e.detail?.data);
+      el.addEventListener("repodeck:loaded", handler);
+    }
+    if (onError) {
+      const handler = (e) => onError(e.detail?.error);
+      el.addEventListener("repodeck:error", handler);
+    }
+    if (onModalOpen) {
+      el.addEventListener("repodeck:modal-open", onModalOpen);
+    }
+    if (onModalClose) {
+      el.addEventListener("repodeck:modal-close", onModalClose);
+    }
+  }, [forwardedRef, refAttr, onLoad, onError, onModalOpen, onModalClose]);
+  return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(
+    "repo-deck",
+    {
+      ref: internalRef,
+      owner,
+      repo,
+      ...branch ? { branch } : {},
+      ...preset ? { preset } : {},
+      ...configPath ? { "config-path": configPath } : {},
+      ...theme ? { theme } : {},
+      ...modalSections ? { "modal-sections": modalSections } : {},
+      ...radius ? { radius } : {},
+      ...dataUrl ? { "data-url": dataUrl } : {},
+      ...showStats ? { "show-stats": "" } : {},
+      ...lazy ? { lazy: "" } : {},
+      ...hideBranding ? { "hide-branding": "" } : {},
+      ...locale ? { locale } : {},
+      ...debug ? { debug: "" } : {},
+      ...noOptimize ? { "no-optimize": "" } : {},
+      ...token ? { token } : {}
+    }
+  ) });
+});
+var RepoDeckList = React.forwardRef(function RepoDeckList2(props, forwardedRef) {
+  const {
+    repos,
+    preset,
+    theme,
+    radius,
+    cols,
+    gap,
+    showStats,
+    lazy,
+    locale,
+    sort,
+    sortOrder,
+    filterTag,
+    batchCheck,
+    dataUrl,
+    modalSections,
+    configPath,
+    noOptimize,
+    token,
+    className,
+    style
+  } = props;
+  const internalRef = useRef(null);
+  useEffect(() => {
+    const el = internalRef.current;
+    if (!el) return;
+    if (typeof forwardedRef === "function") forwardedRef(el);
+    else if (forwardedRef) forwardedRef.current = el;
+  }, [forwardedRef]);
+  return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(
+    "repodeck-list",
+    {
+      ref: internalRef,
+      repos,
+      ...preset ? { preset } : {},
+      ...theme ? { theme } : {},
+      ...radius ? { radius } : {},
+      ...cols ? { cols } : {},
+      ...gap ? { gap } : {},
+      ...showStats ? { "show-stats": "" } : {},
+      ...lazy ? { lazy: "" } : {},
+      ...locale ? { locale } : {},
+      ...sort ? { sort } : {},
+      ...sortOrder ? { "sort-order": sortOrder } : {},
+      ...filterTag ? { "filter-tag": filterTag } : {},
+      ...batchCheck ? { "batch-check": "" } : {},
+      ...dataUrl ? { "data-url": dataUrl } : {},
+      ...modalSections ? { "modal-sections": modalSections } : {},
+      ...configPath ? { "config-path": configPath } : {},
+      ...noOptimize ? { "no-optimize": "" } : {},
+      ...token ? { token } : {}
+    }
+  ) });
+});
+var index_default = RepoDeck;
+
+export { RepoDeck, RepoDeckList, index_default as default };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["RepoDeck","RepoDeckList"],"mappings":"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","file":"index.js","sourcesContent":["/**\r\n * @repodeckhz/react — thin React wrapper around the <repo-deck> web component.\r\n *\r\n * Plan §2: \"wrapper fino em cima do web component, opcional/futuro\".\r\n * This gives React users a familiar <RepoDeck /> component instead of\r\n * dealing with custom-element refs directly.\r\n *\r\n * The web component auto-registers on import — this wrapper just provides\r\n * typed props.\r\n */\r\n\r\n'use client';\r\n\r\nimport React, { useEffect, useRef } from 'react';\r\nimport '@repodeckhz/web/auto';\r\n\r\nexport interface RepoDeckProps {\r\n  owner: string;\r\n  repo: string;\r\n  branch?: string;\r\n  ref?: string;\r\n  preset?: 'minimal' | 'standard' | 'detailed';\r\n  configPath?: string;\r\n  theme?: 'light' | 'dark' | 'auto';\r\n  modalSections?: string;\r\n  radius?: 'sharp' | 'soft' | 'round' | string;\r\n  dataUrl?: string;\r\n  showStats?: boolean;\r\n  lazy?: boolean;\r\n  hideBranding?: boolean;\r\n  locale?: string;\r\n  debug?: boolean;\r\n  /** Disables the default client-side WebP re-encoding of screenshots. */\r\n  noOptimize?: boolean;\r\n  /** GitHub token forwarded to the data endpoint via the Authorization header. */\r\n  token?: string;\r\n  /** Optional className for the wrapper div. */\r\n  className?: string;\r\n  /** Optional style for the wrapper div. */\r\n  style?: React.CSSProperties;\r\n  /** Called when the card data loads. */\r\n  onLoad?: (data: unknown) => void;\r\n  /** Called when the card errors. */\r\n  onError?: (error: unknown) => void;\r\n  /** Called when the modal opens. */\r\n  onModalOpen?: () => void;\r\n  /** Called when the modal closes. */\r\n  onModalClose?: () => void;\r\n}\r\n\r\n/**\r\n * React wrapper for the <repo-deck> Custom Element.\r\n *\r\n * @example\r\n * import { RepoDeck } from '@repodeckhz/react';\r\n *\r\n * <RepoDeck owner=\"your-name\" repo=\"your-repo\" preset=\"standard\" showStats />\r\n */\r\nexport const RepoDeck = React.forwardRef<HTMLElement, RepoDeckProps>(function RepoDeck(\r\n  props,\r\n  forwardedRef,\r\n) {\r\n  const {\r\n    owner,\r\n    repo,\r\n    branch,\r\n    ref: refAttr,\r\n    preset,\r\n    configPath,\r\n    theme,\r\n    modalSections,\r\n    radius,\r\n    dataUrl,\r\n    showStats,\r\n    lazy,\r\n    hideBranding,\r\n    locale,\r\n    debug,\r\n    noOptimize,\r\n    token,\r\n    className,\r\n    style,\r\n    onLoad,\r\n    onError,\r\n    onModalOpen,\r\n    onModalClose,\r\n  } = props as RepoDeckProps & { ref?: string };\r\n\r\n  const internalRef = useRef<HTMLElement>(null);\r\n\r\n  useEffect(() => {\r\n    const el = internalRef.current;\r\n    if (!el) return;\r\n\r\n    // Set the forwarded ref.\r\n    if (typeof forwardedRef === 'function') forwardedRef(el);\r\n    else if (forwardedRef) (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = el;\r\n\r\n    // The `ref` prop (tag/commit pin, plan §16.7) conflicts with React's `ref`\r\n    // for element refs — set it as an attribute imperatively.\r\n    if (refAttr) el.setAttribute('ref', refAttr);\r\n\r\n    // Wire event listeners.\r\n    if (onLoad) {\r\n      const handler = (e: Event) => onLoad((e as CustomEvent).detail?.data);\r\n      el.addEventListener('repodeck:loaded', handler as EventListener);\r\n    }\r\n    if (onError) {\r\n      const handler = (e: Event) => onError((e as CustomEvent).detail?.error);\r\n      el.addEventListener('repodeck:error', handler as EventListener);\r\n    }\r\n    if (onModalOpen) {\r\n      el.addEventListener('repodeck:modal-open', onModalOpen as EventListener);\r\n    }\r\n    if (onModalClose) {\r\n      el.addEventListener('repodeck:modal-close', onModalClose as EventListener);\r\n    }\r\n  }, [forwardedRef, refAttr, onLoad, onError, onModalOpen, onModalClose]);\r\n\r\n  return (\r\n    <div className={className} style={style}>\r\n      <repo-deck\r\n        ref={internalRef}\r\n        owner={owner}\r\n        repo={repo}\r\n        {...(branch ? { branch } : {})}\r\n        {...(preset ? { preset } : {})}\r\n        {...(configPath ? { 'config-path': configPath } : {})}\r\n        {...(theme ? { theme } : {})}\r\n        {...(modalSections ? { 'modal-sections': modalSections } : {})}\r\n        {...(radius ? { radius } : {})}\r\n        {...(dataUrl ? { 'data-url': dataUrl } : {})}\r\n        {...(showStats ? { 'show-stats': '' } : {})}\r\n        {...(lazy ? { lazy: '' } : {})}\r\n        {...(hideBranding ? { 'hide-branding': '' } : {})}\r\n        {...(locale ? { locale } : {})}\r\n        {...(debug ? { debug: '' } : {})}\r\n        {...(noOptimize ? { 'no-optimize': '' } : {})}\r\n        {...(token ? { token } : {})}\r\n      />\r\n    </div>\r\n  );\r\n});\r\n\r\nexport interface RepoDeckListProps {\r\n  repos: string;\r\n  preset?: 'minimal' | 'standard' | 'detailed';\r\n  theme?: 'light' | 'dark' | 'auto';\r\n  radius?: 'sharp' | 'soft' | 'round' | string;\r\n  cols?: string;\r\n  gap?: string;\r\n  showStats?: boolean;\r\n  lazy?: boolean;\r\n  locale?: string;\r\n  sort?: 'none' | 'order' | 'stars' | 'name';\r\n  sortOrder?: 'asc' | 'desc';\r\n  filterTag?: string;\r\n  batchCheck?: boolean;\r\n  dataUrl?: string;\r\n  modalSections?: string;\r\n  configPath?: string;\r\n  /** Disables the default client-side WebP re-encoding of screenshots. */\r\n  noOptimize?: boolean;\r\n  /** GitHub token forwarded to each card's data endpoint (Authorization header). */\r\n  token?: string;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n}\r\n\r\n/**\r\n * React wrapper for the <repodeck-list> Custom Element.\r\n *\r\n * @example\r\n * import { RepoDeckList } from '@repodeckhz/react';\r\n *\r\n * <RepoDeckList\r\n *   repos=\"your-name/project-a,your-name/project-b\"\r\n *   showStats\r\n *   lazy\r\n *   sort=\"stars\"\r\n *   sort-order=\"desc\"\r\n * />\r\n */\r\nexport const RepoDeckList = React.forwardRef<HTMLElement, RepoDeckListProps>(function RepoDeckList(\r\n  props,\r\n  forwardedRef,\r\n) {\r\n  const {\r\n    repos,\r\n    preset,\r\n    theme,\r\n    radius,\r\n    cols,\r\n    gap,\r\n    showStats,\r\n    lazy,\r\n    locale,\r\n    sort,\r\n    sortOrder,\r\n    filterTag,\r\n    batchCheck,\r\n    dataUrl,\r\n    modalSections,\r\n    configPath,\r\n    noOptimize,\r\n    token,\r\n    className,\r\n    style,\r\n  } = props;\r\n\r\n  const internalRef = useRef<HTMLElement>(null);\r\n\r\n  useEffect(() => {\r\n    const el = internalRef.current;\r\n    if (!el) return;\r\n    if (typeof forwardedRef === 'function') forwardedRef(el);\r\n    else if (forwardedRef) (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = el;\r\n  }, [forwardedRef]);\r\n\r\n  return (\r\n    <div className={className} style={style}>\r\n      <repodeck-list\r\n        ref={internalRef}\r\n        repos={repos}\r\n        {...(preset ? { preset } : {})}\r\n        {...(theme ? { theme } : {})}\r\n        {...(radius ? { radius } : {})}\r\n        {...(cols ? { cols } : {})}\r\n        {...(gap ? { gap } : {})}\r\n        {...(showStats ? { 'show-stats': '' } : {})}\r\n        {...(lazy ? { lazy: '' } : {})}\r\n        {...(locale ? { locale } : {})}\r\n        {...(sort ? { sort } : {})}\r\n        {...(sortOrder ? { 'sort-order': sortOrder } : {})}\r\n        {...(filterTag ? { 'filter-tag': filterTag } : {})}\r\n        {...(batchCheck ? { 'batch-check': '' } : {})}\r\n        {...(dataUrl ? { 'data-url': dataUrl } : {})}\r\n        {...(modalSections ? { 'modal-sections': modalSections } : {})}\r\n        {...(configPath ? { 'config-path': configPath } : {})}\r\n        {...(noOptimize ? { 'no-optimize': '' } : {})}\r\n        {...(token ? { token } : {})}\r\n      />\r\n    </div>\r\n  );\r\n});\r\n\r\nexport default RepoDeck;\r\n"]}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@repodeckhz/react",
+  "version": "0.6.0",
+  "description": "Thin React wrapper around the repodeck web component. Gives React users a familiar <RepoDeck /> component.",
+  "type": "module",
+  "license": "MIT",
+  "author": "repodeckhz",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leibHz/repodeck.git"
+  },
+  "bugs": {
+    "url": "https://github.com/leibHz/repodeck/issues"
+  },
+  "keywords": [
+    "repodeckhz",
+    "react",
+    "github",
+    "card",
+    "embed",
+    "portfolio"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "bun run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@repodeckhz/web": "^0.6.0"
+  },
+  "tsup": {
+    "entry": ["src/index.tsx"],
+    "format": ["esm", "cjs"],
+    "dts": true,
+    "splitting": false,
+    "sourcemap": true,
+    "clean": true,
+    "treeshake": true,
+    "external": ["react", "react-dom", "@repodeckhz/web", "@repodeckhz/web/*"]
+  }
+}