daisyui 4.12.10 → 5.0.0-alpha.0

package/components/button/config.js

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

package/components/button/index.css

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

package/components/button/index.js

@@ -0,0 +1,172 @@
+export default {
+  ".btn": {
+    "@apply rounded-[--radius-btn] inline-flex h-12 min-h-[3rem] shrink-0 cursor-pointer select-none flex-wrap items-center justify-center px-4 text-center gap-2 font-semibold duration-200 ease-out [border-width:var(--spacing-button-border)] text-base-content outline-base-content no-underline shadow-sm bg-[var(--btn-color,var(--color-base-200))] border-[var(--btn-color,var(--color-base-200))] outline-offset-2 text-sm/none [transition-property:color,background-color,border-color,opacity,box-shadow,transform]": {},
+    "borderTopColor": "color-mix(in oklab, var(--btn-color,var(--color-base-200)) 93%, white)",
+    "borderBottomColor": "color-mix(in oklab, var(--btn-color,var(--color-base-200)) 98%, black)",
+    "@media (hover:hover)": [
+      {
+        "@apply hover:bg-[color-mix(in_oklab,var(--btn-color,var(--color-base-200))_90%,black)]": {}
+      },
+      {
+        "@apply hover:border-[color-mix(in_oklab,var(--btn-color,var(--color-base-200))_90%,black)]": {}
+      }
+    ],
+    "&:focus-visible": {
+      "@apply outline outline-2": {}
+    },
+    "&:active": {
+      "&:focus": {
+        "@apply [transform:scale(var(--btn-focus-scale,0.97))] animate-[button-pop_0s_ease-out]": {}
+      },
+      "&:hover": {
+        "@apply animate-[button-pop_0s_ease-out] [transform:scale(var(--btn-focus-scale,0.97))]": {}
+      }
+    },
+    "&:is(:disabled, [disabled], .btn-disabled)": {
+      "@apply pointer-events-none bg-neutral/20 text-base-content/20 border-transparent [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:bg-neutral/20 [@media(hover:hover)]:text-base-content/20 [@media(hover:hover)]:border-transparent": {}
+    },
+    "&:is(input[type=\"checkbox\"]),\n    &:is(input[type=\"radio\"])": {
+      "@apply w-auto appearance-none": {}
+    }
+  },
+  ".btn-square": {
+    "@apply size-12 p-0": {},
+    "@apply p-0": {},
+    "&:where(.btn-xs)": {
+      "@apply size-6": {}
+    },
+    "&:where(.btn-sm)": {
+      "@apply size-8": {}
+    },
+    "&:where(.btn-md)": {
+      "@apply size-12": {}
+    },
+    "&:where(.btn-lg)": {
+      "@apply size-16": {}
+    }
+  },
+  ".btn-circle": {
+    "@apply size-12 rounded-full p-0": {},
+    "@apply rounded-full p-0": {},
+    "&:where(.btn-xs)": {
+      "@apply size-6": {}
+    },
+    "&:where(.btn-sm)": {
+      "@apply size-8": {}
+    },
+    "&:where(.btn-md)": {
+      "@apply size-12": {}
+    },
+    "&:where(.btn-lg)": {
+      "@apply size-16": {}
+    }
+  },
+  ".btn-primary": {
+    "@apply [--btn-color:var(--color-primary)] text-primary-content outline-primary": {}
+  },
+  ".btn-secondary": {
+    "@apply [--btn-color:var(--color-secondary)] text-secondary-content outline-secondary": {}
+  },
+  ".btn-accent": {
+    "@apply [--btn-color:var(--color-accent)] text-accent-content outline-accent": {}
+  },
+  ".btn-neutral": {
+    "@apply [--btn-color:var(--color-neutral)] text-neutral-content outline-neutral": {}
+  },
+  ".btn-info": {
+    "@apply [--btn-color:var(--color-info)] text-info-content outline-info": {}
+  },
+  ".btn-success": {
+    "@apply [--btn-color:var(--color-success)] text-success-content outline-success": {}
+  },
+  ".btn-warning": {
+    "@apply [--btn-color:var(--color-warning)] text-warning-content outline-warning": {}
+  },
+  ".btn-error": {
+    "@apply [--btn-color:var(--color-error)] text-error-content outline-error": {}
+  },
+  ".btn.glass": {
+    "@apply shadow-none outline-current [@media(hover:hover)]:hover:[--glass-opacity:25%] [@media(hover:hover)]:hover:[--glass-border-opacity:15%] [&.btn-active]:[--glass-opacity:25%] [&.btn-active]:[--glass-border-opacity:15%]": {}
+  },
+  ".btn-ghost": {
+    "@apply border border-transparent bg-transparent text-current shadow-none outline-current [@media(hover:hover)]:hover:bg-base-content/20 [@media(hover:hover)]:hover:border-transparent [&.btn-active]:bg-base-content/20 [&.btn-active]:border-transparent": {}
+  },
+  ".btn-link": {
+    "@apply text-primary border-transparent bg-transparent underline shadow-none outline-current [@media(hover:hover)]:hover:border-transparent [@media(hover:hover)]:hover:bg-transparent [@media(hover:hover)]:hover:underline [&.btn-active]:border-transparent [&.btn-active]:bg-transparent [&.btn-active]:underline": {}
+  },
+  ".btn-outline": {
+    "@apply text-[var(--btn-color)] bg-transparent shadow-none [&.btn-active]:text-base-content [&.btn-active]:bg-[color-mix(in_oklab,var(--btn-color,var(--color-base-200))_90%,black)] [&.btn-active]:border-[color-mix(in_oklab,var(--btn-color,var(--color-base-200))_90%,black)]": {},
+    "&.btn-primary": {
+      "@apply [@media(hover:hover)]:hover:text-primary-content text-primary [&.btn-active]:text-primary-content": {}
+    },
+    "&.btn-secondary": {
+      "@apply [@media(hover:hover)]:hover:text-secondary-content text-secondary [&.btn-active]:text-secondary-content": {}
+    },
+    "&.btn-accent": {
+      "@apply [@media(hover:hover)]:hover:text-accent-content text-accent [&.btn-active]:text-accent-content": {}
+    },
+    "&.btn-neutral": {
+      "@apply [@media(hover:hover)]:hover:text-neutral-content text-neutral [&.btn-active]:text-neutral-content": {}
+    },
+    "&.btn-success": {
+      "@apply [@media(hover:hover)]:hover:text-success-content text-success [&.btn-active]:text-success-content": {}
+    },
+    "&.btn-info": {
+      "@apply [@media(hover:hover)]:hover:text-info-content text-info [&.btn-active]:text-info-content": {}
+    },
+    "&.btn-warning": {
+      "@apply [@media(hover:hover)]:hover:text-warning-content text-warning [&.btn-active]:text-warning-content": {}
+    },
+    "&.btn-error": {
+      "@apply [@media(hover:hover)]:hover:text-error-content text-error [&.btn-active]:text-error-content": {}
+    }
+  },
+  ".btn:is(input[type=\"checkbox\"]):after,\n.btn:is(input[type=\"radio\"]):after": {
+    "@apply content-[attr(aria-label)]": {}
+  },
+  ".btn:is(input[type=\"checkbox\"]:checked),\n.btn:is(input[type=\"radio\"]:checked)": {
+    "@apply border-primary bg-primary text-primary-content": {},
+    "@media (hover: hover)": {
+      "&:hover": {
+        "backgroundColor": "color-mix(in oklab, var(--color-primary) 90%, black)",
+        "borderColor": "color-mix(in oklab, var(--color-primary) 90%, black)"
+      }
+    },
+    "&:focus-visible": {
+      "@apply outline-primary": {}
+    }
+  },
+  "@keyframes button-pop": {
+    "0%": {
+      "transform": "scale(var(--btn-focus-scale, 0.98))"
+    },
+    "40%": {
+      "transform": "scale(1.02)"
+    },
+    "100%": {
+      "transform": "scale(1)"
+    }
+  },
+  ".btn-xs": {
+    "@apply h-6 min-h-[1.5rem] px-2": {},
+    "fontSize": "0.75rem"
+  },
+  ".btn-sm": {
+    "@apply h-8 min-h-[2rem] px-3": {},
+    "fontSize": "0.875rem"
+  },
+  ".btn-md": {
+    "@apply h-12 min-h-[3rem] px-4": {},
+    "fontSize": "0.875rem"
+  },
+  ".btn-lg": {
+    "@apply h-16 min-h-[4rem] px-6": {},
+    "fontSize": "1.125rem"
+  },
+  ".btn-wide": {
+    "@apply w-64": {}
+  },
+  ".btn-block": {
+    "@apply w-full": {}
+  }
+};

