daisyui 4.12.10 → 5.0.0-alpha.2

package/components/checkbox/index.js

@@ -0,0 +1,108 @@
+export default {
+  ".checkbox": {
+    "@apply border-base-content/20 text-base-content relative shrink-0 size-6 cursor-pointer appearance-none rounded-[var(--radius-btn)] border p-1 align-middle": {},
+    "boxShadow": "0 1px oklch(0% 0 0 / 0.1) inset",
+    "transition": "background-color 0.2s,\n    box-shadow 0.2s",
+    "&:before": {
+      "@apply block size-full rotate-45 bg-current opacity-0 content-['']": {},
+      "transition": "clip-path 0.3s,\n      opacity 0.1s,\n      rotate 0.3s,\n      translate 0.3s",
+      "transitionDelay": "0.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,\n      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 translate-y-[-35%] rotate-0 opacity-100": {},
+        "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 size-4 p-0.5": {}
+  },
+  ".checkbox-sm": {
+    "@apply size-5": {}
+  },
+  ".checkbox-md": {
+    "@apply size-6": {}
+  },
+  ".checkbox-lg": {
+    "@apply size-8": {}
+  }
+};

package/components/checkbox.css

@@ -0,0 +1,144 @@
+.checkbox {
+    position: relative;
+    width: var(--spacing-6, 1.5rem);
+    height: var(--spacing-6, 1.5rem);
+    flex-shrink: 0;
+    cursor: pointer;
+    appearance: none;
+    border-radius: var(--radius-btn);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+    padding: var(--spacing-1, 0.25rem);
+    vertical-align: middle;
+    color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+    box-shadow: 0 1px oklch(0% 0 0 / 0.1) inset;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    &:before {
+      display: block;
+      width: 100%;
+      height: 100%;
+      rotate: 45deg;
+      background-color: currentColor;
+      opacity: 0%;
+      --tw-content: '';
+      content: var(--tw-content);
+      transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s;
+      transition-delay: 0.1s;
+      clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
+      box-shadow: 0px 3px 0 0px oklch(100% 0 0 / 0.1) inset;
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: currentColor;
+    }
+    &:checked, &[aria-checked="true"] {
+      box-shadow: 0 8px 0 -4px oklch(100% 0 0 / 0.1) inset, 0 1px oklch(0% 0 0 / 0.1);
+      &:before {
+        opacity: 100%;
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
+      }
+    }
+    &:indeterminate {
+      &:before {
+        --tw-translate-y: -35%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+        rotate: 0deg;
+        opacity: 100%;
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
+      }
+    }
+  }
+  .checkbox-primary {
+    border-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+    color: var(--color-primary-content, oklch(89.824% 0.06192 275.75));
+    &:focus-visible {
+      outline-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+    }
+    &:checked {
+      background-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+    }
+  }
+  .checkbox-secondary {
+    border-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
+    color: var(--color-secondary-content, oklch(98.71% 0.0106 342.55));
+    &:focus-visible {
+      outline-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
+    }
+    &:checked {
+      background-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
+    }
+  }
+  .checkbox-accent {
+    border-color: var(--color-accent, oklch(76.76% 0.184 183.61));
+    color: var(--color-accent-content, oklch(15.352% 0.0368 183.61));
+    &:focus-visible {
+      outline-color: var(--color-accent, oklch(76.76% 0.184 183.61));
+    }
+    &:checked {
+      background-color: var(--color-accent, oklch(76.76% 0.184 183.61));
+    }
+  }
+  .checkbox-success {
+    border-color: var(--color-success, oklch(64.8% 0.15 160));
+    color: var(--color-success-content, oklch(0% 0 0));
+    &:focus-visible {
+      outline-color: var(--color-success, oklch(64.8% 0.15 160));
+    }
+    &:checked {
+      background-color: var(--color-success, oklch(64.8% 0.15 160));
+    }
+  }
+  .checkbox-warning {
+    border-color: var(--color-warning, oklch(84.71% 0.199 83.87));
+    color: var(--color-warning-content, oklch(0% 0 0));
+    &:focus-visible {
+      outline-color: var(--color-warning, oklch(84.71% 0.199 83.87));
+    }
+    &:checked {
+      background-color: var(--color-warning, oklch(84.71% 0.199 83.87));
+    }
+  }
+  .checkbox-info {
+    border-color: var(--color-info, oklch(72.06% 0.191 231.6));
+    color: var(--color-info-content, oklch(0% 0 0));
+    &:focus-visible {
+      outline-color: var(--color-info, oklch(72.06% 0.191 231.6));
+    }
+    &:checked {
+      background-color: var(--color-info, oklch(72.06% 0.191 231.6));
+    }
+  }
+  .checkbox-error {
+    border-color: var(--color-error, oklch(71.76% 0.221 22.18));
+    color: var(--color-error-content, oklch(0% 0 0));
+    &:focus-visible {
+      outline-color: var(--color-error, oklch(71.76% 0.221 22.18));
+    }
+    &:checked {
+      background-color: var(--color-error, oklch(71.76% 0.221 22.18));
+    }
+  }
+  .checkbox:disabled {
+    cursor: not-allowed;
+    opacity: 20%;
+  }
+  .checkbox-xs {
+    width: var(--spacing-4, 1rem);
+    height: var(--spacing-4, 1rem);
+    padding: var(--spacing-0_5, 0.125rem);
+  }
+  .checkbox-sm {
+    width: var(--spacing-5, 1.25rem);
+    height: var(--spacing-5, 1.25rem);
+  }
+  .checkbox-md {
+    width: var(--spacing-6, 1.5rem);
+    height: var(--spacing-6, 1.5rem);
+  }
+  .checkbox-lg {
+    width: var(--spacing-8, 2rem);
+    height: var(--spacing-8, 2rem);
+  }

package/components/input/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/input/index.css

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

package/components/input/index.js

@@ -0,0 +1,128 @@
+export default {
+  ".input": {
+    "@apply bg-base-100 rounded-btn h-10 shrink appearance-none border border-transparent px-4 text-base text-sm leading-loose align-middle": {},
+    "input": {
+      "@apply border-none bg-transparent": {},
+      "&:focus": {
+        "@apply outline-none": {}
+      }
+    },
+    "&:focus,\n  &:focus-within": {
+      "@apply border-base-content/20 outline-base-content/20 outline outline-2 outline-offset-2": {}
+    },
+    "&:has(> input[disabled]),\n  &:is(:disabled, [disabled])": {
+      "@apply border-base-200 bg-base-200 placeholder-base-content text-base-content/40 placeholder-base-content/20 cursor-not-allowed": {}
+    },
+    "&: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,\n      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 border-primary": {}
+      }
+    },
+    "&.input-secondary": {
+      "@apply border-secondary": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-secondary) 2%, transparent)",
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-secondary border-secondary": {}
+      }
+    },
+    "&.input-accent": {
+      "@apply border-accent": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-accent) 2%, transparent)",
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-accent border-accent": {}
+      }
+    },
+    "&.input-info": {
+      "@apply border-info": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-info) 2%, transparent)",
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-info border-info": {}
+      }
+    },
+    "&.input-success": {
+      "@apply border-success": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-success) 2%, transparent)",
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-success border-success": {}
+      }
+    },
+    "&.input-warning": {
+      "@apply border-warning": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-warning) 2%, transparent)",
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-warning border-warning": {}
+      }
+    },
+    "&.input-error": {
+      "@apply border-error": {},
+      "backgroundColor": "color-mix(in oklab, var(--color-error) 2%, transparent)",
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-error 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-10 px-4 text-sm leading-loose": {},
+      "&[type=\"number\"]": {
+        "&::-webkit-inner-spin-button": {
+          "@apply -my-4 -me-4": {}
+        }
+      }
+    },
+    "&.input-lg": {
+      "@apply h-14 px-6 text-lg leading-loose": {},
+      "&[type=\"number\"]": {
+        "&::-webkit-inner-spin-button": {
+          "@apply -my-6 -me-6": {}
+        }
+      }
+    }
+  }
+};

