@hypergood/react-css 0.1.0

package/.prettierignore

@@ -0,0 +1 @@
+dist

package/.prettierrc

@@ -0,0 +1 @@
+{}

package/dist/index.cjs

@@ -0,0 +1,72 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  css: () => import_css_core.css,
+  keyframes: () => import_css_core.keyframes,
+  mergeClassNames: () => import_css_core.mergeClassNames,
+  styled: () => styled,
+  variants: () => import_css_core.variants
+});
+module.exports = __toCommonJS(index_exports);
+var import_css_core = require("@hypergood/css-core");
+var import_jsx_runtime = require("react/jsx-runtime");
+function styled(component, styleObject) {
+  const {
+    base,
+    variants: variantClassNames = {},
+    defaultVariants = {}
+  } = styleObject;
+  const variantNames = Object.keys(variantClassNames);
+  return function StyledComponent({
+    as,
+    className,
+    ...props
+  }) {
+    const Comp = as ?? component;
+    const forwardedProps = {};
+    for (const key in props) {
+      if (!variantNames.includes(key)) {
+        forwardedProps[key] = props[key];
+      }
+    }
+    const selectedVariantClassNames = variantNames.map((variantName) => {
+      const value = props[variantName] ?? defaultVariants[variantName];
+      if (value == null) return void 0;
+      return variantClassNames[variantName]?.[String(value)];
+    });
+    const merged = (0, import_css_core.mergeClassNames)([
+      base,
+      ...selectedVariantClassNames,
+      className
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ...forwardedProps, className: merged });
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  css,
+  keyframes,
+  mergeClassNames,
+  styled,
+  variants
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import {\n  css,\n  keyframes,\n  mergeClassNames,\n  variants,\n  type CSSProperties,\n  type CSSValue,\n  type StyledStyleObject,\n} from \"@hypergood/css-core\";\nimport { ComponentPropsWithRef, ElementType } from \"react\";\n\ntype StyledComponentProps<T extends ElementType> = {\n  as?: T;\n} & Omit<ComponentPropsWithRef<T>, \"as\">;\n\ntype CompiledStyleObject = {\n  base?: string;\n  variants?: Record<string, Record<string, string>>;\n  defaultVariants?: Record<string, unknown>;\n};\n\nexport function styled<TBase extends ElementType>(\n  component: TBase,\n  styleObject: StyledStyleObject,\n): any {\n  const {\n    base,\n    variants: variantClassNames = {},\n    defaultVariants = {},\n  } = styleObject as CompiledStyleObject;\n  const variantNames = Object.keys(variantClassNames);\n\n  return function StyledComponent<T extends ElementType = TBase>({\n    as,\n    className,\n    ...props\n  }: StyledComponentProps<T> & { className?: string }) {\n    const Comp = (as ?? component) as ElementType;\n\n    // Variant props are consumed here and not forwarded to the element.\n    const forwardedProps: Record<string, unknown> = {};\n    for (const key in props) {\n      if (!variantNames.includes(key)) {\n        forwardedProps[key] = (props as Record<string, unknown>)[key];\n      }\n    }\n\n    const selectedVariantClassNames = variantNames.map((variantName) => {\n      const value =\n        (props as Record<string, unknown>)[variantName] ??\n        defaultVariants[variantName];\n      if (value == null) return undefined;\n      return variantClassNames[variantName]?.[String(value)];\n    });\n\n    const merged = mergeClassNames([\n      base,\n      ...selectedVariantClassNames,\n      className,\n    ]);\n\n    return <Comp {...forwardedProps} className={merged} />;\n  };\n}\n\nexport { css, keyframes, mergeClassNames, variants };\nexport type { CSSProperties, CSSValue, StyledStyleObject };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQO;AAqDI;AAxCJ,SAAS,OACd,WACA,aACK;AACL,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,oBAAoB,CAAC;AAAA,IAC/B,kBAAkB,CAAC;AAAA,EACrB,IAAI;AACJ,QAAM,eAAe,OAAO,KAAK,iBAAiB;AAElD,SAAO,SAAS,gBAA+C;AAAA,IAC7D;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAqD;AACnD,UAAM,OAAQ,MAAM;AAGpB,UAAM,iBAA0C,CAAC;AACjD,eAAW,OAAO,OAAO;AACvB,UAAI,CAAC,aAAa,SAAS,GAAG,GAAG;AAC/B,uBAAe,GAAG,IAAK,MAAkC,GAAG;AAAA,MAC9D;AAAA,IACF;AAEA,UAAM,4BAA4B,aAAa,IAAI,CAAC,gBAAgB;AAClE,YAAM,QACH,MAAkC,WAAW,KAC9C,gBAAgB,WAAW;AAC7B,UAAI,SAAS,KAAM,QAAO;AAC1B,aAAO,kBAAkB,WAAW,IAAI,OAAO,KAAK,CAAC;AAAA,IACvD,CAAC;AAED,UAAM,aAAS,iCAAgB;AAAA,MAC7B;AAAA,MACA,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAED,WAAO,4CAAC,QAAM,GAAG,gBAAgB,WAAW,QAAQ;AAAA,EACtD;AACF;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,7 @@
+import { StyledStyleObject } from '@hypergood/css-core';
+export { CSSProperties, CSSValue, StyledStyleObject, css, keyframes, mergeClassNames, variants } from '@hypergood/css-core';
+import { ElementType } from 'react';
+
+declare function styled<TBase extends ElementType>(component: TBase, styleObject: StyledStyleObject): any;
+
+export { styled };

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { StyledStyleObject } from '@hypergood/css-core';
+export { CSSProperties, CSSValue, StyledStyleObject, css, keyframes, mergeClassNames, variants } from '@hypergood/css-core';
+import { ElementType } from 'react';
+
+declare function styled<TBase extends ElementType>(component: TBase, styleObject: StyledStyleObject): any;
+
+export { styled };

package/dist/index.js

@@ -0,0 +1,48 @@
+// src/index.tsx
+import {
+  css,
+  keyframes,
+  mergeClassNames,
+  variants
+} from "@hypergood/css-core";
+import { jsx } from "react/jsx-runtime";
+function styled(component, styleObject) {
+  const {
+    base,
+    variants: variantClassNames = {},
+    defaultVariants = {}
+  } = styleObject;
+  const variantNames = Object.keys(variantClassNames);
+  return function StyledComponent({
+    as,
+    className,
+    ...props
+  }) {
+    const Comp = as ?? component;
+    const forwardedProps = {};
+    for (const key in props) {
+      if (!variantNames.includes(key)) {
+        forwardedProps[key] = props[key];
+      }
+    }
+    const selectedVariantClassNames = variantNames.map((variantName) => {
+      const value = props[variantName] ?? defaultVariants[variantName];
+      if (value == null) return void 0;
+      return variantClassNames[variantName]?.[String(value)];
+    });
+    const merged = mergeClassNames([
+      base,
+      ...selectedVariantClassNames,
+      className
+    ]);
+    return /* @__PURE__ */ jsx(Comp, { ...forwardedProps, className: merged });
+  };
+}
+export {
+  css,
+  keyframes,
+  mergeClassNames,
+  styled,
+  variants
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import {\n  css,\n  keyframes,\n  mergeClassNames,\n  variants,\n  type CSSProperties,\n  type CSSValue,\n  type StyledStyleObject,\n} from \"@hypergood/css-core\";\nimport { ComponentPropsWithRef, ElementType } from \"react\";\n\ntype StyledComponentProps<T extends ElementType> = {\n  as?: T;\n} & Omit<ComponentPropsWithRef<T>, \"as\">;\n\ntype CompiledStyleObject = {\n  base?: string;\n  variants?: Record<string, Record<string, string>>;\n  defaultVariants?: Record<string, unknown>;\n};\n\nexport function styled<TBase extends ElementType>(\n  component: TBase,\n  styleObject: StyledStyleObject,\n): any {\n  const {\n    base,\n    variants: variantClassNames = {},\n    defaultVariants = {},\n  } = styleObject as CompiledStyleObject;\n  const variantNames = Object.keys(variantClassNames);\n\n  return function StyledComponent<T extends ElementType = TBase>({\n    as,\n    className,\n    ...props\n  }: StyledComponentProps<T> & { className?: string }) {\n    const Comp = (as ?? component) as ElementType;\n\n    // Variant props are consumed here and not forwarded to the element.\n    const forwardedProps: Record<string, unknown> = {};\n    for (const key in props) {\n      if (!variantNames.includes(key)) {\n        forwardedProps[key] = (props as Record<string, unknown>)[key];\n      }\n    }\n\n    const selectedVariantClassNames = variantNames.map((variantName) => {\n      const value =\n        (props as Record<string, unknown>)[variantName] ??\n        defaultVariants[variantName];\n      if (value == null) return undefined;\n      return variantClassNames[variantName]?.[String(value)];\n    });\n\n    const merged = mergeClassNames([\n      base,\n      ...selectedVariantClassNames,\n      className,\n    ]);\n\n    return <Comp {...forwardedProps} className={merged} />;\n  };\n}\n\nexport { css, keyframes, mergeClassNames, variants };\nexport type { CSSProperties, CSSValue, StyledStyleObject };\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAqDI;AAxCJ,SAAS,OACd,WACA,aACK;AACL,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,oBAAoB,CAAC;AAAA,IAC/B,kBAAkB,CAAC;AAAA,EACrB,IAAI;AACJ,QAAM,eAAe,OAAO,KAAK,iBAAiB;AAElD,SAAO,SAAS,gBAA+C;AAAA,IAC7D;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAqD;AACnD,UAAM,OAAQ,MAAM;AAGpB,UAAM,iBAA0C,CAAC;AACjD,eAAW,OAAO,OAAO;AACvB,UAAI,CAAC,aAAa,SAAS,GAAG,GAAG;AAC/B,uBAAe,GAAG,IAAK,MAAkC,GAAG;AAAA,MAC9D;AAAA,IACF;AAEA,UAAM,4BAA4B,aAAa,IAAI,CAAC,gBAAgB;AAClE,YAAM,QACH,MAAkC,WAAW,KAC9C,gBAAgB,WAAW;AAC7B,UAAI,SAAS,KAAM,QAAO;AAC1B,aAAO,kBAAkB,WAAW,IAAI,OAAO,KAAK,CAAC;AAAA,IACvD,CAAC;AAED,UAAM,SAAS,gBAAgB;AAAA,MAC7B;AAAA,MACA,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAED,WAAO,oBAAC,QAAM,GAAG,gBAAgB,WAAW,QAAQ;AAAA,EACtD;AACF;","names":[]}

package/dist/plugin.cjs

@@ -0,0 +1,36 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugin.ts
+var plugin_exports = {};
+__export(plugin_exports, {
+  vitePluginCss: () => vitePluginCss
+});
+module.exports = __toCommonJS(plugin_exports);
+var import_plugin = require("@hypergood/css-core/plugin");
+var vitePluginCss = (config) => (0, import_plugin.vitePluginCss)({
+  ...config,
+  moduleName: "@hypergood/react-css",
+  jsxClassProp: "className"
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  vitePluginCss
+});
+//# sourceMappingURL=plugin.cjs.map

package/dist/plugin.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugin.ts"],"sourcesContent":["import {\n  PluginConfig,\n  vitePluginCss as vitePluginCssCore,\n} from \"@hypergood/css-core/plugin\";\n\ntype ReactPluginConfig = Omit<PluginConfig, \"moduleName\" | \"jsxClassProp\">;\nconst vitePluginCss = (config: ReactPluginConfig) =>\n  vitePluginCssCore({\n    ...config,\n    moduleName: \"@hypergood/react-css\",\n    jsxClassProp: \"className\",\n  });\n\nexport { ReactPluginConfig, vitePluginCss };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAGO;AAGP,IAAM,gBAAgB,CAAC,eACrB,cAAAA,eAAkB;AAAA,EAChB,GAAG;AAAA,EACH,YAAY;AAAA,EACZ,cAAc;AAChB,CAAC;","names":["vitePluginCssCore"]}

package/dist/plugin.d.cts

@@ -0,0 +1,7 @@
+import * as vite from 'vite';
+import { PluginConfig } from '@hypergood/css-core/plugin';
+
+type ReactPluginConfig = Omit<PluginConfig, "moduleName" | "jsxClassProp">;
+declare const vitePluginCss: (config: ReactPluginConfig) => vite.Plugin<any>[];
+
+export { type ReactPluginConfig, vitePluginCss };

package/dist/plugin.d.ts

@@ -0,0 +1,7 @@
+import * as vite from 'vite';
+import { PluginConfig } from '@hypergood/css-core/plugin';
+
+type ReactPluginConfig = Omit<PluginConfig, "moduleName" | "jsxClassProp">;
+declare const vitePluginCss: (config: ReactPluginConfig) => vite.Plugin<any>[];
+
+export { type ReactPluginConfig, vitePluginCss };

package/dist/plugin.js

@@ -0,0 +1,13 @@
+// src/plugin.ts
+import {
+  vitePluginCss as vitePluginCssCore
+} from "@hypergood/css-core/plugin";
+var vitePluginCss = (config) => vitePluginCssCore({
+  ...config,
+  moduleName: "@hypergood/react-css",
+  jsxClassProp: "className"
+});
+export {
+  vitePluginCss
+};
+//# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugin.ts"],"sourcesContent":["import {\n  PluginConfig,\n  vitePluginCss as vitePluginCssCore,\n} from \"@hypergood/css-core/plugin\";\n\ntype ReactPluginConfig = Omit<PluginConfig, \"moduleName\" | \"jsxClassProp\">;\nconst vitePluginCss = (config: ReactPluginConfig) =>\n  vitePluginCssCore({\n    ...config,\n    moduleName: \"@hypergood/react-css\",\n    jsxClassProp: \"className\",\n  });\n\nexport { ReactPluginConfig, vitePluginCss };\n"],"mappings":";AAAA;AAAA,EAEE,iBAAiB;AAAA,OACZ;AAGP,IAAM,gBAAgB,CAAC,WACrB,kBAAkB;AAAA,EAChB,GAAG;AAAA,EACH,YAAY;AAAA,EACZ,cAAc;AAChB,CAAC;","names":[]}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@hypergood/react-css",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./plugin": {
+      "import": {
+        "types": "./dist/plugin.d.ts",
+        "default": "./dist/plugin.js"
+      },
+      "require": {
+        "types": "./dist/plugin.d.cts",
+        "default": "./dist/plugin.cjs"
+      }
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "",
+  "license": "MIT",
+  "description": "",
+  "dependencies": {
+    "@hypergood/css-core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "vite": "^8"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0"
+  },
+  "scripts": {
+    "dev": "tsup src/index.tsx src/plugin.ts --watch",
+    "build": "tsup src/index.tsx src/plugin.ts",
+    "test": "vitest"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,67 @@
+import {
+  css,
+  keyframes,
+  mergeClassNames,
+  variants,
+  type CSSProperties,
+  type CSSValue,
+  type StyledStyleObject,
+} from "@hypergood/css-core";
+import { ComponentPropsWithRef, ElementType } from "react";
+
+type StyledComponentProps<T extends ElementType> = {
+  as?: T;
+} & Omit<ComponentPropsWithRef<T>, "as">;
+
+type CompiledStyleObject = {
+  base?: string;
+  variants?: Record<string, Record<string, string>>;
+  defaultVariants?: Record<string, unknown>;
+};
+
+export function styled<TBase extends ElementType>(
+  component: TBase,
+  styleObject: StyledStyleObject,
+): any {
+  const {
+    base,
+    variants: variantClassNames = {},
+    defaultVariants = {},
+  } = styleObject as CompiledStyleObject;
+  const variantNames = Object.keys(variantClassNames);
+
+  return function StyledComponent<T extends ElementType = TBase>({
+    as,
+    className,
+    ...props
+  }: StyledComponentProps<T> & { className?: string }) {
+    const Comp = (as ?? component) as ElementType;
+
+    // Variant props are consumed here and not forwarded to the element.
+    const forwardedProps: Record<string, unknown> = {};
+    for (const key in props) {
+      if (!variantNames.includes(key)) {
+        forwardedProps[key] = (props as Record<string, unknown>)[key];
+      }
+    }
+
+    const selectedVariantClassNames = variantNames.map((variantName) => {
+      const value =
+        (props as Record<string, unknown>)[variantName] ??
+        defaultVariants[variantName];
+      if (value == null) return undefined;
+      return variantClassNames[variantName]?.[String(value)];
+    });
+
+    const merged = mergeClassNames([
+      base,
+      ...selectedVariantClassNames,
+      className,
+    ]);
+
+    return <Comp {...forwardedProps} className={merged} />;
+  };
+}
+
+export { css, keyframes, mergeClassNames, variants };
+export type { CSSProperties, CSSValue, StyledStyleObject };

package/src/plugin.ts

@@ -0,0 +1,14 @@
+import {
+  PluginConfig,
+  vitePluginCss as vitePluginCssCore,
+} from "@hypergood/css-core/plugin";
+
+type ReactPluginConfig = Omit<PluginConfig, "moduleName" | "jsxClassProp">;
+const vitePluginCss = (config: ReactPluginConfig) =>
+  vitePluginCssCore({
+    ...config,
+    moduleName: "@hypergood/react-css",
+    jsxClassProp: "className",
+  });
+
+export { ReactPluginConfig, vitePluginCss };

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "nodenext",
+    "strict": true,
+    "moduleResolution": "nodenext",
+    "ignoreDeprecations": "6.0"
+  }
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import type { Options } from "tsup";
+
+export const tsup: Options = {
+  clean: true,
+  dts: true,
+  minify: false,
+  sourcemap: true,
+  splitting: false,
+  format: ["cjs", "esm"],
+  target: "node20",
+  skipNodeModulesBundle: true,
+};