@huin-core/react-slot 1.0.2 → 1.0.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.mts +13 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +118 -0
- package/dist/index.js.map +7 -0
- package/dist/index.mjs +85 -0
- package/dist/index.mjs.map +7 -0
- package/package.json +3 -2
package/dist/index.d.mts
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
2
|
+
import * as React from 'react';
|
3
|
+
|
4
|
+
interface SlotProps extends React.HTMLAttributes<HTMLElement> {
|
5
|
+
children?: React.ReactNode;
|
6
|
+
}
|
7
|
+
declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
|
8
|
+
declare const Slottable: ({ children }: {
|
9
|
+
children: React.ReactNode;
|
10
|
+
}) => react_jsx_runtime.JSX.Element;
|
11
|
+
declare const Root: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
|
12
|
+
|
13
|
+
export { Root, Slot, type SlotProps, Slottable };
|
package/dist/index.d.ts
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
2
|
+
import * as React from 'react';
|
3
|
+
|
4
|
+
interface SlotProps extends React.HTMLAttributes<HTMLElement> {
|
5
|
+
children?: React.ReactNode;
|
6
|
+
}
|
7
|
+
declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
|
8
|
+
declare const Slottable: ({ children }: {
|
9
|
+
children: React.ReactNode;
|
10
|
+
}) => react_jsx_runtime.JSX.Element;
|
11
|
+
declare const Root: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
|
12
|
+
|
13
|
+
export { Root, Slot, type SlotProps, Slottable };
|
package/dist/index.js
ADDED
@@ -0,0 +1,118 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __create = Object.create;
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
8
|
+
var __export = (target, all) => {
|
9
|
+
for (var name in all)
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
11
|
+
};
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
14
|
+
for (let key of __getOwnPropNames(from))
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
17
|
+
}
|
18
|
+
return to;
|
19
|
+
};
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
26
|
+
mod
|
27
|
+
));
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
29
|
+
|
30
|
+
// packages/react/slot/src/index.ts
|
31
|
+
var src_exports = {};
|
32
|
+
__export(src_exports, {
|
33
|
+
Root: () => Root,
|
34
|
+
Slot: () => Slot,
|
35
|
+
Slottable: () => Slottable
|
36
|
+
});
|
37
|
+
module.exports = __toCommonJS(src_exports);
|
38
|
+
|
39
|
+
// packages/react/slot/src/Slot.tsx
|
40
|
+
var React = __toESM(require("react"));
|
41
|
+
var import_react_compose_refs = require("@huin-core/react-compose-refs");
|
42
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
43
|
+
var Slot = React.forwardRef((props, forwardedRef) => {
|
44
|
+
const { children, ...slotProps } = props;
|
45
|
+
const childrenArray = React.Children.toArray(children);
|
46
|
+
const slottable = childrenArray.find(isSlottable);
|
47
|
+
if (slottable) {
|
48
|
+
const newElement = slottable.props.children;
|
49
|
+
const newChildren = childrenArray.map((child) => {
|
50
|
+
if (child === slottable) {
|
51
|
+
if (React.Children.count(newElement) > 1) return React.Children.only(null);
|
52
|
+
return React.isValidElement(newElement) ? newElement.props.children : null;
|
53
|
+
} else {
|
54
|
+
return child;
|
55
|
+
}
|
56
|
+
});
|
57
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
|
58
|
+
}
|
59
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children });
|
60
|
+
});
|
61
|
+
Slot.displayName = "Slot";
|
62
|
+
var SlotClone = React.forwardRef((props, forwardedRef) => {
|
63
|
+
const { children, ...slotProps } = props;
|
64
|
+
if (React.isValidElement(children)) {
|
65
|
+
const childrenRef = getElementRef(children);
|
66
|
+
return React.cloneElement(children, {
|
67
|
+
...mergeProps(slotProps, children.props),
|
68
|
+
// @ts-ignore
|
69
|
+
ref: forwardedRef ? (0, import_react_compose_refs.composeRefs)(forwardedRef, childrenRef) : childrenRef
|
70
|
+
});
|
71
|
+
}
|
72
|
+
return React.Children.count(children) > 1 ? React.Children.only(null) : null;
|
73
|
+
});
|
74
|
+
SlotClone.displayName = "SlotClone";
|
75
|
+
var Slottable = ({ children }) => {
|
76
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
|
77
|
+
};
|
78
|
+
function isSlottable(child) {
|
79
|
+
return React.isValidElement(child) && child.type === Slottable;
|
80
|
+
}
|
81
|
+
function mergeProps(slotProps, childProps) {
|
82
|
+
const overrideProps = { ...childProps };
|
83
|
+
for (const propName in childProps) {
|
84
|
+
const slotPropValue = slotProps[propName];
|
85
|
+
const childPropValue = childProps[propName];
|
86
|
+
const isHandler = /^on[A-Z]/.test(propName);
|
87
|
+
if (isHandler) {
|
88
|
+
if (slotPropValue && childPropValue) {
|
89
|
+
overrideProps[propName] = (...args) => {
|
90
|
+
childPropValue(...args);
|
91
|
+
slotPropValue(...args);
|
92
|
+
};
|
93
|
+
} else if (slotPropValue) {
|
94
|
+
overrideProps[propName] = slotPropValue;
|
95
|
+
}
|
96
|
+
} else if (propName === "style") {
|
97
|
+
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
|
98
|
+
} else if (propName === "className") {
|
99
|
+
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
|
100
|
+
}
|
101
|
+
}
|
102
|
+
return { ...slotProps, ...overrideProps };
|
103
|
+
}
|
104
|
+
function getElementRef(element) {
|
105
|
+
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
106
|
+
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
107
|
+
if (mayWarn) {
|
108
|
+
return element.ref;
|
109
|
+
}
|
110
|
+
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
111
|
+
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
112
|
+
if (mayWarn) {
|
113
|
+
return element.props.ref;
|
114
|
+
}
|
115
|
+
return element.props.ref || element.ref;
|
116
|
+
}
|
117
|
+
var Root = Slot;
|
118
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/index.ts", "../src/Slot.tsx"],
|
4
|
+
"sourcesContent": ["export {\n Slot,\n Slottable,\n //\n Root,\n} from './Slot';\nexport type { SlotProps } from './Slot';\n", "import * as React from 'react';\nimport { composeRefs } from '@huin-core/react-compose-refs';\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotProps extends React.HTMLAttributes<HTMLElement> {\n children?: React.ReactNode;\n}\n\nconst Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n const { children, ...slotProps } = props;\n const childrenArray = React.Children.toArray(children);\n const slottable = childrenArray.find(isSlottable);\n\n if (slottable) {\n // the new element to render is the one passed as a child of `Slottable`\n const newElement = slottable.props.children as React.ReactNode;\n\n const newChildren = childrenArray.map((child) => {\n if (child === slottable) {\n // because the new element will be the one rendered, we are only interested\n // in grabbing its children (`newElement.props.children`)\n if (React.Children.count(newElement) > 1) return React.Children.only(null);\n return React.isValidElement(newElement)\n ? (newElement.props.children as React.ReactNode)\n : null;\n } else {\n return child;\n }\n });\n\n return (\n <SlotClone {...slotProps} ref={forwardedRef}>\n {React.isValidElement(newElement)\n ? React.cloneElement(newElement, undefined, newChildren)\n : null}\n </SlotClone>\n );\n }\n\n return (\n <SlotClone {...slotProps} ref={forwardedRef}>\n {children}\n </SlotClone>\n );\n});\n\nSlot.displayName = 'Slot';\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n children: React.ReactNode;\n}\n\nconst SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n const { children, ...slotProps } = props;\n\n if (React.isValidElement(children)) {\n const childrenRef = getElementRef(children);\n return React.cloneElement(children, {\n ...mergeProps(slotProps, children.props),\n // @ts-ignore\n ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef,\n });\n }\n\n return React.Children.count(children) > 1 ? React.Children.only(null) : null;\n});\n\nSlotClone.displayName = 'SlotClone';\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slottable = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>;\n};\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>;\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement {\n return React.isValidElement(child) && child.type === Slottable;\n}\n\nfunction mergeProps(slotProps: AnyProps, childProps: AnyProps) {\n // all child props should override\n const overrideProps = { ...childProps };\n\n for (const propName in childProps) {\n const slotPropValue = slotProps[propName];\n const childPropValue = childProps[propName];\n\n const isHandler = /^on[A-Z]/.test(propName);\n if (isHandler) {\n // if the handler exists on both, we compose them\n if (slotPropValue && childPropValue) {\n overrideProps[propName] = (...args: unknown[]) => {\n childPropValue(...args);\n slotPropValue(...args);\n };\n }\n // but if it exists only on the slot, we use only this one\n else if (slotPropValue) {\n overrideProps[propName] = slotPropValue;\n }\n }\n // if it's `style`, we merge them\n else if (propName === 'style') {\n overrideProps[propName] = { ...slotPropValue, ...childPropValue };\n } else if (propName === 'className') {\n overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');\n }\n }\n\n return { ...slotProps, ...overrideProps };\n}\n\n// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`\n// After React 19 accessing `element.ref` does the opposite.\n// https://github.com/facebook/react/pull/28348\n//\n// Access the ref using the method that doesn't yield a warning.\nfunction getElementRef(element: React.ReactElement) {\n // React <=18 in DEV\n let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get;\n let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;\n if (mayWarn) {\n return (element as any).ref;\n }\n\n // React 19 in DEV\n getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get;\n mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;\n if (mayWarn) {\n return element.props.ref;\n }\n\n // Not DEV\n return element.props.ref || (element as any).ref;\n}\n\nconst Root = Slot;\n\nexport {\n Slot,\n Slottable,\n //\n Root,\n};\nexport type { SlotProps };\n"],
|
5
|
+
"mappings": "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",
|
6
|
+
"names": []
|
7
|
+
}
|
package/dist/index.mjs
ADDED
@@ -0,0 +1,85 @@
|
|
1
|
+
// packages/react/slot/src/Slot.tsx
|
2
|
+
import * as React from "react";
|
3
|
+
import { composeRefs } from "@huin-core/react-compose-refs";
|
4
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
5
|
+
var Slot = React.forwardRef((props, forwardedRef) => {
|
6
|
+
const { children, ...slotProps } = props;
|
7
|
+
const childrenArray = React.Children.toArray(children);
|
8
|
+
const slottable = childrenArray.find(isSlottable);
|
9
|
+
if (slottable) {
|
10
|
+
const newElement = slottable.props.children;
|
11
|
+
const newChildren = childrenArray.map((child) => {
|
12
|
+
if (child === slottable) {
|
13
|
+
if (React.Children.count(newElement) > 1) return React.Children.only(null);
|
14
|
+
return React.isValidElement(newElement) ? newElement.props.children : null;
|
15
|
+
} else {
|
16
|
+
return child;
|
17
|
+
}
|
18
|
+
});
|
19
|
+
return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
|
20
|
+
}
|
21
|
+
return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
|
22
|
+
});
|
23
|
+
Slot.displayName = "Slot";
|
24
|
+
var SlotClone = React.forwardRef((props, forwardedRef) => {
|
25
|
+
const { children, ...slotProps } = props;
|
26
|
+
if (React.isValidElement(children)) {
|
27
|
+
const childrenRef = getElementRef(children);
|
28
|
+
return React.cloneElement(children, {
|
29
|
+
...mergeProps(slotProps, children.props),
|
30
|
+
// @ts-ignore
|
31
|
+
ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
|
32
|
+
});
|
33
|
+
}
|
34
|
+
return React.Children.count(children) > 1 ? React.Children.only(null) : null;
|
35
|
+
});
|
36
|
+
SlotClone.displayName = "SlotClone";
|
37
|
+
var Slottable = ({ children }) => {
|
38
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
39
|
+
};
|
40
|
+
function isSlottable(child) {
|
41
|
+
return React.isValidElement(child) && child.type === Slottable;
|
42
|
+
}
|
43
|
+
function mergeProps(slotProps, childProps) {
|
44
|
+
const overrideProps = { ...childProps };
|
45
|
+
for (const propName in childProps) {
|
46
|
+
const slotPropValue = slotProps[propName];
|
47
|
+
const childPropValue = childProps[propName];
|
48
|
+
const isHandler = /^on[A-Z]/.test(propName);
|
49
|
+
if (isHandler) {
|
50
|
+
if (slotPropValue && childPropValue) {
|
51
|
+
overrideProps[propName] = (...args) => {
|
52
|
+
childPropValue(...args);
|
53
|
+
slotPropValue(...args);
|
54
|
+
};
|
55
|
+
} else if (slotPropValue) {
|
56
|
+
overrideProps[propName] = slotPropValue;
|
57
|
+
}
|
58
|
+
} else if (propName === "style") {
|
59
|
+
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
|
60
|
+
} else if (propName === "className") {
|
61
|
+
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
|
62
|
+
}
|
63
|
+
}
|
64
|
+
return { ...slotProps, ...overrideProps };
|
65
|
+
}
|
66
|
+
function getElementRef(element) {
|
67
|
+
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
68
|
+
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
69
|
+
if (mayWarn) {
|
70
|
+
return element.ref;
|
71
|
+
}
|
72
|
+
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
73
|
+
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
74
|
+
if (mayWarn) {
|
75
|
+
return element.props.ref;
|
76
|
+
}
|
77
|
+
return element.props.ref || element.ref;
|
78
|
+
}
|
79
|
+
var Root = Slot;
|
80
|
+
export {
|
81
|
+
Root,
|
82
|
+
Slot,
|
83
|
+
Slottable
|
84
|
+
};
|
85
|
+
//# sourceMappingURL=index.mjs.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/Slot.tsx"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport { composeRefs } from '@huin-core/react-compose-refs';\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotProps extends React.HTMLAttributes<HTMLElement> {\n children?: React.ReactNode;\n}\n\nconst Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n const { children, ...slotProps } = props;\n const childrenArray = React.Children.toArray(children);\n const slottable = childrenArray.find(isSlottable);\n\n if (slottable) {\n // the new element to render is the one passed as a child of `Slottable`\n const newElement = slottable.props.children as React.ReactNode;\n\n const newChildren = childrenArray.map((child) => {\n if (child === slottable) {\n // because the new element will be the one rendered, we are only interested\n // in grabbing its children (`newElement.props.children`)\n if (React.Children.count(newElement) > 1) return React.Children.only(null);\n return React.isValidElement(newElement)\n ? (newElement.props.children as React.ReactNode)\n : null;\n } else {\n return child;\n }\n });\n\n return (\n <SlotClone {...slotProps} ref={forwardedRef}>\n {React.isValidElement(newElement)\n ? React.cloneElement(newElement, undefined, newChildren)\n : null}\n </SlotClone>\n );\n }\n\n return (\n <SlotClone {...slotProps} ref={forwardedRef}>\n {children}\n </SlotClone>\n );\n});\n\nSlot.displayName = 'Slot';\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n children: React.ReactNode;\n}\n\nconst SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n const { children, ...slotProps } = props;\n\n if (React.isValidElement(children)) {\n const childrenRef = getElementRef(children);\n return React.cloneElement(children, {\n ...mergeProps(slotProps, children.props),\n // @ts-ignore\n ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef,\n });\n }\n\n return React.Children.count(children) > 1 ? React.Children.only(null) : null;\n});\n\nSlotClone.displayName = 'SlotClone';\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slottable = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>;\n};\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>;\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement {\n return React.isValidElement(child) && child.type === Slottable;\n}\n\nfunction mergeProps(slotProps: AnyProps, childProps: AnyProps) {\n // all child props should override\n const overrideProps = { ...childProps };\n\n for (const propName in childProps) {\n const slotPropValue = slotProps[propName];\n const childPropValue = childProps[propName];\n\n const isHandler = /^on[A-Z]/.test(propName);\n if (isHandler) {\n // if the handler exists on both, we compose them\n if (slotPropValue && childPropValue) {\n overrideProps[propName] = (...args: unknown[]) => {\n childPropValue(...args);\n slotPropValue(...args);\n };\n }\n // but if it exists only on the slot, we use only this one\n else if (slotPropValue) {\n overrideProps[propName] = slotPropValue;\n }\n }\n // if it's `style`, we merge them\n else if (propName === 'style') {\n overrideProps[propName] = { ...slotPropValue, ...childPropValue };\n } else if (propName === 'className') {\n overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');\n }\n }\n\n return { ...slotProps, ...overrideProps };\n}\n\n// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`\n// After React 19 accessing `element.ref` does the opposite.\n// https://github.com/facebook/react/pull/28348\n//\n// Access the ref using the method that doesn't yield a warning.\nfunction getElementRef(element: React.ReactElement) {\n // React <=18 in DEV\n let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get;\n let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;\n if (mayWarn) {\n return (element as any).ref;\n }\n\n // React 19 in DEV\n getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get;\n mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;\n if (mayWarn) {\n return element.props.ref;\n }\n\n // Not DEV\n return element.props.ref || (element as any).ref;\n}\n\nconst Root = Slot;\n\nexport {\n Slot,\n Slottable,\n //\n Root,\n};\nexport type { SlotProps };\n"],
|
5
|
+
"mappings": ";AAAA,YAAY,WAAW;AACvB,SAAS,mBAAmB;AAiCtB,SA+CG,UA/CH;AAvBN,IAAM,OAAa,iBAAmC,CAAC,OAAO,iBAAiB;AAC7E,QAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AACnC,QAAM,gBAAsB,eAAS,QAAQ,QAAQ;AACrD,QAAM,YAAY,cAAc,KAAK,WAAW;AAEhD,MAAI,WAAW;AAEb,UAAM,aAAa,UAAU,MAAM;AAEnC,UAAM,cAAc,cAAc,IAAI,CAAC,UAAU;AAC/C,UAAI,UAAU,WAAW;AAGvB,YAAU,eAAS,MAAM,UAAU,IAAI,EAAG,QAAa,eAAS,KAAK,IAAI;AACzE,eAAa,qBAAe,UAAU,IACjC,WAAW,MAAM,WAClB;AAAA,MACN,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAED,WACE,oBAAC,aAAW,GAAG,WAAW,KAAK,cAC5B,UAAM,qBAAe,UAAU,IACtB,mBAAa,YAAY,QAAW,WAAW,IACrD,MACN;AAAA,EAEJ;AAEA,SACE,oBAAC,aAAW,GAAG,WAAW,KAAK,cAC5B,UACH;AAEJ,CAAC;AAED,KAAK,cAAc;AAUnB,IAAM,YAAkB,iBAAgC,CAAC,OAAO,iBAAiB;AAC/E,QAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AAEnC,MAAU,qBAAe,QAAQ,GAAG;AAClC,UAAM,cAAc,cAAc,QAAQ;AAC1C,WAAa,mBAAa,UAAU;AAAA,MAClC,GAAG,WAAW,WAAW,SAAS,KAAK;AAAA;AAAA,MAEvC,KAAK,eAAe,YAAY,cAAc,WAAW,IAAI;AAAA,IAC/D,CAAC;AAAA,EACH;AAEA,SAAa,eAAS,MAAM,QAAQ,IAAI,IAAU,eAAS,KAAK,IAAI,IAAI;AAC1E,CAAC;AAED,UAAU,cAAc;AAMxB,IAAM,YAAY,CAAC,EAAE,SAAS,MAAqC;AACjE,SAAO,gCAAG,UAAS;AACrB;AAMA,SAAS,YAAY,OAAqD;AACxE,SAAa,qBAAe,KAAK,KAAK,MAAM,SAAS;AACvD;AAEA,SAAS,WAAW,WAAqB,YAAsB;AAE7D,QAAM,gBAAgB,EAAE,GAAG,WAAW;AAEtC,aAAW,YAAY,YAAY;AACjC,UAAM,gBAAgB,UAAU,QAAQ;AACxC,UAAM,iBAAiB,WAAW,QAAQ;AAE1C,UAAM,YAAY,WAAW,KAAK,QAAQ;AAC1C,QAAI,WAAW;AAEb,UAAI,iBAAiB,gBAAgB;AACnC,sBAAc,QAAQ,IAAI,IAAI,SAAoB;AAChD,yBAAe,GAAG,IAAI;AACtB,wBAAc,GAAG,IAAI;AAAA,QACvB;AAAA,MACF,WAES,eAAe;AACtB,sBAAc,QAAQ,IAAI;AAAA,MAC5B;AAAA,IACF,WAES,aAAa,SAAS;AAC7B,oBAAc,QAAQ,IAAI,EAAE,GAAG,eAAe,GAAG,eAAe;AAAA,IAClE,WAAW,aAAa,aAAa;AACnC,oBAAc,QAAQ,IAAI,CAAC,eAAe,cAAc,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IACpF;AAAA,EACF;AAEA,SAAO,EAAE,GAAG,WAAW,GAAG,cAAc;AAC1C;AAOA,SAAS,cAAc,SAA6B;AAElD,MAAI,SAAS,OAAO,yBAAyB,QAAQ,OAAO,KAAK,GAAG;AACpE,MAAI,UAAU,UAAU,oBAAoB,UAAU,OAAO;AAC7D,MAAI,SAAS;AACX,WAAQ,QAAgB;AAAA,EAC1B;AAGA,WAAS,OAAO,yBAAyB,SAAS,KAAK,GAAG;AAC1D,YAAU,UAAU,oBAAoB,UAAU,OAAO;AACzD,MAAI,SAAS;AACX,WAAO,QAAQ,MAAM;AAAA,EACvB;AAGA,SAAO,QAAQ,MAAM,OAAQ,QAAgB;AAC/C;AAEA,IAAM,OAAO;",
|
6
|
+
"names": []
|
7
|
+
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@huin-core/react-slot",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.4",
|
4
4
|
"license": "MIT",
|
5
5
|
"exports": {
|
6
6
|
".": {
|
@@ -20,7 +20,8 @@
|
|
20
20
|
"types": "./dist/index.d.ts",
|
21
21
|
"files": [
|
22
22
|
"dist",
|
23
|
-
"README.md"
|
23
|
+
"README.md",
|
24
|
+
"package.json"
|
24
25
|
],
|
25
26
|
"sideEffects": false,
|
26
27
|
"scripts": {
|