diff --git a/next-app/package.json b/next-app/package.json
index 41e4eb4f..e4df9935 100644
--- a/next-app/package.json
+++ b/next-app/package.json
@@ -30,7 +30,7 @@
"typescript": "4.8.2"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
}
}
diff --git a/package.json b/package.json
index ba79bbe4..d62cc9ae 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
"find-up": "^6.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@changesets/changelog-github": "0.4.7",
diff --git a/packages/accordion/package.json b/packages/accordion/package.json
index 20b8740b..1f7201a1 100644
--- a/packages/accordion/package.json
+++ b/packages/accordion/package.json
@@ -41,7 +41,7 @@
"@react-aria/interactions": "^3.12.0",
"nanoid": "^3.3.4",
"react-transition-group": "^4.4.5",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -55,8 +55,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0",
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0",
"styled-components": ">= 5.3.6"
},
"publishConfig": {
diff --git a/packages/active-zone/package.json b/packages/active-zone/package.json
index 7b3bc6fa..e86b4ba9 100644
--- a/packages/active-zone/package.json
+++ b/packages/active-zone/package.json
@@ -39,7 +39,7 @@
"@react-aria/focus": "^3.9.0",
"@react-aria/interactions": "^3.12.0",
"@react-spectrum/utils": "^3.7.4",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -51,8 +51,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/alert-dialog/package.json b/packages/alert-dialog/package.json
index 0376efb6..e2d4da5c 100644
--- a/packages/alert-dialog/package.json
+++ b/packages/alert-dialog/package.json
@@ -40,7 +40,7 @@
"@jengaui/portal": "workspace:0.4.0",
"@react-aria/utils": "^3.14.0",
"@react-types/dialog": "^3.4.4",
- "tastycss": "^0.13.0",
+ "tastycss": "^0.17.2",
"tiny-invariant": "^1.3.1"
},
"devDependencies": {
@@ -54,8 +54,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/alert/package.json b/packages/alert/package.json
index 201185eb..5a8ce292 100644
--- a/packages/alert/package.json
+++ b/packages/alert/package.json
@@ -33,7 +33,7 @@
"dependencies": {
"@jengaui/core": "workspace:0.4.0",
"@jengaui/hooks": "workspace:0.4.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -45,8 +45,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/avatar/package.json b/packages/avatar/package.json
index dca2104a..8440733f 100644
--- a/packages/avatar/package.json
+++ b/packages/avatar/package.json
@@ -33,7 +33,7 @@
"lint": "TIMING=1 eslint src/**/*.ts* --fix"
},
"dependencies": {
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -46,8 +46,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/badge/package.json b/packages/badge/package.json
index 1f30bfe3..0c39f49f 100644
--- a/packages/badge/package.json
+++ b/packages/badge/package.json
@@ -34,7 +34,7 @@
},
"dependencies": {
"@jengaui/core": "workspace:0.4.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -47,8 +47,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/banner/package.json b/packages/banner/package.json
index 3b716ab5..43dee34a 100644
--- a/packages/banner/package.json
+++ b/packages/banner/package.json
@@ -42,7 +42,7 @@
"@jengaui/button": "workspace:0.4.0",
"@jengaui/card": "workspace:0.4.0",
"@jengaui/core": "workspace:0.4.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -55,8 +55,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json
index ff644d0c..4b0f6dea 100644
--- a/packages/breadcrumbs/package.json
+++ b/packages/breadcrumbs/package.json
@@ -38,7 +38,7 @@
"@react-aria/breadcrumbs": "^3.3.2",
"@react-types/breadcrumbs": "^3.4.4",
"@react-types/shared": "3.15.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -51,8 +51,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/button-group/package.json b/packages/button-group/package.json
index afa085fa..6fb732e3 100644
--- a/packages/button-group/package.json
+++ b/packages/button-group/package.json
@@ -36,7 +36,7 @@
"dependencies": {
"@jengaui/layout": "workspace:0.4.0",
"@jengaui/utils": "workspace:0.4.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -49,8 +49,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/button-group/src/ButtonGroup.tsx b/packages/button-group/src/ButtonGroup.tsx
index fc4883c1..ddde8386 100644
--- a/packages/button-group/src/ButtonGroup.tsx
+++ b/packages/button-group/src/ButtonGroup.tsx
@@ -18,4 +18,4 @@ export const ButtonGroup = forwardRef(function ButtonGroup(
return (
);
-});
+});
\ No newline at end of file
diff --git a/packages/button/package.json b/packages/button/package.json
index ce641c29..cc14392a 100644
--- a/packages/button/package.json
+++ b/packages/button/package.json
@@ -36,12 +36,13 @@
"@jengaui/form": "workspace:0.4.0",
"@jengaui/providers": "workspace:0.4.0",
"@jengaui/utils": "workspace:0.4.0",
+ "@jengaui/hooks": "workspace:0.4.0",
"@react-aria/button": "^3.6.2",
"@react-aria/interactions": "^3.12.0",
"@react-spectrum/utils": "^3.7.4",
"@react-types/shared": "^3.15.0",
"react-is": "^17.0.2",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
@@ -58,8 +59,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/button/src/Action.tsx b/packages/button/src/Action.tsx
index 19317309..dc254847 100644
--- a/packages/button/src/Action.tsx
+++ b/packages/button/src/Action.tsx
@@ -1,26 +1,22 @@
-import { forwardRef, MouseEventHandler, useCallback, useContext } from 'react';
-import { useHover } from '@react-aria/interactions';
-import { useButton } from '@react-aria/button';
+import { forwardRef, MouseEventHandler } from 'react';
import { AriaButtonProps } from '@react-types/button';
-import { useFocusableRef } from '@react-spectrum/utils';
import { FocusableRef } from '@react-types/shared';
-import { UIKitContext } from '@jengaui/providers';
-import { mergeProps } from '@jengaui/utils';
-import { useFocus } from '@jengaui/utils';
+
import {
BaseProps,
BaseStyleProps,
CONTAINER_STYLES,
ContainerStyleProps,
extractStyles,
- filterBaseProps,
Styles,
TagNameProps,
TEXT_STYLES,
TextStyleProps,
- Element,
+ tasty,
} from 'tastycss';
+import { useAction } from './use-action';
+
export interface JengaActionProps
extends BaseProps,
TagNameProps,
@@ -36,93 +32,11 @@ export interface JengaActionProps
onMouseLeave?: MouseEventHandler;
}
-const FILTER_OPTIONS = { propNames: new Set(['onMouseEnter', 'onMouseLeave']) };
-
-/**
- * Helper to open link.
- * @param {String} href
- * @param {String|Boolean} [target]
- */
-export function openLink(href, target?) {
- const link = document.createElement('a');
-
- link.href = href;
-
- if (target) {
- link.target = target === true ? '_blank' : target;
- }
-
- document.body.appendChild(link);
-
- link.click();
-
- document.body.removeChild(link);
-}
-
-export function parseTo(to): {
- newTab: boolean;
- nativeRoute: boolean;
- href: string | undefined;
-} {
- const newTab = to && typeof to === 'string' && to.startsWith('!');
- const nativeRoute = to && typeof to === 'string' && to.startsWith('@');
- const href: string | undefined =
- to && typeof to === 'string'
- ? newTab || nativeRoute
- ? to.slice(1)
- : to
- : undefined;
-
- return {
- newTab,
- nativeRoute,
- href,
- };
-}
-
-export function performClickHandler(evt, router, to, onPress) {
- const { newTab, nativeRoute, href } = parseTo(to);
-
- onPress?.(evt);
-
- if (!to) return;
-
- if (evt.shiftKey || evt.metaKey || newTab) {
- openLink(href, true);
-
- return;
- }
-
- if (nativeRoute) {
- openLink(href || window.location.href);
- } else if (href && href.startsWith('#')) {
- const id = href.slice(1);
- const element = document.getElementById(id);
-
- if (element) {
- element.scrollIntoView({
- behavior: 'smooth',
- block: 'start',
- inline: 'nearest',
- });
-
- return;
- }
- }
-
- if (router) {
- router.push(href);
- } else if (href) {
- window.location.href = href;
- }
-}
-
-const DEFAULT_STYLES: Styles = {
+const DEFAULT_ACTION_STYLES: Styles = {
reset: 'button',
position: 'relative',
margin: 0,
- fontFamily: 'var(--font)',
- fontWeight: 'inherit',
+ preset: 'inherit',
border: 0,
padding: 0,
outline: {
@@ -131,74 +45,27 @@ const DEFAULT_STYLES: Styles = {
},
transition: 'theme',
cursor: 'pointer',
+ textDecoration: 'none',
+ fill: '#clear',
} as const;
+const ActionElement = tasty({
+ as: 'button',
+ styles: DEFAULT_ACTION_STYLES,
+});
+
const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
export const Action = forwardRef(function Action(
{ to, as, htmlType, label, theme, mods, onPress, ...props }: JengaActionProps,
ref: FocusableRef,
) {
- as = to ? 'a' : as || 'button';
-
- const router = useContext(UIKitContext).router;
- const isDisabled = props.isDisabled;
- const { newTab, href } = parseTo(to);
- const target = newTab ? '_blank' : undefined;
- const domRef = useFocusableRef(ref);
- const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
-
- const customOnPress = useCallback(
- (evt) => {
- performClickHandler(evt, router, to, onPress);
- },
- [router, to, onPress],
+ const { actionProps } = useAction(
+ { to, as, htmlType, label, onPress, mods, ...props },
+ ref,
);
- let { buttonProps, isPressed } = useButton(
- {
- ...props,
- onPress: customOnPress,
- },
- domRef,
- );
- let { hoverProps, isHovered } = useHover({ isDisabled });
- let { focusProps, isFocused } = useFocus({ isDisabled }, true);
+ const styles = extractStyles(props, STYLE_PROPS);
- const customProps = to
- ? {
- onClick(evt) {
- evt.preventDefault();
- },
- }
- : {};
-
- return (
-
- );
-});
+ return ;
+});
\ No newline at end of file
diff --git a/packages/button/src/Button.tsx b/packages/button/src/Button.tsx
index 6216deaf..5b2535c1 100644
--- a/packages/button/src/Button.tsx
+++ b/packages/button/src/Button.tsx
@@ -1,16 +1,21 @@
import { cloneElement, forwardRef, ReactElement, useMemo } from 'react';
import { LoadingOutlined } from '@ant-design/icons';
import { FocusableRef } from '@react-types/shared';
-import { Styles } from 'tastycss';
-import { accessibilityWarning } from '@jengaui/utils';
-import type {} from 'csstype';
-import { Action, JengaActionProps } from './Action';
+import { JengaActionProps } from './Action';
+import {
+ CONTAINER_STYLES,
+ extractStyles,
+ Styles,
+ tasty,
+ TEXT_STYLES,
+} from 'tastycss';
+import { accessibilityWarning } from '@jengaui/utils';
+import { useAction } from './use-action';
export interface JengaButtonProps extends JengaActionProps {
icon?: ReactElement;
rightIcon?: ReactElement;
- isDisabled?: boolean;
isLoading?: boolean;
isSelected?: boolean;
type?:
@@ -25,258 +30,241 @@ export interface JengaButtonProps extends JengaActionProps {
size?: 'small' | 'medium' | 'large' | (string & {});
}
-export function provideButtonStyles({ type, theme }) {
- return {
- ...(theme === 'danger' ? DANGER_STYLES_BY_TYPE : DEFAULT_STYLES_BY_TYPE)[
- type ?? 'secondary'
- ],
- };
-}
-
-const DEFAULT_STYLES_BY_TYPE: { [key: string]: Styles } = {
- primary: {
- border: {
- '': '#clear',
- pressed: '#purple-text',
- },
- fill: {
- hovered: '#purple-text',
- 'pressed | !hovered': '#purple',
- '[disabled]': '#dark.04',
- },
- color: {
- '': '#white',
- '[disabled]': '#dark.30',
- },
- },
- secondary: {
- border: {
- '': '#clear',
- pressed: '#purple.30',
- },
- fill: {
- '': '#purple.10',
- hovered: '#purple.16',
- pressed: '#purple.10',
- '[disabled]': '#dark.04',
- },
- color: {
- '': '#purple',
- '[disabled]': '#dark.30',
- },
- },
- clear: {
- border: {
- '': '#clear',
- pressed: '#purple-text.10',
- },
- fill: {
- '': '#purple.0',
- hovered: '#purple.16',
- pressed: '#purple.10',
- '[disabled]': '#purple.0',
- },
- color: {
- '': '#purple-text',
- '[disabled]': '#dark.30',
- },
- },
- outline: {
- border: {
- '': '#purple.30',
- pressed: '#purple-text.10',
- '[disabled]': '#dark.12',
- },
- fill: {
- '': '#purple.0',
- hovered: '#purple.16',
- pressed: '#purple.10',
- '[disabled]': '#purple.0',
- },
- color: {
- '': '#purple-text',
- '[disabled]': '#dark.30',
- },
- },
- link: {
- fontWeight: 500,
- padding: '0',
- radius: {
- '': '0',
- focused: true,
- },
- fill: '#clear',
- color: {
- '': '#purple-text',
- pressed: '#purple',
- '[disabled]': '#dark.30',
- },
- shadow: {
- '': '0 @border-width 0 0 #purple-03.20',
- focused: '0 0 0 @outline-width #purple-03.20',
- 'pressed | hovered | [disabled]': '0 0 0 0 #purple.20',
- },
- },
- neutral: {
- border: '#clear',
- fill: {
- '': '#dark.0',
- hovered: '#dark.04',
- pressed: '#purple.10',
- '[disabled]': '#dark.04',
- },
- color: {
- '': '#dark.75',
- hovered: '#dark.75',
- pressed: '#purple',
- '[disabled]': '#dark.30',
- },
- },
-};
-
-const DANGER_STYLES_BY_TYPE: { [key: string]: Styles } = {
- primary: {
- border: {
- '': '#clear',
- pressed: '#danger-text',
- },
- fill: {
- hovered: '#danger-text',
- 'pressed | !hovered': '#danger',
- '[disabled]': '#dark.04',
- },
- color: {
- '': '#white',
- '[disabled]': '#dark.30',
- },
- },
- secondary: {
- border: {
- '': '#clear',
- pressed: '#danger.30',
- },
- fill: {
- '': '#danger.05',
- hovered: '#danger.1',
- pressed: '#danger.05',
- '[disabled]': '#dark.04',
- },
- color: {
- '': '#danger',
- '[disabled]': '#dark.30',
- },
- },
- clear: {
- border: {
- '': '#clear',
- pressed: '#danger-text.10',
- },
- fill: {
- '': '#danger.0',
- hovered: '#danger.1',
- pressed: '#danger.05',
- '[disabled]': '#danger.0',
- },
- color: {
- '': '#danger-text',
- '[disabled]': '#dark.30',
- },
- },
- outline: {
- border: {
- '': '#danger.30',
- pressed: '#danger-text.10',
- '[disabled]': '#dark.04',
- },
- fill: {
- '': '#danger.0',
- hovered: '#danger.1',
- pressed: '#danger.05',
- '[disabled]': '#danger.0',
- },
- color: {
- '': '#danger-text',
- '[disabled]': '#dark.30',
- },
- },
- link: {
- ...DEFAULT_STYLES_BY_TYPE.link,
- color: {
- '': '#danger-text',
- pressed: '#danger',
- '[disabled]': '#dark.30',
- },
- shadow: {
- '': '0 @border-width 0 0 #danger.20',
- focused: '0 0 0 @outline-width #danger.20',
- 'pressed | hovered | [disabled]': '0 0 0 0 #danger.20',
- },
- },
- neutral: {
- border: '0',
- fill: {
- '': '#dark.0',
- hovered: '#dark.04',
- pressed: '#dark.05',
- '[disabled]': '#dark.04',
- },
- color: {
- '': '#dark.75',
- hovered: '#dark.75',
- pressed: '#danger',
- '[disabled]': '#dark.30',
- },
- },
-};
+const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
-export const DEFAULT_BUTTON_STYLES = {
+export const DEFAULT_BUTTON_STYLES: Styles = {
display: 'inline-grid',
placeItems: 'center stretch',
placeContent: 'center',
+ position: 'relative',
+ margin: 0,
+ outline: {
+ '': '#purple-03.0',
+ focused: '#purple-03',
+ },
+ cursor: 'pointer',
gap: '1x',
flow: 'column',
- radius: true,
- fontWeight: 500,
preset: {
'': 't3m',
'[data-size="large"]': 't2m',
},
textDecoration: 'none',
transition: 'theme',
+ reset: 'button',
padding: {
'': '(1.25x - 1bw) (2x - 1bw)',
'[data-size="small"]': '(.75x - 1bw) (1.5x - 1bw)',
'[data-size="medium"]': '(1.25x - 1bw) (2x - 1bw)',
'[data-size="large"]': '(1.5x - 1bw) (2.5x - 1bw)',
- 'single-icon-only': 0,
+ 'single-icon-only | [data-type="link"]': 0,
},
width: {
'': 'initial',
- '[data-size="small"] & single-icon-only': '4x',
- '[data-size="medium"] & single-icon-only': '5x',
- '[data-size="large"] & single-icon-only': '6x',
+ '[data-size="small"] & single-icon-only': '4x 4x',
+ '[data-size="medium"] & single-icon-only': '5x 5x',
+ '[data-size="large"] & single-icon-only': '6x 6x',
},
height: {
'': 'initial',
- '[data-size="small"] & single-icon-only': '4x',
- '[data-size="medium"] & single-icon-only': '5x',
- '[data-size="large"] & single-icon-only': '6x',
+ '[data-size="small"] & single-icon-only': '4x 4x',
+ '[data-size="medium"] & single-icon-only': '5x 5x',
+ '[data-size="large"] & single-icon-only': '6x 6x',
},
whiteSpace: 'nowrap',
+ radius: {
+ '': true,
+ '[data-type="link"] & !focused': 0,
+ },
+
'& .anticon': {
transition:
'display .2s steps(1, start), margin .2s linear, opacity .2s linear',
},
ButtonIcon: {
- fontSize: {
- '': 'initial',
- '[data-size="small"]': '14px',
- '[data-size="medium"]': '16px',
- '[data-size="large"]': '18px',
+ display: 'grid',
+ fontSize: '@icon-size',
+ },
+};
+
+const ButtonElement = tasty({
+ qa: 'Button',
+ styles: DEFAULT_BUTTON_STYLES,
+ variants: {
+ default: {
+ shadow: {
+ '': false,
+ '[data-type="link"]': '0 @border-width 0 0 #purple.20',
+ '[data-type="link"] & (pressed | hovered | [disabled])':
+ '0 0 0 0 #purple.20',
+ },
+ outline: {
+ '': '0 #purple-03.0',
+ focused: '@outline-width #purple-03',
+ },
+ border: {
+ // default
+ '': '#clear',
+ '[data-type="primary"] & pressed': '#purple-text',
+ '[data-type="secondary"] & pressed': '#purple.3',
+ '[data-type="outline"]': '#purple.3',
+ '[data-type="outline"] & [disabled]': '#dark.12',
+ '([data-type="clear"] | [data-type="outline"]) & pressed':
+ '#purple-text.10',
+ '[data-type="link"]': '0',
+ },
+ fill: {
+ '': '#clear',
+
+ '[data-type="primary"]': '#purple',
+ '[data-type="primary"] & pressed': '#purple',
+ '[data-type="primary"] & hovered': '#purple-text',
+
+ '[data-type="secondary"]': '#purple.10',
+ '[data-type="secondary"] & hovered': '#purple.16',
+ '[data-type="secondary"] & pressed': '#purple-text.10',
+
+ '[data-type="neutral"]': '#dark.0',
+ '[data-type="neutral"] & hovered': '#dark.04',
+ '[data-type="neutral"] & pressed': '#dark.05',
+
+ '[disabled] & ![data-type="link"]': '#dark.04',
+
+ '([data-type="clear"] | [data-type="outline"])': '#purple.0',
+ '([data-type="clear"] | [data-type="outline"]) & hovered': '#purple.16',
+ '([data-type="clear"] | [data-type="outline"]) & pressed': '#purple.10',
+ '([data-type="clear"] | [data-type="outline"]) & [disabled]':
+ '#purple.0',
+ },
+ color: {
+ // default
+ '': '#white',
+ '[data-type="secondary"]': '#purple',
+ '[data-type="clear"] | [data-type="outline"] | [data-type="link"]':
+ '#purple-text',
+ '[data-type="link"] & pressed': '#purple',
+ '[data-type="neutral"]': '#dark.75',
+ '[data-type="neutral"] & hovered': '#dark.75',
+ '[data-type="neutral"] & pressed': '#purple',
+
+ // other
+ '[disabled]': '#dark.30',
+ },
+ },
+ danger: {
+ shadow: {
+ '': false,
+ '[data-type="link"]': '0 @border-width 0 0 #danger.20',
+ '[data-type="link"] & (pressed | hovered | [disabled])':
+ '0 0 0 0 #danger.20',
+ },
+ outline: {
+ '': '0 #danger.0',
+ focused: '@outline-width #danger.50',
+ },
+ border: {
+ '': '#clear',
+ '[data-type="primary"] & pressed': '#danger-text',
+ '[data-type="secondary"] & pressed': '#danger.3',
+ '[data-type="outline"]': '#danger-text.3',
+ '([data-type="clear"] | [data-type="outline"]) & pressed':
+ '#danger-text.10',
+ '[data-type="outline"] & pressed': '#danger.3',
+ '[data-type="link"]': '#clear',
+ },
+ fill: {
+ '': '#clear',
+ '[data-type="primary"]': '#danger-text',
+ '[data-type="primary"] & hovered': '#danger-text',
+ '[data-type="primary"] & pressed': '#danger',
+
+ '[data-type="secondary"]': '#danger.05',
+ '[data-type="secondary"] & hovered': '#danger.1',
+ '[data-type="secondary"] & pressed': '#danger.05',
+
+ '[data-type="neutral"]': '#dark.0',
+ '[data-type="neutral"] & hovered': '#dark.04',
+ '[data-type="neutral"] & pressed': '#dark.05',
+
+ '[disabled] & ![data-type="link"]': '#dark.04',
+
+ '[data-type="clear"] | [data-type="outline"]': '#danger.0',
+ '([data-type="clear"] | [data-type="outline"]) & hovered': '#danger.1',
+ '([data-type="clear"] | [data-type="outline"]) & pressed': '#danger.05',
+ '([data-type="clear"] | [data-type="outline"]) & [disabled]':
+ '#danger.0',
+ },
+ color: {
+ '': '#white',
+
+ '[data-type="neutral"]': '#dark.75',
+ '[data-type="neutral"] & hovered': '#dark.75',
+ '[data-type="secondary"]': '#danger',
+ '[data-type="clear"] | [data-type="outline"] | [data-type="link"]':
+ '#danger-text',
+ '[data-type="link"] & pressed': '#danger',
+ '[data-type="neutral"] & pressed': '#danger',
+
+ '[disabled]': '#dark.30',
+ },
+ },
+ special: {
+ shadow: {
+ '': false,
+ '[data-type="link"]': '0 @border-width 0 0 #white.44',
+ '[data-type="link"] & (pressed | hovered | [disabled])':
+ '0 0 0 0 #white.44',
+ },
+ outline: {
+ '': '0 #white.0',
+ focused: '@outline-width #white.44',
+ '([data-type="primary"] | [data-type="clear"])': '0 #dark-03.80',
+ '([data-type="primary"] | [data-type="clear"]) & focused':
+ '@outline-width #purple-03.80',
+ },
+ border: {
+ '': '#clear',
+ '[data-type="primary"] & pressed': '#purple-03',
+ '[data-type="secondary"] & pressed': '#white.44',
+ '[data-type="outline"] & !pressed': '#white.44',
+ },
+ fill: {
+ '': '#clear',
+
+ '[data-type="primary"]': '#purple',
+ '[data-type="primary"] & pressed': '#purple',
+ '[data-type="primary"] & hovered': '#purple-text',
+
+ '[data-type="secondary"]': '#white.12',
+
+ '[data-type="clear"]': '#white',
+ '[data-type="clear"] & hovered': '#white.94',
+ '[data-type="clear"] & pressed': '#white',
+
+ '[disabled] & ![data-type="link"]': '#white.12',
+
+ '([data-type="neutral"] | [data-type="outline"])': '#white.0',
+ '([data-type="neutral"] | [data-type="outline"] | [data-type="secondary"]) & hovered':
+ '#white.18',
+ '([data-type="neutral"] | [data-type="outline"] | [data-type="secondary"]) & pressed':
+ '#white.12',
+
+ '([data-type="clear"] | [data-type="outline"]) & [disabled]':
+ '#white.0',
+ },
+ color: {
+ // default
+ '': '#white',
+
+ '[data-type="clear"]': '#purple',
+
+ // other
+ '[disabled]': '#white.30',
+ },
},
},
-} as Styles;
+});
export const Button = forwardRef(function Button(
allProps: JengaButtonProps,
@@ -286,46 +274,38 @@ export const Button = forwardRef(function Button(
type,
size,
label,
- styles,
children,
- theme,
+ theme = 'default',
icon,
rightIcon,
mods,
...props
} = allProps;
- const isDisabled = props.isDisabled;
+ const isDisabled = props.isDisabled || props.isLoading;
const isLoading = props.isLoading;
const isSelected = props.isSelected;
+ children = children || icon || rightIcon ? children : label;
+
if (!children) {
if (icon) {
if (!label) {
accessibilityWarning(
'If you provide `icon` property for a Button and do not provide any children then you should specify the `label` property to make sure the Button element stays accessible.',
);
+ label = 'Unnamed'; // fix to avoid warning in production
}
} else {
if (!label) {
accessibilityWarning(
'If you provide no children for a Button then you should specify the `label` property to make sure the Button element stays accessible.',
);
+ label = 'Unnamed'; // fix to avoid warning in production
}
}
}
- children = children || icon || rightIcon ? children : label;
-
- styles = useMemo(
- () => ({
- ...DEFAULT_BUTTON_STYLES,
- ...provideButtonStyles({ type, theme }),
- ...styles,
- }),
- [type, theme, styles],
- );
-
if (icon) {
icon = cloneElement(icon, {
'data-element': 'ButtonIcon',
@@ -345,7 +325,6 @@ export const Button = forwardRef(function Button(
const modifiers = useMemo(
() => ({
- disabled: isDisabled,
loading: isLoading,
selected: isSelected,
'single-icon-only': singleIcon,
@@ -354,22 +333,25 @@ export const Button = forwardRef(function Button(
[mods, isDisabled, isLoading, isSelected, singleIcon],
);
+ const { actionProps } = useAction(
+ { ...allProps, isDisabled, mods: modifiers, ...(label ? { label } : {}) },
+ ref,
+ );
+
+ const styles = extractStyles(props, STYLE_PROPS);
+
return (
-
{icon || isLoading ? !isLoading ? icon : : null}
{children}
{rightIcon}
-
+
);
-});
+});
\ No newline at end of file
diff --git a/packages/button/src/Submit.tsx b/packages/button/src/Submit.tsx
index 5636ec2c..9d06e29d 100644
--- a/packages/button/src/Submit.tsx
+++ b/packages/button/src/Submit.tsx
@@ -28,4 +28,4 @@ function Submit(props, ref) {
}
const _Submit = forwardRef(Submit);
-export { _Submit as Submit };
+export { _Submit as Submit };
\ No newline at end of file
diff --git a/packages/button/src/use-action.ts b/packages/button/src/use-action.ts
new file mode 100644
index 00000000..8b48f4e5
--- /dev/null
+++ b/packages/button/src/use-action.ts
@@ -0,0 +1,188 @@
+import { MouseEventHandler, useContext } from 'react';
+import { useHover } from '@react-aria/interactions';
+import { useButton } from '@react-aria/button';
+import { AriaButtonProps } from '@react-types/button';
+import { useFocusableRef } from '@react-spectrum/utils';
+import { FocusableRef, PressEvent } from '@react-types/shared';
+
+import { UIKitContext } from '@jengaui/providers';
+import { mergeProps, useFocus } from '@jengaui/utils';
+import { BaseProps, filterBaseProps, TagNameProps } from 'tastycss';
+import { useTracking } from '@jengaui/providers';
+import { useEvent } from '@jengaui/hooks';
+
+const LINK_PRESS_EVENT = 'Link Press';
+const BUTTON_PRESS_EVENT = 'Button Press';
+
+export interface JengaUseActionProps
+ extends BaseProps,
+ TagNameProps,
+ Omit {
+ to?: string;
+ label?: string;
+ htmlType?: 'button' | 'submit' | 'reset' | undefined;
+ onClick?: MouseEventHandler;
+ onMouseEnter?: MouseEventHandler;
+ onMouseLeave?: MouseEventHandler;
+}
+
+const FILTER_OPTIONS = { propNames: new Set(['onMouseEnter', 'onMouseLeave']) };
+
+/**
+ * Helper to open link.
+ * @param {String} href
+ * @param {String|Boolean} [target]
+ */
+export function openLink(href, target?) {
+ const link = document.createElement('a');
+
+ link.href = href;
+
+ if (target) {
+ link.target = target === true ? '_blank' : target;
+ }
+
+ document.body.appendChild(link);
+
+ link.click();
+
+ document.body.removeChild(link);
+}
+
+export function parseTo(to): {
+ newTab: boolean;
+ nativeRoute: boolean;
+ href: string | undefined;
+} {
+ const newTab = to && typeof to === 'string' && to.startsWith('!');
+ const nativeRoute = to && typeof to === 'string' && to.startsWith('@');
+ const href: string | undefined =
+ to && typeof to === 'string'
+ ? newTab || nativeRoute
+ ? to.slice(1)
+ : to
+ : undefined;
+
+ return {
+ newTab,
+ nativeRoute,
+ href,
+ };
+}
+
+export function performClickHandler(evt, { router, to, onPress, tracking }) {
+ const { newTab, nativeRoute, href } = parseTo(to);
+ const element = evt.target;
+ const qa = element?.getAttribute('data-qa');
+
+ onPress?.(evt);
+
+ if (!to) {
+ tracking.event(BUTTON_PRESS_EVENT, { qa }, element);
+
+ return;
+ }
+
+ if (evt.shiftKey || evt.metaKey || newTab) {
+ openLink(href, true);
+
+ tracking.event(LINK_PRESS_EVENT, { qa, href, type: 'tab' }, element);
+
+ return;
+ }
+
+ if (nativeRoute) {
+ openLink(href || window.location.href);
+ tracking.event(LINK_PRESS_EVENT, { qa, href, type: 'native' }, element);
+ } else if (href && href.startsWith('#')) {
+ const id = href.slice(1);
+ const element = document.getElementById(id);
+
+ tracking.event(
+ LINK_PRESS_EVENT,
+ { qa, href, type: 'hash', target: id },
+ element,
+ );
+
+ if (element) {
+ element.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start',
+ inline: 'nearest',
+ });
+
+ return;
+ }
+ }
+
+ if (router) {
+ tracking.event(LINK_PRESS_EVENT, { qa, href, type: 'router' }, element);
+ router.push(href);
+ } else if (href) {
+ tracking.event(LINK_PRESS_EVENT, { qa, href, type: 'native' }, element);
+ window.location.href = href;
+ }
+}
+
+export const useAction = function useAction(
+ { to, as, htmlType, label, mods, onPress, ...props }: JengaUseActionProps,
+ ref: FocusableRef,
+) {
+ as = to ? 'a' : as || 'button';
+
+ const tracking = useTracking();
+ const router = useContext(UIKitContext).router;
+ const isDisabled = props.isDisabled;
+ const { newTab, href } = parseTo(to);
+ const target = newTab ? '_blank' : undefined;
+ const domRef = useFocusableRef(ref);
+
+ const customOnPress = useEvent((evt: PressEvent) => {
+ performClickHandler(evt, { router, to, onPress, tracking });
+ });
+
+ let { buttonProps, isPressed } = useButton(
+ {
+ 'aria-label': label,
+ ...props,
+ onPress: customOnPress,
+ },
+ domRef,
+ );
+ let { hoverProps, isHovered } = useHover({ isDisabled });
+ let { focusProps, isFocused } = useFocus({ isDisabled }, true);
+
+ const customProps = to
+ ? {
+ onClick(evt) {
+ evt.preventDefault();
+ },
+ }
+ : {};
+
+ return {
+ actionProps: {
+ mods: {
+ hovered: isHovered && !isDisabled,
+ pressed: isPressed && !isDisabled,
+ focused: isFocused && !isDisabled,
+ disabled: isDisabled,
+ ...mods,
+ },
+ ...(mergeProps(
+ buttonProps,
+ hoverProps,
+ focusProps,
+ customProps,
+ filterBaseProps(props, FILTER_OPTIONS),
+ ) as object),
+ ref: domRef,
+ type: htmlType || 'button',
+ rel: as === 'a' && newTab ? 'rel="noopener noreferrer"' : undefined,
+ as,
+ isDisabled,
+ target,
+ href,
+ },
+ };
+};
\ No newline at end of file
diff --git a/packages/button/src/utils/index.ts b/packages/button/src/utils/index.ts
index 92de38b3..8f95a6cc 100644
--- a/packages/button/src/utils/index.ts
+++ b/packages/button/src/utils/index.ts
@@ -1 +1 @@
-export * from './mapProps';
+export * from './mapProps';
\ No newline at end of file
diff --git a/packages/button/src/utils/mapProps.ts b/packages/button/src/utils/mapProps.ts
index b3654fd0..1d422d05 100644
--- a/packages/button/src/utils/mapProps.ts
+++ b/packages/button/src/utils/mapProps.ts
@@ -24,4 +24,4 @@ export function jengaToAriaButtonProps(
...filteredProps,
type: htmlType,
};
-}
+}
\ No newline at end of file
diff --git a/packages/button/stories/Button.stories.tsx b/packages/button/stories/Button.stories.tsx
index c0681b82..b46a7ace 100644
--- a/packages/button/stories/Button.stories.tsx
+++ b/packages/button/stories/Button.stories.tsx
@@ -1,7 +1,7 @@
import { CaretDownOutlined, DollarCircleOutlined } from '@ant-design/icons';
import { baseProps } from '../../../storybook/stories/lists/baseProps';
-import { Space } from '../../layout';
+import { Space } from '@jengaui/layout';
import { Button } from '../src/Button';
@@ -31,20 +31,26 @@ export default {
},
theme: {
defaultValue: undefined,
- control: { type: 'radio', options: [undefined, 'danger'] },
+ control: { type: 'radio', options: [undefined, 'danger', 'special'] },
},
},
};
const Template = ({ icon, rightIcon, label, onClick, ...props }) => (
- : undefined}
- rightIcon={rightIcon ? : undefined}
- {...props}
- onPress={(e) => console.log('Press', e)}
+
- {label}
-
+ : undefined}
+ rightIcon={rightIcon ? : undefined}
+ {...props}
+ onPress={(e) => console.log('Press', e)}
+ >
+ {label}
+
+
);
const TemplateSizes = ({ label, icon, rightIcon, size, ...props }) => (
@@ -136,6 +142,66 @@ const TemplateStates = ({ label, mods, ...props }) => (
);
+const DarkTemplateStates = ({ label, mods, ...props }) => (
+
+
+
+
+
+
+
+);
+
export const Default = Template.bind({});
Default.args = {
label: 'Button',
@@ -171,6 +237,78 @@ LinkStates.args = {
type: 'link',
};
+export const DangerSecondaryStates = TemplateStates.bind({});
+DangerSecondaryStates.args = {
+ type: 'secondary',
+ theme: 'danger',
+};
+
+export const DangerPrimaryStates = TemplateStates.bind({});
+DangerPrimaryStates.args = {
+ type: 'primary',
+ theme: 'danger',
+};
+
+export const DangerOutlineStates = TemplateStates.bind({});
+DangerOutlineStates.args = {
+ type: 'outline',
+ theme: 'danger',
+};
+
+export const DangerClearStates = TemplateStates.bind({});
+DangerClearStates.args = {
+ type: 'clear',
+ theme: 'danger',
+};
+
+export const DangerNeutralStates = TemplateStates.bind({});
+DangerNeutralStates.args = {
+ type: 'neutral',
+ theme: 'danger',
+};
+
+export const DangerLinkStates = TemplateStates.bind({});
+DangerLinkStates.args = {
+ type: 'link',
+ theme: 'danger',
+};
+
+export const SpecialSecondaryStates = DarkTemplateStates.bind({});
+SpecialSecondaryStates.args = {
+ type: 'secondary',
+ theme: 'special',
+};
+
+export const SpecialPrimaryStates = DarkTemplateStates.bind({});
+SpecialPrimaryStates.args = {
+ type: 'primary',
+ theme: 'special',
+};
+
+export const SpecialOutlineStates = DarkTemplateStates.bind({});
+SpecialOutlineStates.args = {
+ type: 'outline',
+ theme: 'special',
+};
+
+export const SpecialClearStates = DarkTemplateStates.bind({});
+SpecialClearStates.args = {
+ type: 'clear',
+ theme: 'special',
+};
+
+export const SpecialNeutralStates = DarkTemplateStates.bind({});
+SpecialNeutralStates.args = {
+ type: 'neutral',
+ theme: 'special',
+};
+
+export const SpecialLinkStates = DarkTemplateStates.bind({});
+SpecialLinkStates.args = {
+ type: 'link',
+ theme: 'special',
+};
+
export const Small = Template.bind({});
Small.args = {
label: 'Button',
@@ -183,12 +321,6 @@ Large.args = {
size: 'large',
};
-export const Danger = Template.bind({});
-Danger.args = {
- label: 'Button',
- theme: 'danger',
-};
-
export const LeftIconAndText = TemplateSizes.bind({});
LeftIconAndText.args = {
label: 'Button',
@@ -218,4 +350,4 @@ Loading.args = {
icon: true,
isLoading: true,
label: 'Button',
-};
+};
\ No newline at end of file
diff --git a/packages/button/test/button.test.tsx b/packages/button/test/button.test.tsx
index aa45b8b8..a0965589 100644
--- a/packages/button/test/button.test.tsx
+++ b/packages/button/test/button.test.tsx
@@ -40,4 +40,4 @@ describe('', () => {
'',
);
});
-});
+});
\ No newline at end of file
diff --git a/packages/card/package.json b/packages/card/package.json
index 173383a5..9308cd0c 100644
--- a/packages/card/package.json
+++ b/packages/card/package.json
@@ -31,7 +31,7 @@
"lint": "TIMING=1 eslint src/**/*.ts* --fix"
},
"dependencies": {
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -43,8 +43,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
index 4326542c..c91ae8f8 100644
--- a/packages/checkbox/package.json
+++ b/packages/checkbox/package.json
@@ -41,7 +41,7 @@
"@react-spectrum/utils": "^3.7.4",
"@react-stately/checkbox": "^3.3.0",
"@react-stately/toggle": "^3.4.2",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -56,8 +56,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/combo-box/package.json b/packages/combo-box/package.json
index 83ddf89b..be510d0e 100644
--- a/packages/combo-box/package.json
+++ b/packages/combo-box/package.json
@@ -48,7 +48,7 @@
"@react-stately/combobox": "^3.2.2",
"@react-types/combobox": "^3.5.4",
"@react-types/shared": "^3.15.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -61,8 +61,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/content/package.json b/packages/content/package.json
index d2ab33d0..0829d3eb 100644
--- a/packages/content/package.json
+++ b/packages/content/package.json
@@ -32,7 +32,7 @@
},
"dependencies": {
"@jengaui/utils": "workspace:0.4.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -44,8 +44,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/content/src/Content.tsx b/packages/content/src/Content.tsx
index 6bc6f1fa..9042744f 100644
--- a/packages/content/src/Content.tsx
+++ b/packages/content/src/Content.tsx
@@ -49,4 +49,4 @@ export const Content = forwardRef(function Content(
styles={styles}
/>
);
-});
+});
\ No newline at end of file
diff --git a/packages/content/src/Divider.tsx b/packages/content/src/Divider.tsx
index 9c5baf62..372e823d 100644
--- a/packages/content/src/Divider.tsx
+++ b/packages/content/src/Divider.tsx
@@ -73,4 +73,4 @@ export const Divider = forwardRef(function Divider(
)}
);
-});
+});
\ No newline at end of file
diff --git a/packages/content/src/Footer.tsx b/packages/content/src/Footer.tsx
index ad6453e4..49d81f2f 100644
--- a/packages/content/src/Footer.tsx
+++ b/packages/content/src/Footer.tsx
@@ -41,4 +41,4 @@ export const Footer = forwardRef(function Footer(props: JengaFooterProps, ref) {
styles={styles}
/>
);
-});
+});
\ No newline at end of file
diff --git a/packages/content/src/Header.tsx b/packages/content/src/Header.tsx
index 87cf3608..3f3deb86 100644
--- a/packages/content/src/Header.tsx
+++ b/packages/content/src/Header.tsx
@@ -41,4 +41,4 @@ export const Header = forwardRef(function Header(props: JengaHeaderProps, ref) {
styles={styles}
/>
);
-});
+});
\ No newline at end of file
diff --git a/packages/content/src/Paragraph.tsx b/packages/content/src/Paragraph.tsx
index 86dccbc4..e909d861 100644
--- a/packages/content/src/Paragraph.tsx
+++ b/packages/content/src/Paragraph.tsx
@@ -29,4 +29,4 @@ export const Paragraph = forwardRef(function Paragraph(
const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
return ;
-});
+});
\ No newline at end of file
diff --git a/packages/content/src/Text.tsx b/packages/content/src/Text.tsx
index 38f18331..c5f165fb 100644
--- a/packages/content/src/Text.tsx
+++ b/packages/content/src/Text.tsx
@@ -124,4 +124,4 @@ const Text = Object.assign(_Text, {
}),
});
-export { Text };
+export { Text };
\ No newline at end of file
diff --git a/packages/content/src/Title.tsx b/packages/content/src/Title.tsx
index be07b31c..0eb9876e 100644
--- a/packages/content/src/Title.tsx
+++ b/packages/content/src/Title.tsx
@@ -45,12 +45,21 @@ const TitleElement = tasty({
},
margin: '0',
whiteSpace: {
- '': 'initial',
+ '': 'inherit',
'nowrap | ellipsis': 'nowrap',
},
- textOverflow: 'ellipsis',
- overflow: 'hidden',
- width: 'max 100%',
+ textOverflow: {
+ '': false,
+ ellipsis: 'ellipsis',
+ },
+ overflow: {
+ '': false,
+ ellipsis: 'hidden',
+ },
+ width: {
+ '': false,
+ ellipsis: 'max 100%',
+ },
},
});
@@ -99,4 +108,4 @@ const Title = Object.assign(_Title, {
}),
});
-export { Title };
+export { Title };
\ No newline at end of file
diff --git a/packages/copy-snippet/package.json b/packages/copy-snippet/package.json
index 56355b67..5667e548 100644
--- a/packages/copy-snippet/package.json
+++ b/packages/copy-snippet/package.json
@@ -44,7 +44,7 @@
"@jengaui/toast": "workspace:0.4.0",
"@jengaui/tooltip": "workspace:0.4.0",
"clipboard-copy": "^4.0.1",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -57,8 +57,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/core/package.json b/packages/core/package.json
index a90a1ee3..3d431a58 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -38,7 +38,7 @@
"lint": "TIMING=1 eslint src/**/*.ts* --fix"
},
"dependencies": {
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -51,8 +51,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0",
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0",
"styled-components": ">= 5.3.6"
},
"publishConfig": {
diff --git a/packages/core/src/Base.tsx b/packages/core/src/Base.tsx
index 67532049..3c558ea9 100644
--- a/packages/core/src/Base.tsx
+++ b/packages/core/src/Base.tsx
@@ -1,5 +1,6 @@
import { forwardRef, useContext } from 'react';
import styled from 'styled-components';
+
import {
AllBaseProps,
BreakpointsContext,
@@ -90,4 +91,4 @@ function Base(
* @deprecated consider using tasty() instead
*/
const _Base = forwardRef(Base);
-export { _Base as Base };
+export { _Base as Base };
\ No newline at end of file
diff --git a/packages/core/src/Block.tsx b/packages/core/src/Block.tsx
index 9eb39d12..439faabd 100644
--- a/packages/core/src/Block.tsx
+++ b/packages/core/src/Block.tsx
@@ -1,4 +1,5 @@
import { forwardRef } from 'react';
+
import {
AllBaseProps,
CONTAINER_STYLES,
@@ -28,4 +29,4 @@ export const Block = forwardRef(function Block(props: JengaBlockProps, ref) {
styles={styles}
/>
);
-});
+});
\ No newline at end of file
diff --git a/packages/core/src/GlobalStyles.ts b/packages/core/src/GlobalStyles.ts
index 628f8b50..19f24a7b 100644
--- a/packages/core/src/GlobalStyles.ts
+++ b/packages/core/src/GlobalStyles.ts
@@ -66,6 +66,7 @@ const fontsProvider = ({ publicUrl = '' }) => `
font-style: normal;
font-display: swap;
}
+
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
@@ -74,6 +75,7 @@ const fontsProvider = ({ publicUrl = '' }) => `
src: url(${publicUrl}/fonts/JetBrainsMono-Regular.woff2) format('woff2'),
url(${publicUrl}/fonts/JetBrainsMono-Regular.woff) format('woff');
}
+
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
@@ -82,6 +84,12 @@ const fontsProvider = ({ publicUrl = '' }) => `
src: url(${publicUrl}/fonts/JetBrainsMono-Bold.woff2) format('woff2'),
url(${publicUrl}/fonts/JetBrainsMono-Bold.woff) format('woff');
}
+
+ @font-face {
+ font-family: 'text-security-disc';
+ src: url(${publicUrl}/fonts/text-security-disc.woff2) format('woff2'),
+ url(${publicUrl}/fonts/text-security-disc.woff) format('woff');
+ }
`;
export const GlobalStyles = createGlobalStyle`
@@ -90,6 +98,12 @@ export const GlobalStyles = createGlobalStyle`
return applyLegacyTokens
? Object.entries(TOKENS)
.map(([key, value]) => {
+ // `inherit` value in custom property is reserved for inheritance behavior
+ if (value === 'inherit') {
+ // so we should rewrite it to contain the actual `inherit` value.
+ value = `var(--non-existent-${key}, inherit)`;
+ }
+
return `--${key}: ${value};`;
})
.join('\n ')
@@ -103,6 +117,7 @@ export const GlobalStyles = createGlobalStyle`
.join('\n ');
}}
}
+
html {
--font: ${({ font }: GlobalStylesProps) =>
font ||
@@ -111,6 +126,7 @@ export const GlobalStyles = createGlobalStyle`
`${
monospaceFont ? `${monospaceFont}, ` : ''
}Menlo, Monaco, Consolas, 'Courier New', monospace;}`}
+
.jenga-notification-container {
min-width: 288px;
max-width: 340px;
@@ -120,54 +136,66 @@ export const GlobalStyles = createGlobalStyle`
right: 16px;
z-index: 999999;
}
+
.jenga-notifications {
display: grid;
grid-auto-flow: row;
grid-template-columns: 1fr;
}
+
.jenga-notification-enter {
opacity: 0;
max-height: 0px;
margin-bottom: 0px;
transform: translate(100%, 0);
}
+
.jenga-notification-enter-active {
opacity: 1;
max-height: 56px;
margin-bottom: 8px;
transform: translate(0, 0);
transition: all 300ms ease-in;
+
& > * {
margin-bottom: 0px;
}
}
+
.jenga-notification-exit {
opacity: 1;
margin-bottom: 8px;
max-height: 56px;
transform: translate(0, 0);
}
+
.jenga-notification-exit-active {
opacity: 0;
max-height: 0px;
margin-bottom: 0px;
transform: translate(100%, 0);
transition: all 300ms ease-in;
+
& > * {
margin-bottom: 0px;
}
}
+
b, strong {
font-weight: var(--bold-font-weight, 700);
}
+
[type=reset], [type=submit], button, html [type=button] {
-webkit-appearance: none;
}
+
code {
font-family: var(--monospace-font);
}
+
${({ fonts, publicUrl }: GlobalStylesProps) =>
fonts === false ? '' : fontsProvider({ publicUrl })}
+
// Prism Code
code[class*="language-"],
pre[class*="language-"] {
@@ -184,58 +212,70 @@ export const GlobalStyles = createGlobalStyle`
word-wrap: normal;
border-radius: 4px;
border: none;
+
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
+
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
+
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
/*background: #b3d4fc;*/
}
+
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
/*background: #b3d4fc;*/
}
+
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
+
/* Code blocks */
pre[class*="language-"] {
overflow: auto;
}
+
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: transparent;
}
+
/* Inline code */
:not(pre) > code[class*="language-"] {
border-radius: .3em;
white-space: normal;
}
+
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: var(--dark-04-color);
}
+
.token.keyword,
.token.tag,
.token.operator,
.token.punctuation {
color: #993388;
}
+
.namespace {
opacity: .7;
}
+
.token.property,
.token.boolean,
.token.constant,
@@ -243,10 +283,12 @@ export const GlobalStyles = createGlobalStyle`
.token.deleted {
color: var(--pink-color);
}
+
.token.entity,
.token.number {
color: #30A666;
}
+
.token.selector,
.token.attr-name,
.token.string,
@@ -255,36 +297,44 @@ export const GlobalStyles = createGlobalStyle`
.token.inserted {
color: var(--purple-text-color);
}
+
.token.url,
.language-css .token.string,
.style .token.string {
color: var(--dark-color);
}
+
.token.atrule,
.token.attr-value {
color: var(--dark-color);
}
+
.token.atrule,
.token.keyword {
font-weight: 500;
}
+
.token.function,
.token.class-name {
color: var(--pink-color);
}
+
.token.regex,
.token.important,
.token.variable {
color: var(--pink-color);
}
+
.token.important,
.token.bold {
font-weight: bold;
}
+
.token.italic {
font-style: italic;
}
+
.token.entity {
cursor: help;
}
-`;
+`;
\ No newline at end of file
diff --git a/packages/core/src/tokens.ts b/packages/core/src/tokens.ts
index 5df70068..e3adba6f 100644
--- a/packages/core/src/tokens.ts
+++ b/packages/core/src/tokens.ts
@@ -24,6 +24,7 @@ const colors = {
success: '49, 195, 124',
'success-text': '48, 166, 102',
note: '251, 188, 5',
+ warning: '224, 86, 43',
};
function color(name, opacity = 1) {
@@ -110,98 +111,117 @@ const TOKENS = {
'h5-line-height': '22px',
'h5-letter-spacing': '0.02em',
'h5-font-weight': '700',
+ 'h5-icon-size': '18px',
// h5 semi-bold
'h5s-font-size': '16px',
'h5s-line-height': '22px',
'h5s-letter-spacing': '0.02em',
'h5s-font-weight': '600',
+ 'h5s-icon-size': '18px',
// h5 medium
'h5m-font-size': '16px',
'h5m-line-height': '22px',
'h5m-letter-spacing': '0.02em',
'h5m-font-weight': '500',
+ 'h5m-icon-size': '18px',
// h6 (unused)
'h6-font-size': '14px',
'h6-line-height': '20px',
'h6-letter-spacing': '0',
'h6-font-weight': '700',
+ 'h6-icon-size': '16px',
// t1
't1-font-size': '18px',
't1-line-height': '24px',
't1-letter-spacing': '0',
't1-font-weight': '400',
+ 't1-icon-size': '20px',
// t2
't2-font-size': '16px',
't2-line-height': '22px',
't2-letter-spacing': '0.01em',
't2-font-weight': '400',
+ 't2-icon-size': '18px',
// t2m
't2m-font-size': '16px',
't2m-line-height': '22px',
't2m-letter-spacing': '0.005em',
't2m-font-weight': '500',
+ 't2m-icon-size': '18px',
// t3
't3-font-size': '14px',
't3-line-height': '20px',
't3-letter-spacing': '0.02em',
't3-font-weight': '400',
+ 't3-icon-size': '16px',
// t3m
't3m-font-size': '14px',
't3m-line-height': '20px',
't3m-letter-spacing': '0.015em',
't3m-font-weight': '500',
+ 't3m-icon-size': '16px',
// t3s
't3s-font-size': '14px',
't3s-line-height': '20px',
't3s-letter-spacing': '0.015em',
't3s-font-weight': '600',
+ 't3s-icon-size': '16px',
// t4
't4-font-size': '12px',
't4-line-height': '18px',
't4-letter-spacing': '0.025em',
't4-font-weight': '400',
+ 't4-icon-size': '14px',
// t4m
't4m-font-size': '12px',
't4m-line-height': '18px',
't4m-letter-spacing': '0.02em',
't4m-font-weight': '500',
+ 't4m-icon-size': '14px',
// p1
'p1-font-size': '18px',
'p1-line-height': '28px',
'p1-letter-spacing': '0',
'p1-font-weight': '400',
+ 'p1-icon-size': '20px',
// p2
'p2-font-size': '16px',
'p2-line-height': '24px',
'p2-letter-spacing': '0.01em',
'p2-font-weight': '400',
+ 'p2-icon-size': '18px',
// p3
'p3-font-size': '14px',
'p3-line-height': '22px',
'p3-letter-spacing': '0.02em',
'p3-font-weight': '400',
+ 'p3-icon-size': '16px',
// p4
'p4-font-size': '12px',
'p4-line-height': '20px',
'p4-letter-spacing': '0.025em',
'p4-font-weight': '400',
+ 'p4-icon-size': '14px',
// c1
'c1-font-size': '14px',
'c1-line-height': '20px',
'c1-letter-spacing': '0.015em',
'c1-font-weight': '500',
'c1-text-transform': 'uppercase',
+ 'c1-icon-size': '16px',
// c2
'c2-font-size': '12px',
'c2-line-height': '18px',
'c2-letter-spacing': '0.02em',
'c2-font-weight': '500',
'c2-text-transform': 'uppercase',
+ 'c2-icon-size': '14px',
// tag
'tag-font-size': '12px',
'tag-line-height': '12px',
'tag-letter-spacing': '0.02em',
- 'tag-font-weight': '500',
+ 'tag-font-weight': '600',
+ 'tag-icon-size': '14px',
// strong
'strong-font-size': 'inherit',
'strong-line-height': 'inherit',
@@ -223,6 +243,7 @@ const TOKENS = {
'default-letter-spacing': 'var(--t3-letter-spacing)',
'default-font-weight': 'var(--t3-font-weight)',
'default-bold-font-weight': '700',
+ 'default-icon-size': 'inherit',
// scrollbar colors
'scrollbar-width': '1.5x',
'scrollbar-outline-width': '1ow',
@@ -239,4 +260,4 @@ Object.keys(colors).forEach((name) => {
TOKENS[`${name}-color-rgb`] = colors[name];
});
-export { TOKENS };
+export { TOKENS };
\ No newline at end of file
diff --git a/packages/dialog/package.json b/packages/dialog/package.json
index 69cd2c65..25ba657f 100644
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@@ -46,7 +46,7 @@
"@react-stately/overlays": "^3.4.2",
"@react-types/dialog": "^3.4.4",
"@react-types/shared": "^3.15.0",
- "tastycss": "^0.13.0",
+ "tastycss": "^0.17.2",
"tiny-invariant": "^1.3.1"
},
"devDependencies": {
@@ -60,8 +60,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/file-input/package.json b/packages/file-input/package.json
index c0ae24ad..3f622671 100644
--- a/packages/file-input/package.json
+++ b/packages/file-input/package.json
@@ -37,7 +37,7 @@
"@jengaui/providers": "workspace:0.4.0",
"@react-spectrum/utils": "^3.7.4",
"@react-types/textfield": "^3.6.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -49,8 +49,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/form/package.json b/packages/form/package.json
index 56f7bf4b..c29cd3ae 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -36,7 +36,7 @@
"@react-stately/collections": "^3.4.4",
"@react-types/shared": "^3.15.0",
"email-validator": "^2.0.4",
- "tastycss": "^0.13.0",
+ "tastycss": "^0.17.2",
"valid-url": "^1.0.9"
},
"devDependencies": {
@@ -51,8 +51,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0",
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0",
"styled-components": ">= 5.3.6"
},
"publishConfig": {
diff --git a/packages/form/src/HiddenInput.tsx b/packages/form/src/HiddenInput.tsx
index 7245d405..b14d67e2 100644
--- a/packages/form/src/HiddenInput.tsx
+++ b/packages/form/src/HiddenInput.tsx
@@ -22,4 +22,4 @@ export const HiddenInput = styled.input`
height: 100%;
cursor: pointer;
}
-`;
+`;
\ No newline at end of file
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index a5ba03a3..8260d716 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -50,8 +50,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/input/package.json b/packages/input/package.json
index c6d8ec53..af449644 100644
--- a/packages/input/package.json
+++ b/packages/input/package.json
@@ -50,8 +50,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/layout/package.json b/packages/layout/package.json
index 86dd7b2d..f177ed73 100644
--- a/packages/layout/package.json
+++ b/packages/layout/package.json
@@ -39,7 +39,7 @@
},
"dependencies": {
"@jengaui/utils": "workspace:0.4.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -51,8 +51,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/link/package.json b/packages/link/package.json
index a4b0c88a..508be957 100644
--- a/packages/link/package.json
+++ b/packages/link/package.json
@@ -44,8 +44,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/menu/package.json b/packages/menu/package.json
index b1a50aed..3c3e2cfa 100644
--- a/packages/menu/package.json
+++ b/packages/menu/package.json
@@ -48,7 +48,7 @@
"@react-types/menu": "^3.7.2",
"@react-types/overlays": "^3.6.4",
"@react-types/shared": "^3.15.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -62,8 +62,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/modal/package.json b/packages/modal/package.json
index 7cf5c1f2..b1f9f090 100644
--- a/packages/modal/package.json
+++ b/packages/modal/package.json
@@ -39,7 +39,7 @@
"@react-spectrum/utils": "^3.7.4",
"@react-types/overlays": "^3.6.4",
"react-transition-group": "^4.4.5",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -53,8 +53,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/modal/src/OpenTransition.tsx b/packages/modal/src/OpenTransition.tsx
index 3f1104c7..1eb7d6f9 100644
--- a/packages/modal/src/OpenTransition.tsx
+++ b/packages/modal/src/OpenTransition.tsx
@@ -6,6 +6,19 @@ const OPEN_STATES = {
entered: true,
};
+/**
+ * Timeout issues adding css animations to enter may be related to
+ * https://github.com/reactjs/react-transition-group/issues/189 or
+ * https://github.com/reactjs/react-transition-group/issues/22
+ * my VM isn't good enough to debug accurately and get a better answer.
+ *
+ * As a result, use enter 0 so that is-open is applied once entered
+ * it doesn't matter if we know when the css-animation is done on entering
+ * for exiting though, give time for the css-animation to play
+ * before removing from the DOM
+ * **note** hitting esc bypasses exit animation for anyone testing.
+ */
+
export function OpenTransition(props) {
return (
@@ -18,4 +31,4 @@ export function OpenTransition(props) {
}
);
-}
+}
\ No newline at end of file
diff --git a/packages/notification/package.json b/packages/notification/package.json
index a25b4626..65df7ca4 100644
--- a/packages/notification/package.json
+++ b/packages/notification/package.json
@@ -58,7 +58,7 @@
"@react-types/shared": "^3.15.0",
"react-is": "^17.0.2",
"react-transition-group": "^4.4.5",
- "tastycss": "^0.13.0",
+ "tastycss": "^0.17.2",
"tiny-invariant": "^1.3.1"
},
"devDependencies": {
@@ -72,8 +72,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0",
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0",
"styled-components": ">= 5.3.6"
},
"publishConfig": {
diff --git a/packages/number-input/package.json b/packages/number-input/package.json
index 289f50a9..1fd9cc2a 100644
--- a/packages/number-input/package.json
+++ b/packages/number-input/package.json
@@ -41,7 +41,7 @@
"@react-aria/numberfield": "^3.3.2",
"@react-stately/numberfield": "^3.2.2",
"@react-types/numberfield": "^3.3.4",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -54,8 +54,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/overlays/package.json b/packages/overlays/package.json
index 15b6315a..443253de 100644
--- a/packages/overlays/package.json
+++ b/packages/overlays/package.json
@@ -46,8 +46,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/password-input/package.json b/packages/password-input/package.json
index ba7887f0..08692e9c 100644
--- a/packages/password-input/package.json
+++ b/packages/password-input/package.json
@@ -49,8 +49,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/placeholder/package.json b/packages/placeholder/package.json
index 28acec32..f5377891 100644
--- a/packages/placeholder/package.json
+++ b/packages/placeholder/package.json
@@ -33,7 +33,7 @@
"lint": "TIMING=1 eslint src/**/*.ts* --fix"
},
"dependencies": {
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -46,8 +46,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0",
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0",
"styled-components": ">= 5.3.6"
},
"publishConfig": {
diff --git a/packages/portal/package.json b/packages/portal/package.json
index bf1248cd..129f6adf 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -43,8 +43,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/prism-code/package.json b/packages/prism-code/package.json
index 45313694..31b64c32 100644
--- a/packages/prism-code/package.json
+++ b/packages/prism-code/package.json
@@ -33,7 +33,7 @@
},
"dependencies": {
"prismjs": "^1.29.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -45,8 +45,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/providers/package.json b/packages/providers/package.json
index 4eae6af2..65201c5e 100644
--- a/packages/providers/package.json
+++ b/packages/providers/package.json
@@ -39,7 +39,7 @@
},
"dependencies": {
"@jengaui/utils": "workspace:0.4.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -51,8 +51,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/providers/src/GridProvider.tsx b/packages/providers/src/GridProvider.tsx
index 3f6c0de7..b3086952 100644
--- a/packages/providers/src/GridProvider.tsx
+++ b/packages/providers/src/GridProvider.tsx
@@ -1,8 +1,7 @@
import { forwardRef, ReactNode, useCallback, useEffect, useState } from 'react';
-import { filterBaseProps, Styles } from 'tastycss';
+import { filterBaseProps, Styles, tasty } from 'tastycss';
import { useCombinedRefs } from '@jengaui/utils';
-import { tasty } from 'tastycss';
const GridElement = tasty({
styled: {
@@ -95,4 +94,4 @@ export const GridProvider = forwardRef(function GridProvider(
{children}
);
-});
+});
\ No newline at end of file
diff --git a/packages/providers/src/TrackingProvider.tsx b/packages/providers/src/TrackingProvider.tsx
new file mode 100644
index 00000000..cdea8f26
--- /dev/null
+++ b/packages/providers/src/TrackingProvider.tsx
@@ -0,0 +1,40 @@
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+
+export interface TrackingProps {
+ event?: (
+ name: string,
+ data?: Record,
+ element?: HTMLElement,
+ ) => void;
+}
+
+export const TrackingContext = createContext({
+ event() {
+ // noop
+ },
+});
+
+export interface JengaTrackingProviderProps extends TrackingProps {
+ children?: ReactNode;
+}
+
+export function TrackingProvider({
+ children,
+ event,
+}: JengaTrackingProviderProps) {
+ const tracking = useMemo(() => ({ event }), [event]);
+
+ if (!event) return <>{children};
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useTracking() {
+ const tracking = useContext(TrackingContext);
+
+ return tracking;
+}
\ No newline at end of file
diff --git a/packages/providers/src/index.ts b/packages/providers/src/index.ts
index b5a98786..0baa028a 100644
--- a/packages/providers/src/index.ts
+++ b/packages/providers/src/index.ts
@@ -1,3 +1,4 @@
export * from './provider';
export * from './GridProvider';
export * from './StyleProvider';
+export * from './TrackingProvider';
diff --git a/packages/providers/src/provider.tsx b/packages/providers/src/provider.tsx
index 66f8c68c..737c9b28 100644
--- a/packages/providers/src/provider.tsx
+++ b/packages/providers/src/provider.tsx
@@ -4,6 +4,7 @@ import {
PropsWithChildren,
useContext,
} from 'react';
+
import { BreakpointsProvider, Props } from 'tastycss';
export interface ProviderProps extends Props {
@@ -71,4 +72,4 @@ export function useProviderProps(props: T): T {
const contextProps = useContext(UIKitContext);
return { ...contextProps, ...props } as T;
-}
+}
\ No newline at end of file
diff --git a/packages/radio/package.json b/packages/radio/package.json
index 586baec1..cf9cf57c 100644
--- a/packages/radio/package.json
+++ b/packages/radio/package.json
@@ -41,7 +41,7 @@
"@react-spectrum/utils": "^3.7.4",
"@react-stately/radio": "^3.6.0",
"@react-types/radio": "^3.3.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -54,8 +54,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/react/package.json b/packages/react/package.json
index 0e591386..ee110a58 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -99,8 +99,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/result/package.json b/packages/result/package.json
index a9078f18..cbdc768c 100644
--- a/packages/result/package.json
+++ b/packages/result/package.json
@@ -33,7 +33,7 @@
"dependencies": {
"@jengaui/content": "workspace:0.4.0",
"@jengaui/utils": "workspace:0.4.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -46,8 +46,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/root/package.json b/packages/root/package.json
index 5269709a..575dda25 100644
--- a/packages/root/package.json
+++ b/packages/root/package.json
@@ -45,7 +45,7 @@
"@jengaui/providers": "workspace:0.4.0",
"@jengaui/utils": "workspace:0.4.0",
"@react-aria/overlays": "^3.11.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -58,8 +58,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0",
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0",
"styled-components": ">= 5.3.6"
},
"publishConfig": {
diff --git a/packages/root/src/Root.tsx b/packages/root/src/Root.tsx
index c53f793c..ecd40523 100644
--- a/packages/root/src/Root.tsx
+++ b/packages/root/src/Root.tsx
@@ -13,6 +13,7 @@ import {
import { Provider } from '@jengaui/providers';
import { TOKENS } from '@jengaui/core';
import { useViewportSize } from '@jengaui/utils';
+import { TrackingProps, TrackingProvider } from '@jengaui/providers';
import { PortalProvider } from '@jengaui/portal';
import { GlobalStyles } from '@jengaui/core';
@@ -20,7 +21,7 @@ import { AlertDialogApiProvider } from '@jengaui/alert-dialog';
import { NotificationsProvider } from '@jengaui/notification';
const RootElement = tasty({
- id: 'Jenga UI-kit-root',
+ id: 'jenga-ui-kit-root',
className: 'root',
});
@@ -44,6 +45,7 @@ export interface JengaRootProps extends BaseProps {
font?: string;
monospaceFont?: string;
applyLegacyTokens?: boolean;
+ tracking?: TrackingProps;
}
const IS_DVH_SUPPORTED =
@@ -62,6 +64,7 @@ export function Root(allProps: JengaRootProps) {
font,
monospaceFont,
applyLegacyTokens,
+ tracking,
...props
} = allProps;
@@ -118,34 +121,36 @@ export function Root(allProps: JengaRootProps) {
return (
-
-
-
-
-
-
- {children}
-
-
-
-
-
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
);
-}
+}
\ No newline at end of file
diff --git a/packages/search-input/package.json b/packages/search-input/package.json
index 6632edc9..727bedee 100644
--- a/packages/search-input/package.json
+++ b/packages/search-input/package.json
@@ -38,7 +38,7 @@
"@jengaui/utils": "workspace:0.4.0",
"@react-aria/searchfield": "^3.4.2",
"@react-stately/searchfield": "^3.3.2",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -51,8 +51,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/search-input/src/SearchInput.tsx b/packages/search-input/src/SearchInput.tsx
index 9b65aba3..e5eb6414 100644
--- a/packages/search-input/src/SearchInput.tsx
+++ b/packages/search-input/src/SearchInput.tsx
@@ -1,16 +1,18 @@
-import { forwardRef, useEffect, useRef } from 'react';
+import { forwardRef, useRef } from 'react';
import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
import { useSearchFieldState } from '@react-stately/searchfield';
import { useSearchField } from '@react-aria/searchfield';
import {
- useCombinedRefs,
+ JengaTextInputBaseProps,
+ TextInputBase,
+} from '@jengaui/text-input';
+import { useProviderProps } from '@jengaui/providers';
+import { Button, ariaToJengaButtonProps } from '@jengaui/button';
+import {
castNullableStringValue,
WithNullableValue,
} from '@jengaui/utils';
-import { JengaTextInputBaseProps, TextInputBase } from '@jengaui/text-input';
-import { useProviderProps } from '@jengaui/providers';
-import { Button, ariaToJengaButtonProps } from '@jengaui/button';
import { tasty } from 'tastycss';
export interface JengaSearchInputProps extends JengaTextInputBaseProps {
@@ -35,20 +37,10 @@ export const SearchInput = forwardRef(function SearchInput(
props = castNullableStringValue(props);
props = useProviderProps(props);
- let { isClearable, value, validationState } = props;
+ let { isClearable, validationState } = props;
- const localRef = useRef(null);
- const combinedRef = useCombinedRefs(ref, localRef);
let inputRef = useRef(null);
- useEffect(() => {
- const el = combinedRef && combinedRef.current;
-
- if (el && value != null && el.value !== value) {
- el.value = value;
- }
- }, [combinedRef, value]);
-
let state = useSearchFieldState(props);
let { inputProps, clearButtonProps } = useSearchField(props, state, inputRef);
@@ -74,4 +66,4 @@ export const SearchInput = forwardRef(function SearchInput(
{...props}
/>
);
-});
+});
\ No newline at end of file
diff --git a/packages/select/package.json b/packages/select/package.json
index 0988e428..24f9913b 100644
--- a/packages/select/package.json
+++ b/packages/select/package.json
@@ -47,7 +47,7 @@
"@react-stately/select": "^3.3.2",
"@react-types/select": "^3.6.4",
"@react-types/shared": "^3.15.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -61,8 +61,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0",
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0",
"styled-components": ">= 5.3.6"
},
"publishConfig": {
diff --git a/packages/select/src/Select.tsx b/packages/select/src/Select.tsx
index 9ae1450e..2c51e7b6 100644
--- a/packages/select/src/Select.tsx
+++ b/packages/select/src/Select.tsx
@@ -41,18 +41,13 @@ import {
Styles,
tasty,
} from 'tastycss';
-import {
- useFocus,
- getOverlayTransitionCSS,
- mergeProps,
- useCombinedRefs,
-} from '@jengaui/utils';
+import { useFocus, getOverlayTransitionCSS, mergeProps, useCombinedRefs } from '@jengaui/utils';
import { OverlayWrapper } from '@jengaui/overlays';
import {
DEFAULT_INPUT_STYLES,
INPUT_WRAPPER_STYLES,
} from '@jengaui/text-input';
-import { JengaButtonProps, provideButtonStyles } from '@jengaui/button';
+import { DEFAULT_BUTTON_STYLES } from '@jengaui/button';
import type { AriaSelectProps } from '@react-types/select';
@@ -81,6 +76,7 @@ const SelectWrapperElement = tasty({
fill: {
'': '#white',
disabled: '#dark.04',
+ '[data-theme="special"]': '#clear',
},
color: {
'': '#dark.85',
@@ -91,6 +87,10 @@ const SelectWrapperElement = tasty({
Value: {
...DEFAULT_INPUT_STYLES,
+ preset: {
+ '': 't3',
+ '[data-type="primary"]': 't3m',
+ },
color: 'inherit',
opacity: {
'': 1,
@@ -98,6 +98,11 @@ const SelectWrapperElement = tasty({
},
textAlign: 'left',
fill: '#clear',
+ textOverflow: 'ellipsis',
+ overflow: {
+ '': 'initial',
+ ellipsis: 'hidden',
+ },
},
CaretIcon: {
@@ -105,6 +110,7 @@ const SelectWrapperElement = tasty({
placeItems: 'center',
width: 'min 4x',
cursor: 'pointer',
+ fontSize: 'inherit',
},
ButtonIcon: {
@@ -112,11 +118,7 @@ const SelectWrapperElement = tasty({
placeItems: 'center',
width: 'min 4x',
color: 'inherit',
- fontSize: {
- '': 'initial',
- '[data-size="small"]': '14px',
- '[data-size="medium"]': '16px',
- },
+ fontSize: '@icon-size',
},
},
});
@@ -126,15 +128,65 @@ const SelectElement = tasty({
qa: 'Button',
styles: {
...INPUT_WRAPPER_STYLES,
+ ...DEFAULT_BUTTON_STYLES,
+ preset: 't3m',
cursor: 'pointer',
padding: '0',
+ gap: '0',
border: {
'': true,
valid: '#success-text.50',
invalid: '#danger-text.50',
+ '[data-type="primary"]': '#clear',
'[data-type="clear"]': '#clear',
+ '[data-theme="special"] & [data-type="secondary"] & pressed': '#white.44',
disabled: true,
},
+ fill: {
+ '': '#clear',
+ '[data-type="primary"]': '#purple',
+ '[data-type="primary"] & pressed': '#purple',
+ '[data-type="primary"] & hovered': '#purple-text',
+
+ '[data-type="secondary"]': '#dark.0',
+ '[data-type="secondary"] & hovered': '#dark.04',
+ '[data-type="secondary"] & pressed': '#dark.05',
+
+ '[disabled]': '#dark.04',
+
+ '([data-type="clear"] | [data-type="outline"])': '#purple.0',
+ '([data-type="clear"] | [data-type="outline"]) & hovered': '#purple.16',
+ '([data-type="clear"] | [data-type="outline"]) & pressed': '#purple.10',
+ '([data-type="clear"] | [data-type="outline"]) & [disabled]': '#purple.0',
+
+ // special
+ '[data-theme="special"] & [data-type="secondary"]': '#white.12',
+
+ '[data-theme="special"] & [data-type="clear"]': '#white',
+ '[data-theme="special"] & [data-type="clear"] & hovered': '#white.94',
+ '[data-theme="special"] & [data-type="clear"] & pressed': '#white',
+
+ '[data-theme="special"] & [disabled]': '#white.12',
+
+ '[data-theme="special"] & [data-type="clear"] & [disabled]': '#white.0',
+ },
+ color: {
+ '': '#white',
+
+ '[data-type="secondary"]': '#dark.75',
+ '[data-type="secondary"] & hovered': '#dark.75',
+ '[data-type="clear"]': '#purple-text',
+ '[data-type="secondary"] & pressed': '#purple',
+
+ '[disabled]': '#dark.30',
+
+ // special
+ '[data-theme="special"]': '#white',
+ '[data-theme="special"] & [data-type="clear"]': '#purple',
+
+ // other
+ '[data-theme="special"] & [disabled]': '#white.30',
+ },
},
});
@@ -165,17 +217,17 @@ const OptionElement = tasty({
radius: true,
fill: {
'': '#dark.0',
- 'hovered | focused': '#dark.04',
'pressed | selected': '#purple.10',
- '[disabled]': '#dark.04',
+ 'hovered | focused': '#dark.04',
+ disabled: '#dark.0',
},
color: {
'': '#dark.75',
'hovered | focused': '#dark.75',
'pressed | selected': '#purple',
- '[disabled]': '#dark.30',
+ disabled: '#dark.3',
},
- preset: 't3m',
+ preset: 't3',
transition: 'theme',
},
});
@@ -214,7 +266,7 @@ export interface JengaSelectBaseProps
direction?: 'top' | 'bottom';
shouldFlip?: boolean;
inputProps?: Props;
- type?: JengaButtonProps['type'];
+ type?: 'secondary' | 'clear' | 'primary' | (string & {});
suffixPosition?: 'before' | 'after';
}
@@ -223,6 +275,7 @@ export interface JengaSelectProps extends JengaSelectBaseProps {
/** The ref for the list box. */
listBoxRef?: RefObject;
size?: 'small' | 'default' | 'large' | string;
+ ellipsis?: boolean;
}
function Select(
@@ -266,29 +319,17 @@ function Select(
tooltip,
size,
styles,
- type = 'neutral',
- theme,
+ type = 'secondary',
+ theme = 'default',
labelSuffix,
+ ellipsis,
suffixPosition = 'before',
...otherProps
} = props;
let state = useSelectState(props);
const outerStyles = extractStyles(otherProps, OUTER_STYLES, styles);
- inputStyles = extractStyles(otherProps, BLOCK_STYLES, {
- ...(() => {
- let styles = provideButtonStyles({ type, theme });
-
- delete styles['border'];
-
- if (isDisabled || validationState === 'invalid') {
- styles.color = 'inherit';
- }
-
- return styles;
- })(),
- ...inputStyles,
- });
+ inputStyles = extractStyles(otherProps, BLOCK_STYLES, inputStyles);
ref = useCombinedRefs(ref);
triggerRef = useCombinedRefs(triggerRef);
@@ -354,6 +395,7 @@ function Select(
const modifiers = useMemo(
() => ({
+ ellipsis,
invalid: isInvalid,
valid: validationState === 'valid',
disabled: isDisabled,
@@ -365,6 +407,7 @@ function Select(
suffix: true,
}),
[
+ ellipsis,
validationState,
isDisabled,
isLoading,
@@ -381,6 +424,8 @@ function Select(
mods={modifiers}
styles={outerStyles}
data-size={size}
+ data-type={type}
+ data-theme={theme}
>
(
{...mergeProps(buttonProps, hoverProps, focusProps)}
ref={triggerRef}
styles={inputStyles}
+ data-theme={theme}
data-size={size}
- data-type={type || 'neutral'}
+ data-type={type}
mods={modifiers}
>
{prefix ? {prefix}
: null}
@@ -582,4 +628,4 @@ const __Select = Object.assign(
{ Item },
);
-export { __Select as Select };
+export { __Select as Select };
\ No newline at end of file
diff --git a/packages/services/package.json b/packages/services/package.json
index 327f0309..553e018d 100644
--- a/packages/services/package.json
+++ b/packages/services/package.json
@@ -44,8 +44,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/skeleton/package.json b/packages/skeleton/package.json
index 57bb57af..25ae9459 100644
--- a/packages/skeleton/package.json
+++ b/packages/skeleton/package.json
@@ -35,7 +35,7 @@
"dependencies": {
"@jengaui/layout": "workspace:0.4.0",
"@jengaui/placeholder": "workspace:0.4.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -47,8 +47,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/slider/package.json b/packages/slider/package.json
index 360c28e5..b0afd05e 100644
--- a/packages/slider/package.json
+++ b/packages/slider/package.json
@@ -45,7 +45,7 @@
"@react-stately/slider": "3.2.1",
"@react-types/shared": "^3.15.0",
"@react-types/slider": "3.2.1",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -59,8 +59,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/switch/package.json b/packages/switch/package.json
index fce39bed..db670579 100644
--- a/packages/switch/package.json
+++ b/packages/switch/package.json
@@ -47,7 +47,7 @@
"@react-spectrum/utils": "^3.7.4",
"@react-stately/toggle": "^3.4.2",
"@react-types/switch": "^3.2.4",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -60,8 +60,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/table/package.json b/packages/table/package.json
index 0ffe393b..950b30da 100644
--- a/packages/table/package.json
+++ b/packages/table/package.json
@@ -45,7 +45,7 @@
"@react-stately/table": "^3.5.0",
"@react-types/grid": "^3.1.4",
"@react-types/shared": "^3.15.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -58,8 +58,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/tabs/package.json b/packages/tabs/package.json
index 9d6f874e..8099da73 100644
--- a/packages/tabs/package.json
+++ b/packages/tabs/package.json
@@ -35,7 +35,7 @@
"@jengaui/core": "workspace:0.4.0",
"@jengaui/layout": "workspace:0.4.0",
"@jengaui/utils": "workspace:0.4.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -48,8 +48,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0",
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0",
"styled-components": ">= 5.3.6"
},
"publishConfig": {
diff --git a/packages/tag/package.json b/packages/tag/package.json
index 3d9b4b75..b8296328 100644
--- a/packages/tag/package.json
+++ b/packages/tag/package.json
@@ -36,7 +36,7 @@
"@jengaui/button": "workspace:0.4.0",
"@jengaui/core": "workspace:0.4.0",
"@jengaui/layout": "workspace:0.4.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -49,8 +49,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/text-input/package.json b/packages/text-input/package.json
index a630d8f6..c8212e78 100644
--- a/packages/text-input/package.json
+++ b/packages/text-input/package.json
@@ -41,7 +41,7 @@
"@react-aria/textfield": "^3.7.2",
"@react-spectrum/utils": "^3.7.4",
"@react-types/textfield": "^3.6.0",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@ant-design/icons": "^4.7.0",
@@ -54,8 +54,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/textarea/package.json b/packages/textarea/package.json
index ab247daf..2a3af870 100644
--- a/packages/textarea/package.json
+++ b/packages/textarea/package.json
@@ -49,8 +49,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/toast/package.json b/packages/toast/package.json
index 50825d82..5927ae0c 100644
--- a/packages/toast/package.json
+++ b/packages/toast/package.json
@@ -55,8 +55,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json
index f1440a63..ae0529a7 100644
--- a/packages/tooltip/package.json
+++ b/packages/tooltip/package.json
@@ -49,7 +49,7 @@
"@react-stately/tooltip": "^3.2.2",
"@react-types/shared": "^3.15.0",
"@react-types/tooltip": "^3.2.4",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -62,8 +62,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0",
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0",
"styled-components": ">= 5.3.6"
},
"publishConfig": {
diff --git a/packages/utils/package.json b/packages/utils/package.json
index c773b254..5f287a75 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -44,7 +44,7 @@
"@react-types/shared": "3.15.0",
"clsx": "^1.2.1",
"react-is": "^17.0.2",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.3.0",
@@ -56,8 +56,8 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "react": ">= 18.2.0",
- "react-dom": ">= 18.2.0"
+ "react": ">= 17.0.0",
+ "react-dom": ">= 17.0.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/utils/src/react/mergeProps.tsx b/packages/utils/src/react/mergeProps.tsx
index 73830dce..7a159327 100644
--- a/packages/utils/src/react/mergeProps.tsx
+++ b/packages/utils/src/react/mergeProps.tsx
@@ -5,18 +5,13 @@ import { mergeStyles, Props } from 'tastycss';
import { chain } from './chain';
import { mergeIds } from './useId';
-type TupleTypes = {
- [P in keyof T]: T[P];
-} extends {
- [key: number]: infer V;
-}
- ? V
- : never;
-type UnionToIntersection = (U extends any ? (k: U) => void : never) extends (
- k: infer I,
-) => void
- ? I
- : never;
+type Merge = T extends [infer F, ...infer R]
+ ? F extends undefined
+ ? Merge
+ : F & Merge
+ : T extends [infer L]
+ ? L
+ : unknown;
/**
* Merges multiple props objects together. Event handlers are chained,
@@ -25,10 +20,9 @@ type UnionToIntersection = (U extends any ? (k: U) => void : never) extends (
* For all other props, the last prop object overrides all previous ones.
* @param args - Multiple sets of props to merge together.
*/
-export function mergeProps<
- T extends (Props | undefined)[],
- K = UnionToIntersection>,
->(...args: T): K {
+export function mergeProps>(
+ ...args: T
+): K {
let result: any = {};
for (let props of args) {
@@ -57,6 +51,8 @@ export function mergeProps<
typeof props.styles === 'object'
) {
result[key] = mergeStyles(result[key], props[key]);
+ } else if (key === 'mods' && result.mods && props?.mods) {
+ result.mods = { ...result.mods, ...props?.mods };
} else if (key === 'id' && result.id && props?.id) {
result.id = mergeIds(result.id, props?.id);
// Override others
@@ -75,4 +71,4 @@ export function mergeProps<
}
return result as K;
-}
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 681c5b31..c50ee82d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,7 +51,7 @@ importers:
react-test-renderer: ^17.0.2
size-limit: 8.2.4
styled-components: ^5.3.6
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
turbo: ^1.5.6
typescript: ^4.8.4
@@ -60,7 +60,7 @@ importers:
find-up: 6.3.0
react: 17.0.2
react-dom: 17.0.2_react@17.0.2
- tastycss: 0.13.0_hwbgsgnusl2xykda667kee54bi
+ tastycss: 0.17.2_hwbgsgnusl2xykda667kee54bi
devDependencies:
'@changesets/changelog-github': 0.4.7
'@changesets/cli': 2.25.0
@@ -99,7 +99,7 @@ importers:
react-router: 6.4.2_react@17.0.2
react-test-renderer: 17.0.2_react@17.0.2
size-limit: 8.2.4
- styled-components: 5.3.6_fane7jikarojcev26y27hpbhu4
+ styled-components: 5.3.6_v5ja746gkdtknuc6tj46sve3be
tsup: 6.2.3_vfoutbaceuxscp2ncv6yzgunee
turbo: 1.5.6
typescript: 4.8.4
@@ -121,7 +121,7 @@ importers:
react-dom: ^18.2.0
react-transition-group: ^4.4.5
styled-components: ^5.3.6
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -133,7 +133,7 @@ importers:
'@react-aria/interactions': 3.12.0_react@18.2.0
nanoid: 3.3.4
react-transition-group: 4.4.5_biqbaboplfbrettd7655fr4n2y
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -141,7 +141,7 @@ importers:
'@types/react-dom': 17.0.17
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
- styled-components: 5.3.6_pumtretovylab5lwhztzjp2kuy
+ styled-components: 5.3.6_7i5myeigehqah43i5u7wbekgba
tsup: 6.2.3_typescript@4.8.4
typescript: 4.8.4
@@ -156,7 +156,7 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -164,7 +164,7 @@ importers:
'@react-aria/focus': 3.9.0_react@18.2.0
'@react-aria/interactions': 3.12.0_react@18.2.0
'@react-spectrum/utils': 3.7.4_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
@@ -183,13 +183,13 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
'@jengaui/core': link:../core
'@jengaui/hooks': link:../hooks
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
@@ -214,7 +214,7 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tiny-invariant: ^1.3.1
tsup: ^6.2.3
typescript: ^4.8.4
@@ -226,7 +226,7 @@ importers:
'@jengaui/portal': link:../portal
'@react-aria/utils': 3.14.0_react@18.2.0
'@react-types/dialog': 3.4.4_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
tiny-invariant: 1.3.1
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
@@ -246,11 +246,11 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -270,12 +270,12 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
'@jengaui/core': link:../core
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -297,14 +297,14 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
'@jengaui/button': link:../button
'@jengaui/card': link:../card
'@jengaui/core': link:../core
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -328,7 +328,7 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -337,7 +337,7 @@ importers:
'@react-aria/breadcrumbs': 3.3.2_react@18.2.0
'@react-types/breadcrumbs': 3.4.4_react@18.2.0
'@react-types/shared': 3.15.0_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -352,6 +352,7 @@ importers:
specifiers:
'@ant-design/icons': ^4.7.0
'@jengaui/form': workspace:0.4.0
+ '@jengaui/hooks': workspace:0.4.0
'@jengaui/providers': workspace:0.4.0
'@jengaui/tsconfig': workspace:0.3.0
'@jengaui/utils': workspace:0.4.0
@@ -367,11 +368,12 @@ importers:
react: ^18.2.0
react-dom: ^18.2.0
react-is: ^17.0.2
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
'@jengaui/form': link:../form
+ '@jengaui/hooks': link:../hooks
'@jengaui/providers': link:../providers
'@jengaui/utils': link:../utils
'@react-aria/button': 3.6.2_react@18.2.0
@@ -379,7 +381,7 @@ importers:
'@react-spectrum/utils': 3.7.4_react@18.2.0
'@react-types/shared': 3.15.0_react@18.2.0
react-is: 17.0.2
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -403,13 +405,13 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
'@jengaui/layout': link:../layout
'@jengaui/utils': link:../utils
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -427,11 +429,11 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
@@ -459,7 +461,7 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -471,7 +473,7 @@ importers:
'@react-spectrum/utils': 3.7.4_react@18.2.0
'@react-stately/checkbox': 3.3.0_react@18.2.0
'@react-stately/toggle': 3.4.2_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -509,7 +511,7 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -530,7 +532,7 @@ importers:
'@react-stately/combobox': 3.2.2_react@18.2.0
'@react-types/combobox': 3.5.4_react@18.2.0
'@react-types/shared': 3.15.0_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -549,12 +551,12 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
'@jengaui/utils': link:../utils
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
@@ -579,7 +581,7 @@ importers:
clipboard-copy: ^4.0.1
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -590,7 +592,7 @@ importers:
'@jengaui/toast': link:../toast
'@jengaui/tooltip': link:../tooltip
clipboard-copy: 4.0.1
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -609,18 +611,18 @@ importers:
react: ^18.2.0
react-dom: ^18.2.0
styled-components: ^5.3.6
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
'@types/react-dom': 17.0.17
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
- styled-components: 5.3.6_pumtretovylab5lwhztzjp2kuy
+ styled-components: 5.3.6_7i5myeigehqah43i5u7wbekgba
tsup: 6.2.3_typescript@4.8.4
typescript: 4.8.4
@@ -647,7 +649,7 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tiny-invariant: ^1.3.1
tsup: ^6.2.3
typescript: ^4.8.4
@@ -667,7 +669,7 @@ importers:
'@react-stately/overlays': 3.4.2_react@18.2.0
'@react-types/dialog': 3.4.4_react@18.2.0
'@react-types/shared': 3.15.0_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
tiny-invariant: 1.3.1
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
@@ -691,7 +693,7 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -700,7 +702,7 @@ importers:
'@jengaui/providers': link:../providers
'@react-spectrum/utils': 3.7.4_react@18.2.0
'@react-types/textfield': 3.6.0_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
@@ -729,7 +731,7 @@ importers:
react: ^18.2.0
react-dom: ^18.2.0
styled-components: ^5.3.6
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
valid-url: ^1.0.9
@@ -744,7 +746,7 @@ importers:
'@react-stately/collections': 3.4.4_react@18.2.0
'@react-types/shared': 3.15.0_react@18.2.0
email-validator: 2.0.4
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
valid-url: 1.0.9
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
@@ -753,7 +755,7 @@ importers:
'@types/react-dom': 17.0.17
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
- styled-components: 5.3.6_pumtretovylab5lwhztzjp2kuy
+ styled-components: 5.3.6_7i5myeigehqah43i5u7wbekgba
tsup: 6.2.3_typescript@4.8.4
typescript: 4.8.4
@@ -817,12 +819,12 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
'@jengaui/utils': link:../utils
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
@@ -881,7 +883,7 @@ importers:
csstype: 3.1.1
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -902,7 +904,7 @@ importers:
'@react-types/menu': 3.7.2_react@18.2.0
'@react-types/overlays': 3.6.4_react@18.2.0
'@react-types/shared': 3.15.0_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -931,7 +933,7 @@ importers:
react: ^18.2.0
react-dom: ^18.2.0
react-transition-group: ^4.4.5
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -943,7 +945,7 @@ importers:
'@react-spectrum/utils': 3.7.4_react@18.2.0
'@react-types/overlays': 3.6.4_react@18.2.0
react-transition-group: 4.4.5_biqbaboplfbrettd7655fr4n2y
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -983,7 +985,7 @@ importers:
react-is: ^17.0.2
react-transition-group: ^4.4.5
styled-components: ^5.3.6
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tiny-invariant: ^1.3.1
tsup: ^6.2.3
typescript: ^4.8.4
@@ -1008,7 +1010,7 @@ importers:
'@react-types/shared': 3.15.0_react@18.2.0
react-is: 17.0.2
react-transition-group: 4.4.5_biqbaboplfbrettd7655fr4n2y
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
tiny-invariant: 1.3.1
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -1037,7 +1039,7 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -1050,7 +1052,7 @@ importers:
'@react-aria/numberfield': 3.3.2_biqbaboplfbrettd7655fr4n2y
'@react-stately/numberfield': 3.2.2_react@18.2.0
'@react-types/numberfield': 3.3.4_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -1127,18 +1129,18 @@ importers:
react: ^18.2.0
react-dom: ^18.2.0
styled-components: ^5.3.6
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
'@types/react-dom': 17.0.17
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
- styled-components: 5.3.6_pumtretovylab5lwhztzjp2kuy
+ styled-components: 5.3.6_7i5myeigehqah43i5u7wbekgba
tsup: 6.2.3_typescript@4.8.4
typescript: 4.8.4
@@ -1171,12 +1173,12 @@ importers:
prismjs: ^1.29.0
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
prismjs: 1.29.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
@@ -1194,12 +1196,12 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
'@jengaui/utils': link:../utils
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
@@ -1225,7 +1227,7 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -1237,7 +1239,7 @@ importers:
'@react-spectrum/utils': 3.7.4_react@18.2.0
'@react-stately/radio': 3.6.0_react@18.2.0
'@react-types/radio': 3.3.0_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -1377,13 +1379,13 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
'@jengaui/content': link:../content
'@jengaui/utils': link:../utils
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -1409,7 +1411,7 @@ importers:
react: ^18.2.0
react-dom: ^18.2.0
styled-components: ^5.3.6
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -1420,14 +1422,14 @@ importers:
'@jengaui/providers': link:../providers
'@jengaui/utils': link:../utils
'@react-aria/overlays': 3.11.0_biqbaboplfbrettd7655fr4n2y
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
'@types/react-dom': 17.0.17
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
- styled-components: 5.3.6_pumtretovylab5lwhztzjp2kuy
+ styled-components: 5.3.6_7i5myeigehqah43i5u7wbekgba
tsup: 6.2.3_typescript@4.8.4
typescript: 4.8.4
@@ -1445,7 +1447,7 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -1455,7 +1457,7 @@ importers:
'@jengaui/utils': link:../utils
'@react-aria/searchfield': 3.4.2_react@18.2.0
'@react-stately/searchfield': 3.3.2_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -1491,7 +1493,7 @@ importers:
react: ^18.2.0
react-dom: ^18.2.0
styled-components: ^5.3.6
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -1511,7 +1513,7 @@ importers:
'@react-stately/select': 3.3.2_react@18.2.0
'@react-types/select': 3.6.4_react@18.2.0
'@react-types/shared': 3.15.0_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -1519,7 +1521,7 @@ importers:
'@types/react-dom': 17.0.17
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
- styled-components: 5.3.6_pumtretovylab5lwhztzjp2kuy
+ styled-components: 5.3.6_7i5myeigehqah43i5u7wbekgba
tsup: 6.2.3_typescript@4.8.4
typescript: 4.8.4
@@ -1558,13 +1560,13 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
'@jengaui/layout': link:../layout
'@jengaui/placeholder': link:../placeholder
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
@@ -1594,7 +1596,7 @@ importers:
csstype: 3.1.1
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -1609,7 +1611,7 @@ importers:
'@react-stately/slider': 3.2.1_react@18.2.0
'@react-types/shared': 3.15.0_react@18.2.0
'@react-types/slider': 3.2.1_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -1637,7 +1639,7 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -1649,7 +1651,7 @@ importers:
'@react-spectrum/utils': 3.7.4_react@18.2.0
'@react-stately/toggle': 3.4.2_react@18.2.0
'@react-types/switch': 3.2.4_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -1681,7 +1683,7 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -1698,7 +1700,7 @@ importers:
'@react-stately/table': 3.5.0_react@18.2.0
'@react-types/grid': 3.1.4_react@18.2.0
'@react-types/shared': 3.15.0_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -1721,7 +1723,7 @@ importers:
react: ^18.2.0
react-dom: ^18.2.0
styled-components: ^5.3.6
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -1729,14 +1731,14 @@ importers:
'@jengaui/core': link:../core
'@jengaui/layout': link:../layout
'@jengaui/utils': link:../utils
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
'@types/react-dom': 17.0.17
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
- styled-components: 5.3.6_pumtretovylab5lwhztzjp2kuy
+ styled-components: 5.3.6_7i5myeigehqah43i5u7wbekgba
tsup: 6.2.3_typescript@4.8.4
typescript: 4.8.4
@@ -1751,14 +1753,14 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
'@jengaui/button': link:../button
'@jengaui/core': link:../core
'@jengaui/layout': link:../layout
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -1786,7 +1788,7 @@ importers:
'@types/react-dom': ^17.0.17
react: ^18.2.0
react-dom: ^18.2.0
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -1799,7 +1801,7 @@ importers:
'@react-aria/textfield': 3.7.2_react@18.2.0
'@react-spectrum/utils': 3.7.4_react@18.2.0
'@react-types/textfield': 3.6.0_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@ant-design/icons': 4.7.0_biqbaboplfbrettd7655fr4n2y
'@jengaui/tsconfig': link:../shared-tsconfig
@@ -1889,7 +1891,7 @@ importers:
react: ^18.2.0
react-dom: ^18.2.0
styled-components: ^5.3.6
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -1904,14 +1906,14 @@ importers:
'@react-stately/tooltip': 3.2.2_react@18.2.0
'@react-types/shared': 3.15.0_react@18.2.0
'@react-types/tooltip': 3.2.4_react@18.2.0
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
'@types/react-dom': 17.0.17
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
- styled-components: 5.3.6_pumtretovylab5lwhztzjp2kuy
+ styled-components: 5.3.6_7i5myeigehqah43i5u7wbekgba
tsup: 6.2.3_typescript@4.8.4
typescript: 4.8.4
@@ -1928,7 +1930,7 @@ importers:
react: ^18.2.0
react-dom: ^18.2.0
react-is: ^17.0.2
- tastycss: ^0.13.0
+ tastycss: ^0.17.2
tsup: ^6.2.3
typescript: ^4.8.4
dependencies:
@@ -1938,7 +1940,7 @@ importers:
'@react-types/shared': 3.15.0_react@18.2.0
clsx: 1.2.1
react-is: 17.0.2
- tastycss: 0.13.0_2zpt4ilzykmne4yndyzrqd4gdm
+ tastycss: 0.17.2_2zpt4ilzykmne4yndyzrqd4gdm
devDependencies:
'@jengaui/tsconfig': link:../shared-tsconfig
'@types/react': 17.0.50
@@ -6282,7 +6284,7 @@ packages:
babel-plugin-syntax-jsx: 6.18.0
lodash: 4.17.21
picomatch: 2.3.1
- styled-components: 5.3.6_pumtretovylab5lwhztzjp2kuy
+ styled-components: 5.3.6_7i5myeigehqah43i5u7wbekgba
/babel-plugin-syntax-jsx/6.18.0:
resolution: {integrity: sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==}
@@ -8843,7 +8845,7 @@ packages:
styled-components: '>= 5'
dependencies:
'@adobe/css-tools': 4.0.1
- styled-components: 5.3.6_fane7jikarojcev26y27hpbhu4
+ styled-components: 5.3.6_v5ja746gkdtknuc6tj46sve3be
dev: true
/jest-util/27.5.1:
@@ -9909,7 +9911,7 @@ packages:
dependencies:
object-assign: 4.1.1
react: 17.0.2
- react-is: 17.0.2
+ react-is: 18.2.0
dev: true
/react-test-renderer/17.0.2_react@17.0.2:
@@ -10516,7 +10518,7 @@ packages:
engines: {node: '>=8'}
dev: true
- /styled-components/5.3.6_fane7jikarojcev26y27hpbhu4:
+ /styled-components/5.3.6_7i5myeigehqah43i5u7wbekgba:
resolution: {integrity: sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==}
engines: {node: '>=10'}
requiresBuild: true
@@ -10533,9 +10535,9 @@ packages:
babel-plugin-styled-components: 2.0.7_styled-components@5.3.6
css-to-react-native: 3.0.0
hoist-non-react-statics: 3.3.2
- react: 17.0.2
- react-dom: 17.0.2_react@17.0.2
- react-is: 17.0.2
+ react: 18.2.0
+ react-dom: 18.2.0_react@18.2.0
+ react-is: 18.2.0
shallowequal: 1.1.0
supports-color: 5.5.0
@@ -10561,6 +10563,30 @@ packages:
react-is: 17.0.2
shallowequal: 1.1.0
supports-color: 5.5.0
+ dev: true
+
+ /styled-components/5.3.6_v5ja746gkdtknuc6tj46sve3be:
+ resolution: {integrity: sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==}
+ engines: {node: '>=10'}
+ requiresBuild: true
+ peerDependencies:
+ react: '>= 16.8.0'
+ react-dom: '>= 16.8.0'
+ react-is: '>= 16.8.0'
+ dependencies:
+ '@babel/helper-module-imports': 7.18.6
+ '@babel/traverse': 7.19.4_supports-color@5.5.0
+ '@emotion/is-prop-valid': 1.2.0
+ '@emotion/stylis': 0.8.5
+ '@emotion/unitless': 0.7.5
+ babel-plugin-styled-components: 2.0.7_styled-components@5.3.6
+ css-to-react-native: 3.0.0
+ hoist-non-react-statics: 3.3.2
+ react: 17.0.2
+ react-dom: 17.0.2_react@17.0.2
+ react-is: 18.2.0
+ shallowequal: 1.1.0
+ supports-color: 5.5.0
/sucrase/3.28.0:
resolution: {integrity: sha512-TK9600YInjuiIhVM3729rH4ZKPOsGeyXUwY+Ugu9eilNbdTFyHr6XcAGYbRVZPDgWj6tgI7bx95aaJjHnbffag==}
@@ -10617,30 +10643,30 @@ packages:
engines: {node: '>=6'}
dev: true
- /tastycss/0.13.0_2zpt4ilzykmne4yndyzrqd4gdm:
- resolution: {integrity: sha512-1tFgHg8tZijw+CowC0XeeUVlkj9HDdQrqjtNo6qo1lXIgPlaiTEjQ6kPfs1tC9bJCGVc11TNtPI/7NfkfR4y7A==}
+ /tastycss/0.17.2_2zpt4ilzykmne4yndyzrqd4gdm:
+ resolution: {integrity: sha512-FP35mehoKk/HW8R1PG6xoLAENwzPiyQT0jcX8GMZG62r+7ujYrpUIZVZ6JORxqZLFYS6zW8TXqoc3mHKTUDtqA==}
peerDependencies:
- react: '>= 18.2.0'
- react-dom: '>= 18.2.0'
- styled-components: '>= 5.3.6'
+ react: '>= 17.0.0'
+ react-dom: '>= 17.0.0'
+ styled-components: '>= 5.3.0'
dependencies:
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
react-is: 18.2.0
- styled-components: 5.3.6_pumtretovylab5lwhztzjp2kuy
+ styled-components: 5.3.6_7i5myeigehqah43i5u7wbekgba
dev: false
- /tastycss/0.13.0_hwbgsgnusl2xykda667kee54bi:
- resolution: {integrity: sha512-1tFgHg8tZijw+CowC0XeeUVlkj9HDdQrqjtNo6qo1lXIgPlaiTEjQ6kPfs1tC9bJCGVc11TNtPI/7NfkfR4y7A==}
+ /tastycss/0.17.2_hwbgsgnusl2xykda667kee54bi:
+ resolution: {integrity: sha512-FP35mehoKk/HW8R1PG6xoLAENwzPiyQT0jcX8GMZG62r+7ujYrpUIZVZ6JORxqZLFYS6zW8TXqoc3mHKTUDtqA==}
peerDependencies:
- react: '>= 18.2.0'
- react-dom: '>= 18.2.0'
- styled-components: '>= 5.3.6'
+ react: '>= 17.0.0'
+ react-dom: '>= 17.0.0'
+ styled-components: '>= 5.3.0'
dependencies:
react: 17.0.2
react-dom: 17.0.2_react@17.0.2
react-is: 18.2.0
- styled-components: 5.3.6_fane7jikarojcev26y27hpbhu4
+ styled-components: 5.3.6_v5ja746gkdtknuc6tj46sve3be
dev: false
/term-size/2.2.1:
diff --git a/storybook/package.json b/storybook/package.json
index 8000421e..3710f151 100644
--- a/storybook/package.json
+++ b/storybook/package.json
@@ -14,7 +14,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-transition-group": "^4.4.5",
- "tastycss": "^0.13.0"
+ "tastycss": "^0.17.2"
},
"devDependencies": {
"@jengaui/tsconfig": "workspace:0.2.0",