@seed-design/react 0.0.8 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/ActionButton/ActionButton.cjs +2 -4
- package/lib/components/ActionButton/ActionButton.d.ts.map +1 -1
- package/lib/components/ActionButton/ActionButton.js +2 -4
- package/lib/components/ActionChip/ActionChip.cjs +2 -2
- package/lib/components/ActionChip/ActionChip.js +2 -2
- package/lib/components/ActionSheet/ActionSheet.cjs +2 -2
- package/lib/components/ActionSheet/ActionSheet.js +2 -2
- package/lib/components/Badge/Badge.cjs +2 -2
- package/lib/components/Badge/Badge.d.ts.map +1 -1
- package/lib/components/Badge/Badge.js +2 -2
- package/lib/components/ControlChip/ControlChip.cjs +2 -2
- package/lib/components/ControlChip/ControlChip.js +2 -2
- package/lib/components/ExtendedActionSheet/ExtendedActionSheet.cjs +2 -2
- package/lib/components/ExtendedActionSheet/ExtendedActionSheet.js +2 -2
- package/lib/components/ExtendedFab/ExtendedFab.cjs +2 -2
- package/lib/components/ExtendedFab/ExtendedFab.js +2 -2
- package/lib/components/Fab/Fab.cjs +2 -2
- package/lib/components/Fab/Fab.d.ts.map +1 -1
- package/lib/components/Fab/Fab.js +2 -2
- package/lib/components/Icon/Icon.cjs +28 -19
- package/lib/components/Icon/Icon.d.ts +3 -0
- package/lib/components/Icon/Icon.d.ts.map +1 -1
- package/lib/components/Icon/Icon.js +28 -19
- package/lib/components/LinkContent/LinkContent.cjs +2 -2
- package/lib/components/LinkContent/LinkContent.js +2 -2
- package/lib/components/MannerTemp/MannerTemp.cjs +19 -0
- package/lib/components/MannerTemp/MannerTemp.d.ts +7 -0
- package/lib/components/MannerTemp/MannerTemp.d.ts.map +1 -0
- package/lib/components/MannerTemp/MannerTemp.js +15 -0
- package/lib/components/MannerTemp/MannerTempEmote.cjs +632 -0
- package/lib/components/MannerTemp/MannerTempEmote.d.ts +7 -0
- package/lib/components/MannerTemp/MannerTempEmote.d.ts.map +1 -0
- package/lib/components/MannerTemp/MannerTempEmote.js +627 -0
- package/lib/components/MannerTemp/index.cjs +11 -0
- package/lib/components/MannerTemp/index.d.ts +3 -0
- package/lib/components/MannerTemp/index.d.ts.map +1 -0
- package/lib/components/MannerTemp/index.js +2 -0
- package/lib/components/MannerTempBadge/MannerTempBadge.cjs +2 -2
- package/lib/components/MannerTempBadge/MannerTempBadge.d.ts.map +1 -1
- package/lib/components/MannerTempBadge/MannerTempBadge.js +2 -2
- package/lib/components/NotificationBadge/NotificationBadge.cjs +2 -2
- package/lib/components/NotificationBadge/NotificationBadge.js +2 -2
- package/lib/components/ReactionButton/ReactionButton.cjs +2 -4
- package/lib/components/ReactionButton/ReactionButton.d.ts.map +1 -1
- package/lib/components/ReactionButton/ReactionButton.js +2 -4
- package/lib/components/SelectBox/CheckSelectBox.cjs +3 -3
- package/lib/components/SelectBox/CheckSelectBox.js +3 -3
- package/lib/components/SelectBox/RadioSelectBox.cjs +3 -3
- package/lib/components/SelectBox/RadioSelectBox.js +3 -3
- package/lib/components/Skeleton/Skeleton.cjs +2 -2
- package/lib/components/Skeleton/Skeleton.d.ts.map +1 -1
- package/lib/components/Skeleton/Skeleton.js +2 -2
- package/lib/components/Snackbar/Snackbar.cjs +2 -2
- package/lib/components/Snackbar/Snackbar.js +2 -2
- package/lib/components/ToggleButton/ToggleButton.cjs +3 -5
- package/lib/components/ToggleButton/ToggleButton.d.ts +1 -1
- package/lib/components/ToggleButton/ToggleButton.d.ts.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.js +3 -5
- package/lib/components/index.cjs +4 -0
- package/lib/components/index.d.ts +1 -0
- package/lib/components/index.d.ts.map +1 -1
- package/lib/components/index.js +2 -0
- package/lib/components/private/useDismissible.d.ts +3 -3
- package/lib/index.cjs +4 -0
- package/lib/index.js +2 -0
- package/lib/utils/createRecipeContext.cjs +6 -41
- package/lib/utils/createRecipeContext.d.ts +4 -12
- package/lib/utils/createRecipeContext.d.ts.map +1 -1
- package/lib/utils/createRecipeContext.js +6 -41
- package/lib/utils/styled.cjs +2 -0
- package/lib/utils/styled.d.ts +2 -0
- package/lib/utils/styled.d.ts.map +1 -1
- package/lib/utils/styled.js +1 -1
- package/package.json +9 -8
- package/src/components/ActionButton/ActionButton.tsx +12 -17
- package/src/components/ActionChip/ActionChip.tsx +2 -2
- package/src/components/ActionSheet/ActionSheet.tsx +2 -2
- package/src/components/Badge/Badge.tsx +2 -2
- package/src/components/ControlChip/ControlChip.tsx +2 -2
- package/src/components/ExtendedActionSheet/ExtendedActionSheet.tsx +2 -2
- package/src/components/ExtendedFab/ExtendedFab.tsx +2 -2
- package/src/components/Fab/Fab.tsx +2 -2
- package/src/components/Icon/Icon.tsx +37 -20
- package/src/components/LinkContent/LinkContent.tsx +2 -2
- package/src/components/MannerTemp/MannerTemp.tsx +25 -0
- package/src/components/MannerTemp/MannerTempEmote.tsx +464 -0
- package/src/components/MannerTemp/index.ts +2 -0
- package/src/components/MannerTempBadge/MannerTempBadge.tsx +2 -2
- package/src/components/NotificationBadge/NotificationBadge.tsx +2 -2
- package/src/components/ReactionButton/ReactionButton.tsx +8 -13
- package/src/components/SelectBox/CheckSelectBox.tsx +3 -3
- package/src/components/SelectBox/RadioSelectBox.tsx +3 -3
- package/src/components/Skeleton/Skeleton.tsx +2 -2
- package/src/components/Snackbar/Snackbar.tsx +2 -2
- package/src/components/ToggleButton/ToggleButton.tsx +9 -14
- package/src/components/index.ts +1 -0
- package/src/utils/createRecipeContext.tsx +12 -72
- package/src/utils/styled.tsx +2 -2
|
@@ -6,7 +6,7 @@ const mannerTempBadge = require('@seed-design/css/recipes/manner-temp-badge');
|
|
|
6
6
|
const reactPrimitive = require('@seed-design/react-primitive');
|
|
7
7
|
const createRecipeContext = require('../../utils/createRecipeContext.cjs');
|
|
8
8
|
|
|
9
|
-
const {
|
|
10
|
-
const MannerTempBadge =
|
|
9
|
+
const { withContext } = createRecipeContext.createRecipeContext(mannerTempBadge.mannerTempBadge);
|
|
10
|
+
const MannerTempBadge = withContext(reactPrimitive.Primitive.span);
|
|
11
11
|
|
|
12
12
|
exports.MannerTempBadge = MannerTempBadge;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MannerTempBadge.d.ts","sourceRoot":"","sources":["../../../src/components/MannerTempBadge/MannerTempBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,2BAA2B,EACjC,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,WAAW,oBACf,SAAQ,2BAA2B,EACjC,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"MannerTempBadge.d.ts","sourceRoot":"","sources":["../../../src/components/MannerTempBadge/MannerTempBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,2BAA2B,EACjC,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,WAAW,oBACf,SAAQ,2BAA2B,EACjC,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,8FAAqE,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { mannerTempBadge } from '@seed-design/css/recipes/manner-temp-badge';
|
|
|
2
2
|
import { Primitive } from '@seed-design/react-primitive';
|
|
3
3
|
import { createRecipeContext } from '../../utils/createRecipeContext.js';
|
|
4
4
|
|
|
5
|
-
const {
|
|
6
|
-
const MannerTempBadge =
|
|
5
|
+
const { withContext } = createRecipeContext(mannerTempBadge);
|
|
6
|
+
const MannerTempBadge = withContext(Primitive.span);
|
|
7
7
|
|
|
8
8
|
export { MannerTempBadge };
|
|
@@ -29,8 +29,8 @@ function _interopNamespaceDefault(e) {
|
|
|
29
29
|
|
|
30
30
|
const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
31
31
|
|
|
32
|
-
const {
|
|
33
|
-
const NotificationBadge =
|
|
32
|
+
const { withContext, PropsProvider } = createRecipeContext.createRecipeContext(notificationBadge.notificationBadge);
|
|
33
|
+
const NotificationBadge = withContext(
|
|
34
34
|
reactPrimitive.Primitive.span
|
|
35
35
|
);
|
|
36
36
|
const NotificationBadgePositioner = React__namespace.forwardRef((props, ref) => {
|
|
@@ -7,8 +7,8 @@ import * as React from 'react';
|
|
|
7
7
|
import { useMemo } from 'react';
|
|
8
8
|
import { createRecipeContext } from '../../utils/createRecipeContext.js';
|
|
9
9
|
|
|
10
|
-
const {
|
|
11
|
-
const NotificationBadge =
|
|
10
|
+
const { withContext, PropsProvider } = createRecipeContext(notificationBadge);
|
|
11
|
+
const NotificationBadge = withContext(
|
|
12
12
|
Primitive.span
|
|
13
13
|
);
|
|
14
14
|
const NotificationBadgePositioner = React.forwardRef((props, ref) => {
|
|
@@ -7,7 +7,6 @@ const reactionButton = require('@seed-design/css/recipes/reaction-button');
|
|
|
7
7
|
const reactToggle = require('@seed-design/react-toggle');
|
|
8
8
|
const clsx = require('clsx');
|
|
9
9
|
const React = require('react');
|
|
10
|
-
const createRecipeContext = require('../../utils/createRecipeContext.cjs');
|
|
11
10
|
const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
|
|
12
11
|
|
|
13
12
|
function _interopNamespaceDefault(e) {
|
|
@@ -29,12 +28,11 @@ function _interopNamespaceDefault(e) {
|
|
|
29
28
|
|
|
30
29
|
const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
31
30
|
|
|
32
|
-
const { ClassNameProvider } = createRecipeContext.createRecipeContext(reactionButton.reactionButton);
|
|
33
31
|
const ReactionButton = React__namespace.forwardRef(
|
|
34
32
|
({ size = "small", loading = false, className, ...otherProps }, ref) => {
|
|
35
33
|
const recipeClassName = reactionButton.reactionButton({ size });
|
|
36
34
|
const api = usePendingButton.usePendingButton({ loading, disabled: otherProps.disabled });
|
|
37
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
35
|
+
return /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
38
36
|
reactToggle.Toggle.Root,
|
|
39
37
|
{
|
|
40
38
|
ref,
|
|
@@ -42,7 +40,7 @@ const ReactionButton = React__namespace.forwardRef(
|
|
|
42
40
|
...api.stateProps,
|
|
43
41
|
...otherProps
|
|
44
42
|
}
|
|
45
|
-
) })
|
|
43
|
+
) });
|
|
46
44
|
}
|
|
47
45
|
);
|
|
48
46
|
ReactionButton.displayName = "ReactionButton";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReactionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ReactionButton/ReactionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ReactionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ReactionButton/ReactionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,mBACf,SAAQ,0BAA0B,EAChC,qBAAqB,EACrB,eAAe,CAAC,SAAS;CAAG;AAEhC,eAAO,MAAM,cAAc,+FAgB1B,CAAC"}
|
|
@@ -3,15 +3,13 @@ import { reactionButton } from '@seed-design/css/recipes/reaction-button';
|
|
|
3
3
|
import { Toggle } from '@seed-design/react-toggle';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import * as React from 'react';
|
|
6
|
-
import { createRecipeContext } from '../../utils/createRecipeContext.js';
|
|
7
6
|
import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
|
|
8
7
|
|
|
9
|
-
const { ClassNameProvider } = createRecipeContext(reactionButton);
|
|
10
8
|
const ReactionButton = React.forwardRef(
|
|
11
9
|
({ size = "small", loading = false, className, ...otherProps }, ref) => {
|
|
12
10
|
const recipeClassName = reactionButton({ size });
|
|
13
11
|
const api = usePendingButton({ loading, disabled: otherProps.disabled });
|
|
14
|
-
return /* @__PURE__ */ jsx(
|
|
12
|
+
return /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(
|
|
15
13
|
Toggle.Root,
|
|
16
14
|
{
|
|
17
15
|
ref,
|
|
@@ -19,7 +17,7 @@ const ReactionButton = React.forwardRef(
|
|
|
19
17
|
...api.stateProps,
|
|
20
18
|
...otherProps
|
|
21
19
|
}
|
|
22
|
-
) })
|
|
20
|
+
) });
|
|
23
21
|
}
|
|
24
22
|
);
|
|
25
23
|
ReactionButton.displayName = "ReactionButton";
|
|
@@ -13,10 +13,10 @@ const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs
|
|
|
13
13
|
const createWithStateProps = require('../../utils/createWithStateProps.cjs');
|
|
14
14
|
const Icon = require('../private/Icon.cjs');
|
|
15
15
|
|
|
16
|
-
const {
|
|
17
|
-
const {
|
|
16
|
+
const { withContext: withGroupContext } = createRecipeContext.createRecipeContext(selectBoxGroup.selectBoxGroup);
|
|
17
|
+
const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(selectBox.selectBox);
|
|
18
18
|
const withStateProps = createWithStateProps.createWithStateProps([reactCheckbox.useCheckboxContext]);
|
|
19
|
-
const CheckSelectBoxGroup =
|
|
19
|
+
const CheckSelectBoxGroup = withGroupContext(
|
|
20
20
|
React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref, role: "group", ...props }))
|
|
21
21
|
);
|
|
22
22
|
const CheckSelectBoxRoot = withProvider(
|
|
@@ -9,10 +9,10 @@ import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js'
|
|
|
9
9
|
import { createWithStateProps } from '../../utils/createWithStateProps.js';
|
|
10
10
|
import { InternalIcon } from '../private/Icon.js';
|
|
11
11
|
|
|
12
|
-
const {
|
|
13
|
-
const {
|
|
12
|
+
const { withContext: withGroupContext } = createRecipeContext(selectBoxGroup);
|
|
13
|
+
const { withContext, withProvider } = createSlotRecipeContext(selectBox);
|
|
14
14
|
const withStateProps = createWithStateProps([useCheckboxContext]);
|
|
15
|
-
const CheckSelectBoxGroup =
|
|
15
|
+
const CheckSelectBoxGroup = withGroupContext(
|
|
16
16
|
forwardRef((props, ref) => /* @__PURE__ */ jsx(Primitive.div, { ref, role: "group", ...props }))
|
|
17
17
|
);
|
|
18
18
|
const CheckSelectBoxRoot = withProvider(
|
|
@@ -11,10 +11,10 @@ const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs
|
|
|
11
11
|
const createWithStateProps = require('../../utils/createWithStateProps.cjs');
|
|
12
12
|
const Icon = require('../private/Icon.cjs');
|
|
13
13
|
|
|
14
|
-
const {
|
|
15
|
-
const {
|
|
14
|
+
const { withContext: withGroupContext } = createRecipeContext.createRecipeContext(selectBoxGroup.selectBoxGroup);
|
|
15
|
+
const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(selectBox.selectBox);
|
|
16
16
|
const withStateProps = createWithStateProps.createWithStateProps([reactRadioGroup.useRadioGroupItemContext]);
|
|
17
|
-
const RadioSelectBoxRoot =
|
|
17
|
+
const RadioSelectBoxRoot = withGroupContext(
|
|
18
18
|
reactRadioGroup.RadioGroup.Root
|
|
19
19
|
);
|
|
20
20
|
const RadioSelectBoxItem = withProvider(
|
|
@@ -7,10 +7,10 @@ import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js'
|
|
|
7
7
|
import { createWithStateProps } from '../../utils/createWithStateProps.js';
|
|
8
8
|
import { InternalIcon } from '../private/Icon.js';
|
|
9
9
|
|
|
10
|
-
const {
|
|
11
|
-
const {
|
|
10
|
+
const { withContext: withGroupContext } = createRecipeContext(selectBoxGroup);
|
|
11
|
+
const { withContext, withProvider } = createSlotRecipeContext(selectBox);
|
|
12
12
|
const withStateProps = createWithStateProps([useRadioGroupItemContext]);
|
|
13
|
-
const RadioSelectBoxRoot =
|
|
13
|
+
const RadioSelectBoxRoot = withGroupContext(
|
|
14
14
|
RadioGroup.Root
|
|
15
15
|
);
|
|
16
16
|
const RadioSelectBoxItem = withProvider(
|
|
@@ -7,7 +7,7 @@ const skeleton = require('@seed-design/css/recipes/skeleton');
|
|
|
7
7
|
const createRecipeContext = require('../../utils/createRecipeContext.cjs');
|
|
8
8
|
const styled = require('../../utils/styled.cjs');
|
|
9
9
|
|
|
10
|
-
const {
|
|
11
|
-
const Skeleton =
|
|
10
|
+
const { withContext } = createRecipeContext.createRecipeContext(skeleton.skeleton);
|
|
11
|
+
const Skeleton = withContext(styled.withStyleProps(reactPrimitive.Primitive.div));
|
|
12
12
|
|
|
13
13
|
exports.Skeleton = Skeleton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrE,MAAM,WAAW,aACf,SAAQ,oBAAoB,EAC1B,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,OAAO,CAAC,EACpC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;CAAG;AAE1D,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrE,MAAM,WAAW,aACf,SAAQ,oBAAoB,EAC1B,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,OAAO,CAAC,EACpC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;CAAG;AAE1D,eAAO,MAAM,QAAQ,sFAA4E,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { skeleton } from '@seed-design/css/recipes/skeleton';
|
|
|
3
3
|
import { createRecipeContext } from '../../utils/createRecipeContext.js';
|
|
4
4
|
import { withStyleProps } from '../../utils/styled.js';
|
|
5
5
|
|
|
6
|
-
const {
|
|
7
|
-
const Skeleton =
|
|
6
|
+
const { withContext } = createRecipeContext(skeleton);
|
|
7
|
+
const Skeleton = withContext(withStyleProps(Primitive.div));
|
|
8
8
|
|
|
9
9
|
export { Skeleton };
|
|
@@ -13,10 +13,10 @@ const createRecipeContext = require('../../utils/createRecipeContext.cjs');
|
|
|
13
13
|
const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
|
|
14
14
|
const Icon = require('../private/Icon.cjs');
|
|
15
15
|
|
|
16
|
-
const {
|
|
16
|
+
const { withContext: withRegionContext } = createRecipeContext.createRecipeContext(snackbarRegion.snackbarRegion);
|
|
17
17
|
const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(snackbar.snackbar);
|
|
18
18
|
const SnackbarRootProvider = reactSnackbar.Snackbar.RootProvider;
|
|
19
|
-
const SnackbarRegion =
|
|
19
|
+
const SnackbarRegion = withRegionContext(
|
|
20
20
|
reactSnackbar.Snackbar.Region
|
|
21
21
|
);
|
|
22
22
|
const SnackbarRoot = withProvider(
|
|
@@ -9,10 +9,10 @@ import { createRecipeContext } from '../../utils/createRecipeContext.js';
|
|
|
9
9
|
import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
|
|
10
10
|
import { InternalIcon } from '../private/Icon.js';
|
|
11
11
|
|
|
12
|
-
const {
|
|
12
|
+
const { withContext: withRegionContext } = createRecipeContext(snackbarRegion);
|
|
13
13
|
const { withProvider, withContext } = createSlotRecipeContext(snackbar);
|
|
14
14
|
const SnackbarRootProvider = Snackbar.RootProvider;
|
|
15
|
-
const SnackbarRegion =
|
|
15
|
+
const SnackbarRegion = withRegionContext(
|
|
16
16
|
Snackbar.Region
|
|
17
17
|
);
|
|
18
18
|
const SnackbarRoot = withProvider(
|
|
@@ -3,11 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
5
|
const jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
const reactToggle = require('@seed-design/react-toggle');
|
|
7
6
|
const toggleButton = require('@seed-design/css/recipes/toggle-button');
|
|
7
|
+
const reactToggle = require('@seed-design/react-toggle');
|
|
8
8
|
const clsx = require('clsx');
|
|
9
9
|
const React = require('react');
|
|
10
|
-
const createRecipeContext = require('../../utils/createRecipeContext.cjs');
|
|
11
10
|
const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
|
|
12
11
|
|
|
13
12
|
function _interopNamespaceDefault(e) {
|
|
@@ -29,12 +28,11 @@ function _interopNamespaceDefault(e) {
|
|
|
29
28
|
|
|
30
29
|
const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
31
30
|
|
|
32
|
-
const { ClassNameProvider } = createRecipeContext.createRecipeContext(toggleButton.toggleButton);
|
|
33
31
|
const ToggleButton = React__namespace.forwardRef(
|
|
34
32
|
({ variant = "brandSolid", size = "small", loading = false, className, ...otherProps }, ref) => {
|
|
35
33
|
const recipeClassName = toggleButton.toggleButton({ variant, size });
|
|
36
34
|
const api = usePendingButton.usePendingButton({ loading, disabled: otherProps.disabled });
|
|
37
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
35
|
+
return /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
38
36
|
reactToggle.Toggle.Root,
|
|
39
37
|
{
|
|
40
38
|
ref,
|
|
@@ -42,7 +40,7 @@ const ToggleButton = React__namespace.forwardRef(
|
|
|
42
40
|
...api.stateProps,
|
|
43
41
|
...otherProps
|
|
44
42
|
}
|
|
45
|
-
) })
|
|
43
|
+
) });
|
|
46
44
|
}
|
|
47
45
|
);
|
|
48
46
|
ToggleButton.displayName = "ToggleButton";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Toggle as TogglePrimitive } from '@seed-design/react-toggle';
|
|
2
1
|
import { ToggleButtonVariantProps } from '@seed-design/css/recipes/toggle-button';
|
|
2
|
+
import { Toggle as TogglePrimitive } from '@seed-design/react-toggle';
|
|
3
3
|
import { UsePendingButtonProps } from '../LoadingIndicator/usePendingButton';
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
export interface ToggleButtonProps extends ToggleButtonVariantProps, UsePendingButtonProps, TogglePrimitive.RootProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,qBAAqB,EACrB,eAAe,CAAC,SAAS;CAAG;AAEhC,eAAO,MAAM,YAAY,6FAgBxB,CAAC"}
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { Toggle } from '@seed-design/react-toggle';
|
|
3
2
|
import { toggleButton } from '@seed-design/css/recipes/toggle-button';
|
|
3
|
+
import { Toggle } from '@seed-design/react-toggle';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import * as React from 'react';
|
|
6
|
-
import { createRecipeContext } from '../../utils/createRecipeContext.js';
|
|
7
6
|
import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
|
|
8
7
|
|
|
9
|
-
const { ClassNameProvider } = createRecipeContext(toggleButton);
|
|
10
8
|
const ToggleButton = React.forwardRef(
|
|
11
9
|
({ variant = "brandSolid", size = "small", loading = false, className, ...otherProps }, ref) => {
|
|
12
10
|
const recipeClassName = toggleButton({ variant, size });
|
|
13
11
|
const api = usePendingButton({ loading, disabled: otherProps.disabled });
|
|
14
|
-
return /* @__PURE__ */ jsx(
|
|
12
|
+
return /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(
|
|
15
13
|
Toggle.Root,
|
|
16
14
|
{
|
|
17
15
|
ref,
|
|
@@ -19,7 +17,7 @@ const ToggleButton = React.forwardRef(
|
|
|
19
17
|
...api.stateProps,
|
|
20
18
|
...otherProps
|
|
21
19
|
}
|
|
22
|
-
) })
|
|
20
|
+
) });
|
|
23
21
|
}
|
|
24
22
|
);
|
|
25
23
|
ToggleButton.displayName = "ToggleButton";
|
package/lib/components/index.cjs
CHANGED
|
@@ -40,6 +40,8 @@ const InlineBanner = require('./InlineBanner/InlineBanner.cjs');
|
|
|
40
40
|
const InlineBanner_namespace = require('./InlineBanner/InlineBanner.namespace.cjs');
|
|
41
41
|
const LinkContent = require('./LinkContent/LinkContent.cjs');
|
|
42
42
|
const LoadingIndicator = require('./LoadingIndicator/LoadingIndicator.cjs');
|
|
43
|
+
const MannerTemp = require('./MannerTemp/MannerTemp.cjs');
|
|
44
|
+
const MannerTempEmote = require('./MannerTemp/MannerTempEmote.cjs');
|
|
43
45
|
const MannerTempBadge = require('./MannerTempBadge/MannerTempBadge.cjs');
|
|
44
46
|
const NotificationBadge = require('./NotificationBadge/NotificationBadge.cjs');
|
|
45
47
|
const ProgressCircle = require('./ProgressCircle/ProgressCircle.cjs');
|
|
@@ -186,6 +188,8 @@ exports.InlineBannerTitle = InlineBanner.InlineBannerTitle;
|
|
|
186
188
|
exports.InlineBanner = InlineBanner_namespace;
|
|
187
189
|
exports.LinkContent = LinkContent.LinkContent;
|
|
188
190
|
exports.LoadingIndicator = LoadingIndicator.LoadingIndicator;
|
|
191
|
+
exports.MannerTemp = MannerTemp.MannerTemp;
|
|
192
|
+
exports.MannerTempEmote = MannerTempEmote.MannerTempEmote;
|
|
189
193
|
exports.MannerTempBadge = MannerTempBadge.MannerTempBadge;
|
|
190
194
|
exports.NotificationBadge = NotificationBadge.NotificationBadge;
|
|
191
195
|
exports.NotificationBadgePositioner = NotificationBadge.NotificationBadgePositioner;
|
|
@@ -25,6 +25,7 @@ export * from './Inline';
|
|
|
25
25
|
export * from './InlineBanner';
|
|
26
26
|
export * from './LinkContent';
|
|
27
27
|
export * from './LoadingIndicator';
|
|
28
|
+
export * from './MannerTemp';
|
|
28
29
|
export * from './MannerTempBadge';
|
|
29
30
|
export * from './NotificationBadge';
|
|
30
31
|
export * from './ProgressCircle';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
|
package/lib/components/index.js
CHANGED
|
@@ -47,6 +47,8 @@ import * as InlineBanner_namespace from './InlineBanner/InlineBanner.namespace.j
|
|
|
47
47
|
export { InlineBanner_namespace as InlineBanner };
|
|
48
48
|
export { LinkContent } from './LinkContent/LinkContent.js';
|
|
49
49
|
export { LoadingIndicator } from './LoadingIndicator/LoadingIndicator.js';
|
|
50
|
+
export { MannerTemp } from './MannerTemp/MannerTemp.js';
|
|
51
|
+
export { MannerTempEmote } from './MannerTemp/MannerTempEmote.js';
|
|
50
52
|
export { MannerTempBadge } from './MannerTempBadge/MannerTempBadge.js';
|
|
51
53
|
export { NotificationBadge, NotificationBadgePositioner } from './NotificationBadge/NotificationBadge.js';
|
|
52
54
|
export { ProgressCircleRange, ProgressCircleRoot, ProgressCircleTrack } from './ProgressCircle/ProgressCircle.js';
|
|
@@ -546,6 +546,7 @@ export declare function useDismissible(props: UseDismissibleProps): {
|
|
|
546
546
|
onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
547
547
|
form?: string | undefined | undefined;
|
|
548
548
|
disabled?: boolean | undefined | undefined;
|
|
549
|
+
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
549
550
|
value?: string | number | readonly string[] | undefined;
|
|
550
551
|
formAction?: string | undefined;
|
|
551
552
|
formEncType?: string | undefined | undefined;
|
|
@@ -553,7 +554,6 @@ export declare function useDismissible(props: UseDismissibleProps): {
|
|
|
553
554
|
formNoValidate?: boolean | undefined | undefined;
|
|
554
555
|
formTarget?: string | undefined | undefined;
|
|
555
556
|
name?: string | undefined | undefined;
|
|
556
|
-
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
557
557
|
};
|
|
558
558
|
};
|
|
559
559
|
export declare const DismissibleProvider: React.Provider<{
|
|
@@ -1096,6 +1096,7 @@ export declare const DismissibleProvider: React.Provider<{
|
|
|
1096
1096
|
onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1097
1097
|
form?: string | undefined | undefined;
|
|
1098
1098
|
disabled?: boolean | undefined | undefined;
|
|
1099
|
+
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
1099
1100
|
value?: string | number | readonly string[] | undefined;
|
|
1100
1101
|
formAction?: string | undefined;
|
|
1101
1102
|
formEncType?: string | undefined | undefined;
|
|
@@ -1103,7 +1104,6 @@ export declare const DismissibleProvider: React.Provider<{
|
|
|
1103
1104
|
formNoValidate?: boolean | undefined | undefined;
|
|
1104
1105
|
formTarget?: string | undefined | undefined;
|
|
1105
1106
|
name?: string | undefined | undefined;
|
|
1106
|
-
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
1107
1107
|
};
|
|
1108
1108
|
} | null>;
|
|
1109
1109
|
export declare const useDismissibleContext: () => {
|
|
@@ -1646,6 +1646,7 @@ export declare const useDismissibleContext: () => {
|
|
|
1646
1646
|
onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1647
1647
|
form?: string | undefined | undefined;
|
|
1648
1648
|
disabled?: boolean | undefined | undefined;
|
|
1649
|
+
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
1649
1650
|
value?: string | number | readonly string[] | undefined;
|
|
1650
1651
|
formAction?: string | undefined;
|
|
1651
1652
|
formEncType?: string | undefined | undefined;
|
|
@@ -1653,7 +1654,6 @@ export declare const useDismissibleContext: () => {
|
|
|
1653
1654
|
formNoValidate?: boolean | undefined | undefined;
|
|
1654
1655
|
formTarget?: string | undefined | undefined;
|
|
1655
1656
|
name?: string | undefined | undefined;
|
|
1656
|
-
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
1657
1657
|
};
|
|
1658
1658
|
};
|
|
1659
1659
|
export interface DismissibleRootProps extends PrimitiveProps, UseDismissibleProps, React.HTMLAttributes<HTMLDivElement> {
|
package/lib/index.cjs
CHANGED
|
@@ -40,6 +40,8 @@ const InlineBanner = require('./components/InlineBanner/InlineBanner.cjs');
|
|
|
40
40
|
const InlineBanner_namespace = require('./components/InlineBanner/InlineBanner.namespace.cjs');
|
|
41
41
|
const LinkContent = require('./components/LinkContent/LinkContent.cjs');
|
|
42
42
|
const LoadingIndicator = require('./components/LoadingIndicator/LoadingIndicator.cjs');
|
|
43
|
+
const MannerTemp = require('./components/MannerTemp/MannerTemp.cjs');
|
|
44
|
+
const MannerTempEmote = require('./components/MannerTemp/MannerTempEmote.cjs');
|
|
43
45
|
const MannerTempBadge = require('./components/MannerTempBadge/MannerTempBadge.cjs');
|
|
44
46
|
const NotificationBadge = require('./components/NotificationBadge/NotificationBadge.cjs');
|
|
45
47
|
const ProgressCircle = require('./components/ProgressCircle/ProgressCircle.cjs');
|
|
@@ -186,6 +188,8 @@ exports.InlineBannerTitle = InlineBanner.InlineBannerTitle;
|
|
|
186
188
|
exports.InlineBanner = InlineBanner_namespace;
|
|
187
189
|
exports.LinkContent = LinkContent.LinkContent;
|
|
188
190
|
exports.LoadingIndicator = LoadingIndicator.LoadingIndicator;
|
|
191
|
+
exports.MannerTemp = MannerTemp.MannerTemp;
|
|
192
|
+
exports.MannerTempEmote = MannerTempEmote.MannerTempEmote;
|
|
189
193
|
exports.MannerTempBadge = MannerTempBadge.MannerTempBadge;
|
|
190
194
|
exports.NotificationBadge = NotificationBadge.NotificationBadge;
|
|
191
195
|
exports.NotificationBadgePositioner = NotificationBadge.NotificationBadgePositioner;
|
package/lib/index.js
CHANGED
|
@@ -47,6 +47,8 @@ import * as InlineBanner_namespace from './components/InlineBanner/InlineBanner.
|
|
|
47
47
|
export { InlineBanner_namespace as InlineBanner };
|
|
48
48
|
export { LinkContent } from './components/LinkContent/LinkContent.js';
|
|
49
49
|
export { LoadingIndicator } from './components/LoadingIndicator/LoadingIndicator.js';
|
|
50
|
+
export { MannerTemp } from './components/MannerTemp/MannerTemp.js';
|
|
51
|
+
export { MannerTempEmote } from './components/MannerTemp/MannerTempEmote.js';
|
|
50
52
|
export { MannerTempBadge } from './components/MannerTempBadge/MannerTempBadge.js';
|
|
51
53
|
export { NotificationBadge, NotificationBadgePositioner } from './components/NotificationBadge/NotificationBadge.js';
|
|
52
54
|
export { ProgressCircleRange, ProgressCircleRoot, ProgressCircleTrack } from './components/ProgressCircle/ProgressCircle.js';
|
|
@@ -7,41 +7,14 @@ const clsx = require('clsx');
|
|
|
7
7
|
const React = require('react');
|
|
8
8
|
|
|
9
9
|
function createRecipeContext(recipe) {
|
|
10
|
-
const ClassNameContext = React.createContext(null);
|
|
11
10
|
const PropsContext = React.createContext(null);
|
|
12
|
-
const ClassNameProvider = ({
|
|
13
|
-
children,
|
|
14
|
-
value
|
|
15
|
-
}) => {
|
|
16
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ClassNameContext.Provider, { value, children });
|
|
17
|
-
};
|
|
18
11
|
const PropsProvider = ({ children, value }) => {
|
|
19
12
|
return /* @__PURE__ */ jsxRuntime.jsx(PropsContext.Provider, { value, children });
|
|
20
13
|
};
|
|
21
|
-
function useClassName() {
|
|
22
|
-
const context = React.useContext(ClassNameContext);
|
|
23
|
-
if (context === null) {
|
|
24
|
-
throw new Error(
|
|
25
|
-
"useClassName must be used within a ClassNameProvider. Did you forget to wrap your component in a ClassNameProvider?"
|
|
26
|
-
);
|
|
27
|
-
}
|
|
28
|
-
return context;
|
|
29
|
-
}
|
|
30
14
|
function useProps() {
|
|
31
15
|
return React.useContext(PropsContext);
|
|
32
16
|
}
|
|
33
|
-
const
|
|
34
|
-
const { defaultProps } = options ?? {};
|
|
35
|
-
const StyledComponent = (innerProps) => {
|
|
36
|
-
const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
|
|
37
|
-
const [variantProps, otherProps] = recipe.splitVariantProps(props);
|
|
38
|
-
const className = recipe(variantProps);
|
|
39
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ClassNameProvider, { value: className, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...otherProps, className: clsx(className, props.className) }) });
|
|
40
|
-
};
|
|
41
|
-
StyledComponent.displayName = Component.displayName || Component.name;
|
|
42
|
-
return StyledComponent;
|
|
43
|
-
};
|
|
44
|
-
const withProvider = (Component, options) => {
|
|
17
|
+
const withContext = (Component, options) => {
|
|
45
18
|
const { defaultProps } = options ?? {};
|
|
46
19
|
const StyledComponent = React.forwardRef((innerProps, ref) => {
|
|
47
20
|
const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
|
|
@@ -52,22 +25,14 @@ function createRecipeContext(recipe) {
|
|
|
52
25
|
StyledComponent.displayName = Component.displayName || Component.name;
|
|
53
26
|
return StyledComponent;
|
|
54
27
|
};
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...props, className: clsx(className, props.className) });
|
|
59
|
-
});
|
|
60
|
-
StyledComponent.displayName = Component.displayName || Component.name;
|
|
61
|
-
return StyledComponent;
|
|
62
|
-
};
|
|
28
|
+
function withPropsProvider() {
|
|
29
|
+
return PropsProvider;
|
|
30
|
+
}
|
|
63
31
|
return {
|
|
64
|
-
ClassNameProvider,
|
|
65
32
|
PropsProvider,
|
|
66
|
-
useClassName,
|
|
67
33
|
useProps,
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
withContext
|
|
34
|
+
withContext,
|
|
35
|
+
withPropsProvider
|
|
71
36
|
};
|
|
72
37
|
}
|
|
73
38
|
|
|
@@ -1,24 +1,16 @@
|
|
|
1
|
-
type Recipe<Props extends Record<string, string | boolean | undefined
|
|
1
|
+
type Recipe<Props extends Record<string, string | boolean | undefined>> = ((props?: Props) => string) & {
|
|
2
2
|
splitVariantProps: <T extends Props>(props: T) => [Props, Omit<T, keyof Props>];
|
|
3
3
|
};
|
|
4
|
-
export declare function createRecipeContext<Props extends Record<string, string | boolean | undefined
|
|
5
|
-
ClassNameProvider: ({ children, value, }: {
|
|
6
|
-
children: React.ReactNode;
|
|
7
|
-
value: ClassName;
|
|
8
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare function createRecipeContext<Props extends Record<string, string | boolean | undefined>>(recipe: Recipe<Props>): {
|
|
9
5
|
PropsProvider: ({ children, value }: {
|
|
10
6
|
children: React.ReactNode;
|
|
11
7
|
value: Props;
|
|
12
8
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
useClassName: () => ClassName;
|
|
14
9
|
useProps: () => Props | null;
|
|
15
|
-
|
|
16
|
-
defaultProps?: Partial<P>;
|
|
17
|
-
}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P>>;
|
|
18
|
-
withProvider: <T, P>(Component: React.ElementType<any>, options?: {
|
|
10
|
+
withContext: <T, P>(Component: React.ElementType<any>, options?: {
|
|
19
11
|
defaultProps?: Partial<P>;
|
|
20
12
|
}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
|
|
21
|
-
|
|
13
|
+
withPropsProvider: <P>() => React.Provider<Partial<P>>;
|
|
22
14
|
};
|
|
23
15
|
export {};
|
|
24
16
|
//# sourceMappingURL=createRecipeContext.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createRecipeContext.d.ts","sourceRoot":"","sources":["../../src/utils/createRecipeContext.tsx"],"names":[],"mappings":"AAGA,KAAK,MAAM,
|
|
1
|
+
{"version":3,"file":"createRecipeContext.d.ts","sourceRoot":"","sources":["../../src/utils/createRecipeContext.tsx"],"names":[],"mappings":"AAGA,KAAK,MAAM,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,CACzE,KAAK,CAAC,EAAE,KAAK,KACV,MAAM,CAAC,GAAG;IACb,iBAAiB,EAAE,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC;CACjF,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC5F,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC;yCAIuB;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE;;kBAQlE,CAAC,EAAE,CAAC,aACZ,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,YACvB;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;wBAgB1D,CAAC,OAAK,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;EAU5D"}
|
|
@@ -3,41 +3,14 @@ import clsx from 'clsx';
|
|
|
3
3
|
import { createContext, forwardRef, useContext } from 'react';
|
|
4
4
|
|
|
5
5
|
function createRecipeContext(recipe) {
|
|
6
|
-
const ClassNameContext = createContext(null);
|
|
7
6
|
const PropsContext = createContext(null);
|
|
8
|
-
const ClassNameProvider = ({
|
|
9
|
-
children,
|
|
10
|
-
value
|
|
11
|
-
}) => {
|
|
12
|
-
return /* @__PURE__ */ jsx(ClassNameContext.Provider, { value, children });
|
|
13
|
-
};
|
|
14
7
|
const PropsProvider = ({ children, value }) => {
|
|
15
8
|
return /* @__PURE__ */ jsx(PropsContext.Provider, { value, children });
|
|
16
9
|
};
|
|
17
|
-
function useClassName() {
|
|
18
|
-
const context = useContext(ClassNameContext);
|
|
19
|
-
if (context === null) {
|
|
20
|
-
throw new Error(
|
|
21
|
-
"useClassName must be used within a ClassNameProvider. Did you forget to wrap your component in a ClassNameProvider?"
|
|
22
|
-
);
|
|
23
|
-
}
|
|
24
|
-
return context;
|
|
25
|
-
}
|
|
26
10
|
function useProps() {
|
|
27
11
|
return useContext(PropsContext);
|
|
28
12
|
}
|
|
29
|
-
const
|
|
30
|
-
const { defaultProps } = options ?? {};
|
|
31
|
-
const StyledComponent = (innerProps) => {
|
|
32
|
-
const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
|
|
33
|
-
const [variantProps, otherProps] = recipe.splitVariantProps(props);
|
|
34
|
-
const className = recipe(variantProps);
|
|
35
|
-
return /* @__PURE__ */ jsx(ClassNameProvider, { value: className, children: /* @__PURE__ */ jsx(Component, { ...otherProps, className: clsx(className, props.className) }) });
|
|
36
|
-
};
|
|
37
|
-
StyledComponent.displayName = Component.displayName || Component.name;
|
|
38
|
-
return StyledComponent;
|
|
39
|
-
};
|
|
40
|
-
const withProvider = (Component, options) => {
|
|
13
|
+
const withContext = (Component, options) => {
|
|
41
14
|
const { defaultProps } = options ?? {};
|
|
42
15
|
const StyledComponent = forwardRef((innerProps, ref) => {
|
|
43
16
|
const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
|
|
@@ -48,22 +21,14 @@ function createRecipeContext(recipe) {
|
|
|
48
21
|
StyledComponent.displayName = Component.displayName || Component.name;
|
|
49
22
|
return StyledComponent;
|
|
50
23
|
};
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
return /* @__PURE__ */ jsx(Component, { ref, ...props, className: clsx(className, props.className) });
|
|
55
|
-
});
|
|
56
|
-
StyledComponent.displayName = Component.displayName || Component.name;
|
|
57
|
-
return StyledComponent;
|
|
58
|
-
};
|
|
24
|
+
function withPropsProvider() {
|
|
25
|
+
return PropsProvider;
|
|
26
|
+
}
|
|
59
27
|
return {
|
|
60
|
-
ClassNameProvider,
|
|
61
28
|
PropsProvider,
|
|
62
|
-
useClassName,
|
|
63
29
|
useProps,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
withContext
|
|
30
|
+
withContext,
|
|
31
|
+
withPropsProvider
|
|
67
32
|
};
|
|
68
33
|
}
|
|
69
34
|
|