@lobehub/ui 6.0.0-beta.7 → 6.0.0-beta.9

package/es/styles/stylex/props.mjs

@@ -1,10 +1,10 @@
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/styles/stylex/props.ts
 const styleProps = (styles, className, style) => {
 	const p = stylex.props(styles);
 	return {
-		className: clsx(p.className, className),
+		className: clsx$1(p.className, className),
 		style: p.style || style ? {
 			...p.style,
 			...style

package/es/styles/stylex/props.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"props.mjs","names":[],"sources":["../../../src/styles/stylex/props.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type { CSSProperties } from 'react';\n\nexport const styleProps = (\n  styles: stylex.StyleXArray<\n    | stylex.CompiledStyles\n    | boolean\n    | null\n    | undefined\n    | Readonly<[stylex.CompiledStyles, stylex.InlineStyles]>\n  >,\n  className?: string,\n  style?: CSSProperties,\n): { className: string; style: CSSProperties | undefined } => {\n  const p = stylex.props(styles);\n  return {\n    className: clsx(p.className, className),\n    style: p.style || style ? { ...p.style, ...style } : undefined,\n  };\n};\n"],"mappings":";;;AAGA,MAAa,cAAc,QAAyI,WAAoB,UAGnL;CACH,MAAM,IAAI,OAAO,MAAM,MAAM;CAC7B,OAAO;EACL,WAAW,KAAK,EAAE,WAAW,SAAS;EACtC,OAAO,EAAE,SAAS,QAAQ;GACxB,GAAG,EAAE;GACL,GAAG;EACL,IAAI,KAAA;CACN;AACF"}
+{"version":3,"file":"props.mjs","names":["clsx"],"sources":["../../../src/styles/stylex/props.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type { CSSProperties } from 'react';\n\nexport const styleProps = (\n  styles: stylex.StyleXArray<\n    | stylex.CompiledStyles\n    | boolean\n    | null\n    | undefined\n    | Readonly<[stylex.CompiledStyles, stylex.InlineStyles]>\n  >,\n  className?: string,\n  style?: CSSProperties,\n): { className: string; style: CSSProperties | undefined } => {\n  const p = stylex.props(styles);\n  return {\n    className: clsx(p.className, className),\n    style: p.style || style ? { ...p.style, ...style } : undefined,\n  };\n};\n"],"mappings":";;;AAGA,MAAa,cAAc,QAAyI,WAAoB,UAGnL;CACH,MAAM,IAAI,OAAO,MAAM,MAAM;CAC7B,OAAO;EACL,WAAWA,OAAK,EAAE,WAAW,SAAS;EACtC,OAAO,EAAE,SAAS,QAAQ;GACxB,GAAG,EAAE;GACL,GAAG;EACL,IAAI,KAAA;CACN;AACF"}

package/es/styles/theme/themeCss.mjs

@@ -7,6 +7,20 @@ const ring = {
 	dark: "0 0 0 1px rgb(255 255 255 / 18%)",
 	light: "0 0 0 1px rgb(0 0 0 / 5%)"
 };
+const surface = {
+	dark: {
+		"--lobe-fill-border": v("colorFillSecondary"),
+		"--lobe-fill-border-strong": v("colorFill"),
+		"--lobe-table-cell-bg": "transparent",
+		"--lobe-table-surface": v("colorFillQuaternary")
+	},
+	light: {
+		"--lobe-fill-border": v("colorFill"),
+		"--lobe-fill-border-strong": `color-mix(in srgb, ${v("colorFill")}, ${v("colorText")} 15%)`,
+		"--lobe-table-cell-bg": "initial",
+		"--lobe-table-surface": "initial"
+	}
+};
 const rule = (selector, declarations) => `${selector} {\n${Object.entries(declarations).map(([name, value]) => `  ${name}: ${value};`).join("\n")}\n}`;
 const appearanceRule = (selector, appearance) => {
 	const { neutral, palette, primary, static: base } = createLobeTokenGroups({ appearance });
@@ -23,6 +37,7 @@ const appearanceRule = (selector, appearance) => {
 	return rule(selector, {
 		...toCssVariables(token),
 		"--lobe-ring": ring[appearance],
+		...surface[appearance],
 		"color-scheme": appearance
 	});
 };

package/es/styles/theme/themeCss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"themeCss.mjs","names":[],"sources":["../../../src/styles/theme/themeCss.ts"],"sourcesContent":["import { toCssVariables, toCssVarName } from '../css';\nimport { neutralColors, primaryColors } from '../customTheme';\nimport { createLobeTokenGroups } from './createLobeToken';\nimport type { CustomPrimaryColor } from './customPrimary';\nimport type { LobeAppearance } from './scope';\n\nconst v = (key: string) => `var(${toCssVarName(key)})`;\n\nconst ring: Record<LobeAppearance, string> = {\n  dark: '0 0 0 1px rgb(255 255 255 / 18%)',\n  light: '0 0 0 1px rgb(0 0 0 / 5%)',\n};\n\nconst rule = (selector: string, declarations: Record<string, number | string>) =>\n  `${selector} {\\n${Object.entries(declarations)\n    .map(([name, value]) => `  ${name}: ${value};`)\n    .join('\\n')}\\n}`;\n\nconst appearanceRule = (selector: string, appearance: LobeAppearance) => {\n  const { neutral, palette, primary, static: base } = createLobeTokenGroups({ appearance });\n  const token =\n    appearance === 'light'\n      ? { ...base, ...palette, ...primary, ...neutral }\n      : { ...palette, ...primary, ...neutral };\n\n  return rule(selector, {\n    ...toCssVariables(token),\n    '--lobe-ring': ring[appearance],\n    'color-scheme': appearance,\n  });\n};\n\nconst appearanceSelector = (appearance: LobeAppearance) =>\n  appearance === 'dark' ? \"[data-theme='dark']\" : \":not([data-theme='dark'])\";\n\nconst colorRules = (appearance: LobeAppearance) => [\n  ...(Object.keys(primaryColors) as (keyof typeof primaryColors)[]).map((primaryColor) =>\n    rule(\n      `[data-primary-color='${primaryColor}']${appearanceSelector(appearance)}`,\n      toCssVariables(createLobeTokenGroups({ appearance, primaryColor }).primary),\n    ),\n  ),\n  ...(Object.keys(neutralColors) as (keyof typeof neutralColors)[]).map((neutralColor) =>\n    rule(\n      `[data-neutral-color='${neutralColor}']${appearanceSelector(appearance)}`,\n      toCssVariables(createLobeTokenGroups({ appearance, neutralColor }).neutral),\n    ),\n  ),\n];\n\nexport const getCustomPrimaryCss = (color: CustomPrimaryColor) => {\n  const hex = color.toLowerCase();\n  return (['light', 'dark'] as const)\n    .map((appearance) =>\n      rule(\n        `[data-primary-color='${hex}']${appearanceSelector(appearance)}`,\n        toCssVariables(\n          createLobeTokenGroups({ appearance, primaryColor: hex as CustomPrimaryColor }).primary,\n        ),\n      ),\n    )\n    .join('\\n\\n');\n};\n\nconst essentialCss = `@layer lobe-ui {\n  .lobe-brand-loading path {\n    fill: currentcolor;\n    fill-opacity: 0;\n    stroke: currentcolor;\n    stroke-dasharray: 1000;\n    stroke-dashoffset: 1000;\n    stroke-width: 0.25em;\n\n    animation:\n      draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n      fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n}\n\n@layer lobe-popup {\n  .lobe-context-trigger[data-popup-open],\n  .lobe-dropdown-menu-trigger[data-popup-open] {\n    background: ${v('colorFillTertiary')};\n  }\n}\n\n@layer lobe-base {\n  :where(body, body [data-theme]) {\n    color: ${v('colorText')};\n    font-family: ${v('fontFamily')};\n    font-size: ${v('fontSize')};\n    line-height: ${v('lineHeight')};\n  }\n\n  :where(body) :where(a) {\n    cursor: pointer;\n\n    color: ${v('colorLink')};\n    text-decoration: none;\n\n    background-color: transparent;\n    outline: none;\n\n    transition: color ${v('motionDurationSlow')};\n  }\n\n  :where(body) :where(a):hover {\n    color: ${v('colorLinkHover')};\n  }\n\n  :where(body) :where(a):active {\n    color: ${v('colorLinkActive')};\n  }\n\n  :where(body) :where(a):focus-visible {\n    outline: ${v('lineWidthFocus')} solid ${v('colorPrimaryBorder')};\n    outline-offset: 1px;\n  }\n\n  :where(body) :where(a)[disabled] {\n    cursor: not-allowed;\n    color: ${v('colorTextDisabled')};\n  }\n\n  :where(.lobe-flex) {\n    --lobe-flex: 0 1 auto;\n    --lobe-flex-direction: column;\n    --lobe-flex-wrap: nowrap;\n    --lobe-flex-justify: flex-start;\n    --lobe-flex-align: stretch;\n    --lobe-flex-width: auto;\n    --lobe-flex-height: auto;\n    --lobe-flex-padding: 0;\n    --lobe-flex-padding-inline: var(--lobe-flex-padding);\n    --lobe-flex-padding-block: var(--lobe-flex-padding);\n    --lobe-flex-gap: 0;\n\n    display: flex;\n    flex: var(--lobe-flex);\n    flex-flow: var(--lobe-flex-direction) var(--lobe-flex-wrap);\n    gap: var(--lobe-flex-gap);\n    align-items: var(--lobe-flex-align);\n    justify-content: var(--lobe-flex-justify);\n\n    width: var(--lobe-flex-width);\n    height: var(--lobe-flex-height);\n    padding: var(--lobe-flex-padding);\n    padding-block: var(--lobe-flex-padding-block);\n    padding-inline: var(--lobe-flex-padding-inline);\n  }\n\n  .lobe-flex-hidden {\n    display: none;\n  }\n}\n\n@keyframes draw {\n  0% {\n    stroke-dashoffset: 1000;\n  }\n\n  100% {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes fill {\n  30% {\n    fill-opacity: 0.05;\n  }\n\n  100% {\n    fill-opacity: 1;\n  }\n}`;\n\nconst globalCss = `@layer lobe-base {\n  :root {\n    --font-settings: 'cv01', 'tnum', 'kern';\n    --font-variations: 'opsz' auto, tabular-nums;\n\n    font-synthesis: style;\n    text-autospace: normal;\n  }\n\n  html {\n    overscroll-behavior: none;\n  }\n\n  body {\n    overflow: hidden auto;\n\n    min-height: 100vh;\n    margin: 0;\n    padding: 0;\n\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    font-optical-sizing: auto;\n    font-kerning: normal;\n    font-variant-ligatures: common-ligatures contextual;\n    font-variant-numeric: tabular-nums;\n    font-size-adjust: from-font;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-wrap: pretty;\n    text-size-adjust: 100%;\n    text-rendering: optimizelegibility;\n    overflow-wrap: anywhere;\n    vertical-align: baseline;\n\n    background-color: ${v('colorBgLayout')};\n\n    font-synthesis: style;\n\n    -webkit-overflow-scrolling: touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  html,\n  body {\n    width: 100%;\n    height: 100%;\n  }\n\n  [tabindex='-1']:focus {\n    outline: none;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin-block: 0 0.5em;\n    font-weight: 500;\n  }\n\n  p,\n  ol,\n  ul,\n  dl,\n  pre {\n    margin-block: 0 1em;\n  }\n\n  ol ol,\n  ul ul,\n  ol ul,\n  ul ol {\n    margin-block-end: 0;\n  }\n\n  dd {\n    margin-block-end: 0.5em;\n    margin-inline-start: 0;\n  }\n\n  blockquote,\n  figure {\n    margin-block: 0 1em;\n    margin-inline: 0;\n  }\n\n  img {\n    border-style: none;\n    vertical-align: middle;\n  }\n\n  table {\n    border-collapse: collapse;\n  }\n\n  input,\n  button,\n  select,\n  optgroup,\n  textarea {\n    margin: 0;\n\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  textarea {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  fieldset {\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: ${v('fontFamilyCode')} !important;\n    font-feature-settings:\n      'liga' 0,\n      'calt' 0;\n    font-variant-ligatures: none;\n\n    span {\n      font-family: ${v('fontFamilyCode')} !important;\n    }\n  }\n\n  ::selection {\n    color: #000;\n    background: ${v('yellow9')};\n\n    -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n    scrollbar-color: ${v('colorFill')} transparent;\n    scrollbar-width: thin;\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n}`;\n\nconst layerOrder = '@layer lobe-base, lobe-popup, lobe-ui;';\n\nlet cached: string | undefined;\n\nexport const getThemeCss = () =>\n  (cached ??= [\n    layerOrder,\n    appearanceRule(\":root, [data-theme='light']\", 'light'),\n    appearanceRule(\"[data-theme='dark']\", 'dark'),\n    ...colorRules('light'),\n    ...colorRules('dark'),\n    essentialCss,\n  ].join('\\n\\n'));\n\nexport const getGlobalCss = () => `${layerOrder}\\n\\n${globalCss}`;\n"],"mappings":";;;;AAMA,MAAM,KAAK,QAAgB,OAAO,aAAa,GAAG,EAAE;AAEpD,MAAM,OAAuC;CAC3C,MAAM;CACN,OAAO;AACT;AAEA,MAAM,QAAQ,UAAkB,iBAC9B,GAAG,SAAS,MAAM,OAAO,QAAQ,YAAY,CAAC,CAC3C,KAAK,CAAC,MAAM,WAAW,KAAK,KAAK,IAAI,MAAM,EAAE,CAAC,CAC9C,KAAK,IAAI,EAAE;AAEhB,MAAM,kBAAkB,UAAkB,eAA+B;CACvE,MAAM,EAAE,SAAS,SAAS,SAAS,QAAQ,SAAS,sBAAsB,EAAE,WAAW,CAAC;CACxF,MAAM,QACJ,eAAe,UACX;EAAE,GAAG;EAAM,GAAG;EAAS,GAAG;EAAS,GAAG;CAAQ,IAC9C;EAAE,GAAG;EAAS,GAAG;EAAS,GAAG;CAAQ;CAE3C,OAAO,KAAK,UAAU;EACpB,GAAG,eAAe,KAAK;EACvB,eAAe,KAAK;EACpB,gBAAgB;CAClB,CAAC;AACH;AAEA,MAAM,sBAAsB,eAC1B,eAAe,SAAS,wBAAwB;AAElD,MAAM,cAAc,eAA+B,CACjD,GAAI,OAAO,KAAK,aAAa,CAAC,CAAoC,KAAK,iBACrE,KACE,wBAAwB,aAAa,IAAI,mBAAmB,UAAU,KACtE,eAAe,sBAAsB;CAAE;CAAY;AAAa,CAAC,CAAC,CAAC,OAAO,CAC5E,CACF,GACA,GAAI,OAAO,KAAK,aAAa,CAAC,CAAoC,KAAK,iBACrE,KACE,wBAAwB,aAAa,IAAI,mBAAmB,UAAU,KACtE,eAAe,sBAAsB;CAAE;CAAY;AAAa,CAAC,CAAC,CAAC,OAAO,CAC5E,CACF,CACF;AAEA,MAAa,uBAAuB,UAA8B;CAChE,MAAM,MAAM,MAAM,YAAY;CAC9B,OAAQ,CAAC,SAAS,MAAM,CAAC,CACtB,KAAK,eACJ,KACE,wBAAwB,IAAI,IAAI,mBAAmB,UAAU,KAC7D,eACE,sBAAsB;EAAE;EAAY,cAAc;CAA0B,CAAC,CAAC,CAAC,OACjF,CACF,CACF,CAAC,CACA,KAAK,MAAM;AAChB;AAEA,MAAM,eAAe;;;;;;;;;;;;;;;;;;kBAkBH,EAAE,mBAAmB,EAAE;;;;;;aAM5B,EAAE,WAAW,EAAE;mBACT,EAAE,YAAY,EAAE;iBAClB,EAAE,UAAU,EAAE;mBACZ,EAAE,YAAY,EAAE;;;;;;aAMtB,EAAE,WAAW,EAAE;;;;;;wBAMJ,EAAE,oBAAoB,EAAE;;;;aAInC,EAAE,gBAAgB,EAAE;;;;aAIpB,EAAE,iBAAiB,EAAE;;;;eAInB,EAAE,gBAAgB,EAAE,SAAS,EAAE,oBAAoB,EAAE;;;;;;aAMvD,EAAE,mBAAmB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDpC,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAmCM,EAAE,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAgGxB,EAAE,gBAAgB,EAAE;;;;;;;qBAOlB,EAAE,gBAAgB,EAAE;;;;;;kBAMvB,EAAE,SAAS,EAAE;;;;;;uBAMR,EAAE,WAAW,EAAE;;;;;;AAOtC,MAAM,aAAa;AAEnB,IAAI;AAEJ,MAAa,oBACV,WAAW;CACV;CACA,eAAe,+BAA+B,OAAO;CACrD,eAAe,uBAAuB,MAAM;CAC5C,GAAG,WAAW,OAAO;CACrB,GAAG,WAAW,MAAM;CACpB;AACF,CAAC,CAAC,KAAK,MAAM;AAEf,MAAa,qBAAqB,GAAG,WAAW,MAAM"}
+{"version":3,"file":"themeCss.mjs","names":[],"sources":["../../../src/styles/theme/themeCss.ts"],"sourcesContent":["import { toCssVariables, toCssVarName } from '../css';\nimport { neutralColors, primaryColors } from '../customTheme';\nimport { createLobeTokenGroups } from './createLobeToken';\nimport type { CustomPrimaryColor } from './customPrimary';\nimport type { LobeAppearance } from './scope';\n\nconst v = (key: string) => `var(${toCssVarName(key)})`;\n\nconst ring: Record<LobeAppearance, string> = {\n  dark: '0 0 0 1px rgb(255 255 255 / 18%)',\n  light: '0 0 0 1px rgb(0 0 0 / 5%)',\n};\n\n/* `initial` makes a light scope nested in a dark one fall back to each variant's own fill\n   instead of inheriting the dark table surface. */\nconst surface: Record<LobeAppearance, Record<string, string>> = {\n  dark: {\n    '--lobe-fill-border': v('colorFillSecondary'),\n    '--lobe-fill-border-strong': v('colorFill'),\n    '--lobe-table-cell-bg': 'transparent',\n    '--lobe-table-surface': v('colorFillQuaternary'),\n  },\n  light: {\n    '--lobe-fill-border': v('colorFill'),\n    '--lobe-fill-border-strong': `color-mix(in srgb, ${v('colorFill')}, ${v('colorText')} 15%)`,\n    '--lobe-table-cell-bg': 'initial',\n    '--lobe-table-surface': 'initial',\n  },\n};\n\nconst rule = (selector: string, declarations: Record<string, number | string>) =>\n  `${selector} {\\n${Object.entries(declarations)\n    .map(([name, value]) => `  ${name}: ${value};`)\n    .join('\\n')}\\n}`;\n\nconst appearanceRule = (selector: string, appearance: LobeAppearance) => {\n  const { neutral, palette, primary, static: base } = createLobeTokenGroups({ appearance });\n  const token =\n    appearance === 'light'\n      ? { ...base, ...palette, ...primary, ...neutral }\n      : { ...palette, ...primary, ...neutral };\n\n  return rule(selector, {\n    ...toCssVariables(token),\n    '--lobe-ring': ring[appearance],\n    ...surface[appearance],\n    'color-scheme': appearance,\n  });\n};\n\nconst appearanceSelector = (appearance: LobeAppearance) =>\n  appearance === 'dark' ? \"[data-theme='dark']\" : \":not([data-theme='dark'])\";\n\nconst colorRules = (appearance: LobeAppearance) => [\n  ...(Object.keys(primaryColors) as (keyof typeof primaryColors)[]).map((primaryColor) =>\n    rule(\n      `[data-primary-color='${primaryColor}']${appearanceSelector(appearance)}`,\n      toCssVariables(createLobeTokenGroups({ appearance, primaryColor }).primary),\n    ),\n  ),\n  ...(Object.keys(neutralColors) as (keyof typeof neutralColors)[]).map((neutralColor) =>\n    rule(\n      `[data-neutral-color='${neutralColor}']${appearanceSelector(appearance)}`,\n      toCssVariables(createLobeTokenGroups({ appearance, neutralColor }).neutral),\n    ),\n  ),\n];\n\nexport const getCustomPrimaryCss = (color: CustomPrimaryColor) => {\n  const hex = color.toLowerCase();\n  return (['light', 'dark'] as const)\n    .map((appearance) =>\n      rule(\n        `[data-primary-color='${hex}']${appearanceSelector(appearance)}`,\n        toCssVariables(\n          createLobeTokenGroups({ appearance, primaryColor: hex as CustomPrimaryColor }).primary,\n        ),\n      ),\n    )\n    .join('\\n\\n');\n};\n\nconst essentialCss = `@layer lobe-ui {\n  .lobe-brand-loading path {\n    fill: currentcolor;\n    fill-opacity: 0;\n    stroke: currentcolor;\n    stroke-dasharray: 1000;\n    stroke-dashoffset: 1000;\n    stroke-width: 0.25em;\n\n    animation:\n      draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n      fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n}\n\n@layer lobe-popup {\n  .lobe-context-trigger[data-popup-open],\n  .lobe-dropdown-menu-trigger[data-popup-open] {\n    background: ${v('colorFillTertiary')};\n  }\n}\n\n@layer lobe-base {\n  :where(body, body [data-theme]) {\n    color: ${v('colorText')};\n    font-family: ${v('fontFamily')};\n    font-size: ${v('fontSize')};\n    line-height: ${v('lineHeight')};\n  }\n\n  :where(body) :where(a) {\n    cursor: pointer;\n\n    color: ${v('colorLink')};\n    text-decoration: none;\n\n    background-color: transparent;\n    outline: none;\n\n    transition: color ${v('motionDurationSlow')};\n  }\n\n  :where(body) :where(a):hover {\n    color: ${v('colorLinkHover')};\n  }\n\n  :where(body) :where(a):active {\n    color: ${v('colorLinkActive')};\n  }\n\n  :where(body) :where(a):focus-visible {\n    outline: ${v('lineWidthFocus')} solid ${v('colorPrimaryBorder')};\n    outline-offset: 1px;\n  }\n\n  :where(body) :where(a)[disabled] {\n    cursor: not-allowed;\n    color: ${v('colorTextDisabled')};\n  }\n\n  :where(.lobe-flex) {\n    --lobe-flex: 0 1 auto;\n    --lobe-flex-direction: column;\n    --lobe-flex-wrap: nowrap;\n    --lobe-flex-justify: flex-start;\n    --lobe-flex-align: stretch;\n    --lobe-flex-width: auto;\n    --lobe-flex-height: auto;\n    --lobe-flex-padding: 0;\n    --lobe-flex-padding-inline: var(--lobe-flex-padding);\n    --lobe-flex-padding-block: var(--lobe-flex-padding);\n    --lobe-flex-gap: 0;\n\n    display: flex;\n    flex: var(--lobe-flex);\n    flex-flow: var(--lobe-flex-direction) var(--lobe-flex-wrap);\n    gap: var(--lobe-flex-gap);\n    align-items: var(--lobe-flex-align);\n    justify-content: var(--lobe-flex-justify);\n\n    width: var(--lobe-flex-width);\n    height: var(--lobe-flex-height);\n    padding: var(--lobe-flex-padding);\n    padding-block: var(--lobe-flex-padding-block);\n    padding-inline: var(--lobe-flex-padding-inline);\n  }\n\n  .lobe-flex-hidden {\n    display: none;\n  }\n}\n\n@keyframes draw {\n  0% {\n    stroke-dashoffset: 1000;\n  }\n\n  100% {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes fill {\n  30% {\n    fill-opacity: 0.05;\n  }\n\n  100% {\n    fill-opacity: 1;\n  }\n}`;\n\nconst globalCss = `@layer lobe-base {\n  :root {\n    --font-settings: 'cv01', 'tnum', 'kern';\n    --font-variations: 'opsz' auto, tabular-nums;\n\n    font-synthesis: style;\n    text-autospace: normal;\n  }\n\n  html {\n    overscroll-behavior: none;\n  }\n\n  body {\n    overflow: hidden auto;\n\n    min-height: 100vh;\n    margin: 0;\n    padding: 0;\n\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    font-optical-sizing: auto;\n    font-kerning: normal;\n    font-variant-ligatures: common-ligatures contextual;\n    font-variant-numeric: tabular-nums;\n    font-size-adjust: from-font;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-wrap: pretty;\n    text-size-adjust: 100%;\n    text-rendering: optimizelegibility;\n    overflow-wrap: anywhere;\n    vertical-align: baseline;\n\n    background-color: ${v('colorBgLayout')};\n\n    font-synthesis: style;\n\n    -webkit-overflow-scrolling: touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  html,\n  body {\n    width: 100%;\n    height: 100%;\n  }\n\n  [tabindex='-1']:focus {\n    outline: none;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin-block: 0 0.5em;\n    font-weight: 500;\n  }\n\n  p,\n  ol,\n  ul,\n  dl,\n  pre {\n    margin-block: 0 1em;\n  }\n\n  ol ol,\n  ul ul,\n  ol ul,\n  ul ol {\n    margin-block-end: 0;\n  }\n\n  dd {\n    margin-block-end: 0.5em;\n    margin-inline-start: 0;\n  }\n\n  blockquote,\n  figure {\n    margin-block: 0 1em;\n    margin-inline: 0;\n  }\n\n  img {\n    border-style: none;\n    vertical-align: middle;\n  }\n\n  table {\n    border-collapse: collapse;\n  }\n\n  input,\n  button,\n  select,\n  optgroup,\n  textarea {\n    margin: 0;\n\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  textarea {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  fieldset {\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: ${v('fontFamilyCode')} !important;\n    font-feature-settings:\n      'liga' 0,\n      'calt' 0;\n    font-variant-ligatures: none;\n\n    span {\n      font-family: ${v('fontFamilyCode')} !important;\n    }\n  }\n\n  ::selection {\n    color: #000;\n    background: ${v('yellow9')};\n\n    -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n    scrollbar-color: ${v('colorFill')} transparent;\n    scrollbar-width: thin;\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n}`;\n\nconst layerOrder = '@layer lobe-base, lobe-popup, lobe-ui;';\n\nlet cached: string | undefined;\n\nexport const getThemeCss = () =>\n  (cached ??= [\n    layerOrder,\n    appearanceRule(\":root, [data-theme='light']\", 'light'),\n    appearanceRule(\"[data-theme='dark']\", 'dark'),\n    ...colorRules('light'),\n    ...colorRules('dark'),\n    essentialCss,\n  ].join('\\n\\n'));\n\nexport const getGlobalCss = () => `${layerOrder}\\n\\n${globalCss}`;\n"],"mappings":"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"}

package/es/theme.css

@@ -785,6 +785,10 @@
   --lobe-control-item-bg-hover: rgba(0, 0, 0, 0.03);
   --lobe-control-tmp-outline: rgba(0, 0, 0, 0.015);
   --lobe-ring: 0 0 0 1px rgb(0 0 0 / 5%);
+  --lobe-fill-border: var(--lobe-color-fill);
+  --lobe-fill-border-strong: color-mix(in srgb, var(--lobe-color-fill), var(--lobe-color-text) 15%);
+  --lobe-table-cell-bg: initial;
+  --lobe-table-surface: initial;
   color-scheme: light;
 }
 
@@ -1458,6 +1462,10 @@
   --lobe-control-item-bg-hover: rgba(255, 255, 255, 0.06);
   --lobe-control-tmp-outline: rgba(255, 255, 255, 0.02);
   --lobe-ring: 0 0 0 1px rgb(255 255 255 / 18%);
+  --lobe-fill-border: var(--lobe-color-fill-secondary);
+  --lobe-fill-border-strong: var(--lobe-color-fill);
+  --lobe-table-cell-bg: transparent;
+  --lobe-table-surface: var(--lobe-color-fill-quaternary);
   color-scheme: dark;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "6.0.0-beta.7",
+  "version": "6.0.0-beta.9",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -85,6 +85,10 @@
       "types": "./es/FormKit/index.d.mts",
       "import": "./es/FormKit/index.mjs"
     },
