@ngrok/mantle 0.1.4 → 0.1.6

package/README.md

@@ -1,6 +1,6 @@
 # Mantle
 
-[Mantle](https://mantle.ngrok.com) is [ngrok](https://ngrok.com/)’s UI library and design system. It’s based on [shadcn/ui](https://ui.shadcn.com) and [Radix](https://www.radix-ui.com) with [Tailwind](https://tailwindcss.com/) providing styling. It’s documented using [Remix](https://remix.run/docs).
+[Mantle](https://mantle.ngrok.com) is [ngrok](https://ngrok.com/)’s UI library and design system. It’s inspired by [shadcn/ui](https://ui.shadcn.com) and uses [Radix](https://www.radix-ui.com) with [Tailwind](https://tailwindcss.com/) for styling. It’s documented using [Remix](https://remix.run/docs).
 
 ## Get Started
 
@@ -25,37 +25,20 @@ export default {
 } satisfies Config;
 ```
 
-### Installation
-
-Mantle uses `pnpm` as its package manager. First, install the dependencies in the repo’s directory by running `pnpm install`.
-
-### Development and preview
-
-Run `pnpm run docs:dev` to run Remix's development mode, rebuilding assets on file changes.
-
-Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
+Next, check out the [Setup](https://mantle.ngrok.com/setup) and [Theme Provider](https://mantle.ngrok.com/components/theme-provider) usage docs and start using mantle components in your application!
 
-## Deployment
+## Development
 
-First, build the app for production:
-
-```sh
-pnpm run build
-```
-
-Then run the app in production mode:
+### Installation
 
-```sh
-pnpm start
-```
+Mantle uses [bun](https://bun.sh/) as its package manager. First, install the dependencies in the repo’s directory by running `bun install`.
 
-We have chosen vercel to deploy to.
+### Local Development
 
-### DIY
+Run `bun run docs:dev` to run Remix's development mode, rebuilding assets on file changes.
 
-If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
+Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
 
-Make sure to deploy the output of `remix build`
+## Production Deployment
 
-- `build/`
-- `public/build/`
+We use GitHub Actions to deploy our production site to vercel and publish to npm.

package/dist/anchor.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkD3F6KEREcjs = require('./chunk-D3F6KERE.cjs');var _reactslot = require('@radix-ui/react-slot');var _react = require('react');var _jsxruntime = require('react/jsx-runtime');var n=o=>_chunkD3F6KEREcjs.a.call(void 0, "cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent",o),e= exports.Anchor =_react.forwardRef.call(void 0, ({asChild:o,className:t,...s},c)=>_jsxruntime.jsx.call(void 0, o?_reactslot.Slot:"a",{className:n(t),ref:c,...s}));e.displayName="Anchor";exports.Anchor = e; exports.anchorClassNames = n;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _chunkD3F6KEREcjs = require('./chunk-D3F6KERE.cjs');var _reactslot = require('@radix-ui/react-slot');var _react = require('react');var _jsxruntime = require('react/jsx-runtime');var s=e=>_chunkD3F6KEREcjs.a.call(void 0, "cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent",e),i= exports.Anchor =_react.forwardRef.call(void 0, ({asChild:e,className:n,rel:t,...r},c)=>{let u=e?_reactslot.Slot:"a",f=l(t);return _jsxruntime.jsx.call(void 0, u,{className:s(n),ref:c,rel:f,...r})});i.displayName="Anchor";function l(e){return Array.isArray(e)?[...new Set(e)].map(r=>_optionalChain([r, 'optionalAccess', _ => _.trim, 'call', _2 => _2()])).filter(Boolean).sort().join(" ")||void 0:_optionalChain([e, 'optionalAccess', _3 => _3.trim, 'call', _4 => _4()])||void 0}exports.Anchor = i; exports.anchorClassNames = s; exports.resolveRel = l;
 //# sourceMappingURL=anchor.cjs.map

package/dist/anchor.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../packages/anchor/src/anchor.tsx"],"names":["Slot","forwardRef","jsx","anchorClassNames","className","cx","Anchor","asChild","props","ref"],"mappings":"yCAAA,OAAS,QAAAA,MAAY,uBACrB,OAA+B,cAAAC,MAAkB,QAwBzC,cAAAC,MAAA,oBApBR,IAAMC,EAAoBC,GACzBC,EACC,8IACAD,CACD,EAaKE,EAASL,EAA2C,CAAC,CAAE,QAAAM,EAAS,UAAAH,EAAW,GAAGI,CAAM,EAAGC,IAGrFP,EAFWK,EAAUP,EAAO,IAE3B,CAAU,UAAWG,EAAiBC,CAAS,EAAG,IAAKK,EAAM,GAAGD,EAAO,CAC/E,EACDF,EAAO,YAAc","sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { AnchorHTMLAttributes, forwardRef } from \"react\";\nimport { cx } from \"../../cx\";\nimport { WithAsChild } from \"../../types/src/as-child\";\n\nconst anchorClassNames = (className: string | undefined) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\ntype AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & WithAsChild;\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the\n * [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).\n */\nconst Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(({ asChild, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"a\";\n\n\treturn <Component className={anchorClassNames(className)} ref={ref} {...props} />;\n});\nAnchor.displayName = \"Anchor\";\n\nexport { Anchor, anchorClassNames };\n"]}
+{"version":3,"sources":["../packages/anchor/src/anchor.tsx"],"names":["Slot","forwardRef","jsx","anchorClassNames","className","cx","Anchor","asChild","propRel","props","ref","Component","rel","resolveRel","item"],"mappings":"yCAAA,OAAS,QAAAA,MAAY,uBACrB,OAA+B,cAAAC,MAAkB,QAoDzC,cAAAC,MAAA,oBA5CR,IAAMC,EAAoBC,GACzBC,EACC,8IACAD,CACD,EAoCKE,EAASL,EAA2C,CAAC,CAAE,QAAAM,EAAS,UAAAH,EAAW,IAAKI,EAAS,GAAGC,CAAM,EAAGC,IAAQ,CAClH,IAAMC,EAAYJ,EAAUP,EAAO,IAC7BY,EAAMC,EAAWL,CAAO,EAE9B,OAAON,EAACS,EAAA,CAAU,UAAWR,EAAiBC,CAAS,EAAG,IAAKM,EAAK,IAAKE,EAAM,GAAGH,EAAO,CAC1F,CAAC,EACDH,EAAO,YAAc,SAOrB,SAASO,EAAWD,EAA0F,CAC7G,OAAI,MAAM,QAAQA,CAAG,EAEL,CAAC,GADE,IAAI,IAAIA,CAAG,CACD,EAC1B,IAAKE,GAASA,GAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,KAAK,EACL,KAAK,GAAG,GACO,OAIXF,GAAK,KAAK,GAAK,MACvB","sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { AnchorHTMLAttributes, forwardRef } from \"react\";\nimport { cx } from \"../../cx\";\nimport { WithAsChild } from \"../../types/src/as-child\";\nimport type { Rel, Target } from \"./types\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className: string | undefined) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"rel\" | \"target\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t\t/**\n\t\t * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).\n\t\t *\n\t\t * Note: Setting `target=\"_blank\"` on <a> elements implicitly provides the same rel behavior as setting `rel=\"noopener\"` which does not set `window.opener`.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\n\t\t *\n\t\t * @default \"_self\"\n\t\t */\n\t\ttarget?: Target | undefined;\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the\n * [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).\n */\nconst Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(({ asChild, className, rel: propRel, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"a\";\n\tconst rel = resolveRel(propRel);\n\n\treturn <Component className={anchorClassNames(className)} ref={ref} rel={rel} {...props} />;\n});\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(rel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[]) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.sort()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n\treturn rel?.trim() || undefined;\n}\n\nexport { Anchor, anchorClassNames, resolveRel };\nexport type { AnchorProps };\n"]}

