kiui-kit 1.3.1-beta.1 → 1.4.1-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +1 -1
  2. package/dist/assets/index.css +1 -0
  3. package/dist/{kiui.min.js → assets/index.js} +45 -45
  4. package/dist/index.html +24 -26
  5. package/package.json +19 -14
  6. package/dist/app.js +0 -19
  7. package/dist/components.conf.css +0 -133
  8. package/dist/kiui.min.css +0 -3
  9. package/dist/kiui.typewriter.min.js +0 -1
package/README.md CHANGED
@@ -281,7 +281,7 @@ cd KIUI
281
281
 
282
282
  npm install
283
283
 
284
- npm run dev:css
284
+ npm run dev
285
285
  ```
286
286
 
287
287
  ---
package/dist/assets/index.css ADDED
@@ -0,0 +1 @@
1
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-ease:initial;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-indigo-400:oklch(67.3% .182 276.935);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-gray-950:oklch(13% .028 261.692);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-6xl:72rem;--container-7xl:80rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--radius-md:.375rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in:cubic-bezier(.4, 0, 1, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.right-0{right:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-50{z-index:50}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-16{height:calc(var(--spacing) * 16)}.h-42{height:calc(var(--spacing) * 42)}.h-60{height:calc(var(--spacing) * 60)}.h-full{height:100%}.w-2\/3{width:66.6667%}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-64{width:calc(var(--spacing) * 64)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.flex-1\/4{flex:25%}.flex-2\/4{flex:50%}.translate-x-0{--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-10{gap:calc(var(--spacing) * 10)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-700{border-color:var(--color-gray-700)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-600{background-color:var(--color-gray-600)}.bg-slate-100{background-color:var(--color-slate-100)}.object-cover{object-fit:cover}.p-5{padding:calc(var(--spacing) * 5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-10{padding-top:calc(var(--spacing) * 10)}.pb-10{padding-bottom:calc(var(--spacing) * 10)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-black{color:var(--color-black)}.text-gray-100{color:var(--color-gray-100)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-gray-950{color:var(--color-gray-950)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline-1{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-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,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}:is(.\*\:transition-all>*){transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media(hover:hover){.hover\:-translate-y-2:hover{--tw-translate-y:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-gray-700:hover{background-color:var(--color-gray-700)}.hover\:text-indigo-400:hover{color:var(--color-indigo-400)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:outline-blue-600:focus{outline-color:var(--color-blue-600)}@media(min-width:40rem){.sm\:w-80{width:calc(var(--spacing) * 80)}.sm\:flex-row{flex-direction:row}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media(min-width:48rem){.md\:ml-auto{margin-left:auto}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-1\/2{width:50%}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:text-left{text-align:left}}@media(min-width:64rem){.lg\:flex-row{flex-direction:row}:where(.lg\:space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)))}.lg\:px-8{padding-inline:calc(var(--spacing) * 8)}}@media(prefers-color-scheme:dark){.dark\:border-gray-700{border-color:var(--color-gray-700)}.dark\:bg-gray-800{background-color:var(--color-gray-800)}.dark\:bg-gray-900{background-color:var(--color-gray-900)}.dark\:bg-slate-800{background-color:var(--color-slate-800)}.dark\:text-gray-100{color:var(--color-gray-100)}.dark\:text-gray-200{color:var(--color-gray-200)}.dark\:text-gray-300{color:var(--color-gray-300)}.dark\:text-gray-400{color:var(--color-gray-400)}.dark\:text-indigo-400{color:var(--color-indigo-400)}.dark\:text-slate-100{color:var(--color-slate-100)}.dark\:text-white{color:var(--color-white)}}.container{margin-inline:auto;margin-block:calc(var(--spacing) * 24);padding:calc(var(--spacing) * 2)}}@media(prefers-color-scheme:dark){body{background-color:var(--color-slate-800)}}body{background-color:#d6d6d6}@media(prefers-color-scheme:dark){body{background-color:var(--color-black)}}.menu-btn{cursor:pointer;margin:.7rem .2rem}.menu-btn,.menu-btn:after,.menu-btn:before{content:"";background:#000;border-radius:1rem;width:2rem;height:.15rem;position:relative}.menu-btn:after{position:absolute;bottom:.5rem}.menu-btn:before{position:absolute;top:.5rem}#cards-wrapper{gap:calc(var(--spacing) * 4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}@media(min-width:40rem){#cards-wrapper{gap:calc(var(--spacing) * 6);grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:48rem){#cards-wrapper{gap:calc(var(--spacing) * 3.5)}}@media(min-width:64rem){#cards-wrapper{grid-template-columns:repeat(3,minmax(0,1fr))}}.menu-btn--show{left:50%}#KIUI-typewriter{margin:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);text-align:center;font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));color:var(--color-slate-700);margin-inline:auto}@media(prefers-color-scheme:dark){#KIUI-typewriter{color:var(--color-slate-200)}}#KIUI-typewriter:after{content:"|";background:inherit;animation:1.5s linear infinite typeWriterFlicker;display:inline-block}.footer-icon{width:calc(var(--spacing) * 5)}#show-more{margin-block:calc(var(--spacing) * 50);border-radius:var(--radius-xl);background-color:var(--color-gray-100);width:100%;padding:calc(var(--spacing) * 6);padding-bottom:calc(var(--spacing) * 12);position:relative}@media(prefers-color-scheme:dark){#show-more{background-color:var(--color-gray-900)}}#show-more__content{height:calc(var(--spacing) * 49);text-align:justify;width:100%;color:var(--color-slate-900);overflow:hidden}@media(prefers-color-scheme:dark){#show-more__content{color:var(--color-gray-100)}}#show-more__shadow{right:calc(var(--spacing) * 0);bottom:calc(var(--spacing) * 0);left:calc(var(--spacing) * 0);height:calc(var(--spacing) * 30);border-bottom-right-radius:var(--radius-xl);border-bottom-left-radius:var(--radius-xl);--tw-gradient-position:to bottom;width:100%;display:block;position:absolute}@supports (background-image:linear-gradient(in lab,red,red)){#show-more__shadow{--tw-gradient-position:to bottom in oklab}}#show-more__shadow{background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-to:#4a556580}@supports (color:color-mix(in lab,red,red)){#show-more__shadow{--tw-gradient-to:color-mix(in oklab, var(--color-gray-600) 50%, transparent)}}#show-more__shadow{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}@media(prefers-color-scheme:dark){#show-more__shadow{--tw-gradient-position:to bottom}@supports (background-image:linear-gradient(in lab,red,red)){#show-more__shadow{--tw-gradient-position:to bottom in oklab}}#show-more__shadow{background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from:#10182833}@supports (color:color-mix(in lab,red,red)){#show-more__shadow{--tw-gradient-from:color-mix(in oklab, var(--color-gray-900) 20%, transparent)}}#show-more__shadow{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}}#show-more__button{right:calc(var(--spacing) * 0);bottom:calc(var(--spacing) * -5);left:calc(var(--spacing) * 0);max-width:calc(var(--spacing) * 30);cursor:pointer;border-radius:var(--radius-2xl);background-color:#62748ecc;margin-inline:auto;position:absolute}@supports (color:color-mix(in lab,red,red)){#show-more__button{background-color:color-mix(in oklab,var(--color-slate-500) 80%,transparent)}}#show-more__button{padding:calc(var(--spacing) * 3);color:var(--color-slate-100);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media(prefers-color-scheme:dark){#show-more__button{background-color:var(--color-slate-100);color:var(--color-slate-900)}}@media(hover:hover){@media(prefers-color-scheme:dark){#show-more__button:hover{background-color:var(--color-slate-300)}}}#show-more.active #show-more__content{overflow:auto;height:100%!important}#show-more.active #show-more__shadow{display:none}#show-more.active #show-more__button{bottom:calc(var(--spacing) * -5);background-color:#fffc}@supports (color:color-mix(in lab,red,red)){#show-more.active #show-more__button{background-color:color-mix(in oklab,var(--color-white) 80%,transparent)}}#show-more.active #show-more__button{color:var(--color-slate-900)}@media(prefers-color-scheme:dark){#show-more.active #show-more__button{border-color:var(--color-slate-100);color:var(--color-slate-800)}}@keyframes typeWriterFlicker{0%{opacity:1;transform:scaleY(1)}50%{opacity:.1;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.social-media a svg{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8);--tw-duration:.2s;transition-duration:.2s}@media screen and (max-width:480px){#cards-wrapper{grid-template-columns:repeat(1,minmax(0,1fr))}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}
package/dist/{kiui.min.js → assets/index.js} RENAMED
@@ -1,20 +1,20 @@
1
- (()=>{function x(c){let d=document;function a(l,e){let i=l.classList.contains("open");l.classList.contains("translate-x-full")?(l.classList.toggle("translate-x-0"),l.classList.toggle("translate-x-full")):l.classList.toggle("hidden");let[t,s]=e.children;i?(t.classList.remove("opacity-0"),t.classList.add("opacity-100"),s.classList.remove("opacity-100"),s.classList.add("opacity-0"),l.classList.remove("open")):(t.classList.remove("opacity-100"),t.classList.add("opacity-0"),s.classList.remove("opacity-0"),s.classList.add("opacity-100"),l.classList.add("open"))}class r extends HTMLElement{async connectedCallback(){let e=await c;if(!e)return;let i=e.menu.items.map(s=>`<li class="menu-item"><a class="transition-colors">${s}</a></li>`).join(""),t=e.menu.items.map(s=>`<li class="menu-mobile-item"><a class="transition-colors">${s}</a></li>`).join("");this.render(e.menu.title,i,t),this.setDesktopLinks(e.menu.links),this.setMobileLinks(e.menu.links),this.setupMobileToggle()}render(e,i,t){this.innerHTML=`
2
- <nav class="menu-background bg-slate-100 dark:bg-slate-600 shadow-md fixed w-full top-0 left-0 z-50">
1
+ (function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))o(s);new MutationObserver(s=>{for(const t of s)if(t.type==="childList")for(const e of t.addedNodes)e.tagName==="LINK"&&e.rel==="modulepreload"&&o(e)}).observe(document,{childList:!0,subtree:!0});function a(s){const t={};return s.integrity&&(t.integrity=s.integrity),s.referrerPolicy&&(t.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?t.credentials="include":s.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function o(s){if(s.ep)return;s.ep=!0;const t=a(s);fetch(s.href,t)}})();function y(n){function r(s,t){const e=s.classList.contains("open");s.classList.contains("translate-x-full")?(s.classList.toggle("translate-x-0"),s.classList.toggle("translate-x-full")):s.classList.toggle("hidden");const[i,l]=t.children;e?(i.classList.remove("opacity-0"),i.classList.add("opacity-100"),l.classList.remove("opacity-100"),l.classList.add("opacity-0"),s.classList.remove("open")):(i.classList.remove("opacity-100"),i.classList.add("opacity-0"),l.classList.remove("opacity-0"),l.classList.add("opacity-100"),s.classList.add("open"))}class a extends HTMLElement{async connectedCallback(){const t=await n;if(!t)return;const e=t.menu.items.map(l=>`<li class="menu-item"><a class="transition-colors">${l}</a></li>`).join(""),i=t.menu.items.map(l=>`<li class="menu-mobile-item"><a class="transition-colors">${l}</a></li>`).join("");this.render(t.menu.title,e,i),this.setDesktopLinks(t.menu.links),this.setMobileLinks(t.menu.links),this.setupMobileToggle()}render(t,e,i){this.innerHTML=`
2
+ <nav class="menu-background bg-gray-100 dark:bg-gray-900 shadow-md fixed w-full top-0 left-0 z-50">
3
3
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
4
4
 
5
5
  <!-- Logo -->
6
6
  <h1 class="menu-main-title text-xl font-bold text-black dark:text-slate-100 transition-colors">
7
- <a href="./index.html">${e}</a>
7
+ <a href="./index.html">${t}</a>
8
8
  </h1>
9
9
 
10
10
  <!-- Hamburger Button (Mobile) -->
11
11
  <div class="md:hidden">
12
12
  <button id="hamburger-btn" class="relative w-6 h-6">
13
- <svg class="absolute inset-0 w-6 h-6 transition-opacity duration-300 opacity-100 hamburger-icon" fill="none" stroke="currentColor" stroke-width="2"
13
+ <svg class="absolute dark:text-gray-100 inset-0 w-6 h-6 transition-opacity duration-300 opacity-100 hamburger-icon" fill="none" stroke="currentColor" stroke-width="2"
14
14
  viewBox="0 0 24 24">
15
15
  <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
16
16
  </svg>
17
- <svg class="absolute inset-0 w-6 h-6 transition-opacity duration-300 opacity-0 close-icon" fill="none" stroke="currentColor" stroke-width="2"
17
+ <svg class="absolute text-gray-100 inset-0 w-6 h-6 transition-opacity duration-300 opacity-0 close-icon" fill="none" stroke="currentColor" stroke-width="2"
18
18
  viewBox="0 0 24 24">
19
19
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
20
20
  </svg>
@@ -23,19 +23,19 @@
23
23
 
24
24
  <!-- Desktop Menu -->
25
25
  <ul class="menuItemsWrapper hidden md:flex gap-6 text-slate-700 dark:text-slate-100 font-medium *:transition-all">
26
- ${i}
26
+ ${e}
27
27
  </ul>
28
28
  </div>
29
29
 
30
30
  <!-- Mobile Menu -->
31
- <div id="mobile-menu" class="md:hidden hidden fixed top-16 right-0 w-2/3 h-full bg-white shadow-lg px-6 py-4 flex-col gap-4 m-auto text-center">
32
- <ul class="flex flex-col gap-4 text-gray-800 font-semibold">
33
- ${t}
31
+ <div id="mobile-menu" class="md:hidden hidden fixed top-16 right-0 w-2/3 h-full bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-100 shadow-lg px-6 py-4 flex-col gap-4 m-auto text-center">
32
+ <ul class="flex flex-col gap-4 font-semibold">
33
+ ${i}
34
34
  </ul>
35
35
  </div>
36
36
  </nav>
37
- `}setDesktopLinks(e){this.querySelectorAll(".menu-item a").forEach((t,s)=>{t.setAttribute("href",e[s]||"#")})}setMobileLinks(e){this.querySelectorAll(".menu-mobile-item a").forEach((t,s)=>{t.setAttribute("href",e[s]||"#")})}setupMobileToggle(){let e=this.querySelector("#hamburger-btn"),i=this.querySelector("#mobile-menu"),t=e;e&&i&&t&&(t.children[0].classList.add("opacity-100"),t.children[1].classList.add("opacity-0"),e.addEventListener("click",()=>a(i,t)))}}class o extends HTMLElement{async connectedCallback(){let e=await c;if(!e)return;let i=e.menu.items.map(s=>`<li class="menu-item"><a class="transition-colors">${s}</a></li>`).join(""),t=e.menu.items.map(s=>`<li class="menu-mobile-item"><a class="transition-colors">${s}</a></li>`).join("");this.render(e.menu.title,i,t),this.setLinks(e.menu.links),this.setMobileLinks(e.menu.links),this.setupMobileToggle()}render(e,i,t){this.innerHTML=`
38
- <nav class="menu-background bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-100 fixed top-0 left-0 w-full z-50 shadow">
37
+ `}setDesktopLinks(t){this.querySelectorAll(".menu-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setMobileLinks(t){this.querySelectorAll(".menu-mobile-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setupMobileToggle(){const t=this.querySelector("#hamburger-btn"),e=this.querySelector("#mobile-menu"),i=t;t&&e&&i&&(i.children[0].classList.add("opacity-100"),i.children[1].classList.add("opacity-0"),t.addEventListener("click",()=>r(e,i)))}}class o extends HTMLElement{async connectedCallback(){const t=await n;if(!t)return;const e=t.menu.items.map(l=>`<li class="menu-item"><a class="transition-colors">${l}</a></li>`).join(""),i=t.menu.items.map(l=>`<li class="menu-mobile-item"><a class="transition-colors">${l}</a></li>`).join("");this.render(t.menu.title,e,i),this.setLinks(t.menu.links),this.setMobileLinks(t.menu.links),this.setupMobileToggle()}render(t,e,i){this.innerHTML=`
38
+ <nav class="menu-background bg-gray-200 text-slate-800 dark:bg-gray-900 dark:text-slate-100 fixed top-0 left-0 w-full z-50 shadow">
39
39
  <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
40
40
 
41
41
  <!-- Left: Hamburger + Logo -->
@@ -50,18 +50,18 @@
50
50
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
51
51
  </svg>
52
52
  </button>
53
- <a href="./index.html" class="menu-main-title transition-colors text-xl font-bold">${e}</a>
53
+ <a href="./index.html" class="menu-main-title transition-colors text-xl font-bold">${t}</a>
54
54
  </div>
55
55
 
56
56
  <!-- Center Menu (Desktop) -->
57
57
  <ul class="menuItemsWrapper hidden md:flex gap-8 text-sm font-medium">
58
- ${i}
58
+ ${e}
59
59
  </ul>
60
60
 
61
61
  <!-- Right Icons -->
62
62
  <div class="hidden md:flex items-center gap-4">
63
63
  <button title="Search">
64
- <svg class="w-5 h-5 text-white hover:text-indigo-400 transition" fill="none" stroke="currentColor" stroke-width="2"
64
+ <svg class="w-5 h-5 text-black dark:text-white hover:text-indigo-400 transition" fill="none" stroke="currentColor" stroke-width="2"
65
65
  viewBox="0 0 24 24">
66
66
  <circle cx="11" cy="11" r="8" />
67
67
  <line x1="21" y1="21" x2="16.65" y2="16.65" />
@@ -73,28 +73,28 @@
73
73
  <!-- Sidebar Menu (Mobile) -->
74
74
  <div id="mobile-menu" class="fixed top-0 right-0 w-64 h-full bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-100 shadow-lg px-6 py-8 transform translate-x-full transition-transform duration-300 ease-in md:hidden z-50">
75
75
  <ul class="flex flex-col gap-6 font-semibold text-base">
76
- ${t}
76
+ ${i}
77
77
  </ul>
78
78
  </div>
79
79
  </nav>
80
- `}setLinks(e){this.querySelectorAll(".menu-item a").forEach((t,s)=>{t.setAttribute("href",e[s]||"#")})}setMobileLinks(e){this.querySelectorAll(".menu-mobile-item a").forEach((t,s)=>{t.setAttribute("href",e[s]||"#")})}setupMobileToggle(){let e=this.querySelector("#hamburger-btn"),i=this.querySelector("#mobile-menu"),t=e;e&&i&&t&&(t.children[0].classList.add("opacity-100"),t.children[1].classList.add("opacity-0"),e.addEventListener("click",()=>a(i,t)))}}customElements.define("header-type-1",r),customElements.define("header-type-2",o)}var g=class extends HTMLElement{async connectedCallback(){let{img:d,title:a,description:r,price:o,buttonTitle:l,buttonLink:e}=this.dataset;this.render(d,a,r,o,l,e)}render(d,a,r,o,l,e){this.innerHTML=`
80
+ `}setLinks(t){this.querySelectorAll(".menu-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setMobileLinks(t){this.querySelectorAll(".menu-mobile-item a").forEach((i,l)=>{i.setAttribute("href",t[l]||"#")})}setupMobileToggle(){const t=this.querySelector("#hamburger-btn"),e=this.querySelector("#mobile-menu"),i=t;t&&e&&i&&(i.children[0].classList.add("opacity-100"),i.children[1].classList.add("opacity-0"),t.addEventListener("click",()=>r(e,i)))}}customElements.define("header-type-1",a),customElements.define("header-type-2",o)}class w extends HTMLElement{async connectedCallback(){const{img:r,title:a,description:o,price:s,buttonTitle:t,buttonLink:e}=this.dataset;this.render(r,a,o,s,t,e)}render(r,a,o,s,t,e){this.innerHTML=`
81
81
  <!-- Product Card -->
82
- <div class="card w-full bg-white dark:bg-gray-900 rounded-2xl overflow-hidden shadow-md hover:shadow-xl hover:-translate-y-2 transition duration-300">
83
- <img class="w-full h-60 object-cover" src="${d||"./kiui.png"}" alt="${a||"default alt"}" />
82
+ <div class="card w-full bg-gray-200 dark:bg-gray-800 rounded-2xl overflow-hidden shadow-md hover:shadow-xl hover:-translate-y-2 transition duration-300">
83
+ <img class="w-full h-60 object-cover" src="${r||"./kiui.png"}" alt="${a||"default alt"}" />
84
84
 
85
85
  <div class="h-42 p-5 flex flex-col justify-between space-y-3">
86
86
  ${a?`<h2 class="card-title text-lg sm:text-xl font-semibold text-gray-800 dark:text-white">${a}</h2>`:""}
87
- ${r?`<p class="card-description text-sm text-gray-600 dark:text-gray-400">${r}</p>`:""}
87
+ ${o?`<p class="card-description text-sm text-gray-600 dark:text-gray-400">${o}</p>`:""}
88
88
 
89
- ${o||e?`<div class="flex items-center justify-between mt-4">
90
- ${o?`<span class="card-price text-lg font-bold text-slate-600 dark:text-indigo-400">$${o}</span>`:"<div></div>"}
91
- ${l?`<a href="${e}" target="_blank" rel="noopener noreferrer" class="card-btn px-4 py-2 bg-slate-600 text-white rounded-xl hover:bg-slate-800 cursor-pointer transition">${l}</a>`:""}
89
+ ${s||e?`<div class="flex items-center justify-between mt-4">
90
+ ${s?`<span class="card-price text-lg font-bold text-gray-600 dark:text-indigo-400">$${s}</span>`:"<div></div>"}
91
+ ${t?`<a href="${e}" target="_blank" rel="noopener noreferrer" class="card-btn px-4 py-2 bg-gray-600 text-white rounded-xl hover:bg-gray-700 cursor-pointer transition">${t}</a>`:""}
92
92
  </div>`:""}
93
93
  </div>
94
94
  </div>
95
95
  <!-- Product Card -->
96
- `}};customElements.define("box-card-1",g);function f(c){class d extends HTMLElement{async connectedCallback(){let e=await c;e&&(this.logoRender=o.bind(this),this.render(e))}render(e){let i=e.socials.socials_names?e.socials.socials_names.map(t=>{if(this.logoRender(t))return`<a href="https://${t}" target="_blank">${this.logoRender(t)}</a>`}).join(""):"";this.innerHTML=`
97
- <div class="footer bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 pt-10">
96
+ `}}customElements.define("box-card-1",w);function k(n){class r extends HTMLElement{async connectedCallback(){const e=await n;e&&(this.logoRender=s.bind(this),this.render(e))}render(e){const i=e.socials.socials_names?e.socials.socials_names.map(l=>{if(this.logoRender(l))return`<a href="https://${l}" target="_blank">${this.logoRender(l)}</a>`}).join(""):"";this.innerHTML=`
97
+ <div class="footer bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-300 pt-10">
98
98
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
99
99
  <!-- Top -->
100
100
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8 pb-10 border-b border-gray-300 dark:border-gray-700">
@@ -108,21 +108,21 @@
108
108
  <div>
109
109
  <h3 class="text-lg font-semibold mb-4 footer-item-title">${e.footerItems.item1.title}</h3>
110
110
  <ul class="space-y-2 text-sm">
111
- ${e.footerItems.item1.items.map((t,s)=>`<li><a href="${e.footerItems.item1.links[s]}" class="footer-item hover:underline">${t}</a></li>`).join("")}
111
+ ${e.footerItems.item1.items.map((l,c)=>`<li><a href="${e.footerItems.item1.links[c]}" class="footer-item hover:underline">${l}</a></li>`).join("")}
112
112
  </ul>
113
113
  </div>
114
114
 
115
115
  <div>
116
116
  <h3 class="text-lg font-semibold mb-4 footer-item-title">${e.footerItems.item2.title}</h3>
117
117
  <ul class="space-y-2 text-sm">
118
- ${e.footerItems.item2.items.map((t,s)=>`<li><a href="${e.footerItems.item2.links[s]}" class="footer-item hover:underline">${t}</a></li>`).join("")}
118
+ ${e.footerItems.item2.items.map((l,c)=>`<li><a href="${e.footerItems.item2.links[c]}" class="footer-item hover:underline">${l}</a></li>`).join("")}
119
119
  </ul>
120
120
  </div>
121
121
 
122
122
  <div>
123
123
  <h3 class="text-lg font-semibold mb-4 footer-item-title">${e.footerItems.item3.title}</h3>
124
124
  <ul class="space-y-2 text-sm">
125
- ${e.footerItems.item3.items.map((t,s)=>`<li><a href="${e.footerItems.item3.links[s]}" class="footer-item hover:underline">${t}</a></li>`).join("")}
125
+ ${e.footerItems.item3.items.map((l,c)=>`<li><a href="${e.footerItems.item3.links[c]}" class="footer-item hover:underline">${l}</a></li>`).join("")}
126
126
  </ul>
127
127
  </div>
128
128
  </div>
@@ -136,11 +136,11 @@
136
136
  </div>
137
137
  </div>
138
138
  </div>
139
- `}}class a extends HTMLElement{async connectedCallback(){let e=await c;e&&(this.logoRender=o.bind(this),this.render(e))}render(e){let i=e.socials.socials_names?e.socials.socials_names.map(t=>{if(this.logoRender(t))return`<a href="https://${t}" target="_blank">${this.logoRender(t)}</a>`}).join(""):"";this.innerHTML=`
140
- <div class="footer bg-gray-900 text-gray-200 py-12">
139
+ `}}class a extends HTMLElement{async connectedCallback(){const e=await n;e&&(this.logoRender=s.bind(this),this.render(e))}render(e){const i=e.socials.socials_names?e.socials.socials_names.map(l=>{if(this.logoRender(l))return`<a href="https://${l}" target="_blank">${this.logoRender(l)}</a>`}).join(""):"";this.innerHTML=`
140
+ <div class="footer bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-200 py-12">
141
141
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
142
142
  <div class="text-center mb-10">
143
- <h2 class="footer-title text-3xl font-extrabold text-white">${e.title}</h2>
143
+ <h2 class="footer-title text-3xl font-extrabold dark:text-white text-gray-950">${e.title}</h2>
144
144
  <p class="footer-description mt-2 text-sm text-gray-400">${e.description}</p>
145
145
  </div>
146
146
 
@@ -149,7 +149,7 @@
149
149
  <input
150
150
  type="email"
151
151
  placeholder="Enter your email"
152
- class="input-email w-full sm:w-80 px-4 py-2 rounded-md text-slate-300 outline-1 focus:outline-blue-600"
152
+ class="input-email w-full sm:w-80 px-4 py-2 rounded-md text-gray-800 dark:text-gray-300 outline-1 focus:outline-blue-600"
153
153
  />
154
154
  <button
155
155
  class="footer-btn-subscribe bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-md transition duration-200"
@@ -160,11 +160,11 @@
160
160
 
161
161
  <!-- Links -->
162
162
  <div class="grid grid-cols-1 md:grid-cols-3 gap-10 text-center md:text-left border-t border-gray-700 pt-10">
163
- ${Object.values(e.footerItems).map(t=>`
163
+ ${Object.values(e.footerItems).map(l=>`
164
164
  <div>
165
- <h3 class="text-lg font-semibold mb-4 footer-item-title">${t.title}</h3>
165
+ <h3 class="text-lg font-semibold mb-4 footer-item-title">${l.title}</h3>
166
166
  <ul class="space-y-2 text-sm">
167
- ${t.items.map((s,m)=>`<li class="footer-item"><a href="${t.links[m]}" class="hover:underline">${s}</a></li>`).join("")}
167
+ ${l.items.map((c,m)=>`<li class="footer-item"><a href="${l.links[m]}" class="hover:underline">${c}</a></li>`).join("")}
168
168
  </ul>
169
169
  </div>
170
170
  `).join("")}
@@ -179,8 +179,8 @@
179
179
  </div>
180
180
  </div>
181
181
  </div>
182
- `}}class r extends HTMLElement{async connectedCallback(){let e=await c;e&&(this.logoRender=o.bind(this),this.render(e))}render({title:e,description:i,footerItems:t,socials:s}){let{item1:m,item2:h,item3:p}=t,v=s.socials_names?s.socials_names.map(n=>{if(this.logoRender(n))return`<a href="https://${n}" target="_blank">${this.logoRender(n)}</a>`}).join(""):"";this.innerHTML=`
183
- <footer class="footer bg-[#0b1d26] text-white py-16 text-sm">
182
+ `}}class o extends HTMLElement{async connectedCallback(){const e=await n;e&&(this.logoRender=s.bind(this),this.render(e))}render({title:e,description:i,footerItems:l,socials:c}){const{item1:m,item2:h,item3:g}=l,v=c.socials_names?c.socials_names.map(d=>{if(this.logoRender(d))return`<a href="https://${d}" target="_blank">${this.logoRender(d)}</a>`}).join(""):"";this.innerHTML=`
183
+ <footer class="footer bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 py-16 text-sm">
184
184
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between lg:flex-row flex-col space-y-4 lg:space-y-0">
185
185
 
186
186
  <div class="flex-2/4 flex flex-col justify-between space-y-6">
@@ -192,34 +192,34 @@
192
192
  </div>
193
193
  </div>
194
194
 
195
- <p class="text-gray-400 copyright">Copyright ${new Date().getFullYear()} ${e}, Inc. Terms & Privacy</p>
195
+ <p class="text-gray-600 dark:text-gray-400 copyright">Copyright ${new Date().getFullYear()} ${e}, Inc. Terms & Privacy</p>
196
196
 
197
197
  </div>
198
198
 
199
199
  <div class="flex-1/4 flex justify-between flex-col sm:flex-row gap-4">
200
200
  <div>
201
- <h3 class="footer-item-title text-lg footer-title text-amber-200 font-bold">More on The ${m.title}</h3>
201
+ <h3 class="footer-item-title text-lg footer-title text-gray-400 font-bold">More on The ${m.title}</h3>
202
202
  <ul class="space-y-3 mt-4">
203
- ${m.items.map((n,u)=>`<li class="footer-item hover:underline"><a href=${m.links[u]}>${n}</a></li>`).join("")}
203
+ ${m.items.map((d,u)=>`<li class="footer-item hover:underline"><a href=${m.links[u]}>${d}</a></li>`).join("")}
204
204
  </ul>
205
205
  </div>
206
206
 
207
207
  <div>
208
- <h3 class="footer-item-title text-lg footer-title text-amber-200 font-bold">More on The ${h.title}</h3>
208
+ <h3 class="footer-item-title text-lg footer-title text-gray-400 font-bold">More on The ${h.title}</h3>
209
209
  <ul class="space-y-3 mt-4">
210
- ${h.items.map((n,u)=>`<li class="footer-item hover:underline"><a href=${h.links[u]}>${n}</a></li>`).join("")}
210
+ ${h.items.map((d,u)=>`<li class="footer-item hover:underline"><a href=${h.links[u]}>${d}</a></li>`).join("")}
211
211
  </ul>
212
212
  </div>
213
213
  <div>
214
- <h3 class="footer-item-title text-lg footer-title text-amber-200 font-bold">More on The ${p.title}</h3>
214
+ <h3 class="footer-item-title text-lg footer-title text-gray-400 font-bold">More on The ${g.title}</h3>
215
215
  <ul class="space-y-3 mt-4">
216
- ${p.items.map((n,u)=>`<li class="footer-item w-fit"><a class="hover:underline" href=${p.links[u]}>${n}</a></li>`).join("")}
216
+ ${g.items.map((d,u)=>`<li class="footer-item w-fit"><a class="hover:underline" href=${g.links[u]}>${d}</a></li>`).join("")}
217
217
  </ul>
218
218
  </div>
219
219
  </div>
220
220
  </div>
221
221
  </footer>
222
- `}}function o(l){let e=l.toLowerCase();switch(!0){case e.includes("instagram"):return`<svg xmlns="http://www.w3.org/2000/svg" class="footer-icon" fill="currentColor" viewBox="0 0 16 16">
222
+ `}}function s(t){let e=t.toLowerCase();switch(!0){case e.includes("instagram"):return`<svg xmlns="http://www.w3.org/2000/svg" class="footer-icon" fill="currentColor" viewBox="0 0 16 16">
223
223
  <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"></path>
224
224
  </svg>`;case e.includes("facebook"):return`<svg xmlns="http://www.w3.org/2000/svg" class="footer-icon" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
225
225
  <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
@@ -233,4 +233,4 @@
233
233
  <path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"/>
234
234
  </svg>`;case e.includes("linkedin"):return`<svg xmlns="http://www.w3.org/2000/svg" class="footer-icon" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
235
235
  <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
236
- </svg>`;default:return""}}customElements.define("footer-type-1",d),customElements.define("footer-type-2",a),customElements.define("footer-type-3",r)}var w=document.querySelector("#show-more"),b=document.querySelector("#show-more__button");b.addEventListener("click",()=>{b.textContent=b.textContent==="Show More"?"Show Less":"Show More",w.classList.toggle("active")});window.initHeader=x;window.initFooter=f;})();
236
+ </svg>`;default:return""}}customElements.define("footer-type-1",r),customElements.define("footer-type-2",a),customElements.define("footer-type-3",o)}const L=document.querySelector("#show-more"),p=document.querySelector("#show-more__button");p.addEventListener("click",()=>{p.textContent=p.textContent==="Show More"?"Show Less":"Show More",L.classList.toggle("active")});const $=document,f=$.querySelector("#KIUI-typewriter");let x=null,b=null;function M(n=[],r=100,a=1e3){let o=0,s=0;function t(){const i=n[o];x=setInterval(()=>{f.textContent+=i[s],s++,s>=i.length&&(clearInterval(x),setTimeout(()=>e(),a))},r)}function e(){const i=n[o];b=setInterval(()=>{s--,f.textContent=i.slice(0,s),s<=0&&(clearInterval(b),o=(o+1)%n.length,setTimeout(()=>t(),a))},r)}t()}window.initKIUITypeWriter=M;window.initHeader=y;window.initFooter=k;initKIUITypeWriter(["Welcome to KIUI","A lightweight","and","Modern Web Component UI Kit.","Let’s build something amazing together . . . "],100,1e3);
package/dist/index.html CHANGED
@@ -1,12 +1,12 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
  <html lang="en" dir="ltr">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>KIUI Demo</title>
7
- <link rel="shortcut icon" href="./kiui.png" type="image/png" />
8
- <link rel="stylesheet" href="./kiui.min.css" />
9
- <link rel="stylesheet" href="./components.conf.css" />
7
+ <link rel="shortcut icon" href="/kiui.png" type="image/png" />
8
+ <script type="module" crossorigin src="/assets/index.js"></script>
9
+ <link rel="stylesheet" crossorigin href="/assets/index.css">
10
10
  </head>
11
11
 
12
12
  <body>
@@ -15,7 +15,7 @@
15
15
 
16
16
  <header-type-1></header-type-1>
17
17
 
18
- <!-- <header-type-2></header-type-2> -->
18
+ <header-type-2></header-type-2>
19
19
 
20
20
  <!--! To use one of the components below, uncomment only one -->
21
21
  </header>
@@ -56,13 +56,13 @@
56
56
  <box-card-1 data-title="just title"></box-card-1>
57
57
 
58
58
  <box-card-1
59
- data-img="./kiui.png"
59
+ data-img="/kiui.png"
60
60
  data-title="title2"
61
61
  data-price="23"
62
62
  ></box-card-1>
63
63
 
64
64
  <box-card-1
65
- data-img="./kiui.png"
65
+ data-img="/kiui.png"
66
66
  data-button-title="Buy"
67
67
  data-title="title3"
68
68
  data-description="description"
@@ -70,7 +70,7 @@
70
70
  ></box-card-1>
71
71
 
72
72
  <box-card-1
73
- data-img="./kiui.png"
73
+ data-img="/kiui.png"
74
74
  data-title="title4"
75
75
  data-description="description"
76
76
  data-button-title="button"
@@ -93,25 +93,23 @@
93
93
  </footer>
94
94
 
95
95
  <!--* Scripts -->
96
- <script type="module" src="./kiui.min.js"></script>
97
-
98
- <!--! Use KIUI Type Writer -->
99
- <script src="./kiui.typewriter.min.js"></script>
96
+ <!--! Other Scripts ... -->
100
97
  <script>
101
- initKIUITypeWriter(
102
- [
103
- "Welcome to KIUI",
104
- "A lightweight",
105
- "and",
106
- "Modern Web Component UI Kit.",
107
- "Let’s build something amazing together . . . ",
108
- ],
109
- 100, // typing/deleting speed
110
- 1000 // pause between type/delete
111
- );
112
- </script>
98
+ // ? InitProject
99
+ (async () => {
100
+ const navMenusDataRes = await fetch("/allData/header.json");
101
+ const navMenusData = await navMenusDataRes.json();
102
+ initHeader(navMenusData);
113
103
 
114
- <!--! Other Scripts ... -->
115
- <script src="./app.js"></script>
104
+ const footerDataRes = await fetch("/allData/footer.json");
105
+ const footerData = await footerDataRes.json();
106
+
107
+ const socialsDataRes = await fetch("/allData/socials.json");
108
+ const socialsData = await socialsDataRes.json();
109
+
110
+ const footer = { ...footerData.footer, socials: socialsData.socials };
111
+ initFooter(footer);
112
+ })();
113
+ </script>
116
114
  </body>
117
115
  </html>
package/package.json CHANGED
@@ -1,18 +1,17 @@
1
1
  {
2
2
  "name": "kiui-kit",
3
- "version": "1.3.1-beta.1",
3
+ "version": "1.4.1-beta.1",
4
4
  "description": "A set of ready-to-use HTML components like headers, footers, cards, etc.",
5
- "main": "dist/kiui.min.js",
5
+ "main": "dist/assets/index.js",
6
6
  "style": "dist/kiui.min.css",
7
+ "type": "module",
7
8
  "files": [
8
9
  "dist/"
9
10
  ],
10
11
  "scripts": {
11
- "dev:css": "npx @tailwindcss/cli -i ./src/styles/input.css -o ./src/styles/main.css --watch",
12
- "build:css": "npx @tailwindcss/cli -i ./src/styles/input.css -o ./dist/kiui.min.css --minify",
13
- "build:js": "esbuild ./index.js --bundle --minify --outfile=dist/kiui.min.js",
14
- "build": "npm run build:js && npm run build:css",
15
- "build:typewriter": "esbuild ./src/effects/typewriter.js --bundle --minify --outfile=dist/kiui.typewriter.min.js"
12
+ "dev": "vite",
13
+ "build:vite": "vite build",
14
+ "preview": "vite preview"
16
15
  },
17
16
  "author": "Kiyan-abbasi",
18
17
  "license": "Apache-2.0",
@@ -26,13 +25,19 @@
26
25
  "webcomponents"
27
26
  ],
28
27
  "dependencies": {
29
- "@tailwindcss/cli": "^4.1.7",
30
- "tailwindcss": "^4.1.7"
28
+ "@tailwindcss/vite": "^4.1.18",
29
+ "tailwindcss": "^4.1.18"
31
30
  },
32
31
  "devDependencies": {
33
- "@eslint/js": "^9.36.0",
34
- "esbuild": "^0.25.5",
35
- "eslint": "^9.36.0",
36
- "globals": "^16.4.0"
37
- }
32
+ "vite": "^7.3.1",
33
+ "@eslint/js": "^10.0.1"
34
+ },
35
+ "repository": {
36
+ "type": "git",
37
+ "url": "git+https://github.com/alirezaabbasi-dev/KIUI.git"
38
+ },
39
+ "bugs": {
40
+ "url": "https://github.com/alirezaabbasi-dev/KIUI/issues"
41
+ },
42
+ "homepage": "https://github.com/alirezaabbasi-dev/KIUI#readme"
38
43
  }
package/dist/app.js DELETED
@@ -1,19 +0,0 @@
1
- (async () => {
2
- const navMenus = await fetch("./allData/header.json")
3
- .then((res) => res.json())
4
- .then((data) => data);
5
-
6
- initHeader(navMenus);
7
-
8
- const footerData = await fetch("./allData/footer.json")
9
- .then((res) => res.json())
10
- .then((data) => data);
11
-
12
- const socials = await fetch("./allData/socials.json")
13
- .then((res) => res.json())
14
- .then((data) => data);
15
-
16
- const footer = { ...footerData.footer, socials: socials.socials };
17
-
18
- initFooter(footer);
19
- })();
package/dist/components.conf.css DELETED
@@ -1,133 +0,0 @@
1
- /* ============================================================================
2
- 🎨 Global Styles
3
- - Sets base font and background color for the entire website.
4
- - You can modify body background or font-family globally here.
5
- ============================================================================
6
- body {
7
- font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
8
- Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
9
- }
10
- ============================================================================
11
- 🧭 Header Section (Currently Commented Out)
12
- - To enable and customize header styles, remove the comment block below.
13
- - Customize navigation background, title colors, hover effects, mobile menu, etc.
14
- ============================================================================
15
-
16
- .menu-background => background color of the top navigation bar
17
- .menu-main-title => main title in header, color and hover behavior
18
- .menu-item => individual menu items with text-transform and hover styles
19
- #mobile-menu => mobile dropdown background
20
- #hamburger-btn => color of hamburger toggle icon
21
-
22
-
23
- ============================================================================
24
- 🧩 Main Section - Card Components
25
- - These styles define the appearance of cards (e.g. product cards, blog cards).
26
- - Customize background, title, text, price section, and button appearance.
27
- ============================================================================
28
- .card => sets card background color
29
- .card-title => defines color of the card title
30
- .card-description => paragraph or short text under title
31
- .card-price => background color of the price label
32
- .card-btn => styling of call-to-action button (e.g. "Buy Now")
33
-
34
- ============================================================================
35
- 🦶 Footer Section
36
- - Controls styles for footer background, titles, descriptions, and email input.
37
- - Adjust footer subscribe button and social icons section.
38
- ============================================================================
39
- .footer => overall footer background and text color
40
- .footer-title => main headings inside footer
41
- .footer-description => descriptive text
42
- .input-email => background color of email input field
43
- .footer-btn-subscribe => styling for subscribe button
44
- .footer-bottom-social => color of social media icons/text in footer bottom */
45
-
46
- /* Styles code */
47
- /* ============================== Header ============================== */
48
- body {
49
- background-color: #e0e0e0;
50
- }
51
- /* .menu-background {
52
- background: #4e2094;
53
- }
54
- .menu-main-title {
55
- color: rgb(255, 95, 215);
56
- }
57
- .menu-main-title:hover {
58
- color: rgb(213, 221, 228);
59
- }
60
- .menu-item {
61
- color: rgb(192, 160, 255);
62
- text-transform: capitalize;
63
- }
64
- .menu-item:hover {
65
- color: rgb(213, 221, 228);
66
- }
67
- #mobile-menu {
68
- background: #e1e2e1;
69
- }
70
- #hamburger-btn {
71
- color: rgb(135, 145, 222);
72
- } */
73
- /* ============================== Main ============================== */
74
- /* .card{
75
- background: #2b0131;
76
- }
77
- .card-title{
78
- color: rgb(152, 77, 219);
79
- }
80
- .card-description{
81
- color: rgb(155, 155, 155);
82
- }
83
- .card-price{
84
- color: rgb(105, 224, 105);
85
- }
86
- .card-btn{
87
- background: rgb(81, 30, 165);
88
- color: rgb(255, 160, 215);
89
- }
90
- .card-btn:hover{
91
- background: rgb(80, 10, 193);
92
- color: rgb(241, 192, 221);
93
- } */
94
-
95
- /* ============================== Footer ============================== */
96
- /* .footer {
97
- background: #180238;
98
- color: #cecece;
99
- }
100
- .footer-title {
101
- color: #713ac4;
102
- }
103
- .footer-description {
104
- color: rgb(147, 133, 205);
105
- }
106
- .footer-item-title {
107
- color: rgb(186, 158, 224);
108
- }
109
- .footer-item {
110
- color: rgb(210, 210, 210);
111
- }
112
- .input-email {
113
- background: #471295;
114
- }
115
- .footer-btn-subscribe {
116
- background: #711cef;
117
- }
118
- .copyright {
119
- color: rgb(199, 199, 199);
120
- }
121
- .footer-bottom-social {
122
- color: rgb(215, 146, 240);
123
- } */
124
-
125
- /* Type Writer */
126
- #KIUI-typewriter {
127
- color: rgb(68, 68, 68);
128
- margin: 4rem;
129
- margin-inline: auto;
130
- font-size: 2rem;
131
- text-align: center;
132
- height: 4rem;
133
- }
package/dist/kiui.min.css DELETED
@@ -1,3 +0,0 @@
1
- /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
2
- /*! Show More */
3
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-ease:initial;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-amber-200:oklch(92.4% .12 95.746);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-indigo-400:oklch(67.3% .182 276.935);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-6xl:72rem;--container-7xl:80rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--radius-md:.375rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in:cubic-bezier(.4,0,1,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-16{top:calc(var(--spacing)*16)}.right-0{right:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-5{margin-top:calc(var(--spacing)*5)}.mt-12{margin-top:calc(var(--spacing)*12)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-10{margin-bottom:calc(var(--spacing)*10)}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-16{height:calc(var(--spacing)*16)}.h-42{height:calc(var(--spacing)*42)}.h-60{height:calc(var(--spacing)*60)}.h-full{height:100%}.w-2\/3{width:66.6667%}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-64{width:calc(var(--spacing)*64)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.flex-1\/4{flex:25%}.flex-2\/4{flex:50%}.translate-x-0{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}.gap-10{gap:calc(var(--spacing)*10)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-700{border-color:var(--color-gray-700)}.bg-\[\#0b1d26\]{background-color:#0b1d26}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-600{background-color:var(--color-slate-600)}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-5{padding:calc(var(--spacing)*5)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.py-12{padding-block:calc(var(--spacing)*12)}.py-16{padding-block:calc(var(--spacing)*16)}.pt-6{padding-top:calc(var(--spacing)*6)}.pt-10{padding-top:calc(var(--spacing)*10)}.pb-10{padding-bottom:calc(var(--spacing)*10)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-amber-200{color:var(--color-amber-200)}.text-black{color:var(--color-black)}.text-gray-200{color:var(--color-gray-200)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-slate-300{color:var(--color-slate-300)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline-1{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-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,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}:is(.\*\:transition-all>*){transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:-translate-y-2:hover{--tw-translate-y:calc(var(--spacing)*-2);translate:var(--tw-translate-x)var(--tw-translate-y)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-slate-800:hover{background-color:var(--color-slate-800)}.hover\:text-indigo-400:hover{color:var(--color-indigo-400)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:outline-blue-600:focus{outline-color:var(--color-blue-600)}@media (min-width:40rem){.sm\:w-80{width:calc(var(--spacing)*80)}.sm\:flex-row{flex-direction:row}.sm\:px-6{padding-inline:calc(var(--spacing)*6)}.sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (min-width:48rem){.md\:ml-auto{margin-left:auto}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-1\/2{width:50%}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:text-left{text-align:left}}@media (min-width:64rem){.lg\:flex-row{flex-direction:row}:where(.lg\:space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*0)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-y-reverse)))}.lg\:px-8{padding-inline:calc(var(--spacing)*8)}}@media (prefers-color-scheme:dark){.dark\:border-gray-700{border-color:var(--color-gray-700)}.dark\:bg-gray-900{background-color:var(--color-gray-900)}.dark\:bg-slate-600{background-color:var(--color-slate-600)}.dark\:bg-slate-700{background-color:var(--color-slate-700)}.dark\:bg-slate-800{background-color:var(--color-slate-800)}.dark\:text-gray-300{color:var(--color-gray-300)}.dark\:text-gray-400{color:var(--color-gray-400)}.dark\:text-indigo-400{color:var(--color-indigo-400)}.dark\:text-slate-100{color:var(--color-slate-100)}.dark\:text-white{color:var(--color-white)}}.container{margin-inline:auto;margin-block:calc(var(--spacing)*24);padding:calc(var(--spacing)*2)}}@media (prefers-color-scheme:dark){body{background-color:var(--color-slate-800)}}body{background-color:#d6d6d6}@media (prefers-color-scheme:dark){body{background-color:var(--color-slate-800)}}.menu-btn{cursor:pointer;margin:.7rem .2rem}.menu-btn,.menu-btn:after,.menu-btn:before{content:"";background:#000;border-radius:1rem;width:2rem;height:.15rem;position:relative}.menu-btn:after{position:absolute;bottom:.5rem}.menu-btn:before{position:absolute;top:.5rem}#cards-wrapper{gap:calc(var(--spacing)*4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}@media (min-width:40rem){#cards-wrapper{gap:calc(var(--spacing)*6);grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:48rem){#cards-wrapper{gap:calc(var(--spacing)*3.5)}}@media (min-width:64rem){#cards-wrapper{grid-template-columns:repeat(3,minmax(0,1fr))}}.menu-btn--show{left:50%}#KIUI-typewriter{margin:calc(var(--spacing)*4);height:calc(var(--spacing)*4);text-align:center;font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));color:var(--color-slate-700);margin-inline:auto}@media (prefers-color-scheme:dark){#KIUI-typewriter{color:var(--color-slate-200)}}#KIUI-typewriter:after{content:"|";background:inherit;animation:1.5s linear infinite typeWriterFlicker;display:inline-block}.footer-icon{width:calc(var(--spacing)*5)}#show-more{margin-block:calc(var(--spacing)*50);border-radius:var(--radius-xl);background-color:var(--color-slate-600);width:100%;padding:calc(var(--spacing)*6);padding-bottom:calc(var(--spacing)*12);position:relative}#show-more__content{height:calc(var(--spacing)*49);text-align:justify;width:100%;color:var(--color-slate-900);overflow:hidden}@media (prefers-color-scheme:dark){#show-more__content{color:var(--color-slate-100)}}#show-more__shadow{right:calc(var(--spacing)*0);bottom:calc(var(--spacing)*0);left:calc(var(--spacing)*0);height:calc(var(--spacing)*30);border-bottom-right-radius:var(--radius-xl);border-bottom-left-radius:var(--radius-xl);--tw-gradient-position:to bottom;width:100%;display:block;position:absolute}@supports (background-image:linear-gradient(in lab, red, red)){#show-more__shadow{--tw-gradient-position:to bottom in oklab}}#show-more__shadow{background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from:#3141584d}@supports (color:color-mix(in lab, red, red)){#show-more__shadow{--tw-gradient-from:color-mix(in oklab,var(--color-slate-700)30%,transparent)}}#show-more__shadow{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));--tw-gradient-to:var(--color-slate-950);--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}#show-more__button{right:calc(var(--spacing)*0);bottom:calc(var(--spacing)*-5);left:calc(var(--spacing)*0);max-width:calc(var(--spacing)*30);cursor:pointer;border-radius:var(--radius-2xl);background-color:#62748ecc;margin-inline:auto;position:absolute}@supports (color:color-mix(in lab, red, red)){#show-more__button{background-color:color-mix(in oklab,var(--color-slate-500)80%,transparent)}}#show-more__button{padding:calc(var(--spacing)*3);color:var(--color-slate-100);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (prefers-color-scheme:dark){#show-more__button{background-color:var(--color-slate-100);color:var(--color-slate-900)}}@media (hover:hover){@media (prefers-color-scheme:dark){#show-more__button:hover{background-color:var(--color-slate-300)}}}#show-more.active #show-more__content{overflow:auto;height:100%!important}#show-more.active #show-more__shadow{display:none}#show-more.active #show-more__button{bottom:calc(var(--spacing)*-5);background-color:#fffc}@supports (color:color-mix(in lab, red, red)){#show-more.active #show-more__button{background-color:color-mix(in oklab,var(--color-white)80%,transparent)}}#show-more.active #show-more__button{color:var(--color-slate-900)}@media (prefers-color-scheme:dark){#show-more.active #show-more__button{border-color:var(--color-slate-100);color:var(--color-slate-800)}}@keyframes typeWriterFlicker{0%{opacity:1;transform:scaleY(1)}50%{opacity:.1;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.social-media a svg{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8);--tw-duration:.2s;transition-duration:.2s}@media screen and (max-width:480px){#cards-wrapper{grid-template-columns:repeat(1,minmax(0,1fr))}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}
package/dist/kiui.typewriter.min.js DELETED
@@ -1 +0,0 @@
1
- "use strict";(()=>{var T=document,o=T.querySelector("#KIUI-typewriter"),I=null,u=null;function a(r=[],l=100,i=1e3){let t=0,e=0;function c(){let n=r[t];I=setInterval(()=>{o.textContent+=n[e],e++,e>=n.length&&(clearInterval(I),setTimeout(()=>s(),i))},l)}function s(){let n=r[t];u=setInterval(()=>{e--,o.textContent=n.slice(0,e),e<=0&&(clearInterval(u),t=(t+1)%r.length,setTimeout(()=>c(),i))},l)}c()}window.initKIUITypeWriter=a;})();