@trackunit/css-tailwind 0.0.11 → 0.0.17

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@trackunit/css-tailwind",
-  "version": "0.0.11",
+  "version": "0.0.17",
   "main": "./index.cjs",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "commonjs",
-  "types": "./index.d.ts",
+  "types": "./src/index.d.ts",
   "dependencies": {
-    "@trackunit/ui-design-tokens": "0.0.50"
+    "@trackunit/ui-design-tokens": "0.0.51"
   },
   "peerDependencies": {}
 }

package/tailwind-base.generated.js

@@ -1,10 +1,12 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -20,6 +22,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -32,8 +37,75 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// node_modules/tailwindcss/lib/util/createPlugin.js
+var require_createPlugin = __commonJS({
+  "node_modules/tailwindcss/lib/util/createPlugin.js"(exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports, "default", {
+      enumerable: true,
+      get: () => _default
+    });
+    function createPlugin(plugin3, config) {
+      return {
+        handler: plugin3,
+        config
+      };
+    }
+    createPlugin.withOptions = function(pluginFunction, configFunction = () => ({})) {
+      const optionsFunction = function(options) {
+        return {
+          __options: options,
+          handler: pluginFunction(options),
+          config: configFunction(options)
+        };
+      };
+      optionsFunction.__isOptionsFunction = true;
+      optionsFunction.__pluginFunction = pluginFunction;
+      optionsFunction.__configFunction = configFunction;
+      return optionsFunction;
+    };
+    var _default = createPlugin;
+  }
+});
+
+// node_modules/tailwindcss/lib/public/create-plugin.js
+var require_create_plugin = __commonJS({
+  "node_modules/tailwindcss/lib/public/create-plugin.js"(exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports, "default", {
+      enumerable: true,
+      get: () => _default
+    });
+    var _createPlugin = /* @__PURE__ */ _interopRequireDefault(require_createPlugin());
+    function _interopRequireDefault(obj) {
+      return obj && obj.__esModule ? obj : {
+        default: obj
+      };
+    }
+    var _default = _createPlugin.default;
+  }
+});
+
+// node_modules/tailwindcss/plugin.js
+var require_plugin = __commonJS({
+  "node_modules/tailwindcss/plugin.js"(exports, module2) {
+    var createPlugin = require_create_plugin();
+    module2.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
+  }
+});
+
 // libs/css/tailwind/src/lib/tailwind-base.ts
 var tailwind_base_exports = {};
 __export(tailwind_base_exports, {
@@ -41,6 +113,115 @@ __export(tailwind_base_exports, {
 });
 module.exports = __toCommonJS(tailwind_base_exports);
 
+// libs/css/tailwind-custom-properties-plugin/src/plugin.ts
+var import_plugin = __toESM(require_plugin());
+
+// libs/css/tailwind-custom-properties-plugin/src/variablesToCSSRules.ts
+var keysToCssVariableName = (keys) => `--${keys.join("-")}`.replace(/[^a-zA-Z0-9]/g, "-");
+var flattenVariablesDeclerationValues = (values, output = {}, keys = []) => {
+  for (const [key, value] of Object.entries(values)) {
+    let flattend = {};
+    if (typeof value === "object") {
+      flattend = flattenVariablesDeclerationValues(value, output, [...keys, key]);
+    } else {
+      flattend[keysToCssVariableName([...keys, key])] = value;
+    }
+    output = __spreadValues(__spreadValues({}, flattend), output);
+  }
+  return output;
+};
+var variablesToCSSRules = (variablesDecleration) => {
+  if (!variablesDecleration) {
+    return [];
+  }
+  const cssRules = Object.entries(variablesDecleration).map(([key, value]) => ({
+    [key === "DEFAULT" ? ":root" : `.${key}`]: flattenVariablesDeclerationValues(value)
+  }));
+  return cssRules;
+};
+
+// libs/css/tailwind-custom-properties-plugin/src/plugin.ts
+var CssTailwindCustomPropertiesPlugin = (0, import_plugin.default)(({ addBase, theme }) => {
+  const variablesDeclerationFromThemeConfig = theme("variables", {});
+  const cssRules = variablesToCSSRules(variablesDeclerationFromThemeConfig);
+  addBase(cssRules);
+});
+
+// libs/css/component-tokens/src/plugin.ts
+var import_plugin2 = __toESM(require_plugin());
+
+// libs/css/component-tokens/src/component-tokens/ComponentTokenDefinition.ts
+var AsComponentTokenDefinition = (designTokens) => designTokens;
+
+// libs/css/component-tokens/src/component-tokens/components/Card.tokens.ts
+var CardTokenDefinition = AsComponentTokenDefinition({
+  DEFAULT: {
+    border: { borderColor: "rgb(var(--color-slate-200))", borderRadius: "var(--border-radius-DEFAULT)" },
+    shadow: { boxShadow: "var(--box-shadow-DEFAULT)" }
+  },
+  "theme-marketing": {
+    border: { borderColor: "rgba(0, 0, 0, 0)", borderRadius: "2rem" },
+    shadow: { boxShadow: "0px 20px 48px rgba(73, 55, 54, 0.1)" }
+  }
+});
+
+// libs/css/component-tokens/src/component-tokens/ComponentTokens.ts
+var componentTokenDefinitions = {
+  card: CardTokenDefinition
+};
+
+// libs/css/component-tokens/src/component-tokens/ComponentTokenVariablesByThemeName.ts
+var getComponentTokenVariablesByThemeName = (theme, componentTokenDefinitions2) => {
+  const themeTokenObject = Object.fromEntries(
+    Object.entries(componentTokenDefinitions2).map(([componentName, componentThemes]) => [
+      componentName,
+      componentThemes[theme]
+    ])
+  );
+  return themeTokenObject;
+};
+
+// libs/css/component-tokens/src/component-tokens/pluginUtilityFunctions.ts
+var PREFIX = "component";
+var componentTokenAsCssVariableString = (component, token, cssProperty) => `var(--${PREFIX}-${component}-${token}-${cssProperty})`;
+var componentTokenToCSSProperties = (component, token, tokenObject) => {
+  return Object.fromEntries(
+    Object.keys(tokenObject).map((key) => [
+      key,
+      componentTokenAsCssVariableString(component, token, key)
+    ])
+  );
+};
+var getAllComponentTokenRules = (componentDefinitions) => {
+  const components = {};
+  Object.entries(componentDefinitions).forEach(
+    ([componentName, themes]) => Object.entries(themes.DEFAULT).forEach(([tokenName, value]) => {
+      const typedComponentName = componentName;
+      const typedTokenName = tokenName;
+      const selector = `.${PREFIX}-${typedComponentName}-${typedTokenName}`;
+      components[selector] = componentTokenToCSSProperties(typedComponentName, typedTokenName, value);
+    })
+  );
+  return components;
+};
+
+// libs/css/component-tokens/src/plugin.ts
+var cssVariablesDefinition = variablesToCSSRules({
+  DEFAULT: {
+    component: getComponentTokenVariablesByThemeName("DEFAULT", componentTokenDefinitions)
+  },
+  "theme-marketing": {
+    component: getComponentTokenVariablesByThemeName("theme-marketing", componentTokenDefinitions)
+  }
+});
+var ComponentTokensPlugin = (0, import_plugin2.default)(function({ addComponents }) {
+  addComponents(cssVariablesDefinition);
+  addComponents(getAllComponentTokenRules(componentTokenDefinitions));
+});
+
+// libs/css/component-tokens/src/index.ts
+var src_default = ComponentTokensPlugin;
+
 // libs/ui/design-tokens/src/tokens/colors/tailwindPalette.ts
 var tailwindPalette = {
   slate: {
@@ -629,7 +810,8 @@ var tailwindBaseConfig = {
         toast: withCustomPropertyValueAsComment("--z-toast")
       }
     })
-  }
+  },
+  plugins: [CssTailwindCustomPropertiesPlugin, src_default]
 };
 var tailwind_base_default = tailwindBaseConfig;
 // Annotate the CommonJS export names for ESM import in node: