@code-coaching/vuetiful 0.1.4 → 0.3.0

package/dist/styles/all.css

@@ -681,9 +681,9 @@ blockquote:not(.unstyled):is(:not(.prose *)){
 
 kbd:not(.unstyled):is(:not(.prose *)) {
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-weight: 700;
   font-size:.875rem;
   line-height:1.25rem;
+  font-weight:700;
   border-radius: 0.25rem;
   padding-left: 0.375rem;
   padding-right: 0.375rem;
@@ -927,6 +927,18 @@ progress::-webkit-progress-value {
 
 /* === Text Labeling === */
 
+.label > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
+.label>:not([hidden])~:not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom:calc(.25rem * var(--tw-space-y-reverse))
+}
+
 /* === Core Styles === */
 
 /* Base Inputs */
@@ -1264,6 +1276,14 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.list>:not([hidden])~:not([hidden]),
+	.list-dl>:not([hidden])~:not([hidden]),
+	.list-nav ul>:not([hidden])~:not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom:calc(.25rem * var(--tw-space-y-reverse))
+}
+
 /* === List Items (Children) === */
 
 .list-nav a,
@@ -1382,10 +1402,18 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
 
 /* Glass */
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
 .-m-4 {
   margin: -1rem;
 }
@@ -1394,6 +1422,10 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   display: flex;
 }
 
+.grid {
+  display: grid;
+}
+
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
@@ -1402,11 +1434,6 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   height: 1.5rem;
 }
 
-.h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
-
 .h-full {
   height: 100%;
 }
@@ -1431,15 +1458,30 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   width: 70%;
 }
 
-.w-fit {
-  width: -moz-fit-content;
-  width: fit-content;
+.w-\[70px\] {
+  width: 70px;
+}
+
+.w-auto {
+  width: auto;
 }
 
 .w-full {
   width: 100%;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-none {
+  flex: none;
+}
+
 .translate-x-\[100\%\] {
   --tw-translate-x: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1455,10 +1497,22 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   cursor: pointer;
 }
 
+.grid-rows-\[auto_1fr_auto\] {
+  grid-template-rows: auto 1fr auto;
+}
+
 .flex-col {
   flex-direction: column;
 }
 
+.place-content-center {
+  place-content: center;
+}
+
+.place-items-center {
+  place-items: center;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1471,10 +1525,26 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   justify-content: space-between;
 }
 
+.gap-0 {
+  gap: 0px;
+}
+
 .gap-4 {
   gap: 1rem;
 }
 
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
+.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1489,6 +1559,10 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   overflow-y: auto;
 }
 
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
@@ -1510,11 +1584,6 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   background-color: rgb(var(--color-primary-50) / var(--tw-bg-opacity));
 }
 
-.bg-primary-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--color-primary-900) / var(--tw-bg-opacity));
-}
-
 .bg-surface-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--color-surface-200) / var(--tw-bg-opacity));
@@ -1564,6 +1633,10 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   line-height: 1rem;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -1577,11 +1650,6 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
 }
 
-.text-primary-50 {
-  --tw-text-opacity: 1;
-  color: rgb(var(--color-primary-50) / var(--tw-text-opacity));
-}
-
 .text-primary-900 {
   --tw-text-opacity: 1;
   color: rgb(var(--color-primary-900) / var(--tw-text-opacity));
@@ -1630,10 +1698,6 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.ring-primary-500\/30 {
-  --tw-ring-color: rgb(var(--color-primary-500) / 0.3);
-}
-
 .ring-surface-500\/30 {
   --tw-ring-color: rgb(var(--color-surface-500) / 0.3);
 }
@@ -1701,6 +1765,12 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   background-color: rgb(var(--color-secondary-900) / 0.7);
 }
 
+.bg-secondary-active-token {
+  background-color: rgb(var(--color-secondary-500)) !important;
+  color: rgb(var(--on-secondary));
+  fill: rgb(var(--on-secondary));
+}
+
 .dark .bg-secondary-50-900-token {
   background-color: rgb(var(--color-secondary-900));
 }
@@ -1961,6 +2031,10 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   background-color: rgb(var(--color-surface-400));
 }
 
+.border-token {
+  border-width: var(--theme-border-base);
+}
+
 .dark .border-primary-50-900-token {
   border-color: rgb(var(--color-primary-900));
 }
@@ -2839,6 +2913,16 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   color: rgb(var(--color-primary-900) / var(--tw-text-opacity));
 }
 