+    "./pro-table": {
+      "types": "./es/ProTable/index.d.mts",
+      "import": "./es/ProTable/index.mjs"
+    },
     "./global.css": "./es/global.css",
     "./theme.css": "./es/theme.css",
     "./style.css": "./es/style.css",
@@ -149,6 +153,7 @@
     "@stylexjs/stylex": "0.19.1",
     "@tanstack/form-core": "^1.33.5",
     "@tanstack/react-table": "^9.2.8",
+    "@tanstack/react-virtual": "^3.14.18",
     "beautiful-mermaid": "^1.1.3",
     "chroma-js": "^3.2.0",
     "clsx": "^2.1.1",

package/es/DatePicker/CalendarPanel.mjs

@@ -1,189 +0,0 @@
-"use client";
-import { focusRing } from "../styles/stylex/focusRing.mjs";
-import Icon from "../Icon/Icon.mjs";
-import { useTranslation } from "../i18n/useTranslation.mjs";
-import { panelStyles } from "../internal/panelStyles.mjs";
-import datePicker_default from "../i18n/resources/en/datePicker.mjs";
-import { buildMonthGrid, getWeekStart, getWeekdayLabels, isDayDisabled, isMonthDisabled, isSameDay, isYearDisabled, moveDayFocus, orderRange } from "./calendar.mjs";
-import { styles } from "./style.mjs";
-import { createElement, memo, useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import * as stylex from "@stylexjs/stylex";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import dayjs from "dayjs";
-//#region src/DatePicker/CalendarPanel.tsx
-const MONTHS = Array.from({ length: 12 }, (_, index) => index);
-const CalendarPanel = memo(({ bounds, hovered, mode, month, onHover, onMonthChange, onSelect, range, selected, showNav = true }) => {
-	const { t } = useTranslation(datePicker_default);
-	const [view, setView] = useState(mode);
-	const [focused, setFocused] = useState(selected ?? month);
-	const gridRef = useRef(null);
-	const weekStart = getWeekStart();
-	const today = /* @__PURE__ */ new Date();
-	const current = dayjs(month);
-	const decadeStart = Math.floor(current.year() / 12) * 12;
-	const days = buildMonthGrid(month, weekStart);
-	const focusDay = dayjs(focused).isSame(month, "month") && !isDayDisabled(focused, bounds) ? focused : days.find((day) => dayjs(day).isSame(month, "month") && !isDayDisabled(day, bounds)) ?? current.startOf("month").toDate();
-	const keyboardMoveRef = useRef(false);
-	useEffect(() => {
-		if (!keyboardMoveRef.current) return;
-		keyboardMoveRef.current = false;
-		gridRef.current?.querySelector("[data-focus-target]")?.focus();
-	}, [focused, month]);
-	const step = (direction) => {
-		const unit = view === "date" ? "month" : "year";
-		const amount = view === "year" ? 12 * direction : direction;
-		onMonthChange(current.add(amount, unit).toDate());
-	};
-	const drillUp = () => setView(view === "date" ? "month" : "year");
-	const handleDayKey = (event) => {
-		let next = moveDayFocus(focusDay, event.key, weekStart);
-		if (!next) return;
-		event.preventDefault();
-		for (let step = 0; next && isDayDisabled(next, bounds) && step < 366; step++) next = moveDayFocus(next, event.key, weekStart);
-		if (!next || isDayDisabled(next, bounds)) return;
-		keyboardMoveRef.current = true;
-		setFocused(next);
-		if (!dayjs(next).isSame(month, "month")) onMonthChange(next);
-	};
-	const band = (() => {
-		if (!range?.[0]) return null;
-		const end = range[1] ?? hovered;
-		return end ? orderRange(range[0], end) : null;
-	})();
-	const renderDays = () => {
-		return /* @__PURE__ */ jsxs("div", {
-			"aria-label": current.format("MMMM YYYY"),
-			...stylex.props(styles.grid),
-			ref: gridRef,
-			role: "grid",
-			onMouseLeave: () => onHover?.(null),
-			children: [getWeekdayLabels(weekStart).map((label) => /* @__PURE__ */ jsx("span", {
-				role: "columnheader",
-				...stylex.props(styles.weekday, panelStyles.label),
-				children: label
-			}, label)), days.map((date) => {
-				const outside = !dayjs(date).isSame(month, "month");
-				const isStart = !outside && !!band && isSameDay(date, band[0]);
-				const isEnd = !outside && !!band && isSameDay(date, band[1]);
-				const inBand = !outside && !!band && dayjs(date).isAfter(band[0], "day") && dayjs(date).isBefore(band[1], "day");
-				const pressed = !outside && (isSameDay(date, selected) || isStart || isEnd);
-				const focusTarget = isSameDay(date, focusDay) && !outside;
-				return /* @__PURE__ */ jsx("span", {
-					"aria-selected": pressed,
-					role: "gridcell",
-					...stylex.props(styles.cell, inBand && styles.band, isStart && !isEnd && styles.bandStart, isEnd && !isStart && styles.bandEnd),
-					children: /* @__PURE__ */ jsx("button", {
-						"aria-label": dayjs(date).format("MMMM D, YYYY"),
-						"aria-pressed": pressed,
-						...stylex.props(focusRing.info, styles.day),
-						"data-focus-target": focusTarget ? "" : void 0,
-						"data-outside": outside ? "" : void 0,
-						"data-today": isSameDay(date, today) ? "" : void 0,
-						disabled: isDayDisabled(date, bounds),
-						tabIndex: focusTarget ? 0 : -1,
-						type: "button",
-						onClick: () => onSelect(dayjs(date).startOf("day").toDate()),
-						onKeyDown: handleDayKey,
-						onMouseEnter: () => onHover?.(date),
-						children: date.getDate()
-					})
-				}, date.toISOString());
-			})]
-		});
-	};
-	const renderMonths = () => /* @__PURE__ */ jsx("div", {
-		...stylex.props(styles.tiles),
-		children: MONTHS.map((index) => {
-			const date = current.month(index).startOf("month").toDate();
-			return /* @__PURE__ */ createElement("button", {
-				"aria-pressed": !!selected && dayjs(selected).isSame(date, "month"),
-				...stylex.props(focusRing.info, styles.tile),
-				"data-today": dayjs(today).isSame(date, "month") ? "" : void 0,
-				disabled: isMonthDisabled(date, bounds),
-				key: index,
-				type: "button",
-				onClick: () => {
-					if (mode === "month") return onSelect(date);
-					onMonthChange(date);
-					setView("date");
-				}
-			}, dayjs(date).format("MMM"));
-		})
-	});
-	const renderYears = () => /* @__PURE__ */ jsx("div", {
-		...stylex.props(styles.tiles),
-		children: MONTHS.map((index) => {
-			const date = dayjs(new Date(decadeStart + index, 0, 1)).toDate();
-			return /* @__PURE__ */ createElement("button", {
-				"aria-pressed": !!selected && dayjs(selected).isSame(date, "year"),
-				...stylex.props(focusRing.info, styles.tile),
-				"data-today": dayjs(today).isSame(date, "year") ? "" : void 0,
-				disabled: isYearDisabled(date, bounds),
-				key: index,
-				type: "button",
-				onClick: () => {
-					if (mode === "year") return onSelect(date);
-					onMonthChange(current.year(decadeStart + index).toDate());
-					setView("month");
-				}
-			}, decadeStart + index);
-		})
-	});
-	const title = (() => {
-		if (view === "date") return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			current.format("MMMM"),
-			" ",
-			/* @__PURE__ */ jsx("span", {
-				...stylex.props(panelStyles.titleMuted),
-				children: current.format("YYYY")
-			})
-		] });
-		if (view === "month") return current.format("YYYY");
-		return `${decadeStart} – ${decadeStart + 11}`;
-	})();
-	return /* @__PURE__ */ jsxs("div", {
-		...stylex.props(styles.calendar),
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				...stylex.props(styles.header),
-				children: [/* @__PURE__ */ jsx("button", {
-					...stylex.props(panelStyles.title),
-					disabled: view === "year",
-					type: "button",
-					onClick: drillUp,
-					children: title
-				}), showNav && /* @__PURE__ */ jsxs("div", {
-					...stylex.props(styles.navGroup),
-					children: [/* @__PURE__ */ jsx("button", {
-						"aria-label": t("datePicker.previous"),
-						...stylex.props(panelStyles.nav),
-						type: "button",
-						onClick: () => step(-1),
-						children: /* @__PURE__ */ jsx(Icon, {
-							icon: ChevronLeft,
-							size: 14
-						})
-					}), /* @__PURE__ */ jsx("button", {
-						"aria-label": t("datePicker.next"),
-						...stylex.props(panelStyles.nav),
-						type: "button",
-						onClick: () => step(1),
-						children: /* @__PURE__ */ jsx(Icon, {
-							icon: ChevronRight,
-							size: 14
-						})
-					})]
-				})]
-			}),
-			view === "date" && renderDays(),
-			view === "month" && renderMonths(),
-			view === "year" && renderYears()
-		]
-	});
-});
-CalendarPanel.displayName = "CalendarPanel";
-//#endregion
-export { CalendarPanel as default };
-
-//# sourceMappingURL=CalendarPanel.mjs.map

