Installation

#Getting the package

Simply run the following command to install the package.

composer install allyoullneed/advanced-controls

#CSS library

#Picking your preferred CSS library

We support DaisyUI and FlyonUI, and we recommend you pay both sites a visit so you make an informed decision as to what your site's style will be.

If despite the information you can gather from the above links, you have trouble picking your preferred library, no worries! Pick one for now and there should be hardly any change to make if you change your mind later.

To install the plugin, follow the instructions from either of the linked pages above.

After that, add a reference to the package's sources, to allow the classes it uses to be compiled. Assuming your CSS file is in <project root>/resources/css, you will need to add a link to <project root>/vendor/allyoullneed/advanced-controls and custom variants used by the library. With relative paths, it will turn into:

@source "../../vendor/allyoullneed/advanced-controls/**/*.php";

@custom-variant ayn-desc (:where(& *));
@custom-variant ayn-child (:where(& > *));

For reference, your CSS at this point should look something like this:

 1@import "tailwindcss";
 2@plugin "daisyui";
 3
 4@source "../../vendor/allyoullneed/advanced-controls/**/*.php";
 5
 6@custom-variant dark (&:where(.dark, .dark *));
 7@custom-variant light (&:where(.light, .light *));
 8@custom-variant ayn-desc (:where(& *));
 9@custom-variant ayn-child (:where(& > *));
10
11@plugin "daisyui/theme" {
12    name: "light";
13    default: false;
14    prefersdark: false;
15    color-scheme: "light";
16    --color-base-100: oklch(100% 0 0);
17    --color-base-200: oklch(98% 0 0);
18    --color-base-300: oklch(95% 0 0);
19    --color-base-content: oklch(21% 0.006 285.885);
20    --color-primary: oklch(45% 0.24 277.023);
21    --color-primary-content: oklch(93% 0.034 272.788);
22    --color-secondary: oklch(65% 0.241 354.308);
23    --color-secondary-content: oklch(94% 0.028 342.258);
24    --color-accent: oklch(77% 0.152 181.912);
25    --color-accent-content: oklch(38% 0.063 188.416);
26    --color-neutral: oklch(14% 0.005 285.823);
27    --color-neutral-content: oklch(92% 0.004 286.32);
28    --color-info: oklch(74% 0.16 232.661);
29    --color-info-content: oklch(29% 0.066 243.157);
30    --color-success: oklch(76% 0.177 163.223);
31    --color-success-content: oklch(37% 0.077 168.94);
32    --color-warning: oklch(90% 0.182 98.111);
33    --color-warning-content: oklch(41% 0.112 45.904);
34    --color-error: oklch(71% 0.194 13.428);
35    --color-error-content: oklch(27% 0.105 12.094);
36    --radius-selector: 0.5rem;
37    --radius-field: 0.25rem;
38    --radius-box: 0.5rem;
39    --size-selector: 0.25rem;
40    --size-field: 0.25rem;
41    --border: 1px;
42    --depth: 0;
43    --noise: 0;
44}
45
46@plugin "daisyui/theme" {
47    name: "dark";
48    default: true;
49    prefersdark: true;
50    color-scheme: "dark";
51    --color-base-100: oklch(25.33% 0.016 252.42);
52    --color-base-200: oklch(23.26% 0.014 253.1);
53    --color-base-300: oklch(21.15% 0.012 254.09);
54    --color-base-content: oklch(97.807% 0.029 256.847);
55    --color-primary: oklch(52.5% 0.138 232.661);
56    --color-primary-content: oklch(98% 0.027 232.661);
57    --color-secondary: oklch(65% 0.241 354.308);
58    --color-secondary-content: oklch(94% 0.028 342.258);
59    --color-accent: oklch(0.63 0.1699 149.21);
60    --color-accent-content: oklch(98% 0 0);
61    --color-neutral: oklch(14% 0.005 285.823);
62    --color-neutral-content: oklch(92% 0.004 286.32);
63    --color-info: oklch(0.57 0.209451 257.9449);
64    --color-info-content: oklch(98% 0 0);
65    --color-success: oklch(0.5361 0.1399 149.88);
66    --color-success-content: oklch(98% 0 0);
67    --color-warning: oklch(0.9 0.182 98.111);
68    --color-warning-content: oklch(41% 0.112 45.904);
69    --color-error: oklch(0.5728 0.2306 21.62);
70    --color-error-content: oklch(98% 0 0);
71    --radius-selector: 0.5rem;
72    --radius-field: 0.25rem;
73    --radius-box: 0.5rem;
74    --size-selector: 0.25rem;
75    --size-field: 0.25rem;
76    --border: 1px;
77    --depth: 0;
78    --noise: 0;
79}

 1@import "tailwindcss";
 2@plugin "flyonui" {
 3    themes: light --default, dark --prefersdark;
 4}
 5@plugin "@iconify/tailwind4";
 6
 7@source "../../vendor/allyoullneed/advanced-controls/**/*.php";
 8
 9@custom-variant dark (&:where(.dark, .dark *));
