@axiomui/primitives 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -22,6 +22,7 @@ var index_exports = {};
 __export(index_exports, {
   Box: () => Box,
   Flex: () => Flex,
+  Slot: () => Slot,
   Stack: () => Stack,
   Text: () => Text
 });
@@ -105,6 +106,56 @@ function Flex(props) {
   );
 }
 
+// src/Slot.tsx
+var import_react = require("react");
+function mergeClassName(slotClassName, childClassName) {
+  if (!slotClassName && !childClassName) {
+    return void 0;
+  }
+  return [slotClassName, childClassName].filter(Boolean).join(" ");
+}
+function composeEventHandlers(childHandler, slotHandler) {
+  if (!childHandler && !slotHandler) {
+    return void 0;
+  }
+  return (event) => {
+    childHandler?.(event);
+    slotHandler?.(event);
+  };
+}
+function mergeProps(slotProps, childProps) {
+  const merged = {
+    ...slotProps,
+    ...childProps,
+    className: mergeClassName(slotProps.className, childProps.className),
+    style: {
+      ...slotProps.style ?? {},
+      ...typeof childProps.style === "object" && childProps.style ? childProps.style : {}
+    }
+  };
+  if ("onClick" in slotProps || "onClick" in childProps) {
+    merged.onClick = composeEventHandlers(
+      childProps.onClick,
+      slotProps.onClick
+    );
+  }
+  if ("onKeyDown" in slotProps || "onKeyDown" in childProps) {
+    merged.onKeyDown = composeEventHandlers(
+      childProps.onKeyDown,
+      slotProps.onKeyDown
+    );
+  }
+  return merged;
+}
+function Slot({ children, ...slotProps }) {
+  const child = import_react.Children.only(children);
+  if (!(0, import_react.isValidElement)(child)) {
+    throw new Error("Slot expects a single valid React element child.");
+  }
+  const childProps = child.props;
+  return (0, import_react.cloneElement)(child, mergeProps(slotProps, childProps));
+}
+
 // src/Stack.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var directionClassNameMap2 = {