package/dist/anchor.d.cts

@@ -1,8 +1,53 @@
 import * as react from 'react';
-import { AnchorHTMLAttributes } from 'react';
+import { HTMLAttributeAnchorTarget, AnchorHTMLAttributes } from 'react';
 import { W as WithAsChild } from './as-child-BjnPZ1DU.cjs';
 
+/**
+ * The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.
+ *
+ * Every keyword within a space-separated value should be unique within that value.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
+ */
+type Rel = "alternate" | "author" | "bookmark" | "canonical" | "dns-prefetch" | "external" | "help" | "icon" | "license" | "manifest" | "me" | "modulepreload" | "next" | "nofollow" | "noopener" | "noreferrer" | "opener" | "pingback" | "preconnect" | "prefetch" | "preload" | "prerender" | "prev" | "privacy-policy" | "search" | "stylesheet" | "tag" | "terms-of-service";
+/**
+ * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
+ *
+ * Note: Setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
+ *
+ * @default "_self"
+ */
+type Target = (HTMLAttributeAnchorTarget & "_self") | "_blank" | "_parent" | "_top" | "_unfencedTop";
+
+/**
+ * The class names for the `Anchor` component which define the styles for the component.
+ */
 declare const anchorClassNames: (className: string | undefined) => string;
+/**
+ * The props for the `Anchor` component.
+ */
+type AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "target"> & WithAsChild & {
+    /**
+     * The rel attribute defines the relationship between a linked resource and the current document.
+     *
+     * Every keyword within a space-separated value should be unique within that value.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
+     */
+    rel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];
+    /**
+     * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
+     *
+     * Note: Setting `target="_blank"` on <a> elements implicitly provides the same rel behavior as setting `rel="noopener"` which does not set `window.opener`.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
+     *
+     * @default "_self"
+     */
+    target?: Target | undefined;
+};
 /**
  * Fundamental component for rendering links to external addresses.
  *
@@ -12,6 +57,31 @@ declare const anchorClassNames: (className: string | undefined) => string;
  * [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the
  * [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).
  */
