@seeqdev/qomponents 0.0.2 → 0.0.4

package/dist/styles.css

@@ -1602,6 +1602,84 @@ video {
     --tw-backdrop-sepia:  ;
 }
 
+.tw-form-checkbox,.tw-form-radio {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    padding: 0;
+    -webkit-print-color-adjust: exact;
+            print-color-adjust: exact;
+    display: inline-block;
+    vertical-align: middle;
+    background-origin: border-box;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    flex-shrink: 0;
+    height: 1rem;
+    width: 1rem;
+    color: #2563eb;
+    background-color: #fff;
+    border-color: #6b7280;
+    border-width: 1px;
+    --tw-shadow: 0 0 #0000;
+}
+
+.tw-form-checkbox {
+    border-radius: 0px;
+}
+
+.tw-form-radio {
+    border-radius: 100%;
+}
+
+.tw-form-checkbox:focus,.tw-form-radio:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: #2563eb;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+.tw-form-checkbox:checked,.tw-form-radio:checked {
+    border-color: transparent;
+    background-color: currentColor;
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.tw-form-checkbox:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+.tw-form-radio:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+.tw-form-checkbox:checked:hover,.tw-form-checkbox:checked:focus,.tw-form-radio:checked:hover,.tw-form-radio:checked:focus {
+    border-color: transparent;
+    background-color: currentColor;
+}
+
+.tw-form-checkbox:indeterminate {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+    border-color: transparent;
+    background-color: currentColor;
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.tw-form-checkbox:indeterminate:hover,.tw-form-checkbox:indeterminate:focus {
+    border-color: transparent;
+    background-color: currentColor;
+}
+
 .tw-absolute {
     position: absolute;
 }
@@ -1638,6 +1716,14 @@ video {
     z-index: 50;
 }
 
+.tw-ml-1 {
+    margin-left: 0.25rem;
+}
+
+.tw-ml-1\.5 {
+    margin-left: 0.375rem;
+}
+
 .tw-mr-1 {
     margin-right: 0.25rem;
 }
@@ -1646,6 +1732,10 @@ video {
     display: inline-block;
 }
 
+.tw-flex {
+    display: flex;
+}
+
 .tw-grid {
     display: grid;
 }
@@ -1654,6 +1744,22 @@ video {
     display: none;
 }
 
+.tw-h-3 {
+    height: 0.75rem;
+}
+
+.tw-h-3\.5 {
+    height: 0.875rem;
+}
+
+.tw-w-3 {
+    width: 0.75rem;
+}
+
+.tw-w-3\.5 {
+    width: 0.875rem;
+}
+
 .-tw-translate-x-1\/2 {
     --tw-translate-x: -50%;
     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));
@@ -1684,6 +1790,14 @@ video {
     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));
 }
 
+.tw-cursor-not-allowed {
+    cursor: not-allowed;
+}
+
+.tw-cursor-pointer {
+    cursor: pointer;
+}
+
 .tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1696,6 +1810,10 @@ video {
     grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
+.tw-items-center {
+    align-items: center;
+}
+
 .tw-gap-4 {
     gap: 1rem;
 }
@@ -1878,6 +1996,14 @@ video {
 
 /* Make sure to keep these colors in sync with the webserver/_custom_variables.scss values to ensure cohesive UIs */
 
+[type='checkbox']:checked, [type='radio']:checked {
+    background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
+}
+
+.tw-dark [type='checkbox']:checked, .tw-dark [type='radio']:checked {
+    background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
+}
+
 .before\:tw-absolute::before {
     content: var(--tw-content);
     position: absolute;
@@ -1985,6 +2111,11 @@ video {
     content: var(--tw-content);
 }
 
+.checked\:tw-text-sq-text-color:checked {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-text-color), var(--tw-text-opacity));
+}
+
 .hover\:tw-bg-sq-color-highlight:hover {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--sq-color-highlight), var(--tw-bg-opacity));
@@ -2015,6 +2146,11 @@ video {
     background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
 }
 
+.focus\:tw-outline-none:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+
 .focus\:tw-ring-0:focus {
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2022,6 +2158,10 @@ video {
     --tw-ring-color: r;
 }
 
+.focus\:tw-ring-offset-0:focus {
+    --tw-ring-offset-width: 0px;
+}
+
 .active\:tw-border-sq-color-dark:active {
     --tw-border-opacity: 1;
     border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
@@ -2044,6 +2184,11 @@ video {
     --tw-bg-opacity: 0.5;
 }
 
+.disabled\:tw-text-sq-fairly-dark-gray:disabled {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-fairly-dark-gray), var(--tw-text-opacity));
+}
+
 .tw-group:hover .group-hover\:tw-inline-block {
     display: inline-block;
 }
@@ -2057,6 +2202,11 @@ video {
     border-color: rgba(var(--sq-dark-disabled-gray), var(--tw-border-opacity));
 }
 
+.tw-dark .dark\:tw-border-sq-dark-text {
+    --tw-border-opacity: 1;
+    border-color: rgba(var(--sq-dark-text), var(--tw-border-opacity));
+}
+
 .tw-dark .dark\:tw-bg-sq-color-dark {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--sq-color-dark), var(--tw-bg-opacity));
@@ -2087,6 +2237,11 @@ video {
     color: rgba(var(--sq-dark-text), var(--tw-text-opacity));
 }
 
+.tw-dark .dark\:tw-text-sq-fairly-dark-gray {
+    --tw-text-opacity: 1;
+    color: rgba(var(--sq-fairly-dark-gray), var(--tw-text-opacity));
+}
+
 .tw-dark .dark\:tw-text-sq-link-dark {
     --tw-text-opacity: 1;
     color: rgba(var(--sq-link-dark), var(--tw-text-opacity));
@@ -2097,6 +2252,11 @@ video {
     color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.tw-dark .dark\:checked\:tw-bg-sq-dark-text:checked {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--sq-dark-text), var(--tw-bg-opacity));
+}
+
 .tw-dark .dark\:hover\:tw-bg-sq-color-highlight:hover {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--sq-color-highlight), var(--tw-bg-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -36,6 +36,7 @@
     "@ladle/react": "2.9.0",
     "@rollup/plugin-commonjs": "24.0.1",
     "@rollup/plugin-node-resolve": "15.0.1",
+    "@tailwindcss/forms": "0.5.3",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",