@mochi-css/react 3.0.0

package/README.md

@@ -0,0 +1,122 @@
+# 🧁 Mochi-CSS/react
+
+This package is part of the [Mochi-CSS project](https://github.com/Niikelion/mochi-css).
+It provides the `styled` utility for creating type-safe styled React components.
+
+## Installation
+
+```bash
+npm i @mochi-css/react
+```
+
+---
+
+## `styled(component, ...styles)`
+
+`styled` creates a React component by combining a base element or component with Mochi-CSS style definitions.
+Variant props are automatically extracted, applied as class names, and never forwarded to the underlying element.
+
+```tsx
+import { css } from "@mochi-css/vanilla"
+import { styled } from "@mochi-css/react"
+
+const Button = styled("button", {
+    padding: "8px 16px",
+    borderRadius: 4,
+    border: "none",
+    cursor: "pointer",
+})
+
+// <Button>Click me</Button>
+```
+
+### With variants
+
+Pass a style object with a `variants` key to generate typed variant props:
+
+```tsx
+import { styled } from "@mochi-css/react"
+
+const Button = styled("button", {
+    padding: "8px 16px",
+    borderRadius: 4,
+    variants: {
+        intent: {
+            primary: { backgroundColor: "blue", color: "white" },
+            danger:  { backgroundColor: "red",  color: "white" },
+        },
+        size: {
+            small: { fontSize: 12, padding: "4px 8px" },
+            large: { fontSize: 18, padding: "12px 24px" },
+        },
+    },
+    defaultVariants: {
+        intent: "primary",
+        size:   "small",
+    },
+})
+
+// <Button intent="danger" size="large">Delete</Button>
+```
+
+### With a shared `css()` style
+
+Pass a `MochiCSS` object (the return value of `css()`) to share styles across multiple components:
+
+```tsx
+import { css } from "@mochi-css/vanilla"
+import { styled } from "@mochi-css/react"
+
+const baseButton = css({
+    borderRadius: 4,
+    border: "none",
+    cursor: "pointer",
+})
+
+const PrimaryButton = styled("button", baseButton, {
+    backgroundColor: "blue",
+    color: "white",
+})
+
+const SecondaryButton = styled("button", baseButton, {
+    backgroundColor: "gray",
+    color: "white",
+})
+```
+
+### Component targeting
+
+Each styled component has a `.selector` getter (and a `toString()` that returns the same value) for use in parent component styles:
+
+```tsx
+const Icon = styled("span", { marginRight: 4 })
+
+const Button = styled("button", {
+    display: "flex",
+
+    // target Icon inside Button
+    [`${Icon} &`]: { color: "inherit" },
+})
+```
+
+### Styling an existing component
+
+`styled` accepts any React component that accepts a `className` prop:
+
+```tsx
+import { Link } from "react-router-dom"
+
+const NavLink = styled(Link, {
+    color: "inherit",
+    textDecoration: "none",
+    "&:hover": { textDecoration: "underline" },
+})
+```
+
+---
+
+## Type exports
+
+| Export                 | Description                                    |
+|------------------------|------------------------------------------------|
+| `MochiStyledComponent` | The type of a component returned by `styled()` |

package/dist/index.d.mts

@@ -0,0 +1,56 @@
+import { ComponentProps, ComponentType, FC, HTMLElementType } from "react";
+import { AllVariants, MergeCSSVariants, MochiCSS, MochiCSSProps, RefineVariants } from "@mochi-css/vanilla";
+
+//#region src/styled.d.ts
+
+/** Props added by MochiCSS to styled components */
+type MochiProps<V extends AllVariants[]> = {
+  className?: string;
+} & Partial<RefineVariants<MergeCSSVariants<V>>>;
+/** Minimal interface for components that accept className */
+type Cls = {
+  className?: string;
+};
+/** A styled component FC augmented with a CSS selector for component targeting */
+type MochiStyledComponent<T extends HTMLElementType | ComponentType<Cls>, V extends AllVariants[]> = FC<Omit<ComponentProps<T>, keyof MochiProps<V>> & MochiProps<V>> & {
+  toString(): string;
+  selector: string;
+};
+/**
+ * Creates a styled React component with CSS-in-JS support and variant props.
+ * Similar to styled-components or Stitches, but with zero runtime overhead.
+ *
+ * @template T - The base element type or component type
+ * @template V - The variant definitions tuple type
+ * @param target - The HTML element tag name or React component to style
+ * @param props - One or more style objects with optional variants
+ * @returns A React functional component with merged props and variant support
+ *
+ * @remarks
+ * Variant props are automatically stripped and never forwarded to the underlying
+ * element or component. This prevents unknown prop warnings on DOM elements.
+ * If the inner component has a prop with the same
+ * name as a variant, it will not receive that prop.
+ *
+ * @example
+ * const Button = styled('button', {
+ *   padding: 8,
+ *   borderRadius: 4,
+ *   variants: {
+ *     size: {
+ *       small: { padding: 4 },
+ *       large: { padding: 16 }
+ *     },
+ *     variant: {
+ *       primary: { backgroundColor: 'blue' },
+ *       secondary: { backgroundColor: 'gray' }
+ *     }
+ *   }
+ * })
+ *
+ * // Usage: <Button size="large" variant="primary">Click me</Button>
+ */
+declare function styled<T extends HTMLElementType | ComponentType<Cls>, V extends AllVariants[]>(target: T, ...props: { [K in keyof V]: MochiCSSProps<V[K]> | MochiCSS | string }): MochiStyledComponent<T, V>;
+//#endregion
+export { MochiStyledComponent, styled };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+import { ComponentProps, ComponentType, FC, HTMLElementType } from "react";
+import { AllVariants, MergeCSSVariants, MochiCSS, MochiCSSProps, RefineVariants } from "@mochi-css/vanilla";
+
+//#region src/styled.d.ts
+
+/** Props added by MochiCSS to styled components */
+type MochiProps<V extends AllVariants[]> = {
+  className?: string;
+} & Partial<RefineVariants<MergeCSSVariants<V>>>;
+/** Minimal interface for components that accept className */
+type Cls = {
+  className?: string;
+};
+/** A styled component FC augmented with a CSS selector for component targeting */
+type MochiStyledComponent<T extends HTMLElementType | ComponentType<Cls>, V extends AllVariants[]> = FC<Omit<ComponentProps<T>, keyof MochiProps<V>> & MochiProps<V>> & {
+  toString(): string;
+  selector: string;
+};
+/**
+ * Creates a styled React component with CSS-in-JS support and variant props.
+ * Similar to styled-components or Stitches, but with zero runtime overhead.
+ *
+ * @template T - The base element type or component type
+ * @template V - The variant definitions tuple type
+ * @param target - The HTML element tag name or React component to style
+ * @param props - One or more style objects with optional variants
+ * @returns A React functional component with merged props and variant support
+ *
+ * @remarks
+ * Variant props are automatically stripped and never forwarded to the underlying
+ * element or component. This prevents unknown prop warnings on DOM elements.
+ * If the inner component has a prop with the same
+ * name as a variant, it will not receive that prop.
+ *
+ * @example
+ * const Button = styled('button', {
+ *   padding: 8,
+ *   borderRadius: 4,
+ *   variants: {
+ *     size: {
+ *       small: { padding: 4 },
+ *       large: { padding: 16 }
+ *     },
+ *     variant: {
+ *       primary: { backgroundColor: 'blue' },
+ *       secondary: { backgroundColor: 'gray' }
+ *     }
+ *   }
+ * })
+ *
+ * // Usage: <Button size="large" variant="primary">Click me</Button>
+ */
+declare function styled<T extends HTMLElementType | ComponentType<Cls>, V extends AllVariants[]>(target: T, ...props: { [K in keyof V]: MochiCSSProps<V[K]> | MochiCSS | string }): MochiStyledComponent<T, V>;
+//#endregion
+export { MochiStyledComponent, styled };
+//# sourceMappingURL=index.d.ts.map