@womp/kookie-ui 0.21.0 → 0.22.1

package/src/props/layout.props.ts

@@ -7,7 +7,7 @@ import type { PropDef, GetPropDefTypes } from './prop-def.js';
 const overflowValues = ['visible', 'hidden', 'clip', 'scroll', 'auto'] as const;
 const positionValues = ['static', 'relative', 'absolute', 'fixed', 'sticky'] as const;
 // prettier-ignore
-const positionEdgeValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9'] as const;
+const positionEdgeValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '-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;
@@ -30,7 +30,7 @@ const layoutPropDefs = {
    */
   position: {
     type: 'enum',
-    className: 'rt-r-position',
+    className: 'kui-r-position',
     values: positionValues,
     responsive: true,
   },
@@ -48,7 +48,7 @@ const layoutPropDefs = {
    */
   inset: {
     type: 'enum | string',
-    className: 'rt-r-inset',
+    className: 'kui-r-inset',
     customProperties: ['--inset'],
     values: positionEdgeValues,
     responsive: true,
@@ -67,7 +67,7 @@ const layoutPropDefs = {
    */
   top: {
     type: 'enum | string',
-    className: 'rt-r-top',
+    className: 'kui-r-top',
     customProperties: ['--top'],
     values: positionEdgeValues,
     responsive: true,
@@ -86,7 +86,7 @@ const layoutPropDefs = {
    */
   right: {
     type: 'enum | string',
-    className: 'rt-r-right',
+    className: 'kui-r-right',
     customProperties: ['--right'],
     values: positionEdgeValues,
     responsive: true,
@@ -105,7 +105,7 @@ const layoutPropDefs = {
    */
   bottom: {
     type: 'enum | string',
-    className: 'rt-r-bottom',
+    className: 'kui-r-bottom',
     customProperties: ['--bottom'],
     values: positionEdgeValues,
     responsive: true,
@@ -124,7 +124,7 @@ const layoutPropDefs = {
    */
   left: {
     type: 'enum | string',
-    className: 'rt-r-left',
+    className: 'kui-r-left',
     customProperties: ['--left'],
     values: positionEdgeValues,
     responsive: true,
@@ -142,7 +142,7 @@ const layoutPropDefs = {
    */
   overflow: {
     type: 'enum',
-    className: 'rt-r-overflow',
+    className: 'kui-r-overflow',
     values: overflowValues,
     responsive: true,
   },
@@ -159,7 +159,7 @@ const layoutPropDefs = {
    */
   overflowX: {
     type: 'enum',
-    className: 'rt-r-ox',
+    className: 'kui-r-ox',
     values: overflowValues,
     responsive: true,
   },
@@ -176,7 +176,7 @@ const layoutPropDefs = {
    */
   overflowY: {
     type: 'enum',
-    className: 'rt-r-oy',
+    className: 'kui-r-oy',
     values: overflowValues,
     responsive: true,
   },
@@ -194,7 +194,7 @@ const layoutPropDefs = {
    */
   flexBasis: {
     type: 'string',
-    className: 'rt-r-fb',
+    className: 'kui-r-fb',
     customProperties: ['--flex-basis'],
     responsive: true,
   },
@@ -212,7 +212,7 @@ const layoutPropDefs = {
    */
   flexShrink: {
     type: 'enum | string',
-    className: 'rt-r-fs',
+    className: 'kui-r-fs',
     customProperties: ['--flex-shrink'],
     values: flexShrinkValues,
     responsive: true,
@@ -231,7 +231,7 @@ const layoutPropDefs = {
    */
   flexGrow: {
     type: 'enum | string',
-    className: 'rt-r-fg',
+    className: 'kui-r-fg',
     customProperties: ['--flex-grow'],
     values: flexGrowValues,
     responsive: true,
@@ -248,7 +248,7 @@ const layoutPropDefs = {
    */
   gridArea: {
     type: 'string',
-    className: 'rt-r-ga',
+    className: 'kui-r-ga',
     customProperties: ['--grid-area'],
     responsive: true,
   },
@@ -266,7 +266,7 @@ const layoutPropDefs = {
    */
   gridColumn: {
     type: 'string',
-    className: 'rt-r-gc',
+    className: 'kui-r-gc',
     customProperties: ['--grid-column'],
     responsive: true,
   },
@@ -284,7 +284,7 @@ const layoutPropDefs = {
    */
   gridColumnStart: {
     type: 'string',
-    className: 'rt-r-gcs',
+    className: 'kui-r-gcs',
     customProperties: ['--grid-column-start'],
     responsive: true,
   },
@@ -302,7 +302,7 @@ const layoutPropDefs = {
    */
   gridColumnEnd: {
     type: 'string',
-    className: 'rt-r-gce',
+    className: 'kui-r-gce',
     customProperties: ['--grid-column-end'],
     responsive: true,
   },
@@ -320,7 +320,7 @@ const layoutPropDefs = {
    */
   gridRow: {
     type: 'string',
-    className: 'rt-r-gr',
+    className: 'kui-r-gr',
     customProperties: ['--grid-row'],
     responsive: true,
   },
@@ -338,7 +338,7 @@ const layoutPropDefs = {
    */
   gridRowStart: {
     type: 'string',
-    className: 'rt-r-grs',
+    className: 'kui-r-grs',
     customProperties: ['--grid-row-start'],
     responsive: true,
   },
@@ -356,7 +356,7 @@ const layoutPropDefs = {
    */
   gridRowEnd: {
     type: 'string',
-    className: 'rt-r-gre',
+    className: 'kui-r-gre',
     customProperties: ['--grid-row-end'],
     responsive: true,
   },
@@ -373,7 +373,7 @@ const layoutPropDefs = {
    */
   alignSelf: {
     type: 'enum',
-    className: 'rt-r-as',
+    className: 'kui-r-as',
     values: alignSelfValues,
     responsive: true,
   },
@@ -390,7 +390,7 @@ const layoutPropDefs = {
    */
   justifySelf: {
     type: 'enum',
-    className: 'rt-r-js',
+    className: 'kui-r-js',
     values: justifySelfValues,
     responsive: true,
   },

package/src/props/leading-trim.prop.ts

@@ -5,7 +5,7 @@ const leadingTrimValues = ['normal', 'start', 'end', 'both'] as const;
 const leadingTrimPropDef = {
   trim: {
     type: 'enum',
-    className: 'rt-r-lt',
+    className: 'kui-r-lt',
     values: leadingTrimValues,
     responsive: true,
   },

package/src/props/margin.props.ts

@@ -20,7 +20,7 @@ const marginPropDefs = {
     type: 'enum | string',
     values: marginValues,
     responsive: true,
-    className: 'rt-r-m',
+    className: 'kui-r-m',
     customProperties: ['--m'],
   },
   /**
@@ -40,7 +40,7 @@ const marginPropDefs = {
     type: 'enum | string',
     values: marginValues,
     responsive: true,
-    className: 'rt-r-mx',
+    className: 'kui-r-mx',
     customProperties: ['--ml', '--mr'],
   },
   /**
@@ -60,7 +60,7 @@ const marginPropDefs = {
     type: 'enum | string',
     values: marginValues,
     responsive: true,
-    className: 'rt-r-my',
+    className: 'kui-r-my',
     customProperties: ['--mt', '--mb'],
   },
   /**
@@ -79,7 +79,7 @@ const marginPropDefs = {
     type: 'enum | string',
     values: marginValues,
     responsive: true,
-    className: 'rt-r-mt',
+    className: 'kui-r-mt',
     customProperties: ['--mt'],
   },
   /**
@@ -98,7 +98,7 @@ const marginPropDefs = {
     type: 'enum | string',
     values: marginValues,
     responsive: true,
-    className: 'rt-r-mr',
+    className: 'kui-r-mr',
     customProperties: ['--mr'],
   },
   /**
@@ -117,7 +117,7 @@ const marginPropDefs = {
     type: 'enum | string',
     values: marginValues,
     responsive: true,
-    className: 'rt-r-mb',
+    className: 'kui-r-mb',
     customProperties: ['--mb'],
   },
   /**
@@ -136,7 +136,7 @@ const marginPropDefs = {
     type: 'enum | string',
     values: marginValues,
     responsive: true,
-    className: 'rt-r-ml',
+    className: 'kui-r-ml',
     customProperties: ['--ml'],
   },
 } satisfies {

package/src/props/padding.props.ts

@@ -17,7 +17,7 @@ const paddingPropDefs = {
    */
   p: {
     type: 'enum | string',
-    className: 'rt-r-p',
+    className: 'kui-r-p',
     customProperties: ['--p'],
     values: paddingValues,
     responsive: true,
@@ -37,7 +37,7 @@ const paddingPropDefs = {
    */
   px: {
     type: 'enum | string',
-    className: 'rt-r-px',
+    className: 'kui-r-px',
     customProperties: ['--pl', '--pr'],
     values: paddingValues,
     responsive: true,
@@ -57,7 +57,7 @@ const paddingPropDefs = {
    */
   py: {
     type: 'enum | string',
-    className: 'rt-r-py',
+    className: 'kui-r-py',
     customProperties: ['--pt', '--pb'],
     values: paddingValues,
     responsive: true,
@@ -76,7 +76,7 @@ const paddingPropDefs = {
    */
   pt: {
     type: 'enum | string',
-    className: 'rt-r-pt',
+    className: 'kui-r-pt',
     customProperties: ['--pt'],
     values: paddingValues,
     responsive: true,
@@ -95,7 +95,7 @@ const paddingPropDefs = {
    */
   pr: {
     type: 'enum | string',
-    className: 'rt-r-pr',
+    className: 'kui-r-pr',
     customProperties: ['--pr'],
     values: paddingValues,
     responsive: true,
@@ -114,7 +114,7 @@ const paddingPropDefs = {
    */
   pb: {
     type: 'enum | string',
-    className: 'rt-r-pb',
+    className: 'kui-r-pb',
     customProperties: ['--pb'],
     values: paddingValues,
     responsive: true,
@@ -133,7 +133,7 @@ const paddingPropDefs = {
    */
   pl: {
     type: 'enum | string',
-    className: 'rt-r-pl',
+    className: 'kui-r-pl',
     customProperties: ['--pl'],
     values: paddingValues,
     responsive: true,

package/src/props/shadow.props.ts

@@ -16,7 +16,7 @@ const shadowPropDefs = {
    */
   shadow: {
     type: 'enum',
-    className: 'rt-r-shadow',
+    className: 'kui-r-shadow',
     values: shadowValues,
     responsive: true,
   },

package/src/props/text-align.prop.ts

@@ -5,7 +5,7 @@ const textAlignValues = ['left', 'center', 'right'] as const;
 const textAlignPropDef = {
   align: {
     type: 'enum',
-    className: 'rt-r-ta',
+    className: 'kui-r-ta',
     values: textAlignValues,
     responsive: true,
   },

package/src/props/text-wrap.prop.ts

@@ -5,7 +5,7 @@ const textWrapValues = ['wrap', 'nowrap', 'pretty', 'balance'] as const;
 const textWrapPropDef = {
   wrap: {
     type: 'enum',
-    className: 'rt-r-tw',
+    className: 'kui-r-tw',
     values: textWrapValues,
     responsive: true,
   },

package/src/props/truncate.prop.ts

@@ -3,7 +3,7 @@ import type { PropDef } from './prop-def.js';
 const truncatePropDef = {
   truncate: {
     type: 'boolean',
-    className: 'rt-truncate',
+    className: 'kui-truncate',
   },
 } satisfies {
   truncate: PropDef<boolean>;

package/src/props/weight.prop.ts

@@ -6,7 +6,7 @@ const weights = ['regular', 'medium', 'semibold'] as const;
 const weightPropDef = {
   weight: {
     type: 'enum',
-    className: 'rt-r-weight',
+    className: 'kui-r-weight',
     values: weights,
     responsive: true,
   },

package/src/props/width.props.ts

@@ -14,7 +14,7 @@ const widthPropDefs = {
    */
   width: {
     type: 'string',
-    className: 'rt-r-w',
+    className: 'kui-r-w',
     customProperties: ['--width'],
     responsive: true,
   },
@@ -31,7 +31,7 @@ const widthPropDefs = {
    */
   minWidth: {
     type: 'string',
-    className: 'rt-r-min-w',
+    className: 'kui-r-min-w',
     customProperties: ['--min-width'],
     responsive: true,
   },
@@ -48,7 +48,7 @@ const widthPropDefs = {
    */
   maxWidth: {
     type: 'string',
-    className: 'rt-r-max-w',
+    className: 'kui-r-max-w',
     customProperties: ['--max-width'],
     responsive: true,
   },

package/src/styles/scrollbar.css

@@ -4,7 +4,7 @@
 /* Firefox */
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--gray-a5) transparent;
+  scrollbar-color: var(--neutral-a5) transparent;
 }
 
 /* WebKit browsers (Chrome, Safari, Edge) */
@@ -18,13 +18,13 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--gray-a5);
+  background: var(--neutral-a5);
   border-radius: 4px;
 }
 
 @media (hover: hover) {
   ::-webkit-scrollbar-thumb:hover {
-    background: var(--gray-a7);
+    background: var(--neutral-a7);
   }
 }