-declare const Anchor: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & WithAsChild & react.RefAttributes<HTMLAnchorElement>>;
+declare const Anchor: react.ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "target"> & WithAsChild & {
+    /**
+     * The rel attribute defines the relationship between a linked resource and the current document.
+     *
+     * Every keyword within a space-separated value should be unique within that value.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
+     */
+    rel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];
+    /**
+     * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
+     *
+     * Note: Setting `target="_blank"` on <a> elements implicitly provides the same rel behavior as setting `rel="noopener"` which does not set `window.opener`.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
+     *
+     * @default "_self"
+     */
+    target?: Target | undefined;
+} & react.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Resolves the `rel` attribute to a string.
+ *
+ * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.
+ */
+declare function resolveRel(rel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[]): string | undefined;
 
-export { Anchor, anchorClassNames };
+export { Anchor, type AnchorProps, type Rel, type Target, anchorClassNames, resolveRel };

package/dist/anchor.d.ts

@@ -1,8 +1,53 @@
 import * as react from 'react';
-import { AnchorHTMLAttributes } from 'react';
+import { HTMLAttributeAnchorTarget, AnchorHTMLAttributes } from 'react';
 import { W as WithAsChild } from './as-child-BjnPZ1DU.js';
 
+/**
+ * The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.
+ *
+ * Every keyword within a space-separated value should be unique within that value.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
+ */
+type Rel = "alternate" | "author" | "bookmark" | "canonical" | "dns-prefetch" | "external" | "help" | "icon" | "license" | "manifest" | "me" | "modulepreload" | "next" | "nofollow" | "noopener" | "noreferrer" | "opener" | "pingback" | "preconnect" | "prefetch" | "preload" | "prerender" | "prev" | "privacy-policy" | "search" | "stylesheet" | "tag" | "terms-of-service";
+/**
+ * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
+ *
+ * Note: Setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
+ *
+ * @default "_self"
+ */
+type Target = (HTMLAttributeAnchorTarget & "_self") | "_blank" | "_parent" | "_top" | "_unfencedTop";
+
+/**
+ * The class names for the `Anchor` component which define the styles for the component.
+ */
 declare const anchorClassNames: (className: string | undefined) => string;
