@pandacss/preset-open-props 0.0.0-dev-20231209011552

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Segun Adebayo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.mts

@@ -0,0 +1,107 @@
+import * as _pandacss_types from '@pandacss/types';
+
+declare const preset: {
+    theme: {
+        keyframes: {};
+        tokens: {
+            borderWidths: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            radii: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            easings: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            zIndex: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            letterSpacings: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            fonts: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            lineHeights: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            fontWeights: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            fontSizes: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            shadows: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            assets: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            gradients: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            colors: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            spacing: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            sizes: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            animations: _pandacss_types.Dict;
+        };
+        semanticTokens: {
+            animations: {};
+            shadows: {
+                [k: string]: {
+                    value: {
+                        _dark: string;
+                    };
+                };
+            };
+        };
+        breakpoints: {
+            xxs: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+        };
+    };
+    utilities: _pandacss_types.UtilityConfig;
+};
+
+export { preset as default, preset };

package/dist/index.d.ts

@@ -0,0 +1,107 @@
+import * as _pandacss_types from '@pandacss/types';
+
+declare const preset: {
+    theme: {
+        keyframes: {};
+        tokens: {
+            borderWidths: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            radii: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            easings: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            zIndex: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            letterSpacings: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            fonts: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            lineHeights: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            fontWeights: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            fontSizes: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            shadows: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            assets: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            gradients: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            colors: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            spacing: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            sizes: {
+                [k: string]: {
+                    value: string;
+                };
+            };
+            animations: _pandacss_types.Dict;
+        };
+        semanticTokens: {
+            animations: {};
+            shadows: {
+                [k: string]: {
+                    value: {
+                        _dark: string;
+                    };
+                };
+            };
+        };
+        breakpoints: {
+            xxs: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+        };
+    };
+    utilities: _pandacss_types.UtilityConfig;
+};
+
+export { preset as default, preset };

package/dist/index.js