package/es/DatePicker/CalendarPanel.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"CalendarPanel.mjs","names":["datePickerMessages"],"sources":["../../src/DatePicker/CalendarPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport dayjs from 'dayjs';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { type KeyboardEvent, memo, useEffect, useRef, useState } from 'react';\n\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { panelStyles } from '@/internal/panelStyles';\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport {\n  buildMonthGrid,\n  type CalendarMode,\n  type DateBounds,\n  getWeekdayLabels,\n  getWeekStart,\n  isDayDisabled,\n  isMonthDisabled,\n  isSameDay,\n  isYearDisabled,\n  moveDayFocus,\n  orderRange,\n} from './calendar';\nimport { styles } from './style';\n\nexport interface CalendarPanelProps {\n  bounds: DateBounds;\n  hovered?: Date | null;\n  mode: CalendarMode;\n  month: Date;\n  onHover?: (date: Date | null) => void;\n  onMonthChange: (month: Date) => void;\n  onSelect: (date: Date) => void;\n  range?: [Date | null, Date | null];\n  selected?: Date | null;\n  showNav?: boolean;\n}\n\nconst MONTHS = Array.from({ length: 12 }, (_, index) => index);\n\nconst CalendarPanel = memo<CalendarPanelProps>(\n  ({\n    bounds,\n    hovered,\n    mode,\n    month,\n    onHover,\n    onMonthChange,\n    onSelect,\n    range,\n    selected,\n    showNav = true,\n  }) => {\n    const { t } = useTranslation(datePickerMessages);\n    const [view, setView] = useState<CalendarMode>(mode);\n    const [focused, setFocused] = useState<Date>(selected ?? month);\n    const gridRef = useRef<HTMLDivElement>(null);\n    const weekStart = getWeekStart();\n    const today = new Date();\n    const current = dayjs(month);\n    const decadeStart = Math.floor(current.year() / 12) * 12;\n    const days = buildMonthGrid(month, weekStart);\n    const focusDay =\n      dayjs(focused).isSame(month, 'month') && !isDayDisabled(focused, bounds)\n        ? focused\n        : (days.find((day) => dayjs(day).isSame(month, 'month') && !isDayDisabled(day, bounds)) ??\n          current.startOf('month').toDate());\n    const keyboardMoveRef = useRef(false);\n\n    useEffect(() => {\n      if (!keyboardMoveRef.current) return;\n      keyboardMoveRef.current = false;\n      gridRef.current?.querySelector<HTMLButtonElement>('[data-focus-target]')?.focus();\n    }, [focused, month]);\n\n    const step = (direction: 1 | -1) => {\n      const unit = view === 'date' ? 'month' : 'year';\n      const amount = view === 'year' ? 12 * direction : direction;\n      onMonthChange(current.add(amount, unit).toDate());\n    };\n\n    const drillUp = () => setView(view === 'date' ? 'month' : 'year');\n\n    const handleDayKey = (event: KeyboardEvent<HTMLButtonElement>) => {\n      let next = moveDayFocus(focusDay, event.key, weekStart);\n      if (!next) return;\n      event.preventDefault();\n      for (let step = 0; next && isDayDisabled(next, bounds) && step < 366; step++) {\n        next = moveDayFocus(next, event.key, weekStart);\n      }\n      if (!next || isDayDisabled(next, bounds)) return;\n      keyboardMoveRef.current = true;\n      setFocused(next);\n      if (!dayjs(next).isSame(month, 'month')) onMonthChange(next);\n    };\n\n    const band = (() => {\n      if (!range?.[0]) return null;\n      const end = range[1] ?? hovered;\n      return end ? orderRange(range[0], end) : null;\n    })();\n\n    const renderDays = () => {\n      return (\n        <div\n          aria-label={current.format('MMMM YYYY')}\n          {...stylex.props(styles.grid)}\n          ref={gridRef}\n          role=\"grid\"\n          onMouseLeave={() => onHover?.(null)}\n        >\n          {getWeekdayLabels(weekStart).map((label) => (\n            <span\n              key={label}\n              role=\"columnheader\"\n              {...stylex.props(styles.weekday, panelStyles.label)}\n            >\n              {label}\n            </span>\n          ))}\n          {days.map((date) => {\n            const outside = !dayjs(date).isSame(month, 'month');\n            const isStart = !outside && !!band && isSameDay(date, band[0]);\n            const isEnd = !outside && !!band && isSameDay(date, band[1]);\n            const inBand =\n              !outside &&\n              !!band &&\n              dayjs(date).isAfter(band[0], 'day') &&\n              dayjs(date).isBefore(band[1], 'day');\n            const pressed = !outside && (isSameDay(date, selected) || isStart || isEnd);\n            const focusTarget = isSameDay(date, focusDay) && !outside;\n\n            return (\n              <span\n                aria-selected={pressed}\n                key={date.toISOString()}\n                role=\"gridcell\"\n                {...stylex.props(\n                  styles.cell,\n                  inBand && styles.band,\n                  isStart && !isEnd && styles.bandStart,\n                  isEnd && !isStart && styles.bandEnd,\n                )}\n              >\n                <button\n                  aria-label={dayjs(date).format('MMMM D, YYYY')}\n                  aria-pressed={pressed}\n                  {...stylex.props(focusRing.info, styles.day)}\n                  data-focus-target={focusTarget ? '' : undefined}\n                  data-outside={outside ? '' : undefined}\n                  data-today={isSameDay(date, today) ? '' : undefined}\n                  disabled={isDayDisabled(date, bounds)}\n                  tabIndex={focusTarget ? 0 : -1}\n                  type=\"button\"\n                  onClick={() => onSelect(dayjs(date).startOf('day').toDate())}\n                  onKeyDown={handleDayKey}\n                  onMouseEnter={() => onHover?.(date)}\n                >\n                  {date.getDate()}\n                </button>\n              </span>\n            );\n          })}\n        </div>\n      );\n    };\n\n    const renderMonths = () => (\n      <div {...stylex.props(styles.tiles)}>\n        {MONTHS.map((index) => {\n          const date = current.month(index).startOf('month').toDate();\n          return (\n            <button\n              aria-pressed={!!selected && dayjs(selected).isSame(date, 'month')}\n              {...stylex.props(focusRing.info, styles.tile)}\n              data-today={dayjs(today).isSame(date, 'month') ? '' : undefined}\n              disabled={isMonthDisabled(date, bounds)}\n              key={index}\n              type=\"button\"\n              onClick={() => {\n                if (mode === 'month') return onSelect(date);\n                onMonthChange(date);\n                setView('date');\n              }}\n            >\n              {dayjs(date).format('MMM')}\n            </button>\n          );\n        })}\n      </div>\n    );\n\n    const renderYears = () => (\n      <div {...stylex.props(styles.tiles)}>\n        {MONTHS.map((index) => {\n          const date = dayjs(new Date(decadeStart + index, 0, 1)).toDate();\n          return (\n            <button\n              aria-pressed={!!selected && dayjs(selected).isSame(date, 'year')}\n              {...stylex.props(focusRing.info, styles.tile)}\n              data-today={dayjs(today).isSame(date, 'year') ? '' : undefined}\n              disabled={isYearDisabled(date, bounds)}\n              key={index}\n              type=\"button\"\n              onClick={() => {\n                if (mode === 'year') return onSelect(date);\n                onMonthChange(current.year(decadeStart + index).toDate());\n                setView('month');\n              }}\n            >\n              {decadeStart + index}\n            </button>\n          );\n        })}\n      </div>\n    );\n\n    const title = (() => {\n      if (view === 'date')\n        return (\n          <>\n            {current.format('MMMM')}{' '}\n            <span {...stylex.props(panelStyles.titleMuted)}>{current.format('YYYY')}</span>\n          </>\n        );\n      if (view === 'month') return current.format('YYYY');\n      return `${decadeStart} – ${decadeStart + 11}`;\n    })();\n\n    return (\n      <div {...stylex.props(styles.calendar)}>\n        <div {...stylex.props(styles.header)}>\n          <button\n            {...stylex.props(panelStyles.title)}\n            disabled={view === 'year'}\n            type=\"button\"\n            onClick={drillUp}\n          >\n            {title}\n          </button>\n          {showNav && (\n            <div {...stylex.props(styles.navGroup)}>\n              <button\n                aria-label={t('datePicker.previous')}\n                {...stylex.props(panelStyles.nav)}\n                type=\"button\"\n                onClick={() => step(-1)}\n              >\n                <Icon icon={ChevronLeft} size={14} />\n              </button>\n              <button\n                aria-label={t('datePicker.next')}\n                {...stylex.props(panelStyles.nav)}\n                type=\"button\"\n                onClick={() => step(1)}\n              >\n                <Icon icon={ChevronRight} size={14} />\n              </button>\n            </div>\n          )}\n        </div>\n        {view === 'date' && renderDays()}\n        {view === 'month' && renderMonths()}\n        {view === 'year' && renderYears()}\n      </div>\n    );\n  },\n);\n\nCalendarPanel.displayName = 'CalendarPanel';\n\nexport default CalendarPanel;\n"],"mappings":"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"}

