daisyui 5.0.0-alpha.2 → 5.0.0-alpha.21

package/components/toggle.css

@@ -1,143 +1 @@
-.toggle {
-    display: inline-flex;
-    height: var(--spacing-6, 1.5rem);
-    width: var(--spacing-12, 3rem);
-    flex-shrink: 0;
-    cursor: pointer;
-    appearance: none;
-    border-radius: var(--radius-badge);
-    border-radius: var(--radius-badge, 1.9rem);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: currentColor;
-    padding: .1875rem;
-    vertical-align: middle;
-    color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 50%, transparent);
-    box-shadow: 0 1px color-mix(in oklab, currentColor, transparent 90%) inset;
-    transition: color .3s;
-    &:before {
-      display: block;
-      height: 100%;
-      flex-grow: 0;
-      content: "";
-      transition: flex-grow 0.2s;
-    }
-    &:after {
-      position: relative;
-      inset-inline-start: var(--spacing-0, 0px);
-      display: block;
-      aspect-ratio: 1 / 1;
-      height: 100%;
-      --tw-translate-x: var(--spacing-0, 0px);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-      border-radius: calc(var(--radius-badge) - 3px);
-      background-color: currentColor;
-      content: "";
-      transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s;
-      box-shadow: 0 -1px oklch(0% 0 0 / 0.1) inset, 0 8px 0 -4px oklch(100% 0 0 / 0.1) inset, 0 1px color-mix(in oklab, currentColor, transparent 90%);
-    }
-    &:focus-visible {
-      outline-style: var(--tw-outline-style);
-      outline-width: 1px;
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-      outline-offset: 2px;
-      outline-color: currentColor;
-    }
-    &:checked, &[aria-checked="true"] {
-      background-color: var(--color-base-100, oklch(100% 0 0));
-      color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
-      &:before {
-        flex-grow: 1;
-      }
-      &:after {
-        background-color: currentColor;
-        @starting-style {
-          opacity: 0;
-        }
-      }
-    }
-    &:indeterminate {
-      &:before {
-        flex-grow: 0;
-      }
-      &:after {
-        inset-inline-start: calc(1/2 * 100%);
-        --tw-translate-x: calc(calc(1/2 * 100%) * -1);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
-      }
-    }
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 30%;
-      &:after {
-        border-style: var(--tw-border-style);
-        border-width: 1px;
-        border-color: currentColor;
-        background-color: transparent;
-      }
-    }
-  }
-  .toggle-primary {
-    &:checked, &[aria-checked="true"] {
-      color: var(--color-primary, oklch(49.12% 0.3096 275.75));
-    }
-  }
-  .toggle-secondary {
-    &:checked, &[aria-checked="true"] {
-      color: var(--color-secondary, oklch(69.71% 0.329 342.55));
-    }
-  }
-  .toggle-accent {
-    &:checked, &[aria-checked="true"] {
-      color: var(--color-accent, oklch(76.76% 0.184 183.61));
-    }
-  }
-  .toggle-success {
-    &:checked, &[aria-checked="true"] {
-      color: var(--color-success, oklch(64.8% 0.15 160));
-    }
-  }
-  .toggle-warning {
-    &:checked, &[aria-checked="true"] {
-      color: var(--color-warning, oklch(84.71% 0.199 83.87));
-    }
-  }
-  .toggle-info {
-    &:checked, &[aria-checked="true"] {
-      color: var(--color-info, oklch(72.06% 0.191 231.6));
-    }
-  }
-  .toggle-error {
-    &:checked, &[aria-checked="true"] {
-      color: var(--color-error, oklch(71.76% 0.221 22.18));
-    }
-  }
-  .toggle-xs {
-    &:is([type="checkbox"]) {
-      height: var(--spacing-4, 1rem);
-      width: var(--spacing-6, 1.5rem);
-      padding: .0625rem;
-    }
-  }
-  .toggle-sm {
-    &:is([type="checkbox"]) {
-      height: var(--spacing-5, 1.25rem);
-      width: var(--spacing-8, 2rem);
-      padding: .125rem;
-    }
-  }
-  .toggle-md {
-    &:is([type="checkbox"]) {
-      height: var(--spacing-6, 1.5rem);
-      width: var(--spacing-12, 3rem);
-      padding: .1875rem;
-    }
-  }
-  .toggle-lg {
-    &:is([type="checkbox"]) {
-      height: var(--spacing-8, 2rem);
-      width: var(--spacing-16, 4rem);
-      padding: .25rem;
-    }
-  }
+/*! 🌼 daisyUI 5.0.0-alpha.21 – MIT License */ .toggle{height:var(--spacing-6,1.5rem);width:var(--spacing-12,3rem);cursor:pointer;appearance:none;border-radius:var(--radius-badge);border-radius:var(--radius-badge,var(--radius-badge));border-style:var(--tw-border-style);vertical-align:middle;color:color-mix(in srgb,var(--color-base-content,var(--color-base-content))50%,transparent);box-shadow:0 1px color-mix(in oklab,currentColor,transparent 90%)inset;border-width:1px;border-color:currentColor;flex-shrink:0;padding:.1875rem;transition:color .3s;display:inline-flex;&:before{content:"";flex-grow:0;height:100%;transition:flex-grow .2s;display:block}&:after{aspect-ratio:1;--tw-translate-x:var(--spacing-0,0px);translate:var(--tw-translate-x)var(--tw-translate-y);border-radius:calc(var(--radius-badge) - 3px);content:"";box-shadow:0 -1px oklch(0% 0 0/.1) inset,0 8px 0 -4px oklch(100% 0 0/.1) inset,0 1px color-mix(in oklab,currentColor,transparent 90%);background-color:currentColor;height:100%;transition:background-color .1s,translate .2s,inset-inline-start .2s;display:block;position:relative;inset-inline-start:var(--spacing-0,0px)}&:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px;outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:currentColor}&:checked,&[aria-checked=true]{background-color:var(--color-base-100,var(--color-base-100));color:var(--color-base-content,var(--color-base-content));&:before{flex-grow:1}&:after{background-color:currentColor;@starting-style{&{opacity:0}}}}&:indeterminate{&:before{flex-grow:0}&:after{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y);inset-inline-start:50%}}&:disabled{cursor:not-allowed;opacity:.3;&:after{border-style:var(--tw-border-style);background-color:#0000;border-width:1px;border-color:currentColor}}}.toggle-primary{&:checked,&[aria-checked=true]{color:var(--color-primary,var(--color-primary))}}.toggle-secondary{&:checked,&[aria-checked=true]{color:var(--color-secondary,var(--color-secondary))}}.toggle-accent{&:checked,&[aria-checked=true]{color:var(--color-accent,var(--color-accent))}}.toggle-success{&:checked,&[aria-checked=true]{color:var(--color-success,var(--color-success))}}.toggle-warning{&:checked,&[aria-checked=true]{color:var(--color-warning,var(--color-warning))}}.toggle-info{&:checked,&[aria-checked=true]{color:var(--color-info,var(--color-info))}}.toggle-error{&:checked,&[aria-checked=true]{color:var(--color-error,var(--color-error))}}.toggle-xs{&[type=checkbox]{height:var(--spacing-4,1rem);width:var(--spacing-6,1.5rem);padding:.0625rem}}.toggle-sm{&[type=checkbox]{height:var(--spacing-5,1.25rem);width:var(--spacing-8,2rem);padding:.125rem}}.toggle-md{&[type=checkbox]{height:var(--spacing-6,1.5rem);width:var(--spacing-12,3rem);padding:.1875rem}}.toggle-lg{&[type=checkbox]{height:var(--spacing-8,2rem);width:var(--spacing-16,4rem);padding:.25rem}}

package/components/tooltip/class.json

@@ -0,0 +1,17 @@
+[
+  "tooltip",
+  "4",
+  "2",
+  "tooltip-top",
+  "tooltip-bottom",
+  "tooltip-left",
+  "tooltip-right",
+  "tooltip-open",
+  "tooltip-primary",
+  "tooltip-secondary",
+  "tooltip-accent",
+  "tooltip-info",
+  "tooltip-success",
+  "tooltip-warning",
+  "tooltip-error"
+]

package/components/tooltip/index.js

@@ -0,0 +1,4 @@
+import tooltip from './object.js';
+export default ({ addComponents }) => {
+	addComponents({...tooltip})
+}

package/components/tooltip/object.js

@@ -0,0 +1 @@
+export default {".tooltip":{"@apply relative inline-block":{},"--tooltip-color":"var(--color-neutral)","--tooltip-tail":"0.1875rem","--tooltip-text-color":"var(--color-neutral-content)","--tooltip-offset":"calc(100% + 1px + var(--tooltip-tail, 0px))","--tooltip-tail-offset":"calc(100% + 0.0625rem - var(--tooltip-tail))","&:before":{"@apply absolute max-w-xs rounded px-2 py-1 text-sm whitespace-normal opacity-0 text-center":{},"transition":"opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms","backgroundColor":"var(--tooltip-color)","color":"var(--tooltip-text-color)","width":"max-content","pointerEvents":"none","zIndex":1,"content":"var(--tw-content)","--tw-content":"attr(data-tip)"},"&:after":{"@apply absolute opacity-0":{},"transition":"opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms","content":"\"\"","borderStyle":"solid","borderWidth":"var(--tooltip-tail, 0)","width":"0","height":"0","display":"block","position":"absolute"},"&.tooltip-open,\n  &:hover,\n  &:has(:focus-visible)":{"&:before,\n    &:after":{"@apply opacity-100":{},"transition":"opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s"}}},".tooltip,\n.tooltip-top":{"&:before":{"transform":"translateX(-50%)","top":"auto","left":"50%","right":"auto","bottom":"var(--tooltip-offset)"},"&:after":{"transform":"translateX(-50%)","borderColor":"var(--tooltip-color) transparent transparent transparent","top":"auto","left":"50%","right":"auto","bottom":"var(--tooltip-tail-offset)"}},".tooltip-bottom":{"&:before":{"transform":"translateX(-50%)","top":"var(--tooltip-offset)","left":"50%","right":"auto","bottom":"auto"},"&:after":{"transform":"translateX(-50%)","borderColor":"transparent transparent var(--tooltip-color) transparent","top":"var(--tooltip-tail-offset)","left":"50%","right":"auto","bottom":"auto"}},".tooltip-left":{"&:before":{"transform":"translateY(-50%)","top":"50%","left":"auto","right":"var(--tooltip-offset)","bottom":"auto"},"&:after":{"transform":"translateY(-50%)","borderColor":"transparent transparent transparent var(--tooltip-color)","top":"50%","left":"auto","right":"calc(var(--tooltip-tail-offset) + 0.0625rem)","bottom":"auto"}},".tooltip-right":{"&:before":{"transform":"translateY(-50%)","top":"50%","left":"var(--tooltip-offset)","right":"auto","bottom":"auto"},"&:after":{"transform":"translateY(-50%)","borderColor":"transparent var(--tooltip-color) transparent transparent","top":"50%","left":"calc(var(--tooltip-tail-offset) + 0.0625rem)","right":"auto","bottom":"auto"}},".tooltip:not([data-tip]):hover:before,\n.tooltip:not([data-tip]):hover:after":{"visibility":"hidden","opacity":0},".tooltip-primary":{"--tooltip-color":"var(--color-primary)","--tooltip-text-color":"var(--color-primary-content)"},".tooltip-secondary":{"--tooltip-color":"var(--color-secondary)","--tooltip-text-color":"var(--color-secondary-content)"},".tooltip-accent":{"--tooltip-color":"var(--color-accent)","--tooltip-text-color":"var(--color-accent-content)"},".tooltip-info":{"--tooltip-color":"var(--color-info)","--tooltip-text-color":"var(--color-info-content)"},".tooltip-success":{"--tooltip-color":"var(--color-success)","--tooltip-text-color":"var(--color-success-content)"},".tooltip-warning":{"--tooltip-color":"var(--color-warning)","--tooltip-text-color":"var(--color-warning-content)"},".tooltip-error":{"--tooltip-color":"var(--color-error)","--tooltip-text-color":"var(--color-error-content)"}};

package/components/tooltip.css

@@ -0,0 +1 @@
+/*! 🌼 daisyUI 5.0.0-alpha.21 – MIT License */ .tooltip{--tooltip-color:var(--color-neutral);--tooltip-tail:.1875rem;--tooltip-text-color:var(--color-neutral-content);--tooltip-offset:calc(100% + 1px + var(--tooltip-tail,0px));--tooltip-tail-offset:calc(100% + .0625rem - var(--tooltip-tail));display:inline-block;position:relative;&:before{max-width:var(--width-xs,20rem);white-space:normal;border-radius:var(--radius,.25rem);padding-top:var(--spacing-1,.25rem);padding-bottom:var(--spacing-1,.25rem);padding-left:var(--spacing-2,.5rem);padding-right:var(--spacing-2,.5rem);text-align:center;font-size:var(--font-size-sm,.875rem);line-height:var(--tw-leading,var(--font-size-sm--line-height,1.25rem));opacity:0;background-color:var(--tooltip-color);color:var(--tooltip-text-color);pointer-events:none;z-index:1;content:var(--tw-content);--tw-content:attr(data-tip);width:max-content;transition:opacity .2s cubic-bezier(.4,0,.2,1) 75ms;position:absolute}&:after{opacity:0;content:"";border-style:solid;border-width:var(--tooltip-tail,0);width:0;height:0;transition:opacity .2s cubic-bezier(.4,0,.2,1) 75ms;display:block;position:absolute}}.tooltip,.tooltip-top{&:before{top:auto;left:50%;right:auto;bottom:var(--tooltip-offset);transform:translate(-50%)}}.tooltip-bottom{&:before{top:var(--tooltip-offset);bottom:auto;left:50%;right:auto;transform:translate(-50%)}}.tooltip-left{&:before{top:50%;left:auto;right:var(--tooltip-offset);bottom:auto;transform:translateY(-50%)}}.tooltip-right{&:before{top:50%;left:var(--tooltip-offset);bottom:auto;right:auto;transform:translateY(-50%)}}.tooltip{&.tooltip-open,&:hover,&:has(:focus-visible){&:before,&:after{opacity:1;transition:opacity .2s cubic-bezier(.4,0,.2,1)}}}.tooltip:not([data-tip]):hover:before,.tooltip:not([data-tip]):hover:after{visibility:hidden;opacity:0}.tooltip,.tooltip-top{&:after{border-color:var(--tooltip-color)transparent transparent transparent;top:auto;left:50%;right:auto;bottom:var(--tooltip-tail-offset);transform:translate(-50%)}}.tooltip-bottom{&:after{border-color:transparent transparent var(--tooltip-color)transparent;top:var(--tooltip-tail-offset);bottom:auto;left:50%;right:auto;transform:translate(-50%)}}.tooltip-left{&:after{border-color:transparent transparent transparent var(--tooltip-color);top:50%;left:auto;right:calc(var(--tooltip-tail-offset) + .0625rem);bottom:auto;transform:translateY(-50%)}}.tooltip-right{&:after{border-color:transparent var(--tooltip-color)transparent transparent;top:50%;left:calc(var(--tooltip-tail-offset) + .0625rem);bottom:auto;right:auto;transform:translateY(-50%)}}.tooltip-primary{--tooltip-color:var(--color-primary);--tooltip-text-color:var(--color-primary-content)}.tooltip-secondary{--tooltip-color:var(--color-secondary);--tooltip-text-color:var(--color-secondary-content)}.tooltip-accent{--tooltip-color:var(--color-accent);--tooltip-text-color:var(--color-accent-content)}.tooltip-info{--tooltip-color:var(--color-info);--tooltip-text-color:var(--color-info-content)}.tooltip-success{--tooltip-color:var(--color-success);--tooltip-text-color:var(--color-success-content)}.tooltip-warning{--tooltip-color:var(--color-warning);--tooltip-text-color:var(--color-warning-content)}.tooltip-error{--tooltip-color:var(--color-error);--tooltip-text-color:var(--color-error-content)}