@locus-ui/components 0.0.16 → 0.1.1

package/dist/utils/filter-children.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+/**
+ * Type utility to restrict children to specific React element types.
+ * Use with Omit<Props, 'children'> & StrictChildren<AllowedProps>
+ *
+ * @example
+ * type MyComponentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>
+ *   & StrictChildren<ChildAProps | ChildBProps>;
+ */
+type StrictChildren<AllowedChildProps> = {
+    children: React.ReactElement<AllowedChildProps> | React.ReactElement<AllowedChildProps>[];
+};
+/**
+ * Type utility to replace the children prop with strictly typed children.
+ * Combines Omit and StrictChildren in one step.
+ *
+ * @example
+ * type MyComponentProps = WithStrictChildren<
+ *   React.HTMLAttributes<HTMLDivElement>,
+ *   ChildAProps | ChildBProps
+ * >;
+ */
+type WithStrictChildren<Props extends {
+    children?: React.ReactNode;
+}, AllowedChildProps> = Omit<Props, "children"> & StrictChildren<AllowedChildProps>;
+/**
+ * Like WithStrictChildren, but children are optional.
+ * When provided, children are still restricted to the allowed types.
+ */
+type WithOptionalStrictChildren<Props extends {
+    children?: React.ReactNode;
+}, AllowedChildProps> = Omit<Props, "children"> & Partial<StrictChildren<AllowedChildProps>>;
+interface FilterChildrenOptions {
+    /** The parent component's displayName (for error/warning messages) */
+    parentDisplayName?: string;
+    /** If true, throws an error for invalid children instead of warning */
+    strict?: boolean;
+    /** Component references to match against (for RSC-serialized children whose displayName may not be accessible) */
+    allowedTypes?: React.ComponentType[];
+}
+declare function filterChildren(children: React.ReactNode, allowedDisplayNames: string[], options?: FilterChildrenOptions): React.ReactNode[];
+/**
+ * Checks if a child element's type matches a given component, handling
+ * RSC-serialized lazy module references where displayName and direct
+ * reference comparison may not work.
+ */
+declare function matchesComponent(childType: unknown, component: React.ComponentType): boolean;
+
+export { type FilterChildrenOptions, type StrictChildren, type WithOptionalStrictChildren, type WithStrictChildren, filterChildren, matchesComponent };

package/dist/utils/filter-children.js

@@ -0,0 +1,121 @@
+"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);
+var filter_children_exports = {};
+__export(filter_children_exports, {
+  filterChildren: () => filterChildren,
+  matchesComponent: () => matchesComponent
+});
+module.exports = __toCommonJS(filter_children_exports);
+var React = __toESM(require("react"));
+function normalizeName(name) {
+  return name.replace(/\./g, "").toLowerCase();
+}
+function getPayload(type) {
+  const payload = type?._payload;
+  if (payload && typeof payload === "object") {
+    return payload;
+  }
+  return void 0;
+}
+function getPayloadExportName(type) {
+  const payload = getPayload(type);
+  if (payload?.status === "resolved_module" && Array.isArray(payload.value)) {
+    const name = payload.value[2];
+    if (typeof name === "string") return name;
+  }
+  return void 0;
+}
+function getPayloadResolvedValue(type) {
+  const payload = getPayload(type);
+  if (payload?.status === "fulfilled" && payload.value != null) {
+    const val = payload.value;
+    if (typeof val === "function" || typeof val === "object") {
+      return val;
+    }
+  }
+  return void 0;
+}
+function filterChildren(children, allowedDisplayNames, options = {}) {
+  const { parentDisplayName, strict = false, allowedTypes } = options;
+  const normalizedAllowed = allowedDisplayNames.map(normalizeName);
+  return React.Children.toArray(children).filter((child) => {
+    if (!React.isValidElement(child)) return false;
+    const childType = child.type;
+    const displayName = childType?.displayName;
+    if (displayName && allowedDisplayNames.includes(displayName)) {
+      return true;
+    }
+    if (allowedTypes?.includes(childType)) {
+      return true;
+    }
+    const exportName = getPayloadExportName(childType);
+    if (exportName && normalizedAllowed.includes(normalizeName(exportName))) {
+      return true;
+    }
+    const resolved = getPayloadResolvedValue(childType);
+    if (resolved) {
+      if (allowedTypes?.includes(resolved)) return true;
+      const resolvedName = resolved.displayName;
+      if (resolvedName && allowedDisplayNames.includes(resolvedName))
+        return true;
+      if (resolvedName && normalizedAllowed.includes(normalizeName(resolvedName)))
+        return true;
+    }
+    const parent = parentDisplayName ?? "Component";
+    const childName = displayName || exportName || resolved?.displayName || "Unknown";
+    const allowed = allowedDisplayNames.join(", ");
+    const message = `${parent}: Invalid child "${childName}" (${JSON.stringify(childType)})${strict ? "" : " was filtered out"}. Only ${allowed} are allowed as direct children.`;
+    if (strict) throw new Error(message);
+    console.warn(message);
+    return false;
+  });
+}
+function matchesComponent(childType, component) {
+  if (childType === component) return true;
+  const childDisplayName = childType?.displayName;
+  const componentDisplayName = component.displayName;
+  if (childDisplayName && componentDisplayName && childDisplayName === componentDisplayName)
+    return true;
+  const exportName = getPayloadExportName(childType);
+  if (exportName && componentDisplayName && normalizeName(exportName) === normalizeName(componentDisplayName))
+    return true;
+  const resolved = getPayloadResolvedValue(childType);
+  if (resolved) {
+    if (resolved === component) return true;
+    if (resolved.displayName && componentDisplayName && resolved.displayName === componentDisplayName)
+      return true;
+  }
+  return false;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  filterChildren,
+  matchesComponent
+});
+//# sourceMappingURL=filter-children.js.map