package/components/input.css

@@ -0,0 +1,204 @@
+.input {
+    height: var(--spacing-10, 2.5rem);
+    flex-shrink: 1;
+    appearance: none;
+    border-radius: var(--radius-btn, 0.5rem);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: transparent;
+    background-color: var(--color-base-100, oklch(100% 0 0));
+    padding-left: var(--spacing-4, 1rem);
+    padding-right: var(--spacing-4, 1rem);
+    vertical-align: middle;
+    font-size: var(--font-size-base, 1rem);
+    line-height: var(--tw-leading, var(--font-size-base--line-height, 1.5rem));
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
+    --tw-leading: var(--line-height-loose, 2);
+    line-height: var(--line-height-loose, 2);
+    input {
+      --tw-border-style: none;
+      border-style: none;
+      background-color: transparent;
+      &:focus {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+    &:focus, &:focus-within {
+      border-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+    }
+    &:has(> input[disabled]), &:is(:disabled, [disabled]) {
+      cursor: not-allowed;
+      border-color: var(--color-base-200, oklch(96.1151% 0 0));
+      background-color: var(--color-base-200, oklch(96.1151% 0 0));
+      color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 40%, transparent);
+      &::placeholder {
+        color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+      }
+      &::placeholder {
+        color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+      }
+    }
+    &:has(> input[disabled])>input[disabled] {
+      cursor: not-allowed;
+    }
+    &::-webkit-date-and-time-value {
+      text-align: inherit;
+    }
+    &[type="number"] {
+      &::-webkit-inner-spin-button {
+        margin-top: calc(var(--spacing-4, 1rem) * -1);
+        margin-bottom: calc(var(--spacing-4, 1rem) * -1);
+        margin-inline-end: calc(var(--spacing-4, 1rem) * -1);
+      }
+    }
+    &[list] {
+      &::-webkit-calendar-picker-indicator {
+        line-height: 1em;
+      }
+    }
+    &.input-bordered {
+      border-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+      box-shadow: 0 1px oklch(0% 0 0 / 0.1) inset, 0 -1px oklch(100% 0 0 / 0.1) inset;
+      &:focus {
+        box-shadow: 0 1px oklch(0% 0 0 / 0.1);
+      }
+    }
+    &.input-ghost {
+      background-color: color-mix(in srgb, var(--color-base-100, oklch(100% 0 0)) 5%, transparent);
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      &:focus, &:focus-within {
+        background-color: var(--color-base-100, oklch(100% 0 0));
+        color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+        box-shadow: none;
+      }
+    }
+    &.input-primary {
+      border-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+      background-color: color-mix(in oklab, var(--color-primary) 2%, transparent);
+      &:focus, &:focus-within {
+        border-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+        outline-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+      }
+    }
+    &.input-secondary {
+      border-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
+      background-color: color-mix(in oklab, var(--color-secondary) 2%, transparent);
+      &:focus, &:focus-within {
+        border-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
+        outline-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
+      }
+    }
+    &.input-accent {
+      border-color: var(--color-accent, oklch(76.76% 0.184 183.61));
+      background-color: color-mix(in oklab, var(--color-accent) 2%, transparent);
+      &:focus, &:focus-within {
+        border-color: var(--color-accent, oklch(76.76% 0.184 183.61));
+        outline-color: var(--color-accent, oklch(76.76% 0.184 183.61));
+      }
+    }
+    &.input-info {
+      border-color: var(--color-info, oklch(72.06% 0.191 231.6));
+      background-color: color-mix(in oklab, var(--color-info) 2%, transparent);
+      &:focus, &:focus-within {
+        border-color: var(--color-info, oklch(72.06% 0.191 231.6));
+        outline-color: var(--color-info, oklch(72.06% 0.191 231.6));
+      }
+    }
+    &.input-success {
+      border-color: var(--color-success, oklch(64.8% 0.15 160));
+      background-color: color-mix(in oklab, var(--color-success) 2%, transparent);
+      &:focus, &:focus-within {
+        border-color: var(--color-success, oklch(64.8% 0.15 160));
+        outline-color: var(--color-success, oklch(64.8% 0.15 160));
+      }
+    }
+    &.input-warning {
+      border-color: var(--color-warning, oklch(84.71% 0.199 83.87));
+      background-color: color-mix(in oklab, var(--color-warning) 2%, transparent);
+      &:focus, &:focus-within {
+        border-color: var(--color-warning, oklch(84.71% 0.199 83.87));
+        outline-color: var(--color-warning, oklch(84.71% 0.199 83.87));
+      }
+    }
+    &.input-error {
+      border-color: var(--color-error, oklch(71.76% 0.221 22.18));
+      background-color: color-mix(in oklab, var(--color-error) 2%, transparent);
+      &:focus, &:focus-within {
+        border-color: var(--color-error, oklch(71.76% 0.221 22.18));
+        outline-color: var(--color-error, oklch(71.76% 0.221 22.18));
+      }
+    }
+    &.input-xs {
+      height: var(--spacing-6, 1.5rem);
+      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));
+      --tw-leading: var(--line-height-relaxed, 1.625);
+      line-height: var(--line-height-relaxed, 1.625);
+      &[type="number"] {
+        &::-webkit-inner-spin-button {
+          margin-top: calc(var(--spacing-1, 0.25rem) * -1);
+          margin-bottom: calc(var(--spacing-1, 0.25rem) * -1);
+          margin-inline-end: calc(var(--spacing-0, 0px) * -1);
+        }
+      }
+    }
+    &.input-sm {
+      height: var(--spacing-8, 2rem);
+      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));
+      --tw-leading: var(--line-height-8, 2rem);
+      line-height: var(--line-height-8, 2rem);
+      &[type="number"] {
+        &::-webkit-inner-spin-button {
+          margin-top: var(--spacing-0, 0px);
+          margin-bottom: var(--spacing-0, 0px);
+          margin-inline-end: calc(var(--spacing-0, 0px) * -1);
+        }
+      }
+    }
+    &.input-md {
+      height: var(--spacing-10, 2.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-leading: var(--line-height-loose, 2);
+      line-height: var(--line-height-loose, 2);
+      &[type="number"] {
+        &::-webkit-inner-spin-button {
+          margin-top: calc(var(--spacing-4, 1rem) * -1);
+          margin-bottom: calc(var(--spacing-4, 1rem) * -1);
+          margin-inline-end: calc(var(--spacing-4, 1rem) * -1);
+        }
+      }
+    }
+    &.input-lg {
+      height: var(--spacing-14, 3.5rem);
+      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));
+      --tw-leading: var(--line-height-loose, 2);
+      line-height: var(--line-height-loose, 2);
+      &[type="number"] {
+        &::-webkit-inner-spin-button {
+          margin-top: calc(var(--spacing-6, 1.5rem) * -1);
+          margin-bottom: calc(var(--spacing-6, 1.5rem) * -1);
+          margin-inline-end: calc(var(--spacing-6, 1.5rem) * -1);
+        }
+      }
+    }
+  }

