[Toolkit][Flowbite] Add kit Flowbite 4.0 base

src/Toolkit/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 2.35
 
+- [Flowbite] Add Flowbite v4 kit
 - [Shadcn] Add `toggle` recipe
 - [Shadcn] Use `html_attr_type` filter from `twig/html-extra:^3.24` for composable trigger attributes
 - [Shadcn] Rename `trigger_attrs` to `alert_dialog_trigger_attrs` in `AlertDialog:Trigger`

src/Toolkit/kits/flowbite-4/INSTALL.md

@@ -0,0 +1,277 @@
+# Getting started
+
+This kit provides ready-to-use and fully-customizable UI Twig components based on [Flowbite](https://flowbite.com/) components's **design**.
+
+Please note that not every Flowbite component is available in this kit, but we are working on it!
+
+## Requirements
+
+This kit requires TailwindCSS and Flowbite v4 to work:
+
+### TailwindCSS
+
+- If you use Symfony AssetMapper, you can install TailwindCSS with the [TailwindBundle](https://symfony.com/bundles/TailwindBundle/current/index.html),
+- If you use Webpack Encore, you can follow the [TailwindCSS installation guide for Symfony](https://tailwindcss.com/docs/installation/framework-guides/symfony)
+
+## Installation
+
+1. Install Flowbite, either with `importmap:require` for AssetMapper, or `npm` for Webpack Encore:
+
+```
+# With AssetMapper
+php bin/console importmap:require flowbite
+
+# With npm
+npm install flowbite
+```
+
+2. Modify the file `assets/styles/app.css` with the following content:
+
+```css
+@import 'tailwindcss';
+
+/* With AssetMapper... */
+@source "../vendor/flowbite";
+/* ... or with Webpack Encore */
+/* @source "../../node_modules/flowbite"; */
+
+@custom-variant dark (&:is(.dark *));
+
+/* You can customize theming here see https://flowbite.com/docs/customize/theming/ */
+@theme {
+    --font-sans:
+        'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue',
+        'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-body:
+        'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue',
+        'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-mono:
+        'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
+
+    /* TEXT VARIABLES */
+    --text-2xs: 0.625rem;
+    --spacing-8xl: 90rem;
+    --leading-9: 36px; /* rem pls */
+    --leading-7: 28px;
+    --leading-8: 32px;
+    --leading-6: 24px;
+    --leading-4: 16px;
+    --leading-none: 1px;
+    --leading-5: 20px;
+    --tracking-tighter: -0.8px;
+    --leading-heading-none: 60px;
+    --tracking-tight: -0.4px;
+
+    /* BORDER RADIUS VARIABLES */
+    --radius-0: 0px;
+    --radius-xxs: 2px;
+    --radius-xs: 4px;
+    --radius-sm: 6px;
+    --radius: 8px;
+    --radius-base: 12px;
+    --radius-lg: 16px;
+
+    /* BORDER WIDTH VARIABLES */
+    --default-border-width: 1px;
+
+    /* TEXT COLORS VARIABLES */
+    /* main text color */
+    --color-body: var(--color-gray-600);
+    --color-body-subtle: var(--color-gray-500);
+
+    /* text heading colors */
+    --color-heading: var(--color-gray-900);
+
+    /* used for custom brand colors */
+    --color-fg-brand-subtle: var(--color-blue-200);
+    --color-fg-brand: var(--color-blue-700);
+    --color-fg-brand-strong: var(--color-blue-900);
+
+    /* used for status colors */
+    --color-fg-success: var(--color-emerald-700);
+    --color-fg-success-strong: var(--color-emerald-900);
+    --color-fg-danger: var(--color-rose-700);
+    --color-fg-danger-strong: var(--color-rose-900);
+    --color-fg-warning-subtle: var(--color-orange-600);
+    --color-fg-warning: var(--color-orange-900);
+    --color-fg-yellow: var(--color-yellow-400);
+    --color-fg-disabled: var(--color-gray-400);
+    --color-fg-purple: var(--color-purple-600);
+    --color-fg-cyan: var(--color-cyan-600);
+    --color-fg-indigo: var(--color-indigo-600);
+    --color-fg-pink: var(--color-pink-600);
+    --color-fg-lime: var(--color-lime-600);
+
+    /* BACKGROUND COLOR VARIABLES */
+    /* used for neutral colors */
+    --color-neutral-primary-soft: var(--color-white);
+    --color-neutral-primary: var(--color-white);
+    --color-neutral-primary-medium: var(--color-white);
+    --color-neutral-primary-strong: var(--color-white);
+    --color-neutral-secondary-soft: var(--color-gray-50);
+    --color-neutral-secondary: var(--color-gray-50);
+    --color-neutral-secondary-medium: var(--color-gray-50);
+    --color-neutral-secondary-strong: var(--color-gray-50);
+    --color-neutral-secondary-strongest: var(--color-gray-50);
+    --color-neutral-tertiary-soft: var(--color-gray-100);
+    --color-neutral-tertiary: var(--color-gray-100);
+    --color-neutral-tertiary-medium: var(--color-gray-100);
+    --color-neutral-quaternary: var(--color-gray-200);
+    --color-neutral-quaternary-medium: var(--color-gray-200);
+    --color-gray: var(--color-gray-300);
+
+    /* used for brand colors */
+    --color-brand-softer: var(--color-blue-50);
+    --color-brand-soft: var(--color-blue-100);
+    --color-brand: var(--color-blue-700);
+    --color-brand-medium: var(--color-blue-200);
+    --color-brand-strong: var(--color-blue-800);
+
+    /* used for status colors */
+    --color-success-soft: var(--color-emerald-50);
+    --color-success: var(--color-emerald-700);
+    --color-success-medium: var(--color-emerald-100);
+    --color-success-strong: var(--color-emerald-800);
+    --color-danger-soft: var(--color-rose-50);
+    --color-danger: var(--color-rose-700);
+    --color-danger-medium: var(--color-rose-100);
+    --color-danger-strong: var(--color-rose-800);
+    --color-warning-soft: var(--color-orange-50);
+    --color-warning: var(--color-orange-500);
+    --color-warning-medium: var(--color-orange-100);
+    --color-warning-strong: var(--color-orange-700);
+    --color-dark-soft: var(--color-gray-800);
+    --color-dark: var(--color-gray-800);
+    --color-dark-strong: var(--color-gray-900);
+    --color-disabled: var(--color-gray-100);
+    --color-purple: var(--color-purple-500);
+    --color-sky: var(--color-sky-500);
+    --color-teal: var(--color-teal-600);
+    --color-pink: var(--color-pink-600);
+    --color-cyan: var(--color-cyan-500);
+    --color-fuchsia: var(--color-fuchsia-600);
+    --color-indigo: var(--color-indigo-600);
+    --color-orange: var(--color-orange-400);
+
+    /* BORDER COLOR VARIABLES */
+    --color-buffer: var(--color-white);
+    --color-buffer-medium: var(--color-white);
+    --color-buffer-strong: var(--color-white);
+    --color-muted: var(--color-gray-50);
+    --color-light-subtle: var(--color-gray-100);
+    --color-light: var(--color-gray-100);
+    --color-light-medium: var(--color-gray-100);
+    --color-default-subtle: var(--color-gray-200);
+    --color-default: var(--color-gray-200);
+    --color-default-medium: var(--color-gray-200);
+    --color-default-strong: var(--color-gray-200);
+
+    /* used for status colors */
+    --color-success-subtle: var(--color-emerald-200);
+    --color-danger-subtle: var(--color-rose-200);
+    --color-warning-subtle: var(--color-orange-200);
+    --color-brand-subtle: var(--color-blue-200);
+    --color-brand-light: var(--color-blue-600);
+    --color-dark-subtle: var(--color-gray-800);
+    --color-dark-backdrop: var(--color-gray-950);
+
+    /* shiki variables */
+    --color-shiki-fg-brand: #79b8ff;
+    --color-shiki-fg-brand-subtle: #9ecbff;
+}
+
+.dark {
+    /* text color variables */
+    --color-body: var(--color-gray-400);
+    --color-body-subtle: var(--color-gray-400);
+    --color-heading: var(--color-white);
+    --color-fg-brand-subtle: var(--color-blue-200);
+    --color-fg-brand: var(--color-blue-500);
+    --color-fg-brand-strong: var(--color-blue-400);
+    --color-fg-success: var(--color-emerald-600);
+    --color-fg-success-strong: var(--color-emerald-300);
+    --color-fg-danger: var(--color-rose-500);
+    --color-fg-danger-strong: var(--color-rose-300);
+    --color-fg-warning-subtle: var(--color-orange-500);
+    --color-fg-warning: var(--color-orange-300);
+    --color-fg-yellow: var(--color-yellow-400);
+    --color-fg-disabled: var(--color-gray-600);
+    --color-fg-purple: var(--color-purple-500);
+    --color-fg-cyan: var(--color-cyan-500);
+    --color-fg-indigo: var(--color-indigo-500);
+    --color-fg-pink: var(--color-pink-500);
+    --color-fg-lime: var(--color-lime-500);
+
+    /* background color variables */
+    --color-neutral-primary-soft: var(--color-gray-900);
+    --color-neutral-primary: var(--color-gray-950);
+    --color-neutral-primary-medium: var(--color-gray-800);
+    --color-neutral-primary-strong: var(--color-gray-700);
+    --color-neutral-secondary-soft: var(--color-gray-900);
+    --color-neutral-secondary: var(--color-gray-950);
+    --color-neutral-secondary-medium: var(--color-gray-800);
+    --color-neutral-secondary-strong: var(--color-gray-700);
+    --color-neutral-secondary-strongest: var(--color-gray-600);
+    --color-neutral-tertiary-soft: var(--color-gray-900);
+    --color-neutral-tertiary: var(--color-gray-800);
+    --color-neutral-tertiary-medium: var(--color-gray-700);
+    --color-neutral-quaternary: var(--color-gray-700);
+    --color-neutral-quaternary-medium: var(--color-gray-600);
+    --color-gray: var(--color-gray-600);
+    --color-brand-softer: var(--color-blue-950);
+    --color-brand-soft: var(--color-blue-900);
+    --color-brand: var(--color-blue-600);
+    --color-brand-medium: var(--color-blue-900);
+    --color-brand-strong: var(--color-blue-700);
+    --color-success-soft: var(--color-emerald-950);
+    --color-success: var(--color-emerald-600);
+    --color-success-medium: var(--color-emerald-900);
+    --color-success-strong: var(--color-emerald-700);
+    --color-danger-soft: var(--color-rose-950);
+    --color-danger: var(--color-rose-700);
+    --color-danger-medium: var(--color-rose-900);
+    --color-danger-strong: var(--color-rose-800);
+    --color-warning-soft: var(--color-orange-950);
+    --color-warning: var(--color-orange-600);
+    --color-warning-medium: var(--color-orange-900);
+    --color-warning-strong: var(--color-orange-700);
+    --color-dark-soft: var(--color-gray-700);
+    --color-dark: var(--color-gray-800);
+    --color-dark-strong: var(--color-gray-700);
+    --color-disabled: var(--color-gray-800);
+    --color-purple: var(--color-purple-500);
+    --color-sky: var(--color-sky-500);
+    --color-teal: var(--color-teal-500);
+    --color-pink: var(--color-pink-500);
+    --color-cyan: var(--color-cyan-500);
+    --color-fuchsia: var(--color-fuchsia-500);
+    --color-indigo: var(--color-indigo-500);
+    --color-orange: var(--color-orange-400);
+
+    /* border color variables */
+    --color-buffer: var(--color-gray-950);
+    --color-buffer-medium: var(--color-gray-900);
+    --color-buffer-strong: var(--color-gray-800);
+    --color-muted: var(--color-gray-900);
+    --color-light-subtle: var(--color-gray-900);
+    --color-light: var(--color-gray-800);
+    --color-light-medium: var(--color-gray-700);
+    --color-default-subtle: var(--color-gray-900);
+    --color-default: var(--color-gray-800);
+    --color-default-medium: var(--color-gray-700);
+    --color-default-strong: var(--color-gray-600);
+    --color-success-subtle: var(--color-emerald-900);
+    --color-danger-subtle: var(--color-rose-900);
+    --color-warning-subtle: var(--color-orange-900);
+    --color-brand-subtle: var(--color-blue-900);
+    --color-brand-light: var(--color-blue-600);
+    --color-dark-subtle: var(--color-gray-700);
+    --color-dark-backdrop: var(--color-gray-950);
+}
+```
+
+3. Modify your `assets/app.js` file by adding:
+
+```js
+import 'flowbite';
+```

src/Toolkit/kits/flowbite-4/alert/assets/controllers/alert_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from '@hotwired/stimulus';
+import { Dismiss } from 'flowbite';
+
+export default class extends Controller {
+    alert = null;
+    static targets = ['alert'];
+
+    connect() {
+        this.alert = new Dismiss(this.alertTarget);
+    }
+
+    close() {
+        this.alert.hide();
+    }
+}

src/Toolkit/kits/flowbite-4/alert/examples/Accent.html.twig

@@ -0,0 +1,46 @@
+<div class="grid w-full max-w-xl items-start gap-4">
+    <twig:Alert border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="danger" border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="success" border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="warning" border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+
+    <twig:Alert variant="dark" border="accent" class="rounded-none">
+        <twig:block name="icon">
+            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+        </twig:block>
+        <twig:Alert:Description>
+            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
+        </twig:Alert:Description>
+    </twig:Alert>
+</div>

src/Toolkit/kits/flowbite-4/alert/examples/Action.html.twig

@@ -0,0 +1,15 @@
+<twig:Alert class="max-w-xl">
+    <twig:block name="icon">
+        <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
+    </twig:block>
+    <twig:Alert:Title>This is an info alert</twig:Alert:Title>
+    <twig:Alert:Description>
+        More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+    </twig:Alert:Description>
+    <twig:Alert:Action>
+        <twig:Button size="sm">
+            <twig:ux:icon name="flowbite:eye-outline" class="size-3.5 me-1.5" aria-hidden="true" />
+            View more
+        </twig:Button>
+    </twig:Alert:Action>
+</twig:Alert>