+/**
+ * The props for the `Anchor` component.
+ */
+type AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "target"> & WithAsChild & {
+    /**
+     * The rel attribute defines the relationship between a linked resource and the current document.
+     *
+     * Every keyword within a space-separated value should be unique within that value.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
+     */
+    rel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];
+    /**
+     * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
+     *
+     * Note: Setting `target="_blank"` on <a> elements implicitly provides the same rel behavior as setting `rel="noopener"` which does not set `window.opener`.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
+     *
+     * @default "_self"
+     */
+    target?: Target | undefined;
+};
 /**
  * Fundamental component for rendering links to external addresses.
  *
@@ -12,6 +57,31 @@ declare const anchorClassNames: (className: string | undefined) => string;
  * [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the
  * [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).
  */
-declare const Anchor: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & WithAsChild & react.RefAttributes<HTMLAnchorElement>>;
+declare const Anchor: react.ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "target"> & WithAsChild & {
+    /**
+     * The rel attribute defines the relationship between a linked resource and the current document.
+     *
+     * Every keyword within a space-separated value should be unique within that value.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
+     */
+    rel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];
+    /**
+     * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
+     *
+     * Note: Setting `target="_blank"` on <a> elements implicitly provides the same rel behavior as setting `rel="noopener"` which does not set `window.opener`.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
+     *
+     * @default "_self"
+     */
+    target?: Target | undefined;
+} & react.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Resolves the `rel` attribute to a string.
+ *
+ * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.
+ */
+declare function resolveRel(rel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[]): string | undefined;
 
-export { Anchor, anchorClassNames };
+export { Anchor, type AnchorProps, type Rel, type Target, anchorClassNames, resolveRel };

package/dist/anchor.js

@@ -1,2 +1,2 @@
-import{a as r}from"./chunk-A5H52ODC.js";import{Slot as i}from"@radix-ui/react-slot";import{forwardRef as h}from"react";import{jsx as m}from"react/jsx-runtime";var n=o=>r("cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent",o),e=h(({asChild:o,className:t,...s},c)=>m(o?i:"a",{className:n(t),ref:c,...s}));e.displayName="Anchor";export{e as Anchor,n as anchorClassNames};
+import{a as o}from"./chunk-A5H52ODC.js";import{Slot as p}from"@radix-ui/react-slot";import{forwardRef as a}from"react";import{jsx as d}from"react/jsx-runtime";var s=e=>o("cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent",e),i=a(({asChild:e,className:n,rel:t,...r},c)=>{let u=e?p:"a",f=l(t);return d(u,{className:s(n),ref:c,rel:f,...r})});i.displayName="Anchor";function l(e){return Array.isArray(e)?[...new Set(e)].map(r=>r?.trim()).filter(Boolean).sort().join(" ")||void 0:e?.trim()||void 0}export{i as Anchor,s as anchorClassNames,l as resolveRel};
 //# sourceMappingURL=anchor.js.map