@@ -185,6 +236,7 @@ function Text(props) {
 0 && (module.exports = {
   Box,
   Flex,
+  Slot,
   Stack,
   Text
 });

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { ElementType, ReactNode, ComponentPropsWithoutRef, ReactElement } from 'react';
+import { ElementType, ReactNode, ComponentPropsWithoutRef, ReactElement, HTMLAttributes } from 'react';
 
 type PrimitiveElement = ElementType;
 type AsProp<TAs extends PrimitiveElement> = {
@@ -27,6 +27,11 @@ type FlexOwnProps = {
 type FlexProps = Omit<BoxProps<'div'>, 'display'> & FlexOwnProps;
 declare function Flex(props: FlexProps): ReactElement;
 
+type SlotProps = HTMLAttributes<HTMLElement> & {
+    children: ReactElement;
+};
+declare function Slot({ children, ...slotProps }: SlotProps): ReactElement;
+
 type StackOwnProps = {
     direction?: 'vertical' | 'horizontal';
     gap?: '0' | '1' | '2' | '3' | '4' | '6' | '8';
@@ -46,4 +51,4 @@ type TextOwnProps = {
 type TextProps<TAs extends PrimitiveElement = 'span'> = PolymorphicComponentProps<TAs, TextOwnProps>;
 declare function Text<TAs extends PrimitiveElement = 'span'>(props: TextProps<TAs>): ReactElement;
 
-export { Box, type BoxProps, Flex, type FlexProps, type PolymorphicComponentProps, type PrimitiveElement, Stack, type StackProps, Text, type TextProps };
+export { Box, type BoxProps, Flex, type FlexProps, type PolymorphicComponentProps, type PrimitiveElement, Slot, Stack, type StackProps, Text, type TextProps };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, ReactNode, ComponentPropsWithoutRef, ReactElement } from 'react';
+import { ElementType, ReactNode, ComponentPropsWithoutRef, ReactElement, HTMLAttributes } from 'react';
 
 type PrimitiveElement = ElementType;
 type AsProp<TAs extends PrimitiveElement> = {
@@ -27,6 +27,11 @@ type FlexOwnProps = {
 type FlexProps = Omit<BoxProps<'div'>, 'display'> & FlexOwnProps;
 declare function Flex(props: FlexProps): ReactElement;
 
+type SlotProps = HTMLAttributes<HTMLElement> & {
+    children: ReactElement;
+};
+declare function Slot({ children, ...slotProps }: SlotProps): ReactElement;
+
 type StackOwnProps = {
     direction?: 'vertical' | 'horizontal';
     gap?: '0' | '1' | '2' | '3' | '4' | '6' | '8';
@@ -46,4 +51,4 @@ type TextOwnProps = {
 type TextProps<TAs extends PrimitiveElement = 'span'> = PolymorphicComponentProps<TAs, TextOwnProps>;
 declare function Text<TAs extends PrimitiveElement = 'span'>(props: TextProps<TAs>): ReactElement;
 
-export { Box, type BoxProps, Flex, type FlexProps, type PolymorphicComponentProps, type PrimitiveElement, Stack, type StackProps, Text, type TextProps };
+export { Box, type BoxProps, Flex, type FlexProps, type PolymorphicComponentProps, type PrimitiveElement, Slot, Stack, type StackProps, Text, type TextProps };

package/dist/index.js

@@ -76,6 +76,60 @@ function Flex(props) {
   );
 }
 
+// src/Slot.tsx
+import {
+  Children,
+  cloneElement,
+  isValidElement
+} from "react";
+function mergeClassName(slotClassName, childClassName) {
+  if (!slotClassName && !childClassName) {
+    return void 0;
+  }
+  return [slotClassName, childClassName].filter(Boolean).join(" ");
+}
+function composeEventHandlers(childHandler, slotHandler) {
+  if (!childHandler && !slotHandler) {
+    return void 0;
+  }
+  return (event) => {
+    childHandler?.(event);
+    slotHandler?.(event);
+  };
+}
+function mergeProps(slotProps, childProps) {
+  const merged = {
+    ...slotProps,
+    ...childProps,
+    className: mergeClassName(slotProps.className, childProps.className),
+    style: {
+      ...slotProps.style ?? {},
+      ...typeof childProps.style === "object" && childProps.style ? childProps.style : {}
+    }
+  };
+  if ("onClick" in slotProps || "onClick" in childProps) {
+    merged.onClick = composeEventHandlers(
+      childProps.onClick,
+      slotProps.onClick
+    );
+  }
+  if ("onKeyDown" in slotProps || "onKeyDown" in childProps) {
+    merged.onKeyDown = composeEventHandlers(
+      childProps.onKeyDown,
+      slotProps.onKeyDown
+    );
+  }
+  return merged;
+}
+function Slot({ children, ...slotProps }) {
+  const child = Children.only(children);
+  if (!isValidElement(child)) {
+    throw new Error("Slot expects a single valid React element child.");
+  }
+  const childProps = child.props;
+  return cloneElement(child, mergeProps(slotProps, childProps));
+}
+
 // src/Stack.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var directionClassNameMap2 = {
@@ -155,6 +209,7 @@ function Text(props) {
 export {
   Box,
   Flex,
+  Slot,
   Stack,
   Text
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiomui/primitives",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",
@@ -17,24 +17,20 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
-    "lint": "tsc -p tsconfig.json --noEmit",
-    "test": "vitest run --passWithNoTests",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
-    "clean": "rm -rf dist",
-    "prepublishOnly": "pnpm run build"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18"
   },
   "dependencies": {
-    "@axiomui/tokens": "workspace:*"
+    "@axiomui/tokens": "^0.2.0"
   },
-  "sideEffects": false
-}
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "lint": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "clean": "rm -rf dist"
+  }
+}