daisyui 5.0.0-alpha.2 → 5.0.0-alpha.4

package/components/menu.css

@@ -0,0 +1,237 @@
+.menu {
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    padding: var(--spacing-2, 0.5rem);
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
+    :where(li ul) {
+      position: relative;
+      margin-inline-start: var(--spacing-4, 1rem);
+      white-space: nowrap;
+      padding-inline-start: var(--spacing-2, 0.5rem);
+      &:before {
+        position: absolute;
+        inset-inline-start: var(--spacing-0, 0px);
+        top: var(--spacing-3, 0.75rem);
+        bottom: var(--spacing-3, 0.75rem);
+        width: var(--spacing-px, 1px);
+        background-color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+        opacity: 10%;
+        content: "";
+      }
+    }
+    :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
+      display: none;
+    }
+    :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      display: grid;
+      grid-auto-flow: column;
+      align-content: flex-start;
+      align-items: center;
+      gap: var(--spacing-2, 0.5rem);
+      border-radius: var(--radius-btn, 0.5rem);
+      padding-top: var(--spacing-2, 0.5rem);
+      padding-bottom: var(--spacing-2, 0.5rem);
+      padding-left: var(--spacing-4, 1rem);
+      padding-right: var(--spacing-4, 1rem);
+      text-align: start;
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+      transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
+      --tw-duration: 200ms;
+      transition-duration: 200ms;
+      --tw-ease: var(--transition-timing-function-out, cubic-bezier(0, 0, 0.2, 1));
+      transition-timing-function: var(--transition-timing-function-out, cubic-bezier(0, 0, 0.2, 1));
+      grid-auto-columns: minmax(auto, max-content) auto max-content;
+      text-wrap: balance;
+      user-select: none;
+    }
+    :where(li > details > summary) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+    :where(li > details > summary), :where(li > .menu-dropdown-toggle) {
+      &:after {
+        justify-self: flex-end;
+        display: block;
+        height: 0.375rem;
+        width: 0.375rem;
+        rotate: -135deg;
+        translate: 0 -1px;
+        transition-property: rotate, translate;
+        transition-duration: 0.2s;
+        content: "";
+        transform-origin: 50% 50%;
+        box-shadow: 2px 2px inset;
+        pointer-events: none;
+      }
+    }
+    :where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
+      rotate: 45deg;
+      translate: 0 1px;
+    }
+    :where(li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title, .disabled) > details > summary:not(.menu-title)) {
+      &:not(.menu-active, :active, .btn) {
+        &.menu-focus, &:focus-visible {
+          cursor: pointer;
+          background-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 10%, transparent);
+          color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+          outline: 2px solid transparent;
+          outline-offset: 2px;
+        }
+        &:hover {
+          cursor: pointer;
+          background-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 10%, transparent);
+          outline: 2px solid transparent;
+          outline-offset: 2px;
+        }
+      }
+    }
+    :where(li:empty) {
+      background-color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+      opacity: 10%;
+      margin: 0.5rem 1rem;
+      height: 1px;
+    }
+    :where(li) {
+      position: relative;
+      display: flex;
+      flex-shrink: 0;
+      flex-direction: column;
+      flex-wrap: wrap;
+      align-items: stretch;
+      .badge {
+        justify-self: flex-end;
+      }
+      &>*:not(ul, .menu-title, details, .btn):active, &>*:not(ul, .menu-title, details, .btn).menu-active, &>details>summary:active {
+        background-color: var(--color-neutral, oklch(32.1785% 0.02476 255.701624));
+        color: var(--color-neutral-content, oklch(89.4994% 0.011585 252.096176));
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+      &.menu-disabled {
+        cursor: not-allowed;
+        color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 30%, transparent);
+        -webkit-user-select: none;
+        user-select: none;
+      }
+    }
+  }
+  .menu-title {
+    padding-top: var(--spacing-2, 0.5rem);
+    padding-bottom: var(--spacing-2, 0.5rem);
+    padding-left: var(--spacing-4, 1rem);
+    padding-right: var(--spacing-4, 1rem);
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
+    --tw-font-weight: 700;
+    font-weight: 700;
+    color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 40%, transparent);
+  }
+  .menu-horizontal {
+    display: inline-flex;
+    flex-direction: row;
+    &>li:not(.menu-title)>details>ul {
+      position: absolute;
+      margin-inline-start: var(--spacing-0, 0px);
+      margin-top: var(--spacing-4, 1rem);
+      padding-inline-end: var(--spacing-2, 0.5rem);
+      padding-top: var(--spacing-2, 0.5rem);
+      padding-bottom: var(--spacing-2, 0.5rem);
+    }
+    &>li>details>ul {
+      &:before {
+        content: none;
+      }
+    }
+    :where(&>li:not(.menu-title)>details>ul) {
+      border-radius: var(--radius-box, 1rem);
+      background-color: var(--color-base-100, oklch(100% 0 0));
+      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .menu-vertical {
+    display: inline-flex;
+    flex-direction: column;
+    &>li:not(.menu-title)>details>ul {
+      position: relative;
+      margin-inline-start: var(--spacing-4, 1rem);
+      margin-top: var(--spacing-0, 0px);
+      padding-inline-end: var(--spacing-0, 0px);
+      padding-top: var(--spacing-0, 0px);
+      padding-bottom: var(--spacing-0, 0px);
+    }
+  }
+  .menu-xs {
+    :where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius, 0.25rem);
+      padding-top: var(--spacing-1, 0.25rem);
+      padding-bottom: var(--spacing-1, 0.25rem);
+      padding-left: var(--spacing-2, 0.5rem);
+      padding-right: var(--spacing-2, 0.5rem);
+      font-size: var(--font-size-xs, 0.75rem);
+      line-height: var(--tw-leading, var(--font-size-xs--line-height, 1rem));
+    }
+    .menu-title {
+      padding-top: var(--spacing-1, 0.25rem);
+      padding-bottom: var(--spacing-1, 0.25rem);
+      padding-left: var(--spacing-2, 0.5rem);
+      padding-right: var(--spacing-2, 0.5rem);
+    }
+  }
+  .menu-sm {
+    :where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius-btn, 0.5rem);
+      padding-top: var(--spacing-1, 0.25rem);
+      padding-bottom: var(--spacing-1, 0.25rem);
+      padding-left: var(--spacing-3, 0.75rem);
+      padding-right: var(--spacing-3, 0.75rem);
+      font-size: var(--font-size-sm, 0.875rem);
+      line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
+    }
+    .menu-title {
+      padding-top: var(--spacing-2, 0.5rem);
+      padding-bottom: var(--spacing-2, 0.5rem);
+      padding-left: var(--spacing-3, 0.75rem);
+      padding-right: var(--spacing-3, 0.75rem);
+    }
+  }
+  .menu-md {
+    :where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius-btn, 0.5rem);
+      padding-top: var(--spacing-2, 0.5rem);
+      padding-bottom: var(--spacing-2, 0.5rem);
+      padding-left: var(--spacing-4, 1rem);
+      padding-right: var(--spacing-4, 1rem);
+      font-size: var(--font-size-sm, 0.875rem);
+      line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
+    }
+    .menu-title {
+      padding-top: var(--spacing-2, 0.5rem);
+      padding-bottom: var(--spacing-2, 0.5rem);
+      padding-left: var(--spacing-4, 1rem);
+      padding-right: var(--spacing-4, 1rem);
+    }
+  }
+  .menu-lg {
+    :where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius-btn, 0.5rem);
+      padding-top: var(--spacing-3, 0.75rem);
+      padding-bottom: var(--spacing-3, 0.75rem);
+      padding-left: var(--spacing-6, 1.5rem);
+      padding-right: var(--spacing-6, 1.5rem);
+      font-size: var(--font-size-lg, 1.125rem);
+      line-height: var(--tw-leading, var(--font-size-lg--line-height, 1.75rem));
+    }
+    .menu-title {
+      padding-top: var(--spacing-3, 0.75rem);
+      padding-bottom: var(--spacing-3, 0.75rem);
+      padding-left: var(--spacing-6, 1.5rem);
+      padding-right: var(--spacing-6, 1.5rem);
+    }
+  }