package/dist/utils/filter-children.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/filter-children.ts"],"sourcesContent":["import * as React from \"react\";\n\n/**\n * Type utility to restrict children to specific React element types.\n * Use with Omit<Props, 'children'> & StrictChildren<AllowedProps>\n *\n * @example\n * type MyComponentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>\n *   & StrictChildren<ChildAProps | ChildBProps>;\n */\nexport type StrictChildren<AllowedChildProps> = {\n  children:\n    | React.ReactElement<AllowedChildProps>\n    | React.ReactElement<AllowedChildProps>[];\n};\n\n/**\n * Type utility to replace the children prop with strictly typed children.\n * Combines Omit and StrictChildren in one step.\n *\n * @example\n * type MyComponentProps = WithStrictChildren<\n *   React.HTMLAttributes<HTMLDivElement>,\n *   ChildAProps | ChildBProps\n * >;\n */\nexport type WithStrictChildren<\n  Props extends { children?: React.ReactNode },\n  AllowedChildProps,\n> = Omit<Props, \"children\"> & StrictChildren<AllowedChildProps>;\n\n/**\n * Like WithStrictChildren, but children are optional.\n * When provided, children are still restricted to the allowed types.\n */\nexport type WithOptionalStrictChildren<\n  Props extends { children?: React.ReactNode },\n  AllowedChildProps,\n> = Omit<Props, \"children\"> & Partial<StrictChildren<AllowedChildProps>>;\n\nexport interface FilterChildrenOptions {\n  /** The parent component's displayName (for error/warning messages) */\n  parentDisplayName?: string;\n  /** If true, throws an error for invalid children instead of warning */\n  strict?: boolean;\n  /** Component references to match against (for RSC-serialized children whose displayName may not be accessible) */\n  allowedTypes?: React.ComponentType[];\n}\n\n/**\n * Filters React children to only include allowed components based on displayName\n * or direct type reference comparison.\n * Logs a warning or throws an error for any invalid children.\n *\n * @param children - The children to filter\n * @param allowedDisplayNames - Array of allowed component displayNames\n * @param options - Configuration options\n * @returns Filtered array of valid children\n */\n/**\n * Normalizes a component name by stripping dots and lowercasing,\n * so \"Switch.Label\" and \"SwitchLabel\" both become \"switchlabel\".\n */\nfunction normalizeName(name: string): string {\n  return name.replace(/\\./g, \"\").toLowerCase();\n}\n\n/**\n * Extracts the RSC `_payload` object from a lazy module reference, if present.\n */\nfunction getPayload(type: unknown): Record<string, unknown> | undefined {\n  const payload = (type as Record<string, unknown>)?._payload;\n  if (payload && typeof payload === \"object\") {\n    return payload as Record<string, unknown>;\n  }\n  return undefined;\n}\n\n/**\n * Attempts to extract the export name from an RSC-serialized lazy module\n * reference. In Next.js RSC, client components serialized across the\n * server/client boundary have a `_payload` with the export name at index 2.\n */\nfunction getPayloadExportName(type: unknown): string | undefined {\n  const payload = getPayload(type);\n  if (payload?.status === \"resolved_module\" && Array.isArray(payload.value)) {\n    const name = (payload.value as unknown[])[2];\n    if (typeof name === \"string\") return name;\n  }\n  return undefined;\n}\n\n/**\n * Attempts to get the resolved component from an RSC lazy module reference\n * whose payload has already been fulfilled. When the lazy reference resolves,\n * `_payload.value` becomes the actual component function/object.\n */\nfunction getPayloadResolvedValue(\n  type: unknown,\n): React.ComponentType | undefined {\n  const payload = getPayload(type);\n  if (payload?.status === \"fulfilled\" && payload.value != null) {\n    const val = payload.value;\n    if (typeof val === \"function\" || typeof val === \"object\") {\n      return val as React.ComponentType;\n    }\n  }\n  return undefined;\n}\n\nexport function filterChildren(\n  children: React.ReactNode,\n  allowedDisplayNames: string[],\n  options: FilterChildrenOptions = {},\n): React.ReactNode[] {\n  const { parentDisplayName, strict = false, allowedTypes } = options;\n\n  const normalizedAllowed = allowedDisplayNames.map(normalizeName);\n\n  return React.Children.toArray(children).filter((child) => {\n    if (!React.isValidElement(child)) return false;\n\n    const childType = child.type as React.ComponentType;\n    const displayName = childType?.displayName;\n\n    // Match by displayName\n    if (displayName && allowedDisplayNames.includes(displayName)) {\n      return true;\n    }\n\n    // Match by direct type reference (handles RSC-serialized client components\n    // whose displayName may not be accessible across the server/client boundary)\n    if (allowedTypes?.includes(childType)) {\n      return true;\n    }\n\n    // Match by RSC payload export name (handles RSC-serialized client components\n    // where the export name e.g. \"SwitchLabel\" differs from the displayName\n    // e.g. \"Switch.Label\")\n    const exportName = getPayloadExportName(childType);\n    if (exportName && normalizedAllowed.includes(normalizeName(exportName))) {\n      return true;\n    }\n\n    // Match by resolved value from a fulfilled RSC lazy reference\n    const resolved = getPayloadResolvedValue(childType);\n    if (resolved) {\n      if (allowedTypes?.includes(resolved)) return true;\n      const resolvedName = resolved.displayName;\n      if (resolvedName && allowedDisplayNames.includes(resolvedName))\n        return true;\n      if (\n        resolvedName &&\n        normalizedAllowed.includes(normalizeName(resolvedName))\n      )\n        return true;\n    }\n\n    const parent = parentDisplayName ?? \"Component\";\n    const childName =\n      displayName || exportName || resolved?.displayName || \"Unknown\";\n    const allowed = allowedDisplayNames.join(\", \");\n\n    const message =\n      `${parent}: Invalid child \"${childName}\" (${JSON.stringify(childType)})${\n        strict ? \"\" : \" was filtered out\"\n      }. ` + `Only ${allowed} are allowed as direct children.`;\n\n    if (strict) throw new Error(message);\n    console.warn(message);\n\n    return false;\n  });\n}\n\n/**\n * Checks if a child element's type matches a given component, handling\n * RSC-serialized lazy module references where displayName and direct\n * reference comparison may not work.\n */\nexport function matchesComponent(\n  childType: unknown,\n  component: React.ComponentType,\n): boolean {\n  if (childType === component) return true;\n\n  const childDisplayName = (childType as React.ComponentType)?.displayName;\n  const componentDisplayName = component.displayName;\n  if (\n    childDisplayName &&\n    componentDisplayName &&\n    childDisplayName === componentDisplayName\n  )\n    return true;\n\n  const exportName = getPayloadExportName(childType);\n  if (\n    exportName &&\n    componentDisplayName &&\n    normalizeName(exportName) === normalizeName(componentDisplayName)\n  )\n    return true;\n\n  // Match by resolved value from a fulfilled RSC lazy reference\n  const resolved = getPayloadResolvedValue(childType);\n  if (resolved) {\n    if (resolved === component) return true;\n    if (\n      resolved.displayName &&\n      componentDisplayName &&\n      resolved.displayName === componentDisplayName\n    )\n      return true;\n  }\n\n  return false;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AA+DvB,SAAS,cAAc,MAAsB;AAC3C,SAAO,KAAK,QAAQ,OAAO,EAAE,EAAE,YAAY;AAC7C;AAKA,SAAS,WAAW,MAAoD;AACtE,QAAM,UAAW,MAAkC;AACnD,MAAI,WAAW,OAAO,YAAY,UAAU;AAC1C,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAOA,SAAS,qBAAqB,MAAmC;AAC/D,QAAM,UAAU,WAAW,IAAI;AAC/B,MAAI,SAAS,WAAW,qBAAqB,MAAM,QAAQ,QAAQ,KAAK,GAAG;AACzE,UAAM,OAAQ,QAAQ,MAAoB,CAAC;AAC3C,QAAI,OAAO,SAAS,SAAU,QAAO;AAAA,EACvC;AACA,SAAO;AACT;AAOA,SAAS,wBACP,MACiC;AACjC,QAAM,UAAU,WAAW,IAAI;AAC/B,MAAI,SAAS,WAAW,eAAe,QAAQ,SAAS,MAAM;AAC5D,UAAM,MAAM,QAAQ;AACpB,QAAI,OAAO,QAAQ,cAAc,OAAO,QAAQ,UAAU;AACxD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEO,SAAS,eACd,UACA,qBACA,UAAiC,CAAC,GACf;AACnB,QAAM,EAAE,mBAAmB,SAAS,OAAO,aAAa,IAAI;AAE5D,QAAM,oBAAoB,oBAAoB,IAAI,aAAa;AAE/D,SAAO,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAC,UAAU;AACxD,QAAI,CAAC,MAAM,eAAe,KAAK,EAAG,QAAO;AAEzC,UAAM,YAAY,MAAM;AACxB,UAAM,cAAc,WAAW;AAG/B,QAAI,eAAe,oBAAoB,SAAS,WAAW,GAAG;AAC5D,aAAO;AAAA,IACT;AAIA,QAAI,cAAc,SAAS,SAAS,GAAG;AACrC,aAAO;AAAA,IACT;AAKA,UAAM,aAAa,qBAAqB,SAAS;AACjD,QAAI,cAAc,kBAAkB,SAAS,cAAc,UAAU,CAAC,GAAG;AACvE,aAAO;AAAA,IACT;AAGA,UAAM,WAAW,wBAAwB,SAAS;AAClD,QAAI,UAAU;AACZ,UAAI,cAAc,SAAS,QAAQ,EAAG,QAAO;AAC7C,YAAM,eAAe,SAAS;AAC9B,UAAI,gBAAgB,oBAAoB,SAAS,YAAY;AAC3D,eAAO;AACT,UACE,gBACA,kBAAkB,SAAS,cAAc,YAAY,CAAC;AAEtD,eAAO;AAAA,IACX;AAEA,UAAM,SAAS,qBAAqB;AACpC,UAAM,YACJ,eAAe,cAAc,UAAU,eAAe;AACxD,UAAM,UAAU,oBAAoB,KAAK,IAAI;AAE7C,UAAM,UACJ,GAAG,MAAM,oBAAoB,SAAS,MAAM,KAAK,UAAU,SAAS,CAAC,IACnE,SAAS,KAAK,mBAChB,UAAe,OAAO;AAExB,QAAI,OAAQ,OAAM,IAAI,MAAM,OAAO;AACnC,YAAQ,KAAK,OAAO;AAEpB,WAAO;AAAA,EACT,CAAC;AACH;AAOO,SAAS,iBACd,WACA,WACS;AACT,MAAI,cAAc,UAAW,QAAO;AAEpC,QAAM,mBAAoB,WAAmC;AAC7D,QAAM,uBAAuB,UAAU;AACvC,MACE,oBACA,wBACA,qBAAqB;AAErB,WAAO;AAET,QAAM,aAAa,qBAAqB,SAAS;AACjD,MACE,cACA,wBACA,cAAc,UAAU,MAAM,cAAc,oBAAoB;AAEhE,WAAO;AAGT,QAAM,WAAW,wBAAwB,SAAS;AAClD,MAAI,UAAU;AACZ,QAAI,aAAa,UAAW,QAAO;AACnC,QACE,SAAS,eACT,wBACA,SAAS,gBAAgB;AAEzB,aAAO;AAAA,EACX;AAEA,SAAO;AACT;","names":[]}

