@umami/react-zen 0.218.0 → 0.220.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.
Files changed (7) hide show
  1. package/dist/index.d.mts +20 -7
  2. package/dist/index.d.ts +20 -7
  3. package/dist/index.js +198 -21
  4. package/dist/index.mjs +199 -22
  5. package/package.json +1 -1
  6. package/styles.css +61 -0
  7. package/styles.full.css +1 -1
package/dist/index.d.mts CHANGED
@@ -80,6 +80,12 @@ type TextWrap = 'wrap' | 'nowrap' | 'pretty' | 'balance';
80
80
  type TextAlign = 'left' | 'center' | 'right';
81
81
  type TextTransform = 'capitalize' | 'uppercase' | 'lowercase' | 'none';
82
82
  type LetterSpacing = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
83
+ type LineHeight = 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10';
84
+ type Whitespace = 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap' | 'break-spaces';
85
+ type WordBreak = 'normal' | 'words' | 'all' | 'keep';
86
+ type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'sub' | 'super';
87
+ type TextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
88
+ type TextIndent = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '14' | '16' | '20' | '24';
83
89
  type FlexDisplay = 'none' | 'flex' | 'inline-flex';
84
90
  type FlexDirection = 'column' | 'row' | 'row-reverse' | 'column-reverse';
85
91
  type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
@@ -87,8 +93,8 @@ type FlexGrow = string | number;
87
93
  type FlexShrink = string | number;
88
94
  type GridDisplay = 'none' | 'grid' | 'inline-grid';
89
95
  type GridAutoFlow = 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';
90
- type GridTemplateRows = string;
91
- type GridTemplateColumns = string;
96
+ type GridColumns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none' | 'subgrid';
97
+ type GridRows = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none' | 'subgrid';
92
98
  type GridTemplateAreas = string;
93
99
  type JustifyContent = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
94
100
  type JustifyItems = 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline';
@@ -121,15 +127,22 @@ declare function resolveRender<P extends Record<string, unknown>>(render: Render
121
127
  interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
122
128
  color?: FontColor;
123
129
  size?: Responsive<FontSize>;
124
- spacing?: Responsive<LetterSpacing>;
125
130
  weight?: Responsive<FontWeight>;
126
131
  align?: Responsive<TextAlign>;
132
+ spacing?: Responsive<LetterSpacing>;
133
+ lineHeight?: Responsive<LineHeight>;
127
134
  wrap?: Responsive<TextWrap>;
135
+ whitespace?: Responsive<Whitespace>;
136
+ wordBreak?: Responsive<WordBreak>;
128
137
  transform?: Responsive<TextTransform>;
138
+ indent?: Responsive<TextIndent>;
139
+ verticalAlign?: Responsive<VerticalAlign>;
129
140
  truncate?: Responsive<boolean>;
130
141
  italic?: Responsive<boolean>;
131
142
  underline?: Responsive<boolean>;
132
143
  strikethrough?: Responsive<boolean>;
144
+ decorationStyle?: Responsive<TextDecorationStyle>;
145
+ decorationColor?: FontColor;
133
146
  as?: 'span' | 'div' | 'label' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'blockquote';
134
147
  render?: RenderProp<TextRenderProps>;
135
148
  }
@@ -138,7 +151,7 @@ interface TextRenderProps {
138
151
  children?: ReactNode;
139
152
  [key: string]: unknown;
140
153
  }