package/components/checkbox/config.js

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

package/components/checkbox/index.css

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

package/components/checkbox/index.js

@@ -0,0 +1,125 @@
+export default {
+  ".checkbox": {
+    "@apply border-base-content/20 rounded-[--radius-btn] size-6 cursor-pointer appearance-none border shrink-0 text-base-content relative p-1": {},
+    "boxShadow": "0 1px oklch(0% 0 0 / 0.1) inset",
+    "transition": "background-color .2s, box-shadow .2s",
+    "&:before": {
+      "@apply size-full block content-[''] bg-current opacity-0 rotate-45": {},
+      "transition": "clip-path .3s, opacity .1s, rotate .3s, translate .3s",
+      "transitionDelay": ".1s",
+      "clipPath": "polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%)",
+      "boxShadow": "0px 3px 0 0px oklch(100% 0 0 / 0.1) inset"
+    },
+    "&:focus-visible": {
+      "@apply outline-2 outline-offset-2 outline-current": {}
+    },
+    "&:checked,\n  &[aria-checked=\"true\"]": {
+      "boxShadow": "0 8px 0 -4px oklch(100% 0 0 / 0.1) inset, 0 1px oklch(0% 0 0 / 0.1)",
+      "&:before": {
+        "@apply opacity-100": {},
+        "clipPath": "polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%)"
+      }
+    },
+    "&:indeterminate": {
+      "&:before": {
+        "@apply rotate-0 opacity-100 translate-y-[-35%]": {},
+        "clipPath": "polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%)"
+      }
+    }
+  },
+  ".checkbox-primary": {
+    "@apply border-primary text-primary-content": {},
+    "&:focus-visible": {
+      "@apply outline-primary": {}
+    },
+    "&:checked": {
+      "@apply bg-primary": {}
+    }
+  },
+  ".checkbox-secondary": {
+    "@apply border-secondary text-secondary-content": {},
+    "&:focus-visible": {
+      "@apply outline-secondary": {}
+    },
+    "&:checked": {
+      "@apply bg-secondary": {}
+    }
+  },
+  ".checkbox-accent": {
+    "@apply border-accent text-accent-content": {},
+    "&:focus-visible": {
+      "@apply outline-accent": {}
+    },
+    "&:checked": {
+      "@apply bg-accent": {}
+    }
+  },
+  ".checkbox-success": {
+    "@apply border-success text-success-content": {},
+    "&:focus-visible": {
+      "@apply outline-success": {}
+    },
+    "&:checked": {
+      "@apply bg-success": {}
+    }
+  },
+  ".checkbox-warning": {
+    "@apply border-warning text-warning-content": {},
+    "&:focus-visible": {
+      "@apply outline-warning": {}
+    },
+    "&:checked": {
+      "@apply bg-warning": {}
+    }
+  },
+  ".checkbox-info": {
+    "@apply border-info text-info-content": {},
+    "&:focus-visible": {
+      "@apply outline-info": {}
+    },
+    "&:checked": {
+      "@apply bg-info": {}
+    }
+  },
+  ".checkbox-error": {
+    "@apply border-error text-error-content": {},
+    "&:focus-visible": {
+      "@apply outline-error": {}
+    },
+    "&:checked": {
+      "@apply bg-error": {}
+    }
+  },
+  ".checkbox:disabled": {
+    "@apply cursor-not-allowed opacity-20": {}
+  },
+  ".checkbox-xs": {
+    "@apply p-[.1875rem]": {},
+    "&[type=\"checkbox\"]": {
+      "@apply size-4": {},
+      "&:not(:indeterminate):before": {
+        "clipPath": "polygon(10% 100%, 10% 70%, 40% 70%, 40% 70%, 70% 70%, 70% 100%)"
+      },
+      "&:checked,\n        &[aria-checked=\"true\"]": {
+        "&:before": {
+          "clipPath": "polygon(10% 100%, 10% 70%, 40% 70%, 40% 0%, 70% 0%, 70% 100%)"
+        }
+      }
+    }
+  },
+  ".checkbox-sm": {
+    "&[type=\"checkbox\"]": {
+      "@apply size-5": {}
+    }
+  },
+  ".checkbox-md": {
+    "&[type=\"checkbox\"]": {
+      "@apply size-6": {}
+    }
+  },
+  ".checkbox-lg": {
+    "&[type=\"checkbox\"]": {
+      "@apply size-8": {}
+    }
+  }
+};