package/dist/utils/filter-children.mjs

@@ -0,0 +1,86 @@
+import * as React from "react";
+function normalizeName(name) {
+  return name.replace(/\./g, "").toLowerCase();
+}
+function getPayload(type) {
+  const payload = type?._payload;
+  if (payload && typeof payload === "object") {
+    return payload;
+  }
+  return void 0;
+}
+function getPayloadExportName(type) {
+  const payload = getPayload(type);
+  if (payload?.status === "resolved_module" && Array.isArray(payload.value)) {
+    const name = payload.value[2];
+    if (typeof name === "string") return name;
+  }
+  return void 0;
+}
+function getPayloadResolvedValue(type) {
+  const payload = getPayload(type);
+  if (payload?.status === "fulfilled" && payload.value != null) {
+    const val = payload.value;
+    if (typeof val === "function" || typeof val === "object") {
+      return val;
+    }
+  }
+  return void 0;
+}
+function filterChildren(children, allowedDisplayNames, options = {}) {
+  const { parentDisplayName, strict = false, allowedTypes } = options;
+  const normalizedAllowed = allowedDisplayNames.map(normalizeName);
+  return React.Children.toArray(children).filter((child) => {
+    if (!React.isValidElement(child)) return false;
+    const childType = child.type;
+    const displayName = childType?.displayName;
+    if (displayName && allowedDisplayNames.includes(displayName)) {
+      return true;
+    }
+    if (allowedTypes?.includes(childType)) {
+      return true;
+    }
+    const exportName = getPayloadExportName(childType);
+    if (exportName && normalizedAllowed.includes(normalizeName(exportName))) {
+      return true;
+    }
+    const resolved = getPayloadResolvedValue(childType);
+    if (resolved) {
+      if (allowedTypes?.includes(resolved)) return true;
+      const resolvedName = resolved.displayName;
+      if (resolvedName && allowedDisplayNames.includes(resolvedName))
+        return true;
+      if (resolvedName && normalizedAllowed.includes(normalizeName(resolvedName)))
+        return true;
+    }
+    const parent = parentDisplayName ?? "Component";
+    const childName = displayName || exportName || resolved?.displayName || "Unknown";
+    const allowed = allowedDisplayNames.join(", ");
+    const message = `${parent}: Invalid child "${childName}" (${JSON.stringify(childType)})${strict ? "" : " was filtered out"}. Only ${allowed} are allowed as direct children.`;
+    if (strict) throw new Error(message);
+    console.warn(message);
+    return false;
+  });
+}
+function matchesComponent(childType, component) {
+  if (childType === component) return true;
+  const childDisplayName = childType?.displayName;
+  const componentDisplayName = component.displayName;
+  if (childDisplayName && componentDisplayName && childDisplayName === componentDisplayName)
+    return true;
+  const exportName = getPayloadExportName(childType);
+  if (exportName && componentDisplayName && normalizeName(exportName) === normalizeName(componentDisplayName))
+    return true;
+  const resolved = getPayloadResolvedValue(childType);
+  if (resolved) {
+    if (resolved === component) return true;
+    if (resolved.displayName && componentDisplayName && resolved.displayName === componentDisplayName)
+      return true;
+  }
+  return false;
+}
+export {
+  filterChildren,
+  matchesComponent
+};
+//# sourceMappingURL=filter-children.mjs.map

