first commit

This commit is contained in:
2026-06-24 09:48:54 +02:00
commit 41e62ddcad
33739 changed files with 4266226 additions and 0 deletions
+21
View File
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+3
View File
@@ -0,0 +1,3 @@
# `react-slot`
View docs [here](https://radix-ui.com/primitives/docs/utilities/slot).
+29
View File
@@ -0,0 +1,29 @@
import * as React from 'react';
declare module 'react' {
interface ReactElement {
$$typeof?: symbol | string;
}
}
type SlotProps<Elem extends Element = HTMLElement, Props = React.HTMLAttributes<Elem>> = Props & {
children?: React.ReactNode;
};
declare function createSlot<Elem extends Element = HTMLElement, Props = React.HTMLAttributes<Elem>>(ownerName: string): React.ForwardRefExoticComponent<React.PropsWithoutRef<SlotProps<Elem, Props>> & React.RefAttributes<Elem>>;
declare const Slot: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
children?: React.ReactNode;
} & React.RefAttributes<HTMLElement>>;
type SlottableChildrenProps = {
children: React.ReactNode;
};
type SlottableRenderFnProps = {
child: React.ReactNode;
children: (slottable: React.ReactNode) => React.ReactNode;
};
type SlottableProps = SlottableRenderFnProps | SlottableChildrenProps;
interface SlottableComponent extends React.FC<SlottableProps> {
__radixId: symbol;
}
declare function createSlottable(ownerName: string): SlottableComponent;
declare const Slottable: SlottableComponent;
export { Slot as Root, Slot, type SlotProps, Slottable, createSlot, createSlottable };
+29
View File
@@ -0,0 +1,29 @@
import * as React from 'react';
declare module 'react' {
interface ReactElement {
$$typeof?: symbol | string;
}
}
type SlotProps<Elem extends Element = HTMLElement, Props = React.HTMLAttributes<Elem>> = Props & {
children?: React.ReactNode;
};
declare function createSlot<Elem extends Element = HTMLElement, Props = React.HTMLAttributes<Elem>>(ownerName: string): React.ForwardRefExoticComponent<React.PropsWithoutRef<SlotProps<Elem, Props>> & React.RefAttributes<Elem>>;
declare const Slot: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
children?: React.ReactNode;
} & React.RefAttributes<HTMLElement>>;
type SlottableChildrenProps = {
children: React.ReactNode;
};
type SlottableRenderFnProps = {
child: React.ReactNode;
children: (slottable: React.ReactNode) => React.ReactNode;
};
type SlottableProps = SlottableRenderFnProps | SlottableChildrenProps;
interface SlottableComponent extends React.FC<SlottableProps> {
__radixId: symbol;
}
declare function createSlottable(ownerName: string): SlottableComponent;
declare const Slottable: SlottableComponent;
export { Slot as Root, Slot, type SlotProps, Slottable, createSlot, createSlottable };
+170
View File
@@ -0,0 +1,170 @@
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
Root: () => Slot,
Slot: () => Slot,
Slottable: () => Slottable,
createSlot: () => createSlot,
createSlottable: () => createSlottable
});
module.exports = __toCommonJS(index_exports);
// src/slot.tsx
var React = __toESM(require("react"));
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
// @__NO_SIDE_EFFECTS__
function createSlot(ownerName) {
const Slot2 = React.forwardRef((props, forwardedRef) => {
let { children, ...slotProps } = props;
let slottableElement = null;
let hasSlottable = false;
const newChildren = [];
if (isLazyComponent(children) && typeof use === "function") {
children = use(children._payload);
}
React.Children.forEach(children, (maybeSlottable) => {
if (isSlottable(maybeSlottable)) {
hasSlottable = true;
const slottable = maybeSlottable;
let child = "child" in slottable.props ? slottable.props.child : slottable.props.children;
if (isLazyComponent(child) && typeof use === "function") {
child = use(child._payload);
}
slottableElement = getSlottableElementFromSlottable(slottable, child);
newChildren.push(slottableElement?.props?.children);
} else {
newChildren.push(maybeSlottable);
}
});
if (slottableElement) {
slottableElement = React.cloneElement(slottableElement, void 0, newChildren);
} else if (
// A `Slottable` was found but it didn't resolve to a single element (e.g.
// it wrapped multiple elements, text, or a render-prop `child` that
// wasn't an element). Don't fall back to treating the `Slottable` wrapper
// itself as the slot target — throw a descriptive error below instead.
!hasSlottable && React.Children.count(children) === 1 && React.isValidElement(children)
) {
slottableElement = children;
}
const slottableElementRef = slottableElement ? getElementRef(slottableElement) : void 0;
const composedRef = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, slottableElementRef);
if (!slottableElement) {
if (children || children === 0) {
throw new Error(
hasSlottable ? createSlottableError(ownerName) : createSlotError(ownerName)
);
}
return children;
}
const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
if (slottableElement.type !== React.Fragment) {
mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
}
return React.cloneElement(slottableElement, mergedProps);
});
Slot2.displayName = `${ownerName}.Slot`;
return Slot2;
}
var Slot = /* @__PURE__ */ createSlot("Slot");
var SLOTTABLE_IDENTIFIER = Symbol.for("radix.slottable");
// @__NO_SIDE_EFFECTS__
function createSlottable(ownerName) {
const Slottable2 = (props) => "child" in props ? props.children(props.child) : props.children;
Slottable2.displayName = `${ownerName}.Slottable`;
Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
return Slottable2;
}
var Slottable = /* @__PURE__ */ createSlottable("Slottable");
var getSlottableElementFromSlottable = (slottable, child) => {
if ("child" in slottable.props) {
const child2 = slottable.props.child;
if (!React.isValidElement(child2)) return null;
return React.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
}
return React.isValidElement(child) ? child : null;
};
function mergeProps(slotProps, childProps) {
const overrideProps = { ...childProps };
for (const propName in childProps) {
const slotPropValue = slotProps[propName];
const childPropValue = childProps[propName];
const isHandler = /^on[A-Z]/.test(propName);
if (isHandler) {
if (slotPropValue && childPropValue) {
overrideProps[propName] = (...args) => {
const result = childPropValue(...args);
slotPropValue(...args);
return result;
};
} else if (slotPropValue) {
overrideProps[propName] = slotPropValue;
}
} else if (propName === "style") {
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
} else if (propName === "className") {
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
}
}
return { ...slotProps, ...overrideProps };
}
function getElementRef(element) {
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
if (mayWarn) {
return element.ref;
}
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
if (mayWarn) {
return element.props.ref;
}
return element.props.ref || element.ref;
}
function isSlottable(child) {
return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
}
var REACT_LAZY_TYPE = Symbol.for("react.lazy");
function isLazyComponent(element) {
return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
}
function isPromiseLike(value) {
return typeof value === "object" && value !== null && "then" in value;
}
var createSlotError = (ownerName) => {
return `${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
};
var createSlottableError = (ownerName) => {
return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
};
var use = React[" use ".trim().toString()];
//# sourceMappingURL=index.js.map
File diff suppressed because one or more lines are too long
+137
View File
@@ -0,0 +1,137 @@
// src/slot.tsx
import * as React from "react";
import { useComposedRefs } from "@radix-ui/react-compose-refs";
// @__NO_SIDE_EFFECTS__
function createSlot(ownerName) {
const Slot2 = React.forwardRef((props, forwardedRef) => {
let { children, ...slotProps } = props;
let slottableElement = null;
let hasSlottable = false;
const newChildren = [];
if (isLazyComponent(children) && typeof use === "function") {
children = use(children._payload);
}
React.Children.forEach(children, (maybeSlottable) => {
if (isSlottable(maybeSlottable)) {
hasSlottable = true;
const slottable = maybeSlottable;
let child = "child" in slottable.props ? slottable.props.child : slottable.props.children;
if (isLazyComponent(child) && typeof use === "function") {
child = use(child._payload);
}
slottableElement = getSlottableElementFromSlottable(slottable, child);
newChildren.push(slottableElement?.props?.children);
} else {
newChildren.push(maybeSlottable);
}
});
if (slottableElement) {
slottableElement = React.cloneElement(slottableElement, void 0, newChildren);
} else if (
// A `Slottable` was found but it didn't resolve to a single element (e.g.
// it wrapped multiple elements, text, or a render-prop `child` that
// wasn't an element). Don't fall back to treating the `Slottable` wrapper
// itself as the slot target — throw a descriptive error below instead.
!hasSlottable && React.Children.count(children) === 1 && React.isValidElement(children)
) {
slottableElement = children;
}
const slottableElementRef = slottableElement ? getElementRef(slottableElement) : void 0;
const composedRef = useComposedRefs(forwardedRef, slottableElementRef);
if (!slottableElement) {
if (children || children === 0) {
throw new Error(
hasSlottable ? createSlottableError(ownerName) : createSlotError(ownerName)
);
}
return children;
}
const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
if (slottableElement.type !== React.Fragment) {
mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
}
return React.cloneElement(slottableElement, mergedProps);
});
Slot2.displayName = `${ownerName}.Slot`;
return Slot2;
}
var Slot = /* @__PURE__ */ createSlot("Slot");
var SLOTTABLE_IDENTIFIER = Symbol.for("radix.slottable");
// @__NO_SIDE_EFFECTS__
function createSlottable(ownerName) {
const Slottable2 = (props) => "child" in props ? props.children(props.child) : props.children;
Slottable2.displayName = `${ownerName}.Slottable`;
Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
return Slottable2;
}
var Slottable = /* @__PURE__ */ createSlottable("Slottable");
var getSlottableElementFromSlottable = (slottable, child) => {
if ("child" in slottable.props) {
const child2 = slottable.props.child;
if (!React.isValidElement(child2)) return null;
return React.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
}
return React.isValidElement(child) ? child : null;
};
function mergeProps(slotProps, childProps) {
const overrideProps = { ...childProps };
for (const propName in childProps) {
const slotPropValue = slotProps[propName];
const childPropValue = childProps[propName];
const isHandler = /^on[A-Z]/.test(propName);
if (isHandler) {
if (slotPropValue && childPropValue) {
overrideProps[propName] = (...args) => {
const result = childPropValue(...args);
slotPropValue(...args);
return result;
};
} else if (slotPropValue) {
overrideProps[propName] = slotPropValue;
}
} else if (propName === "style") {
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
} else if (propName === "className") {
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
}
}
return { ...slotProps, ...overrideProps };
}
function getElementRef(element) {
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
if (mayWarn) {
return element.ref;
}
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
if (mayWarn) {
return element.props.ref;
}
return element.props.ref || element.ref;
}
function isSlottable(child) {
return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
}
var REACT_LAZY_TYPE = Symbol.for("react.lazy");
function isLazyComponent(element) {
return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
}
function isPromiseLike(value) {
return typeof value === "object" && value !== null && "then" in value;
}
var createSlotError = (ownerName) => {
return `${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
};
var createSlottableError = (ownerName) => {
return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
};
var use = React[" use ".trim().toString()];
export {
Slot as Root,
Slot,
Slottable,
createSlot,
createSlottable
};
//# sourceMappingURL=index.mjs.map
File diff suppressed because one or more lines are too long
+63
View File
@@ -0,0 +1,63 @@
{
"name": "@radix-ui/react-slot",
"version": "1.3.0",
"license": "MIT",
"source": "./src/index.ts",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.3"
},
"devDependencies": {
"@types/react": "^19.2.2",
"@types/react-dom": "^19.2.2",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"typescript": "^5.9.3",
"@repo/typescript-config": "0.0.0",
"@repo/builder": "0.0.0"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git",
"directory": "packages/react/slot"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
},
"scripts": {
"lint": "oxlint --max-warnings 0 src",
"clean": "rm -rf dist",
"reset": "rm -rf dist node_modules",
"typecheck": "tsc --noEmit",
"build": "radix-build"
},
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
}
}