package/components/radio/class.json

@@ -0,0 +1,14 @@
+[
+  "radio",
+  "radio-primary",
+  "radio-secondary",
+  "radio-accent",
+  "radio-success",
+  "radio-warning",
+  "radio-info",
+  "radio-error",
+  "radio-xs",
+  "radio-sm",
+  "radio-md",
+  "radio-lg"
+]

package/components/range/class.json

@@ -0,0 +1,14 @@
+[
+  "range",
+  "range-primary",
+  "range-secondary",
+  "range-accent",
+  "range-success",
+  "range-warning",
+  "range-info",
+  "range-error",
+  "range-xs",
+  "range-sm",
+  "range-md",
+  "range-lg"
+]

package/components/rating/class.json

@@ -0,0 +1,5 @@
+[
+  "rating",
+  "rating-hidden",
+  "rating-half"
+]

package/components/select/class.json

@@ -0,0 +1,16 @@
+[
+  "select",
+  "select-bordered",
+  "select-ghost",
+  "select-primary",
+  "select-secondary",
+  "select-accent",
+  "select-info",
+  "select-success",
+  "select-warning",
+  "select-error",
+  "select-xs",
+  "select-sm",
+  "select-md",
+  "select-lg"
+]

package/components/tab/class.json

@@ -0,0 +1,13 @@
+[
+  "tabs",
+  "tab",
+  "tab-active",
+  "tab-content",
+  "tabs-bordered",
+  "tabs-lifted",
+  "tabs-boxed",
+  "tabs-md",
+  "tabs-lg",
+  "tabs-sm",
+  "tabs-xs"
+]

