@kushagradhawan/kookie-ui 0.1.26 → 0.1.27

package/layout.css

@@ -248,6 +248,160 @@
         max-width: var(--container-4);
     }
 }
+.rt-r-ac-start {
+    align-content: start;
+}
+.rt-r-ac-center {
+    align-content: center;
+}
+.rt-r-ac-end {
+    align-content: end;
+}
+.rt-r-ac-baseline {
+    align-content: baseline;
+}
+.rt-r-ac-stretch {
+    align-content: stretch;
+}
+.rt-r-ac-space-between {
+    align-content: space-between;
+}
+.rt-r-ac-space-around {
+    align-content: space-around;
+}
+.rt-r-ac-space-evenly {
+    align-content: space-evenly;
+}
+@media (min-width: 520px) {
+    .xs\:rt-r-ac-start {
+        align-content: start;
+    }
+    .xs\:rt-r-ac-center {
+        align-content: center;
+    }
+    .xs\:rt-r-ac-end {
+        align-content: end;
+    }
+    .xs\:rt-r-ac-baseline {
+        align-content: baseline;
+    }
+    .xs\:rt-r-ac-stretch {
+        align-content: stretch;
+    }
+    .xs\:rt-r-ac-space-between {
+        align-content: space-between;
+    }
+    .xs\:rt-r-ac-space-around {
+        align-content: space-around;
+    }
+    .xs\:rt-r-ac-space-evenly {
+        align-content: space-evenly;
+    }
+}
+@media (min-width: 768px) {
+    .sm\:rt-r-ac-start {
+        align-content: start;
+    }
+    .sm\:rt-r-ac-center {
+        align-content: center;
+    }
+    .sm\:rt-r-ac-end {
+        align-content: end;
+    }
+    .sm\:rt-r-ac-baseline {
+        align-content: baseline;
+    }
+    .sm\:rt-r-ac-stretch {
+        align-content: stretch;
+    }
+    .sm\:rt-r-ac-space-between {
+        align-content: space-between;
+    }
+    .sm\:rt-r-ac-space-around {
+        align-content: space-around;
+    }
+    .sm\:rt-r-ac-space-evenly {
+        align-content: space-evenly;
+    }
+}
+@media (min-width: 1024px) {
+    .md\:rt-r-ac-start {
+        align-content: start;
+    }
+    .md\:rt-r-ac-center {
+        align-content: center;
+    }
+    .md\:rt-r-ac-end {
+        align-content: end;
+    }
+    .md\:rt-r-ac-baseline {
+        align-content: baseline;
+    }
+    .md\:rt-r-ac-stretch {
+        align-content: stretch;
+    }
+    .md\:rt-r-ac-space-between {
+        align-content: space-between;
+    }
+    .md\:rt-r-ac-space-around {
+        align-content: space-around;
+    }
+    .md\:rt-r-ac-space-evenly {
+        align-content: space-evenly;
+    }
+}
+@media (min-width: 1280px) {
+    .lg\:rt-r-ac-start {
+        align-content: start;
+    }
+    .lg\:rt-r-ac-center {
+        align-content: center;
+    }
+    .lg\:rt-r-ac-end {
+        align-content: end;
+    }
+    .lg\:rt-r-ac-baseline {
+        align-content: baseline;
+    }
+    .lg\:rt-r-ac-stretch {
+        align-content: stretch;
+    }
+    .lg\:rt-r-ac-space-between {
+        align-content: space-between;
+    }
+    .lg\:rt-r-ac-space-around {
+        align-content: space-around;
+    }
+    .lg\:rt-r-ac-space-evenly {
+        align-content: space-evenly;
+    }
+}
+@media (min-width: 1640px) {
+    .xl\:rt-r-ac-start {
+        align-content: start;
+    }
+    .xl\:rt-r-ac-center {
+        align-content: center;
+    }
+    .xl\:rt-r-ac-end {
+        align-content: end;
+    }
+    .xl\:rt-r-ac-baseline {
+        align-content: baseline;
+    }
+    .xl\:rt-r-ac-stretch {
+        align-content: stretch;
+    }
+    .xl\:rt-r-ac-space-between {
+        align-content: space-between;
+    }
+    .xl\:rt-r-ac-space-around {
+        align-content: space-around;
+    }
+    .xl\:rt-r-ac-space-evenly {
+        align-content: space-evenly;
+    }
+}
 .rt-r-ai-start {
     align-items: flex-start;
 }