package/dist/anchor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../packages/anchor/src/anchor.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { AnchorHTMLAttributes, forwardRef } from \"react\";\nimport { cx } from \"../../cx\";\nimport { WithAsChild } from \"../../types/src/as-child\";\n\nconst anchorClassNames = (className: string | undefined) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\ntype AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & WithAsChild;\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the\n * [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).\n */\nconst Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(({ asChild, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"a\";\n\n\treturn <Component className={anchorClassNames(className)} ref={ref} {...props} />;\n});\nAnchor.displayName = \"Anchor\";\n\nexport { Anchor, anchorClassNames };\n"],"mappings":"wCAAA,OAAS,QAAAA,MAAY,uBACrB,OAA+B,cAAAC,MAAkB,QAwBzC,cAAAC,MAAA,oBApBR,IAAMC,EAAoBC,GACzBC,EACC,8IACAD,CACD,EAaKE,EAASC,EAA2C,CAAC,CAAE,QAAAC,EAAS,UAAAJ,EAAW,GAAGK,CAAM,EAAGC,IAGrFR,EAFWM,EAAUG,EAAO,IAE3B,CAAU,UAAWR,EAAiBC,CAAS,EAAG,IAAKM,EAAM,GAAGD,EAAO,CAC/E,EACDH,EAAO,YAAc","names":["Slot","forwardRef","jsx","anchorClassNames","className","cx","Anchor","forwardRef","asChild","props","ref","Slot"]}
+{"version":3,"sources":["../packages/anchor/src/anchor.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { AnchorHTMLAttributes, forwardRef } from \"react\";\nimport { cx } from \"../../cx\";\nimport { WithAsChild } from \"../../types/src/as-child\";\nimport type { Rel, Target } from \"./types\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className: string | undefined) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"rel\" | \"target\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t\t/**\n\t\t * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).\n\t\t *\n\t\t * Note: Setting `target=\"_blank\"` on <a> elements implicitly provides the same rel behavior as setting `rel=\"noopener\"` which does not set `window.opener`.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\n\t\t *\n\t\t * @default \"_self\"\n\t\t */\n\t\ttarget?: Target | undefined;\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the\n * [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).\n */\nconst Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(({ asChild, className, rel: propRel, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"a\";\n\tconst rel = resolveRel(propRel);\n\n\treturn <Component className={anchorClassNames(className)} ref={ref} rel={rel} {...props} />;\n});\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(rel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[]) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.sort()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n\treturn rel?.trim() || undefined;\n}\n\nexport { Anchor, anchorClassNames, resolveRel };\nexport type { AnchorProps };\n"],"mappings":"wCAAA,OAAS,QAAAA,MAAY,uBACrB,OAA+B,cAAAC,MAAkB,QAoDzC,cAAAC,MAAA,oBA5CR,IAAMC,EAAoBC,GACzBC,EACC,8IACAD,CACD,EAoCKE,EAASC,EAA2C,CAAC,CAAE,QAAAC,EAAS,UAAAJ,EAAW,IAAKK,EAAS,GAAGC,CAAM,EAAGC,IAAQ,CAClH,IAAMC,EAAYJ,EAAUK,EAAO,IAC7BC,EAAMC,EAAWN,CAAO,EAE9B,OAAOP,EAACU,EAAA,CAAU,UAAWT,EAAiBC,CAAS,EAAG,IAAKO,EAAK,IAAKG,EAAM,GAAGJ,EAAO,CAC1F,CAAC,EACDJ,EAAO,YAAc,SAOrB,SAASS,EAAWD,EAA0F,CAC7G,OAAI,MAAM,QAAQA,CAAG,EAEL,CAAC,GADE,IAAI,IAAIA,CAAG,CACD,EAC1B,IAAKE,GAASA,GAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,KAAK,EACL,KAAK,GAAG,GACO,OAIXF,GAAK,KAAK,GAAK,MACvB","names":["Slot","forwardRef","jsx","anchorClassNames","className","cx","Anchor","forwardRef","asChild","propRel","props","ref","Component","Slot","rel","resolveRel","item"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -54,12 +54,13 @@
     "@remix-run/eslint-config": "2.8.1",
     "@testing-library/react": "14.3.0",
     "@testing-library/user-event": "14.5.2",
-    "@types/node": "20.12.5",
+    "@types/bun": "latest",
+    "@types/node": "20.12.6",
     "@types/prismjs": "1.26.3",
-    "@types/react": "18.2.74",
+    "@types/react": "18.2.75",
     "@types/react-dom": "18.2.24",
-    "@typescript-eslint/eslint-plugin": "7.5.0",
-    "@typescript-eslint/parser": "7.5.0",
+    "@typescript-eslint/eslint-plugin": "7.6.0",
+    "@typescript-eslint/parser": "7.6.0",
     "@vitejs/plugin-react": "4.2.1",
     "@vitest/ui": "1.4.0",
     "autoprefixer": "10.4.19",
@@ -70,7 +71,6 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-react-hooks": "4.6.0",
-    "fast-glob": "3.3.2",
     "jsdom": "24.0.0",
     "postcss": "8.4.38",
     "prettier": "3.2.5",
@@ -224,6 +224,7 @@
       "types": "./dist/types.d.ts"
     }
   },
+  "module": "index.ts",
   "scripts": {
     "build": "rm -rf dist && tsup",
     "docs:build": "remix build",
@@ -231,7 +232,7 @@
     "docs:serve": "remix-serve ./build/index.js",
     "fmt:check": "prettier --check .",
     "fmt": "prettier --write .",
-    "gen:docs-routes": "tsx scripts/gen-docs-routes",
+    "gen:docs-routes": "bun ./scripts/gen-docs-routes",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "test": "TZ=UTC vitest",
     "typecheck": "tsc --incremental --noEmit --skipLibCheck"