@kushagradhawan/kookie-ui 0.1.0

package/src/styles/utilities/max-height.css

@@ -0,0 +1,28 @@
+.rt-r-max-h {
+  max-height: var(--max-height);
+}
+@media (--xs) {
+  .xs\:rt-r-max-h {
+    max-height: var(--max-height-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-max-h {
+    max-height: var(--max-height-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-max-h {
+    max-height: var(--max-height-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-max-h {
+    max-height: var(--max-height-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-max-h {
+    max-height: var(--max-height-xl);
+  }
+}

package/src/styles/utilities/max-width.css

@@ -0,0 +1,28 @@
+.rt-r-max-w {
+  max-width: var(--max-width);
+}
+@media (--xs) {
+  .xs\:rt-r-max-w {
+    max-width: var(--max-width-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-max-w {
+    max-width: var(--max-width-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-max-w {
+    max-width: var(--max-width-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-max-w {
+    max-width: var(--max-width-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-max-w {
+    max-width: var(--max-width-xl);
+  }
+}

package/src/styles/utilities/min-height.css

@@ -0,0 +1,28 @@
+.rt-r-min-h {
+  min-height: var(--min-height);
+}
+@media (--xs) {
+  .xs\:rt-r-min-h {
+    min-height: var(--min-height-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-min-h {
+    min-height: var(--min-height-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-min-h {
+    min-height: var(--min-height-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-min-h {
+    min-height: var(--min-height-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-min-h {
+    min-height: var(--min-height-xl);
+  }
+}

package/src/styles/utilities/min-width.css

@@ -0,0 +1,28 @@
+.rt-r-min-w {
+  min-width: var(--min-width);
+}
+@media (--xs) {
+  .xs\:rt-r-min-w {
+    min-width: var(--min-width-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-min-w {
+    min-width: var(--min-width-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-min-w {
+    min-width: var(--min-width-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-min-w {
+    min-width: var(--min-width-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-min-w {
+    min-width: var(--min-width-xl);
+  }
+}

package/src/styles/utilities/overflow.css

@@ -0,0 +1,49 @@
+@breakpoints {
+  .rt-r-overflow-visible {
+    overflow: visible;
+  }
+  .rt-r-overflow-hidden {
+    overflow: hidden;
+  }
+  .rt-r-overflow-clip {
+    overflow: clip;
+  }
+  .rt-r-overflow-scroll {
+    overflow: scroll;
+  }
+  .rt-r-overflow-auto {
+    overflow: auto;
+  }
+
+  .rt-r-ox-visible {
+    overflow-x: visible;
+  }
+  .rt-r-ox-hidden {
+    overflow-x: hidden;
+  }
+  .rt-r-ox-clip {
+    overflow-x: clip;
+  }
+  .rt-r-ox-scroll {
+    overflow-x: scroll;
+  }
+  .rt-r-ox-auto {
+    overflow-x: auto;
+  }
+
+  .rt-r-oy-visible {
+    overflow-y: visible;
+  }
+  .rt-r-oy-hidden {
+    overflow-y: hidden;
+  }
+  .rt-r-oy-clip {
+    overflow-y: clip;
+  }
+  .rt-r-oy-scroll {
+    overflow-y: scroll;
+  }
+  .rt-r-oy-auto {
+    overflow-y: auto;
+  }
+}

package/src/styles/utilities/padding.css

@@ -0,0 +1,554 @@
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*              All sides              */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-p {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-p-0 {
+    padding: 0;
+  }
+  .rt-r-p-1 {
+    padding: var(--space-1);
+  }
+  .rt-r-p-2 {
+    padding: var(--space-2);
+  }
+  .rt-r-p-3 {
+    padding: var(--space-3);
+  }
+  .rt-r-p-4 {
+    padding: var(--space-4);
+  }
+  .rt-r-p-5 {
+    padding: var(--space-5);
+  }
+  .rt-r-p-6 {
+    padding: var(--space-6);
+  }
+  .rt-r-p-7 {
+    padding: var(--space-7);
+  }
+  .rt-r-p-8 {
+    padding: var(--space-8);
+  }
+  .rt-r-p-9 {
+    padding: var(--space-9);
+  }
+  .rt-r-p-inset {
+    padding-top: var(--inset-padding-top);
+    padding-right: var(--inset-padding-right);
+    padding-bottom: var(--inset-padding-bottom);
+    padding-left: var(--inset-padding-left);
+  }
+}
+
+.rt-r-p {
+  padding: var(--p);
+}
+@media (--xs) {
+  .xs\:rt-r-p {
+    padding: var(--p-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-p {
+    padding: var(--p-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-p {
+    padding: var(--p-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-p {
+    padding: var(--p-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-p {
+    padding: var(--p-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*           Left and right            */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-px {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-px-0 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .rt-r-px-1 {
+    padding-left: var(--space-1);
+    padding-right: var(--space-1);
+  }
+  .rt-r-px-2 {
+    padding-left: var(--space-2);
+    padding-right: var(--space-2);
+  }
+  .rt-r-px-3 {
+    padding-left: var(--space-3);
+    padding-right: var(--space-3);
+  }
+  .rt-r-px-4 {
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+  }
+  .rt-r-px-5 {
+    padding-left: var(--space-5);
+    padding-right: var(--space-5);
+  }
+  .rt-r-px-6 {
+    padding-left: var(--space-6);
+    padding-right: var(--space-6);
+  }
+  .rt-r-px-7 {
+    padding-left: var(--space-7);
+    padding-right: var(--space-7);
+  }
+  .rt-r-px-8 {
+    padding-left: var(--space-8);
+    padding-right: var(--space-8);
+  }
+  .rt-r-px-9 {
+    padding-left: var(--space-9);
+    padding-right: var(--space-9);
+  }
+  .rt-r-px-inset {
+    padding-left: var(--inset-padding-left);
+    padding-right: var(--inset-padding-right);
+  }
+}
+
+.rt-r-px {
+  padding-left: var(--pl);
+  padding-right: var(--pr);
+}
+@media (--xs) {
+  .xs\:rt-r-px {
+    padding-left: var(--pl-xs);
+    padding-right: var(--pr-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-px {
+    padding-left: var(--pl-sm);
+    padding-right: var(--pr-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-px {
+    padding-left: var(--pl-md);
+    padding-right: var(--pr-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-px {
+    padding-left: var(--pl-lg);
+    padding-right: var(--pr-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-px {
+    padding-left: var(--pl-xl);
+    padding-right: var(--pr-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*           Top and bottom            */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-py {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-py-0 {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .rt-r-py-1 {
+    padding-top: var(--space-1);
+    padding-bottom: var(--space-1);
+  }
+  .rt-r-py-2 {
+    padding-top: var(--space-2);
+    padding-bottom: var(--space-2);
+  }
+  .rt-r-py-3 {
+    padding-top: var(--space-3);
+    padding-bottom: var(--space-3);
+  }
+  .rt-r-py-4 {
+    padding-top: var(--space-4);
+    padding-bottom: var(--space-4);
+  }
+  .rt-r-py-5 {
+    padding-top: var(--space-5);
+    padding-bottom: var(--space-5);
+  }
+  .rt-r-py-6 {
+    padding-top: var(--space-6);
+    padding-bottom: var(--space-6);
+  }
+  .rt-r-py-7 {
+    padding-top: var(--space-7);
+    padding-bottom: var(--space-7);
+  }
+  .rt-r-py-8 {
+    padding-top: var(--space-8);
+    padding-bottom: var(--space-8);
+  }
+  .rt-r-py-9 {
+    padding-top: var(--space-9);
+    padding-bottom: var(--space-9);
+  }
+  .rt-r-py-inset {
+    padding-top: var(--inset-padding-top);
+    padding-bottom: var(--inset-padding-bottom);
+  }
+}
+
+.rt-r-py {
+  padding-top: var(--pt);
+  padding-bottom: var(--pb);
+}
+@media (--xs) {
+  .xs\:rt-r-py {
+    padding-top: var(--pt-xs);
+    padding-bottom: var(--pb-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-py {
+    padding-top: var(--pt-sm);
+    padding-bottom: var(--pb-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-py {
+    padding-top: var(--pt-md);
+    padding-bottom: var(--pb-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-py {
+    padding-top: var(--pt-lg);
+    padding-bottom: var(--pb-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-py {
+    padding-top: var(--pt-xl);
+    padding-bottom: var(--pb-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                 Top                 */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-pt {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-pt-0 {
+    padding-top: 0;
+  }
+  .rt-r-pt-1 {
+    padding-top: var(--space-1);
+  }
+  .rt-r-pt-2 {
+    padding-top: var(--space-2);
+  }
+  .rt-r-pt-3 {
+    padding-top: var(--space-3);
+  }
+  .rt-r-pt-4 {
+    padding-top: var(--space-4);
+  }
+  .rt-r-pt-5 {
+    padding-top: var(--space-5);
+  }
+  .rt-r-pt-6 {
+    padding-top: var(--space-6);
+  }
+  .rt-r-pt-7 {
+    padding-top: var(--space-7);
+  }
+  .rt-r-pt-8 {
+    padding-top: var(--space-8);
+  }
+  .rt-r-pt-9 {
+    padding-top: var(--space-9);
+  }
+  .rt-r-pt-inset {
+    padding-top: var(--inset-padding-top);
+  }
+}
+
+.rt-r-pt {
+  padding-top: var(--pt);
+}
+@media (--xs) {
+  .xs\:rt-r-pt {
+    padding-top: var(--pt-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-pt {
+    padding-top: var(--pt-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-pt {
+    padding-top: var(--pt-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-pt {
+    padding-top: var(--pt-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-pt {
+    padding-top: var(--pt-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                Right                */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-pr {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-pr-0 {
+    padding-right: 0;
+  }
+  .rt-r-pr-1 {
+    padding-right: var(--space-1);
+  }
+  .rt-r-pr-2 {
+    padding-right: var(--space-2);
+  }
+  .rt-r-pr-3 {
+    padding-right: var(--space-3);
+  }
+  .rt-r-pr-4 {
+    padding-right: var(--space-4);
+  }
+  .rt-r-pr-5 {
+    padding-right: var(--space-5);
+  }
+  .rt-r-pr-6 {
+    padding-right: var(--space-6);
+  }
+  .rt-r-pr-7 {
+    padding-right: var(--space-7);
+  }
+  .rt-r-pr-8 {
+    padding-right: var(--space-8);
+  }
+  .rt-r-pr-9 {
+    padding-right: var(--space-9);
+  }
+  .rt-r-pr-inset {
+    padding-right: var(--inset-padding-right);
+  }
+}
+
+.rt-r-pr {
+  padding-right: var(--pr);
+}
+@media (--xs) {
+  .xs\:rt-r-pr {
+    padding-right: var(--pr-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-pr {
+    padding-right: var(--pr-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-pr {
+    padding-right: var(--pr-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-pr {
+    padding-right: var(--pr-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-pr {
+    padding-right: var(--pr-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*               Bottom                */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-pb {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-pb-0 {
+    padding-bottom: 0;
+  }
+  .rt-r-pb-1 {
+    padding-bottom: var(--space-1);
+  }
+  .rt-r-pb-2 {
+    padding-bottom: var(--space-2);
+  }
+  .rt-r-pb-3 {
+    padding-bottom: var(--space-3);
+  }
+  .rt-r-pb-4 {
+    padding-bottom: var(--space-4);
+  }
+  .rt-r-pb-5 {
+    padding-bottom: var(--space-5);
+  }
+  .rt-r-pb-6 {
+    padding-bottom: var(--space-6);
+  }
+  .rt-r-pb-7 {
+    padding-bottom: var(--space-7);
+  }
+  .rt-r-pb-8 {
+    padding-bottom: var(--space-8);
+  }
+  .rt-r-pb-9 {
+    padding-bottom: var(--space-9);
+  }
+  .rt-r-pb-inset {
+    padding-bottom: var(--inset-padding-bottom);
+  }
+}
+
+.rt-r-pb {
+  padding-bottom: var(--pb);
+}
+@media (--xs) {
+  .xs\:rt-r-pb {
+    padding-bottom: var(--pb-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-pb {
+    padding-bottom: var(--pb-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-pb {
+    padding-bottom: var(--pb-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-pb {
+    padding-bottom: var(--pb-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-pb {
+    padding-bottom: var(--pb-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                Left                 */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-pl {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-pl-0 {
+    padding-left: 0;
+  }
+  .rt-r-pl-1 {
+    padding-left: var(--space-1);
+  }
+  .rt-r-pl-2 {
+    padding-left: var(--space-2);
+  }
+  .rt-r-pl-3 {
+    padding-left: var(--space-3);
+  }
+  .rt-r-pl-4 {
+    padding-left: var(--space-4);
+  }
+  .rt-r-pl-5 {
+    padding-left: var(--space-5);
+  }
+  .rt-r-pl-6 {
+    padding-left: var(--space-6);
+  }
+  .rt-r-pl-7 {
+    padding-left: var(--space-7);
+  }
+  .rt-r-pl-8 {
+    padding-left: var(--space-8);
+  }
+  .rt-r-pl-9 {
+    padding-left: var(--space-9);
+  }
+  .rt-r-pl-inset {
+    padding-left: var(--inset-padding-left);
+  }
+}
+
+.rt-r-pl {
+  padding-left: var(--pl);
+}
+@media (--xs) {
+  .xs\:rt-r-pl {
+    padding-left: var(--pl-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-pl {
+    padding-left: var(--pl-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-pl {
+    padding-left: var(--pl-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-pl {
+    padding-left: var(--pl-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-pl {
+    padding-left: var(--pl-xl);
+  }
+}

package/src/styles/utilities/position.css

@@ -0,0 +1,21 @@
+@breakpoints {
+  .rt-r-position-static {
+    position: static;
+  }
+
+  .rt-r-position-absolute {
+    position: absolute;
+  }
+
+  .rt-r-position-relative {
+    position: relative;
+  }
+
+  .rt-r-position-fixed {
+    position: fixed;
+  }
+
+  .rt-r-position-sticky {
+    position: sticky;
+  }
+}