From 17b010ef3e692c60112c5b8b36810f780558cacb Mon Sep 17 00:00:00 2001 From: DcgRG Date: Thu, 26 Feb 2026 21:11:45 +0100 Subject: [PATCH 01/21] [Toolkit][Flowbite] Add Badge component --- src/Toolkit/kits/flowbite-4/INSTALL.md | 49 +++++++++++++++++++ .../badge/examples/As link.html.twig | 8 +++ .../badge/examples/Bordered.html.twig | 8 +++ .../flowbite-4/badge/examples/Demo.html.twig | 8 +++ .../flowbite-4/badge/examples/Icon.html.twig | 8 +++ .../flowbite-4/badge/examples/Large.html.twig | 8 +++ .../flowbite-4/badge/examples/Pill.html.twig | 8 +++ .../flowbite-4/badge/examples/Usage.html.twig | 8 +++ .../kits/flowbite-4/badge/manifest.json | 12 +++++ .../templates/components/Badge.html.twig | 39 +++++++++++++++ src/Toolkit/kits/flowbite-4/manifest.json | 7 +++ 11 files changed, 163 insertions(+) create mode 100644 src/Toolkit/kits/flowbite-4/INSTALL.md create mode 100644 src/Toolkit/kits/flowbite-4/badge/examples/As link.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/badge/examples/Bordered.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/badge/examples/Demo.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/badge/examples/Icon.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/badge/examples/Large.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/badge/examples/Pill.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/badge/examples/Usage.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/badge/manifest.json create mode 100644 src/Toolkit/kits/flowbite-4/badge/templates/components/Badge.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/manifest.json diff --git a/src/Toolkit/kits/flowbite-4/INSTALL.md b/src/Toolkit/kits/flowbite-4/INSTALL.md new file mode 100644 index 00000000000..276e2680a74 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/INSTALL.md @@ -0,0 +1,49 @@ +# 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) + +### Flowbite + +- Install flowbite via npm — this creates the node_modules/flowbite +``` +npm install flowbite --save +``` + +## Installation + +Add flowbite + +``` +php bin/console importmap:require flowbite +``` + +Append to the file `assets/app.js` the following content: + +```js +import 'flowbite'; +``` + +Modify the file `assets/styles/app.css` with the following content: + +```css +@import 'tailwindcss'; + +@plugin "flowbite/plugin"; +@import "flowbite/src/themes/default"; +@source "../../node_modules/flowbite"; + +@custom-variant dark (&:is(.dark *)); + +/* You can customize theming here see https://flowbite.com/docs/customize/theming/ */ +``` diff --git a/src/Toolkit/kits/flowbite-4/badge/examples/As link.html.twig b/src/Toolkit/kits/flowbite-4/badge/examples/As link.html.twig new file mode 100644 index 00000000000..09cf184ee06 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/badge/examples/As link.html.twig @@ -0,0 +1,8 @@ +
+ Brand + Alternative + Gray + Danger + Success + Warning +
diff --git a/src/Toolkit/kits/flowbite-4/badge/examples/Bordered.html.twig b/src/Toolkit/kits/flowbite-4/badge/examples/Bordered.html.twig new file mode 100644 index 00000000000..657b3864f0f --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/badge/examples/Bordered.html.twig @@ -0,0 +1,8 @@ +
+ Brand + Alternative + Gray + Danger + Success + Warning +
diff --git a/src/Toolkit/kits/flowbite-4/badge/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/badge/examples/Demo.html.twig new file mode 100644 index 00000000000..590201f97bb --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/badge/examples/Demo.html.twig @@ -0,0 +1,8 @@ +
+ Brand + Alternative + Gray + Danger + Success + Warning +
diff --git a/src/Toolkit/kits/flowbite-4/badge/examples/Icon.html.twig b/src/Toolkit/kits/flowbite-4/badge/examples/Icon.html.twig new file mode 100644 index 00000000000..da5f9a879b3 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/badge/examples/Icon.html.twig @@ -0,0 +1,8 @@ +
+ + + + + + +
diff --git a/src/Toolkit/kits/flowbite-4/badge/examples/Large.html.twig b/src/Toolkit/kits/flowbite-4/badge/examples/Large.html.twig new file mode 100644 index 00000000000..1822797ad23 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/badge/examples/Large.html.twig @@ -0,0 +1,8 @@ +
+ Brand + Alternative + Gray + Danger + Success + Warning +
diff --git a/src/Toolkit/kits/flowbite-4/badge/examples/Pill.html.twig b/src/Toolkit/kits/flowbite-4/badge/examples/Pill.html.twig new file mode 100644 index 00000000000..5472965bbcd --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/badge/examples/Pill.html.twig @@ -0,0 +1,8 @@ +
+ Brand + Alternative + Gray + Danger + Success + Warning +
diff --git a/src/Toolkit/kits/flowbite-4/badge/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/badge/examples/Usage.html.twig new file mode 100644 index 00000000000..09c568b62e7 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/badge/examples/Usage.html.twig @@ -0,0 +1,8 @@ + + Badge + diff --git a/src/Toolkit/kits/flowbite-4/badge/manifest.json b/src/Toolkit/kits/flowbite-4/badge/manifest.json new file mode 100644 index 00000000000..9635c84b6a4 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/badge/manifest.json @@ -0,0 +1,12 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Badge", + "description": "A small element that displays status, counts, or labels with optional icons.", + "copy-files": { + "templates/": "templates/" + }, + "dependencies": { + "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"] + } +} diff --git a/src/Toolkit/kits/flowbite-4/badge/templates/components/Badge.html.twig b/src/Toolkit/kits/flowbite-4/badge/templates/components/Badge.html.twig new file mode 100644 index 00000000000..5ca1881b01a --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/badge/templates/components/Badge.html.twig @@ -0,0 +1,39 @@ +{# @prop variant 'brand'|'alternative'|'gray'|'danger'|'success'|'warning' The visual style variant. Defaults to `brand` #} +{# @prop size 'default'|'large' The badge size. Defaults to `default` #} +{# @prop shape 'default'|'pill' The badge shape. Defaults to `default` #} +{# @prop border 'none'|'border' The badge border. Defaults to `none` #} +{# @prop as 'div' The HTML tag to render. Defaults to `div` #} +{# @block content The badge label or content #} +{%- props variant = 'brand', size = 'default', shape = 'rounded', border = 'none', as = 'div' -%} +{%- set style = html_cva( + base: 'inline-flex items-center justify-center font-medium', + variants: { + variant: { + brand: 'bg-brand-softer text-fg-brand-strong border-brand-subtle [a&]:hover:bg-brand-soft', + alternative: 'bg-neutral-primary-soft text-heading border-default [a&]:hover:bg-neutral-secondary-medium', + gray: 'bg-neutral-secondary-medium text-heading border-default-medium [a&]:hover:bg-neutral-tertiary-medium', + danger: 'bg-danger-soft text-fg-danger-strong border-danger-subtle [a&]:hover:bg-danger-medium', + success: 'bg-success-soft text-fg-success-strong border-success-subtle [a&]:hover:bg-success-medium', + warning: 'bg-warning-soft text-fg-warning border-warning-subtle [a&]:hover:bg-warning-medium', + }, + size: { + default: 'px-1.5 py-0.5 text-xs', + lg: 'px-2 py-1 text-sm', + }, + shape: { + rounded: 'rounded', + pill: 'rounded-full', + }, + border: { + none: '', + bordered: 'border', + } + }, + +) -%} +<{{ as }} + class="{{ style.apply({variant: variant, size, shape, border}, attributes.render('class'))|tailwind_merge }}" + {{ attributes }} +> + {%- block content %}{% endblock -%} + diff --git a/src/Toolkit/kits/flowbite-4/manifest.json b/src/Toolkit/kits/flowbite-4/manifest.json new file mode 100644 index 00000000000..ae6268622b4 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/manifest.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../schema-kit-v1.json", + "name": "Flowbite v4", + "description": "Component based on the Flowbite (v4) library, popular open-source library of interactive UI components built with the utility classes from Tailwind CSS.", + "license": "MIT", + "homepage": "https://ux.symfony.com/toolkit/kits/flowbite" +} From 91ada0b672d0cac7a66be3b773d97dcea8a050d6 Mon Sep 17 00:00:00 2001 From: DcgRG Date: Sat, 28 Feb 2026 22:06:15 +0100 Subject: [PATCH 02/21] [Toolkit][Flowbite] Add Button component --- .../flowbite-4/button/examples/Demo.html.twig | 10 ++++ .../flowbite-4/button/examples/Icon.html.twig | 31 +++++++++++++ .../button/examples/Loader.html.twig | 6 +++ .../button/examples/Outline.html.twig | 7 +++ .../flowbite-4/button/examples/Pill.html.twig | 10 ++++ .../flowbite-4/button/examples/Size.html.twig | 7 +++ .../button/examples/Usage.html.twig | 7 +++ .../button/examples/With icon.html.twig | 11 +++++ .../kits/flowbite-4/button/manifest.json | 12 +++++ .../templates/components/Button.html.twig | 46 +++++++++++++++++++ 10 files changed, 147 insertions(+) create mode 100644 src/Toolkit/kits/flowbite-4/button/examples/Demo.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/button/examples/Icon.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/button/examples/Loader.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/button/examples/Outline.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/button/examples/Pill.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/button/examples/Size.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/button/examples/Usage.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/button/examples/With icon.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/button/manifest.json create mode 100644 src/Toolkit/kits/flowbite-4/button/templates/components/Button.html.twig diff --git a/src/Toolkit/kits/flowbite-4/button/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/Demo.html.twig new file mode 100644 index 00000000000..d830883c85a --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/button/examples/Demo.html.twig @@ -0,0 +1,10 @@ +
+ Default + Secondary + Tertiary + Success + Danger + Warning + Dark + Ghost +
diff --git a/src/Toolkit/kits/flowbite-4/button/examples/Icon.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/Icon.html.twig new file mode 100644 index 00000000000..b428c6d9b5d --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/button/examples/Icon.html.twig @@ -0,0 +1,31 @@ +
+ + + + + + + + + + + + + + + + + +
diff --git a/src/Toolkit/kits/flowbite-4/button/examples/Loader.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/Loader.html.twig new file mode 100644 index 00000000000..7fb1e6921e6 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/button/examples/Loader.html.twig @@ -0,0 +1,6 @@ +
+ + +
diff --git a/src/Toolkit/kits/flowbite-4/button/examples/Outline.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/Outline.html.twig new file mode 100644 index 00000000000..e74333cdffd --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/button/examples/Outline.html.twig @@ -0,0 +1,7 @@ +
+ Outline + Brand + Success + Danger + Warning +
diff --git a/src/Toolkit/kits/flowbite-4/button/examples/Pill.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/Pill.html.twig new file mode 100644 index 00000000000..201f746e650 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/button/examples/Pill.html.twig @@ -0,0 +1,10 @@ +
+ Default + Secondary + Tertiary + Success + Danger + Warning + Dark + Ghost +
diff --git a/src/Toolkit/kits/flowbite-4/button/examples/Size.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/Size.html.twig new file mode 100644 index 00000000000..3d152c7a344 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/button/examples/Size.html.twig @@ -0,0 +1,7 @@ +
+ Extra small + Small + Base + Large + Extra large +
diff --git a/src/Toolkit/kits/flowbite-4/button/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/Usage.html.twig new file mode 100644 index 00000000000..6d48bd418a0 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/button/examples/Usage.html.twig @@ -0,0 +1,7 @@ + + Button + diff --git a/src/Toolkit/kits/flowbite-4/button/examples/With icon.html.twig b/src/Toolkit/kits/flowbite-4/button/examples/With icon.html.twig new file mode 100644 index 00000000000..461dd8c7c22 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/button/examples/With icon.html.twig @@ -0,0 +1,11 @@ +
+ + + + + Choose plan + +
diff --git a/src/Toolkit/kits/flowbite-4/button/manifest.json b/src/Toolkit/kits/flowbite-4/button/manifest.json new file mode 100644 index 00000000000..ffdb2de18fe --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/button/manifest.json @@ -0,0 +1,12 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Button", + "description": "Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows", + "copy-files": { + "templates/": "templates/" + }, + "dependencies": { + "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"] + } +} diff --git a/src/Toolkit/kits/flowbite-4/button/templates/components/Button.html.twig b/src/Toolkit/kits/flowbite-4/button/templates/components/Button.html.twig new file mode 100644 index 00000000000..b90422e0856 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/button/templates/components/Button.html.twig @@ -0,0 +1,46 @@ +{# @prop variant 'brand'|'secondary'|'tertiary'|'success'|'danger'|'warning'|'dark'|'ghost'|'outline'|'outline-brand'|'outline-success'|'outline-danger'|'outline-warning' The visual style variant. Defaults to `brand` #} +{# @prop size 'default'|'xs'|'sm'|'lg'|'xl'|'icon'|'icon-xs'|'icon-sm' The button size. Defaults to `default` #} +{# @prop shape 'rounded'|'pill' The badge shape. Defaults to `rounded` #} +{# @prop as 'button' The HTML tag to render. Defaults to `button` #} +{# @block content The button label and/or icon #} +{%- props variant = 'brand', size = 'default', shape = 'rounded', as = 'button' -%} +{%- set style = html_cva( + base: "inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs", + variants: { + variant: { + brand:'text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium', + secondary:'text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary', + tertiary:'text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft', + success:'text-white bg-success hover:bg-success-strong focus:ring-success-medium', + danger:'text-white bg-danger hover:bg-danger-strong focus:ring-danger-medium', + warning:'text-white bg-warning hover:bg-warning-strong focus:ring-warning-medium', + dark:'text-white bg-dark hover:bg-dark-strong focus:ring-neutral-tertiary', + ghost:'text-heading bg-transparent hover:bg-neutral-secondary-medium focus:ring-neutral-tertiary', + outline:'text-body bg-neutral-primary border-default hover:bg-neutral-secondary-soft hover:text-heading focus:ring-neutral-tertiary', + 'outline-brand':'text-fg-brand bg-neutral-primary border-brand hover:bg-brand hover:text-white focus:ring-brand-subtle', + 'outline-success':'text-success bg-neutral-primary border-success hover:bg-success hover:text-white focus:ring-neutral-tertiary', + 'outline-danger':'text-danger bg-neutral-primary border-danger hover:bg-danger hover:text-white focus:ring-neutral-tertiary', + 'outline-warning':'text-warning bg-neutral-primary border-warning hover:bg-warning hover:text-white focus:ring-neutral-tertiary', + }, + size: { + default: 'leading-5 text-sm px-4 py-2.5', + xs: 'leading-5 text-xs px-3 py-1.5', + sm: 'leading-5 text-sm px-3 py-2', + lg: 'text-base px-5 py-3', + xl: 'text-base px-6 py-3.5', + icon: 'w-10 h-10', + 'icon-xs': 'w-8 h-8', + 'icon-sm': 'w-9 h-9', + }, + shape: { + rounded: 'rounded-base', + pill: 'rounded-full', + }, + }, +) -%} +<{{ as }} + class="{{ style.apply({variant: variant, size: size, shape: shape}, attributes.render('class'))|tailwind_merge }}" + {{ attributes }} +> + {%- block content %}{% endblock -%} + From 0c37dade423694c412155e0e4e9d01975c7e47fe Mon Sep 17 00:00:00 2001 From: DcgRG Date: Sun, 1 Mar 2026 12:35:02 +0100 Subject: [PATCH 03/21] [Toolkit][Flowbite] Add Kbd component --- .../flowbite-4/kbd/examples/Arrow.html.twig | 21 +++++++++++++++++++ .../flowbite-4/kbd/examples/Demo.html.twig | 9 ++++++++ .../flowbite-4/kbd/examples/Usage.html.twig | 1 + src/Toolkit/kits/flowbite-4/kbd/manifest.json | 12 +++++++++++ .../kbd/templates/components/Kbd.html.twig | 7 +++++++ 5 files changed, 50 insertions(+) create mode 100644 src/Toolkit/kits/flowbite-4/kbd/examples/Arrow.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/kbd/examples/Demo.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/kbd/examples/Usage.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/kbd/manifest.json create mode 100644 src/Toolkit/kits/flowbite-4/kbd/templates/components/Kbd.html.twig diff --git a/src/Toolkit/kits/flowbite-4/kbd/examples/Arrow.html.twig b/src/Toolkit/kits/flowbite-4/kbd/examples/Arrow.html.twig new file mode 100644 index 00000000000..ed0e80fdc91 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/kbd/examples/Arrow.html.twig @@ -0,0 +1,21 @@ +
+ + + + + + + + + + + +
diff --git a/src/Toolkit/kits/flowbite-4/kbd/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/kbd/examples/Demo.html.twig new file mode 100644 index 00000000000..5d4302c347e --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/kbd/examples/Demo.html.twig @@ -0,0 +1,9 @@ +
+ Shift + Ctrl + Tab + Caps Lock + Esc + Spacebar + Enter +
diff --git a/src/Toolkit/kits/flowbite-4/kbd/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/kbd/examples/Usage.html.twig new file mode 100644 index 00000000000..88328847b98 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/kbd/examples/Usage.html.twig @@ -0,0 +1 @@ +Ctrl diff --git a/src/Toolkit/kits/flowbite-4/kbd/manifest.json b/src/Toolkit/kits/flowbite-4/kbd/manifest.json new file mode 100644 index 00000000000..c07773ad3ab --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/kbd/manifest.json @@ -0,0 +1,12 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Kbd", + "description": "The KBD (Keyboard) component can be used to indicate a textual user input from the keyboard inside other elements such as in text, tables, cards, and more.", + "copy-files": { + "templates/": "templates/" + }, + "dependencies": { + "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"] + } +} diff --git a/src/Toolkit/kits/flowbite-4/kbd/templates/components/Kbd.html.twig b/src/Toolkit/kits/flowbite-4/kbd/templates/components/Kbd.html.twig new file mode 100644 index 00000000000..d376aedd604 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/kbd/templates/components/Kbd.html.twig @@ -0,0 +1,7 @@ +{# @block content The keyboard key text (e.g., "Ctrl", "⌘", "Enter") #} + + {%- block content %}{% endblock -%} + From bc280c50803bf7b021bf754e64faf2a6f5d65024 Mon Sep 17 00:00:00 2001 From: DcgRG Date: Sun, 1 Mar 2026 14:06:19 +0100 Subject: [PATCH 04/21] [Toolkit][Flowbite] Add Card component --- .../card/examples/Default.html.twig | 16 ++++++++ .../flowbite-4/card/examples/Demo.html.twig | 38 +++++++++++++++++++ .../flowbite-4/card/examples/Usage.html.twig | 11 ++++++ .../card/examples/With image.html.twig | 28 ++++++++++++++ .../kits/flowbite-4/card/manifest.json | 12 ++++++ .../card/templates/components/Card.html.twig | 7 ++++ .../components/Card/Content.html.twig | 6 +++ .../components/Card/Footer.html.twig | 7 ++++ .../components/Card/Header.html.twig | 7 ++++ .../templates/components/Card/Title.html.twig | 8 ++++ 10 files changed, 140 insertions(+) create mode 100644 src/Toolkit/kits/flowbite-4/card/examples/Default.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/card/examples/Demo.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/card/examples/Usage.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/card/examples/With image.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/card/manifest.json create mode 100644 src/Toolkit/kits/flowbite-4/card/templates/components/Card.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/card/templates/components/Card/Content.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/card/templates/components/Card/Footer.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/card/templates/components/Card/Header.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/card/templates/components/Card/Title.html.twig diff --git a/src/Toolkit/kits/flowbite-4/card/examples/Default.html.twig b/src/Toolkit/kits/flowbite-4/card/examples/Default.html.twig new file mode 100644 index 00000000000..de21ed7c722 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/card/examples/Default.html.twig @@ -0,0 +1,16 @@ + + + Noteworthy technology acquisitions 2021 + + + +

Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.

