@economic/taco 1.1.4 → 1.1.5-alpha.102

package/dist/utils/mergeRefs.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export default function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;
+export declare function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@economic/taco",
-    "version": "1.1.4",
+    "version": "1.1.5-alpha.102+7f221a401",
     "description": "> TODO: description",
     "author": "Matt Daly <matthew.daly@visma.com>",
     "homepage": "https://github.com/e-conomic/taco#readme",
@@ -27,7 +27,6 @@
         "url": "git+https://github.com/e-conomic/taco.git"
     },
     "scripts": {
-        "prewatch": "npm run generate-typedoc",
         "watch": "tsdx watch",
         "build": "tsdx build",
         "postbuild": "npm run generate-typedoc",
@@ -43,6 +42,7 @@
         "url": "https://github.com/e-conomic/taco/issues"
     },
     "dependencies": {
+        "@economic/taco-tokens": "^1.0.3",
         "@radix-ui/react-accordion": "^0.1.6",
         "@radix-ui/react-checkbox": "^0.1.5",
         "@radix-ui/react-dialog": "^0.1.7",
@@ -56,7 +56,7 @@
         "@radix-ui/react-use-controllable-state": "^0.1.0",
         "@react-aria/focus": "^3.2.3",
         "@react-aria/interactions": "^3.3.2",
-        "classnames": "^2.2.6",
+        "classnames": "^2.3.1",
         "date-fns": "^2.14.0",
         "framer-motion": "^5.5.6",
         "keycode": "^2.2.0",
@@ -76,13 +76,11 @@
         "tailwindcss": ">=3"
     },
     "devDependencies": {
-        "@economic/taco-tokens": "^1.0.1",
         "@svgr/cli": "^5.5.0",
         "@testing-library/dom": "^7.31.0",
         "@testing-library/jest-dom": "^5.11.4",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
-        "@types/classnames": "^2.2.9",
         "@types/lodash": "^4.14.168",
         "@types/react": "^17.0.35",
         "@types/react-dom": "^17.0.11",
@@ -107,7 +105,7 @@
         "svgo": "^1.3.2",
         "tailwindcss": "^3.0.1",
         "tsdx": "^0.13.2",
-        "typedoc": "^0.22.10",
+        "typedoc": "0.18.0",
         "typescript": "^4.4.4"
     },
     "jest": {
@@ -128,5 +126,6 @@
             "Firefox ESR",
             "not ie < 11"
         ]
-    }
+    },
+    "gitHead": "7f221a4014352944e52be9e29712d0d3f7a3cd99"
 }

package/plugins/tailwindcss-aria-attributes.js

