@atom-learning/components 6.0.0-beta.2 → 6.0.0-beta.21

package/dist/utilities/no-overflow-wrapper/NoOverflowWrapper.js

@@ -1,2 +1,2 @@
-import{Box as e}from"../../components/box/Box.js";import{styled as i}from"../../stitches.js";const o=()=>({size:"100%",borderRadius:"inherit",overflow:"hidden"}),r=i(e,o());r.displayName="NoOverflowWrapper";export{r as NoOverflowWrapper,o as noOverflowStyleBlock};
+import{styled as r}from"../../styled.js";const e=r("div",{base:["size-full","rounded-[inherit]","overflow-hidden"]});e.displayName="NoOverflowWrapper";export{e as NoOverflowWrapper};
 //# sourceMappingURL=NoOverflowWrapper.js.map

package/dist/utilities/no-overflow-wrapper/NoOverflowWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoOverflowWrapper.js","sources":["../../../src/utilities/no-overflow-wrapper/NoOverflowWrapper.tsx"],"sourcesContent":["import { Box } from '~/components/box'\nimport { styled } from '~/stitches'\n\nexport const noOverflowStyleBlock = (): {\n  size: string\n  borderRadius: string\n  overflow: string\n} => {\n  return {\n    size: '100%',\n    borderRadius: 'inherit',\n    overflow: 'hidden'\n  }\n}\n\nexport const NoOverflowWrapper = styled(Box, noOverflowStyleBlock())\n\nNoOverflowWrapper.displayName = 'NoOverflowWrapper'\n"],"names":["noOverflowStyleBlock","NoOverflowWrapper","styled","Box"],"mappings":"6FAGO,MAAMA,EAAuB,KAK3B,CACL,KAAM,OACN,aAAc,UACd,SAAU,QACZ,GAGWC,EAAoBC,EAAOC,EAAKH,EAAqB,CAAC,EAEnEC,EAAkB,YAAc"}
+{"version":3,"file":"NoOverflowWrapper.js","sources":["../../../src/utilities/no-overflow-wrapper/NoOverflowWrapper.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const NoOverflowWrapper = styled('div', {\n  base: ['size-full', 'rounded-[inherit]', 'overflow-hidden']\n})\n\nNoOverflowWrapper.displayName = 'NoOverflowWrapper'\n"],"names":["NoOverflowWrapper","styled"],"mappings":"yCAEa,MAAAA,EAAoBC,EAAO,MAAO,CAC7C,KAAM,CAAC,YAAa,oBAAqB,iBAAiB,CAC5D,CAAC,EAEDD,EAAkB,YAAc"}

package/dist/utilities/no-overflow-wrapper/index.d.ts

@@ -1 +1 @@
-export { NoOverflowWrapper, noOverflowStyleBlock } from './NoOverflowWrapper';
+export { NoOverflowWrapper } from './NoOverflowWrapper';

package/dist/utilities/override-styled-variant-value/overrideStyledVariantValue.d.ts

@@ -0,0 +1 @@
+export declare const overrideStyledVariantValue: (prop: any, overrideFunction: (any: any) => any) => any;

package/dist/utilities/override-styled-variant-value/overrideStyledVariantValue.js

@@ -0,0 +1,2 @@
+const c=(t,a)=>{let e;switch(typeof t){case"object":e={},Object.keys(t).forEach(o=>{const r=t[o];e[o]=r&&a(r)});break;default:e=a(t)}return e};export{c as overrideStyledVariantValue};
+//# sourceMappingURL=overrideStyledVariantValue.js.map