package/dist/utils/filter-children.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/filter-children.ts"],"sourcesContent":["import * as React from \"react\";\n\n/**\n * Type utility to restrict children to specific React element types.\n * Use with Omit<Props, 'children'> & StrictChildren<AllowedProps>\n *\n * @example\n * type MyComponentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>\n *   & StrictChildren<ChildAProps | ChildBProps>;\n */\nexport type StrictChildren<AllowedChildProps> = {\n  children:\n    | React.ReactElement<AllowedChildProps>\n    | React.ReactElement<AllowedChildProps>[];\n};\n\n/**\n * Type utility to replace the children prop with strictly typed children.\n * Combines Omit and StrictChildren in one step.\n *\n * @example\n * type MyComponentProps = WithStrictChildren<\n *   React.HTMLAttributes<HTMLDivElement>,\n *   ChildAProps | ChildBProps\n * >;\n */\nexport type WithStrictChildren<\n  Props extends { children?: React.ReactNode },\n  AllowedChildProps,\n> = Omit<Props, \"children\"> & StrictChildren<AllowedChildProps>;\n\n/**\n * Like WithStrictChildren, but children are optional.\n * When provided, children are still restricted to the allowed types.\n */\nexport type WithOptionalStrictChildren<\n  Props extends { children?: React.ReactNode },\n  AllowedChildProps,\n> = Omit<Props, \"children\"> & Partial<StrictChildren<AllowedChildProps>>;\n\nexport interface FilterChildrenOptions {\n  /** The parent component's displayName (for error/warning messages) */\n  parentDisplayName?: string;\n  /** If true, throws an error for invalid children instead of warning */\n  strict?: boolean;\n  /** Component references to match against (for RSC-serialized children whose displayName may not be accessible) */\n  allowedTypes?: React.ComponentType[];\n}\n\n/**\n * Filters React children to only include allowed components based on displayName\n * or direct type reference comparison.\n * Logs a warning or throws an error for any invalid children.\n *\n * @param children - The children to filter\n * @param allowedDisplayNames - Array of allowed component displayNames\n * @param options - Configuration options\n * @returns Filtered array of valid children\n */\n/**\n * Normalizes a component name by stripping dots and lowercasing,\n * so \"Switch.Label\" and \"SwitchLabel\" both become \"switchlabel\".\n */\nfunction normalizeName(name: string): string {\n  return name.replace(/\\./g, \"\").toLowerCase();\n}\n\n/**\n * Extracts the RSC `_payload` object from a lazy module reference, if present.\n */\nfunction getPayload(type: unknown): Record<string, unknown> | undefined {\n  const payload = (type as Record<string, unknown>)?._payload;\n  if (payload && typeof payload === \"object\") {\n    return payload as Record<string, unknown>;\n  }\n  return undefined;\n}\n\n/**\n * Attempts to extract the export name from an RSC-serialized lazy module\n * reference. In Next.js RSC, client components serialized across the\n * server/client boundary have a `_payload` with the export name at index 2.\n */\nfunction getPayloadExportName(type: unknown): string | undefined {\n  const payload = getPayload(type);\n  if (payload?.status === \"resolved_module\" && Array.isArray(payload.value)) {\n    const name = (payload.value as unknown[])[2];\n    if (typeof name === \"string\") return name;\n  }\n  return undefined;\n}\n\n/**\n * Attempts to get the resolved component from an RSC lazy module reference\n * whose payload has already been fulfilled. When the lazy reference resolves,\n * `_payload.value` becomes the actual component function/object.\n */\nfunction getPayloadResolvedValue(\n  type: unknown,\n): React.ComponentType | undefined {\n  const payload = getPayload(type);\n  if (payload?.status === \"fulfilled\" && payload.value != null) {\n    const val = payload.value;\n    if (typeof val === \"function\" || typeof val === \"object\") {\n      return val as React.ComponentType;\n    }\n  }\n  return undefined;\n}\n\nexport function filterChildren(\n  children: React.ReactNode,\n  allowedDisplayNames: string[],\n  options: FilterChildrenOptions = {},\n): React.ReactNode[] {\n  const { parentDisplayName, strict = false, allowedTypes } = options;\n\n  const normalizedAllowed = allowedDisplayNames.map(normalizeName);\n\n  return React.Children.toArray(children).filter((child) => {\n    if (!React.isValidElement(child)) return false;\n\n    const childType = child.type as React.ComponentType;\n    const displayName = childType?.displayName;\n\n    // Match by displayName\n    if (displayName && allowedDisplayNames.includes(displayName)) {\n      return true;\n    }\n\n    // Match by direct type reference (handles RSC-serialized client components\n    // whose displayName may not be accessible across the server/client boundary)\n    if (allowedTypes?.includes(childType)) {\n      return true;\n    }\n\n    // Match by RSC payload export name (handles RSC-serialized client components\n    // where the export name e.g. \"SwitchLabel\" differs from the displayName\n    // e.g. \"Switch.Label\")\n    const exportName = getPayloadExportName(childType);\n    if (exportName && normalizedAllowed.includes(normalizeName(exportName))) {\n      return true;\n    }\n\n    // Match by resolved value from a fulfilled RSC lazy reference\n    const resolved = getPayloadResolvedValue(childType);\n    if (resolved) {\n      if (allowedTypes?.includes(resolved)) return true;\n      const resolvedName = resolved.displayName;\n      if (resolvedName && allowedDisplayNames.includes(resolvedName))\n        return true;\n      if (\n        resolvedName &&\n        normalizedAllowed.includes(normalizeName(resolvedName))\n      )\n        return true;\n    }\n\n    const parent = parentDisplayName ?? \"Component\";\n    const childName =\n      displayName || exportName || resolved?.displayName || \"Unknown\";\n    const allowed = allowedDisplayNames.join(\", \");\n\n    const message =\n      `${parent}: Invalid child \"${childName}\" (${JSON.stringify(childType)})${\n        strict ? \"\" : \" was filtered out\"\n      }. ` + `Only ${allowed} are allowed as direct children.`;\n\n    if (strict) throw new Error(message);\n    console.warn(message);\n\n    return false;\n  });\n}\n\n/**\n * Checks if a child element's type matches a given component, handling\n * RSC-serialized lazy module references where displayName and direct\n * reference comparison may not work.\n */\nexport function matchesComponent(\n  childType: unknown,\n  component: React.ComponentType,\n): boolean {\n  if (childType === component) return true;\n\n  const childDisplayName = (childType as React.ComponentType)?.displayName;\n  const componentDisplayName = component.displayName;\n  if (\n    childDisplayName &&\n    componentDisplayName &&\n    childDisplayName === componentDisplayName\n  )\n    return true;\n\n  const exportName = getPayloadExportName(childType);\n  if (\n    exportName &&\n    componentDisplayName &&\n    normalizeName(exportName) === normalizeName(componentDisplayName)\n  )\n    return true;\n\n  // Match by resolved value from a fulfilled RSC lazy reference\n  const resolved = getPayloadResolvedValue(childType);\n  if (resolved) {\n    if (resolved === component) return true;\n    if (\n      resolved.displayName &&\n      componentDisplayName &&\n      resolved.displayName === componentDisplayName\n    )\n      return true;\n  }\n\n  return false;\n}\n"],"mappings":"AAAA,YAAY,WAAW;AA+DvB,SAAS,cAAc,MAAsB;AAC3C,SAAO,KAAK,QAAQ,OAAO,EAAE,EAAE,YAAY;AAC7C;AAKA,SAAS,WAAW,MAAoD;AACtE,QAAM,UAAW,MAAkC;AACnD,MAAI,WAAW,OAAO,YAAY,UAAU;AAC1C,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAOA,SAAS,qBAAqB,MAAmC;AAC/D,QAAM,UAAU,WAAW,IAAI;AAC/B,MAAI,SAAS,WAAW,qBAAqB,MAAM,QAAQ,QAAQ,KAAK,GAAG;AACzE,UAAM,OAAQ,QAAQ,MAAoB,CAAC;AAC3C,QAAI,OAAO,SAAS,SAAU,QAAO;AAAA,EACvC;AACA,SAAO;AACT;AAOA,SAAS,wBACP,MACiC;AACjC,QAAM,UAAU,WAAW,IAAI;AAC/B,MAAI,SAAS,WAAW,eAAe,QAAQ,SAAS,MAAM;AAC5D,UAAM,MAAM,QAAQ;AACpB,QAAI,OAAO,QAAQ,cAAc,OAAO,QAAQ,UAAU;AACxD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEO,SAAS,eACd,UACA,qBACA,UAAiC,CAAC,GACf;AACnB,QAAM,EAAE,mBAAmB,SAAS,OAAO,aAAa,IAAI;AAE5D,QAAM,oBAAoB,oBAAoB,IAAI,aAAa;AAE/D,SAAO,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAC,UAAU;AACxD,QAAI,CAAC,MAAM,eAAe,KAAK,EAAG,QAAO;AAEzC,UAAM,YAAY,MAAM;AACxB,UAAM,cAAc,WAAW;AAG/B,QAAI,eAAe,oBAAoB,SAAS,WAAW,GAAG;AAC5D,aAAO;AAAA,IACT;AAIA,QAAI,cAAc,SAAS,SAAS,GAAG;AACrC,aAAO;AAAA,IACT;AAKA,UAAM,aAAa,qBAAqB,SAAS;AACjD,QAAI,cAAc,kBAAkB,SAAS,cAAc,UAAU,CAAC,GAAG;AACvE,aAAO;AAAA,IACT;AAGA,UAAM,WAAW,wBAAwB,SAAS;AAClD,QAAI,UAAU;AACZ,UAAI,cAAc,SAAS,QAAQ,EAAG,QAAO;AAC7C,YAAM,eAAe,SAAS;AAC9B,UAAI,gBAAgB,oBAAoB,SAAS,YAAY;AAC3D,eAAO;AACT,UACE,gBACA,kBAAkB,SAAS,cAAc,YAAY,CAAC;AAEtD,eAAO;AAAA,IACX;AAEA,UAAM,SAAS,qBAAqB;AACpC,UAAM,YACJ,eAAe,cAAc,UAAU,eAAe;AACxD,UAAM,UAAU,oBAAoB,KAAK,IAAI;AAE7C,UAAM,UACJ,GAAG,MAAM,oBAAoB,SAAS,MAAM,KAAK,UAAU,SAAS,CAAC,IACnE,SAAS,KAAK,mBAChB,UAAe,OAAO;AAExB,QAAI,OAAQ,OAAM,IAAI,MAAM,OAAO;AACnC,YAAQ,KAAK,OAAO;AAEpB,WAAO;AAAA,EACT,CAAC;AACH;AAOO,SAAS,iBACd,WACA,WACS;AACT,MAAI,cAAc,UAAW,QAAO;AAEpC,QAAM,mBAAoB,WAAmC;AAC7D,QAAM,uBAAuB,UAAU;AACvC,MACE,oBACA,wBACA,qBAAqB;AAErB,WAAO;AAET,QAAM,aAAa,qBAAqB,SAAS;AACjD,MACE,cACA,wBACA,cAAc,UAAU,MAAM,cAAc,oBAAoB;AAEhE,WAAO;AAGT,QAAM,WAAW,wBAAwB,SAAS;AAClD,MAAI,UAAU;AACZ,QAAI,aAAa,UAAW,QAAO;AACnC,QACE,SAAS,eACT,wBACA,SAAS,gBAAgB;AAEzB,aAAO;AAAA,EACX;AAEA,SAAO;AACT;","names":[]}