package/components/input/config.js

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

package/components/input/index.css

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

package/components/input/index.js

@@ -0,0 +1,128 @@
+export default {
+  ".input": {
+    "@apply shrink appearance-none h-12 px-4 text-sm leading-loose bg-base-100 rounded-btn border border-transparent text-base": {},
+    "input": {
+      "@apply bg-transparent border-none": {},
+      "&:focus": {
+        "@apply outline-none": {}
+      }
+    },
+    "&:focus": {
+      "@apply border-base-content/20 outline-base-content/10 outline outline-4": {}
+    },
+    "&:has(> input[disabled]),\n    &:is(:disabled, [disabled], .btn-disabled)": {
+      "@apply border-base-200 bg-base-200 placeholder-base-content text-base-content/40 cursor-not-allowed placeholder-base-content/20": {}
+    },
+    "&:has(> input[disabled])>input[disabled]": {
+      "@apply cursor-not-allowed": {}
+    },
+    "&::-webkit-date-and-time-value": {
+      "textAlign": "inherit"
+    },
+    "&[type=\"number\"]": {
+      "&::-webkit-inner-spin-button": {
+        "@apply -my-4 -me-4": {}
+      }
+    },
+    "&[list]": {
+      "&::-webkit-calendar-picker-indicator": {
+        "lineHeight": "1em"
+      }
+    },
+    "&.input-bordered": {
+      "@apply border-base-content/20": {},
+      "boxShadow": "0 1px oklch(0% 0 0 / 0.1) inset, 0 -1px oklch(100% 0 0 / 0.1) inset",
+      "&:focus": {
+        "boxShadow": "0 1px oklch(0% 0 0 / 0.1)"
+      }
+    },
+    "&.input-ghost": {
+      "@apply bg-base-100/5 shadow-none": {},
+      "&:focus,\n        &:focus-within": {
+        "@apply text-base-content bg-base-100": {},
+        "boxShadow": "none"
+      }
+    },
+    "&.input-primary": {
+      "@apply border-primary": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-primary) 2%, transparent)",
+      "&:focus,\n        &:focus-within": {
+        "@apply outline-primary/30 border-primary": {}
+      }
+    },
+    "&.input-secondary": {
+      "@apply border-secondary": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-secondary) 2%, transparent)",
+      "&:focus,\n        &:focus-within": {
+        "@apply outline-secondary/30 border-secondary": {}
+      }
+    },
+    "&.input-accent": {
+      "@apply border-accent": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-accent) 2%, transparent)",
+      "&:focus,\n        &:focus-within": {
+        "@apply outline-accent/30 border-accent": {}
+      }
+    },
+    "&.input-info": {
+      "@apply border-info": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-info) 2%, transparent)",
+      "&:focus,\n        &:focus-within": {
+        "@apply outline-info/30 border-info": {}
+      }
+    },
+    "&.input-success": {
+      "@apply border-success": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-success) 2%, transparent)",
+      "&:focus,\n        &:focus-within": {
+        "@apply outline-success/30 border-success": {}
+      }
+    },
+    "&.input-warning": {
+      "@apply border-warning": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-warning) 2%, transparent)",
+      "&:focus,\n        &:focus-within": {
+        "@apply outline-warning/30 border-warning": {}
+      }
+    },
+    "&.input-error": {
+      "@apply border-error": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-error) 2%, transparent)",
+      "&:focus,\n        &:focus-within": {
+        "@apply outline-error/30 border-error": {}
+      }
+    },
+    "&.input-xs": {
+      "@apply h-6 px-2 text-xs leading-relaxed": {},
+      "&[type=\"number\"]": {
+        "&::-webkit-inner-spin-button": {
+          "@apply -my-1 -me-0": {}
+        }
+      }
+    },
+    "&.input-sm": {
+      "@apply h-8 px-3 text-sm leading-8": {},
+      "&[type=\"number\"]": {
+        "&::-webkit-inner-spin-button": {
+          "@apply my-0 -me-0": {}
+        }
+      }
+    },
+    "&.input-md": {
+      "@apply h-12 px-4 text-sm leading-loose": {},
+      "&[type=\"number\"]": {
+        "&::-webkit-inner-spin-button": {
+          "@apply -my-4 -me-4": {}
+        }
+      }
+    },
+    "&.input-lg": {
+      "@apply h-16 px-6 text-lg leading-loose": {},
+      "&[type=\"number\"]": {
+        "&::-webkit-inner-spin-button": {
+          "@apply -my-6 -me-6": {}
+        }
+      }
+    }
+  }
+};