package/components/kbd/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/kbd/index.css

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

package/components/kbd/index.js

@@ -0,0 +1,27 @@
+export default {
+  ".kbd": {
+    "@apply inline-flex items-center justify-center border-base-content/20 bg-base-200 rounded-btn border px-2 border-b-2 align-middle": {},
+    "minHeight": "2.2em",
+    "minWidth": "2.2em"
+  },
+  ".kbd-xs": {
+    "@apply px-1 text-xs": {},
+    "minHeight": "1.2em",
+    "minWidth": "1.2em"
+  },
+  ".kbd-sm": {
+    "@apply px-1 text-sm": {},
+    "minHeight": "1.6em",
+    "minWidth": "1.6em"
+  },
+  ".kbd-md": {
+    "@apply px-2 text-base": {},
+    "minHeight": "2.2em",
+    "minWidth": "2.2em"
+  },
+  ".kbd-lg": {
+    "@apply px-4 text-lg": {},
+    "minHeight": "2.5em",
+    "minWidth": "2.5em"
+  }
+};

package/components/kbd.css

@@ -0,0 +1,49 @@
+.kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-btn, 0.5rem);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+    border-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+    background-color: var(--color-base-200, oklch(96.1151% 0 0));
+    padding-left: var(--spacing-2, 0.5rem);
+    padding-right: var(--spacing-2, 0.5rem);
+    vertical-align: middle;
+    min-height: 2.2em;
+    min-width: 2.2em;
+  }
+  .kbd-xs {
+    padding-left: var(--spacing-1, 0.25rem);
+    padding-right: var(--spacing-1, 0.25rem);
+    font-size: var(--font-size-xs, 0.75rem);
+    line-height: var(--tw-leading, var(--font-size-xs--line-height, 1rem));
+    min-height: 1.2em;
+    min-width: 1.2em;
+  }
+  .kbd-sm {
+    padding-left: var(--spacing-1, 0.25rem);
+    padding-right: var(--spacing-1, 0.25rem);
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem));
+    min-height: 1.6em;
+    min-width: 1.6em;
+  }
+  .kbd-md {
+    padding-left: var(--spacing-2, 0.5rem);
+    padding-right: var(--spacing-2, 0.5rem);
+    font-size: var(--font-size-base, 1rem);
+    line-height: var(--tw-leading, var(--font-size-base--line-height, 1.5rem));
+    min-height: 2.2em;
+    min-width: 2.2em;
+  }
+  .kbd-lg {
+    padding-left: var(--spacing-4, 1rem);
+    padding-right: var(--spacing-4, 1rem);
+    font-size: var(--font-size-lg, 1.125rem);
+    line-height: var(--tw-leading, var(--font-size-lg--line-height, 1.75rem));
+    min-height: 2.5em;
+    min-width: 2.5em;
+  }