package/dist/utils/get-component-props.d.mts

@@ -0,0 +1,14 @@
+import * as React$1 from 'react';
+import { PropDef } from '../props/prop-def.mjs';
+
+declare function getComponentProps<P extends {
+    className?: string;
+    style?: React.CSSProperties;
+    [key: string]: any;
+}, T extends Record<string, PropDef>[]>(props: P, ...propDefs: T): P & {
+    style: React$1.CSSProperties;
+    dataAttrs: Record<string, string>;
+    className: string;
+};
+
+export { getComponentProps };

package/dist/utils/get-component-props.d.ts

@@ -0,0 +1,14 @@
+import * as React$1 from 'react';
+import { PropDef } from '../props/prop-def.js';
+
+declare function getComponentProps<P extends {
+    className?: string;
+    style?: React.CSSProperties;
+    [key: string]: any;
+}, T extends Record<string, PropDef>[]>(props: P, ...propDefs: T): P & {
+    style: React$1.CSSProperties;
+    dataAttrs: Record<string, string>;
+    className: string;
+};
+
+export { getComponentProps };

package/dist/utils/get-component-props.js

@@ -0,0 +1,126 @@
+"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);
+var get_component_props_exports = {};
+__export(get_component_props_exports, {
+  getComponentProps: () => getComponentProps
+});
+module.exports = __toCommonJS(get_component_props_exports);
+var import_clsx = __toESM(require("clsx"));
+function getComponentProps(props, ...propDefs) {
+  let style = props.style ?? {};
+  const classNames = props.className ? [props.className] : [];
+  const dataAttrs = {};
+  const extractedProps = {};
+  const allProps = Object.assign({}, ...propDefs);
+  const propKeys = Object.keys(allProps);
+  const restProps = { ...props };
+  delete restProps.className;
+  delete restProps.style;
+  for (const key of propKeys) {
+    const prop = allProps[key];
+    const value = props?.[key];
+    delete restProps[key];
+    if (prop.type === "boolean" || prop.type === "string" || prop.type === "number" || prop.type === "value | array" || prop.type === "reactNode" || prop.type === "function") {
+      extractedProps[key] = value;
+      if (prop.cssProperty) {
+        if (value !== void 0 && value !== null) {
+          style = {
+            ...style,
+            [prop.cssProperty]: prop.type === "boolean" ? value ? "1" : "0" : value
+          };
+        } else if (prop.default !== void 0) {
+          style = {
+            ...style,
+            [prop.cssProperty]: prop.type === "boolean" ? prop.default ? "1" : "0" : prop.default
+          };
+        }
+      }
+      if (prop.dataAttr) {
+        if (value) dataAttrs[`data-${prop.dataAttr}`] = value;
+        else if (prop.default !== void 0) {
+          dataAttrs[`data-${prop.dataAttr}`] = prop.default;
+        }
+      }
+      continue;
+    }
+    const applyValue = (propValue, breakpoint) => {
+      const usedBreakpoint = breakpoint ? `-${breakpoint}` : "";
+      if (prop.type === "enum" || prop.type === "enum | string") {
+        if (propValue !== null && propValue !== void 0) {
+          if (!breakpoint) extractedProps[key] = propValue;
+          if (!prop.values.includes(propValue)) {
+            const transformedValue = "transform" in prop && prop.transform ? prop.transform(propValue) : propValue;
+            if (prop.className) {
+              classNames.push(
+                breakpoint ? `${prop.className}-${breakpoint}` : prop.className
+              );
+              style = {
+                ...style,
+                [`--custom-${key}${usedBreakpoint}`]: transformedValue
+              };
+            }
+            if (prop.dataAttr) {
+              dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = propValue;
+            }
+          } else if (prop.dataAttr) {
+            if (propValue === "inherit" && prop.className) {
+              classNames.push(prop.className);
+            }
+            dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = propValue;
+          }
+        } else if (prop.dataAttr && prop.default) {
+          if (!breakpoint) extractedProps[key] = prop.default;
+          if (prop.dataAttr) {
+            dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = prop.default;
+          }
+        }
+      }
+    };
+    if ("responsive" in prop && prop.responsive && value && typeof value === "object" && !Array.isArray(value)) {
+      for (const [bp, bpValue] of Object.entries(value)) {
+        applyValue(bpValue, bp);
+      }
+      if ("dataAttr" in prop && prop.dataAttr) {
+        dataAttrs[`data-${prop.dataAttr}`] = "";
+      }
+    } else applyValue(value);
+  }
+  return {
+    ...restProps,
+    ...extractedProps,
+    style,
+    dataAttrs,
+    className: (0, import_clsx.default)(classNames)
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getComponentProps
+});
+//# sourceMappingURL=get-component-props.js.map