package/dist/utilities/override-styled-variant-value/overrideStyledVariantValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overrideStyledVariantValue.js","sources":["../../../src/utilities/override-styled-variant-value/overrideStyledVariantValue.ts"],"sourcesContent":["/*\n * Utility function to allow for overriding responsive variants using logic provided via the `overrideFunction` argument.\n *\n * It was developed out of a design requirement to override and pass through size properties to the <Icon /> component; depending\n * on the size of its parent component. It could be used for various other props where we want to tweak the value but\n * maintain the flexibility of a stitches variant property (which allows for use either via a string or a breakpoint object)\n * Documentation on stitches responsive variants: https://stitches.dev/docs/breakpoints#responsive-variants\n *\n */\nexport const overrideStyledVariantValue = (\n  prop: any,\n  overrideFunction: (any) => any\n) => {\n  let overrideValue\n  switch (typeof prop) {\n    case 'object':\n      overrideValue = {}\n      Object.keys(prop).forEach((breakpoint) => {\n        const propAtBreakpoint = prop[breakpoint]\n        overrideValue[breakpoint] = propAtBreakpoint\n          ? overrideFunction(propAtBreakpoint)\n          : propAtBreakpoint\n      })\n      break\n    default:\n      overrideValue = overrideFunction(prop)\n  }\n\n  return overrideValue\n}\n"],"names":["overrideStyledVariantValue","prop","overrideFunction","overrideValue","breakpoint","propAtBreakpoint"],"mappings":"AASa,MAAAA,EAA6B,CACxCC,EACAC,IACG,CACH,IAAIC,EACJ,OAAQ,OAAOF,EAAAA,CACb,IAAK,SACHE,EAAgB,CAAA,EAChB,OAAO,KAAKF,CAAI,EAAE,QAASG,GAAe,CACxC,MAAMC,EAAmBJ,EAAKG,CAAU,EACxCD,EAAcC,CAAU,EAAIC,GACxBH,EAAiBG,CAAgB,CAEvC,CAAC,EACD,MACF,QACEF,EAAgBD,EAAiBD,CAAI,CACzC,CAEA,OAAOE,CACT"}

package/dist/utilities/radix-overrides/index.d.ts

@@ -0,0 +1 @@
+export { ToggleGroup } from './toggle-group';

package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.d.ts

@@ -3,6 +3,5 @@ import * as React from 'react';
 type RootType = {
     disableDeselect?: boolean;
 };
-type ToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root> & RootType;
-export declare const ToggleGroupRoot: React.ForwardRefExoticComponent<ToggleGroupRootProps>;
+export declare const ToggleGroupRoot: React.ForwardRefExoticComponent<(Omit<ToggleGroup.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & RootType, "ref"> | Omit<ToggleGroup.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & RootType, "ref">) & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.js

@@ -1,2 +1,2 @@
-import*as g from"@radix-ui/react-toggle-group";import*as l from"react";const m=l.forwardRef(({disableDeselect:a=!1,onValueChange:t,defaultValue:o,...r},n)=>{const[u,f]=l.useState(o),s=e=>{a&&(e===""||(e==null?void 0:e.length)===0)||(f(e),t==null||t(e))};return l.createElement(g.Root,{ref:n,onValueChange:s,value:u,...r})});export{m as ToggleGroupRoot};
+import*as d from"@radix-ui/react-toggle-group";import*as l from"react";const g=l.forwardRef(({disableDeselect:a=!1,onValueChange:t,defaultValue:o,...r},n)=>{const[u,s]=l.useState(o),f=e=>{a&&(e===""||(e==null?void 0:e.length)===0)||(s(e),t==null||t(e))};return l.createElement(d.Root,{ref:n,onValueChange:f,value:u,...r})});export{g as ToggleGroupRoot};
 //# sourceMappingURL=ToggleGroupRoot.js.map