package/es/DatePicker/PickerShell.mjs

@@ -1,43 +0,0 @@
-"use client";
-import { styleProps } from "../styles/stylex/props.mjs";
-import { useThemeMode } from "../styles/theme/scope.mjs";
-import { inputRootStyles } from "../Input/style.mjs";
-import ClearButton from "../Input/ClearButton.mjs";
-import { panelStyles } from "../internal/panelStyles.mjs";
-import { PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTriggerElement } from "../Popover/atoms.mjs";
-import { memo, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/DatePicker/PickerShell.tsx
-const PickerShell = memo(({ children, className, disabled, icon, onClear, onOpenChange, open, shadow, showClear, size = "middle", style, trigger, variant }) => {
-	const { isDarkMode } = useThemeMode();
-	const anchorRef = useRef(null);
-	const popupRef = useRef(null);
-	return /* @__PURE__ */ jsxs("div", {
-		"data-disabled": disabled ? "" : void 0,
-		ref: anchorRef,
-		...styleProps(inputRootStyles({
-			shadow,
-			size,
-			variant: variant || (isDarkMode ? "filled" : "outlined")
-		}), className, style),
-		children: [/* @__PURE__ */ jsxs(PopoverRoot, {
-			open,
-			onOpenChange: (next) => !disabled && onOpenChange(next),
-			children: [/* @__PURE__ */ jsx(PopoverTriggerElement, { children: trigger }), /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
-				anchor: anchorRef,
-				placement: "bottomLeft",
-				children: /* @__PURE__ */ jsx(PopoverPopup, {
-					ref: popupRef,
-					xstyle: panelStyles.popup,
-					initialFocus: () => popupRef.current?.querySelector("[data-focus-target]") ?? true,
-					children
-				})
-			}) })]
-		}), showClear && !disabled ? /* @__PURE__ */ jsx(ClearButton, { onClear }) : icon]
-	});
-});
-PickerShell.displayName = "PickerShell";
-//#endregion
-export { PickerShell as default };
-
-//# sourceMappingURL=PickerShell.mjs.map