@@ -1,73 +1,73 @@
-// copied from this unpublished plugin https://github.com/thoughtbot/tailwindcss-aria-attributes#usage
-const plugin = require('tailwindcss/plugin');
-
-module.exports = plugin(({ addVariant, e }) => {
-    [
-        'atomic',
-        'busy',
-        'checked',
-        'current',
-        'disabled',
-        'expanded',
-        'grabbed',
-        'haspopup',
-        'hidden',
-        'invalid',
-        'live',
-        'modal',
-        'multiline',
-        'multiselectable',
-        'pressed',
-        'readonly',
-        'required',
-        'selected',
-    ].forEach(boolean => {
-        const selector = `aria-${boolean}`;
-        addVariant(selector, ({ modifySelectors, separator }) =>
-            modifySelectors(({ className }) => `[${selector}="true"].${e(`${selector}${separator}${className}`)}`)
-        );
-
-        const groupSelector = `group-aria-${boolean}`;
-        addVariant(groupSelector, ({ modifySelectors, separator }) =>
-            modifySelectors(({ className }) => `.group[aria-${boolean}="true"] .${e(`${groupSelector}${separator}${className}`)}`)
-        );
-
-        const peerSelector = `peer-aria-${boolean}`;
-        addVariant(peerSelector, ({ modifySelectors, separator }) =>
-            modifySelectors(({ className }) => `.peer[aria-${boolean}="true"] ~ .${e(`${peerSelector}${separator}${className}`)}`)
-        );
-    });
-
-    const enumerables = {
-        autocomplete: ['both', 'inline', 'list', 'none'],
-        current: ['date', 'location', 'page', 'step', 'time'],
-        dropeffect: ['copy', 'execute', 'link', 'move', 'none', 'popup'],
-        haspopup: ['dialog', 'grid', 'listbox', 'menu', 'tree'],
-        orientation: ['horizontal', 'undefined', 'vertial'],
-        relevant: ['additions', 'all', 'removals', 'text'],
-        sort: ['ascending', 'descending', 'none', 'other'],
-    };
-
-    for (const [attribute, values] of Object.entries(enumerables)) {
-        for (const value of values) {
-            const selector = `aria-${attribute}-${value}`;
-            addVariant(selector, ({ modifySelectors, separator }) =>
-                modifySelectors(({ className }) => `[aria-${attribute}="${value}"].${e(`${selector}${separator}${className}`)}`)
-            );
-
-            const groupSelector = `group-aria-${attribute}-${value}`;
-            addVariant(groupSelector, ({ modifySelectors, separator }) =>
-                modifySelectors(
-                    ({ className }) => `.group[aria-${attribute}="${value}"] .${e(`${groupSelector}${separator}${className}`)}`
-                )
-            );
-
-            const peerSelector = `peer-aria-${attribute}-${value}`;
-            addVariant(peerSelector, ({ modifySelectors, separator }) =>
-                modifySelectors(
-                    ({ className }) => `.peer[aria-${attribute}="${value}"] ~ .${e(`${peerSelector}${separator}${className}`)}`
-                )
-            );
-        }
-    }
-});
+// copied from this unpublished plugin https://github.com/thoughtbot/tailwindcss-aria-attributes#usage
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(({ addVariant, e }) => {
+    [
+        'atomic',
+        'busy',
+        'checked',
+        'current',
+        'disabled',
+        'expanded',
+        'grabbed',
+        'haspopup',
+        'hidden',
+        'invalid',
+        'live',
+        'modal',
+        'multiline',
+        'multiselectable',
+        'pressed',
+        'readonly',
+        'required',
+        'selected',
+    ].forEach(boolean => {
+        const selector = `aria-${boolean}`;
+        addVariant(selector, ({ modifySelectors, separator }) =>
+            modifySelectors(({ className }) => `[${selector}="true"].${e(`${selector}${separator}${className}`)}`)
+        );
+
+        const groupSelector = `group-aria-${boolean}`;
+        addVariant(groupSelector, ({ modifySelectors, separator }) =>
+            modifySelectors(({ className }) => `.group[aria-${boolean}="true"] .${e(`${groupSelector}${separator}${className}`)}`)
+        );
+
+        const peerSelector = `peer-aria-${boolean}`;
+        addVariant(peerSelector, ({ modifySelectors, separator }) =>
+            modifySelectors(({ className }) => `.peer[aria-${boolean}="true"] ~ .${e(`${peerSelector}${separator}${className}`)}`)
+        );
+    });
+
+    const enumerables = {
+        autocomplete: ['both', 'inline', 'list', 'none'],
+        current: ['date', 'location', 'page', 'step', 'time'],
+        dropeffect: ['copy', 'execute', 'link', 'move', 'none', 'popup'],
+        haspopup: ['dialog', 'grid', 'listbox', 'menu', 'tree'],
+        orientation: ['horizontal', 'undefined', 'vertial'],
+        relevant: ['additions', 'all', 'removals', 'text'],
+        sort: ['ascending', 'descending', 'none', 'other'],
+    };
+
+    for (const [attribute, values] of Object.entries(enumerables)) {
+        for (const value of values) {
+            const selector = `aria-${attribute}-${value}`;
+            addVariant(selector, ({ modifySelectors, separator }) =>
+                modifySelectors(({ className }) => `[aria-${attribute}="${value}"].${e(`${selector}${separator}${className}`)}`)
+            );
+
+            const groupSelector = `group-aria-${attribute}-${value}`;
+            addVariant(groupSelector, ({ modifySelectors, separator }) =>
+                modifySelectors(
+                    ({ className }) => `.group[aria-${attribute}="${value}"] .${e(`${groupSelector}${separator}${className}`)}`
+                )
+            );
+
+            const peerSelector = `peer-aria-${attribute}-${value}`;
+            addVariant(peerSelector, ({ modifySelectors, separator }) =>
+                modifySelectors(
+                    ({ className }) => `.peer[aria-${attribute}="${value}"] ~ .${e(`${peerSelector}${separator}${className}`)}`
+                )
+            );
+        }
+    }
+});

package/tailwind.config.js

@@ -1,5 +1,6 @@
 const tokens = require('@economic/taco-tokens').default;
 const plugin = require('tailwindcss/plugin');
+const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
     theme: {
@@ -31,6 +32,10 @@ module.exports = {
                 md: '64rem',
                 lg: '80rem',
             },
+            screens: {
+                xs: '375px',
+                ...defaultTheme.screens,
+            },
         },
     },
     plugins: [
@@ -183,6 +188,10 @@ module.exports = {
                     'box-shadow': '0 0 0 2px rgba(0, 99, 255, 0.25)',
                     outline: 'none',
                 },
+                '.yt-focus-dark': {
+                    'box-shadow': '0 0 0 3px rgba(38, 132, 255, 75%)',
+                    outline: 'none',
+                },
                 '.yt-focus-green': {
                     'box-shadow': '0 0 0 0.15rem rgba(0, 213, 165, 0.25)',
                     outline: 'none',