10@custom-variant light (&:where(.light, .light *));
11@custom-variant ayn-desc (:where(& *));
12@custom-variant ayn-child (:where(& > *));
13
14@plugin "flyonui/theme" {
15    name: "light";
16    default: true;
17    --color-base-100: oklch(100% 0 0);
18    --color-base-200: oklch(98% 0 0);
19    --color-base-300: oklch(95% 0 0);
20    --color-base-content: oklch(0.2 0.0132 233.32);
21    --color-primary: oklch(60% 0.126 221.723);
22    --color-primary-content: oklch(98% 0.019 200.873);
23    --color-secondary: oklch(76% 0.188 70.08);
24    --color-secondary-content: oklch(98% 0.016 73.684);
25    --color-accent: oklch(0.49 0.2254 300.51);
26    --color-accent-content: oklch(98% 0 0);
27    --color-neutral: oklch(14% 0.005 285.823);
28    --color-neutral-content: oklch(92% 0.004 286.32);
29    --color-info: oklch(0.57 0.209451 257.9449);
30    --color-info-content: oklch(98% 0 0);
31    --color-success: oklch(0.5361 0.1399 149.88);
32    --color-success-content: oklch(98% 0 0);
33    --color-warning: oklch(0.9 0.182 98.111);
34    --color-warning-content: oklch(41% 0.112 45.904);
35    --color-error: oklch(0.5728 0.2306 21.62);
36    --color-error-content: oklch(98% 0 0);
37    --radius-selector: 0.5rem;
38    --radius-field: 0.25rem;
39    --radius-box: 0.5rem;
40    --size-selector: 0.25rem;
41    --size-field: 0.21875rem;
42    --border: 1px;
43    --depth: 1;
44    --noise: 0;
45}
46
47@plugin "flyonui/theme" {
48    name: "dark";
49    --color-base-100: oklch(25.33% 0.016 252.42);
50    --color-base-200: oklch(23.26% 0.014 253.1);
51    --color-base-300: oklch(21.15% 0.012 254.09);
52    --color-base-content: oklch(97.807% 0.029 256.847);
53    --color-primary: oklch(52.5% 0.138 232.661);
54    --color-primary-content: oklch(98% 0.027 232.661);
55    --color-secondary: oklch(65% 0.241 354.308);
56    --color-secondary-content: oklch(94% 0.028 342.258);
57    --color-accent: oklch(0.63 0.1699 149.21);
58    --color-accent-content: oklch(98% 0 0);
59    --color-neutral: oklch(14% 0.005 285.823);
60    --color-neutral-content: oklch(92% 0.004 286.32);
61    --color-info: oklch(0.57 0.209451 257.9449);
62    --color-info-content: oklch(98% 0 0);
63    --color-success: oklch(0.5361 0.1399 149.88);
64    --color-success-content: oklch(98% 0 0);
65    --color-warning: oklch(0.9 0.182 98.111);
66    --color-warning-content: oklch(41% 0.112 45.904);
67    --color-error: oklch(0.5728 0.2306 21.62);
68    --color-error-content: oklch(98% 0 0);
69    --radius-selector: 0.5rem;
70    --radius-field: 0.25rem;
71    --radius-box: 0.5rem;
72    --size-selector: 0.25rem;
73    --size-field: 0.21875rem;
74    --border: 1px;
75    --depth: 0;
76    --noise: 0;
77}

#Icons

Icons are powered by any Blade icon package you want to use.

The following libraries are supported out of the box:

Other libraries requires adding the relevant icons to the configuration file. Refer to the corresponding section below.

At this stage, you need to:

  1. Choose the library you desire to use.
    We suggest you check out the Blade icons website to display all the sets they have available and pick the one that interests you the most.

  2. Download the library.

  3. Update the configuration file to reflect your choice.

#Downloading the icon package

Once you have made your choice, it takes only 1 command to get the package. You can consult the list of available packages here, click on the corresponding link and it will give you the composer install <package> command you need to run.

#Configuration

If you have chosen a library other than Heroicons or if you want to change what icons are used by the components, you need to modify the configuration file.

First, publish the configuration file.

php artisan vendor:publish --tag=advanced-controls-config

This copies the config file under your config/ folder, where you get 2 parameters to control icons:

'icons' => 'heroicons',


'icon-packages' => [
'google-material-design' => [
    'info'          => 'gmdi-info-outline-r',
    'success'       => 'gmdi-check-circle-outline-r',
    'warning'       => 'gmdi-warning-amber-r',
    'error'         => 'gmdi-error-outline-r',

    'password-show' => 'gmdi-visibility-o',
    'password-hide' => 'gmdi-visibility-off-o',

    'rating'        => 'gmdi-star',
    'user'          => 'gmdi-person',
],
'heroicons' => [
    'info'          => 'heroicon-o-information-circle',
    'success'       => 'heroicon-o-check-circle',
    'warning'       => 'heroicon-o-exclamation-triangle',
    'error'         => 'heroicon-o-x-circle',

    'password-show' => 'heroicon-o-eye',
    'password-hide' => 'heroicon-o-eye-slash',

    'rating'        => 'heroicon-s-star',
    'user'          => 'heroicon-s-user',
],
'phosphor' => [
    'info'          => 'phosphor-info',
    'success'       => 'phosphor-check-circle',
    'warning'       => 'phosphor-warning',
    'error'         => 'phosphor-x-circle',

    'password-show' => 'phosphor-eye',
    'password-hide' => 'phosphor-eye-closed',

    'rating'        => 'phosphor-star-fill',
    'user'          => 'phosphor-user-fill',
]

icons is your choice for which package will be used; icon-packages is the list of icon libraries that are preconfigured for you.
You can add any icon library you want to the icon-packages array, then puts it array key as the value of icons so that components automatically use the values you have chosen.