@@ -349,13 +503,13 @@
     }
 }
 .rt-r-as-start {
-    align-self: flex-start;
+    align-self: start;
 }
 .rt-r-as-center {
     align-self: center;
 }
 .rt-r-as-end {
-    align-self: flex-end;
+    align-self: end;
 }
 .rt-r-as-baseline {
     align-self: baseline;
@@ -365,13 +519,13 @@
 }
 @media (min-width: 520px) {
     .xs\:rt-r-as-start {
-        align-self: flex-start;
+        align-self: start;
     }
     .xs\:rt-r-as-center {
         align-self: center;
     }
     .xs\:rt-r-as-end {
-        align-self: flex-end;
+        align-self: end;
     }
     .xs\:rt-r-as-baseline {
         align-self: baseline;
@@ -382,13 +536,13 @@
 }
 @media (min-width: 768px) {
     .sm\:rt-r-as-start {
-        align-self: flex-start;
+        align-self: start;
     }
     .sm\:rt-r-as-center {
         align-self: center;
     }
     .sm\:rt-r-as-end {
-        align-self: flex-end;
+        align-self: end;
     }
     .sm\:rt-r-as-baseline {
         align-self: baseline;
@@ -399,13 +553,13 @@
 }
 @media (min-width: 1024px) {
     .md\:rt-r-as-start {
-        align-self: flex-start;
+        align-self: start;
     }
     .md\:rt-r-as-center {
         align-self: center;
     }
     .md\:rt-r-as-end {
-        align-self: flex-end;
+        align-self: end;
     }
     .md\:rt-r-as-baseline {
         align-self: baseline;
@@ -416,13 +570,13 @@
 }
 @media (min-width: 1280px) {
     .lg\:rt-r-as-start {
-        align-self: flex-start;
+        align-self: start;
     }
     .lg\:rt-r-as-center {
         align-self: center;
     }
     .lg\:rt-r-as-end {
-        align-self: flex-end;
+        align-self: end;
     }
     .lg\:rt-r-as-baseline {
         align-self: baseline;
@@ -433,13 +587,13 @@
 }
 @media (min-width: 1640px) {
     .xl\:rt-r-as-start {
-        align-self: flex-start;
+        align-self: start;
     }
     .xl\:rt-r-as-center {
         align-self: center;
     }
     .xl\:rt-r-as-end {
-        align-self: flex-end;
+        align-self: end;
     }
     .xl\:rt-r-as-baseline {
         align-self: baseline;
@@ -4408,6 +4562,206 @@
         justify-content: space-between;
     }
 }
+.rt-r-ji-start {
+    justify-items: start;
+}
+.rt-r-ji-center {
+    justify-items: center;
+}
+.rt-r-ji-end {
+    justify-items: end;
+}
+.rt-r-ji-baseline {
+    justify-items: baseline;
+}
+.rt-r-ji-stretch {
+    justify-items: stretch;
+}
+@media (min-width: 520px) {
+    .xs\:rt-r-ji-start {
+        justify-items: start;
+    }
+    .xs\:rt-r-ji-center {
+        justify-items: center;
+    }
+    .xs\:rt-r-ji-end {
+        justify-items: end;
+    }
+    .xs\:rt-r-ji-baseline {
+        justify-items: baseline;
+    }
+    .xs\:rt-r-ji-stretch {
+        justify-items: stretch;
+    }
+}
+@media (min-width: 768px) {
+    .sm\:rt-r-ji-start {
+        justify-items: start;
+    }
+    .sm\:rt-r-ji-center {
+        justify-items: center;
+    }
+    .sm\:rt-r-ji-end {
+        justify-items: end;
+    }
+    .sm\:rt-r-ji-baseline {
+        justify-items: baseline;
+    }
+    .sm\:rt-r-ji-stretch {
+        justify-items: stretch;
+    }
+}
+@media (min-width: 1024px) {
+    .md\:rt-r-ji-start {
+        justify-items: start;
+    }
+    .md\:rt-r-ji-center {
+        justify-items: center;
+    }
+    .md\:rt-r-ji-end {
+        justify-items: end;
+    }
+    .md\:rt-r-ji-baseline {
+        justify-items: baseline;
+    }
+    .md\:rt-r-ji-stretch {
+        justify-items: stretch;
+    }
+}
+@media (min-width: 1280px) {
+    .lg\:rt-r-ji-start {
+        justify-items: start;
+    }
+    .lg\:rt-r-ji-center {
+        justify-items: center;
+    }
+    .lg\:rt-r-ji-end {
+        justify-items: end;
+    }
+    .lg\:rt-r-ji-baseline {
+        justify-items: baseline;
+    }
+    .lg\:rt-r-ji-stretch {
+        justify-items: stretch;
+    }
+}
+@media (min-width: 1640px) {
+    .xl\:rt-r-ji-start {
+        justify-items: start;
+    }
+    .xl\:rt-r-ji-center {
+        justify-items: center;
+    }
+    .xl\:rt-r-ji-end {
+        justify-items: end;
+    }
+    .xl\:rt-r-ji-baseline {
+        justify-items: baseline;
+    }
+    .xl\:rt-r-ji-stretch {
+        justify-items: stretch;
+    }
+}
+.rt-r-js-start {
+    justify-self: start;
+}
+.rt-r-js-center {
+    justify-self: center;
+}
+.rt-r-js-end {
+    justify-self: end;
+}
+.rt-r-js-baseline {
+    justify-self: baseline;
+}
+.rt-r-js-stretch {
+    justify-self: stretch;
+}
+@media (min-width: 520px) {
+    .xs\:rt-r-js-start {
+        justify-self: start;
+    }
+    .xs\:rt-r-js-center {
+        justify-self: center;
+    }
+    .xs\:rt-r-js-end {
+        justify-self: end;
+    }
+    .xs\:rt-r-js-baseline {
+        justify-self: baseline;
+    }
+    .xs\:rt-r-js-stretch {
+        justify-self: stretch;
+    }
+}
+@media (min-width: 768px) {
+    .sm\:rt-r-js-start {
+        justify-self: start;
+    }
+    .sm\:rt-r-js-center {
+        justify-self: center;
+    }
+    .sm\:rt-r-js-end {
+        justify-self: end;
+    }
+    .sm\:rt-r-js-baseline {
+        justify-self: baseline;
+    }
+    .sm\:rt-r-js-stretch {
+        justify-self: stretch;
+    }
+}
+@media (min-width: 1024px) {
+    .md\:rt-r-js-start {
+        justify-self: start;
+    }
+    .md\:rt-r-js-center {
+        justify-self: center;
+    }
+    .md\:rt-r-js-end {
+        justify-self: end;
+    }
+    .md\:rt-r-js-baseline {
+        justify-self: baseline;
+    }
+    .md\:rt-r-js-stretch {
+        justify-self: stretch;
+    }
+}
+@media (min-width: 1280px) {
+    .lg\:rt-r-js-start {
+        justify-self: start;
+    }
+    .lg\:rt-r-js-center {
+        justify-self: center;
+    }
+    .lg\:rt-r-js-end {
+        justify-self: end;
+    }
+    .lg\:rt-r-js-baseline {
+        justify-self: baseline;
+    }
+    .lg\:rt-r-js-stretch {
+        justify-self: stretch;
+    }
+}
+@media (min-width: 1640px) {
+    .xl\:rt-r-js-start {
+        justify-self: start;
+    }
+    .xl\:rt-r-js-center {
+        justify-self: center;
+    }
+    .xl\:rt-r-js-end {
+        justify-self: end;
+    }
+    .xl\:rt-r-js-baseline {
+        justify-self: baseline;
+    }
+    .xl\:rt-r-js-stretch {
+        justify-self: stretch;
+    }
+}
 .rt-r-m,
 .rt-r-m-0,
 .rt-r-m-1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
   "keywords": [
     "react",

package/src/components/grid.props.tsx

@@ -10,6 +10,17 @@ const rowsValues = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
 const flowValues = ['row', 'column', 'dense', 'row-dense', 'column-dense'] as const;
 const alignValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
 const justifyValues = ['start', 'center', 'end', 'between'] as const;
+const alignContentValues = [
+  'start',
+  'center',
+  'end',
+  'baseline',
+  'between',
+  'around',
+  'evenly',
+  'stretch',
+] as const;
+const justifyItemsValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
 
 const gridPropDefs = {
   /**
@@ -150,6 +161,41 @@ const gridPropDefs = {
     parseValue: parseJustifyValue,
     responsive: true,
   },
+  /**
+   * Sets the CSS **align-content** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * alignContent="between"
+   * alignContent={{ sm: 'start', lg: 'center' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
+   */
+  alignContent: {
+    type: 'enum',
+    className: 'rt-r-ac',
+    values: alignContentValues,
+    parseValue: parseAlignContentValue,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **justify-items** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * justifyItems="center"
+   * justifyItems={{ sm: 'start', lg: 'center' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
+   */
+  justifyItems: {
+    type: 'enum',
+    className: 'rt-r-ji',
+    values: justifyItemsValues,
+    responsive: true,
+  },
   ...gapPropDefs,
 } satisfies {
   as: PropDef<(typeof as)[number]>;
@@ -160,6 +206,8 @@ const gridPropDefs = {
   flow: PropDef<(typeof flowValues)[number]>;
   align: PropDef<(typeof alignValues)[number]>;
   justify: PropDef<(typeof justifyValues)[number]>;
+  alignContent: PropDef<(typeof alignContentValues)[number]>;
+  justifyItems: PropDef<(typeof justifyItemsValues)[number]>;
 };
 
 function parseGridValue(value: string): string {
@@ -174,6 +222,16 @@ function parseJustifyValue(value: string) {
   return value === 'between' ? 'space-between' : value;
 }
 
+function parseAlignContentValue(value: string) {
+  return value === 'between'
+    ? 'space-between'
+    : value === 'around'
+      ? 'space-around'
+      : value === 'evenly'
+        ? 'space-evenly'
+        : value;
+}
+
 // Use all of the imported prop defs to ensure that JSDoc works
 type GridOwnProps = GetPropDefTypes<typeof gridPropDefs & typeof asChildPropDef>;
 

package/src/props/layout.props.ts

@@ -10,6 +10,8 @@ const positionValues = ['static', 'relative', 'absolute', 'fixed', 'sticky'] as
 const positionEdgeValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9'] as const;
 const flexShrinkValues = ['0', '1'] as const;
 const flexGrowValues = ['0', '1'] as const;
+const alignSelfValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
+const justifySelfValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
 
 const layoutPropDefs = {
   ...paddingPropDefs,
@@ -358,6 +360,40 @@ const layoutPropDefs = {
     customProperties: ['--grid-row-end'],
     responsive: true,
   },
+  /**
+   * Sets the CSS **align-self** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * alignSelf="center"
+   * alignSelf={{ sm: 'start', lg: 'center' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
+   */
+  alignSelf: {
+    type: 'enum',
+    className: 'rt-r-as',
+    values: alignSelfValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **justify-self** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * justifySelf="center"
+   * justifySelf={{ sm: 'start', lg: 'center' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
+   */
+  justifySelf: {
+    type: 'enum',
+    className: 'rt-r-js',
+    values: justifySelfValues,
+    responsive: true,
+  },
 } satisfies {
   position: PropDef<(typeof positionValues)[number]>;
   inset: PropDef<(typeof positionEdgeValues)[number]>;
@@ -378,6 +414,8 @@ const layoutPropDefs = {
   gridRowStart: PropDef<string>;
   gridRowEnd: PropDef<string>;
   gridArea: PropDef<string>;
+  alignSelf: PropDef<(typeof alignSelfValues)[number]>;
+  justifySelf: PropDef<(typeof justifySelfValues)[number]>;
 };
 
 // Use all of the imported prop defs to ensure that JSDoc works

package/src/styles/utilities/align-content.css

@@ -0,0 +1,33 @@
+@breakpoints {
+  .rt-r-ac-start {
+    align-content: start;
+  }
+
+  .rt-r-ac-center {
+    align-content: center;
+  }
+
+  .rt-r-ac-end {
+    align-content: end;
+  }
+
+  .rt-r-ac-baseline {
+    align-content: baseline;
+  }
+
+  .rt-r-ac-stretch {
+    align-content: stretch;
+  }
+
+  .rt-r-ac-space-between {
+    align-content: space-between;
+  }
+
+  .rt-r-ac-space-around {
+    align-content: space-around;
+  }
+
+  .rt-r-ac-space-evenly {
+    align-content: space-evenly;
+  }
+}

package/src/styles/utilities/align-self.css

@@ -1,6 +1,6 @@
 @breakpoints {
   .rt-r-as-start {
-    align-self: flex-start;
+    align-self: start;
   }
 
   .rt-r-as-center {
@@ -8,7 +8,7 @@
   }
 
   .rt-r-as-end {
-    align-self: flex-end;
+    align-self: end;
   }
 
   .rt-r-as-baseline {

package/src/styles/utilities/justify-items.css

@@ -0,0 +1,21 @@
+@breakpoints {
+  .rt-r-ji-start {
+    justify-items: start;
+  }
+
+  .rt-r-ji-center {
+    justify-items: center;
+  }
+
+  .rt-r-ji-end {
+    justify-items: end;
+  }
+
+  .rt-r-ji-baseline {
+    justify-items: baseline;
+  }
+
+  .rt-r-ji-stretch {
+    justify-items: stretch;
+  }
+}

package/src/styles/utilities/justify-self.css

@@ -0,0 +1,21 @@
+@breakpoints {
+  .rt-r-js-start {
+    justify-self: start;
+  }
+
+  .rt-r-js-center {
+    justify-self: center;
+  }
+
+  .rt-r-js-end {
+    justify-self: end;
+  }
+
+  .rt-r-js-baseline {
+    justify-self: baseline;
+  }
+
+  .rt-r-js-stretch {
+    justify-self: stretch;
+  }
+}