@kushagradhawan/kookie-ui 0.1.11 → 0.1.12

package/components.css

@@ -3252,6 +3252,35 @@
 .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])):where(:focus-visible) {
     background-color: var(--focus-a2);
 }
+.rt-Card:where(.rt-variant-soft) {
+    --card-border-width: 0px;
+    --card-background-color: var(--gray-a3);
+}
+.rt-Card:where(.rt-variant-soft)::before {
+    background-color: var(--card-background-color);
+}
+.rt-Card:where(.rt-variant-soft)::after {
+    box-shadow: none;
+    border: none;
+    outline: none;
+}
+.rt-Card:where(.rt-variant-soft):where(:focus-visible) {
+    outline: none;
+}
+.rt-Card:where(.rt-variant-soft):where(:focus-visible)::after {
+    outline: none;
+}
+@media (hover: hover) {
+    .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before {
+        background-color: var(--gray-a4);
+    }
+}
+.rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before {
+    background-color: var(--gray-a4);
+}
+.rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
+    background-color: var(--gray-a5);
+}
 @media (pointer: coarse) {
     .rt-Card:where(:any-link, button, label):where(:active:not(:focus-visible, [data-state='open']))::before {
         background-image: linear-gradient(var(--gray-a4), var(--gray-a4));

package/dist/cjs/components/card.props.d.ts

@@ -9,7 +9,7 @@ declare const cardPropDefs: {
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["surface", "classic", "ghost"];
+        values: readonly ["surface", "classic", "ghost", "soft"];
         default: "surface";
     };
     asChild: {

package/dist/cjs/components/card.props.js

@@ -1,2 +1,2 @@
-"use strict";var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var u=(e,s)=>{for(var a in s)t(e,a,{get:s[a],enumerable:!0})},m=(e,s,a,o)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of n(s))!c.call(e,r)&&r!==a&&t(e,r,{get:()=>s[r],enumerable:!(o=f(s,r))||o.enumerable});return e};var l=e=>m(t({},"__esModule",{value:!0}),e);var y={};u(y,{cardPropDefs:()=>i});module.exports=l(y);var p=require("../props/as-child.prop.js");const v=["1","2","3","4","5"],d=["surface","classic","ghost"],i={...p.asChildPropDef,size:{type:"enum",className:"rt-r-size",values:v,default:"1",responsive:!0},variant:{type:"enum",className:"rt-variant",values:d,default:"surface"}};
+"use strict";var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var u=(e,s)=>{for(var a in s)t(e,a,{get:s[a],enumerable:!0})},m=(e,s,a,o)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of n(s))!c.call(e,r)&&r!==a&&t(e,r,{get:()=>s[r],enumerable:!(o=f(s,r))||o.enumerable});return e};var l=e=>m(t({},"__esModule",{value:!0}),e);var y={};u(y,{cardPropDefs:()=>i});module.exports=l(y);var p=require("../props/as-child.prop.js");const v=["1","2","3","4","5"],d=["surface","classic","ghost","soft"],i={...p.asChildPropDef,size:{type:"enum",className:"rt-r-size",values:v,default:"1",responsive:!0},variant:{type:"enum",className:"rt-variant",values:d,default:"surface"}};
 //# sourceMappingURL=card.props.js.map

package/dist/cjs/components/card.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/card.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4', '5'] as const;\nconst variants = ['surface', 'classic', 'ghost'] as const;\n\nconst cardPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n};\n\nexport { cardPropDefs };\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,qCAI/B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,IAAK,GAAG,EAChCC,EAAW,CAAC,UAAW,UAAW,OAAO,EAEzCJ,EAAe,CACnB,GAAG,iBACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQG,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,CACzF",
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4', '5'] as const;\nconst variants = ['surface', 'classic', 'ghost', 'soft'] as const;\n\nconst cardPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n};\n\nexport { cardPropDefs };\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,qCAI/B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,IAAK,GAAG,EAChCC,EAAW,CAAC,UAAW,UAAW,QAAS,MAAM,EAEjDJ,EAAe,CACnB,GAAG,iBACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQG,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,CACzF",
   "names": ["card_props_exports", "__export", "cardPropDefs", "__toCommonJS", "import_as_child_prop", "sizes", "variants"]
 }

package/dist/esm/components/card.props.d.ts

