@mintlify/components 0.3.14 → 0.4.0

package/README.md

@@ -1,142 +1,41 @@
-<div align="center">
-  <a href="https://mintlify.com">
-    <img
-      src="https://res.cloudinary.com/mintlify/image/upload/v1665385627/logo-rounded_zuk7q1.svg"
-      alt="Mintlify Logo"
-      height="64"
-    />
-  </a>
-  <br />
-  <p>
-    <h3>
-      <b>
-        Mintlify Components
-      </b>
-    </h3>
-  </p>
-  <p>
-    <b>
-      Open-source library of UI components made with React and TailwindCSS.
-    </b>
-  </p>
-  <p>
+# @mintlify-components/react
 
-[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen?logo=github)](/) [![Website](https://img.shields.io/website?url=https%3A%2F%2Fmintlify.com&logo=mintlify)](https://mintlify.com)
+Headless UI components for Mintlify with optional styling. Built with React, TypeScript, and Tailwind CSS.
 
-  </p>
-  <p>
-    <sub>
-      Built with 💚 by
-      <a href="https://mintlify.com">
-        Mintlify
-      </a>
-    </sub>
-  </p>
-  <br />
-  <p>
-    <a href="https://mintlify.com" target="_blank">
-      <img
-        src="https://mintlify-assets.b-cdn.net/website/mintlify-preview.png"
-        alt="Mintlify"
-        width="100%"
-      />
-    </a>
-  </p>
-</div>
+## Requirements
 
-This repo contains the components Mintlify uses in our open-source documentation framework: [mint](https://github.com/mintlify/mint). Checkout [mintlify.com/docs](https://mintlify.com/docs) to see the components in action. Feel free to use the components on your own websites!
+- Node.js >= 20.0.0
+- React ^18.0.0 || ^19.0.0
+- React DOM ^18.0.0 || ^19.0.0
 
 ## Installation
 
-## Add Dependencies
-
-Install this package and peerDependencies of this package,
-using [install-peerdeps](https://github.com/nathanhleung/install-peerdeps).
-
-```sh
-npx install-peerdeps @mintlify/components
+```bash
+pnpm add @mintlify-components/react
 ```
 
-### React is already installed
-
-You already have `react` installed or are using `preact` and just need `@headlessui/react` and `@mintlify/components`.
-
-```sh
-# yarn
-yarn add @headlessui/react @mintlify/components
+## Development
 
-# npm
-npm i @headlessui/react @mintlify/components
+### Setup
 
-# pnpm
-pnpm add @headlessui/react @mintlify/components
+```bash
+pnpm install
 ```
 
-### React and headlessui are already installed
+### Build
 
-You already have `react` and `@headlessui/react` installed and just need `@mintlify/components`.
-
-```sh
-# yarn
-yarn add @mintlify/components
-
-# npm
-npm i @mintlify/components
-
-# pnpm
-pnpm add @mintlify/components
+```bash
+pnpm build
 ```
 
-## CSS import
-
-Add the following at the start of your `main.css` file:
-
-`@import '@mintlify/components';`
-
-## Usage
-
-Import components like so:
-
-`import { Accordion, Card } from "@mintlify/components"`
-
-## Designed for Next.js
-
-The project is designed for use with static side rendering where we don't have access to `document` or `window`. Thus, our webpack config has to use `mini-css-extract-plugin` instead of `style-loader`.
-
-# Documentation
+### Storybook
 
-Go to [mintlify.com/docs/components](https://mintlify.com/docs/components) to see how to use the components in Mintlify's documentation platform.
+Storybook uses Tailwind CSS and PostCSS to build the stories. Start the Storybook development server:
 
-[Storybook](https://main--63134bd5ae01f2a7717a0e47.chromatic.com/) has interactive demos.
-
-## Contributing
-
-Read the [Contributing guide](https://mintlify.com/docs/contributing) to learn about our development process, the standards and tools used, and how to propose fixes, bugs or open issues.
-
-The [repo wiki](https://github.com/mintlify/components/wiki) explains how to contribute to this repo.
-
-### Code Quality
-
-Check out the [Contribution Tools](https://mintlify.com/docs/contributing#contribution-tools) section in our [Contributing guide](https://mintlify.com/docs/contributing).
-
-#### Formatting
-
-This project uses [prettier](https://prettier.io/) for code formatting. You can auto-format across the codebase by running `yarn format`.
-
-#### Linting
-
-This project uses [eslint](https://eslint.org/) for code linting. You can check linter warnings and errors by running `yarn lint`.
-
-# Long Term Vision
-
-The first version of this library only includes documentation components. In the long run, Mintlify will include layout components you could use to build an entire site.
-
-## Community
-
-Join our Discord community if you have questions or just want to chat:
-
-[![](https://dcbadge.vercel.app/api/server/ACREKdwjG5)](https://discord.gg/ACREKdwjG5)
+```bash
+pnpm storybook
+```
 
-# License
+## License
 
-[MIT](https://tldrlegal.com/license/mit-license)
+MIT

package/dist/components/badge/badge.css

@@ -0,0 +1 @@
+.mt-badge{display:inline-flex;align-items:center;width:-moz-fit-content;width:fit-content;font-weight:500;position:relative;background-color:var(--color-bg);color:var(--color-text)}.mt-badge[data-disabled=true]{cursor:not-allowed;background-color:var(--color-bg-disabled);color:var(--color-text-disabled)}.mt-badge[data-shape=pill]{border-radius:9999px}.mt-badge[data-stroke=true]{outline:1px solid rgb(11 12 14 / 8%);outline-offset:-1px}:is(.dark,.dark-theme) .mt-badge[data-stroke=true]{outline-color:#ffffff24}.mt-badge-xs svg,.mt-badge-sm svg,.mt-badge-md svg,.mt-badge-lg svg{margin:1px;background-color:var(--color-text)}.mt-badge[data-disabled=true] svg{background-color:var(--color-text-disabled)}.mt-badge-icon{flex-shrink:0;color:var(--color-text)}.mt-badge[data-disabled=true] .mt-badge-icon{color:var(--color-text-disabled)}.mt-badge .mt-icon{color:var(--color-text)}.mt-badge[data-disabled=true] .mt-icon{color:var(--color-text-disabled)}.mt-badge-xs{gap:.125rem;padding:0 .125rem;font-size:.75rem;line-height:1rem}.mt-badge-xs:has(svg),.mt-badge-xs:has(.mt-icon){padding-right:.25rem}.mt-badge-xs[data-shape=rounded]{border-radius:.25rem}.mt-badge-sm{gap:.1875rem;padding:.125rem .125rem .125rem .1875rem;font-size:.75rem;line-height:1rem}.mt-badge-sm:has(svg),.mt-badge-sm:has(.mt-icon){padding-right:.375rem}.mt-badge-sm[data-shape=rounded]{border-radius:.375rem}.mt-badge-md{gap:.25rem;padding:.125rem .25rem;font-size:.875rem;line-height:1.25rem;letter-spacing:-.01em}.mt-badge-md:has(svg),.mt-badge-md:has(.mt-icon){padding-right:.5rem}.mt-badge-md[data-shape=rounded]{border-radius:.5rem}.mt-badge-lg{gap:.25rem;padding:.25rem .375rem;font-size:.875rem;line-height:1.25rem;letter-spacing:-.01em}.mt-badge-lg:has(svg),.mt-badge-lg:has(.mt-icon){padding-right:.625rem}.mt-badge-lg[data-shape=rounded]{border-radius:.5rem}.mt-badge-gray{--color-bg: var(--mt-color-badge-gray);--color-text: var(--mt-color-gray-7);--color-bg-disabled: var(--mt-color-badge-gray);--color-text-disabled: var(--mt-color-gray-3)}:is(.dark,.dark-theme) .mt-badge-gray{--color-bg: var(--mt-color-gray-10);--color-text: var(--mt-color-gray-4);--color-bg-disabled: var(--mt-color-gray-10);--color-text-disabled: var(--mt-color-gray-9)}.mt-badge-blue{--color-bg: var(--mt-color-badge-blue);--color-text: var(--mt-color-text-accent-blue-inverted);--color-bg-disabled: var(--mt-color-badge-blue-disabled);--color-text-disabled: var(--mt-color-text-accent-blue-tertiary)}:is(.dark,.dark-theme) .mt-badge-blue{--color-bg: var(--mt-color-badge-blue);--color-text: var(--mt-color-text-accent-blue-inverted);--color-bg-disabled: var(--mt-color-badge-blue-disabled);--color-text-disabled: var(--mt-color-text-accent-blue-tertiary)}.mt-badge-green{--color-bg: var(--mt-color-badge-green);--color-text: var(--mt-color-text-accent-green);--color-bg-disabled: var(--mt-color-badge-green-disabled);--color-text-disabled: var(--mt-color-text-accent-green-secondary)}:is(.dark,.dark-theme) .mt-badge-green{--color-bg: var(--mt-color-badge-green);--color-text: var(--mt-color-text-accent-green-inverted);--color-bg-disabled: var(--mt-color-badge-green-disabled);--color-text-disabled: var(--mt-color-text-accent-green-secondary)}.mt-badge-orange{--color-bg: var(--mt-color-badge-orange);--color-text: var(--mt-color-text-accent-orange-inverted);--color-bg-disabled: var(--mt-color-badge-orange-disabled);--color-text-disabled: var(--mt-color-text-accent-orange-secondary)}:is(.dark,.dark-theme) .mt-badge-orange{--color-bg: var(--mt-color-badge-orange);--color-text: var(--mt-color-text-accent-orange-inverted);--color-bg-disabled: var(--mt-color-badge-orange-disabled);--color-text-disabled: var(--mt-color-text-accent-orange-secondary)}.mt-badge-red{--color-bg: var(--mt-color-badge-red);--color-text: var(--mt-color-text-accent-red-inverted);--color-bg-disabled: var(--mt-color-badge-red-disabled);--color-text-disabled: var(--mt-color-text-accent-red-secondary)}:is(.dark,.dark-theme) .mt-badge-red{--color-bg: var(--mt-color-badge-red);--color-text: var(--mt-color-text-accent-red-inverted);--color-bg-disabled: var(--mt-color-badge-red-disabled);--color-text-disabled: var(--mt-color-text-accent-red-secondary)}.mt-badge-purple{--color-bg: var(--mt-color-badge-purple);--color-text: var(--mt-color-text-accent-purple-inverted);--color-bg-disabled: var(--mt-color-badge-purple);--color-text-disabled: var(--mt-color-text-accent-purple-secondary)}:is(.dark,.dark-theme) .mt-badge-purple{--color-bg: var(--mt-color-badge-purple);--color-text: var(--mt-color-text-accent-purple-inverted);--color-bg-disabled: var(--mt-color-badge-purple);--color-text-disabled: var(--mt-color-text-accent-purple-secondary)}.mt-badge-white{--color-bg: var(--mt-color-white-9);--color-text: var(--mt-color-text-static-dark-secondary);--color-bg-disabled: rgb(255 255 255 / 8%);--color-text-disabled: var(--mt-color-gray-3)}:is(.dark,.dark-theme) .mt-badge-white{--color-bg: rgb(255 255 255 / 99%);--color-text: var(--mt-color-text-static-dark-secondary);--color-bg-disabled: var(--mt-color-white-2);--color-text-disabled: rgb(11 12 14 / 60%)}.mt-badge-surface{--color-bg: rgb(255 255 255 / 95%);--color-text: var(--mt-color-text-secondary);--color-bg-disabled: rgb(255 255 255 / 95%);--color-text-disabled: var(--mt-color-gray-3)}:is(.dark,.dark-theme) .mt-badge-surface{--color-bg: var(--mt-color-gray-10);--color-text: var(--mt-color-text-secondary);--color-bg-disabled: var(--mt-color-gray-10);--color-text-disabled: var(--mt-color-gray-9)}.mt-badge-white-destructive{--color-bg: rgb(255 255 255 / 95%);--color-text: var(--mt-color-text-destructive);--color-bg-disabled: rgb(255 255 255 / 8%);--color-text-disabled: var(--mt-color-text-destructive-tertiary)}:is(.dark,.dark-theme) .mt-badge-white-destructive{--color-bg: rgb(255 255 255 / 95%);--color-text: var(--mt-color-text-destructive);--color-bg-disabled: rgb(255 255 255 / 24%);--color-text-disabled: var(--mt-color-text-destructive-tertiary)}.mt-badge-surface-destructive{--color-bg: rgb(255 255 255 / 95%);--color-text: var(--mt-color-text-destructive);--color-bg-disabled: rgb(255 255 255 / 95%);--color-text-disabled: var(--mt-color-text-destructive-tertiary)}:is(.dark,.dark-theme) .mt-badge-surface-destructive{--color-bg: var(--mt-color-gray-10);--color-text: var(--mt-color-text-destructive);--color-bg-disabled: var(--mt-color-gray-10);--color-text-disabled: var(--mt-color-text-destructive-tertiary)}

package/dist/components/badge/badge.js

@@ -0,0 +1,52 @@
+import { jsxs as i, jsx as p } from "react/jsx-runtime";
+import { cn as g } from "../../utils/cn.js";
+/* empty css          */
+import { Icon as f } from "../icon/icon.js";
+function j({
+  children: s,
+  color: o = "gray",
+  shape: m = "rounded",
+  size: t = "md",
+  stroke: d = !1,
+  disabled: r = !1,
+  icon: a,
+  iconType: n,
+  className: c
+}) {
+  const e = typeof a == "string" ? /* @__PURE__ */ p(
+    f,
+    {
+      icon: a,
+      iconType: n,
+      className: "mt-badge-icon",
+      size: l[t]
+    }
+  ) : a;
+  return /* @__PURE__ */ i(
+    "span",
+    {
+      "data-shape": m,
+      "data-stroke": d,
+      "data-disabled": r,
+      className: g(
+        "mt-badge",
+        `mt-badge-${o}`,
+        `mt-badge-${t}`,
+        c
+      ),
+      children: [
+        !!e && e,
+        s
+      ]
+    }
+  );
+}
+const l = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 16
+};
+export {
+  j as Badge
+};

package/dist/components/icon/icon.css

@@ -0,0 +1 @@
+.mt-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

package/dist/components/icon/icon.js

@@ -0,0 +1,47 @@
+import { jsx as i } from "react/jsx-runtime";
+import { cn as n } from "../../utils/cn.js";
+/* empty css         */
+function g({
+  icon: t,
+  iconType: e = "regular",
+  color: a,
+  size: r = 16,
+  className: s
+}) {
+  const h = t.startsWith("<svg"), m = t.startsWith("http") || t.startsWith("/");
+  return h ? /* @__PURE__ */ i(
+    "span",
+    {
+      className: n("mt-icon", s),
+      style: {
+        color: a,
+        width: r,
+        height: r
+      },
+      dangerouslySetInnerHTML: { __html: t }
+    }
+  ) : m ? /* @__PURE__ */ i(
+    "img",
+    {
+      src: t,
+      alt: "",
+      className: n("mt-icon", s),
+      style: {
+        width: r,
+        height: r
+      }
+    }
+  ) : /* @__PURE__ */ i(
+    "i",
+    {
+      className: n("mt-icon", `fa-${e}`, `fa-${t}`, s),
+      style: {
+        color: a,
+        fontSize: r
+      }
+    }
+  );
+}
+export {
+  g as Icon
+};