package/es/DatePicker/PickerShell.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"PickerShell.mjs","names":[],"sources":["../../src/DatePicker/PickerShell.tsx"],"sourcesContent":["'use client';\n\nimport { type CSSProperties, memo, type ReactElement, type ReactNode, useRef } from 'react';\n\nimport ClearButton from '@/Input/ClearButton';\nimport { inputRootStyles } from '@/Input/style';\nimport type { InputSize, InputVariant } from '@/Input/type';\nimport { panelStyles } from '@/internal/panelStyles';\nimport {\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverRoot,\n  PopoverTriggerElement,\n} from '@/Popover';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nexport interface PickerShellProps {\n  children: ReactNode;\n  className?: string;\n  disabled?: boolean;\n  icon: ReactNode;\n  onClear: () => void;\n  onOpenChange: (open: boolean) => void;\n  open: boolean;\n  shadow?: boolean;\n  showClear: boolean;\n  size?: InputSize;\n  style?: CSSProperties;\n  trigger: ReactElement;\n  variant?: InputVariant;\n}\n\nconst PickerShell = memo<PickerShellProps>(\n  ({\n    children,\n    className,\n    disabled,\n    icon,\n    onClear,\n    onOpenChange,\n    open,\n    shadow,\n    showClear,\n    size = 'middle',\n    style,\n    trigger,\n    variant,\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const anchorRef = useRef<HTMLDivElement>(null);\n    const popupRef = useRef<HTMLDivElement>(null);\n\n    return (\n      <div\n        data-disabled={disabled ? '' : undefined}\n        ref={anchorRef}\n        {...styleProps(\n          inputRootStyles({\n            shadow,\n            size,\n            variant: variant || (isDarkMode ? 'filled' : 'outlined'),\n          }),\n          className,\n          style,\n        )}\n      >\n        <PopoverRoot open={open} onOpenChange={(next) => !disabled && onOpenChange(next)}>\n          <PopoverTriggerElement>{trigger}</PopoverTriggerElement>\n          <PopoverPortal>\n            <PopoverPositioner anchor={anchorRef} placement=\"bottomLeft\">\n              <PopoverPopup\n                ref={popupRef}\n                xstyle={panelStyles.popup}\n                initialFocus={() =>\n                  popupRef.current?.querySelector<HTMLElement>('[data-focus-target]') ?? true\n                }\n              >\n                {children}\n              </PopoverPopup>\n            </PopoverPositioner>\n          </PopoverPortal>\n        </PopoverRoot>\n        {showClear && !disabled ? <ClearButton onClear={onClear} /> : icon}\n      </div>\n    );\n  },\n);\n\nPickerShell.displayName = 'PickerShell';\n\nexport default PickerShell;\n"],"mappings":";;;;;;;;;;AAkCA,MAAM,cAAc,MACjB,EACC,UACA,WACA,UACA,MACA,SACA,cACA,MACA,QACA,WACA,OAAO,UACP,OACA,SACA,cACI;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,WAAW,OAAuB,IAAI;CAE5C,OACE,qBAAC,OAAD;EACE,iBAAe,WAAW,KAAK,KAAA;EAC/B,KAAK;EACL,GAAI,WACF,gBAAgB;GACd;GACA;GACA,SAAS,YAAY,aAAa,WAAW;EAC/C,CAAC,GACD,WACA,KACF;EAXF,UAAA,CAaE,qBAAC,aAAD;GAAmB;GAAM,eAAe,SAAS,CAAC,YAAY,aAAa,IAAI;GAA/E,UAAA,CACE,oBAAC,uBAAD,EAAA,UAAwB,QAA+B,CAAA,GACvD,oBAAC,eAAD,EAAA,UACE,oBAAC,mBAAD;IAAmB,QAAQ;IAAW,WAAU;IAC9C,UAAA,oBAAC,cAAD;KACE,KAAK;KACL,QAAQ,YAAY;KACpB,oBACE,SAAS,SAAS,cAA2B,qBAAqB,KAAK;KAGxE;IACW,CAAA;GACG,CAAA,EACN,CAAA,CACJ;EACZ,CAAA,GAAA,aAAa,CAAC,WAAW,oBAAC,aAAD,EAAsB,QAAU,CAAA,IAAI,IAC3D;;AAET,CACF;AAEA,YAAY,cAAc"}

