diff --git a/.changeset/docs-introduction-entries.md b/.changeset/docs-introduction-entries.md new file mode 100644 index 000000000..b8a258ef9 --- /dev/null +++ b/.changeset/docs-introduction-entries.md @@ -0,0 +1,5 @@ +--- +"@tabler/docs": patch +--- + +Added Introduction pages with quick starts and cover images to the Icons, Illustrations, Emails and Payments docs sections. diff --git a/.changeset/payments-docs-section.md b/.changeset/payments-docs-section.md new file mode 100644 index 000000000..b4eda17df --- /dev/null +++ b/.changeset/payments-docs-section.md @@ -0,0 +1,6 @@ +--- +"@tabler/docs": minor +"@tabler/preview": patch +--- + +Added a Tabler Payments docs section with `@tabler/payments-*` package pages for React, Vue, Preact and Astro. diff --git a/.changeset/prose-figure-img-border.md b/.changeset/prose-figure-img-border.md new file mode 100644 index 000000000..54658e934 --- /dev/null +++ b/.changeset/prose-figure-img-border.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Added the same border and radius to `figure` images as plain images in `.prose` and `.markdown` content. diff --git a/core/scss/ui/_markdown.scss b/core/scss/ui/_markdown.scss index 9cceec957..2d8779b65 100644 --- a/core/scss/ui/_markdown.scss +++ b/core/scss/ui/_markdown.scss @@ -64,7 +64,8 @@ Prose (formerly markdown) } > img, - > p > img { + > p > img, + > figure > img { @include border-radius(var(--border-radius)); border: 1px solid var(--border-color); } diff --git a/docs/assets/img/cover-illustrations-dark.png b/docs/assets/img/cover-illustrations-dark.png deleted file mode 100644 index 96d8d9bdb..000000000 Binary files a/docs/assets/img/cover-illustrations-dark.png and /dev/null differ diff --git a/docs/assets/img/cover-illustrations.png b/docs/assets/img/cover-illustrations.png deleted file mode 100644 index ba56a6365..000000000 Binary files a/docs/assets/img/cover-illustrations.png and /dev/null differ diff --git a/docs/assets/img/cover-tabler-dark.png b/docs/assets/img/cover-tabler-dark.png deleted file mode 100644 index 3b1167a43..000000000 Binary files a/docs/assets/img/cover-tabler-dark.png and /dev/null differ diff --git a/docs/assets/img/cover-tabler.png b/docs/assets/img/cover-tabler.png deleted file mode 100644 index efb3ed3e9..000000000 Binary files a/docs/assets/img/cover-tabler.png and /dev/null differ diff --git a/docs/components/DocsToc.astro b/docs/components/DocsToc.astro index c530e3af3..582baeff1 100644 --- a/docs/components/DocsToc.astro +++ b/docs/components/DocsToc.astro @@ -25,7 +25,7 @@ interface Props { const { toc = [], editUrl, sourceUrl, markdownUrl } = Astro.props // shared/data/illustrations.json has 125 entries. -const illustrationsCount = 125 +const illustrationsCount = 130 --- { diff --git a/docs/content/emails/contents.mdx b/docs/content/emails/contents.mdx index c8f95f098..aed5dcdbd 100644 --- a/docs/content/emails/contents.mdx +++ b/docs/content/emails/contents.mdx @@ -15,26 +15,26 @@ Once you unzip the downloaded file, you will see the following structure: ```text tabler-emails/ ├── emails/ -| ├── absence/ -| | ├── assets/ -| | ├── compiled.html -| | ├── compiled-dark.html -| | ├── source.html -| | ├── source-dark.html -| | ├── screenshot.jpg -| | ├── screenshot-dark.jpg -| | ├── screenshot-mobile.jpg -| | └── screenshot-mobile-dark.jpg -| ├── access-token/ -| ├── account-deleted/ -| ├── .../ -| ├── welcome/ -| └── whishlist/ +| ├── absence/ +| | ├── assets/ +| | ├── compiled.html +| | ├── compiled-dark.html +| | ├── source.html +| | ├── source-dark.html +| | ├── screenshot.jpg +| | ├── screenshot-dark.jpg +| | ├── screenshot-mobile.jpg +| | └── screenshot-mobile-dark.jpg +| ├── access-token/ +| ├── account-deleted/ +| ├── .../ +| ├── welcome/ +| └── whishlist/ ├── images/ -| ├── chart-donuts/ -| ├── icons/ -| ├── illustrations/ -| └── overlays/ +| ├── chart-donuts/ +| ├── icons/ +| ├── illustrations/ +| └── overlays/ ├── license.txt └── readme.html ``` diff --git a/docs/content/emails/index.mdx b/docs/content/emails/index.mdx index 0d195cf97..b955e39dd 100644 --- a/docs/content/emails/index.mdx +++ b/docs/content/emails/index.mdx @@ -7,4 +7,38 @@ summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices. --- -Tabler Emails is a package of ready-to-use HTML email templates. Each template is tested in more than 90 email clients and devices, so your messages look right everywhere. Read about the [package contents](/emails/contents), use the [compiled templates](/emails/compiled-html) as they are, or customize the [source files](/emails/source-html) to match your brand. +import { Image } from 'astro:assets' +import coverLight from '../../images/cover-emails.jpg' +import coverDark from '../../images/cover-emails-dark.jpg' + +
+ Tabler Emails + Tabler Emails +
+ +Tabler Emails is a package of 80 ready-to-use HTML email templates — transactional messages like welcome, password reset or invoice, and marketing layouts. Each template is tested in more than 90 email clients and devices, so your messages look right everywhere. + +## What's inside + +Every template lives in its own folder and comes in four variants, plus screenshots for a quick preview: + +```text +tabler-emails/emails/welcome/ +├── compiled.html ← ready to send, styles inlined +├── compiled-dark.html ← the same, in the dark color scheme +├── source.html ← editable source, for customization +├── source-dark.html +├── assets/ ← images used by this template +└── screenshot.jpg +``` + +The `compiled` files have all styles inlined and work as-is in email clients. The `source` files are easier to read and edit — use them when you want to change the layout, then inline the styles before sending. + +## Quick start + +1. Pick a template folder — for example `emails/welcome/`. +2. Open `compiled.html` and replace the texts, links and logo with your own. +3. Upload the images from `assets/` to your server or CDN and update their URLs. +4. Paste the result into your email provider or send it through your backend. + +No build step is required for the compiled templates. Read about the [package contents](/emails/contents), use the [compiled templates](/emails/compiled-html) as they are, or customize the [source files](/emails/source-html) to match your brand. diff --git a/docs/content/icons/index.mdx b/docs/content/icons/index.mdx index 0ce720c97..8c2e53295 100644 --- a/docs/content/icons/index.mdx +++ b/docs/content/icons/index.mdx @@ -7,10 +7,52 @@ order: 2 description: Over 5000 pixel-perfect icons for web design and development --- +import TabsPackage from '@components/TabsPackage.astro' +import { Code } from 'astro:components' +import { Image } from 'astro:assets' import { site } from '@shared/lib/site' +import coverLight from '../../images/cover-icons.jpg' +import coverDark from '../../images/cover-icons-dark.jpg' -Tabler Icons is a comprehensive icon library that features { site.iconsCount } high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications. +
+ Tabler Icons + Tabler Icons +
-To use Tabler Icons, visit [tabler.io/icons](https://tabler.io/icons). From there, you can browse the full collection of icons by category or search for a specific icon using the search bar. +Tabler Icons is a comprehensive icon library that features { site.iconsCount } high-quality icons. All icons are drawn on a 24×24 pixel grid with a consistent stroke, so they line up and scale cleanly at any size. -Once you have found an icon you like, you can download it in various file formats, including [SVG](/icons/static-files/svg), [PNG](/icons/static-files/png), and [Icon Font](/icons/libraries/webfont). +To browse the collection, visit [tabler.io/icons](https://tabler.io/icons). You can search by name or browse by category, then copy the SVG code or download the icon straight from the site. + +## What's inside + +The same icon set is distributed in several forms, so you can pick the one that fits your stack: + +- **Framework libraries** — official packages for [React](/icons/libraries/react), [Vue](/icons/libraries/vue), [Svelte](/icons/libraries/svelte), [SolidJS](/icons/libraries/solidjs), [Preact](/icons/libraries/preact) and [Astro](/icons/libraries/astro). Icons are tree-shakable components — only the ones you import end up in your bundle. +- **[Webfont](/icons/libraries/webfont)** — add icons with plain CSS classes, no build step needed. +- **[Static files](/icons/static-files)** — every icon as a standalone [SVG](/icons/static-files/svg), [PNG](/icons/static-files/png) or [PDF](/icons/static-files/pdf) file, for design tools and non-web use. +- **[Figma plugin](/icons/plugins/figma)** — insert icons directly into your Figma designs. + +## Quick start + +In a framework project, install the package for your stack — for example React: + + + +```jsx +import { IconArrowLeft } from '@tabler/icons-react'; + + +``` + +Without a build step, link the webfont stylesheet from a CDN and add icons with an `` element: + +`} /> + +```html + +``` + +Each library page covers installation, usage and styling options for its framework in detail. diff --git a/docs/content/illustrations/contents.mdx b/docs/content/illustrations/contents.mdx index 0161b788b..d9219c011 100644 --- a/docs/content/illustrations/contents.mdx +++ b/docs/content/illustrations/contents.mdx @@ -15,25 +15,25 @@ Once downloaded, unzip the compressed folder and you’ll see something like thi ```text tabler-illustrations/ ├── eps/ -| ├── dark/ -| └── light/ -├── figma/ -├── pdf/ | ├── dark/ | └── light/ -├── png/ +├── figma/ +├── pdf/ | ├── dark/ | └── light/ -├── png-background/ -| ├── dark/ -| └── light/ -├── svg/ +├── png/ | ├── dark/ | └── light/ -├── svg-css-autodark/ +├── png-background/ +| ├── dark/ +| └── light/ +├── svg/ +| ├── dark/ +| └── light/ +├── svg-css-autodark/ └── svg-css-variables/ - ├── dark/ - └── light/ + ├── dark/ + └── light/ ``` ## Understanding the file structure in Tabler Illustrations diff --git a/docs/content/illustrations/index.mdx b/docs/content/illustrations/index.mdx index 4257b60c0..4e9989dc2 100644 --- a/docs/content/illustrations/index.mdx +++ b/docs/content/illustrations/index.mdx @@ -5,7 +5,43 @@ description: Customizable illustrations for modern web and mobile designs. summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience. --- -Tabler Illustrations -Tabler Illustrations +import { Image } from 'astro:assets' +import coverLight from '../../images/cover-illustrations.jpg' +import coverDark from '../../images/cover-illustrations-dark.jpg' -This section covers everything you need to start with Tabler Illustrations. [Preview the collection](/illustrations/preview), check [what is inside the package](/illustrations/contents), learn how to [customize the illustrations](/illustrations/customization), and read the [license terms](/illustrations/license). +
+ Tabler Illustrations + Tabler Illustrations +
+ +Tabler Illustrations is a set of 130 illustrations for empty states, error pages, onboarding screens and marketing sections. Every illustration comes in a light and a dark variant, so it fits both color modes of your interface. + +## What's inside + +Each illustration ships in several formats, all included in one package: + +- **SVG** — the primary format for the web, in `light/` and `dark/` variants. +- **SVG with CSS variables** — colors exposed as `--tblr-illustrations-*` custom properties, so you can re-color the artwork from CSS. +- **SVG with auto dark mode** — one file that switches between light and dark styling on its own, based on the page theme. +- **PNG** — raster exports, with and without a background. +- **EPS and PDF** — vector files for print and design tools. +- **Figma** — a source file for editing the artwork directly. + +## Quick start + +Embed an illustration like any other image: + +```html + +``` + +To match the artwork to your brand, use the CSS-variables version and override its custom properties — for example the primary color and the skin tone: + +```css +:root { + --tblr-illustrations-primary: #066fd1; + --tblr-illustrations-skin: #ffcb9d; +} +``` + +[Preview the collection](/illustrations/preview), check [what is inside the package](/illustrations/contents), learn how to [customize the illustrations](/illustrations/customization), and read the [license terms](/illustrations/license). diff --git a/docs/content/ui/plugins/payments.mdx b/docs/content/payments/css.mdx similarity index 96% rename from docs/content/ui/plugins/payments.mdx rename to docs/content/payments/css.mdx index 86f15df05..ca81f38e7 100644 --- a/docs/content/ui/plugins/payments.mdx +++ b/docs/content/payments/css.mdx @@ -1,7 +1,9 @@ --- -title: Payments +title: CSS plugin +seoTitle: Payments CSS plugin summary: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more user-friendly. -description: Show payment provider logos like Visa, Mastercard, and PayPal with the payments plugin to make checkout pages clearer. +description: Show payment provider logos like Visa, Mastercard, and PayPal with the payments CSS plugin to make checkout pages clearer. +order: 1 css-plugins: [payments] --- diff --git a/docs/content/payments/index.mdx b/docs/content/payments/index.mdx new file mode 100644 index 000000000..e17aa2420 --- /dev/null +++ b/docs/content/payments/index.mdx @@ -0,0 +1,54 @@ +--- +title: Tabler Payments +summary: Tabler Payments is a set of over 160 payment provider logos — Visa, Mastercard, PayPal and many more — that you can use to make checkout pages and payment forms clearer and more trustworthy. +order: 5 +description: Over 160 payment provider logos for checkout pages and payment forms. +css-plugins: [payments] +--- + +import Example from '@components/Example.astro' +import CdnImportPlugin from '@components/CdnImportPlugin.astro' +import { Image } from 'astro:assets' +import payments from '@data/payments.json' +import coverLight from '../../images/cover-payments.jpg' +import coverDark from '../../images/cover-payments-dark.jpg' + +
+ Tabler Payments + Tabler Payments +
+ +Tabler Payments is a collection of { payments.length } payment provider logos, from the most popular card brands like Visa and Mastercard to local payment methods. Every logo ships in two color versions — light and dark — so it looks right on any background. + + + + + + + + + +You can use the logos in two ways: + +- **[CSS plugin](/payments/css)** — add the `payment` and `payment-provider-*` classes to a ``. Works with plain HTML and any framework, and needs only one extra stylesheet. +- **[Libraries](/payments/libraries)** — render logos as native, tree-shakable components in [React](/payments/libraries/react), [Vue](/payments/libraries/vue), [Preact](/payments/libraries/preact) or [Astro](/payments/libraries/astro), with type-checked props and no separate CSS file. + +Both ways use the same set of providers and the same light and dark artwork, so you can mix them or switch between them without visual changes. + +## Quick start + +For the CSS plugin, include the stylesheet from a CDN and add a `` with the provider's class: + + + +`} /> + +For a framework project, install the package for your stack and import the providers you need — only the logos you import end up in your bundle: + +```jsx +import { PaymentVisa } from '@tabler/payments-react'; + + +``` + +The [CSS plugin](/payments/css) page documents all classes, sizes and the full provider list; each [library page](/payments/libraries) covers installation and props for its framework. diff --git a/docs/content/payments/libraries/astro.mdx b/docs/content/payments/libraries/astro.mdx new file mode 100644 index 000000000..7ac6e98ad --- /dev/null +++ b/docs/content/payments/libraries/astro.mdx @@ -0,0 +1,110 @@ +--- +title: Astro +description: Add Tabler payment provider logos to Astro projects with the official tree-shakable package. Render 100+ payment provider logos as native components. +summary: Tabler Payments for Astro provides payment provider logos as native Astro components, rendered server-side with no client-side hydration. +--- + +import TabsPackage from '@components/TabsPackage.astro' + +This is an alternative to the [CSS payments plugin](/payments/css) for Astro projects: instead of adding `payment`/`payment-provider-*` classes to a ``, you render a real Astro component. This gives you type-checked props and no separate CSS file to load. It renders server-side only, with no client-side JavaScript shipped — the same as any other `.astro` component. + +This package is pre-1.0: the API may still change before a 1.0 release. + +## Installation + + + +`astro` is a peer dependency — the package reuses the Astro version already in your project instead of bundling its own. This package specifically needs Astro `>=7.2.4 <8.0.0`. + +## How to use + +Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment`. Import the one you need in your frontmatter and render it in your template: + +```astro +--- +import { PaymentVisa } from '@tabler/payments-astro'; +--- + + +``` + +This works well when you know exactly which providers you want to show, and you write their names directly in your code — for example a fixed row of cards you accept. + +### Rendering a provider by name at runtime + +Sometimes the provider isn't known ahead of time in your source code — for example, it's a string coming from an API response or a CMS field. + +For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you. + +```astro +--- +import { Payment } from '@tabler/payments-astro'; +--- + + +``` + +The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers. + +If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS). + +## Props + +Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and the dynamic `Payment` component accept the same set of props. Quick reference: + +| name | type | default | required | +| ---------- | ------------------- | ------- | -------------- | +| `variant` | `'light' \| 'dark'` | `light` | no | +| `size` | `string \| number` | `24` | no | +| `title` | `string` | — | no | +| `provider` | `string` | — | `Payment` only | + +### `variant` + +Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly: + +```astro + + +``` + +### `size` + +Sets the rendered SVG **height**, in pixels. The width is calculated for you from the provider's fixed 5:3 aspect ratio (`width = size * 1.66666`, rounded to 2 decimals), so a logo never looks stretched or squashed no matter what size you pick: + +```astro + + +``` + +If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height: + +```astro + +``` + +### `title` + +Adds an accessible `` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method: + +```astro +<PaymentVisa title="Visa" /> +``` + +See the [Accessibility](/payments/css#accessibility) section on the CSS plugin page for concrete guidance on when a logo needs this and when it should stay `aria-hidden` instead. + +### Everything else + +Any other prop you pass — `class`, `stroke-width`, `data-*`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element: + +```astro +<PaymentVisa class="rounded shadow-sm" data-testid="visa-logo" /> +``` + +### `provider` (dynamic `Payment` component only) + +Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-astro/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above. + +## Available providers + +There are over 100 supported providers, each with a `Payment<ProviderName>` component. See the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-astro/README.md) for the full list of provider names and slugs, and a note on why the `astro` version is pinned exactly. diff --git a/docs/content/payments/libraries/index.mdx b/docs/content/payments/libraries/index.mdx new file mode 100644 index 000000000..536f143a7 --- /dev/null +++ b/docs/content/payments/libraries/index.mdx @@ -0,0 +1,8 @@ +--- +title: Libraries +description: Official Tabler Payments packages for React, Vue, Preact and Astro. Use over 100 payment provider logos as native, tree-shakable components. +summary: The libraries section offers official Tabler Payments packages for popular frameworks, so you can render payment provider logos as native components instead of CSS classes. +order: 2 +--- + +Tabler Payments ships official packages for the most popular frameworks. Pick the package for your stack and render payment provider logos as native components, with type-checked props and tree-shaking. The [CSS plugin](/payments/css) is also available if you prefer plain CSS classes. diff --git a/docs/content/payments/libraries/preact.mdx b/docs/content/payments/libraries/preact.mdx new file mode 100644 index 000000000..60dec37d3 --- /dev/null +++ b/docs/content/payments/libraries/preact.mdx @@ -0,0 +1,108 @@ +--- +title: Preact +description: Add Tabler payment provider logos to Preact apps with the official tree-shakable package. Render 100+ payment provider logos as components. +summary: Tabler Payments for Preact offers payment provider logos as tree-shakable components, so you can use them the same way as any other Preact component. +--- + +import TabsPackage from '@components/TabsPackage.astro' + +This is an alternative to the [CSS payments plugin](/payments/css) for Preact projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Preact component. This gives you type-checked props, no separate CSS file to load, and tree-shaking — a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers. + +This package is pre-1.0: the API may still change before a 1.0 release. + +## Installation + +<TabsPackage name="@tabler/payments-preact" /> + +`preact` is a peer dependency — the package reuses the Preact version already in your project instead of bundling its own. + +## How to use + +Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other Preact component: + +```jsx +import { PaymentVisa } from '@tabler/payments-preact'; + +function AcceptedCards() { + return <PaymentVisa variant="dark" size={32} />; +} +``` + +This works well when you know exactly which providers you want to show, and you write their names directly in your code — for example a fixed row of cards you accept. + +### Rendering a provider by name at runtime + +Sometimes the provider isn't known ahead of time in your source code — for example, it's a string coming from an API response or a CMS field. + +For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you. + +```jsx +import { Payment } from '@tabler/payments-preact'; + +<Payment provider="visa" variant="dark" size={32} /> +``` + +The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers. + +If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS). + +## Props + +Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and the dynamic `Payment` component accept the same set of props. Quick reference: + +| name | type | default | required | +| ---------- | ------------------- | ------- | -------------- | +| `variant` | `'light' \| 'dark'` | `light` | no | +| `size` | `string \| number` | `24` | no | +| `title` | `string` | — | no | +| `provider` | `string` | — | `Payment` only | + +### `variant` + +Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly: + +```jsx +<PaymentVisa variant="light" /> {/* default, for light backgrounds */} +<PaymentVisa variant="dark" /> {/* for dark backgrounds */} +``` + +### `size` + +Sets the rendered SVG **height**, in pixels. The width is calculated for you from the provider's fixed 5:3 aspect ratio (`width = size * 1.66666`, rounded to 2 decimals), so a logo never looks stretched or squashed no matter what size you pick: + +```jsx +<PaymentVisa size={24} /> {/* 24px tall, 40px wide (the default) */} +<PaymentVisa size={48} /> {/* 48px tall, 80px wide */} +``` + +If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height: + +```jsx +<PaymentVisa size={24} width={64} /> {/* 24px tall, but exactly 64px wide */} +``` + +### `title` + +Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method: + +```jsx +<PaymentVisa title="Visa" /> +``` + +See the [Accessibility](/payments/css#accessibility) section on the CSS plugin page for concrete guidance on when a logo needs this and when it should stay `aria-hidden` instead. + +### Everything else + +Any other prop you pass — `class`, `onClick`, `style`, `data-*`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element: + +```jsx +<PaymentVisa class="rounded shadow-sm" onClick={() => selectMethod('visa')} data-testid="visa-logo" /> +``` + +### `provider` (dynamic `Payment` component only) + +Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-preact/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above. + +## Available providers + +There are over 100 supported providers, each with a `Payment<ProviderName>` component. See the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-preact/README.md) for the full list of provider names and slugs. diff --git a/docs/content/payments/libraries/react.mdx b/docs/content/payments/libraries/react.mdx new file mode 100644 index 000000000..3951bdc40 --- /dev/null +++ b/docs/content/payments/libraries/react.mdx @@ -0,0 +1,108 @@ +--- +title: React +description: Add Tabler payment provider logos to React apps with the official tree-shakable package. Render 100+ payment provider logos as components. +summary: Tabler Payments for React offers payment provider logos as tree-shakable components, so you can use them the same way as any other React component. +--- + +import TabsPackage from '@components/TabsPackage.astro' + +This is an alternative to the [CSS payments plugin](/payments/css) for React projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real React component. This gives you type-checked props, no separate CSS file to load, and tree-shaking — a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers. + +This package is pre-1.0: the API may still change before a 1.0 release. + +## Installation + +<TabsPackage name="@tabler/payments-react" /> + +`react` is a peer dependency — the package reuses the React version already in your project instead of bundling its own. + +## How to use + +Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other React component: + +```jsx +import { PaymentVisa } from '@tabler/payments-react'; + +function AcceptedCards() { + return <PaymentVisa variant="dark" size={32} />; +} +``` + +This works well when you know exactly which providers you want to show, and you write their names directly in your code — for example a fixed row of cards you accept. + +### Rendering a provider by name at runtime + +Sometimes the provider isn't known ahead of time in your source code — for example, it's a string coming from an API response or a CMS field. + +For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you. + +```jsx +import { Payment } from '@tabler/payments-react'; + +<Payment provider="visa" variant="dark" size={32} /> +``` + +The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers. + +If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS). + +## Props + +Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and the dynamic `Payment` component accept the same set of props. Quick reference: + +| name | type | default | required | +| ---------- | ------------------- | ------- | -------------- | +| `variant` | `'light' \| 'dark'` | `light` | no | +| `size` | `string \| number` | `24` | no | +| `title` | `string` | — | no | +| `provider` | `string` | — | `Payment` only | + +### `variant` + +Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly: + +```jsx +<PaymentVisa variant="light" /> {/* default, for light backgrounds */} +<PaymentVisa variant="dark" /> {/* for dark backgrounds */} +``` + +### `size` + +Sets the rendered SVG **height**, in pixels. The width is calculated for you from the provider's fixed 5:3 aspect ratio (`width = size * 1.66666`, rounded to 2 decimals), so a logo never looks stretched or squashed no matter what size you pick: + +```jsx +<PaymentVisa size={24} /> {/* 24px tall, 40px wide (the default) */} +<PaymentVisa size={48} /> {/* 48px tall, 80px wide */} +``` + +If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height: + +```jsx +<PaymentVisa size={24} width={64} /> {/* 24px tall, but exactly 64px wide */} +``` + +### `title` + +Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method: + +```jsx +<PaymentVisa title="Visa" /> +``` + +See the [Accessibility](/payments/css#accessibility) section on the CSS plugin page for concrete guidance on when a logo needs this and when it should stay `aria-hidden` instead. + +### Everything else + +Any other prop you pass — `className`, `onClick`, `style`, `data-*`, `aria-*`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element: + +```jsx +<PaymentVisa className="rounded shadow-sm" onClick={() => selectMethod('visa')} data-testid="visa-logo" /> +``` + +### `provider` (dynamic `Payment` component only) + +Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-react/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above. + +## Available providers + +There are over 100 supported providers, each with a `Payment<ProviderName>` component. See the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-react/README.md) for the full list of provider names and slugs. diff --git a/docs/content/payments/libraries/vue.mdx b/docs/content/payments/libraries/vue.mdx new file mode 100644 index 000000000..45a19d42f --- /dev/null +++ b/docs/content/payments/libraries/vue.mdx @@ -0,0 +1,114 @@ +--- +title: Vue +description: Add Tabler payment provider logos to Vue apps with the official tree-shakable package. Render 100+ payment provider logos as components. +summary: Tabler Payments for Vue offers payment provider logos as tree-shakable Vue 3 components, so you can use them the same way as any other Vue component. +--- + +import TabsPackage from '@components/TabsPackage.astro' + +This is an alternative to the [CSS payments plugin](/payments/css) for Vue projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Vue component. This gives you type-checked props, no separate CSS file to load, and tree-shaking — a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers. + +This package is pre-1.0: the API may still change before a 1.0 release. + +## Installation + +<TabsPackage name="@tabler/payments-vue" /> + +`vue` is a peer dependency — the package reuses the Vue 3 version already in your project instead of bundling its own. + +## How to use + +Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other Vue component: + +```vue +<script setup> +import { PaymentVisa } from '@tabler/payments-vue'; +</script> + +<template> + <PaymentVisa variant="dark" :size="32" /> +</template> +``` + +This works well when you know exactly which providers you want to show, and you write their names directly in your template — for example a fixed row of cards you accept. + +### Rendering a provider by name at runtime + +Sometimes the provider isn't known ahead of time in your template — for example, it's a string coming from an API response or a CMS field. + +For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you. + +```vue +<script setup> +import { Payment } from '@tabler/payments-vue'; +</script> + +<template> + <Payment provider="visa" variant="dark" :size="32" /> +</template> +``` + +The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers. + +If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS). + +## Props + +Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and the dynamic `Payment` component accept the same set of props. Quick reference: + +| name | type | default | required | +| ---------- | ------------------- | ------- | -------------- | +| `variant` | `'light' \| 'dark'` | `light` | no | +| `size` | `string \| number` | `24` | no | +| `title` | `string` | — | no | +| `provider` | `string` | — | `Payment` only | + +### `variant` + +Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly: + +```vue +<PaymentVisa variant="light" /> <!-- default, for light backgrounds --> +<PaymentVisa variant="dark" /> <!-- for dark backgrounds --> +``` + +### `size` + +Sets the rendered SVG **height**, in pixels. The width is calculated for you from the provider's fixed 5:3 aspect ratio (`width = size * 1.66666`, rounded to 2 decimals), so a logo never looks stretched or squashed no matter what size you pick: + +```vue +<PaymentVisa :size="24" /> <!-- 24px tall, 40px wide (the default) --> +<PaymentVisa :size="48" /> <!-- 48px tall, 80px wide --> +``` + +If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height: + +```vue +<PaymentVisa :size="24" :width="64" /> <!-- 24px tall, but exactly 64px wide --> +``` + +### `title` + +Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method: + +```vue +<PaymentVisa title="Visa" /> +``` + +See the [Accessibility](/payments/css#accessibility) section on the CSS plugin page for concrete guidance on when a logo needs this and when it should stay `aria-hidden` instead. + +### Everything else + +Any other attribute you pass — `class`, `stroke-width`, `onClick`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element. This package keeps attributes **kebab-case** (`stroke-width`, not `strokeWidth`), matching how Vue and the DOM already write them: + +```vue +<PaymentVisa class="rounded shadow-sm" @click="selectMethod('visa')" data-testid="visa-logo" /> +``` + +### `provider` (dynamic `Payment` component only) + +Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-vue/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above. + +## Available providers + +There are over 100 supported providers, each with a `Payment<ProviderName>` component. See the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-vue/README.md) for the full list of provider names and slugs. diff --git a/docs/content/ui/index.mdx b/docs/content/ui/index.mdx index 9396c45a6..e4f5c9fb6 100644 --- a/docs/content/ui/index.mdx +++ b/docs/content/ui/index.mdx @@ -5,5 +5,11 @@ description: Free and open source web application UI kit based on Bootstrap summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently. --- -<img src="/img/cover-tabler.png" alt="Tabler UI" class="hide-theme-dark" width="1600" height="750" /> -<img src="/img/cover-tabler-dark.png" alt="Tabler UI" class="hide-theme-light" width="1600" height="750" /> +import { Image } from 'astro:assets' +import coverLight from '../../images/cover-tabler.jpg' +import coverDark from '../../images/cover-tabler-dark.jpg' + +<figure> + <Image src={coverLight} alt="Tabler UI" class="hide-theme-dark" width={800} densities={[1, 2]} loading="eager" /> + <Image src={coverDark} alt="Tabler UI" class="hide-theme-light" width={800} densities={[1, 2]} loading="eager" /> +</figure> diff --git a/docs/images/cover-emails-dark.jpg b/docs/images/cover-emails-dark.jpg new file mode 100644 index 000000000..598068b6a Binary files /dev/null and b/docs/images/cover-emails-dark.jpg differ diff --git a/docs/images/cover-emails.jpg b/docs/images/cover-emails.jpg new file mode 100644 index 000000000..0992bfa48 Binary files /dev/null and b/docs/images/cover-emails.jpg differ diff --git a/docs/images/cover-icons-dark.jpg b/docs/images/cover-icons-dark.jpg new file mode 100644 index 000000000..ee42e514c Binary files /dev/null and b/docs/images/cover-icons-dark.jpg differ diff --git a/docs/images/cover-icons.jpg b/docs/images/cover-icons.jpg new file mode 100644 index 000000000..f63b0e206 Binary files /dev/null and b/docs/images/cover-icons.jpg differ diff --git a/docs/images/cover-illustrations-dark.jpg b/docs/images/cover-illustrations-dark.jpg new file mode 100644 index 000000000..6e2231302 Binary files /dev/null and b/docs/images/cover-illustrations-dark.jpg differ diff --git a/docs/images/cover-illustrations.jpg b/docs/images/cover-illustrations.jpg new file mode 100644 index 000000000..072258241 Binary files /dev/null and b/docs/images/cover-illustrations.jpg differ diff --git a/docs/images/cover-payments-dark.jpg b/docs/images/cover-payments-dark.jpg new file mode 100644 index 000000000..e63f1ad06 Binary files /dev/null and b/docs/images/cover-payments-dark.jpg differ diff --git a/docs/images/cover-payments.jpg b/docs/images/cover-payments.jpg new file mode 100644 index 000000000..82a112e78 Binary files /dev/null and b/docs/images/cover-payments.jpg differ diff --git a/docs/images/cover-tabler-dark.jpg b/docs/images/cover-tabler-dark.jpg new file mode 100644 index 000000000..911738e6d Binary files /dev/null and b/docs/images/cover-tabler-dark.jpg differ diff --git a/docs/images/cover-tabler.jpg b/docs/images/cover-tabler.jpg new file mode 100644 index 000000000..07c5b7ffc Binary files /dev/null and b/docs/images/cover-tabler.jpg differ diff --git a/docs/lib/redirects.ts b/docs/lib/redirects.ts index 43d164ef4..509801cca 100644 --- a/docs/lib/redirects.ts +++ b/docs/lib/redirects.ts @@ -6,6 +6,9 @@ type Redirect = { status: 301; destination: string } export const redirects: Record<string, Redirect> = { '/ui/base/markdown': { status: 301, destination: '/ui/base/prose' }, + // Payments became its own product section, like icons/illustrations/emails; + // the old plugin page's content lives on /payments/css, keeping anchors valid. + '/ui/plugins/payments': { status: 301, destination: '/payments/css' }, // @tabler/icons-eps is no longer maintained; PDF is the vector format to use. '/icons/static-files/eps': { status: 301, destination: '/icons/static-files/pdf' }, // pre-Astro plural slugs, still present in the Google index and backlinks diff --git a/docs/middleware.ts b/docs/middleware.ts index ff105369f..936750939 100644 --- a/docs/middleware.ts +++ b/docs/middleware.ts @@ -3,9 +3,11 @@ // `Accept: text/markdown`. Runs only on Vercel deployments. import type { MiddlewareHandler } from 'astro' import { next, rewrite } from '@vercel/functions' -import { preferredFormat } from './lib/accept' -import { markdownUrlFromDocsUrl } from './lib/markdown-url' -import { redirects } from './lib/redirects' +// .js extensions: Vercel compiles this file separately with node16 module +// resolution, which requires them; TS and vite both resolve .js -> .ts. +import { preferredFormat } from './lib/accept.js' +import { markdownUrlFromDocsUrl } from './lib/markdown-url.js' +import { redirects } from './lib/redirects.js' // Astro picks this file up as its own middleware (`srcDir` is the project // root) and requires an `onRequest` export; the real logic is Vercel-only. @@ -22,7 +24,8 @@ export default function middleware(request: Request) { const url = new URL(request.url) // renamed pages fall through to their 301; negotiation reruns on the target - if (Object.hasOwn(redirects, url.pathname)) return next() + // not Object.hasOwn — Vercel's middleware type-check runs with a pre-es2022 lib + if (Object.prototype.hasOwnProperty.call(redirects, url.pathname)) return next() const format = preferredFormat(request.headers.get('accept')) diff --git a/docs/package.json b/docs/package.json index 2bdb8386a..e16fd8575 100644 --- a/docs/package.json +++ b/docs/package.json @@ -31,6 +31,7 @@ "@tabler/preview": "workspace:*", "@types/node": "^26.1.1", "js-beautify": "^2.0.3", + "sharp": "^0.35.3", "shx": "^0.4.0", "typescript": "^5.7.3" } diff --git a/docs/scss/docs.scss b/docs/scss/docs.scss index 429424bdf..32b872c21 100644 --- a/docs/scss/docs.scss +++ b/docs/scss/docs.scss @@ -332,8 +332,7 @@ header > .navbar { text-wrap: pretty; } - > :is(h2, h3, h4, h5, h6), - > .docs-page-lead { + > :is(h2, h3, h4, h5, h6) { text-wrap: balance; } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 65d6c9d97..0ff9ec9cc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -251,6 +251,9 @@ importers: js-beautify: specifier: ^2.0.3 version: 2.0.3 + sharp: + specifier: ^0.35.3 + version: 0.35.3(@types/node@26.1.1) shx: specifier: ^0.4.0 version: 0.4.0 @@ -6075,8 +6078,7 @@ snapshots: '@fullcalendar/core': 6.1.21 '@fullcalendar/daygrid': 6.1.21(@fullcalendar/core@6.1.21) - '@img/colour@1.1.0': - optional: true + '@img/colour@1.1.0': {} '@img/sharp-darwin-arm64@0.34.5': optionalDependencies: @@ -10060,7 +10062,6 @@ snapshots: '@img/sharp-win32-ia32': 0.35.3 '@img/sharp-win32-x64': 0.35.3 '@types/node': 26.1.1 - optional: true shebang-command@1.2.0: dependencies: diff --git a/preview/pages/payment-providers.astro b/preview/pages/payment-providers.astro index 4d4e26681..80314eb59 100644 --- a/preview/pages/payment-providers.astro +++ b/preview/pages/payment-providers.astro @@ -14,7 +14,7 @@ const providers = payments as { name: string; logo: string }[] --- <DefaultLayout title="Payment Providers" pageMenu="addons.payment-providers"> - <DocsLink slot="page-header-actions" path="/ui/plugins/payments" /> + <DocsLink slot="page-header-actions" path="/payments/css" /> <div class="row row-cards"> <div class="col-12"> diff --git a/shared/data/docs.json b/shared/data/docs.json index aa7a35a96..94dbdc9ce 100644 --- a/shared/data/docs.json +++ b/shared/data/docs.json @@ -20,6 +20,10 @@ { "title": "Tabler UI", "children": [ + { + "title": "Introduction", + "url": "/ui" + }, { "title": "Getting started", "url": "/ui/getting-started", @@ -442,10 +446,6 @@ "title": "Lightbox", "url": "/ui/plugins/lightbox" }, - { - "title": "Payments", - "url": "/ui/plugins/payments" - }, { "title": "Range slider", "url": "/ui/plugins/range-slider" @@ -498,6 +498,10 @@ { "title": "Tabler Icons", "children": [ + { + "title": "Introduction", + "url": "/icons" + }, { "title": "Libraries", "url": "/icons/libraries", @@ -565,6 +569,10 @@ { "title": "Tabler Illustrations", "children": [ + { + "title": "Introduction", + "url": "/illustrations" + }, { "title": "Preview", "url": "/illustrations/preview" @@ -586,6 +594,10 @@ { "title": "Tabler Emails", "children": [ + { + "title": "Introduction", + "url": "/emails" + }, { "title": "Contents", "url": "/emails/contents" @@ -599,6 +611,41 @@ "url": "/emails/source-html" } ] + }, + { + "title": "Tabler Payments", + "children": [ + { + "title": "Introduction", + "url": "/payments" + }, + { + "title": "CSS plugin", + "url": "/payments/css" + }, + { + "title": "Libraries", + "url": "/payments/libraries", + "children": [ + { + "title": "Astro", + "url": "/payments/libraries/astro" + }, + { + "title": "Preact", + "url": "/payments/libraries/preact" + }, + { + "title": "React", + "url": "/payments/libraries/react" + }, + { + "title": "Vue", + "url": "/payments/libraries/vue" + } + ] + } + ] } ] } \ No newline at end of file