package/dist/utils/get-component-props.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/get-component-props.ts"],"sourcesContent":["import clsx from \"clsx\";\nimport { PropDef } from \"../props\";\n\nexport function getComponentProps<\n  P extends {\n    className?: string;\n    style?: React.CSSProperties;\n    [key: string]: any;\n  },\n  T extends Record<string, PropDef>[],\n>(props: P, ...propDefs: T) {\n  let style: React.CSSProperties = props.style ?? {};\n  const classNames: string[] = props.className ? [props.className] : [];\n  const dataAttrs: Record<string, string> = {};\n  const extractedProps: Record<string, any> = {};\n\n  const allProps = Object.assign({}, ...propDefs);\n  const propKeys = Object.keys(allProps);\n\n  // Create a copy of props excluding the component-specific props\n  const restProps = { ...props };\n  delete restProps.className;\n  delete restProps.style;\n\n  for (const key of propKeys) {\n    const prop = allProps[key];\n    const value = props?.[key];\n\n    // Remove the processed prop from restProps\n    delete restProps[key];\n\n    // Store the value for non-enum props (boolean, string, function)\n    if (\n      prop.type === \"boolean\" ||\n      prop.type === \"string\" ||\n      prop.type === \"number\" ||\n      prop.type === \"value | array\" ||\n      prop.type === \"reactNode\" ||\n      prop.type === \"function\"\n    ) {\n      extractedProps[key] = value;\n\n      if (prop.cssProperty) {\n        if (value !== undefined && value !== null) {\n          style = {\n            ...style,\n            [prop.cssProperty]:\n              prop.type === \"boolean\" ? (value ? \"1\" : \"0\") : value,\n          };\n        } else if (prop.default !== undefined) {\n          style = {\n            ...style,\n            [prop.cssProperty]:\n              prop.type === \"boolean\"\n                ? prop.default\n                  ? \"1\"\n                  : \"0\"\n                : prop.default,\n          };\n        }\n      }\n\n      if (prop.dataAttr) {\n        if (value) dataAttrs[`data-${prop.dataAttr}`] = value;\n        else if (prop.default !== undefined) {\n          dataAttrs[`data-${prop.dataAttr}`] = prop.default;\n        }\n      }\n\n      continue;\n    }\n\n    const applyValue = (propValue: any, breakpoint?: string) => {\n      const usedBreakpoint = breakpoint ? `-${breakpoint}` : \"\";\n\n      if (prop.type === \"enum\" || prop.type === \"enum | string\") {\n        if (propValue !== null && propValue !== undefined) {\n          if (!breakpoint) extractedProps[key] = propValue;\n\n          if (!prop.values.includes(propValue)) {\n            const transformedValue =\n              \"transform\" in prop && prop.transform\n                ? prop.transform(propValue)\n                : propValue;\n\n            if (prop.className) {\n              classNames.push(\n                breakpoint ? `${prop.className}-${breakpoint}` : prop.className,\n              );\n              style = {\n                ...style,\n                [`--custom-${key}${usedBreakpoint}`]: transformedValue,\n              };\n            }\n\n            if (prop.dataAttr) {\n              dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = propValue;\n            }\n          } else if (prop.dataAttr) {\n            if (propValue === \"inherit\" && prop.className) {\n              classNames.push(prop.className);\n            }\n\n            dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = propValue;\n          }\n        } else if (prop.dataAttr && prop.default) {\n          if (!breakpoint) extractedProps[key] = prop.default;\n          if (prop.dataAttr) {\n            dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = prop.default;\n          }\n        }\n      }\n    };\n\n    if (\n      \"responsive\" in prop &&\n      prop.responsive &&\n      value &&\n      typeof value === \"object\" &&\n      !Array.isArray(value)\n    ) {\n      // Apply breakpoint-specific values\n      for (const [bp, bpValue] of Object.entries(value)) {\n        applyValue(bpValue, bp);\n      }\n\n      if (\"dataAttr\" in prop && prop.dataAttr) {\n        dataAttrs[`data-${prop.dataAttr}`] = \"\";\n      }\n    } else applyValue(value);\n  }\n\n  return {\n    ...restProps,\n    ...extractedProps,\n    style,\n    dataAttrs,\n    className: clsx(classNames),\n  };\n}\n"],"mappings":"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","names":["clsx"]}