package/es/DatePicker/calendar.d.mts

@@ -1,4 +0,0 @@
-//#region src/DatePicker/calendar.d.ts
-export type CalendarMode = 'date' | 'month' | 'year';
-//#endregion
-//# sourceMappingURL=calendar.d.mts.map

package/es/DatePicker/calendar.mjs

@@ -1,46 +0,0 @@
-import dayjs from "dayjs";
-//#region src/DatePicker/calendar.ts
-const DEFAULT_FORMAT = {
-	date: "MMM D, YYYY",
-	month: "MMMM YYYY",
-	year: "YYYY"
-};
-const getWeekStart = () => {
-	return dayjs.Ls[dayjs.locale()]?.weekStart ?? 0;
-};
-const offsetFromWeekStart = (date, weekStart) => (dayjs(date).day() - weekStart + 7) % 7;
-const buildMonthGrid = (month, weekStart = getWeekStart()) => {
-	const first = dayjs(month).startOf("month");
-	const start = first.subtract(offsetFromWeekStart(first.toDate(), weekStart), "day");
-	return Array.from({ length: 42 }, (_, index) => start.add(index, "day").toDate());
-};
-const getWeekdayLabels = (weekStart = getWeekStart()) => Array.from({ length: 7 }, (_, index) => dayjs().day((weekStart + index) % 7).format("dd"));
-const isSameDay = (a, b) => !!a && !!b && dayjs(a).isSame(b, "day");
-const isDayDisabled = (date, { disabledDate, max, min }) => !!min && dayjs(date).isBefore(min, "day") || !!max && dayjs(date).isAfter(max, "day") || !!disabledDate?.(date);
-const isMonthDisabled = (month, { max, min }) => !!min && dayjs(month).isBefore(min, "month") || !!max && dayjs(month).isAfter(max, "month");
-const isYearDisabled = (year, { max, min }) => !!min && dayjs(year).isBefore(min, "year") || !!max && dayjs(year).isAfter(max, "year");
-const moveDayFocus = (date, key, weekStart = getWeekStart()) => {
-	const current = dayjs(date);
-	const offset = offsetFromWeekStart(date, weekStart);
-	switch (key) {
-		case "ArrowLeft": return current.subtract(1, "day").toDate();
-		case "ArrowRight": return current.add(1, "day").toDate();
-		case "ArrowUp": return current.subtract(7, "day").toDate();
-		case "ArrowDown": return current.add(7, "day").toDate();
-		case "PageUp": return current.subtract(1, "month").toDate();
-		case "PageDown": return current.add(1, "month").toDate();
-		case "Home": return current.subtract(offset, "day").toDate();
-		case "End": return current.add(6 - offset, "day").toDate();
-		default: return null;
-	}
-};
-const orderRange = (a, b) => dayjs(a).isAfter(b, "day") ? [b, a] : [a, b];
-const clampToBounds = (date, { max, min }) => {
-	if (min && dayjs(date).isBefore(min, "day")) return min;
-	if (max && dayjs(date).isAfter(max, "day")) return max;
-	return date;
-};
-//#endregion
-export { DEFAULT_FORMAT, buildMonthGrid, clampToBounds, getWeekStart, getWeekdayLabels, isDayDisabled, isMonthDisabled, isSameDay, isYearDisabled, moveDayFocus, orderRange };
-
-//# sourceMappingURL=calendar.mjs.map