@@ -9,7 +9,7 @@ declare const cardPropDefs: {
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["surface", "classic", "ghost"];
+        values: readonly ["surface", "classic", "ghost", "soft"];
         default: "surface";
     };
     asChild: {

package/dist/esm/components/card.props.js

@@ -1,2 +1,2 @@
-import{asChildPropDef as s}from"../props/as-child.prop.js";const e=["1","2","3","4","5"],r=["surface","classic","ghost"],a={...s,size:{type:"enum",className:"rt-r-size",values:e,default:"1",responsive:!0},variant:{type:"enum",className:"rt-variant",values:r,default:"surface"}};export{a as cardPropDefs};
+import{asChildPropDef as s}from"../props/as-child.prop.js";const e=["1","2","3","4","5"],r=["surface","classic","ghost","soft"],a={...s,size:{type:"enum",className:"rt-r-size",values:e,default:"1",responsive:!0},variant:{type:"enum",className:"rt-variant",values:r,default:"surface"}};export{a as cardPropDefs};
 //# sourceMappingURL=card.props.js.map

package/dist/esm/components/card.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/card.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4', '5'] as const;\nconst variants = ['surface', 'classic', 'ghost'] as const;\n\nconst cardPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n};\n\nexport { cardPropDefs };\n"],
-  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAI/B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,IAAK,GAAG,EAChCC,EAAW,CAAC,UAAW,UAAW,OAAO,EAEzCC,EAAe,CACnB,GAAGH,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQC,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,CACzF",
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4', '5'] as const;\nconst variants = ['surface', 'classic', 'ghost', 'soft'] as const;\n\nconst cardPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n};\n\nexport { cardPropDefs };\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAI/B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,IAAK,GAAG,EAChCC,EAAW,CAAC,UAAW,UAAW,QAAS,MAAM,EAEjDC,EAAe,CACnB,GAAGH,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQC,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,CACzF",
   "names": ["asChildPropDef", "sizes", "variants", "cardPropDefs"]
 }

package/package.json

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

package/src/components/card.css

@@ -195,6 +195,52 @@
   }
 }
 
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*           Variants / Soft           */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-Card:where(.rt-variant-soft) {
+  --card-border-width: 0px;
+  --card-background-color: var(--gray-a3);
+
+  &::before {
+    background-color: var(--card-background-color);
+  }
+  &::after {
+    box-shadow: none;
+    border: none;
+    outline: none;
+  }
+  &:where(:focus-visible) {
+    outline: none;
+    
+    &::after {
+      outline: none;
+    }
+  }
+  &:where(:any-link, button, label) {
+    @media (hover: hover) {
+      &:where(:hover) {
+        &::before {
+          background-color: var(--gray-a4);
+        }
+      }
+    }
+    &:where([data-state='open']) {
+      &::before {
+        background-color: var(--gray-a4);
+      }
+    }
+    &:where(:active:not([data-state='open'])) {
+      &::before {
+        background-color: var(--gray-a5);
+      }
+    }
+  }
+}
+
 /* Better -webkit-tap-highlight-color */
 .rt-Card:where(:any-link, button, label) {
   @media (pointer: coarse) {

package/src/components/card.props.tsx

@@ -3,7 +3,7 @@ import { asChildPropDef } from '../props/as-child.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4', '5'] as const;
-const variants = ['surface', 'classic', 'ghost'] as const;
+const variants = ['surface', 'classic', 'ghost', 'soft'] as const;
 
 const cardPropDefs = {
   ...asChildPropDef,

package/styles.css

@@ -7979,6 +7979,35 @@
 .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])):where(:focus-visible) {
   background-color: var(--focus-a2);
 }
+.rt-Card:where(.rt-variant-soft) {
+  --card-border-width: 0px;
+  --card-background-color: var(--gray-a3);
+}
+.rt-Card:where(.rt-variant-soft)::before {
+  background-color: var(--card-background-color);
+}
+.rt-Card:where(.rt-variant-soft)::after {
+  box-shadow: none;
+  border: none;
+  outline: none;
+}
+.rt-Card:where(.rt-variant-soft):where(:focus-visible) {
+  outline: none;
+}
+.rt-Card:where(.rt-variant-soft):where(:focus-visible)::after {
+  outline: none;
+}
+@media (hover: hover) {
+  .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before {
+    background-color: var(--gray-a4);
+  }
+}
+.rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before {
+  background-color: var(--gray-a4);
+}
+.rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
+  background-color: var(--gray-a5);
+}
 @media (pointer: coarse) {
   .rt-Card:where(:any-link, button, label):where(:active:not(:focus-visible, [data-state='open']))::before {
     background-image: linear-gradient(var(--gray-a4), var(--gray-a4));