@cdx-ui/primitives 0.0.1-alpha.1

package/src/uniwind.d.ts

@@ -0,0 +1,3 @@
+declare module 'uniwind' {
+  export function useCSSVariable(name: string): string | number | undefined;
+}

package/src/utils/dataAttributes.ts

@@ -0,0 +1,28 @@
+/**
+ * Produces platform-specific props for data attributes.
+ *
+ * Native: individual `data-*` props consumed by Uniwind.
+ * Web (.web.ts): a `dataSet` object consumed by React Native Web.
+ *
+ * Boolean values serialize to `"true"` / `"false"` strings.
+ * String values pass through as-is.
+ * Undefined values are omitted.
+ */
+
+type DataAttributeValue = boolean | string | undefined;
+
+function camelToKebab(str: string): string {
+  return str.replaceAll(/[A-Z]/g, (ch) => `-${ch.toLowerCase()}`);
+}
+
+export function dataAttributes(attrs: Record<string, DataAttributeValue>): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const key in attrs) {
+    const value = attrs[key];
+    if (value === undefined) {
+      continue;
+    }
+    result[`data-${camelToKebab(key)}`] = typeof value === 'boolean' ? String(value) : value;
+  }
+  return result;
+}

package/src/utils/dataAttributes.web.ts

@@ -0,0 +1,26 @@
+/**
+ * Produces platform-specific props for data attributes.
+ *
+ * Web: a `dataSet` object consumed by React Native Web, which translates
+ * camelCase keys to `data-kebab-case` DOM attributes automatically.
+ * Native (.ts): individual `data-*` props consumed by Uniwind.
+ *
+ * Values pass through to `dataSet` as-is (RNW handles serialization).
+ * Undefined values are omitted.
+ */
+
+type DataAttributeValue = boolean | string | undefined;
+
+export function dataAttributes(attrs: Record<string, DataAttributeValue>): {
+  dataSet: Record<string, boolean | string>;
+} {
+  const dataSet: Record<string, boolean | string> = {};
+  for (const key in attrs) {
+    const value = attrs[key];
+    if (value === undefined) {
+      continue;
+    }
+    dataSet[key] = value;
+  }
+  return { dataSet };
+}