package/es/DatePicker/calendar.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"calendar.mjs","names":[],"sources":["../../src/DatePicker/calendar.ts"],"sourcesContent":["import dayjs from 'dayjs';\n\nexport type CalendarMode = 'date' | 'month' | 'year';\n\nexport interface DateBounds {\n  disabledDate?: (date: Date) => boolean;\n  max?: Date;\n  min?: Date;\n}\n\nexport const DEFAULT_FORMAT: Record<CalendarMode, string> = {\n  date: 'MMM D, YYYY',\n  month: 'MMMM YYYY',\n  year: 'YYYY',\n};\n\nexport const getWeekStart = (): number => {\n  const locales = (dayjs as unknown as { Ls: Record<string, { weekStart?: number }> }).Ls;\n  return locales[dayjs.locale()]?.weekStart ?? 0;\n};\n\nconst offsetFromWeekStart = (date: Date, weekStart: number) =>\n  (dayjs(date).day() - weekStart + 7) % 7;\n\nexport const buildMonthGrid = (month: Date, weekStart = getWeekStart()): Date[] => {\n  const first = dayjs(month).startOf('month');\n  const start = first.subtract(offsetFromWeekStart(first.toDate(), weekStart), 'day');\n  return Array.from({ length: 42 }, (_, index) => start.add(index, 'day').toDate());\n};\n\nexport const getWeekdayLabels = (weekStart = getWeekStart()): string[] =>\n  Array.from({ length: 7 }, (_, index) =>\n    dayjs()\n      .day((weekStart + index) % 7)\n      .format('dd'),\n  );\n\nexport const isSameDay = (a?: Date | null, b?: Date | null) =>\n  !!a && !!b && dayjs(a).isSame(b, 'day');\n\nexport const isDayDisabled = (date: Date, { disabledDate, max, min }: DateBounds) =>\n  (!!min && dayjs(date).isBefore(min, 'day')) ||\n  (!!max && dayjs(date).isAfter(max, 'day')) ||\n  !!disabledDate?.(date);\n\nexport const isMonthDisabled = (month: Date, { max, min }: DateBounds) =>\n  (!!min && dayjs(month).isBefore(min, 'month')) || (!!max && dayjs(month).isAfter(max, 'month'));\n\nexport const isYearDisabled = (year: Date, { max, min }: DateBounds) =>\n  (!!min && dayjs(year).isBefore(min, 'year')) || (!!max && dayjs(year).isAfter(max, 'year'));\n\nexport const moveDayFocus = (date: Date, key: string, weekStart = getWeekStart()): Date | null => {\n  const current = dayjs(date);\n  const offset = offsetFromWeekStart(date, weekStart);\n  switch (key) {\n    case 'ArrowLeft': {\n      return current.subtract(1, 'day').toDate();\n    }\n    case 'ArrowRight': {\n      return current.add(1, 'day').toDate();\n    }\n    case 'ArrowUp': {\n      return current.subtract(7, 'day').toDate();\n    }\n    case 'ArrowDown': {\n      return current.add(7, 'day').toDate();\n    }\n    case 'PageUp': {\n      return current.subtract(1, 'month').toDate();\n    }\n    case 'PageDown': {\n      return current.add(1, 'month').toDate();\n    }\n    case 'Home': {\n      return current.subtract(offset, 'day').toDate();\n    }\n    case 'End': {\n      return current.add(6 - offset, 'day').toDate();\n    }\n    default: {\n      return null;\n    }\n  }\n};\n\nexport const orderRange = (a: Date, b: Date): [Date, Date] =>\n  dayjs(a).isAfter(b, 'day') ? [b, a] : [a, b];\n\nexport const clampToBounds = (date: Date, { max, min }: DateBounds): Date => {\n  if (min && dayjs(date).isBefore(min, 'day')) return min;\n  if (max && dayjs(date).isAfter(max, 'day')) return max;\n  return date;\n};\n"],"mappings":"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"}

