@tenphi/tasty 0.0.0-snapshot.3f92d38 → 0.0.0-snapshot.561801c

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.
Files changed (6) hide show
  1. package/dist/styles/scrollbar.d.ts +1 -1
  2. package/dist/styles/scrollbar.js +3 -3
  3. package/dist/styles/scrollbar.js.map +1 -1
  4. package/dist/styles/types.d.ts +8 -8
  5. package/dist/tasty.d.ts +1 -1
  6. package/package.json +1 -1
package/dist/styles/scrollbar.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  //#region src/styles/scrollbar.d.ts
2
2
  interface ScrollbarStyleProps {
3
- scrollbar?: string | boolean;
3
+ scrollbar?: string | boolean | number;
4
4
  overflow?: string;
5
5
  }
6
6
  /**
package/dist/styles/scrollbar.js CHANGED
@@ -7,7 +7,7 @@ import { parseStyle } from "../utils/styles.js";
7
7
  * and `scrollbar-gutter`.
8
8
  */
9
9
  function scrollbarStyle({ scrollbar, overflow }) {
10
- if (!scrollbar) return;
10
+ if (!scrollbar && scrollbar !== 0) return;
11
11
  const value = scrollbar === true || scrollbar === "" ? "thin" : scrollbar;
12
12
  const { mods, colors, values } = parseStyle(String(value)).groups[0] ?? makeEmptyDetails();
13
13
  const defaultThumbColor = "var(--scrollbar-thumb-color)";
@@ -17,8 +17,8 @@ function scrollbarStyle({ scrollbar, overflow }) {
17
17
  style["scrollbar-width"] = "none";
18
18
  return style;
19
19
  }
20
- if (mods.includes("auto") || values.includes("auto")) style["scrollbar-width"] = "auto";
21
- else style["scrollbar-width"] = "thin";
20
+ if (mods.includes("thin")) style["scrollbar-width"] = "thin";
21
+ else if (mods.includes("auto") || values.includes("auto")) style["scrollbar-width"] = "auto";
22
22
  style["scrollbar-color"] = `${colors?.[0] || defaultThumbColor} ${colors?.[1] || defaultTrackColor}`;
23
23
  if (mods.includes("stable") || mods.includes("both-edges")) style["scrollbar-gutter"] = mods.includes("both-edges") ? "stable both-edges" : "stable";
24
24
  if (mods.includes("always")) {
package/dist/styles/scrollbar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"scrollbar.js","names":[],"sources":["../../src/styles/scrollbar.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\ninterface ScrollbarStyleProps {\n scrollbar?: string | boolean;\n overflow?: string;\n}\n\n/**\n * Standard CSS scrollbar styling via `scrollbar-width`, `scrollbar-color`,\n * and `scrollbar-gutter`.\n */\nexport function scrollbarStyle({\n scrollbar,\n overflow,\n}: ScrollbarStyleProps): Record<string, string> | undefined {\n if (!scrollbar) return;\n\n const value = scrollbar === true || scrollbar === '' ? 'thin' : scrollbar;\n const processed = parseStyle(String(value));\n const { mods, colors, values } = processed.groups[0] ?? makeEmptyDetails();\n\n const defaultThumbColor = 'var(--scrollbar-thumb-color)';\n const defaultTrackColor = 'var(--scrollbar-track-color, transparent)';\n\n const style: Record<string, string> = {};\n\n if (mods.includes('none')) {\n style['scrollbar-width'] = 'none';\n\n return style;\n }\n\n // `auto` is a VALUE_KEYWORD in the parser, so it lands in `values` not `mods`\n if (mods.includes('auto') || values.includes('auto')) {\n style['scrollbar-width'] = 'auto';\n } else {\n style['scrollbar-width'] = 'thin';\n }\n\n const thumbColor = colors?.[0] || defaultThumbColor;\n const trackColor = colors?.[1] || defaultTrackColor;\n style['scrollbar-color'] = `${thumbColor} ${trackColor}`;\n\n if (mods.includes('stable') || mods.includes('both-edges')) {\n style['scrollbar-gutter'] = mods.includes('both-edges')\n ? 'stable both-edges'\n : 'stable';\n }\n\n if (mods.includes('always')) {\n style['overflow'] = overflow || 'scroll';\n\n if (!style['scrollbar-gutter']) {\n style['scrollbar-gutter'] = 'stable';\n }\n }\n\n return style;\n}\n\nscrollbarStyle.__lookupStyles = ['scrollbar', 'overflow'];\n"],"mappings":";;;;;;;;AAYA,SAAgB,eAAe,EAC7B,WACA,YAC0D;AAC1D,KAAI,CAAC,UAAW;CAEhB,MAAM,QAAQ,cAAc,QAAQ,cAAc,KAAK,SAAS;CAEhE,MAAM,EAAE,MAAM,QAAQ,WADJ,WAAW,OAAO,MAAM,CAAC,CACA,OAAO,MAAM,kBAAkB;CAE1E,MAAM,oBAAoB;CAC1B,MAAM,oBAAoB;CAE1B,MAAM,QAAgC,EAAE;AAExC,KAAI,KAAK,SAAS,OAAO,EAAE;AACzB,QAAM,qBAAqB;AAE3B,SAAO;;AAIT,KAAI,KAAK,SAAS,OAAO,IAAI,OAAO,SAAS,OAAO,CAClD,OAAM,qBAAqB;KAE3B,OAAM,qBAAqB;AAK7B,OAAM,qBAAqB,GAFR,SAAS,MAAM,kBAEO,GADtB,SAAS,MAAM;AAGlC,KAAI,KAAK,SAAS,SAAS,IAAI,KAAK,SAAS,aAAa,CACxD,OAAM,sBAAsB,KAAK,SAAS,aAAa,GACnD,sBACA;AAGN,KAAI,KAAK,SAAS,SAAS,EAAE;AAC3B,QAAM,cAAc,YAAY;AAEhC,MAAI,CAAC,MAAM,oBACT,OAAM,sBAAsB;;AAIhC,QAAO;;AAGT,eAAe,iBAAiB,CAAC,aAAa,WAAW"}
1
+ {"version":3,"file":"scrollbar.js","names":[],"sources":["../../src/styles/scrollbar.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\ninterface ScrollbarStyleProps {\n scrollbar?: string | boolean | number;\n overflow?: string;\n}\n\n/**\n * Standard CSS scrollbar styling via `scrollbar-width`, `scrollbar-color`,\n * and `scrollbar-gutter`.\n */\nexport function scrollbarStyle({\n scrollbar,\n overflow,\n}: ScrollbarStyleProps): Record<string, string> | undefined {\n if (!scrollbar && scrollbar !== 0) return;\n\n const value = scrollbar === true || scrollbar === '' ? 'thin' : scrollbar;\n const processed = parseStyle(String(value));\n const { mods, colors, values } = processed.groups[0] ?? makeEmptyDetails();\n\n const defaultThumbColor = 'var(--scrollbar-thumb-color)';\n const defaultTrackColor = 'var(--scrollbar-track-color, transparent)';\n\n const style: Record<string, string> = {};\n\n if (mods.includes('none')) {\n style['scrollbar-width'] = 'none';\n\n return style;\n }\n\n if (mods.includes('thin')) {\n style['scrollbar-width'] = 'thin';\n } else if (mods.includes('auto') || values.includes('auto')) {\n style['scrollbar-width'] = 'auto';\n }\n\n const thumbColor = colors?.[0] || defaultThumbColor;\n const trackColor = colors?.[1] || defaultTrackColor;\n style['scrollbar-color'] = `${thumbColor} ${trackColor}`;\n\n if (mods.includes('stable') || mods.includes('both-edges')) {\n style['scrollbar-gutter'] = mods.includes('both-edges')\n ? 'stable both-edges'\n : 'stable';\n }\n\n if (mods.includes('always')) {\n style['overflow'] = overflow || 'scroll';\n\n if (!style['scrollbar-gutter']) {\n style['scrollbar-gutter'] = 'stable';\n }\n }\n\n return style;\n}\n\nscrollbarStyle.__lookupStyles = ['scrollbar', 'overflow'];\n"],"mappings":";;;;;;;;AAYA,SAAgB,eAAe,EAC7B,WACA,YAC0D;AAC1D,KAAI,CAAC,aAAa,cAAc,EAAG;CAEnC,MAAM,QAAQ,cAAc,QAAQ,cAAc,KAAK,SAAS;CAEhE,MAAM,EAAE,MAAM,QAAQ,WADJ,WAAW,OAAO,MAAM,CAAC,CACA,OAAO,MAAM,kBAAkB;CAE1E,MAAM,oBAAoB;CAC1B,MAAM,oBAAoB;CAE1B,MAAM,QAAgC,EAAE;AAExC,KAAI,KAAK,SAAS,OAAO,EAAE;AACzB,QAAM,qBAAqB;AAE3B,SAAO;;AAGT,KAAI,KAAK,SAAS,OAAO,CACvB,OAAM,qBAAqB;UAClB,KAAK,SAAS,OAAO,IAAI,OAAO,SAAS,OAAO,CACzD,OAAM,qBAAqB;AAK7B,OAAM,qBAAqB,GAFR,SAAS,MAAM,kBAEO,GADtB,SAAS,MAAM;AAGlC,KAAI,KAAK,SAAS,SAAS,IAAI,KAAK,SAAS,aAAa,CACxD,OAAM,sBAAsB,KAAK,SAAS,aAAa,GACnD,sBACA;AAGN,KAAI,KAAK,SAAS,SAAS,EAAE;AAC3B,QAAM,cAAc,YAAY;AAEhC,MAAI,CAAC,MAAM,oBACT,OAAM,sBAAsB;;AAIhC,QAAO;;AAGT,eAAe,iBAAiB,CAAC,aAAa,WAAW"}
package/dist/styles/types.d.ts CHANGED
@@ -128,20 +128,20 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
128
128
  */
129
129
  fade?: 'top' | 'right' | 'bottom' | 'left' | string;
130
130
  /**
131
- * Scrollbar styling using standard CSS properties (`scrollbar-width`, `scrollbar-color`, `scrollbar-gutter`).
131
+ * The scrollbar style provides a powerful and flexible way to control the appearance and behavior of scrollbars across browsers. It supports custom sizing, color, visibility, and advanced modifiers for modern UI needs.
132
132
  *
133
- * Syntax: `[modifiers...] [thumb-color] [track-color]`
133
+ * Syntax: `[modifiers] [size] [color1] [color2] [color3]`
134
134
  *
135
- * Modifiers: `thin`, `none`, `auto`, `stable`, `both-edges`, `always`
135
+ * Modifiers: `thin`, `none`, `auto`, `stable`, `both-edges`, `always`, `styled`
136
136
  *
137
137
  * Examples:
138
- * - `scrollbar={true}` // thin scrollbar, default colors
139
- * - `scrollbar="thin #purple.40 #dark.04"`
138
+ * - `scrollbar={true}` // thin scrollbar, default color
139
+ * - `scrollbar="thin 10px #purple.40 #dark.04"`
140
+ * - `scrollbar="styled 12px #purple.40 #dark.04 #white.10"`
140
141
  * - `scrollbar="none"`
141
- * - `scrollbar="always #primary.50 #white.02"`
142
- * - `scrollbar="thin stable #red #blue"`
142
+ * - `scrollbar="always 8px #primary.50 #white.02"`
143
143
  */
144
- scrollbar?: string | boolean;
144
+ scrollbar?: string | boolean | number;
145
145
  /**
146
146
  * Set font weight for bold texts.
147
147
  */
package/dist/tasty.d.ts CHANGED
@@ -959,7 +959,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
959
959
  image?: StyleValue<csstype.Property.BackgroundImage | undefined> | StyleValueStateMap<csstype.Property.BackgroundImage | undefined>;
960
960
  svgFill?: StyleValue<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.1` | `#${string}.2` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.01` | `#${string}.02` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.71` | `#${string}.72` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.10` | `#${string}.17` | `#${string}.11` | `#${string}.12` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.21` | `#${string}.22` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.30` | `#${string}.37` | `#${string}.31` | `#${string}.32` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.47` | `#${string}.41` | `#${string}.42` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.57` | `#${string}.51` | `#${string}.52` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.67` | `#${string}.61` | `#${string}.62` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.87` | `#${string}.81` | `#${string}.82` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.91` | `#${string}.92` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.1` | `#${string}.2` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.01` | `#${string}.02` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.71` | `#${string}.72` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.10` | `#${string}.17` | `#${string}.11` | `#${string}.12` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.21` | `#${string}.22` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.30` | `#${string}.37` | `#${string}.31` | `#${string}.32` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.47` | `#${string}.41` | `#${string}.42` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.57` | `#${string}.51` | `#${string}.52` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.67` | `#${string}.61` | `#${string}.62` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.87` | `#${string}.81` | `#${string}.82` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.91` | `#${string}.92` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
961
961
  fade?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
962
- scrollbar?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
962
+ scrollbar?: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined>;
963
963
  boldFontWeight?: StyleValue<number | undefined> | StyleValueStateMap<number | undefined>;
964
964
  hide?: StyleValue<boolean | undefined> | StyleValueStateMap<boolean | undefined>;
965
965
  shadow?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tenphi/tasty",
3
- "version": "0.0.0-snapshot.3f92d38",
3
+ "version": "0.0.0-snapshot.561801c",
4
4
  "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",