package/components/radio/config.js

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

package/components/radio/index.css

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

package/components/radio/index.js

@@ -0,0 +1,73 @@
+export default {
+  ".radio": {
+    "@apply border-base-content/20 size-6 cursor-pointer appearance-none rounded-full border shrink-0 text-base-content relative p-1": {},
+    "boxShadow": "0 1px oklch(0% 0 0 / 0.1) inset",
+    "&:before": {
+      "@apply rounded-full size-full block": {},
+      "content": "\"\""
+    },
+    "&:focus-visible": {
+      "@apply outline-2 outline-offset-2 outline-current": {}
+    },
+    "&:checked,\n  &[aria-checked=\"true\"]": {
+      "animation": "radiomark var(--animation-input, 0.2s) ease-out",
+      "@apply bg-base-100 border-current": {},
+      "&:before": {
+        "@apply bg-current": {},
+        "boxShadow": "0 -1px oklch(0% 0 0 / 0.1) inset,\n        0 8px 0 -4px oklch(100% 0 0 / 0.1) inset, 0 1px oklch(0% 0 0 / 0.1)"
+      }
+    }
+  },
+  ".radio-primary": {
+    "@apply border-current text-primary": {}
+  },
+  ".radio-secondary": {
+    "@apply border-current text-secondary": {}
+  },
+  ".radio-accent": {
+    "@apply border-current text-accent": {}
+  },
+  ".radio-success": {
+    "@apply border-current text-success": {}
+  },
+  ".radio-warning": {
+    "@apply border-current text-warning": {}
+  },
+  ".radio-info": {
+    "@apply border-current text-info": {}
+  },
+  ".radio-error": {
+    "@apply border-current text-error": {}
+  },
+  ".radio:disabled": {
+    "@apply cursor-not-allowed opacity-20": {}
+  },
+  "@keyframes radiomark": {
+    "0%": {
+      "padding": "5px"
+    },
+    "50%": {
+      "padding": "3px"
+    }
+  },
+  ".radio-xs": {
+    "&:is([type=\"radio\"])": {
+      "@apply size-4": {}
+    }
+  },
+  ".radio-sm": {
+    "&:is([type=\"radio\"])": {
+      "@apply size-5": {}
+    }
+  },
+  ".radio-md": {
+    "&:is([type=\"radio\"])": {
+      "@apply size-6": {}
+    }
+  },
+  ".radio-lg": {
+    "&:is([type=\"radio\"])": {
+      "@apply size-8": {}
+    }
+  }
+};

package/components/range/config.js

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

package/components/range/index.css

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