+ + + + + Read more + + + diff --git a/src/Toolkit/kits/flowbite-4/card/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/card/examples/Demo.html.twig new file mode 100644 index 00000000000..3759028a9d7 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/card/examples/Demo.html.twig @@ -0,0 +1,38 @@ + + + Sign in to our platform + + + +
+ + +
+ +
+ + +
+ +
+
+ + +
+ Lost Password? +
+ + + + + Login to your account + + +
Not registered? Create account
+ + diff --git a/src/Toolkit/kits/flowbite-4/card/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/card/examples/Usage.html.twig new file mode 100644 index 00000000000..bc3736d29bc --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/card/examples/Usage.html.twig @@ -0,0 +1,11 @@ + + + Card Title + + +

Card Content

+ + +

Card Footer

+ + diff --git a/src/Toolkit/kits/flowbite-4/card/examples/With image.html.twig b/src/Toolkit/kits/flowbite-4/card/examples/With image.html.twig new file mode 100644 index 00000000000..66b5388a8b5 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/card/examples/With image.html.twig @@ -0,0 +1,28 @@ + + + + Bukchon Hanok Village by Y K + + + + + + + + Streamlining your design process today. + +

In today’s fast-paced digital landscape, fostering seamless collaboration among Developers and IT Operations.

+ + + + + Read more + + + diff --git a/src/Toolkit/kits/flowbite-4/card/manifest.json b/src/Toolkit/kits/flowbite-4/card/manifest.json new file mode 100644 index 00000000000..3e02e76ad64 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/card/manifest.json @@ -0,0 +1,12 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Card", + "description": "Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.", + "copy-files": { + "templates/": "templates/" + }, + "dependencies": { + "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"] + } +} diff --git a/src/Toolkit/kits/flowbite-4/card/templates/components/Card.html.twig b/src/Toolkit/kits/flowbite-4/card/templates/components/Card.html.twig new file mode 100644 index 00000000000..e609763ccfd --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/card/templates/components/Card.html.twig @@ -0,0 +1,7 @@ +{# @block content The card content, typically includes `Card:Content` with `Card:Header`, and/or `Card:Footer` #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Content.html.twig b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Content.html.twig new file mode 100644 index 00000000000..c67b25219a9 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Content.html.twig @@ -0,0 +1,6 @@ +{# @block content The main content area of the card #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Footer.html.twig b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Footer.html.twig new file mode 100644 index 00000000000..f3a25e80f19 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Footer.html.twig @@ -0,0 +1,7 @@ +{# @block content The footer area, typically contains actions or additional information #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Header.html.twig b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Header.html.twig new file mode 100644 index 00000000000..28edf6cfec6 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Header.html.twig @@ -0,0 +1,7 @@ +{# @block content The header area, typically contains `Card:Title` #} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Title.html.twig b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Title.html.twig new file mode 100644 index 00000000000..45f951fdc11 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/card/templates/components/Card/Title.html.twig @@ -0,0 +1,8 @@ +{# @block content The title text of the card #} +{%- props as = 'span' -%} +<{{ as }} + class="{{ ('text-2xl font-semibold tracking-tight text-heading leading-8" ' ~ attributes.render('class'))|tailwind_merge }}" + {{ attributes }} +> + {%- block content %}{% endblock -%} + From 49c9d60181b9106f8ce3310fb21c8daced45f6bf Mon Sep 17 00:00:00 2001 From: DcgRG Date: Sun, 1 Mar 2026 15:14:58 +0100 Subject: [PATCH 05/21] [Toolkit][Flowbite] Add Table component --- .../flowbite-4/table/examples/Demo.html.twig | 38 +++++++++++++++++++ .../examples/Highlight striped.html.twig | 34 +++++++++++++++++ .../flowbite-4/table/examples/Usage.html.twig | 19 ++++++++++ .../table/examples/Without border.html.twig | 34 +++++++++++++++++ .../kits/flowbite-4/table/manifest.json | 12 ++++++ .../templates/components/Table.html.twig | 10 +++++ .../templates/components/Table/Body.html.twig | 19 ++++++++++ .../components/Table/Caption.html.twig | 7 ++++ .../templates/components/Table/Cell.html.twig | 7 ++++ .../components/Table/Footer.html.twig | 7 ++++ .../templates/components/Table/Head.html.twig | 7 ++++ .../components/Table/Header.html.twig | 7 ++++ .../templates/components/Table/Row.html.twig | 6 +++ 13 files changed, 207 insertions(+) create mode 100644 src/Toolkit/kits/flowbite-4/table/examples/Demo.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/table/examples/Highlight striped.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/table/examples/Usage.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/table/examples/Without border.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/table/manifest.json create mode 100644 src/Toolkit/kits/flowbite-4/table/templates/components/Table.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/table/templates/components/Table/Body.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/table/templates/components/Table/Caption.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/table/templates/components/Table/Cell.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/table/templates/components/Table/Footer.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/table/templates/components/Table/Head.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/table/templates/components/Table/Header.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/table/templates/components/Table/Row.html.twig diff --git a/src/Toolkit/kits/flowbite-4/table/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/table/examples/Demo.html.twig new file mode 100644 index 00000000000..b7e156f307a --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/table/examples/Demo.html.twig @@ -0,0 +1,38 @@ +{%- set products = [ + {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231}, + {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423}, + {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121}, +] -%} + + + Our products +