package/dist/utils/get-component-props.mjs

@@ -0,0 +1,92 @@
+import clsx from "clsx";
+function getComponentProps(props, ...propDefs) {
+  let style = props.style ?? {};
+  const classNames = props.className ? [props.className] : [];
+  const dataAttrs = {};
+  const extractedProps = {};
+  const allProps = Object.assign({}, ...propDefs);
+  const propKeys = Object.keys(allProps);
+  const restProps = { ...props };
+  delete restProps.className;
+  delete restProps.style;
+  for (const key of propKeys) {
+    const prop = allProps[key];
+    const value = props?.[key];
+    delete restProps[key];
+    if (prop.type === "boolean" || prop.type === "string" || prop.type === "number" || prop.type === "value | array" || prop.type === "reactNode" || prop.type === "function") {
+      extractedProps[key] = value;
+      if (prop.cssProperty) {
+        if (value !== void 0 && value !== null) {
+          style = {
+            ...style,
+            [prop.cssProperty]: prop.type === "boolean" ? value ? "1" : "0" : value
+          };
+        } else if (prop.default !== void 0) {
+          style = {
+            ...style,
+            [prop.cssProperty]: prop.type === "boolean" ? prop.default ? "1" : "0" : prop.default
+          };
+        }
+      }
+      if (prop.dataAttr) {
+        if (value) dataAttrs[`data-${prop.dataAttr}`] = value;
+        else if (prop.default !== void 0) {
+          dataAttrs[`data-${prop.dataAttr}`] = prop.default;
+        }
+      }
+      continue;
+    }
+    const applyValue = (propValue, breakpoint) => {
+      const usedBreakpoint = breakpoint ? `-${breakpoint}` : "";
+      if (prop.type === "enum" || prop.type === "enum | string") {
+        if (propValue !== null && propValue !== void 0) {
+          if (!breakpoint) extractedProps[key] = propValue;
+          if (!prop.values.includes(propValue)) {
+            const transformedValue = "transform" in prop && prop.transform ? prop.transform(propValue) : propValue;
+            if (prop.className) {
+              classNames.push(
+                breakpoint ? `${prop.className}-${breakpoint}` : prop.className
+              );
+              style = {
+                ...style,
+                [`--custom-${key}${usedBreakpoint}`]: transformedValue
+              };
+            }
+            if (prop.dataAttr) {
+              dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = propValue;
+            }
+          } else if (prop.dataAttr) {
+            if (propValue === "inherit" && prop.className) {
+              classNames.push(prop.className);
+            }
+            dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = propValue;
+          }
+        } else if (prop.dataAttr && prop.default) {
+          if (!breakpoint) extractedProps[key] = prop.default;
+          if (prop.dataAttr) {
+            dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = prop.default;
+          }
+        }
+      }
+    };
+    if ("responsive" in prop && prop.responsive && value && typeof value === "object" && !Array.isArray(value)) {
+      for (const [bp, bpValue] of Object.entries(value)) {
+        applyValue(bpValue, bp);
+      }
+      if ("dataAttr" in prop && prop.dataAttr) {
+        dataAttrs[`data-${prop.dataAttr}`] = "";
+      }
+    } else applyValue(value);
+  }
+  return {
+    ...restProps,
+    ...extractedProps,
+    style,
+    dataAttrs,
+    className: clsx(classNames)
+  };
+}
+export {
+  getComponentProps
+};
+//# sourceMappingURL=get-component-props.mjs.map