141
- declare function Text({ color, size, spacing, weight, align, wrap, transform, truncate, italic, underline, strikethrough, as, render, className, children, ...props }: TextProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
154
+ declare function Text({ color, size, weight, align, spacing, lineHeight, wrap, whitespace, wordBreak, transform, indent, verticalAlign, truncate, italic, underline, strikethrough, decorationStyle, decorationColor, as, render, className, children, ...props }: TextProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
142
155
 
143
156
  interface BlockquoteProps extends Omit<TextProps, 'as'> {
144
157
  }
@@ -373,8 +386,8 @@ interface GridProps extends Omit<BoxProps, 'display'> {
373
386
  gapX?: Responsive<Gap>;
374
387
  gapY?: Responsive<Gap>;
375
388
  autoFlow?: Responsive<GridAutoFlow>;
376
- rows?: GridTemplateRows;
377
- columns?: GridTemplateColumns;
389
+ rows?: Responsive<GridRows> | string;
390
+ columns?: Responsive<GridColumns> | string;
378
391
  areas?: GridTemplateAreas;
379
392
  }
380
393
  declare function Grid({ display, justifyContent, justifyItems, alignContent, alignItems, gap, gapX, gapY, autoFlow, rows, columns, areas, className, style, children, ...props }: GridProps): react_jsx_runtime.JSX.Element;
@@ -416,7 +429,7 @@ declare function Tooltip({ children, className, showArrow, ...props }: TooltipPr
416
429
  interface TooltipBubbleProps extends HTMLAttributes<HTMLDivElement> {
417
430
  showArrow?: boolean;
418
431
  }
419
- declare function TooltipBubble({ showArrow, children, className, color: _color, ...props }: TooltipBubbleProps): react_jsx_runtime.JSX.Element;
432
+ declare function TooltipBubble({ children, className, color: _color, ...props }: TooltipBubbleProps): react_jsx_runtime.JSX.Element;
420
433
 
421
434
  interface FloatingTooltipProps extends TooltipBubbleProps {
422
435
  }
package/dist/index.d.ts CHANGED
@@ -80,6 +80,12 @@ type TextWrap = 'wrap' | 'nowrap' | 'pretty' | 'balance';
80
80
  type TextAlign = 'left' | 'center' | 'right';
81
81
  type TextTransform = 'capitalize' | 'uppercase' | 'lowercase' | 'none';
82
82
  type LetterSpacing = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
83
+ type LineHeight = 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10';
84
+ type Whitespace = 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap' | 'break-spaces';
85
+ type WordBreak = 'normal' | 'words' | 'all' | 'keep';
86
+ type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'sub' | 'super';
87
+ type TextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
88
+ type TextIndent = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '14' | '16' | '20' | '24';
83
89
  type FlexDisplay = 'none' | 'flex' | 'inline-flex';
84
90
  type FlexDirection = 'column' | 'row' | 'row-reverse' | 'column-reverse';
85
91
  type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
@@ -87,8 +93,8 @@ type FlexGrow = string | number;
87
93
  type FlexShrink = string | number;
88
94
  type GridDisplay = 'none' | 'grid' | 'inline-grid';
89
95
  type GridAutoFlow = 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';
90
- type GridTemplateRows = string;
91
- type GridTemplateColumns = string;
96
+ type GridColumns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none' | 'subgrid';
97
+ type GridRows = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none' | 'subgrid';
92
98
  type GridTemplateAreas = string;
93
99
  type JustifyContent = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
94
100
  type JustifyItems = 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline';
@@ -121,15 +127,22 @@ declare function resolveRender<P extends Record<string, unknown>>(render: Render
121
127
  interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
122
128
  color?: FontColor;
123
129
  size?: Responsive<FontSize>;
124
- spacing?: Responsive<LetterSpacing>;
125
130
  weight?: Responsive<FontWeight>;
126
131
  align?: Responsive<TextAlign>;
132
+ spacing?: Responsive<LetterSpacing>;
133
+ lineHeight?: Responsive<LineHeight>;
127
134
  wrap?: Responsive<TextWrap>;
135
+ whitespace?: Responsive<Whitespace>;
136
+ wordBreak?: Responsive<WordBreak>;
128
137
  transform?: Responsive<TextTransform>;
138
+ indent?: Responsive<TextIndent>;
139
+ verticalAlign?: Responsive<VerticalAlign>;
129
140
  truncate?: Responsive<boolean>;
130
141
  italic?: Responsive<boolean>;
131
142
  underline?: Responsive<boolean>;
132
143
  strikethrough?: Responsive<boolean>;
144
+ decorationStyle?: Responsive<TextDecorationStyle>;
145
+ decorationColor?: FontColor;
133
146
  as?: 'span' | 'div' | 'label' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'blockquote';
134
147
  render?: RenderProp<TextRenderProps>;
135
148
  }
@@ -138,7 +151,7 @@ interface TextRenderProps {
138
151
  children?: ReactNode;
139
152
  [key: string]: unknown;
140
153
  }
141
- declare function Text({ color, size, spacing, weight, align, wrap, transform, truncate, italic, underline, strikethrough, as, render, className, children, ...props }: TextProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
154
+ declare function Text({ color, size, weight, align, spacing, lineHeight, wrap, whitespace, wordBreak, transform, indent, verticalAlign, truncate, italic, underline, strikethrough, decorationStyle, decorationColor, as, render, className, children, ...props }: TextProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
142
155
 
143
156
  interface BlockquoteProps extends Omit<TextProps, 'as'> {
144
157
  }
@@ -373,8 +386,8 @@ interface GridProps extends Omit<BoxProps, 'display'> {
373
386
  gapX?: Responsive<Gap>;
374
387
  gapY?: Responsive<Gap>;
375
388
  autoFlow?: Responsive<GridAutoFlow>;
376
- rows?: GridTemplateRows;
377
- columns?: GridTemplateColumns;
389
+ rows?: Responsive<GridRows> | string;
390
+ columns?: Responsive<GridColumns> | string;
378
391
  areas?: GridTemplateAreas;
379
392
  }
380
393
  declare function Grid({ display, justifyContent, justifyItems, alignContent, alignItems, gap, gapX, gapY, autoFlow, rows, columns, areas, className, style, children, ...props }: GridProps): react_jsx_runtime.JSX.Element;
@@ -416,7 +429,7 @@ declare function Tooltip({ children, className, showArrow, ...props }: TooltipPr
416
429
  interface TooltipBubbleProps extends HTMLAttributes<HTMLDivElement> {
417
430
  showArrow?: boolean;
418
431
  }
419
- declare function TooltipBubble({ showArrow, children, className, color: _color, ...props }: TooltipBubbleProps): react_jsx_runtime.JSX.Element;
432
+ declare function TooltipBubble({ children, className, color: _color, ...props }: TooltipBubbleProps): react_jsx_runtime.JSX.Element;
420
433
 
421
434
  interface FloatingTooltipProps extends TooltipBubbleProps {
422
435
  }
package/dist/index.js CHANGED
@@ -41,7 +41,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
41
41
  }
42
42
  var objectIs = "function" === typeof Object.is ? Object.is : is2;
43
43
  var useState18 = React5.useState;
44
- var useEffect12 = React5.useEffect;
44
+ var useEffect13 = React5.useEffect;
45
45
  var useLayoutEffect3 = React5.useLayoutEffect;
46
46
  var useDebugValue = React5.useDebugValue;
47
47
  function useSyncExternalStore$2(subscribe, getSnapshot) {
@@ -54,7 +54,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
54
54
  },
55
55
  [subscribe, value, getSnapshot]
56
56
  );
57
- useEffect12(
57
+ useEffect13(
58
58
  function() {
59
59
  checkIfSnapshotChanged(inst) && forceUpdate({ inst });
60
60
  return subscribe(function() {
@@ -115,7 +115,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
115
115
  },
116
116
  [subscribe, value, getSnapshot]
117
117
  );
118
- useEffect12(
118
+ useEffect13(
119
119
  function() {
120
120
  checkIfSnapshotChanged(inst) && forceUpdate({ inst });
121
121
  return subscribe(function() {
@@ -141,7 +141,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
141
141
  return getSnapshot();
142
142
  }
143
143
  "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
144
- var React5 = import_react204.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = React5.useState, useEffect12 = React5.useEffect, useLayoutEffect3 = React5.useLayoutEffect, useDebugValue = React5.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
144
+ var React5 = import_react204.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = React5.useState, useEffect13 = React5.useEffect, useLayoutEffect3 = React5.useLayoutEffect, useDebugValue = React5.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
145
145
  exports.useSyncExternalStore = void 0 !== React5.useSyncExternalStore ? React5.useSyncExternalStore : shim;
146
146
  "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
147
147
  })();
@@ -31024,6 +31024,77 @@ var letterSpacingMap = {
31024
31024
  wider: "tracking-wider",
31025
31025
  widest: "tracking-widest"
31026
31026
  };
31027
+ var lineHeightMap = {
31028
+ none: "leading-none",
31029
+ tight: "leading-tight",
31030
+ snug: "leading-snug",
31031
+ normal: "leading-normal",
31032
+ relaxed: "leading-relaxed",
31033
+ loose: "leading-loose",
31034
+ "3": "leading-3",
31035
+ "4": "leading-4",
31036
+ "5": "leading-5",
31037
+ "6": "leading-6",
31038
+ "7": "leading-7",
31039
+ "8": "leading-8",
31040
+ "9": "leading-9",
31041
+ "10": "leading-10"
31042
+ };
31043
+ var whitespaceMap = {
31044
+ normal: "whitespace-normal",
31045
+ nowrap: "whitespace-nowrap",
31046
+ pre: "whitespace-pre",
31047
+ "pre-line": "whitespace-pre-line",
31048
+ "pre-wrap": "whitespace-pre-wrap",
31049
+ "break-spaces": "whitespace-break-spaces"
31050
+ };
31051
+ var wordBreakMap = {
31052
+ normal: "break-normal",
31053
+ words: "break-words",
31054
+ all: "break-all",
31055
+ keep: "break-keep"
31056
+ };
31057
+ var verticalAlignMap = {
31058
+ baseline: "align-baseline",
31059
+ top: "align-top",
31060
+ middle: "align-middle",
31061
+ bottom: "align-bottom",
31062
+ "text-top": "align-text-top",
31063
+ "text-bottom": "align-text-bottom",
31064
+ sub: "align-sub",
31065
+ super: "align-super"
31066
+ };
31067
+ var textDecorationStyleMap = {
31068
+ solid: "decoration-solid",
31069
+ double: "decoration-double",
31070
+ dotted: "decoration-dotted",
31071
+ dashed: "decoration-dashed",
31072
+ wavy: "decoration-wavy"
31073
+ };
31074
+ var textIndentMap = {
31075
+ "0": "indent-0",
31076
+ px: "indent-px",
31077
+ "0.5": "indent-0.5",
31078
+ "1": "indent-1",
31079
+ "1.5": "indent-1.5",
31080
+ "2": "indent-2",
31081
+ "2.5": "indent-2.5",
31082
+ "3": "indent-3",
31083
+ "3.5": "indent-3.5",
31084
+ "4": "indent-4",
31085
+ "5": "indent-5",
31086
+ "6": "indent-6",
31087
+ "7": "indent-7",
31088
+ "8": "indent-8",
31089
+ "9": "indent-9",
31090
+ "10": "indent-10",
31091
+ "11": "indent-11",
31092
+ "12": "indent-12",
31093
+ "14": "indent-14",
31094
+ "16": "indent-16",
31095
+ "20": "indent-20",
31096
+ "24": "indent-24"
31097
+ };
31027
31098
  var gridAutoFlowMap = {
31028
31099
  row: "grid-flow-row",
31029
31100
  column: "grid-flow-col",
@@ -31031,6 +31102,38 @@ var gridAutoFlowMap = {
31031
31102
  "row-dense": "grid-flow-row-dense",
31032
31103
  "column-dense": "grid-flow-col-dense"
31033
31104
  };
31105
+ var gridColumnsMap = {
31106
+ "1": "grid-cols-1",
31107
+ "2": "grid-cols-2",
31108
+ "3": "grid-cols-3",
31109
+ "4": "grid-cols-4",
31110
+ "5": "grid-cols-5",
31111
+ "6": "grid-cols-6",
31112
+ "7": "grid-cols-7",
31113
+ "8": "grid-cols-8",
31114
+ "9": "grid-cols-9",
31115
+ "10": "grid-cols-10",
31116
+ "11": "grid-cols-11",
31117
+ "12": "grid-cols-12",
31118
+ none: "grid-cols-none",
31119
+ subgrid: "grid-cols-subgrid"
31120
+ };
31121
+ var gridRowsMap = {
31122
+ "1": "grid-rows-1",
31123
+ "2": "grid-rows-2",
31124
+ "3": "grid-rows-3",
31125
+ "4": "grid-rows-4",
31126
+ "5": "grid-rows-5",
31127
+ "6": "grid-rows-6",
31128
+ "7": "grid-rows-7",
31129
+ "8": "grid-rows-8",
31130
+ "9": "grid-rows-9",
31131
+ "10": "grid-rows-10",
31132
+ "11": "grid-rows-11",
31133
+ "12": "grid-rows-12",
31134
+ none: "grid-rows-none",
31135
+ subgrid: "grid-rows-subgrid"
31136
+ };
31034
31137
  var borderMap = {
31035
31138
  true: "border border-edge",
31036
31139
  none: "border-0",
@@ -31167,9 +31270,33 @@ function mapTextTransform(value) {
31167
31270
  function mapLetterSpacing(value) {
31168
31271
  return mapResponsive(value, (v) => letterSpacingMap[v]);
31169
31272
  }
31273
+ function mapLineHeight(value) {
31274
+ return mapResponsive(value, (v) => lineHeightMap[v]);
31275
+ }
31276
+ function mapWhitespace(value) {
31277
+ return mapResponsive(value, (v) => whitespaceMap[v]);
31278
+ }
31279
+ function mapWordBreak(value) {
31280
+ return mapResponsive(value, (v) => wordBreakMap[v]);
31281
+ }
31282
+ function mapVerticalAlign(value) {
31283
+ return mapResponsive(value, (v) => verticalAlignMap[v]);
31284
+ }
31285
+ function mapTextDecorationStyle(value) {
31286
+ return mapResponsive(value, (v) => textDecorationStyleMap[v]);
31287
+ }
31288
+ function mapTextIndent(value) {
31289
+ return mapResponsive(value, (v) => textIndentMap[v]);
31290
+ }
31170
31291
  function mapGridAutoFlow(value) {
31171
31292
  return mapResponsive(value, (v) => gridAutoFlowMap[v]);
31172
31293
  }
31294
+ function mapGridColumns(value) {
31295
+ return mapResponsive(value, (v) => gridColumnsMap[v]);
31296
+ }
31297
+ function mapGridRows(value) {
31298
+ return mapResponsive(value, (v) => gridRowsMap[v]);
31299
+ }
31173
31300
  function mapBorder(value) {
31174
31301
  return mapResponsive(value, (v) => borderMap[String(v)]);
31175
31302
  }
@@ -31537,15 +31664,22 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
31537
31664
  function Text({
31538
31665
  color,
31539
31666
  size = "base",
31540
- spacing,
31541
31667
  weight,
31542
31668
  align,
31669
+ spacing,
31670
+ lineHeight,
31543
31671
  wrap,
31672
+ whitespace,
31673
+ wordBreak,
31544
31674
  transform,
31675
+ indent,
31676
+ verticalAlign,
31545
31677
  truncate,
31546
31678
  italic,
31547
31679
  underline,
31548
31680
  strikethrough,
31681
+ decorationStyle,
31682
+ decorationColor,
31549
31683
  as = "span",
31550
31684
  render,
31551
31685
  className,
@@ -31554,19 +31688,27 @@ function Text({
31554
31688
  }) {
31555
31689
  const Component = as;
31556
31690
  const colorStr = color === true ? "true" : color;
31691
+ const decorationColorStr = decorationColor === true ? "true" : decorationColor;
31557
31692
  const classes = cn(
31558
31693
  "text-foreground-primary",
31559
31694
  mapFontSize(size),
31560
- mapTextAlign(align),
31561
- mapTextWrap(wrap),
31562
31695
  mapFontWeight(weight),
31696
+ mapTextAlign(align),
31563
31697
  mapLetterSpacing(spacing),
31698
+ mapLineHeight(lineHeight),
31699
+ mapTextWrap(wrap),
31700
+ mapWhitespace(whitespace),
31701
+ mapWordBreak(wordBreak),
31564
31702
  mapTextTransform(transform),
31703
+ mapTextIndent(indent),
31704
+ mapVerticalAlign(verticalAlign),
31565
31705
  mapTextColor(colorStr),
31566
31706
  truncate && "truncate",
31567
31707
  italic && "italic",
31568
31708
  underline && "underline",
31569
31709
  strikethrough && "line-through",
31710
+ mapTextDecorationStyle(decorationStyle),
31711
+ decorationColorStr && `decoration-${decorationColorStr}`,
31570
31712
  className
31571
31713
  );
31572
31714
  const renderProps = {
@@ -32523,6 +32665,12 @@ function Grid({
32523
32665
  children,
32524
32666
  ...props
32525
32667
  }) {
32668
+ const isCustomColumns = typeof columns === "string" && !["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none", "subgrid"].includes(
32669
+ columns
32670
+ );
32671
+ const isCustomRows = typeof rows === "string" && !["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none", "subgrid"].includes(
32672
+ rows
32673
+ );
32526
32674
  const classes = cn(
32527
32675
  mapDisplay(display),
32528
32676
  mapJustifyContent(justifyContent),
@@ -32533,16 +32681,18 @@ function Grid({
32533
32681
  mapGap(gapX, "x"),
32534
32682
  mapGap(gapY, "y"),
32535
32683
  mapGridAutoFlow(autoFlow),
32684
+ !isCustomColumns && mapGridColumns(columns),
32685
+ !isCustomRows && mapGridRows(rows),
32536
32686
  className
32537
32687
  );
32538
32688
  const inlineStyles = {
32539
32689
  ...style,
32540
- ...rows && { gridTemplateRows: rows },
32541
- ...columns && { gridTemplateColumns: columns },
32690
+ ...isCustomColumns && { gridTemplateColumns: columns },
32691
+ ...isCustomRows && { gridTemplateRows: rows },
32542
32692
  ...areas && { gridTemplateAreas: areas }
32543
32693
  };
32544
- const hasInlineStyles = Object.keys(inlineStyles).length > (style ? Object.keys(style).length : 0);
32545
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Box, { ...props, className: classes, style: hasInlineStyles || style ? inlineStyles : void 0, children });
32694
+ const hasInlineStyles = isCustomColumns || isCustomRows || areas || style && Object.keys(style).length > 0;
32695
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Box, { ...props, className: classes, style: hasInlineStyles ? inlineStyles : void 0, children });
32546
32696
  }
32547
32697
 
32548
32698
  // src/lib/utils.ts
@@ -32753,14 +32903,27 @@ var import_react171 = require("react");
32753
32903
  // src/components/Tooltip.tsx
32754
32904
  var import_jsx_runtime31 = require("react/jsx-runtime");
32755
32905
  function Tooltip2({ children, className, showArrow, ...props }) {
32756
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: cn(tooltip(), className), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipBubble, { showArrow, children }) });
32757
- }
32758
- function TooltipBubble({ showArrow, children, className, color: _color, ...props }) {
32759
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Box, { ...props, className, children: [
32760
- showArrow && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)($44f671af83e7d9e0$export$746d02f47f4d381, { className: "fill-surface-inverted", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
32761
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { children })
32906
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: cn("group", tooltip(), className), children: [
32907
+ showArrow && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)($44f671af83e7d9e0$export$746d02f47f4d381, { className: "w-2 h-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
32908
+ "svg",
32909
+ {
32910
+ viewBox: "0 0 8 8",
32911
+ className: cn(
32912
+ "block fill-surface-inverted",
32913
+ "group-data-[placement=bottom]:rotate-180",
32914
+ "group-data-[placement=left]:-rotate-90",
32915
+ "group-data-[placement=right]:rotate-90"
32916
+ ),
32917
+ children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { d: "M0 0 L4 4 L8 0" })
32918
+ }
32919
+ ) }),
32920
+ children,
32921
+ "for"
32762
32922
  ] });
32763
32923
  }
32924
+ function TooltipBubble({ children, className, color: _color, ...props }) {
32925
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { ...props, className, children });
32926
+ }
32764
32927
 
32765
32928
  // src/components/FloatingTooltip.tsx
32766
32929
  var import_jsx_runtime32 = require("react/jsx-runtime");
@@ -39893,6 +40056,9 @@ function TabPanel2({ children, className, ...props }) {
39893
40056
  // src/components/ThemeButton.tsx
39894
40057
  var import_react203 = require("react");
39895
40058
  var import_jsx_runtime68 = require("react/jsx-runtime");
40059
+ function getElement(target) {
40060
+ return "current" in target ? target.current : target;
40061
+ }
39896
40062
  function applyTheme2(element, theme) {
39897
40063
  element.setAttribute("data-theme", theme);
39898
40064
  if (theme === "dark") {
@@ -39909,9 +40075,20 @@ function ThemeButton({
39909
40075
  ...props
39910
40076
  }) {
39911
40077
  const globalTheme = useTheme();
39912
- const [localTheme, setLocalTheme] = (0, import_react203.useState)("light");
40078
+ const [localTheme, setLocalTheme] = (0, import_react203.useState)(null);
40079
+ const initializedRef = (0, import_react203.useRef)(false);
39913
40080
  const isLocal = !!target;
39914
- const theme = isLocal ? localTheme : globalTheme.theme;
40081
+ (0, import_react203.useEffect)(() => {
40082
+ if (isLocal && target && !initializedRef.current) {
40083
+ const element = getElement(target);
40084
+ if (element) {
40085
+ initializedRef.current = true;
40086
+ setLocalTheme(globalTheme.theme);
40087
+ applyTheme2(element, globalTheme.theme);
40088
+ }
40089
+ }
40090
+ }, [isLocal, target, globalTheme.theme]);
40091
+ const theme = isLocal ? localTheme ?? globalTheme.theme : globalTheme.theme;
39915
40092
  const transitions = useTransition(theme, {
39916
40093
  initial: { opacity: 1 },
39917
40094
  from: {
@@ -39926,8 +40103,8 @@ function ThemeButton({
39926
40103
  });
39927
40104
  function handleClick(e) {
39928
40105
  const newTheme = theme === "light" ? "dark" : "light";
39929
- if (isLocal) {
39930
- const element = "current" in target ? target.current : target;
40106
+ if (isLocal && target) {
40107
+ const element = getElement(target);
39931
40108
  if (element) {
39932
40109
  applyTheme2(element, newTheme);
39933
40110
  setLocalTheme(newTheme);