@likec4/styles 1.56.0 → 1.58.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/jsx/txt.mjs CHANGED
@@ -5,7 +5,7 @@ import { getTxtStyle } from '../patterns/txt.mjs';
5
5
  import { styled } from './factory.mjs';
6
6
 
7
7
  export const Txt = /* @__PURE__ */ forwardRef(function Txt(props, ref) {
8
- const [patternProps, restProps] = splitProps(props, ["inline","dimmed","lh","size","likec4color"])
8
+ const [patternProps, restProps] = splitProps(props, ["inline","dimmed","noUserSelect","lh","size","likec4color"])
9
9
 
10
10
  const styleProps = getTxtStyle(patternProps)
11
11
  const mergedProps = { ref, ...styleProps, ...restProps }
@@ -8,6 +8,7 @@ import type { Tokens } from '../tokens/index.d.mts';
8
8
  export interface TxtProperties {
9
9
  inline?: ConditionalValue<boolean>
10
10
  dimmed?: ConditionalValue<boolean>
11
+ noUserSelect?: ConditionalValue<boolean>
11
12
  lh?: ConditionalValue<Tokens["lineHeights"]>
12
13
  size?: ConditionalValue<"xxs" | "xs" | "sm" | "md" | "lg" | "xl">
13
14
  likec4color?: ConditionalValue<"amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "muted" | "primary" | "red" | "secondary" | "sky">
@@ -3,7 +3,7 @@ import { css } from '../css/index.mjs';
3
3
 
4
4
  const txtConfig = {
5
5
  transform(props, _helpers) {
6
- const { inline, size, dimmed, lh, likec4color, ...rest } = props;
6
+ const { inline, size, dimmed, lh, likec4color, noUserSelect, ...rest } = props;
7
7
  if (dimmed && likec4color) {
8
8
  throw new Error("dimmed and likec4color are mutually exclusive");
9
9
  }
@@ -14,10 +14,11 @@ transform(props, _helpers) {
14
14
  ...inline && { display: "inline-block" },
15
15
  ...lh && { lineHeight: lh },
16
16
  ...likec4color && { "data-likec4-color": likec4color },
17
+ ...noUserSelect && { userSelect: "none" },
17
18
  ...rest
18
19
  };
19
20
  },
20
- defaultValues:{inline:false,dimmed:false,size:'md'}}
21
+ defaultValues:{inline:false,dimmed:false,size:'md',noUserSelect:false}}
21
22
 
22
23
  export const getTxtStyle = (styles = {}) => {
23
24
  const _styles = getPatternStyles(txtConfig, styles)
@@ -3,10 +3,7 @@ import type { ConditionalValue } from '../types/index.d.mts';
3
3
  import type { DistributiveOmit, Pretty } from '../types/system-types.d.mts';
4
4
 
5
5
  interface Likec4tagVariant {
6
- /**
7
- * @default false
8
- */
9
- autoTextColor: boolean
6
+
10
7
  }
11
8
 
12
9
  type Likec4tagVariantMap = {
@@ -1,16 +1,9 @@
1
1
  import { memo, splitProps } from '../helpers.mjs';
2
2
  import { createRecipe, mergeRecipes } from './create-recipe.mjs';
3
3
 
4
- const likec4tagFn = /* @__PURE__ */ createRecipe('likec4-tag', {
5
- "autoTextColor": false
6
- }, [])
4
+ const likec4tagFn = /* @__PURE__ */ createRecipe('likec4-tag', {}, [])
7
5
 
8
- const likec4tagVariantMap = {
9
- "autoTextColor": [
10
- "false",
11
- "true"
12
- ]
13
- }
6
+ const likec4tagVariantMap = {}
14
7
 
15
8
  const likec4tagVariantKeys = Object.keys(likec4tagVariantMap)
16
9
 
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@likec4/styles",
3
3
  "description": "Shared PandaCSS preset and generated styles, used in LikeC4",
4
4
  "license": "MIT",
5
- "version": "1.56.0",
5
+ "version": "1.58.0",
6
6
  "bugs": "https://github.com/likec4/likec4/issues",
7
7
  "homepage": "https://likec4.dev",
8
8
  "author": "Denis Davydkov <denis@davydkov.com>",
@@ -77,10 +77,10 @@
77
77
  }
78
78
  },
79
79
  "dependencies": {
80
- "@pandacss/types": "^1.9.1"
80
+ "@pandacss/types": "^1.11.1"
81
81
  },
82
82
  "peerDependencies": {
83
- "@pandacss/dev": "^1.9.1",
83
+ "@pandacss/dev": "^1.11.1",
84
84
  "react": "^18.x || ^19.x"
85
85
  },
86
86
  "peerDependenciesMeta": {
@@ -92,21 +92,21 @@
92
92
  }
93
93
  },
94
94
  "devDependencies": {
95
- "@types/node": "~22.19.17",
95
+ "@types/node": "~22.19.19",
96
96
  "@pandabox/panda-plugins": "^0.0.8",
97
97
  "@pandabox/utils": "^0.0.5",
98
98
  "@pandabox/unplugin": "^0.2.2",
99
- "@pandacss/dev": "^1.9.1",
99
+ "@pandacss/dev": "^1.11.1",
100
100
  "@types/picomatch": "^4.0.3",
101
- "@types/react": "19.2.14",
102
- "postcss": "8.5.10",
103
- "remeda": "^2.33.7",
104
- "nano-spawn": "^2.0.0",
101
+ "@types/react": "19.2.16",
102
+ "postcss": "8.5.15",
103
+ "remeda": "^2.37.0",
104
+ "nano-spawn": "^2.1.0",
105
105
  "obuild": "0.4.31",
106
- "typescript": "5.9.3",
107
- "@likec4/style-preset": "1.56.0",
108
- "@likec4/tsconfig": "1.56.0",
109
- "@likec4/devops": "1.42.0"
106
+ "typescript": "6.0.3",
107
+ "@likec4/style-preset": "1.58.0",
108
+ "@likec4/tsconfig": "1.58.0",
109
+ "@likec4/devops": "1.58.0"
110
110
  },
111
111
  "scripts": {
112
112
  "typecheck": "tsc --noEmit",
@@ -1,6 +1,6 @@
1
1
  import { r as colors_exports } from "./@radix-ui/colors.mjs";
2
2
  import { definePreset } from "@pandacss/dev";
3
- //#region ../../node_modules/.pnpm/pandacss-preset-radix-colors@0.2.1_@pandacss+dev@1.9.1_typescript@5.9.3__@radix-ui+colors@3.0.0/node_modules/pandacss-preset-radix-colors/index.mjs
3
+ //#region ../../node_modules/.pnpm/pandacss-preset-radix-colors@0.2.1_@pandacss+dev@1.11.1_typescript@6.0.3__@radix-ui+colors@3.0.0/node_modules/pandacss-preset-radix-colors/index.mjs
4
4
  var SCALE_TAGS_REGEX = new RegExp(`(${["P3"].join("|")})|(?=[A-Z0-9])`, "g");
5
5
  function getScaleTags(fullName) {
6
6
  return fullName.split(SCALE_TAGS_REGEX).filter(Boolean).map((x) => x.toLowerCase());
@@ -1,4 +1,4 @@
1
- //#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/lazyDataLastImpl-DtF3cihj.js
1
+ //#region ../../node_modules/.pnpm/remeda@2.37.0/node_modules/remeda/dist/lazyDataLastImpl-DtF3cihj.js
2
2
  function e$4(e, t, n) {
3
3
  let r = (n) => e(n, ...t);
4
4
  return n === void 0 ? r : Object.assign(r, {
@@ -7,7 +7,7 @@ function e$4(e, t, n) {
7
7
  });
8
8
  }
9
9
  //#endregion
10
- //#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/purry.js
10
+ //#region ../../node_modules/.pnpm/remeda@2.37.0/node_modules/remeda/dist/purry.js
11
11
  function t$10(t, n, r) {
12
12
  let i = t.length - n.length;
13
13
  if (i === 0) return t(...n);
@@ -15,7 +15,7 @@ function t$10(t, n, r) {
15
15
  throw Error(`Wrong number of arguments`);
16
16
  }
17
17
  //#endregion
18
- //#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/capitalize.js
18
+ //#region ../../node_modules/.pnpm/remeda@2.37.0/node_modules/remeda/dist/capitalize.js
19
19
  function t$9(...t) {
20
20
  return t$10(n$6, t);
21
21
  }
@@ -24,7 +24,7 @@ const n$6 = (e) => `${e[0]?.toUpperCase() ?? ``}${e.slice(1)}`, t$8 = {
24
24
  hasNext: !1
25
25
  };
26
26
  //#endregion
27
- //#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/pipe.js
27
+ //#region ../../node_modules/.pnpm/remeda@2.37.0/node_modules/remeda/dist/pipe.js
28
28
  function t$7(e, ...t) {
29
29
  let a = e, o = t.map((e) => `lazy` in e ? r(e) : void 0), s = 0;
30
30
  for (; s < t.length;) {
@@ -74,23 +74,23 @@ function i(e) {
74
74
  return typeof e == `string` || typeof e == `object` && !!e && Symbol.iterator in e;
75
75
  }
76
76
  //#endregion
77
- //#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/hasAtLeast.js
77
+ //#region ../../node_modules/.pnpm/remeda@2.37.0/node_modules/remeda/dist/hasAtLeast.js
78
78
  function t$6(...t) {
79
79
  return t$10(n$3, t);
80
80
  }
81
81
  const n$3 = (e, t) => e.length >= t;
82
82
  //#endregion
83
- //#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/isString.js
83
+ //#region ../../node_modules/.pnpm/remeda@2.37.0/node_modules/remeda/dist/isString.js
84
84
  function e$2(e) {
85
85
  return typeof e == `string`;
86
86
  }
87
87
  //#endregion
88
- //#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/keys.js
88
+ //#region ../../node_modules/.pnpm/remeda@2.37.0/node_modules/remeda/dist/keys.js
89
89
  function t$5(...t) {
90
90
  return t$10(Object.keys, t);
91
91
  }
92
92
  //#endregion
93
- //#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/mapKeys.js
93
+ //#region ../../node_modules/.pnpm/remeda@2.37.0/node_modules/remeda/dist/mapKeys.js
94
94
  function t$4(...t) {
95
95
  return t$10(n$2, t);
96
96
  }
@@ -103,7 +103,7 @@ function n$2(e, t) {
103
103
  return n;
104
104
  }
105
105
  //#endregion
106
- //#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/mapToObj.js
106
+ //#region ../../node_modules/.pnpm/remeda@2.37.0/node_modules/remeda/dist/mapToObj.js
107
107
  function t$3(...t) {
108
108
  return t$10(n$1, t);
109
109
  }
@@ -116,7 +116,7 @@ function n$1(e, t) {
116
116
  return n;
117
117
  }
118
118
  //#endregion
119
- //#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/mapValues.js
119
+ //#region ../../node_modules/.pnpm/remeda@2.37.0/node_modules/remeda/dist/mapValues.js
120
120
  function t$2(...t) {
121
121
  return t$10(n, t);
122
122
  }
@@ -126,7 +126,7 @@ function n(e, t) {
126
126
  return n;
127
127
  }
128
128
  //#endregion
129
- //#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/prop.js
129
+ //#region ../../node_modules/.pnpm/remeda@2.37.0/node_modules/remeda/dist/prop.js
130
130
  function e$1(e, ...n) {
131
131
  return typeof e == `string` || typeof e == `number` || typeof e == `symbol` ? (r) => t$1(r, e, ...n) : t$1(e, ...n);
132
132
  }
package/preset/preset.mjs CHANGED
@@ -79,7 +79,6 @@ function __v(key, defaultTo) {
79
79
  //#endregion
80
80
  //#region ../preset/src/const.ts
81
81
  const root = ".likec4-root";
82
- `${root}`;
83
82
  //#endregion
84
83
  //#region ../preset/src/defaults/element-colors.ts
85
84
  const blue$1 = {
@@ -1595,6 +1594,8 @@ const layerStyles = /* @__PURE__ */ defineLayerStyles({ likec4: {
1595
1594
  }
1596
1595
  }
1597
1596
  } });
1597
+ //#endregion
1598
+ //#region ../preset/src/pattens/index.ts
1598
1599
  const patterns = { extend: {
1599
1600
  vstack: { defaultValues: {
1600
1601
  alignItems: "stretch",
@@ -1604,8 +1605,18 @@ const patterns = { extend: {
1604
1605
  box: { jsx: ["Box", "MarkdownBlock"] },
1605
1606
  txt: definePattern({
1606
1607
  properties: {
1607
- inline: { type: "boolean" },
1608
- dimmed: { type: "boolean" },
1608
+ inline: {
1609
+ description: "Whether the text should be inline (default: false)",
1610
+ type: "boolean"
1611
+ },
1612
+ dimmed: {
1613
+ description: "Whether the text should be dimmed (default: false)",
1614
+ type: "boolean"
1615
+ },
1616
+ noUserSelect: {
1617
+ description: "Whether the text should not be selectable (default: false)",
1618
+ type: "boolean"
1619
+ },
1609
1620
  lh: {
1610
1621
  type: "token",
1611
1622
  value: "lineHeights"
@@ -1629,10 +1640,11 @@ const patterns = { extend: {
1629
1640
  defaultValues: {
1630
1641
  inline: false,
1631
1642
  dimmed: false,
1632
- size: "md"
1643
+ size: "md",
1644
+ noUserSelect: false
1633
1645
  },
1634
1646
  transform(props, _helpers) {
1635
- const { inline, size, dimmed, lh, likec4color, ...rest } = props;
1647
+ const { inline, size, dimmed, lh, likec4color, noUserSelect, ...rest } = props;
1636
1648
  if (dimmed && likec4color) throw new Error("dimmed and likec4color are mutually exclusive");
1637
1649
  return {
1638
1650
  userSelect: "all",
@@ -1641,6 +1653,7 @@ const patterns = { extend: {
1641
1653
  ...inline && { display: "inline-block" },
1642
1654
  ...lh && { lineHeight: lh },
1643
1655
  ...likec4color && { "data-likec4-color": likec4color },
1656
+ ...noUserSelect && { userSelect: "none" },
1644
1657
  ...rest
1645
1658
  };
1646
1659
  },
@@ -2727,29 +2740,13 @@ const likec4tag = defineRecipe({
2727
2740
  layerStyle: "likec4.tag",
2728
2741
  whiteSpace: "nowrap",
2729
2742
  px: "1",
2730
- py: "0"
2731
- },
2732
- variants: { autoTextColor: {
2733
- false: { "& > span": {
2743
+ py: "0",
2744
+ "& > span": {
2734
2745
  color: "likec4.tag.text",
2735
2746
  _first: { opacity: .65 }
2736
- } },
2737
- true: { "& > span": {
2738
- color: "transparent",
2739
- filter: "invert(1) grayscale(1) brightness(1.3) contrast(1000)",
2740
- backgroundColor: "likec4.tag.bg",
2741
- backgroundClip: "text",
2742
- mixBlendMode: {
2743
- base: "plus-lighter",
2744
- _print: "normal!"
2745
- }
2746
- } }
2747
- } },
2748
- defaultVariants: { autoTextColor: false },
2749
- staticCss: [{
2750
- autoTextColor: ["true", "false"],
2751
- conditions: ["hover"]
2752
- }]
2747
+ }
2748
+ },
2749
+ staticCss: [{ conditions: ["hover"] }]
2753
2750
  });
2754
2751
  //#endregion
2755
2752
  //#region ../preset/src/recipes/markdownBlock.ts
@@ -3183,7 +3180,11 @@ const overlay = defineRecipe({
3183
3180
  [inset]: "calc((1 + var(--_level) * 0.75) * var(--_offset))",
3184
3181
  [backdropOpacity]: "0%",
3185
3182
  [borderRadius]: "0px",
3186
- _backdrop: { cursor: "zoom-out" },
3183
+ _backdrop: {
3184
+ cursor: "zoom-out",
3185
+ backdropFilter: `blur(var(${backdropBlur}))`,
3186
+ background: `color-mix(in oklab, {colors.likec4.overlay.backdrop} var(${backdropOpacity}), transparent)`
3187
+ },
3187
3188
  inset: "0",
3188
3189
  padding: "0"
3189
3190
  },
@@ -3222,21 +3223,19 @@ const overlay = defineRecipe({
3222
3223
  } }
3223
3224
  },
3224
3225
  withBackdrop: {
3225
- false: { dialog: { _backdrop: { display: "none" } } },
3226
- true: { dialog: { _backdrop: {
3227
- backdropFilter: `blur(var(${backdropBlur}))`,
3228
- background: `color-mix(in oklab, {colors.likec4.overlay.backdrop} var(${backdropOpacity}), transparent)`
3229
- } } }
3226
+ false: { dialog: { _backdrop: {
3227
+ display: "none",
3228
+ backdropFilter: "none",
3229
+ background: "[transparent]"
3230
+ } } },
3231
+ true: {}
3230
3232
  }
3231
3233
  },
3232
3234
  defaultVariants: {
3233
3235
  fullscreen: false,
3234
3236
  withBackdrop: true
3235
3237
  },
3236
- staticCss: [{
3237
- fullscreen: ["*"],
3238
- withBackdrop: ["*"]
3239
- }]
3238
+ staticCss: ["*"]
3240
3239
  });
3241
3240
  //#endregion
3242
3241
  //#region ../preset/src/recipes/index.ts