package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupRoot.js","sources":["../../../../src/utilities/radix-overrides/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\ntype RootType = {\n  disableDeselect?: boolean\n}\n\ntype ToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root> &\n  RootType\n\nexport const ToggleGroupRoot: React.ForwardRefExoticComponent<ToggleGroupRootProps> =\n  React.forwardRef(\n    (\n      { disableDeselect = false, onValueChange, defaultValue, ...rest },\n      ref\n    ) => {\n      const [internalValue, setInternalValue] =\n        React.useState<ToggleGroupRootProps['value']>(defaultValue)\n      const handleValueChange: ToggleGroupRootProps['onValueChange'] = (\n        newValue\n      ) => {\n        if (disableDeselect && (newValue === '' || newValue?.length === 0))\n          return\n        setInternalValue(newValue)\n        onValueChange?.(newValue)\n      }\n\n      return (\n        // eslint-disable-next-line\n        // @ts-ignore Radix types complain on properties depending on whether `type=\"single\"` or `\"multiple\"`. Works correctly so muting.\n        <ToggleGroup.Root\n          ref={ref}\n          onValueChange={handleValueChange}\n          value={internalValue}\n          {...rest}\n        />\n      )\n    }\n  )\n"],"names":["ToggleGroupRoot","React","disableDeselect","onValueChange","defaultValue","rest","ref","internalValue","setInternalValue","handleValueChange","newValue","ToggleGroup"],"mappings":"uEAUO,MAAMA,EACXC,EAAM,WACJ,CACE,CAAE,gBAAAC,EAAkB,GAAO,cAAAC,EAAe,aAAAC,KAAiBC,CAAK,EAChEC,IACG,CACH,KAAM,CAACC,EAAeC,CAAgB,EACpCP,EAAM,SAAwCG,CAAY,EACtDK,EACJC,GACG,CACCR,IAAoBQ,IAAa,KAAMA,GAAA,KAAAA,OAAAA,EAAU,UAAW,KAEhEF,EAAiBE,CAAQ,EACzBP,GAAA,MAAAA,EAAgBO,CAAAA,EAClB,EAEA,OAGET,EAAA,cAACU,EAAY,KAAZ,CACC,IAAKL,EACL,cAAeG,EACf,MAAOF,EACN,GAAGF,CAAAA,CACN,CAEJ,CACF"}
+{"version":3,"file":"ToggleGroupRoot.js","sources":["../../../../src/utilities/radix-overrides/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\ntype RootType = {\n  disableDeselect?: boolean\n}\n\ntype ToggleGroupRootProps = React.ComponentProps<typeof ToggleGroup.Root> &\n  RootType\n\nexport const ToggleGroupRoot = React.forwardRef<\n  HTMLDivElement,\n  ToggleGroupRootProps\n>(({ disableDeselect = false, onValueChange, defaultValue, ...rest }, ref) => {\n  const [internalValue, setInternalValue] =\n    React.useState<ToggleGroupRootProps['value']>(defaultValue)\n  const handleValueChange: ToggleGroupRootProps['onValueChange'] = (\n    newValue\n  ) => {\n    if (disableDeselect && (newValue === '' || newValue?.length === 0)) return\n    setInternalValue(newValue)\n    onValueChange?.(newValue)\n  }\n\n  return (\n    // eslint-disable-next-line\n    // @ts-ignore Radix types complain on properties depending on whether `type=\"single\"` or `\"multiple\"`. Works correctly so muting.\n    <ToggleGroup.Root\n      ref={ref}\n      onValueChange={handleValueChange}\n      value={internalValue}\n      {...rest}\n    />\n  )\n})\n"],"names":["ToggleGroupRoot","React","disableDeselect","onValueChange","defaultValue","rest","ref","internalValue","setInternalValue","handleValueChange","newValue","ToggleGroup"],"mappings":"uEAUO,MAAMA,EAAkBC,EAAM,WAGnC,CAAC,CAAE,gBAAAC,EAAkB,GAAO,cAAAC,EAAe,aAAAC,EAAc,GAAGC,CAAK,EAAGC,IAAQ,CAC5E,KAAM,CAACC,EAAeC,CAAgB,EACpCP,EAAM,SAAwCG,CAAY,EACtDK,EACJC,GACG,CACCR,IAAoBQ,IAAa,KAAMA,GAAA,KAAAA,OAAAA,EAAU,UAAW,KAChEF,EAAiBE,CAAQ,EACzBP,GAAA,MAAAA,EAAgBO,CAAAA,EAClB,EAEA,OAGET,EAAA,cAACU,EAAY,KAAZ,CACC,IAAKL,EACL,cAAeG,EACf,MAAOF,EACN,GAAGF,CAAAA,CACN,CAEJ,CAAC"}

package/dist/utilities/radix-overrides/toggle-group/index.d.ts

@@ -1,5 +1,7 @@
 export declare const ToggleGroup: {
-    Root: import("react").ForwardRefExoticComponent<((import("@radix-ui/react-toggle-group").ToggleGroupSingleProps | import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps) & import("react").RefAttributes<HTMLDivElement>) & {
+    Root: import("react").ForwardRefExoticComponent<(Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
         disableDeselect?: boolean;
-    }>;
+    }, "ref"> | Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & import("react").RefAttributes<HTMLDivElement> & {
+        disableDeselect?: boolean;
+    }, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/utilities/style/backdrop-overlay.d.ts

@@ -1,14 +1 @@
-export declare const backdropOverlay: {
-    backgroundColor: string;
-    position: string;
-    inset: number;
-    zIndex: number;
-    '@allowMotion': {
-        '&[data-state="open"]': {
-            animation: string;
-        };
-        '&[data-state="closed"]': {
-            animation: string;
-        };
-    };
-};
+export declare const backdropOverlay: string[];

package/dist/utilities/style/backdrop-overlay.js

@@ -1,2 +1,2 @@
-import{DIALOG_Z_INDEX as o}from"../../constants/zIndices.js";import"../../stitches.js";import"../css-wrapper/CSSWrapper.js";import"../no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{fadeIn as t,fadeOut as a}from"./keyframe-animations.js";const e={backgroundColor:"$alpha600",position:"fixed",inset:0,zIndex:o,"@allowMotion":{'&[data-state="open"]':{animation:`${t} 250ms ease-out`},'&[data-state="closed"]':{animation:`${a} 550ms ease-out`}}};export{e as backdropOverlay};
+const a=["bg-alpha-600","fixed","inset-0","z-1147483646","motion-safe:data-[state=open]:animate-fade-in","motion-safe:data-[state=closed]:animate-fade-out"];export{a as backdropOverlay};
 //# sourceMappingURL=backdrop-overlay.js.map

package/dist/utilities/style/backdrop-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"backdrop-overlay.js","sources":["../../../src/utilities/style/backdrop-overlay.ts"],"sourcesContent":["import { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nexport const backdropOverlay = {\n  backgroundColor: '$alpha600',\n  position: 'fixed',\n  inset: 0,\n  zIndex: DIALOG_Z_INDEX,\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${fadeIn} 250ms ease-out`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${fadeOut} 550ms ease-out`\n    }\n  }\n}\n"],"names":["backdropOverlay","DIALOG_Z_INDEX","fadeIn","fadeOut"],"mappings":"qQAGaA,EAAkB,CAC7B,gBAAiB,YACjB,SAAU,QACV,MAAO,EACP,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF"}
+{"version":3,"file":"backdrop-overlay.js","sources":["../../../src/utilities/style/backdrop-overlay.ts"],"sourcesContent":["export const backdropOverlay = [\n  'bg-alpha-600',\n  'fixed',\n  'inset-0',\n  'z-1147483646',\n  'motion-safe:data-[state=open]:animate-fade-in',\n  'motion-safe:data-[state=closed]:animate-fade-out'\n]\n"],"names":["backdropOverlay"],"mappings":"AAAO,MAAMA,EAAkB,CAC7B,eACA,QACA,UACA,eACA,gDACA,kDACF"}

package/dist/utilities/style/get-icon-size.js

@@ -1,2 +1,2 @@
-import{overrideStitchesVariantValue as i}from"../override-stitches-variant-value/overrideStitchesVariantValue.js";const m={sm:"sm",md:"md",lg:"md"},o=e=>i(e,t=>m[t]);export{o as getFieldIconSize};
+import{overrideStyledVariantValue as o}from"../override-styled-variant-value/overrideStyledVariantValue.js";const t={sm:"sm",md:"md",lg:"md"},d=e=>o(e,m=>t[m]);export{d as getFieldIconSize};
 //# sourceMappingURL=get-icon-size.js.map

package/dist/utilities/style/get-icon-size.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-icon-size.js","sources":["../../../src/utilities/style/get-icon-size.ts"],"sourcesContent":["import { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nconst toIconSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const getFieldIconSize = (size: any) =>\n  overrideStitchesVariantValue(size, (s) => toIconSize[s])\n"],"names":["toIconSize","getFieldIconSize","size","overrideStitchesVariantValue","s"],"mappings":"kHAEA,MAAMA,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAoBC,GAC/BC,EAA6BD,EAAOE,GAAMJ,EAAWI,EAAE"}
+{"version":3,"file":"get-icon-size.js","sources":["../../../src/utilities/style/get-icon-size.ts"],"sourcesContent":["import { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nconst toIconSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const getFieldIconSize = (size: any) =>\n  overrideStyledVariantValue(size, (s) => toIconSize[s])\n"],"names":["toIconSize","getFieldIconSize","size","overrideStyledVariantValue","s"],"mappings":"4GAEA,MAAMA,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAoBC,GAC/BC,EAA2BD,EAAOE,GAAMJ,EAAWI,CAAC,CAAC"}

package/dist/utilities/style/index.d.ts

@@ -1,6 +1 @@
-export * from './capsize';
-export * from './encode-background-icon';
-export * from './focus-visible-style-block';
-export * from './keyframe-animations';
 export * from './get-icon-size';
-export * from './disabledStyle';

package/package.json

@@ -4,20 +4,37 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "6.0.0-beta.2",
+  "version": "6.0.0-beta.21",
   "description": "",
   "files": [
-    "dist"
+    "dist",
+    "src/index.css",
+    "src/responsive-variant-classes.css",
+    "scripts/vite-plugin-tailwind-responsive-variant-classes.mjs",
+    "scripts/generate-responsive-variant-classes.mjs"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "style": "./src/index.css",
+      "require": "./dist/index.cjs.js",
+      "default": "./dist/index.js"
+    },
+    "./index.css": "./src/index.css",
+    "./vite": "./scripts/vite-plugin-tailwind-responsive-variant-classes.mjs",
+    "./docgen.json": "./dist/docgen.json"
+  },
   "sideEffects": false,
   "scripts": {
     "dev": "NODE_ENV=development rollup -c -w",
     "build:lib": "NODE_ENV=production rollup -c",
-    "build:types": "NODE_ENV=production tsc --emitDeclarationOnly && tsc-alias",
+    "build:types": "NODE_ENV=production tsc --project tsconfig.build.json --emitDeclarationOnly && tsc-alias",
     "build:proptypes": "node ./scripts/generate-component-props.mjs",
+    "build:responsive-variant-classes": "node ./scripts/generate-responsive-variant-classes.mjs",
     "start:sandbox": "vite -c ./sandbox/vite.config.js",
     "add-component": "node ./scripts/add-component.mjs",
-    "prepublishOnly": "run-s clean build:lib build:types build:proptypes",
+    "prepublishOnly": "run-s clean build:responsive-variant-classes build:lib build:types build:proptypes",
     "clean": "del ./dist/",
     "format": "prettier 'src/**/*.{js,ts,tsx}' --write",
     "lint": "eslint 'src/**/*.{js,ts,tsx}' --fix",
@@ -59,10 +76,10 @@
   ],
   "devDependencies": {
     "@atom-learning/icons": "1.20.0",
-    "@atom-learning/jest-stitches": "1.0.10",
-    "@atom-learning/theme": "^5.1.0",
+    "@atom-learning/theme": "6.0.0-beta.8",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@radix-ui/react-id": "1.0.1",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^17.1.0",
@@ -89,8 +106,9 @@
     "change-case": "^4.1.2",
     "chokidar": "^3.5.1",
     "del-cli": "^3.0.1",
+    "diffable-html": "^6.0.1",
     "es-jest": "^1.5.0",
-    "esbuild": "^0.14.10",
+    "esbuild": "^0.25.12",
     "eslint": "^7.18.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-import-resolver-typescript": "^2.3.0",
@@ -100,14 +118,14 @@
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "glob": "^7.1.6",
     "husky": "^4.3.8",
     "jest": "^27.0.6",
     "jest-axe": "^4.1.0",
     "jest-dom": "^4.0.0",
     "lint-staged": "^10.5.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.2.1",
+    "prettier": "^3.6.2",
+    "pretty-format": "^30.2.0",
     "prompts": "^2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -121,20 +139,18 @@
     "semantic-release-slack-bot": "^4.0.2",
     "semantic-release-yarn": "^3.0.2",
     "size-limit": "^7.0.5",
-    "stitches-reset": "^1.0.0",
     "tsc-alias": "^1.8.10",
     "typescript": "^5.5.4",
-    "vite": "^2.2.4",
+    "vite": "^7.2.2",
     "yargs": "^16.2.0"
   },
   "peerDependencies": {
     "@atom-learning/icons": "^1.0.0",
-    "@atom-learning/theme": "^5",
+    "@atom-learning/theme": "^6",
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@atom-learning/stitches-react": "^1.4.1",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/modifiers": "^6.0.0",
     "@dnd-kit/sortable": "^7.0.1",
@@ -158,15 +174,18 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@radix-ui/react-visually-hidden": "^1.0.3",
     "@reach/combobox": "^0.16.1",
+    "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-table": "^8.5.11",
-    "color2k": "^2.0.0",
+    "clsx": "^2.1.1",
     "dayjs": "^1.10.7",
     "dayzed": "^3.2.2",
     "dlv": "^1.1.3",
+    "glob": "^7.1.6",
     "invariant": "^2.2.4",
     "mdast-util-directive": "1.0.1",
     "mdast-util-from-markdown": "0.8.5",
     "micromark-extension-directive": "1.4.0",
+    "minimatch": "^10.0.0",
     "prop-types": "^15.8.1",
     "pure-react-carousel": "^1.27.6",
     "react-aria": "^3.29.1",
@@ -174,7 +193,11 @@
     "react-hook-form": "^6.15.4",
     "react-hot-toast": "^1.0.2",
     "react-player": "^2.9.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.1.17",
     "throttle-debounce": "^3.0.1",
+    "ts-morph": "^25.0.1",
     "uid": "^2.0.0",
     "use-deep-compare-effect": "^1.8.1"
   },

package/scripts/generate-responsive-variant-classes.mjs

@@ -0,0 +1,320 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import g from 'glob'
+import { Project, SyntaxKind } from 'ts-morph'
+
+const { glob } = g
+
+function extractArrayElements(node) {
+  if (node.getKind() !== SyntaxKind.ArrayLiteralExpression) return []
+
+  return node
+    .getElements()
+    .map((element) =>
+      element.getKind() === SyntaxKind.StringLiteral
+        ? element.getLiteralValue()
+        : element.getText().replace(/^['"`]|['"`]$/g, '')
+    )
+    .filter(Boolean)
+}
+
+function getPropertyValue(obj, propName) {
+  const prop = obj
+    .getProperties()
+    .find(
+      (p) =>
+        p.getKind() === SyntaxKind.PropertyAssignment &&
+        p
+          .asKindOrThrow(SyntaxKind.PropertyAssignment)
+          .getNameNode()
+          .getText()
+          .replace(/['"]/g, '') === propName
+    )
+  return prop?.asKindOrThrow(SyntaxKind.PropertyAssignment).getInitializer()
+}
+
+function isEnabledResponsiveVariants(args) {
+  if (args.length < 3) return false
+  const optionsArg = args[2]
+  if (optionsArg.getKind() !== SyntaxKind.ObjectLiteralExpression) return false
+
+  const enabledProp = getPropertyValue(
+    optionsArg.asKindOrThrow(SyntaxKind.ObjectLiteralExpression),
+    'enabledResponsiveVariants'
+  )
+  return enabledProp?.getKind() === SyntaxKind.TrueKeyword
+}
+
+function extractClasses(optionValue) {
+  if (optionValue.getKind() === SyntaxKind.ArrayLiteralExpression) {
+    return extractArrayElements(optionValue)
+  }
+  if (optionValue.getKind() === SyntaxKind.StringLiteral) {
+    return [optionValue.getLiteralValue()]
+  }
+  return []
+}
+
+function extractVariantsFromAST(sourceFile) {
+  const variants = {}
+
+  for (const call of sourceFile.getDescendantsOfKind(
+    SyntaxKind.CallExpression
+  )) {
+    const expression = call.getExpression()
+    // Check if the expression is 'styled' (trim to handle any whitespace edge cases)
+    const expressionText = expression.getText().trim()
+    if (expressionText !== 'styled') continue
+
+    const args = call.getArguments()
+    if (args.length < 2) continue
+
+    const configArg = args[1]
+    if (configArg.getKind() !== SyntaxKind.ObjectLiteralExpression) continue
+
+    if (!isEnabledResponsiveVariants(args)) continue
+
+    const configObj = configArg.asKindOrThrow(
+      SyntaxKind.ObjectLiteralExpression
+    )
+    const variantsValue = getPropertyValue(configObj, 'variants')
+
+    if (
+      !variantsValue ||
+      variantsValue.getKind() !== SyntaxKind.ObjectLiteralExpression
+    ) {
+      continue
+    }
+
+    const variantsObj = variantsValue.asKindOrThrow(
+      SyntaxKind.ObjectLiteralExpression
+    )
+
+    for (const variantProp of variantsObj.getProperties()) {
+      if (variantProp.getKind() !== SyntaxKind.PropertyAssignment) continue
+
+      const variant = variantProp.asKindOrThrow(SyntaxKind.PropertyAssignment)
+      const variantKey = variant.getNameNode().getText().replace(/['"]/g, '')
+      const variantValue = variant.getInitializer()
+
+      if (
+        !variantValue ||
+        variantValue.getKind() !== SyntaxKind.ObjectLiteralExpression
+      ) {
+        continue
+      }
+
+      const variantOptionsObj = variantValue.asKindOrThrow(
+        SyntaxKind.ObjectLiteralExpression
+      )
+      const options = {}
+
+      for (const optionProp of variantOptionsObj.getProperties()) {
+        if (optionProp.getKind() !== SyntaxKind.PropertyAssignment) continue
+
+        const option = optionProp.asKindOrThrow(SyntaxKind.PropertyAssignment)
+        const optionKey = option.getNameNode().getText().replace(/['"]/g, '')
+        const optionValue = option.getInitializer()
+
+        if (!optionValue) continue
+
+        const classes = extractClasses(optionValue)
+        if (classes.length > 0) {
+          options[optionKey] = classes
+        }
+      }
+
+      if (Object.keys(options).length > 0) {
+        variants[variantKey] = options
+      }
+    }
+  }
+
+  return Object.keys(variants).length > 0 ? variants : null
+}
+
+function generateResponsiveVariantClasses(variants) {
+  const breakpoints = ['sm', 'md', 'lg', 'xl']
+  const classes = new Set()
+
+  for (const variantOptions of Object.values(variants)) {
+    for (const classList of Object.values(variantOptions)) {
+      if (Array.isArray(classList)) {
+        for (const cls of classList) {
+          const trimmed = typeof cls === 'string' ? cls.trim() : ''
+          if (trimmed) {
+            classes.add(trimmed)
+            for (const bp of breakpoints) {
+              classes.add(`${bp}:${trimmed}`)
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return Array.from(classes).sort()
+}
+
+function extractUniqueClasses(allClasses) {
+  const uniqueClasses = new Set()
+
+  for (const cls of allClasses) {
+    const match = cls.match(/^(sm|md|lg|xl):(.+)$/)
+    uniqueClasses.add(match ? match[2] : cls)
+  }
+
+  return Array.from(uniqueClasses).sort()
+}
+
+/**
+ * Generate CSS file content with @source inline() patterns
+ */
+function generateCSSFileContent(allClasses) {
+  const uniqueClasses = extractUniqueClasses(allClasses)
+  const breakpointPrefix = `{,sm:,md:,lg:,xl:}`
+  const classPattern = `{${uniqueClasses.join(',')}}`
+  const pattern = `@source inline("${breakpointPrefix}${classPattern}");`
+
+  return `/**
+ * Tailwind Responsive Variant Classes Safelist (CSS Format)
+ * 
+ * ⚠️ AUTO-GENERATED FILE - DO NOT EDIT MANUALLY ⚠️
+ * 
+ * This file is automatically generated by the build script: scripts/generate-responsive-variant-classes.mjs
+ * Run \`yarn build:responsive-variant-classes\` to regenerate this file.
+ * 
+ * This file ensures Tailwind includes dynamically generated responsive classes
+ * when using responsive variants like: gap={{ '@initial': 1, '@sm': 3 }}
+ * 
+ * Uses Tailwind v4's @source inline() pattern syntax for efficient class detection.
+ */
+
+${pattern}
+`
+}
+
+/**
+ * Main function to generate responsive variant classes safelist
+ *
+ * @param {Object} options - Generation options
+ * @param {string} [options.cwd] - Working directory
+ * @param {string|string[]} [options.input] - Input glob pattern(s). Can be a string or array of strings
+ * @param {string} [options.outputPath] - Output file path relative to cwd
+ */
+async function generateResponsiveVariantClassesSafelist(options = {}) {
+  const {
+    cwd = process.cwd(),
+    input = 'src/**/*.{ts,tsx}',
+    outputPath = 'src/responsive-variant-classes.css'
+  } = options
+  try {
+    console.log('🔍 Scanning component files for styled() variants...\n')
+
+    const project = new Project({
+      tsConfigFilePath: path.resolve(cwd, 'tsconfig.json'),
+      skipAddingFilesFromTsConfig: true
+    })
+
+    const patterns = Array.isArray(input) ? input : [input]
+    const ignorePatterns = [
+      '**/*.test.tsx',
+      '**/*.test.ts',
+      '**/__snapshots__/**',
+      '**/node_modules/**',
+      '**/responsive-variant-classes.css'
+    ]
+
+    const files = new Set()
+    for (const pattern of patterns) {
+      const matches = glob.sync(pattern, { cwd, ignore: ignorePatterns })
+      matches.forEach((file) => files.add(file))
+    }
+
+    const fileArray = Array.from(files)
+    console.log(`Found ${fileArray.length} component files to scan\n`)
+
+    const allVariants = {}
+    let processedFiles = 0
+
+    for (const filePath of fileArray) {
+      try {
+        const fullPath = path.isAbsolute(filePath)
+          ? filePath
+          : path.resolve(cwd, filePath)
+
+        if (!fs.readFileSync(fullPath, 'utf-8').includes('styled(')) continue
+
+        const sourceFile = project.addSourceFileAtPath(fullPath)
+        const variants = extractVariantsFromAST(sourceFile)
+
+        if (variants) {
+          console.log(`  ✓ ${path.relative(cwd, fullPath)}`)
+          for (const [key, value] of Object.entries(variants)) {
+            // Merge variant options, combining arrays instead of overwriting
+            if (allVariants[key]) {
+              const merged = { ...allVariants[key] }
+              for (const [optionKey, optionValue] of Object.entries(value)) {
+                if (Array.isArray(optionValue)) {
+                  // Merge arrays and deduplicate
+                  const existing = Array.isArray(merged[optionKey])
+                    ? merged[optionKey]
+                    : []
+                  merged[optionKey] = [
+                    ...new Set([...existing, ...optionValue])
+                  ]
+                } else {
+                  merged[optionKey] = optionValue
+                }
+              }
+              allVariants[key] = merged
+            } else {
+              allVariants[key] = value
+            }
+          }
+          processedFiles++
+        }
+      } catch (error) {
+        console.warn(`  ⚠️  Error processing ${filePath}:`, error.message)
+      }
+    }
+
+    if (Object.keys(allVariants).length === 0) {
+      console.log('\n⚠️  No variants found in component files')
+      return
+    }
+
+    console.log(`\n📦 Extracted variants from ${processedFiles} files`)
+    console.log(
+      `   Found ${Object.keys(allVariants).length} unique variant keys\n`
+    )
+
+    // Generate all responsive classes
+    const allClasses = generateResponsiveVariantClasses(allVariants)
+
+    console.log(
+      `✨ Generated ${allClasses.length} responsive variant class combinations\n`
+    )
+
+    // Generate and write the CSS file
+    const cssContent = generateCSSFileContent(allClasses)
+    const cssOutputPath = path.resolve(cwd, outputPath)
+    fs.writeFileSync(cssOutputPath, cssContent, 'utf-8')
+
+    console.log(`✅ Generated ${path.relative(cwd, cssOutputPath)}`)
+    console.log(`   Contains ${allClasses.length} variant class combinations\n`)
+  } catch (error) {
+    console.error('❌ Error generating responsive variant classes:', error)
+    process.exit(1)
+  }
+}
+
+// Export the function for use in other modules
+export { generateResponsiveVariantClassesSafelist }
+
+// Run the script if this file is executed directly (not imported)
+const __filename = fileURLToPath(import.meta.url)
+if (process.argv[1] === __filename) {
+  generateResponsiveVariantClassesSafelist()
+}