@@ -0,0 +1,254 @@
+"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);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  default: () => src_default,
+  preset: () => preset
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/keyframes.ts
+var import_animations = __toESM(require("open-props/src/animations"));
+var import_easing = __toESM(require("open-props/src/easing"));
+
+// src/utils.ts
+var import_css = __toESM(require("css"));
+var camelize = (text) => {
+  return text.replace(/[-]+(.)?/g, (_, c) => c ? c.toUpperCase() : "").toLowerCase().replace(/^./, (match) => match.toLowerCase());
+};
+var transformOpenPropsObj = (obj, keyTransform = camelize, valueTransform = (text) => text) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [keyTransform(key), { value: valueTransform(value) }]));
+var cssKeyframesToObj = (_css) => {
+  const parsedCss = import_css.default.parse(_css);
+  const stylesheet = parsedCss.stylesheet;
+  if (!stylesheet)
+    return {};
+  function isKeyframe(rule2) {
+    return "keyframes" in rule2 && rule2.type === "keyframes";
+  }
+  const rule = stylesheet.rules[0];
+  if (!isKeyframe(rule) || !rule.keyframes)
+    return {};
+  return rule.keyframes.map((keyframe) => {
+    const key = keyframe.values.join(", ");
+    const value = keyframe.declarations?.map((decl) => ({
+      [decl.property]: decl.value
+    })).reduce((acc, nxt) => Object.assign({}, acc, nxt), {});
+    return { [key]: value };
+  }).reduce((acc, nxt) => Object.assign({}, acc, nxt), {});
+};
+
+// src/keyframes.ts
+var easings = transformOpenPropsObj(
+  import_easing.default,
+  (key) => key.replace("--ease-", ""),
+  (value) => value.replace("ease", "easings")
+);
+var _keyframes = Object.entries(import_animations.default).filter(([key]) => key.includes("@"));
+var keyframes = _keyframes.reduce((acc, [_key, value]) => {
+  const key = _key.replace(/--animation-(.*?)-@(.*)/, "$1");
+  const suffix = _key.includes("media:dark") ? "-dark" : "";
+  return Object.assign({}, acc, {
+    [key + suffix]: cssKeyframesToObj(value)
+  });
+}, {});
+var animations = Object.entries(import_animations.default).filter(([key]) => !key.includes("@")).reduce(
+  (acc, [key, value]) => Object.assign({}, acc, { [key.replace("--animation-", "")]: { value: value.replace("ease", "easings") } }),
+  {}
+);
+var semanticAnimations = _keyframes.filter(([key]) => key.includes("media:dark")).reduce((acc, [_key]) => {
+  const key = _key.replace(/--animation-(.*?)-@(.*)/, "$1");
+  const value = animations[key].value;
+  return Object.assign({}, acc, {
+    [key]: { value: { _dark: value.replace(key, key + "-dark") } }
+  });
+}, {});
+
+// src/breakpoints.ts
+var breakpoints = {
+  xxs: "240px",
+  xs: "360px",
+  sm: "480px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1440px",
+  xxl: "1920px"
+};
+
+// src/colors.ts
+var import_colors = __toESM(require("open-props/src/colors"));
+var import_colors_hsl = __toESM(require("open-props/src/colors-hsl"));
+var base = transformOpenPropsObj(import_colors.default);
+var hsl = transformOpenPropsObj(import_colors_hsl.default);
+var colors = Object.assign({}, base, hsl);
+
+// src/zIndex.ts
+var import_zindex = __toESM(require("open-props/src/zindex"));
+var zIndex = transformOpenPropsObj(import_zindex.default);
+
+// src/assets.ts
+var import_svg = __toESM(require("open-props/src/svg"));
+var assets = transformOpenPropsObj(import_svg.default);
+
+// src/gradients.ts
+var import_gradients = __toESM(require("open-props/src/gradients"));
+var noiseFilters = Object.fromEntries(
+  Object.entries(import_gradients.default).filter(([key]) => key.includes("-filter-")).map(([key, value]) => [camelize(key), value])
+);
+var gradients = Object.fromEntries(
+  Object.entries(import_gradients.default).filter(([key]) => !key.includes("-filter-")).map(([key, value]) => [camelize(key.replace("--gradient-", "")), { value }])
+);
+
+// src/borders.ts
+var import_borders = __toESM(require("open-props/src/borders"));
+var borderWidths = Object.fromEntries(
+  Object.entries(import_borders.default).filter(([key]) => key.includes("-size-")).map(([key, value]) => [key.replace("--border-size-", ""), { value }])
+);
+var radii = Object.fromEntries(
+  Object.entries(import_borders.default).filter(([key]) => !key.includes("-size-")).map(([key, value]) => [key.replace("--radius-", ""), { value }])
+);
+
+// src/shadows.ts
+var import_shadows = __toESM(require("open-props/src/shadows"));
+var _shadows = Object.entries(import_shadows.default).filter(([key]) => /--(shadow|inner-shadow)-\d+/.test(key));
+var _shadow_vars = Object.keys(import_shadows.default).filter(
+  (key) => !/--(shadow|inner-shadow)-\d+/.test(key) && !key.includes("media:dark")
+);
+var shadows = Object.fromEntries(
+  _shadows.map(([key, _value]) => {
+    const value = _shadow_vars.reduce((result, str) => {
+      return result.replaceAll(`var(${str})`, import_shadows.default[str]);
+    }, _value);
+    return [
+      camelize(key.replace("-shadow-", "")),
+      {
+        value
+      }
+    ];
+  })
+);
+var semanticShadows = Object.fromEntries(
+  _shadows.map(([key, _value]) => {
+    const value = _shadow_vars.reduce((result, str) => {
+      return result.replaceAll(`var(${str})`, import_shadows.default[str + "-@media:dark"]);
+    }, _value);
+    return [
+      camelize(key.replace("-shadow-", "")),
+      {
+        value: { _dark: value }
+      }
+    ];
+  })
+);
+
+// src/sizes.ts
+var import_sizes = __toESM(require("open-props/src/sizes"));
+var spacing = transformOpenPropsObj(import_sizes.default, (key) => key.replace("--size-", ""));
+var sizes = spacing;
+
+// src/typography.ts
+var import_fonts = __toESM(require("open-props/src/fonts"));
+var transformFonts = (_v) => {
+  const v = `--font-${_v}-`;
+  return Object.fromEntries(
+    Object.entries(import_fonts.default).filter(([key]) => key.startsWith(v)).map(([key, value]) => [key.replace(v, ""), { value }])
+  );
+};
+var fontWeights = transformFonts("weight");
+var lineHeights = transformFonts("lineheight");
+var letterSpacings = transformFonts("letterspacing");
+var fontSizes = transformFonts("size");
+var _fonts = ["sans", "serif", "mono"];
+var fonts = Object.fromEntries(_fonts.map((v) => [v, { value: import_fonts.default[`--font-${v}`] }]));
+
+// src/tokens.ts
+var defineTokens = (v) => v;
+var tokens = defineTokens({
+  borderWidths,
+  radii,
+  easings,
+  zIndex,
+  letterSpacings,
+  fonts,
+  lineHeights,
+  fontWeights,
+  fontSizes,
+  shadows,
+  assets,
+  gradients,
+  colors,
+  spacing,
+  sizes,
+  animations
+});
+
+// src/utilities.ts
+var import_masks = __toESM(require("open-props/src/masks.corner-cuts"));
+var import_masks2 = __toESM(require("open-props/src/masks.edges"));
+var masks = Object.fromEntries(
+  Object.entries(Object.assign({}, import_masks.default, import_masks2.default)).map(([key, value]) => [
+    camelize(key.replace("--mask-", "")),
+    value
+  ])
+);
+var utilities = {
+  WebkitMask: {
+    values: masks,
+    transform(value) {
+      return {
+        WebkitMask: value
+      };
+    }
+  },
+  filter: {
+    className: "filter",
+    values: noiseFilters
+  }
+};
+
+// src/index.ts
+var definePreset = (config) => config;
+var preset = definePreset({
+  theme: {
+    keyframes,
+    tokens,
+    semanticTokens: {
+      animations: semanticAnimations,
+      shadows: semanticShadows
+    },
+    breakpoints
+  },
+  utilities
+});
+var src_default = preset;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  preset
+});