package/dist/utils/get-component-props.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/get-component-props.ts"],"sourcesContent":["import clsx from \"clsx\";\nimport { PropDef } from \"../props\";\n\nexport function getComponentProps<\n  P extends {\n    className?: string;\n    style?: React.CSSProperties;\n    [key: string]: any;\n  },\n  T extends Record<string, PropDef>[],\n>(props: P, ...propDefs: T) {\n  let style: React.CSSProperties = props.style ?? {};\n  const classNames: string[] = props.className ? [props.className] : [];\n  const dataAttrs: Record<string, string> = {};\n  const extractedProps: Record<string, any> = {};\n\n  const allProps = Object.assign({}, ...propDefs);\n  const propKeys = Object.keys(allProps);\n\n  // Create a copy of props excluding the component-specific props\n  const restProps = { ...props };\n  delete restProps.className;\n  delete restProps.style;\n\n  for (const key of propKeys) {\n    const prop = allProps[key];\n    const value = props?.[key];\n\n    // Remove the processed prop from restProps\n    delete restProps[key];\n\n    // Store the value for non-enum props (boolean, string, function)\n    if (\n      prop.type === \"boolean\" ||\n      prop.type === \"string\" ||\n      prop.type === \"number\" ||\n      prop.type === \"value | array\" ||\n      prop.type === \"reactNode\" ||\n      prop.type === \"function\"\n    ) {\n      extractedProps[key] = value;\n\n      if (prop.cssProperty) {\n        if (value !== undefined && value !== null) {\n          style = {\n            ...style,\n            [prop.cssProperty]:\n              prop.type === \"boolean\" ? (value ? \"1\" : \"0\") : value,\n          };\n        } else if (prop.default !== undefined) {\n          style = {\n            ...style,\n            [prop.cssProperty]:\n              prop.type === \"boolean\"\n                ? prop.default\n                  ? \"1\"\n                  : \"0\"\n                : prop.default,\n          };\n        }\n      }\n\n      if (prop.dataAttr) {\n        if (value) dataAttrs[`data-${prop.dataAttr}`] = value;\n        else if (prop.default !== undefined) {\n          dataAttrs[`data-${prop.dataAttr}`] = prop.default;\n        }\n      }\n\n      continue;\n    }\n\n    const applyValue = (propValue: any, breakpoint?: string) => {\n      const usedBreakpoint = breakpoint ? `-${breakpoint}` : \"\";\n\n      if (prop.type === \"enum\" || prop.type === \"enum | string\") {\n        if (propValue !== null && propValue !== undefined) {\n          if (!breakpoint) extractedProps[key] = propValue;\n\n          if (!prop.values.includes(propValue)) {\n            const transformedValue =\n              \"transform\" in prop && prop.transform\n                ? prop.transform(propValue)\n                : propValue;\n\n            if (prop.className) {\n              classNames.push(\n                breakpoint ? `${prop.className}-${breakpoint}` : prop.className,\n              );\n              style = {\n                ...style,\n                [`--custom-${key}${usedBreakpoint}`]: transformedValue,\n              };\n            }\n\n            if (prop.dataAttr) {\n              dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = propValue;\n            }\n          } else if (prop.dataAttr) {\n            if (propValue === \"inherit\" && prop.className) {\n              classNames.push(prop.className);\n            }\n\n            dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = propValue;\n          }\n        } else if (prop.dataAttr && prop.default) {\n          if (!breakpoint) extractedProps[key] = prop.default;\n          if (prop.dataAttr) {\n            dataAttrs[`data-${prop.dataAttr}${usedBreakpoint}`] = prop.default;\n          }\n        }\n      }\n    };\n\n    if (\n      \"responsive\" in prop &&\n      prop.responsive &&\n      value &&\n      typeof value === \"object\" &&\n      !Array.isArray(value)\n    ) {\n      // Apply breakpoint-specific values\n      for (const [bp, bpValue] of Object.entries(value)) {\n        applyValue(bpValue, bp);\n      }\n\n      if (\"dataAttr\" in prop && prop.dataAttr) {\n        dataAttrs[`data-${prop.dataAttr}`] = \"\";\n      }\n    } else applyValue(value);\n  }\n\n  return {\n    ...restProps,\n    ...extractedProps,\n    style,\n    dataAttrs,\n    className: clsx(classNames),\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/utils/get-props.d.mts

@@ -0,0 +1,29 @@
+import { PropDef, Responsive } from '../props/prop-def.mjs';
+
+type ExtractSinglePropValue<T> = T extends {
+    type: "boolean";
+} ? boolean : T extends {
+    type: "string";
+} ? string : T extends {
+    type: "enum";
+    values: readonly (infer V)[];
+} ? V : T extends {
+    type: "enum | string";
+    values: readonly (infer V)[];
+} ? V | (string & {}) : never;
+type ExtractPropType<T> = T extends {
+    responsive: true;
+} ? Responsive<ExtractSinglePropValue<T>> : ExtractSinglePropValue<T>;
+type RequiredKeys<T extends Record<string, PropDef>> = {
+    [K in keyof T]: T[K] extends {
+        required: true;
+    } ? K : never;
+}[keyof T];
+type OptionalKeys<T extends Record<string, PropDef>> = Exclude<keyof T, RequiredKeys<T>>;
+type GetProps<T extends Record<string, PropDef>> = {
+    [K in RequiredKeys<T>]: ExtractPropType<T[K]>;
+} & {
+    [K in OptionalKeys<T>]?: ExtractPropType<T[K]>;
+};
+
+export type { GetProps };

package/dist/utils/get-props.d.ts

@@ -0,0 +1,29 @@
+import { PropDef, Responsive } from '../props/prop-def.js';
+
+type ExtractSinglePropValue<T> = T extends {
+    type: "boolean";
+} ? boolean : T extends {
+    type: "string";
+} ? string : T extends {
+    type: "enum";
+    values: readonly (infer V)[];
+} ? V : T extends {
+    type: "enum | string";
+    values: readonly (infer V)[];
+} ? V | (string & {}) : never;
+type ExtractPropType<T> = T extends {
+    responsive: true;
+} ? Responsive<ExtractSinglePropValue<T>> : ExtractSinglePropValue<T>;
+type RequiredKeys<T extends Record<string, PropDef>> = {
+    [K in keyof T]: T[K] extends {
+        required: true;
+    } ? K : never;
+}[keyof T];
+type OptionalKeys<T extends Record<string, PropDef>> = Exclude<keyof T, RequiredKeys<T>>;
+type GetProps<T extends Record<string, PropDef>> = {
+    [K in RequiredKeys<T>]: ExtractPropType<T[K]>;
+} & {
+    [K in OptionalKeys<T>]?: ExtractPropType<T[K]>;
+};
+
+export type { GetProps };