Browse a list of Flowbite products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.

+ + + + Product name + Color + Category + Price + Stock + + + + {% for product in products %} + + {{ product.name }} + {{ product.color }} + {{ product.category }} + {{ product.price }} + {{ product.stock }} + + {% endfor %} + + + + Total + $5997 + 775 + + + diff --git a/src/Toolkit/kits/flowbite-4/table/examples/Highlight striped.html.twig b/src/Toolkit/kits/flowbite-4/table/examples/Highlight striped.html.twig new file mode 100644 index 00000000000..9816161a412 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/table/examples/Highlight striped.html.twig @@ -0,0 +1,34 @@ +{%- set products = [ + {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231}, + {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423}, + {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121}, +] -%} + + + + Product name + Color + Category + Price + Stock + + + + {% for product in products %} + + {{ product.name }} + {{ product.color }} + {{ product.category }} + {{ product.price }} + {{ product.stock }} + + {% endfor %} + + + + Total + $5997 + 775 + + + diff --git a/src/Toolkit/kits/flowbite-4/table/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/table/examples/Usage.html.twig new file mode 100644 index 00000000000..49852562ac4 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/table/examples/Usage.html.twig @@ -0,0 +1,19 @@ + + A list of your recent invoices. + + + Invoice + Status + Method + Amount + + + + + INV001 + Paid + Credit Card + $250.00 + + + diff --git a/src/Toolkit/kits/flowbite-4/table/examples/Without border.html.twig b/src/Toolkit/kits/flowbite-4/table/examples/Without border.html.twig new file mode 100644 index 00000000000..7702b41991f --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/table/examples/Without border.html.twig @@ -0,0 +1,34 @@ +{%- set products = [ + {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231}, + {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423}, + {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121}, +] -%} + + + + Product name + Color + Category + Price + Stock + + + + {% for product in products %} + + {{ product.name }} + {{ product.color }} + {{ product.category }} + {{ product.price }} + {{ product.stock }} + + {% endfor %} + + + + Total + $5997 + 775 + + + diff --git a/src/Toolkit/kits/flowbite-4/table/manifest.json b/src/Toolkit/kits/flowbite-4/table/manifest.json new file mode 100644 index 00000000000..c185d09e9f4 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/table/manifest.json @@ -0,0 +1,12 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Table", + "description": "Use the table component to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells", + "copy-files": { + "templates/": "templates/" + }, + "dependencies": { + "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"] + } +} diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table.html.twig new file mode 100644 index 00000000000..3f72ff4d14a --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table.html.twig @@ -0,0 +1,10 @@ +{# @block content The table structure, typically includes `Table:Header`, `Table:Body`, and optionally `Table:Footer` #} +{# @prop borderless boolean Whether to hide the table borders. Defaults to `false` #} +{%- props borderless = false -%} + + {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Body.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Body.html.twig new file mode 100644 index 00000000000..cc454e4e656 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Body.html.twig @@ -0,0 +1,19 @@ +{# @prop highlight 'none'|'hover'|'striped' The visual row style highlight. Defaults to `hover` #} +{# @block content The table body rows, typically `Table:Row` components #} +{% props highlight="hover" %} +{%- set style = html_cva( + base: '[&>tr]:bg-neutral-primary-soft group-data-[border=bordered]/table:[&>tr]:border-b group-data-[border=bordered]/table:[&>tr]:border-default [&>tr]:transition-colors', + variants: { + highlight: { + none: '', + hover: '[&>tr]:hover:bg-neutral-secondary-medium', + striped: '[&>tr]:odd:bg-neutral-primary [&>tr]:even:bg-neutral-secondary-soft', + }, + }, +) -%} + + {%- block content %}{% endblock -%} + diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Caption.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Caption.html.twig new file mode 100644 index 00000000000..d5736b184a4 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Caption.html.twig @@ -0,0 +1,7 @@ +{# @block content The table caption text #} + + {%- block content %}{% endblock -%} + diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Cell.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Cell.html.twig new file mode 100644 index 00000000000..d62e59d60d0 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Cell.html.twig @@ -0,0 +1,7 @@ +{# @block content The cell content #} + + {%- block content %}{% endblock -%} + diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Footer.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Footer.html.twig new file mode 100644 index 00000000000..195477dd07f --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Footer.html.twig @@ -0,0 +1,7 @@ +{# @block content The table footer rows, typically `Table:Row` components #} + + {%- block content %}{% endblock -%} + diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Head.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Head.html.twig new file mode 100644 index 00000000000..851ee16d718 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Head.html.twig @@ -0,0 +1,7 @@ +{# @block content The header cell content #} + + {%- block content %}{% endblock -%} + diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Header.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Header.html.twig new file mode 100644 index 00000000000..caf5e4fa652 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Header.html.twig @@ -0,0 +1,7 @@ +{# @block content The header row(s), typically a `Table:Row` with `Table:Head` cells #} + + {%- block content %}{% endblock -%} + diff --git a/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Row.html.twig b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Row.html.twig new file mode 100644 index 00000000000..519726fe6f6 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/table/templates/components/Table/Row.html.twig @@ -0,0 +1,6 @@ +{# @block content The row cells, typically `Table:Cell` or `Table:Head` components #} + + {%- block content %}{% endblock -%} + From c8f56f801131ec64a0a29c1f00375e7718e70339 Mon Sep 17 00:00:00 2001 From: DcgRG Date: Mon, 2 Mar 2026 09:01:14 +0100 Subject: [PATCH 06/21] [Toolkit][Flowbite] Add Input and Label component --- .../flowbite-4/card/examples/Demo.html.twig | 14 +++++--------- .../input/examples/Default.html.twig | 1 + .../flowbite-4/input/examples/Demo.html.twig | 1 + .../input/examples/Disabled.html.twig | 1 + .../flowbite-4/input/examples/File.html.twig | 4 ++++ .../input/examples/Invalid.html.twig | 4 ++++ .../flowbite-4/input/examples/Usage.html.twig | 1 + .../input/examples/With Button.html.twig | 7 +++++++ .../input/examples/With Label.html.twig | 4 ++++ .../kits/flowbite-4/input/manifest.json | 12 ++++++++++++ .../input/templates/components/Input.html.twig | 4 ++++ .../flowbite-4/label/examples/Demo.html.twig | 4 ++++ .../flowbite-4/label/examples/Usage.html.twig | 1 + .../kits/flowbite-4/label/manifest.json | 12 ++++++++++++ .../label/templates/components/Label.html.twig | 18 ++++++++++++++++++ 15 files changed, 79 insertions(+), 9 deletions(-) create mode 100644 src/Toolkit/kits/flowbite-4/input/examples/Default.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/input/examples/Demo.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/input/examples/Disabled.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/input/examples/File.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/input/examples/Invalid.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/input/examples/Usage.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/input/examples/With Button.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/input/examples/With Label.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/input/manifest.json create mode 100644 src/Toolkit/kits/flowbite-4/input/templates/components/Input.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/label/examples/Demo.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/label/examples/Usage.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/label/manifest.json create mode 100644 src/Toolkit/kits/flowbite-4/label/templates/components/Label.html.twig diff --git a/src/Toolkit/kits/flowbite-4/card/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/card/examples/Demo.html.twig index 3759028a9d7..d82d4fb89ae 100644 --- a/src/Toolkit/kits/flowbite-4/card/examples/Demo.html.twig +++ b/src/Toolkit/kits/flowbite-4/card/examples/Demo.html.twig @@ -5,24 +5,20 @@
- - + Your email +
- - + Your password +
- + Remember me
Lost Password?
diff --git a/src/Toolkit/kits/flowbite-4/input/examples/Default.html.twig b/src/Toolkit/kits/flowbite-4/input/examples/Default.html.twig new file mode 100644 index 00000000000..b54c4580fc0 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/input/examples/Default.html.twig @@ -0,0 +1 @@ + diff --git a/src/Toolkit/kits/flowbite-4/input/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/input/examples/Demo.html.twig new file mode 100644 index 00000000000..b54c4580fc0 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/input/examples/Demo.html.twig @@ -0,0 +1 @@ + diff --git a/src/Toolkit/kits/flowbite-4/input/examples/Disabled.html.twig b/src/Toolkit/kits/flowbite-4/input/examples/Disabled.html.twig new file mode 100644 index 00000000000..1bc3394eea1 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/input/examples/Disabled.html.twig @@ -0,0 +1 @@ + diff --git a/src/Toolkit/kits/flowbite-4/input/examples/File.html.twig b/src/Toolkit/kits/flowbite-4/input/examples/File.html.twig new file mode 100644 index 00000000000..a752a557d32 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/input/examples/File.html.twig @@ -0,0 +1,4 @@ +
+ Picture + +
diff --git a/src/Toolkit/kits/flowbite-4/input/examples/Invalid.html.twig b/src/Toolkit/kits/flowbite-4/input/examples/Invalid.html.twig new file mode 100644 index 00000000000..37e1f05781f --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/input/examples/Invalid.html.twig @@ -0,0 +1,4 @@ +
+ Email + +
diff --git a/src/Toolkit/kits/flowbite-4/input/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/input/examples/Usage.html.twig new file mode 100644 index 00000000000..a5b5550ecc4 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/input/examples/Usage.html.twig @@ -0,0 +1 @@ + diff --git a/src/Toolkit/kits/flowbite-4/input/examples/With Button.html.twig b/src/Toolkit/kits/flowbite-4/input/examples/With Button.html.twig new file mode 100644 index 00000000000..36c01c5f8c1 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/input/examples/With Button.html.twig @@ -0,0 +1,7 @@ +
+ + + +
diff --git a/src/Toolkit/kits/flowbite-4/input/examples/With Label.html.twig b/src/Toolkit/kits/flowbite-4/input/examples/With Label.html.twig new file mode 100644 index 00000000000..7101c93a920 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/input/examples/With Label.html.twig @@ -0,0 +1,4 @@ +
+ Email + +
diff --git a/src/Toolkit/kits/flowbite-4/input/manifest.json b/src/Toolkit/kits/flowbite-4/input/manifest.json new file mode 100644 index 00000000000..6e5336f2cd9 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/input/manifest.json @@ -0,0 +1,12 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Input", + "description": "The input field is an important part of the form element that can be used to create interactive controls to accept data from the user based on multiple input types, such as text, email, number, password, URL, phone number, and more.", + "copy-files": { + "templates/": "templates/" + }, + "dependencies": { + "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"] + } +} diff --git a/src/Toolkit/kits/flowbite-4/input/templates/components/Input.html.twig b/src/Toolkit/kits/flowbite-4/input/templates/components/Input.html.twig new file mode 100644 index 00000000000..5497216c534 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/input/templates/components/Input.html.twig @@ -0,0 +1,4 @@ + diff --git a/src/Toolkit/kits/flowbite-4/label/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/label/examples/Demo.html.twig new file mode 100644 index 00000000000..ed679e5f098 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/label/examples/Demo.html.twig @@ -0,0 +1,4 @@ +
+ Company + +
diff --git a/src/Toolkit/kits/flowbite-4/label/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/label/examples/Usage.html.twig new file mode 100644 index 00000000000..f9ac4ab3356 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/label/examples/Usage.html.twig @@ -0,0 +1 @@ +Your email address diff --git a/src/Toolkit/kits/flowbite-4/label/manifest.json b/src/Toolkit/kits/flowbite-4/label/manifest.json new file mode 100644 index 00000000000..bda0ceecaea --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/label/manifest.json @@ -0,0 +1,12 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Label", + "description": "A text element that identifies form controls and other content.", + "copy-files": { + "templates/": "templates/" + }, + "dependencies": { + "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"] + } +} diff --git a/src/Toolkit/kits/flowbite-4/label/templates/components/Label.html.twig b/src/Toolkit/kits/flowbite-4/label/templates/components/Label.html.twig new file mode 100644 index 00000000000..9570ed8ed7a --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/label/templates/components/Label.html.twig @@ -0,0 +1,18 @@ +{# @prop variant 'default'|'invalid' The visual style variant. Defaults to `brand` #} +{# @block content The label text for a form control #} +{%- props variant = 'default' -%} +{%- set style = html_cva( + base: "block text-sm font-medium", + variants: { + variant: { + default:'text-heading', + invalid:'text-fg-danger-strong', + }, + }, +) -%} + From b304a7424c0f0ce9d274bed54d96fbd7d80e163b Mon Sep 17 00:00:00 2001 From: DcgRG Date: Mon, 2 Mar 2026 13:30:11 +0100 Subject: [PATCH 07/21] [Toolkit][Flowbite] Add Textarea component --- .../flowbite-4/textarea/examples/Default.html.twig | 1 + .../kits/flowbite-4/textarea/examples/Demo.html.twig | 1 + .../flowbite-4/textarea/examples/Disabled.html.twig | 1 + .../flowbite-4/textarea/examples/Usage.html.twig | 1 + .../textarea/examples/With Label.html.twig | 4 ++++ src/Toolkit/kits/flowbite-4/textarea/manifest.json | 12 ++++++++++++ .../textarea/templates/components/Textarea.html.twig | 7 +++++++ 7 files changed, 27 insertions(+) create mode 100644 src/Toolkit/kits/flowbite-4/textarea/examples/Default.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/textarea/examples/Demo.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/textarea/examples/Disabled.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/textarea/examples/Usage.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/textarea/examples/With Label.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/textarea/manifest.json create mode 100644 src/Toolkit/kits/flowbite-4/textarea/templates/components/Textarea.html.twig diff --git a/src/Toolkit/kits/flowbite-4/textarea/examples/Default.html.twig b/src/Toolkit/kits/flowbite-4/textarea/examples/Default.html.twig new file mode 100644 index 00000000000..ef474ce1389 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/textarea/examples/Default.html.twig @@ -0,0 +1 @@ + diff --git a/src/Toolkit/kits/flowbite-4/textarea/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/textarea/examples/Demo.html.twig new file mode 100644 index 00000000000..43491558dde --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/textarea/examples/Demo.html.twig @@ -0,0 +1 @@ + diff --git a/src/Toolkit/kits/flowbite-4/textarea/examples/Disabled.html.twig b/src/Toolkit/kits/flowbite-4/textarea/examples/Disabled.html.twig new file mode 100644 index 00000000000..4df498bcebb --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/textarea/examples/Disabled.html.twig @@ -0,0 +1 @@ + diff --git a/src/Toolkit/kits/flowbite-4/textarea/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/textarea/examples/Usage.html.twig new file mode 100644 index 00000000000..1ba2c67a4d6 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/textarea/examples/Usage.html.twig @@ -0,0 +1 @@ + diff --git a/src/Toolkit/kits/flowbite-4/textarea/examples/With Label.html.twig b/src/Toolkit/kits/flowbite-4/textarea/examples/With Label.html.twig new file mode 100644 index 00000000000..db7ab938fd7 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/textarea/examples/With Label.html.twig @@ -0,0 +1,4 @@ +
+ Your message + +
diff --git a/src/Toolkit/kits/flowbite-4/textarea/manifest.json b/src/Toolkit/kits/flowbite-4/textarea/manifest.json new file mode 100644 index 00000000000..437c0632e86 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/textarea/manifest.json @@ -0,0 +1,12 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Textarea", + "description": "The textarea component is a multi-line text field input that can be used to receive longer chunks of text from the user in the form of a comment box, description field, and more.", + "copy-files": { + "templates/": "templates/" + }, + "dependencies": { + "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"] + } +} diff --git a/src/Toolkit/kits/flowbite-4/textarea/templates/components/Textarea.html.twig b/src/Toolkit/kits/flowbite-4/textarea/templates/components/Textarea.html.twig new file mode 100644 index 00000000000..76a9cbf0345 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/textarea/templates/components/Textarea.html.twig @@ -0,0 +1,7 @@ +{# @block content The initial textarea value #} + From 08189a6687050011bc4e3d6a06aef9d35e84c57d Mon Sep 17 00:00:00 2001 From: DcgRG Date: Mon, 2 Mar 2026 20:42:38 +0100 Subject: [PATCH 08/21] [Toolkit][Flowbite] Add Select component --- .../kits/flowbite-4/select/examples/Demo.html.twig | 7 +++++++ .../kits/flowbite-4/select/examples/Usage.html.twig | 5 +++++ src/Toolkit/kits/flowbite-4/select/manifest.json | 12 ++++++++++++ .../select/templates/components/Select.html.twig | 7 +++++++ 4 files changed, 31 insertions(+) create mode 100644 src/Toolkit/kits/flowbite-4/select/examples/Demo.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/select/examples/Usage.html.twig create mode 100644 src/Toolkit/kits/flowbite-4/select/manifest.json create mode 100644 src/Toolkit/kits/flowbite-4/select/templates/components/Select.html.twig diff --git a/src/Toolkit/kits/flowbite-4/select/examples/Demo.html.twig b/src/Toolkit/kits/flowbite-4/select/examples/Demo.html.twig new file mode 100644 index 00000000000..77b6aaf154b --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/select/examples/Demo.html.twig @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/Toolkit/kits/flowbite-4/select/examples/Usage.html.twig b/src/Toolkit/kits/flowbite-4/select/examples/Usage.html.twig new file mode 100644 index 00000000000..79abe1d3d70 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/select/examples/Usage.html.twig @@ -0,0 +1,5 @@ + + + + + diff --git a/src/Toolkit/kits/flowbite-4/select/manifest.json b/src/Toolkit/kits/flowbite-4/select/manifest.json new file mode 100644 index 00000000000..f512209ccd6 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/select/manifest.json @@ -0,0 +1,12 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Select", + "description": "Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants", + "copy-files": { + "templates/": "templates/" + }, + "dependencies": { + "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"] + } +} diff --git a/src/Toolkit/kits/flowbite-4/select/templates/components/Select.html.twig b/src/Toolkit/kits/flowbite-4/select/templates/components/Select.html.twig new file mode 100644 index 00000000000..94df8a39a39 --- /dev/null +++ b/src/Toolkit/kits/flowbite-4/select/templates/components/Select.html.twig @@ -0,0 +1,7 @@ +{# @block content The select options (`