package/components/tab/config.js

@@ -0,0 +1,12 @@
+import { plugin } from '../../functions/plugin.js';
+import index from './index.js';
+
+export default {
+	plugins: [
+		plugin(({ addComponents }) => {
+			addComponents({
+				...index
+			});
+		})
+	],
+};

package/components/tab/index.css

@@ -0,0 +1 @@
+@config "./config.js";

package/components/tab/index.js

@@ -0,0 +1,165 @@
+export default {
+  ".tabs": {
+    "@apply inline-grid items-end align-bottom": {}
+  },
+  ".tab": {
+    "@apply hover:text-base-content relative row-start-1 inline-flex h-8 cursor-pointer select-none appearance-none flex-wrap items-center justify-center text-center text-sm leading-loose text-base-content/50": {},
+    "--tab-padding": "1rem",
+    "--tab-color": "theme(colors.base-content)",
+    "--tab-bg": "theme(colors.base-100)",
+    "--tab-border-color": "theme(colors.base-300)",
+    "color": "var(--tab-color)",
+    "paddingInlineStart": "var(--tab-padding, 1rem)",
+    "paddingInlineEnd": "var(--tab-padding, 1rem)",
+    "&:is(input[type=\"radio\"])": {
+      "@apply w-auto rounded-b-none": {},
+      "&:after": {
+        "--tw-content": "attr(aria-label)",
+        "content": "var(--tw-content)"
+      }
+    },
+    "&:checked,\n  &:is(.tab-active, [aria-selected=\"true\"])": {
+      "&+.tab-content": {
+        "@apply block": {}
+      }
+    },
+    "&:not(input):empty": {
+      "@apply cursor-default": {},
+      "gridColumnStart": "span 9999"
+    },
+    "&:is(.tab-active, [aria-selected=\"true\"]):not(.tab-disabled):not([disabled]),\n  &:is(input:checked)": {
+      "@apply border-base-content": {}
+    },
+    "&:focus": {
+      "@apply outline-none": {}
+    },
+    "&:focus-visible": {
+      "outline": "2px solid currentColor",
+      "outlineOffset": "-5px"
+    },
+    "&-disabled,\n  &[disabled]": {
+      "@apply text-base-content/20 cursor-not-allowed": {}
+    },
+    "&[disabled],\n  &[disabled]:hover": {
+      "@apply text-base-content/29 cursor-not-allowed": {}
+    }
+  },
+  ".tabs-bordered": {
+    "&>.tab": {
+      "@apply border-base-content/20": {},
+      "borderStyle": "solid",
+      "borderWidth": "0",
+      "borderBottomWidth": "calc(var(--spacing-tab-border, 1px) + 1px)"
+    }
+  },
+  ".tabs-lifted": {
+    "&>.tab:focus-visible": {
+      "borderEndEndRadius": "0",
+      "borderEndStartRadius": "0"
+    },
+    "&:has(.tab-content[class^=\"rounded-\"]) .tab:first-child:not(:is(.tab-active, [aria-selected=\"true\"])),\n  &:has(.tab-content[class*=\" rounded-\"]) .tab:first-child:not(:is(.tab-active, [aria-selected=\"true\"]))": {
+      "@apply border-b-transparent": {}
+    },
+    "&>.tab": {
+      "border": "var(--spacing-tab-border, 1px) solid transparent",
+      "borderWidth": "0 0 var(--spacing-tab-border, 1px) 0",
+      "borderStartStartRadius": "var(--tab-radius, 0.5rem)",
+      "borderStartEndRadius": "var(--tab-radius, 0.5rem)",
+      "borderBottomColor": "var(--tab-border-color)",
+      "paddingInlineStart": "var(--tab-padding, 1rem)",
+      "paddingInlineEnd": "var(--tab-padding, 1rem)",
+      "paddingTop": "var(--spacing-tab-border, 1px)",
+      "&:is(.tab-active, [aria-selected=\"true\"]):not(.tab-disabled):not([disabled]),\n    &:is(input:checked)": {
+        "backgroundColor": "var(--tab-bg)",
+        "borderWidth": "var(--spacing-tab-border, 1px) var(--spacing-tab-border, 1px) 0 var(--spacing-tab-border, 1px)",
+        "borderInlineStartColor": "var(--tab-border-color)",
+        "borderInlineEndColor": "var(--tab-border-color)",
+        "borderTopColor": "var(--tab-border-color)",
+        "paddingInlineStart": "calc(var(--tab-padding, 1rem) - var(--spacing-tab-border, 1px))",
+        "paddingInlineEnd": "calc(var(--tab-padding, 1rem) - var(--spacing-tab-border, 1px))",
+        "paddingBottom": "var(--spacing-tab-border, 1px)",
+        "paddingTop": "0",
+        "&:before": {
+          "zIndex": 1,
+          "content": "\"\"",
+          "display": "block",
+          "position": "absolute",
+          "width": "calc(100% + var(--tab-radius, 0.5rem) * 2)",
+          "height": "var(--tab-radius, 0.5rem)",
+          "bottom": "0",
+          "backgroundSize": "var(--tab-radius, 0.5rem)",
+          "backgroundPosition": "top left,\n          top right",
+          "backgroundRepeat": "no-repeat",
+          "--tab-grad": "calc(69% - var(--spacing-tab-border, 1px))",
+          "--radius-start": "radial-gradient(circle at top left,\n            transparent var(--tab-grad),\n            var(--tab-border-color) calc(var(--tab-grad) + 0.25px),\n            var(--tab-border-color) calc(var(--tab-grad) + var(--spacing-tab-border, 1px)),\n            var(--tab-bg) calc(var(--tab-grad) + var(--spacing-tab-border, 1px) + 0.25px))",
+          "--radius-end": "radial-gradient(circle at top right,\n            transparent var(--tab-grad),\n            var(--tab-border-color) calc(var(--tab-grad) + 0.25px),\n            var(--tab-border-color) calc(var(--tab-grad) + var(--spacing-tab-border, 1px)),\n            var(--tab-bg) calc(var(--tab-grad) + var(--spacing-tab-border, 1px) + 0.25px))",
+          "backgroundImage": "var(--radius-start), var(--radius-end)"
+        },
+        "&:first-child:before": {
+          "backgroundImage": "var(--radius-end)",
+          "backgroundPosition": "top right",
+          "[dir=\"rtl\"] &": {
+            "backgroundImage": "var(--radius-start)",
+            "backgroundPosition": "top left"
+          }
+        },
+        "&:last-child:before": {
+          "backgroundImage": "var(--radius-start)",
+          "backgroundPosition": "top left",
+          "[dir=\"rtl\"] &": {
+            "backgroundImage": "var(--radius-end)",
+            "backgroundPosition": "top right"
+          }
+        }
+      }
+    },
+    "&> :is(.tab-active, [aria-selected=\"true\"]):not(.tab-disabled):not([disabled])+.tabs-lifted :is(.tab-active, [aria-selected=\"true\"]):not(.tab-disabled):not([disabled]),\n  &>.tab:is(input:checked)+.tabs-lifted .tab:is(input:checked)": {
+      "&:before": {
+        "backgroundImage": "var(--radius-end)",
+        "backgroundPosition": "top right"
+      }
+    }
+  },
+  ".tabs-boxed": {
+    "@apply bg-base-200 rounded-btn p-1": {},
+    ".tab": {
+      "@apply rounded-btn": {}
+    },
+    ":is(.tab-active, [aria-selected=\"true\"]):not(.tab-disabled):not([disabled]),\n  :is(input:checked)": {
+      "@apply bg-primary text-primary-content hover:text-primary-content": {}
+    }
+  },
+  ".tab-content": {
+    "@apply col-start-1 col-end-[span_9999] row-start-2 hidden border-transparent": {},
+    "borderWidth": "var(--spacing-tab-border, 1px)",
+    "marginTop": "calc(var(--spacing-tab-border) * -1)",
+    "minWidth": "calc(100% + 1.5rem)",
+    ":checked+&:nth-child(2),\n  :is(.tab-active, [aria-selected=\"true\"])+&:nth-child(2)": {
+      "@apply rounded-ss-none": {}
+    }
+  },
+  ".tabs-md": {
+    ":where(.tab)": {
+      "@apply h-8 text-sm leading-loose": {},
+      "--tab-padding": "1rem"
+    }
+  },
+  ".tabs-lg": {
+    ":where(.tab)": {
+      "@apply h-12 text-lg leading-loose": {},
+      "--tab-padding": "1.25rem"
+    }
+  },
+  ".tabs-sm": {
+    ":where(.tab)": {
+      "@apply h-6 text-sm leading-3": {},
+      "--tab-padding": "0.75rem"
+    }
+  },
+  ".tabs-xs": {
+    ":where(.tab)": {
+      "@apply h-5 text-xs leading-3": {},
+      "--tab-padding": "0.5rem"
+    }
+  }
+};