c063 1.0.1 → 1.1.0

package/dist/types/props.d.ts

@@ -6,13 +6,13 @@ export type CodeTokenType = `keyword-${KeywordColorType}` | "string" | "number"
  *
  * @template T HTML 或客製元素，例如 span、a、Link 等
  */
-export type CodeTokenProps<T extends React.ElementType = React.ElementType> = AsComponentProps<T, {
+export type CodeTokenProps<T extends React.ElementType = React.ElementType<React.HTMLAttributes<HTMLElement>>> = AsComponentProps<T, {
     /**
      * 語法 token 的語意類型，用於指定樣式顏色。
      */
     type?: CodeTokenType;
 }>;
-export type CodeTokenBuilder = (props: DistributiveOmit<CodeTokenProps, "type">) => CodeTokenProps;
+export type CodeTokenBuilder = (children: CodeTokenProps["children"], props: DistributiveOmit<CodeTokenProps, "type">) => CodeTokenProps;
 /**
  * 用於單一程式碼行的屬性，用在 <CodeLine /> 或類似元件中。
  */

package/dist/utils/index.d.ts

@@ -1,3 +1,3 @@
-import { CodeTokenProps } from "../types";
-export declare const createToken: {};
+import { CodeTokenBuilder, CodeTokenProps, CodeTokenType } from "../types";
+export declare const createToken: Record<CodeTokenType, CodeTokenBuilder>;
 export declare const whiteSpace: (count?: number) => CodeTokenProps;

package/dist/utils/index.js

@@ -1,7 +1,8 @@
 export const createToken = new Proxy({}, {
     get: (_, prop) => {
-        const builder = (props) => ({
+        const builder = (children, props) => ({
             type: prop,
+            children,
             ...props,
         });
         return builder;

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "c063",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A React component for displaying code snippets with syntax highlighting.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/types/props.tsx

@@ -21,18 +21,22 @@ export type CodeTokenType =
  *
  * @template T HTML 或客製元素，例如 span、a、Link 等
  */
-export type CodeTokenProps<T extends React.ElementType = React.ElementType> =
-  AsComponentProps<
-    T,
-    {
-      /**
-       * 語法 token 的語意類型，用於指定樣式顏色。
-       */
-      type?: CodeTokenType;
-    }
-  >;
-  
+export type CodeTokenProps<
+  T extends React.ElementType = React.ElementType<
+    React.HTMLAttributes<HTMLElement>
+  >
+> = AsComponentProps<
+  T,
+  {
+    /**
+     * 語法 token 的語意類型，用於指定樣式顏色。
+     */
+    type?: CodeTokenType;
+  }
+>;
+
 export type CodeTokenBuilder = (
+  children: CodeTokenProps["children"],
   props: DistributiveOmit<CodeTokenProps, "type">
 ) => CodeTokenProps;
 

package/src/utils/index.ts

@@ -4,14 +4,15 @@ export const createToken = new Proxy(
   {},
   {
     get: (_, prop: CodeTokenType) => {
-      const builder: CodeTokenBuilder = (props) => ({
+      const builder: CodeTokenBuilder = (children, props?) => ({
         type: prop,
+        children,
         ...props,
       });
       return builder;
     },
   }
-);
+) as Record<CodeTokenType, CodeTokenBuilder>;
 
 export const whiteSpace = (count: number = 1): CodeTokenProps => ({
   type: "default",