package/dist/index.mjs

@@ -0,0 +1,217 @@
+// src/keyframes.ts
+import Animations from "open-props/src/animations";
+import Easings from "open-props/src/easing";
+
+// src/utils.ts
+import css from "css";
+var camelize = (text) => {
+  return text.replace(/[-]+(.)?/g, (_, c) => c ? c.toUpperCase() : "").toLowerCase().replace(/^./, (match) => match.toLowerCase());
+};
+var transformOpenPropsObj = (obj, keyTransform = camelize, valueTransform = (text) => text) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [keyTransform(key), { value: valueTransform(value) }]));
+var cssKeyframesToObj = (_css) => {
+  const parsedCss = css.parse(_css);
+  const stylesheet = parsedCss.stylesheet;
+  if (!stylesheet)
+    return {};
+  function isKeyframe(rule2) {
+    return "keyframes" in rule2 && rule2.type === "keyframes";
+  }
+  const rule = stylesheet.rules[0];
+  if (!isKeyframe(rule) || !rule.keyframes)
+    return {};
+  return rule.keyframes.map((keyframe) => {
+    const key = keyframe.values.join(", ");
+    const value = keyframe.declarations?.map((decl) => ({
+      [decl.property]: decl.value
+    })).reduce((acc, nxt) => Object.assign({}, acc, nxt), {});
+    return { [key]: value };
+  }).reduce((acc, nxt) => Object.assign({}, acc, nxt), {});
+};
+
+// src/keyframes.ts
+var easings = transformOpenPropsObj(
+  Easings,
+  (key) => key.replace("--ease-", ""),
+  (value) => value.replace("ease", "easings")
+);
+var _keyframes = Object.entries(Animations).filter(([key]) => key.includes("@"));
+var keyframes = _keyframes.reduce((acc, [_key, value]) => {
+  const key = _key.replace(/--animation-(.*?)-@(.*)/, "$1");
+  const suffix = _key.includes("media:dark") ? "-dark" : "";
+  return Object.assign({}, acc, {
+    [key + suffix]: cssKeyframesToObj(value)
+  });
+}, {});
+var animations = Object.entries(Animations).filter(([key]) => !key.includes("@")).reduce(
+  (acc, [key, value]) => Object.assign({}, acc, { [key.replace("--animation-", "")]: { value: value.replace("ease", "easings") } }),
+  {}
+);
+var semanticAnimations = _keyframes.filter(([key]) => key.includes("media:dark")).reduce((acc, [_key]) => {
+  const key = _key.replace(/--animation-(.*?)-@(.*)/, "$1");
+  const value = animations[key].value;
+  return Object.assign({}, acc, {
+    [key]: { value: { _dark: value.replace(key, key + "-dark") } }
+  });
+}, {});
+
+// src/breakpoints.ts
+var breakpoints = {
+  xxs: "240px",
+  xs: "360px",
+  sm: "480px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1440px",
+  xxl: "1920px"
+};
+
+// src/colors.ts
+import Colors from "open-props/src/colors";
+import ColorsHSL from "open-props/src/colors-hsl";
+var base = transformOpenPropsObj(Colors);
+var hsl = transformOpenPropsObj(ColorsHSL);
+var colors = Object.assign({}, base, hsl);
+
+// src/zIndex.ts
+import zindex from "open-props/src/zindex";
+var zIndex = transformOpenPropsObj(zindex);
+
+// src/assets.ts
+import svg from "open-props/src/svg";
+var assets = transformOpenPropsObj(svg);
+
+// src/gradients.ts
+import Gradients from "open-props/src/gradients";
+var noiseFilters = Object.fromEntries(
+  Object.entries(Gradients).filter(([key]) => key.includes("-filter-")).map(([key, value]) => [camelize(key), value])
+);
+var gradients = Object.fromEntries(
+  Object.entries(Gradients).filter(([key]) => !key.includes("-filter-")).map(([key, value]) => [camelize(key.replace("--gradient-", "")), { value }])
+);
+
+// src/borders.ts
+import Borders from "open-props/src/borders";
+var borderWidths = Object.fromEntries(
+  Object.entries(Borders).filter(([key]) => key.includes("-size-")).map(([key, value]) => [key.replace("--border-size-", ""), { value }])
+);
+var radii = Object.fromEntries(
+  Object.entries(Borders).filter(([key]) => !key.includes("-size-")).map(([key, value]) => [key.replace("--radius-", ""), { value }])
+);
+
+// src/shadows.ts
+import Shadows from "open-props/src/shadows";
+var _shadows = Object.entries(Shadows).filter(([key]) => /--(shadow|inner-shadow)-\d+/.test(key));
+var _shadow_vars = Object.keys(Shadows).filter(
+  (key) => !/--(shadow|inner-shadow)-\d+/.test(key) && !key.includes("media:dark")
+);
+var shadows = Object.fromEntries(
+  _shadows.map(([key, _value]) => {
+    const value = _shadow_vars.reduce((result, str) => {
+      return result.replaceAll(`var(${str})`, Shadows[str]);
+    }, _value);
+    return [
+      camelize(key.replace("-shadow-", "")),
+      {
+        value
+      }
+    ];
+  })
+);
+var semanticShadows = Object.fromEntries(
+  _shadows.map(([key, _value]) => {
+    const value = _shadow_vars.reduce((result, str) => {
+      return result.replaceAll(`var(${str})`, Shadows[str + "-@media:dark"]);
+    }, _value);
+    return [
+      camelize(key.replace("-shadow-", "")),
+      {
+        value: { _dark: value }
+      }
+    ];
+  })
+);
+
+// src/sizes.ts
+import Sizes from "open-props/src/sizes";
+var spacing = transformOpenPropsObj(Sizes, (key) => key.replace("--size-", ""));
+var sizes = spacing;
+
+// src/typography.ts
+import Fonts from "open-props/src/fonts";
+var transformFonts = (_v) => {
+  const v = `--font-${_v}-`;
+  return Object.fromEntries(
+    Object.entries(Fonts).filter(([key]) => key.startsWith(v)).map(([key, value]) => [key.replace(v, ""), { value }])
+  );
+};
+var fontWeights = transformFonts("weight");
+var lineHeights = transformFonts("lineheight");
+var letterSpacings = transformFonts("letterspacing");
+var fontSizes = transformFonts("size");
+var _fonts = ["sans", "serif", "mono"];
+var fonts = Object.fromEntries(_fonts.map((v) => [v, { value: Fonts[`--font-${v}`] }]));
+
+// src/tokens.ts
+var defineTokens = (v) => v;
+var tokens = defineTokens({
+  borderWidths,
+  radii,
+  easings,
+  zIndex,
+  letterSpacings,
+  fonts,
+  lineHeights,
+  fontWeights,
+  fontSizes,
+  shadows,
+  assets,
+  gradients,
+  colors,
+  spacing,
+  sizes,
+  animations
+});
+
+// src/utilities.ts
+import MaskCornerCuts from "open-props/src/masks.corner-cuts";
+import MaskEdges from "open-props/src/masks.edges";
+var masks = Object.fromEntries(
+  Object.entries(Object.assign({}, MaskCornerCuts, MaskEdges)).map(([key, value]) => [
+    camelize(key.replace("--mask-", "")),
+    value
+  ])
+);
+var utilities = {
+  WebkitMask: {
+    values: masks,
+    transform(value) {
+      return {
+        WebkitMask: value
+      };
+    }
+  },
+  filter: {
+    className: "filter",
+    values: noiseFilters
+  }
+};
+
+// src/index.ts
+var definePreset = (config) => config;
+var preset = definePreset({
+  theme: {
+    keyframes,
+    tokens,
+    semanticTokens: {
+      animations: semanticAnimations,
+      shadows: semanticShadows
+    },
+    breakpoints
+  },
+  utilities
+});
+var src_default = preset;
+export {
+  src_default as default,
+  preset
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@pandacss/preset-open-props",
+  "version": "0.0.0-dev-20231209011552",
+  "description": "A preset for Open Props",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "author": "Abraham Aremu <anubra266@gmail.com>",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "css": "^3.0.0",
+    "open-props": "^1.6.13",
+    "@pandacss/types": "0.0.0-dev-20231209011552"
+  },
+  "devDependencies": {
+    "@types/css": "^0.0.37"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "build-fast": "tsup src/index.ts --format=esm,cjs --no-dts",
+    "dev": "pnpm build-fast --watch"
+  }
+}