@atom-learning/components 6.4.0 → 6.4.2

package/package.json

@@ -4,11 +4,13 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "6.4.0",
+  "version": "6.4.2",
   "description": "",
   "files": [
     "dist",
     "src/index.css",
+    "src/animation.css",
+    "src/utilities.css",
     "src/responsive-variant-classes.css",
     "scripts/vite-plugin-tailwind-responsive-variant-classes.mjs",
     "scripts/generate-responsive-variant-classes.mjs"
@@ -42,13 +44,13 @@
     "prepublishOnly": "run-s clean build:responsive-variant-classes build:lib build:types build:proptypes",
     "clean": "del ./dist/",
     "format": "oxfmt 'src/**/*.{js,ts,tsx}' --write",
-    "lint": "eslint 'src/**/*.{js,ts,tsx}' --fix",
+    "lint": "oxlint --fix src/",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:ci": "vitest run --reporter=verbose",
     "test:coverage": "vitest run --coverage",
     "validate": "run-p 'validate:**'",
-    "validate:linting": "eslint 'src/**/*.{js,ts,tsx}' --quiet",
+    "validate:linting": "oxlint src/ --quiet",
     "validate:size": "yarn build:lib && size-limit",
     "validate:types": "tsc --noEmit",
     "precommit": "lint-staged"
@@ -97,12 +99,9 @@
     "@types/prop-types": "^15",
     "@types/react": "17.0.80",
     "@types/react-dom": "^17.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^5.1.4",
     "@vitest/browser-playwright": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
-    "@vitest/eslint-plugin": "^1.6.9",
     "@vitest/ui": "^4.0.18",
     "alias-hq": "^5.3.0",
     "axe-core": "^4.11.1",
@@ -110,18 +109,11 @@
     "chokidar": "^3.5.1",
     "del-cli": "^3.0.1",
     "esbuild": "^0.25.12",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-import-resolver-typescript": "^2.3.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",
     "npm-run-all": "^4.1.5",
     "oxfmt": "^0.39.0",
+    "oxlint": "^1.55.0",
     "playwright": "^1.58.2",
     "pretty-format": "^30.2.0",
     "prompts": "^2.4.0",

package/src/animation.css

@@ -0,0 +1,109 @@
+@theme {
+    --easing: cubic-bezier(0.22, 1, 0.36, 1);
+
+    /**
+     * Animations
+     */
+    --animate-accordion-open: accordion-open 300ms ease-out;
+    --animate-accordion-close: accordion-close 300ms ease-out;
+  
+    @keyframes accordion-open {
+      from {
+        height: 0;
+      }
+      to {
+        height: var(--radix-accordion-content-height);
+      }
+    }
+    @keyframes accordion-close {
+      from {
+        height: var(--radix-accordion-content-height);
+      }
+      to {
+        height: 0;
+      }
+    }
+  
+    --animate-fade-in: fade-in 550ms var(--easing);
+    --animate-fade-out: fade-out 550ms var(--easing);
+  
+    @keyframes fade-in {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+    @keyframes fade-out {
+      0% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+  
+    --animate-slide-direction-in: slide-direction-in 225ms ease-out;
+    --animate-slide-direction-out: slide-direction-out 125ms ease-out;
+  
+    @keyframes slide-direction-in {
+      0% {
+        opacity: var(--slide-opacity-out, 1);
+        translate: var(--slide-direction-out-x, 0) var(--slide-direction-out-y, 0);
+      }
+      100% {
+        opacity: var(--slide-opacity-in, 1);
+        translate: var(--slide-direction-in-x, 0) var(--slide-direction-in-y, 0);
+      }
+    }
+    @keyframes slide-direction-out {
+      0% {
+        opacity: var(--slide-opacity-in, 1);
+        translate: var(--slide-direction-in-x, 0) var(--slide-direction-in-y, 0);
+      }
+      100% {
+        opacity: var(--slide-opacity-out, 1);
+        translate: var(--slide-direction-out-x, 0) var(--slide-direction-out-y, 0);
+      }
+    }
+  
+    --animate-slide-in-center: slide-in-center 550ms var(--easing);
+    --animate-slide-out-center: slide-out-center 550ms var(--easing);
+  
+    /**
+     * `transform: translate()` is required for `floating-ui` to
+     * correctly position elements within the Dialog component.
+     */
+    @keyframes slide-in-center {
+      0% {
+        transform: translate(-50%, 50vh);
+      }
+      100% {
+        transform: translate(-50%, -50%);
+      }
+    }
+    @keyframes slide-out-center {
+      0% {
+        transform: translate(-50%, -50%);
+      }
+      100% {
+        transform: translate(-50%, 50vh);
+      }
+    }
+  
+    --animate-shimmer: shimmer 2000ms ease-in-out 500ms infinite;
+  
+    @keyframes shimmer {
+      0% {
+        opacity: 1
+      }
+      50% {
+        opacity: 0.4
+      }
+      100% {
+        opacity: 1
+      }
+    }
+  }
+  

package/src/utilities.css

@@ -0,0 +1,87 @@
+@utility animation-delay-* {
+  animation-delay: calc(--value(integer) * 1ms);
+}
+
+@utility animation-duration-* {
+  animation-duration: calc(--value(integer) * 1ms);
+}
+
+@utility capsize-* {
+  &::before {
+    content: '';
+    margin-bottom: calc(-1em * --value([number]));
+    display: table;
+  }
+  &::after {
+    content: '';
+    margin-top: calc(-1em * --value([number]));
+    display: table;
+  }
+  & > & {
+    display: inline;
+    &::before,
+    &::after {
+      display: none !important;
+    }
+  }
+}
+
+@utility capsize-before-* {
+  &::before {
+    content: '';
+    margin-bottom: calc(-1em * --value([number]));
+    display: table;
+  }
+  & > &::before {
+    display: none !important;
+  } 
+}
+
+@utility capsize-after-* {
+  &::after {
+    content: '';
+    margin-top: calc(-1em * --value([number]));
+    display: table;
+  }
+  & > &::after {
+    display: none !important;
+  } 
+}
+
+@utility capsize-none {
+  &::before,
+  &::after {
+    display: none !important;
+  }
+}
+
+/**
+  * Font Feature Settings for Inter
+  */
+@utility readability-features {
+  font-feature-settings: var(--readability-features);
+}
+
+@utility readability-number-features {
+  font-feature-settings: var(--readability-number-features);
+}
+
+@utility grid-areas-* {
+  grid-template-areas: --value([*]);
+}
+
+@utility grid-in-* {
+  grid-area: --value([*]);
+}
+
+@custom-variant supports-color-mix {
+  @supports (background-color: color-mix(in hsl, white 50%, transparent)) {
+    @slot;
+  }
+}
+
+@custom-variant supports-svh {
+  @supports (height: 100svh) {
+    @slot;
+  }
+}