+.hover\:bg-secondary-hover-token:hover:hover {
+  background-color: rgb(var(--color-secondary-500) / 0.1);
+}
+
+@media (min-width: 640px) {
+  .sm\:w-20 {
+    width: 5rem;
+  }
+}
+
 @media (min-width: 1024px) {
   .lg\:max-h-\[500px\] {
     max-height: 500px;
@@ -2936,6 +3020,129 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
 
 /* A canned set of reusabled variant styles. */
 
+/* Imports all Transitions */
+
+.fade-150-enter-active,
+.fade-150-leave-active {
+  transition: opacity 150ms;
+}
+
+.fade-300-enter-active,
+.fade-300-leave-active {
+  transition: opacity 300ms;
+}
+
+.fade-150-enter-from,
+.fade-150-leave-to,
+.fade-300-enter-from,
+.fade-300-leave-to {
+  opacity: 0;
+}
+
+.slide-left-150-enter-active {
+  animation: slide-left 150ms;
+}
+
+.slide-left-150-leave-active {
+  animation: slide-left 150ms reverse;
+}
+
+.slide-left-300-enter-active {
+  animation: slide-left 300ms;
+}
+
+.slide-left-300-leave-active {
+  animation: slide-left 300ms reverse;
+}
+
+@keyframes slide-left {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.slide-top-150-enter-active {
+  animation: slide-top 150ms;
+}
+
+.slide-top-150-leave-active {
+  animation: slide-top 150ms reverse;
+}
+
+.slide-top-300-enter-active {
+  animation: slide-top 300ms;
+}
+
+.slide-top-300-leave-active {
+  animation: slide-top 300ms reverse;
+}
+
+@keyframes slide-top {
+  0% {
+    transform: translateY(-100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.slide-right-150-enter-active {
+  animation: slide-right 150ms;
+}
+
+.slide-right-150-leave-active {
+  animation: slide-right 150ms reverse;
+}
+
+.slide-right-300-enter-active {
+  animation: slide-right 300ms;
+}
+
+.slide-right-300-leave-active {
+  animation: slide-right 300ms reverse;
+}
+
+@keyframes slide-right {
+  0% {
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.slide-bottom-150-enter-active {
+  animation: slide-bottom 150ms;
+}
+
+.slide-bottom-150-leave-active {
+  animation: slide-bottom 150ms reverse;
+}
+
+.slide-bottom-300-enter-active {
+  animation: slide-bottom 300ms;
+}
+
+.slide-bottom-300-leave-active {
+  animation: slide-bottom 300ms reverse;
+}
+
+@keyframes slide-bottom {
+  0% {
+    transform: translateY(100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
 /* Imports all Component Styles */
 
 @font-face{
@@ -3245,10 +3452,18 @@ img,video{
   --tw-backdrop-sepia: 
 }
 
+.fixed{
+  position:fixed
+}
+
 .absolute{
   position:absolute
 }
 
+.z-10{
+  z-index:10
+}
+
 .-m-4{
   margin:-1rem
 }
@@ -3257,6 +3472,10 @@ img,video{
   display:flex
 }
 
+.grid{
+  display:grid
+}
+
 .aspect-square{
   aspect-ratio:1 / 1
 }
@@ -3265,11 +3484,6 @@ img,video{
   height:1.5rem
 }
 
-.h-fit{
-  height:-moz-fit-content;
-  height:fit-content
-}
-
 .h-full{
   height:100%
 }
@@ -3294,15 +3508,30 @@ img,video{
   width:70%
 }
 
-.w-fit{
-  width:-moz-fit-content;
-  width:fit-content
+.w-\[70px\]{
+  width:70px
+}
+
+.w-auto{
+  width:auto
 }
 
 .w-full{
   width:100%
 }
 
+.flex-1{
+  flex:1 1 0%
+}
+
+.flex-auto{
+  flex:1 1 auto
+}
+
+.flex-none{
+  flex:none
+}
+
 .translate-x-\[100\%\]{
   --tw-translate-x: 100%;
   transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
@@ -3318,10 +3547,22 @@ img,video{
   cursor:pointer
 }
 
+.grid-rows-\[auto_1fr_auto\]{
+  grid-template-rows:auto 1fr auto
+}
+
 .flex-col{
   flex-direction:column
 }
 
+.place-content-center{
+  place-content:center
+}
+
+.place-items-center{
+  place-items:center
+}
+
 .items-center{
   align-items:center
 }
@@ -3334,10 +3575,26 @@ img,video{
   justify-content:space-between
 }
 
+.gap-0{
+  gap:0px
+}
+
 .gap-4{
   gap:1rem
 }
 
+.space-y-1>:not([hidden])~:not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom:calc(.25rem * var(--tw-space-y-reverse))
+}
+
+.space-y-1\.5>:not([hidden])~:not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top:calc(.375rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom:calc(.375rem * var(--tw-space-y-reverse))
+}
+
 .space-y-4>:not([hidden])~:not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -3352,6 +3609,10 @@ img,video{
   overflow-y:auto
 }
 
+.overflow-x-hidden{
+  overflow-x:hidden
+}
+
 .whitespace-pre-wrap{
   white-space:pre-wrap
 }
@@ -3373,11 +3634,6 @@ img,video{
   background-color:rgb(var(--color-primary-50) / var(--tw-bg-opacity))
 }
 
-.bg-primary-900{
-  --tw-bg-opacity: 1;
-  background-color:rgb(var(--color-primary-900) / var(--tw-bg-opacity))
-}
-
 .bg-surface-200{
   --tw-bg-opacity: 1;
   background-color:rgb(var(--color-surface-200) / var(--tw-bg-opacity))
@@ -3427,6 +3683,10 @@ img,video{
   line-height:1rem
 }
 
+.font-bold{
+  font-weight:700
+}
+
 .uppercase{
   text-transform:uppercase
 }
@@ -3440,11 +3700,6 @@ img,video{
   color:rgb(255 255 255 / var(--tw-text-opacity))!important
 }
 
-.text-primary-50{
-  --tw-text-opacity: 1;
-  color:rgb(var(--color-primary-50) / var(--tw-text-opacity))
-}
-
 .text-primary-900{
   --tw-text-opacity: 1;
   color:rgb(var(--color-primary-900) / var(--tw-text-opacity))
@@ -3493,10 +3748,6 @@ img,video{
   box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)
 }
 
-.ring-primary-500\/30{
-  --tw-ring-color: rgb(var(--color-primary-500) / .3)
-}
-
 .ring-surface-500\/30{
   --tw-ring-color: rgb(var(--color-surface-500) / .3)
 }
@@ -3564,6 +3815,12 @@ img,video{
   background-color:rgb(var(--color-secondary-900) / .7)
 }
 
+.bg-secondary-active-token{
+  background-color:rgb(var(--color-secondary-500))!important;
+  color:rgb(var(--on-secondary));
+  fill:rgb(var(--on-secondary))
+}
+
 .dark .bg-secondary-50-900-token{
   background-color:rgb(var(--color-secondary-900))
 }
@@ -3824,6 +4081,10 @@ img,video{
   background-color:rgb(var(--color-surface-400))
 }
 
+.border-token{
+  border-width:var(--theme-border-base)
+}
+
 .dark .border-primary-50-900-token{
   border-color:rgb(var(--color-primary-900))
 }
@@ -4702,18 +4963,22 @@ img,video{
   color:rgb(var(--color-primary-900) / var(--tw-text-opacity))
 }
 
+.hover\:bg-secondary-hover-token:hover:hover{
+  background-color:rgb(var(--color-secondary-500) / .1)
+}
+
+@media (min-width: 640px){
+  .sm\:w-20{
+    width:5rem
+  }
+}
+
 @media (min-width: 1024px){
   .lg\:max-h-\[500px\]{
     max-height:500px
   }
 }
 
-.cc-theme-switcher__popup[data-v-3283243a]{
-  position:absolute;
-  z-index:1;
-  margin-top:.25rem
-}
-
 pre code.hljs{
   display:block;
   overflow-x:auto;
@@ -4799,4 +5064,10 @@ code.hljs{
 .hljs-deletion{
   color:#ffdcd7;
   background-color:#67060c
-}
+}
+
+.cc-theme-switcher__popup[data-v-3283243a]{
+  position:absolute;
+  z-index:1;
+  margin-top:.25rem
+}

package/dist/types/components/atoms/VButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/atoms/VButton.vue.d.ts

@@ -1,86 +1,20 @@
-import { CssClasses } from "@/index";
 declare const _default: import("vue").DefineComponent<{
-    bgLight: {
-        type: () => CssClasses;
-        default: string;
-    };
-    bgDark: {
-        type: () => CssClasses;
-        default: string;
-    };
-    textOnLight: {
-        type: () => CssClasses;
-        default: string;
-    };
-    textOnDark: {
-        type: () => CssClasses;
-        default: string;
-    };
-    width: {
-        type: () => CssClasses;
-        default: string;
-    };
-    height: {
-        type: () => CssClasses;
-        default: string;
-    };
-    ring: {
-        type: () => CssClasses;
-        default: string;
-    };
-    rounded: {
-        type: () => CssClasses;
+    tag: {
+        type: () => string;
         default: string;
     };
     msg: {
         type: StringConstructor;
     };
-}, {
-    classes: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    bgLight: {
-        type: () => CssClasses;
-        default: string;
-    };
-    bgDark: {
-        type: () => CssClasses;
-        default: string;
-    };
-    textOnLight: {
-        type: () => CssClasses;
-        default: string;
-    };
-    textOnDark: {
-        type: () => CssClasses;
-        default: string;
-    };
-    width: {
-        type: () => CssClasses;
-        default: string;
-    };
-    height: {
-        type: () => CssClasses;
-        default: string;
-    };
-    ring: {
-        type: () => CssClasses;
-        default: string;
-    };
-    rounded: {
-        type: () => CssClasses;
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: () => string;
         default: string;
     };
     msg: {
         type: StringConstructor;
     };
 }>>, {
-    bgLight: string;
-    bgDark: string;
-    textOnLight: string;
-    textOnDark: string;
-    width: string;
-    height: string;
-    ring: string;
-    rounded: string;
+    tag: string;
 }>;
 export default _default;