package/es/Table/FilterMenu.mjs

@@ -1,45 +0,0 @@
-"use client";
-import Icon from "../Icon/Icon.mjs";
-import DropdownMenu from "../DropdownMenu/DropdownMenu.mjs";
-import { filterButtonStyles, styles } from "./style.mjs";
-import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
-import * as stylex from "@stylexjs/stylex";
-import { ListFilter } from "lucide-react";
-//#region src/Table/FilterMenu.tsx
-const FilterMenu = memo(({ filters, label, onChange, value }) => {
-	const items = [
-		...filters.map((filter) => ({
-			checked: value.includes(filter.value),
-			closeOnClick: false,
-			key: String(filter.value),
-			label: filter.text,
-			onCheckedChange: (checked) => onChange(checked ? [...value, filter.value] : value.filter((item) => item !== filter.value)),
-			type: "checkbox"
-		})),
-		{ type: "divider" },
-		{
-			disabled: value.length === 0,
-			key: "__reset",
-			label: "Reset",
-			onClick: () => onChange([])
-		}
-	];
-	return /* @__PURE__ */ jsx(DropdownMenu, {
-		items,
-		children: /* @__PURE__ */ jsx("button", {
-			"aria-label": `Filter ${label}`,
-			type: "button",
-			...stylex.props(filterButtonStyles, value.length > 0 && styles.filterActive),
-			children: /* @__PURE__ */ jsx(Icon, {
-				icon: ListFilter,
-				size: 12
-			})
-		})
-	});
-});
-FilterMenu.displayName = "TableFilterMenu";
-//#endregion
-export { FilterMenu as default };
-
-//# sourceMappingURL=FilterMenu.mjs.map

package/es/Table/FilterMenu.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"FilterMenu.mjs","names":[],"sources":["../../src/Table/FilterMenu.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ListFilter } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport DropdownMenu from '@/DropdownMenu';\nimport type { DropdownItem } from '@/DropdownMenu/type';\nimport Icon from '@/Icon';\n\nimport { filterButtonStyles, styles } from './style';\nimport type { FilterValue } from './type';\n\ninterface FilterMenuProps {\n  filters: { text: ReactNode; value: FilterValue }[];\n  label: string;\n  onChange: (next: FilterValue[]) => void;\n  value: FilterValue[];\n}\n\nconst FilterMenu = memo<FilterMenuProps>(({ filters, label, onChange, value }) => {\n  const items: DropdownItem[] = [\n    ...filters.map((filter) => ({\n      checked: value.includes(filter.value),\n      closeOnClick: false,\n      key: String(filter.value),\n      label: filter.text,\n      onCheckedChange: (checked: boolean) =>\n        onChange(\n          checked ? [...value, filter.value] : value.filter((item) => item !== filter.value),\n        ),\n      type: 'checkbox' as const,\n    })),\n    { type: 'divider' as const },\n    { disabled: value.length === 0, key: '__reset', label: 'Reset', onClick: () => onChange([]) },\n  ];\n\n  return (\n    <DropdownMenu items={items}>\n      <button\n        aria-label={`Filter ${label}`}\n        type=\"button\"\n        {...stylex.props(filterButtonStyles, value.length > 0 && styles.filterActive)}\n      >\n        <Icon icon={ListFilter} size={12} />\n      </button>\n    </DropdownMenu>\n  );\n});\n\nFilterMenu.displayName = 'TableFilterMenu';\n\nexport default FilterMenu;\n"],"mappings":";;;;;;;;;AAmBA,MAAM,aAAa,MAAuB,EACxC,SACA,OACA,UACA,YACI;CACJ,MAAM,QAAwB;EAAC,GAAG,QAAQ,KAAI,YAAW;GACvD,SAAS,MAAM,SAAS,OAAO,KAAK;GACpC,cAAc;GACd,KAAK,OAAO,OAAO,KAAK;GACxB,OAAO,OAAO;GACd,kBAAkB,YAAqB,SAAS,UAAU,CAAC,GAAG,OAAO,OAAO,KAAK,IAAI,MAAM,QAAO,SAAQ,SAAS,OAAO,KAAK,CAAC;GAChI,MAAM;EACR,EAAE;EAAG,EACH,MAAM,UACR;EAAG;GACD,UAAU,MAAM,WAAW;GAC3B,KAAK;GACL,OAAO;GACP,eAAe,SAAS,CAAC,CAAC;EAC5B;CAAC;CACD,OAAO,oBAAC,cAAD;EAAqB;EACxB,UAAA,oBAAC,UAAD;GAAQ,cAAY,UAAU;GAAS,MAAK;GAAS,GAAI,OAAO,MAAM,oBAAoB,MAAM,SAAS,KAAK,OAAO,YAAY;GAC/H,UAAA,oBAAC,MAAD;IAAM,MAAM;IAAY,MAAM;GAAK,CAAA;EAC7B,CAAA;CACI,CAAA;AAClB,CAAC;AACD,WAAW,cAAc"}

package/es/Table/TableBody.mjs

@@ -1,67 +0,0 @@
-"use client";
-import { styleProps } from "../styles/stylex/props.mjs";
-import Empty from "../Empty/Empty.mjs";
-import Spin from "../Spin/Spin.mjs";
-import { tableRowMarker } from "./marker.stylex.mjs";
-import { cellSizeStyles, styles } from "./style.mjs";
-import { getCellValue } from "./toColumnDefs.mjs";
-import { createElement } from "react";
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import * as stylex from "@stylexjs/stylex";
-//#region src/Table/TableBody.tsx
-const TableBody = ({ bordered, classNames, columnIds, columns, emptyText, fixedOffsets, loading, onRow, rowClassName, rows, size, styles: customStyles }) => {
-	if (rows.length === 0) return /* @__PURE__ */ jsx("tbody", {
-		className: classNames?.body,
-		style: customStyles?.body,
-		children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-			colSpan: columns.length,
-			...stylex.props(styles.empty, cellSizeStyles[size]),
-			children: loading ? /* @__PURE__ */ jsx(Spin, {}) : emptyText ?? /* @__PURE__ */ jsx(Empty, { description: "No data" })
-		}) })
-	});
-	return /* @__PURE__ */ jsx("tbody", {
-		className: classNames?.body,
-		style: customStyles?.body,
-		children: rows.map((row, rowIndex) => {
-			const record = row.original;
-			const rowProps = onRow?.(record, rowIndex) ?? {};
-			const extraClassName = typeof rowClassName === "function" ? rowClassName(record, rowIndex) : rowClassName;
-			return /* @__PURE__ */ createElement("tr", {
-				...rowProps,
-				key: row.id,
-				...styleProps([tableRowMarker, rowProps.onClick && styles.clickable], clsx(extraClassName, classNames?.row, rowProps.className), {
-					...customStyles?.row,
-					...rowProps.style
-				})
-			}, columns.map((column, columnIndex) => {
-				const value = getCellValue(record, column);
-				const cellProps = column.onCell?.(record, rowIndex) ?? {};
-				const content = column.render ? column.render(value, record, rowIndex) : value;
-				return /* @__PURE__ */ createElement("td", {
-					...cellProps,
-					key: columnIds[columnIndex],
-					title: column.ellipsis && typeof content === "string" ? content : cellProps.title,
-					...styleProps([
-						styles.cell,
-						column.ellipsis && styles.ellipsis,
-						column.fixed && styles.fixed,
-						cellSizeStyles[size],
-						bordered && columnIndex < columns.length - 1 && styles.borderedCell,
-						rowIndex === rows.length - 1 && styles.cellLastRow
-					], clsx(column.className, classNames?.cell, cellProps.className), {
-						textAlign: column.align,
-						width: column.width,
-						...fixedOffsets[columnIndex],
-						...customStyles?.cell,
-						...cellProps.style
-					})
-				}, content);
-			}));
-		})
-	});
-};
-//#endregion
-export { TableBody as default };
-
-//# sourceMappingURL=TableBody.mjs.map