@lobehub/ui 6.0.0-beta.6 → 6.0.0-beta.8

package/es/Button/style.d.mts

@@ -12,7 +12,7 @@ export declare const styles: Readonly<{
     readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 1>;
     readonly gap: stylex.StyleXClassNameFor<"gap", 6>;
     readonly textDecoration: stylex.StyleXClassNameFor<"textDecoration", "none">;
-    readonly transition: stylex.StyleXClassNameFor<"transition", "color 160ms cubic-bezier(0.32, 0.72, 0, 1), background 160ms cubic-bezier(0.32, 0.72, 0, 1), border-color 160ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1)">;
+    readonly transition: stylex.StyleXClassNameFor<"transition", "color 160ms cubic-bezier(0.32, 0.72, 0, 1), background-color 160ms cubic-bezier(0.32, 0.72, 0, 1), background-image 160ms cubic-bezier(0.32, 0.72, 0, 1), border-color 160ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1)">;
     readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
     readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
     readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
@@ -105,6 +105,7 @@ export declare const styles: Readonly<{
   readonly variantDefault: Readonly<{
     readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
     readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", string | null>;
     readonly color: stylex.StyleXClassNameFor<"color", string>;
   }>;
   readonly variantPrimary: Readonly<{
@@ -116,6 +117,7 @@ export declare const styles: Readonly<{
     readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
     readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "dashed">;
     readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", string | null>;
     readonly color: stylex.StyleXClassNameFor<"color", string>;
   }>;
   readonly variantFill: Readonly<{
@@ -137,6 +139,7 @@ export declare const styles: Readonly<{
   readonly dangerOutlined: Readonly<{
     readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
     readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", null>;
     readonly color: stylex.StyleXClassNameFor<"color", string>;
   }>;
   readonly dangerSolid: Readonly<{
@@ -149,6 +152,10 @@ export declare const styles: Readonly<{
     readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
     readonly color: stylex.StyleXClassNameFor<"color", string>;
   }>;
+  readonly dangerText: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+  }>;
   readonly dangerInline: Readonly<{
     readonly color: stylex.StyleXClassNameFor<"color", string>;
   }>;

package/es/Button/style.mjs

@@ -1,3 +1,4 @@
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
 import * as stylex from "@stylexjs/stylex";
 //#region src/Button/style.ts
 const buttonPaddingInline = {
@@ -5,6 +6,20 @@ const buttonPaddingInline = {
 	middle: 14,
 	small: 8
 };
+`${cssVar.colorError}`;
+`${cssVar.colorError}`;
+`${cssVar.colorText}${cssVar.colorBorder}`;
+`${cssVar.colorFillTertiary}${cssVar.colorFillTertiary}`;
+`${cssVar.colorFillSecondary}${cssVar.colorFillSecondary}`;
+`${cssVar.colorError}`;
+`${cssVar.colorError}`;
+`${cssVar.colorError}`;
+`${cssVar.colorError}`;
+`${cssVar.colorError}`;
+`${cssVar.colorError}`;
+`${cssVar.colorError}`;
+`${cssVar.colorError}${cssVar.colorBgContainer}`;
+`${cssVar.colorError}${cssVar.colorBgContainer}`;
 const styles = {
 	base: {
 		kVAM5u: "lbqnr5ac",
@@ -12,7 +27,7 @@ const styles = {
 		kMzoRj: "lbmkeg23",
 		kOIVth: "lb17d4w8g",
 		kybGjl: "lb1hl2dhg",
-		kmkexE: "lbz4dce",
+		kmkexE: "lb15xd0no",
 		kGNEyG: "lb6s0dn4",
 		kB7OPa: "lb9f619",
 		kkrTdU: "lb1ypdohk lb126qsmr",
@@ -120,9 +135,10 @@ const styles = {
 		$$css: true
 	},
 	variantDefault: {
-		kVAM5u: "lbqnr5ac lbnudtlt",
+		kVAM5u: "lbqnr5ac lbv4eugq",
 		kWkggS: "lb6yijhg",
-		kMwMTN: "lb66ogz0 lb10e6xak",
+		kKwaWg: "lb1hdlj1n lbx7ggy6",
+		kMwMTN: "lb66ogz0",
 		$$css: true
 	},
 	variantPrimary: {
@@ -132,10 +148,11 @@ const styles = {
 		$$css: true
 	},
 	variantDashed: {
-		kVAM5u: "lbqnr5ac lbnudtlt",
+		kVAM5u: "lbqnr5ac lbv4eugq",
 		ksu8eU: "lbbsl7fq",
 		kWkggS: "lb6yijhg",
-		kMwMTN: "lb66ogz0 lb10e6xak",
+		kKwaWg: "lb1hdlj1n lbx7ggy6",
+		kMwMTN: "lb66ogz0",
 		$$css: true
 	},
 	variantFill: {
@@ -158,25 +175,31 @@ const styles = {
 		$$css: true
 	},
 	dangerOutlined: {
-		kVAM5u: "lb11fhi00 lbh2h5hx",
-		kWkggS: "lb6yijhg",
-		kMwMTN: "lb12ap7uz lb158did2",
+		kVAM5u: "lb1mpi7gh lbs8cwth",
+		kWkggS: "lb1saschm lb6yijhg lbzxaxr6",
+		kKwaWg: null,
+		kMwMTN: "lb12ap7uz",
 		$$css: true
 	},
 	dangerSolid: {
-		kVAM5u: "lblxergw lb11fhi00 lb12cazn7 lb13cas3i",
-		kWkggS: "lb1v7zx8w lbixdnzb lb6w9gdg lb1qwfrtx",
+		kVAM5u: "lb1dvy257 lb11fhi00 lb2949mz lb1e5ynfq",
+		kWkggS: "lb15l4kc2 lbixdnzb lb1mog8ep lb1gj3nph",
 		kMwMTN: "lb15g0kca",
 		$$css: true
 	},
 	dangerFill: {
 		kVAM5u: "lb9r1u3d",
-		kWkggS: "lb1dm0l71 lb29nf4p lbt8c1aj",
-		kMwMTN: "lb1mergwt lb12ap7uz lb1iasuq3",
+		kWkggS: "lbrq8w1b lb1f2tfg0 lb1lf6bdk",
+		kMwMTN: "lb12ap7uz",
+		$$css: true
+	},
+	dangerText: {
+		kWkggS: "lb14kxky9 lbjbqb8w lb3lzv3l",
+		kMwMTN: "lb12ap7uz",
 		$$css: true
 	},
 	dangerInline: {
-		kMwMTN: "lb12ap7uz lb158did2",
+		kMwMTN: "lb12ap7uz lbcu7z5f",
 		$$css: true
 	},
 	ghostDefault: {
@@ -193,8 +216,8 @@ const styles = {
 	},
 	ghostDanger: {
 		kVAM5u: "lb9r1u3d",
-		kWkggS: "lb1qlulce lbjbqb8w lb5d67gy",
-		kMwMTN: "lb1mergwt lb12ap7uz lb1iasuq3",
+		kWkggS: "lb14kxky9 lbjbqb8w lb3lzv3l",
+		kMwMTN: "lb12ap7uz",
 		$$css: true
 	},
 	spinner: {
@@ -228,7 +251,7 @@ const splitStyles = {
 		$$css: true
 	},
 	solidDanger: {
-		"--lobe-split-button-fill": "lb18ie2v8 lb1ay50n1",
+		"--lobe-split-button-fill": "lb1g6lid4 lb14ldvf4",
 		$$css: true
 	},
 	item: {
@@ -256,8 +279,8 @@ const splitStyles = {
 		$$css: true
 	},
 	itemFillDanger: {
-		kVAM5u: "lb1n1lchj lb13cas3i",
-		kWkggS: "lb171v8l7 lb1qwfrtx",
+		kVAM5u: "lb1n1lchj lb1e5ynfq",
+		kWkggS: "lb171v8l7 lb1gj3nph",
 		$$css: true
 	},
 	itemFillGhost: {

package/es/Button/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Button/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const buttonPaddingInline = {\n  large: 16,\n  middle: 14,\n  small: 8,\n} as const;\n\nconst disabled = ':is(:disabled, [aria-disabled=\"true\"])';\nconst hover = ':hover:not(:disabled, [aria-disabled=\"true\"])';\nconst active = ':active:not(:disabled, [aria-disabled=\"true\"])';\nconst hoverIdle = ':hover:not(:active, :disabled, [aria-disabled=\"true\"])';\nconst hoverIdleClosed = ':hover:not(:active, :disabled, [aria-disabled=\"true\"], [data-popup-open])';\nconst popupOpen = ':is([data-popup-open])';\n\nconst spin = stylex.keyframes({\n  to: { transform: 'rotate(360deg)' },\n});\n\nconst ease = 'cubic-bezier(0.32, 0.72, 0, 1)';\nconst slotEase = 'cubic-bezier(0.22, 1, 0.36, 1)';\n\nexport const styles = stylex.create({\n  base: {\n    borderColor: cssVar.colorBorder,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    gap: 6,\n    textDecoration: 'none',\n    transition: `color 160ms ${ease}, background 160ms ${ease}, border-color 160ms ${ease}, box-shadow 160ms ${ease}`,\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    cursor: { default: 'pointer', [disabled]: 'not-allowed' },\n    display: 'inline-flex',\n    fontWeight: 500,\n    justifyContent: 'center',\n    lineHeight: 1,\n    opacity: { default: null, [disabled]: 0.5 },\n    pointerEvents: { default: null, [disabled]: 'none' },\n    position: 'relative',\n    whiteSpace: 'nowrap',\n  },\n\n  sizeSmall: {\n    '--button-padding-inline': `${buttonPaddingInline.small}px`,\n    'borderRadius': cssVar.borderRadiusSM,\n    'paddingInline': 'var(--button-padding-inline)',\n    'fontSize': 12,\n    'height': 24,\n  },\n\n  sizeMiddle: {\n    '--button-padding-inline': `${buttonPaddingInline.middle}px`,\n    'borderRadius': cssVar.borderRadiusSM,\n    'paddingInline': 'var(--button-padding-inline)',\n    'fontSize': 13,\n    'height': 32,\n  },\n\n  sizeLarge: {\n    '--button-padding-inline': `${buttonPaddingInline.large}px`,\n    'borderRadius': cssVar.borderRadius,\n    'paddingInline': 'var(--button-padding-inline)',\n    'fontSize': 14,\n    'height': 40,\n  },\n\n  outdentStart: {\n    marginInlineStart: 'calc(var(--button-padding-inline) * -1)',\n  },\n\n  outdentEnd: {\n    marginInlineEnd: 'calc(var(--button-padding-inline) * -1)',\n  },\n\n  shapeCircle: {\n    borderRadius: '50%',\n    paddingInline: 0,\n  },\n\n  shapeRound: {\n    borderRadius: 999,\n  },\n\n  block: {\n    width: '100%',\n  },\n\n  iconEnd: {\n    flexDirection: 'row-reverse',\n  },\n\n  iconOnlySmall: {\n    '--button-padding-inline': '0px',\n    'paddingInline': 0,\n    'width': 24,\n  },\n\n  iconOnlyMiddle: {\n    '--button-padding-inline': '0px',\n    'paddingInline': 0,\n    'width': 32,\n  },\n\n  iconOnlyLarge: {\n    '--button-padding-inline': '0px',\n    'paddingInline': 0,\n    'width': 40,\n  },\n\n  iconBox: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n\n  spinnerSlot: {\n    overflow: 'hidden',\n    transition: `width 380ms ${slotEase}, margin 380ms ${slotEase}, opacity 260ms ${slotEase}`,\n    marginInlineEnd: -6,\n    opacity: 0,\n    width: 0,\n  },\n\n  spinnerSlotEnd: {\n    marginInlineEnd: 0,\n    marginInlineStart: -6,\n  },\n\n  spinnerSlotShow: {\n    marginInlineEnd: 0,\n    marginInlineStart: 0,\n    opacity: 1,\n    width: 12,\n  },\n\n  variantDefault: {\n    borderColor: { default: cssVar.colorBorder, [hover]: cssVar.colorPrimaryBorder },\n    backgroundColor: cssVar.colorBgContainer,\n    color: { default: cssVar.colorText, [hover]: cssVar.colorPrimaryText },\n  },\n\n  variantPrimary: {\n    borderColor: {\n      [active]: cssVar.colorPrimaryActive,\n      default: cssVar.colorPrimary,\n      [hoverIdleClosed]: cssVar.colorPrimaryHover,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n    backgroundColor: {\n      [active]: cssVar.colorPrimaryActive,\n      default: cssVar.colorPrimary,\n      [hoverIdleClosed]: cssVar.colorPrimaryHover,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n    color: cssVar.colorBgLayout,\n  },\n\n  variantDashed: {\n    borderColor: { default: cssVar.colorBorder, [hover]: cssVar.colorPrimaryBorder },\n    borderStyle: 'dashed',\n    backgroundColor: cssVar.colorBgContainer,\n    color: { default: cssVar.colorText, [hover]: cssVar.colorPrimaryText },\n  },\n\n  variantFill: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorFill,\n      default: cssVar.colorFillTertiary,\n      [hoverIdle]: cssVar.colorFillSecondary,\n    },\n    color: cssVar.colorText,\n  },\n\n  variantText: {\n    borderColor: 'transparent',\n    backgroundColor: { default: 'transparent', [hover]: cssVar.colorFillSecondary },\n    color: cssVar.colorText,\n  },\n\n  variantLink: {\n    borderColor: 'transparent',\n    paddingInline: 0,\n    backgroundColor: 'transparent',\n    color: { default: cssVar.colorPrimary, [hover]: cssVar.colorPrimaryHover },\n  },\n\n  dangerOutlined: {\n    borderColor: { default: cssVar.colorError, [hover]: cssVar.colorErrorHover },\n    backgroundColor: cssVar.colorBgContainer,\n    color: { default: cssVar.colorError, [hover]: cssVar.colorErrorHover },\n  },\n\n  dangerSolid: {\n    borderColor: {\n      [active]: cssVar.colorErrorActive,\n      default: cssVar.colorError,\n      [hoverIdleClosed]: cssVar.colorErrorHover,\n      [popupOpen]: cssVar.colorErrorActive,\n    },\n    backgroundColor: {\n      [active]: cssVar.colorErrorActive,\n      default: cssVar.colorError,\n      [hoverIdleClosed]: cssVar.colorErrorHover,\n      [popupOpen]: cssVar.colorErrorActive,\n    },\n    color: cssVar.colorBgLayout,\n  },\n\n  dangerFill: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorErrorBgHover,\n      default: cssVar.colorErrorBg,\n      [hover]: cssVar.colorErrorBgHover,\n    },\n    color: {\n      [active]: cssVar.colorErrorActive,\n      default: cssVar.colorError,\n      [hoverIdle]: cssVar.colorErrorHover,\n    },\n  },\n\n  dangerInline: {\n    color: { default: cssVar.colorError, [hover]: cssVar.colorErrorHover },\n  },\n\n  ghostDefault: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorFill,\n      default: 'transparent',\n      [hoverIdle]: cssVar.colorFillSecondary,\n    },\n    color: cssVar.colorText,\n  },\n\n  ghostPrimary: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorFill,\n      default: 'transparent',\n      [hoverIdle]: cssVar.colorFillSecondary,\n    },\n    color: {\n      [active]: cssVar.colorPrimaryActive,\n      default: cssVar.colorPrimary,\n      [hoverIdle]: cssVar.colorPrimaryHover,\n    },\n  },\n\n  ghostDanger: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorFill,\n      default: 'transparent',\n      [hoverIdle]: cssVar.colorFillSecondary,\n    },\n    color: {\n      [active]: cssVar.colorErrorActive,\n      default: cssVar.colorError,\n      [hoverIdle]: cssVar.colorErrorHover,\n    },\n  },\n\n  spinner: {\n    borderColor: 'currentcolor',\n    borderRadius: '50%',\n    borderStyle: 'solid',\n    borderWidth: 1.5,\n    animationDuration: '0.6s',\n    animationIterationCount: 'infinite',\n    animationName: spin,\n    animationTimingFunction: 'linear',\n    borderBlockStartColor: 'transparent',\n    display: 'inline-block',\n    height: 12,\n    width: 12,\n  },\n});\n\nconst hasHover = ':has(> :where(button, a):hover:not(:disabled, [aria-disabled=\"true\"]))';\nconst hasActive = ':has(> :where(button, a):active:not(:disabled, [aria-disabled=\"true\"]))';\nconst hasHoverOnly = `${hasHover}:not(${hasActive})`;\nconst first = ':first-of-type';\nconst last = ':last-of-type';\n\nexport const splitStyles = stylex.create({\n  root: {\n    display: 'inline-flex',\n    flexDirection: 'row',\n  },\n  interactionDisabled: {\n    opacity: 0.5,\n  },\n  solidPrimary: {\n    '--lobe-split-button-fill': {\n      default: null,\n      [hasActive]: cssVar.colorPrimaryActive,\n      [hasHoverOnly]: cssVar.colorPrimaryHover,\n    },\n  },\n  solidDanger: {\n    '--lobe-split-button-fill': {\n      default: null,\n      [hasActive]: cssVar.colorErrorActive,\n      [hasHoverOnly]: cssVar.colorErrorHover,\n    },\n  },\n  item: {\n    borderEndEndRadius: { default: null, [first]: 0 },\n    borderEndStartRadius: { default: null, [last]: 0 },\n    borderStartEndRadius: { default: null, [first]: 0 },\n    borderStartStartRadius: { default: null, [last]: 0 },\n    marginInlineStart: { default: null, [last]: -1 },\n  },\n  itemInteractionDisabled: {\n    opacity: { default: null, [disabled]: 1 },\n  },\n  itemSolid: {\n    // solid halves share one color, so the outline-merging overlap only adds a dark seam once each half is translucent (disabled)\n    'marginInlineStart': { default: null, [last]: 0 },\n    '::before': {\n      insetBlock: { default: null, [last]: 0 },\n      backgroundColor: { default: null, [last]: 'currentcolor' },\n      content: { default: null, [last]: \"''\" },\n      insetInlineStart: { default: null, [last]: 0 },\n      opacity: { default: null, [last]: 0.2 },\n      pointerEvents: { default: null, [last]: 'none' },\n      position: { default: null, [last]: 'absolute' },\n      width: { default: null, [last]: 1 },\n    },\n  },\n  itemFillDanger: {\n    borderColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorError})`,\n      [popupOpen]: cssVar.colorErrorActive,\n    },\n    backgroundColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorError})`,\n      [popupOpen]: cssVar.colorErrorActive,\n    },\n  },\n  itemFillGhost: {\n    borderColor: 'var(--lobe-split-button-fill, transparent)',\n    backgroundColor: 'var(--lobe-split-button-fill, transparent)',\n  },\n  itemFillPrimary: {\n    borderColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorPrimary})`,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n    backgroundColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorPrimary})`,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n  },\n});\n\nexport const buttonStyles = Object.fromEntries(\n  Object.entries(styles).map(([key, value]) => [key, stylex.props(value).className ?? '']),\n) as Record<keyof typeof styles, string>;\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Button/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const buttonPaddingInline = {\n  large: 16,\n  middle: 14,\n  small: 8,\n} as const;\n\nconst disabled = ':is(:disabled, [aria-disabled=\"true\"])';\nconst hover = ':hover:not(:disabled, [aria-disabled=\"true\"])';\nconst active = ':active:not(:disabled, [aria-disabled=\"true\"])';\nconst hoverIdle = ':hover:not(:active, :disabled, [aria-disabled=\"true\"])';\nconst hoverIdleClosed = ':hover:not(:active, :disabled, [aria-disabled=\"true\"], [data-popup-open])';\nconst popupOpen = ':is([data-popup-open])';\n\nconst spin = stylex.keyframes({\n  to: { transform: 'rotate(360deg)' },\n});\n\nconst ease = 'cubic-bezier(0.32, 0.72, 0, 1)';\n\nconst errorHover = `color-mix(in srgb, ${cssVar.colorError} 88%, white)`;\nconst errorActive = `color-mix(in srgb, ${cssVar.colorError} 88%, black)`;\nconst borderHover = `color-mix(in srgb, ${cssVar.colorText} 8%, ${cssVar.colorBorder})`;\nconst neutralWash = `linear-gradient(${cssVar.colorFillTertiary}, ${cssVar.colorFillTertiary})`;\nconst neutralWashActive = `linear-gradient(${cssVar.colorFillSecondary}, ${cssVar.colorFillSecondary})`;\nconst error10 = `color-mix(in srgb, ${cssVar.colorError} 10%, transparent)`;\nconst error12 = `color-mix(in srgb, ${cssVar.colorError} 12%, transparent)`;\nconst error16 = `color-mix(in srgb, ${cssVar.colorError} 16%, transparent)`;\nconst error18 = `color-mix(in srgb, ${cssVar.colorError} 18%, transparent)`;\nconst error22 = `color-mix(in srgb, ${cssVar.colorError} 22%, transparent)`;\nconst error40 = `color-mix(in srgb, ${cssVar.colorError} 40%, transparent)`;\nconst error65 = `color-mix(in srgb, ${cssVar.colorError} 65%, transparent)`;\nconst errorOnContainer8 = `color-mix(in srgb, ${cssVar.colorError} 8%, ${cssVar.colorBgContainer})`;\nconst errorOnContainer14 = `color-mix(in srgb, ${cssVar.colorError} 14%, ${cssVar.colorBgContainer})`;\nconst slotEase = 'cubic-bezier(0.22, 1, 0.36, 1)';\n\nexport const styles = stylex.create({\n  base: {\n    borderColor: cssVar.colorBorder,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    gap: 6,\n    textDecoration: 'none',\n    transition: `color 160ms ${ease}, background-color 160ms ${ease}, background-image 160ms ${ease}, border-color 160ms ${ease}, box-shadow 160ms ${ease}`,\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    cursor: { default: 'pointer', [disabled]: 'not-allowed' },\n    display: 'inline-flex',\n    fontWeight: 500,\n    justifyContent: 'center',\n    lineHeight: 1,\n    opacity: { default: null, [disabled]: 0.5 },\n    pointerEvents: { default: null, [disabled]: 'none' },\n    position: 'relative',\n    whiteSpace: 'nowrap',\n  },\n\n  sizeSmall: {\n    '--button-padding-inline': `${buttonPaddingInline.small}px`,\n    'borderRadius': cssVar.borderRadiusSM,\n    'paddingInline': 'var(--button-padding-inline)',\n    'fontSize': 12,\n    'height': 24,\n  },\n\n  sizeMiddle: {\n    '--button-padding-inline': `${buttonPaddingInline.middle}px`,\n    'borderRadius': cssVar.borderRadiusSM,\n    'paddingInline': 'var(--button-padding-inline)',\n    'fontSize': 13,\n    'height': 32,\n  },\n\n  sizeLarge: {\n    '--button-padding-inline': `${buttonPaddingInline.large}px`,\n    'borderRadius': cssVar.borderRadius,\n    'paddingInline': 'var(--button-padding-inline)',\n    'fontSize': 14,\n    'height': 40,\n  },\n\n  outdentStart: {\n    marginInlineStart: 'calc(var(--button-padding-inline) * -1)',\n  },\n\n  outdentEnd: {\n    marginInlineEnd: 'calc(var(--button-padding-inline) * -1)',\n  },\n\n  shapeCircle: {\n    borderRadius: '50%',\n    paddingInline: 0,\n  },\n\n  shapeRound: {\n    borderRadius: 999,\n  },\n\n  block: {\n    width: '100%',\n  },\n\n  iconEnd: {\n    flexDirection: 'row-reverse',\n  },\n\n  iconOnlySmall: {\n    '--button-padding-inline': '0px',\n    'paddingInline': 0,\n    'width': 24,\n  },\n\n  iconOnlyMiddle: {\n    '--button-padding-inline': '0px',\n    'paddingInline': 0,\n    'width': 32,\n  },\n\n  iconOnlyLarge: {\n    '--button-padding-inline': '0px',\n    'paddingInline': 0,\n    'width': 40,\n  },\n\n  iconBox: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n\n  spinnerSlot: {\n    overflow: 'hidden',\n    transition: `width 380ms ${slotEase}, margin 380ms ${slotEase}, opacity 260ms ${slotEase}`,\n    marginInlineEnd: -6,\n    opacity: 0,\n    width: 0,\n  },\n\n  spinnerSlotEnd: {\n    marginInlineEnd: 0,\n    marginInlineStart: -6,\n  },\n\n  spinnerSlotShow: {\n    marginInlineEnd: 0,\n    marginInlineStart: 0,\n    opacity: 1,\n    width: 12,\n  },\n\n  variantDefault: {\n    borderColor: { default: cssVar.colorBorder, [hover]: borderHover },\n    backgroundColor: cssVar.colorBgContainer,\n    backgroundImage: {\n      [active]: neutralWashActive,\n      default: null,\n      [hoverIdle]: neutralWash,\n    },\n    color: cssVar.colorText,\n  },\n\n  variantPrimary: {\n    borderColor: {\n      [active]: cssVar.colorPrimaryActive,\n      default: cssVar.colorPrimary,\n      [hoverIdleClosed]: cssVar.colorPrimaryHover,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n    backgroundColor: {\n      [active]: cssVar.colorPrimaryActive,\n      default: cssVar.colorPrimary,\n      [hoverIdleClosed]: cssVar.colorPrimaryHover,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n    color: cssVar.colorBgLayout,\n  },\n\n  variantDashed: {\n    borderColor: { default: cssVar.colorBorder, [hover]: borderHover },\n    borderStyle: 'dashed',\n    backgroundColor: cssVar.colorBgContainer,\n    backgroundImage: {\n      [active]: neutralWashActive,\n      default: null,\n      [hoverIdle]: neutralWash,\n    },\n    color: cssVar.colorText,\n  },\n\n  variantFill: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorFill,\n      default: cssVar.colorFillTertiary,\n      [hoverIdle]: cssVar.colorFillSecondary,\n    },\n    color: cssVar.colorText,\n  },\n\n  variantText: {\n    borderColor: 'transparent',\n    backgroundColor: { default: 'transparent', [hover]: cssVar.colorFillSecondary },\n    color: cssVar.colorText,\n  },\n\n  variantLink: {\n    borderColor: 'transparent',\n    paddingInline: 0,\n    backgroundColor: 'transparent',\n    color: { default: cssVar.colorPrimary, [hover]: cssVar.colorPrimaryHover },\n  },\n\n  dangerOutlined: {\n    borderColor: { default: error40, [hover]: error65 },\n    backgroundColor: {\n      [active]: errorOnContainer14,\n      default: cssVar.colorBgContainer,\n      [hoverIdle]: errorOnContainer8,\n    },\n    backgroundImage: null,\n    color: cssVar.colorError,\n  },\n\n  dangerSolid: {\n    borderColor: {\n      [active]: errorActive,\n      default: cssVar.colorError,\n      [hoverIdleClosed]: errorHover,\n      [popupOpen]: errorActive,\n    },\n    backgroundColor: {\n      [active]: errorActive,\n      default: cssVar.colorError,\n      [hoverIdleClosed]: errorHover,\n      [popupOpen]: errorActive,\n    },\n    color: cssVar.colorBgLayout,\n  },\n\n  dangerFill: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: error22,\n      default: error12,\n      [hoverIdle]: error18,\n    },\n    color: cssVar.colorError,\n  },\n\n  dangerText: {\n    backgroundColor: {\n      [active]: error16,\n      default: 'transparent',\n      [hoverIdle]: error10,\n    },\n    color: cssVar.colorError,\n  },\n\n  dangerInline: {\n    color: { default: cssVar.colorError, [hover]: errorHover },\n  },\n\n  ghostDefault: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorFill,\n      default: 'transparent',\n      [hoverIdle]: cssVar.colorFillSecondary,\n    },\n    color: cssVar.colorText,\n  },\n\n  ghostPrimary: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: cssVar.colorFill,\n      default: 'transparent',\n      [hoverIdle]: cssVar.colorFillSecondary,\n    },\n    color: {\n      [active]: cssVar.colorPrimaryActive,\n      default: cssVar.colorPrimary,\n      [hoverIdle]: cssVar.colorPrimaryHover,\n    },\n  },\n\n  ghostDanger: {\n    borderColor: 'transparent',\n    backgroundColor: {\n      [active]: error16,\n      default: 'transparent',\n      [hoverIdle]: error10,\n    },\n    color: cssVar.colorError,\n  },\n\n  spinner: {\n    borderColor: 'currentcolor',\n    borderRadius: '50%',\n    borderStyle: 'solid',\n    borderWidth: 1.5,\n    animationDuration: '0.6s',\n    animationIterationCount: 'infinite',\n    animationName: spin,\n    animationTimingFunction: 'linear',\n    borderBlockStartColor: 'transparent',\n    display: 'inline-block',\n    height: 12,\n    width: 12,\n  },\n});\n\nconst hasHover = ':has(> :where(button, a):hover:not(:disabled, [aria-disabled=\"true\"]))';\nconst hasActive = ':has(> :where(button, a):active:not(:disabled, [aria-disabled=\"true\"]))';\nconst hasHoverOnly = `${hasHover}:not(${hasActive})`;\nconst first = ':first-of-type';\nconst last = ':last-of-type';\n\nexport const splitStyles = stylex.create({\n  root: {\n    display: 'inline-flex',\n    flexDirection: 'row',\n  },\n  interactionDisabled: {\n    opacity: 0.5,\n  },\n  solidPrimary: {\n    '--lobe-split-button-fill': {\n      default: null,\n      [hasActive]: cssVar.colorPrimaryActive,\n      [hasHoverOnly]: cssVar.colorPrimaryHover,\n    },\n  },\n  solidDanger: {\n    '--lobe-split-button-fill': {\n      default: null,\n      [hasActive]: errorActive,\n      [hasHoverOnly]: errorHover,\n    },\n  },\n  item: {\n    borderEndEndRadius: { default: null, [first]: 0 },\n    borderEndStartRadius: { default: null, [last]: 0 },\n    borderStartEndRadius: { default: null, [first]: 0 },\n    borderStartStartRadius: { default: null, [last]: 0 },\n    marginInlineStart: { default: null, [last]: -1 },\n  },\n  itemInteractionDisabled: {\n    opacity: { default: null, [disabled]: 1 },\n  },\n  itemSolid: {\n    // solid halves share one color, so the outline-merging overlap only adds a dark seam once each half is translucent (disabled)\n    'marginInlineStart': { default: null, [last]: 0 },\n    '::before': {\n      insetBlock: { default: null, [last]: 0 },\n      backgroundColor: { default: null, [last]: 'currentcolor' },\n      content: { default: null, [last]: \"''\" },\n      insetInlineStart: { default: null, [last]: 0 },\n      opacity: { default: null, [last]: 0.2 },\n      pointerEvents: { default: null, [last]: 'none' },\n      position: { default: null, [last]: 'absolute' },\n      width: { default: null, [last]: 1 },\n    },\n  },\n  itemFillDanger: {\n    borderColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorError})`,\n      [popupOpen]: errorActive,\n    },\n    backgroundColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorError})`,\n      [popupOpen]: errorActive,\n    },\n  },\n  itemFillGhost: {\n    borderColor: 'var(--lobe-split-button-fill, transparent)',\n    backgroundColor: 'var(--lobe-split-button-fill, transparent)',\n  },\n  itemFillPrimary: {\n    borderColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorPrimary})`,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n    backgroundColor: {\n      default: `var(--lobe-split-button-fill, ${cssVar.colorPrimary})`,\n      [popupOpen]: cssVar.colorPrimaryActive,\n    },\n  },\n});\n\nexport const buttonStyles = Object.fromEntries(\n  Object.entries(styles).map(([key, value]) => [key, stylex.props(value).className ?? '']),\n) as Record<keyof typeof styles, string>;\n"],"mappings":"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"}

package/es/Checkbox/Checkbox.mjs

@@ -5,7 +5,7 @@ import Text from "../Text/Text.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { CheckIcon, Minus } from "lucide-react";
 import { Checkbox } from "@base-ui/react/checkbox";
@@ -24,7 +24,7 @@ const Checkbox$1 = memo(({ size = 16, shape = "square", backgroundColor, childre
 		indeterminate,
 		onCheckedChange: onChange,
 		...rest,
-		...styleProps([styles.root, focusRing.info], clsx(children ? classNames?.checkbox : className, classNames?.checkbox), boxStyle),
+		...styleProps([styles.root, focusRing.info], clsx$1(children ? classNames?.checkbox : className, classNames?.checkbox), boxStyle),
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
 			...stylex.props(styles.indicator),
 			children: indeterminate ? /* @__PURE__ */ jsx(Minus, {
@@ -40,7 +40,7 @@ const Checkbox$1 = memo(({ size = 16, shape = "square", backgroundColor, childre
 	});
 	if (!children) return box;
 	return /* @__PURE__ */ jsxs("label", {
-		...styleProps(styles.label, clsx(className, classNames?.wrapper), {
+		...styleProps(styles.label, clsx$1(className, classNames?.wrapper), {
 			gap: Math.floor(size / 2),
 			...style,
 			...customStyles?.wrapper

package/es/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["Checkbox","BaseCheckbox"],"sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { CheckIcon, Minus } from 'lucide-react';\nimport { type CSSProperties, memo } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { CheckboxProps } from './type';\n\nconst Checkbox = memo<CheckboxProps>(\n  ({\n    size = 16,\n    shape = 'square',\n    backgroundColor,\n    children,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    textProps,\n    onChange,\n    disabled,\n    indeterminate,\n    ...rest\n  }) => {\n    const boxStyle: CSSProperties = {\n      borderRadius: shape === 'square' ? `max(4px, ${Math.round(size / 4)}px)` : '50%',\n      height: size,\n      width: size,\n      ...(backgroundColor ? { '--lobe-checkbox-bg': backgroundColor } : {}),\n      ...(children ? {} : style),\n      ...customStyles?.checkbox,\n    };\n\n    const box = (\n      <BaseCheckbox.Root\n        disabled={disabled}\n        indeterminate={indeterminate}\n        onCheckedChange={onChange}\n        {...rest}\n        {...styleProps(\n          [styles.root, focusRing.info],\n          clsx(children ? classNames?.checkbox : className, classNames?.checkbox),\n          boxStyle,\n        )}\n      >\n        <BaseCheckbox.Indicator {...stylex.props(styles.indicator)}>\n          {indeterminate ? (\n            <Minus\n              size={size}\n              strokeWidth={3}\n              style={{ transform: `scale(${shape === 'square' ? 0.75 : 0.66})` }}\n            />\n          ) : (\n            <CheckIcon\n              size={size}\n              strokeWidth={3}\n              style={{ transform: `scale(${shape === 'square' ? 0.75 : 0.66})` }}\n            />\n          )}\n        </BaseCheckbox.Indicator>\n      </BaseCheckbox.Root>\n    );\n\n    if (!children) return box;\n\n    return (\n      <label\n        {...styleProps(styles.label, clsx(className, classNames?.wrapper), {\n          gap: Math.floor(size / 2),\n          ...style,\n          ...customStyles?.wrapper,\n        })}\n      >\n        {box}\n        <Text\n          as={'span'}\n          className={classNames?.text}\n          style={customStyles?.text}\n          {...textProps}\n          type={disabled ? 'secondary' : textProps?.type}\n        >\n          {children}\n        </Text>\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Object.assign(Checkbox, { formBinding: { valueProp: 'checked' } as const });\n"],"mappings":";;;;;;;;;;;;AAYA,MAAMA,aAAW,MAAqB,EACpC,OAAO,IACP,QAAQ,UACR,iBACA,UACA,WACA,YACA,QAAQ,cACR,OACA,WACA,UACA,UACA,eACA,GAAG,WACC;CACJ,MAAM,WAA0B;EAC9B,cAAc,UAAU,WAAW,YAAY,KAAK,MAAM,OAAO,CAAC,EAAE,OAAO;EAC3E,QAAQ;EACR,OAAO;EACP,GAAI,kBAAkB,EACpB,sBAAsB,gBACxB,IAAI,CAAC;EACL,GAAI,WAAW,CAAC,IAAI;EACpB,GAAG,cAAc;CACnB;CACA,MAAM,MAAM,oBAACC,SAAa,MAAd;EAA6B;EAAyB;EAAe,iBAAiB;EAAU,GAAI;EAAM,GAAI,WAAW,CAAC,OAAO,MAAM,UAAU,IAAI,GAAG,KAAK,WAAW,YAAY,WAAW,WAAW,YAAY,QAAQ,GAAG,QAAQ;EAC/O,UAAA,oBAACA,SAAa,WAAd;GAAwB,GAAI,OAAO,MAAM,OAAO,SAAS;GACtD,UAAA,gBAAgB,oBAAC,OAAD;IAAa;IAAM,aAAa;IAAG,OAAO,EAC7D,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GACvD;GAAI,CAAA,IAAI,oBAAC,WAAD;IAAiB;IAAM,aAAa;IAAG,OAAO,EACpD,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GACvD;GAAI,CAAA;EACsB,CAAA;CACP,CAAA;CACvB,IAAI,CAAC,UAAU,OAAO;CACtB,OAAO,qBAAC,SAAD;EAAO,GAAI,WAAW,OAAO,OAAO,KAAK,WAAW,YAAY,OAAO,GAAG;GAC/E,KAAK,KAAK,MAAM,OAAO,CAAC;GACxB,GAAG;GACH,GAAG,cAAc;EACnB,CAAC;EAJM,UAAA,CAKA,KACD,oBAAC,MAAD;GAAM,IAAI;GAAQ,WAAW,YAAY;GAAM,OAAO,cAAc;GAAM,GAAI;GAAW,MAAM,WAAW,cAAc,WAAW;GAChI;EACG,CAAA,CACD;;AACb,CAAC;AACD,WAAS,cAAc;AACvB,IAAA,mBAAe,OAAO,OAAOD,YAAU,EACrC,aAAa,EACX,WAAW,UACb,EACF,CAAC"}
+{"version":3,"file":"Checkbox.mjs","names":["Checkbox","BaseCheckbox","clsx"],"sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { CheckIcon, Minus } from 'lucide-react';\nimport { type CSSProperties, memo } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { CheckboxProps } from './type';\n\nconst Checkbox = memo<CheckboxProps>(\n  ({\n    size = 16,\n    shape = 'square',\n    backgroundColor,\n    children,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    textProps,\n    onChange,\n    disabled,\n    indeterminate,\n    ...rest\n  }) => {\n    const boxStyle: CSSProperties = {\n      borderRadius: shape === 'square' ? `max(4px, ${Math.round(size / 4)}px)` : '50%',\n      height: size,\n      width: size,\n      ...(backgroundColor ? { '--lobe-checkbox-bg': backgroundColor } : {}),\n      ...(children ? {} : style),\n      ...customStyles?.checkbox,\n    };\n\n    const box = (\n      <BaseCheckbox.Root\n        disabled={disabled}\n        indeterminate={indeterminate}\n        onCheckedChange={onChange}\n        {...rest}\n        {...styleProps(\n          [styles.root, focusRing.info],\n          clsx(children ? classNames?.checkbox : className, classNames?.checkbox),\n          boxStyle,\n        )}\n      >\n        <BaseCheckbox.Indicator {...stylex.props(styles.indicator)}>\n          {indeterminate ? (\n            <Minus\n              size={size}\n              strokeWidth={3}\n              style={{ transform: `scale(${shape === 'square' ? 0.75 : 0.66})` }}\n            />\n          ) : (\n            <CheckIcon\n              size={size}\n              strokeWidth={3}\n              style={{ transform: `scale(${shape === 'square' ? 0.75 : 0.66})` }}\n            />\n          )}\n        </BaseCheckbox.Indicator>\n      </BaseCheckbox.Root>\n    );\n\n    if (!children) return box;\n\n    return (\n      <label\n        {...styleProps(styles.label, clsx(className, classNames?.wrapper), {\n          gap: Math.floor(size / 2),\n          ...style,\n          ...customStyles?.wrapper,\n        })}\n      >\n        {box}\n        <Text\n          as={'span'}\n          className={classNames?.text}\n          style={customStyles?.text}\n          {...textProps}\n          type={disabled ? 'secondary' : textProps?.type}\n        >\n          {children}\n        </Text>\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Object.assign(Checkbox, { formBinding: { valueProp: 'checked' } as const });\n"],"mappings":";;;;;;;;;;;;AAYA,MAAMA,aAAW,MAAqB,EACpC,OAAO,IACP,QAAQ,UACR,iBACA,UACA,WACA,YACA,QAAQ,cACR,OACA,WACA,UACA,UACA,eACA,GAAG,WACC;CACJ,MAAM,WAA0B;EAC9B,cAAc,UAAU,WAAW,YAAY,KAAK,MAAM,OAAO,CAAC,EAAE,OAAO;EAC3E,QAAQ;EACR,OAAO;EACP,GAAI,kBAAkB,EACpB,sBAAsB,gBACxB,IAAI,CAAC;EACL,GAAI,WAAW,CAAC,IAAI;EACpB,GAAG,cAAc;CACnB;CACA,MAAM,MAAM,oBAACC,SAAa,MAAd;EAA6B;EAAyB;EAAe,iBAAiB;EAAU,GAAI;EAAM,GAAI,WAAW,CAAC,OAAO,MAAM,UAAU,IAAI,GAAGC,OAAK,WAAW,YAAY,WAAW,WAAW,YAAY,QAAQ,GAAG,QAAQ;EAC/O,UAAA,oBAACD,SAAa,WAAd;GAAwB,GAAI,OAAO,MAAM,OAAO,SAAS;GACtD,UAAA,gBAAgB,oBAAC,OAAD;IAAa;IAAM,aAAa;IAAG,OAAO,EAC7D,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GACvD;GAAI,CAAA,IAAI,oBAAC,WAAD;IAAiB;IAAM,aAAa;IAAG,OAAO,EACpD,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,GACvD;GAAI,CAAA;EACsB,CAAA;CACP,CAAA;CACvB,IAAI,CAAC,UAAU,OAAO;CACtB,OAAO,qBAAC,SAAD;EAAO,GAAI,WAAW,OAAO,OAAOC,OAAK,WAAW,YAAY,OAAO,GAAG;GAC/E,KAAK,KAAK,MAAM,OAAO,CAAC;GACxB,GAAG;GACH,GAAG,cAAc;EACnB,CAAC;EAJM,UAAA,CAKA,KACD,oBAAC,MAAD;GAAM,IAAI;GAAQ,WAAW,YAAY;GAAM,OAAO,cAAc;GAAM,GAAI;GAAW,MAAM,WAAW,cAAc,WAAW;GAChI;EACG,CAAA,CACD;;AACb,CAAC;AACD,WAAS,cAAc;AACvB,IAAA,mBAAe,OAAO,OAAOF,YAAU,EACrC,aAAa,EACX,WAAW,UACb,EACF,CAAC"}

package/es/CodeDiff/DiffPanel.mjs

@@ -9,7 +9,7 @@ import { stopPropagation } from "../utils/dom.mjs";
 import { compactActionsCls, compactLangCls, prefix, styles, variantStyles } from "./style.mjs";
 import { memo, useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { ChevronDown, ChevronRight } from "lucide-react";
 //#region src/CodeDiff/DiffPanel.tsx
@@ -23,7 +23,7 @@ const DiffPanel = memo(({ actions, body, className, classNames, dataCodeType, de
 		"data-code-type": dataCodeType,
 		width: "100%",
 		...rest,
-		...styleProps(rootStyles, clsx(prefix, className), rest.style),
+		...styleProps(rootStyles, clsx$1(prefix, className), rest.style),
 		children: [
 			/* @__PURE__ */ jsx(FlexBasic_default, {
 				horizontal: true,
@@ -47,7 +47,7 @@ const DiffPanel = memo(({ actions, body, className, classNames, dataCodeType, de
 		"data-code-type": dataCodeType,
 		width: "100%",
 		...rest,
-		...styleProps(rootStyles, clsx(prefix, className), rest.style),
+		...styleProps(rootStyles, clsx$1(prefix, className), rest.style),
 		children: [showHeader && /* @__PURE__ */ jsxs(FlexBasic_default, {
 			horizontal: true,
 			align: "center",
@@ -116,7 +116,7 @@ const DiffPanel = memo(({ actions, body, className, classNames, dataCodeType, de
 				!expand && styles.bodyCollapsed,
 				styles.body,
 				showHeader && variant !== "borderless" && styles.bodyDivider
-			], clsx(`${prefix}-body`, classNames?.body), customStyles?.body),
+			], clsx$1(`${prefix}-body`, classNames?.body), customStyles?.body),
 			children: body
 		})]
 	});

package/es/CodeDiff/DiffPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DiffPanel.mjs","names":["Flexbox"],"sources":["../../src/CodeDiff/DiffPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport type { FlexboxProps } from '@/Flex';\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { compactActionsCls, compactLangCls, prefix, styles, variantStyles } from './style';\n\ninterface DiffPanelProps extends Omit<FlexboxProps, 'children'> {\n  actions?: ReactNode;\n  additions: number;\n  body: ReactNode;\n  classNames?: {\n    body?: string;\n    header?: string;\n  };\n  dataCodeType: string;\n  defaultExpand?: boolean;\n  deletions: number;\n  displayName: string;\n  fileName?: string;\n  fullFeatured?: boolean;\n  showHeader?: boolean;\n  styles?: {\n    body?: CSSProperties;\n    header?: CSSProperties;\n  };\n  variant?: 'filled' | 'outlined' | 'borderless';\n}\n\nexport const DiffPanel = memo<DiffPanelProps>(\n  ({\n    actions,\n    body,\n    className,\n    classNames,\n    dataCodeType,\n    defaultExpand = true,\n    deletions,\n    displayName,\n    fileName,\n    fullFeatured = true,\n    showHeader = true,\n    styles: customStyles,\n    variant = 'filled',\n    additions,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const rootStyles = [styles.root, variantStyles[variant]];\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    if (!fullFeatured)\n      return (\n        <Flexbox\n          data-code-type={dataCodeType}\n          width={'100%'}\n          {...rest}\n          {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n        >\n          <Flexbox\n            horizontal\n            align=\"center\"\n            flex=\"none\"\n            gap={4}\n            {...styleProps(styles.actionsCompact, compactActionsCls)}\n          >\n            {actions}\n          </Flexbox>\n          {showHeader && <Tag className={compactLangCls}>{displayName}</Tag>}\n          <div {...styleProps(styles.body, classNames?.body, customStyles?.body)}>{body}</div>\n        </Flexbox>\n      );\n\n    return (\n      <Flexbox\n        data-code-type={dataCodeType}\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n      >\n        {showHeader && (\n          <Flexbox\n            horizontal\n            align=\"center\"\n            gap={8}\n            justify=\"space-between\"\n            padding={4}\n            paddingInline={variant === 'borderless' ? 0 : undefined}\n            onClick={handleToggleExpand}\n            {...styleProps(\n              [styles.header, variant === 'filled' && styles.headerFilled],\n              classNames?.header,\n              customStyles?.header,\n            )}\n          >\n            <Flexbox\n              horizontal\n              align=\"center\"\n              className=\"language-title\"\n              flex={1}\n              gap={4}\n              justify=\"flex-start\"\n              paddingInline={8}\n            >\n              <MaterialFileTypeIcon\n                fallbackUnknownType={false}\n                filename={fileName || displayName}\n                size={18}\n                type=\"file\"\n                variant=\"raw\"\n              />\n              <Text ellipsis fontSize={13}>\n                {displayName}\n              </Text>\n            </Flexbox>\n            <Flexbox horizontal align=\"center\" flex=\"none\" gap={8} onClick={stopPropagation}>\n              {actions && (\n                <Flexbox\n                  horizontal\n                  align=\"center\"\n                  flex=\"none\"\n                  gap={4}\n                  {...styleProps(styles.actions, `panel-actions ${prefix}-actions`)}\n                >\n                  {actions}\n                </Flexbox>\n              )}\n              {(deletions > 0 || additions > 0) && (\n                <Flexbox horizontal align=\"center\" gap={8}>\n                  {deletions > 0 && <span {...stylex.props(styles.deletions)}>-{deletions}</span>}\n                  {additions > 0 && <span {...stylex.props(styles.additions)}>+{additions}</span>}\n                </Flexbox>\n              )}\n              <ActionIcon\n                icon={expand ? ChevronDown : ChevronRight}\n                size=\"small\"\n                onClick={handleToggleExpand}\n              />\n            </Flexbox>\n          </Flexbox>\n        )}\n        <div\n          {...styleProps(\n            [\n              styles.bodyRoot,\n              !expand && styles.bodyCollapsed,\n              styles.body,\n              showHeader && variant !== 'borderless' && styles.bodyDivider,\n            ],\n            clsx(`${prefix}-body`, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {body}\n        </div>\n      </Flexbox>\n    );\n  },\n);\n\nDiffPanel.displayName = 'DiffPanel';\n"],"mappings":"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"}
+{"version":3,"file":"DiffPanel.mjs","names":["Flexbox","clsx"],"sources":["../../src/CodeDiff/DiffPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport type { FlexboxProps } from '@/Flex';\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { compactActionsCls, compactLangCls, prefix, styles, variantStyles } from './style';\n\ninterface DiffPanelProps extends Omit<FlexboxProps, 'children'> {\n  actions?: ReactNode;\n  additions: number;\n  body: ReactNode;\n  classNames?: {\n    body?: string;\n    header?: string;\n  };\n  dataCodeType: string;\n  defaultExpand?: boolean;\n  deletions: number;\n  displayName: string;\n  fileName?: string;\n  fullFeatured?: boolean;\n  showHeader?: boolean;\n  styles?: {\n    body?: CSSProperties;\n    header?: CSSProperties;\n  };\n  variant?: 'filled' | 'outlined' | 'borderless';\n}\n\nexport const DiffPanel = memo<DiffPanelProps>(\n  ({\n    actions,\n    body,\n    className,\n    classNames,\n    dataCodeType,\n    defaultExpand = true,\n    deletions,\n    displayName,\n    fileName,\n    fullFeatured = true,\n    showHeader = true,\n    styles: customStyles,\n    variant = 'filled',\n    additions,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const rootStyles = [styles.root, variantStyles[variant]];\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    if (!fullFeatured)\n      return (\n        <Flexbox\n          data-code-type={dataCodeType}\n          width={'100%'}\n          {...rest}\n          {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n        >\n          <Flexbox\n            horizontal\n            align=\"center\"\n            flex=\"none\"\n            gap={4}\n            {...styleProps(styles.actionsCompact, compactActionsCls)}\n          >\n            {actions}\n          </Flexbox>\n          {showHeader && <Tag className={compactLangCls}>{displayName}</Tag>}\n          <div {...styleProps(styles.body, classNames?.body, customStyles?.body)}>{body}</div>\n        </Flexbox>\n      );\n\n    return (\n      <Flexbox\n        data-code-type={dataCodeType}\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n      >\n        {showHeader && (\n          <Flexbox\n            horizontal\n            align=\"center\"\n            gap={8}\n            justify=\"space-between\"\n            padding={4}\n            paddingInline={variant === 'borderless' ? 0 : undefined}\n            onClick={handleToggleExpand}\n            {...styleProps(\n              [styles.header, variant === 'filled' && styles.headerFilled],\n              classNames?.header,\n              customStyles?.header,\n            )}\n          >\n            <Flexbox\n              horizontal\n              align=\"center\"\n              className=\"language-title\"\n              flex={1}\n              gap={4}\n              justify=\"flex-start\"\n              paddingInline={8}\n            >\n              <MaterialFileTypeIcon\n                fallbackUnknownType={false}\n                filename={fileName || displayName}\n                size={18}\n                type=\"file\"\n                variant=\"raw\"\n              />\n              <Text ellipsis fontSize={13}>\n                {displayName}\n              </Text>\n            </Flexbox>\n            <Flexbox horizontal align=\"center\" flex=\"none\" gap={8} onClick={stopPropagation}>\n              {actions && (\n                <Flexbox\n                  horizontal\n                  align=\"center\"\n                  flex=\"none\"\n                  gap={4}\n                  {...styleProps(styles.actions, `panel-actions ${prefix}-actions`)}\n                >\n                  {actions}\n                </Flexbox>\n              )}\n              {(deletions > 0 || additions > 0) && (\n                <Flexbox horizontal align=\"center\" gap={8}>\n                  {deletions > 0 && <span {...stylex.props(styles.deletions)}>-{deletions}</span>}\n                  {additions > 0 && <span {...stylex.props(styles.additions)}>+{additions}</span>}\n                </Flexbox>\n              )}\n              <ActionIcon\n                icon={expand ? ChevronDown : ChevronRight}\n                size=\"small\"\n                onClick={handleToggleExpand}\n              />\n            </Flexbox>\n          </Flexbox>\n        )}\n        <div\n          {...styleProps(\n            [\n              styles.bodyRoot,\n              !expand && styles.bodyCollapsed,\n              styles.body,\n              showHeader && variant !== 'borderless' && styles.bodyDivider,\n            ],\n            clsx(`${prefix}-body`, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {body}\n        </div>\n      </Flexbox>\n    );\n  },\n);\n\nDiffPanel.displayName = 'DiffPanel';\n"],"mappings":"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"}

package/es/CodeEditor/CodeEditor.mjs

@@ -7,7 +7,7 @@ import { SyntaxHighlighterImpl } from "../Highlighter/SyntaxHighlighter/index.mj
 import { styles, variantStyles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/CodeEditor/CodeEditor.tsx
 const CodeEditor = memo(({ autoFocus, classNames, styles: customStyles, defaultValue = "", onChange, placeholder = "", style, className, onValueChange, value, language = "markdown", variant = "borderless", width, height, flex, ref, ...rest }) => {
 	const [code, setCode] = useControlledState(defaultValue, {
@@ -19,16 +19,16 @@ const CodeEditor = memo(({ autoFocus, classNames, styles: customStyles, defaultV
 		flex,
 		height: height ?? "fit-content",
 		width: width ?? "100%",
-		...styleProps([styles.root, variantStyles[variant]], clsx("lobe-code-editor", variant === "borderless" && "lobe-code-editor-borderless", className), style),
+		...styleProps([styles.root, variantStyles[variant]], clsx$1("lobe-code-editor", variant === "borderless" && "lobe-code-editor-borderless", className), style),
 		children: [value ? /* @__PURE__ */ jsx(SyntaxHighlighterImpl, {
-			className: clsx("lobe-code-editor-highlight", classNames?.highlight),
+			className: clsx$1("lobe-code-editor-highlight", classNames?.highlight),
 			language,
 			style: customStyles?.highlight,
 			variant,
 			xstyle: styles.highlight,
 			children: value
 		}) : /* @__PURE__ */ jsx("pre", {
-			...styleProps(styles.highlight, clsx("lobe-code-editor-highlight", classNames?.highlight), { color: cssVar.colorTextDescription }),
+			...styleProps(styles.highlight, clsx$1("lobe-code-editor-highlight", classNames?.highlight), { color: cssVar.colorTextDescription }),
 			children: placeholder || " "
 		}), /* @__PURE__ */ jsx("textarea", {
 			autoCapitalize: "off",

package/es/CodeEditor/CodeEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.mjs","names":["Flexbox"],"sources":["../../src/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { SyntaxHighlighterImpl } from '@/Highlighter/SyntaxHighlighter';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles, variantStyles } from './style';\nimport type { CodeEditorProps } from './type';\n\nconst CodeEditor = memo<CodeEditorProps>(\n  ({\n    autoFocus,\n    classNames,\n    styles: customStyles,\n    defaultValue = '',\n    onChange,\n    placeholder = '',\n    style,\n    className,\n    onValueChange,\n    value,\n    language = 'markdown',\n    variant = 'borderless',\n    width,\n    height,\n    flex,\n    ref,\n    ...rest\n  }) => {\n    const [code, setCode] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onValueChange,\n      value,\n    });\n\n    return (\n      <Flexbox\n        flex={flex}\n        height={height ?? 'fit-content'}\n        width={width ?? '100%'}\n        {...styleProps(\n          [styles.root, variantStyles[variant]],\n          clsx(\n            'lobe-code-editor',\n            variant === 'borderless' && 'lobe-code-editor-borderless',\n            className,\n          ),\n          style,\n        )}\n      >\n        {value ? (\n          <SyntaxHighlighterImpl\n            className={clsx('lobe-code-editor-highlight', classNames?.highlight)}\n            language={language}\n            style={customStyles?.highlight}\n            variant={variant}\n            xstyle={styles.highlight}\n          >\n            {value}\n          </SyntaxHighlighterImpl>\n        ) : (\n          <pre\n            {...styleProps(\n              styles.highlight,\n              clsx('lobe-code-editor-highlight', classNames?.highlight),\n              {\n                color: cssVar.colorTextDescription,\n              },\n            )}\n          >\n            {placeholder || ' '}\n          </pre>\n        )}\n\n        <textarea\n          autoCapitalize=\"off\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoFocus={autoFocus}\n          data-gramm={false}\n          ref={ref}\n          value={code}\n          onChange={(e) => {\n            onChange?.(e);\n            setCode(e.target.value);\n          }}\n          {...styleProps(styles.textarea, classNames?.textarea, customStyles?.textarea)}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nCodeEditor.displayName = 'CodeEditor';\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,aAAa,MAChB,EACC,WACA,YACA,QAAQ,cACR,eAAe,IACf,UACA,cAAc,IACd,OACA,WACA,eACA,OACA,WAAW,YACX,UAAU,cACV,OACA,QACA,MACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,mBAAmB,cAAc;EACvD;EACA,UAAU;EACV;CACF,CAAC;CAED,OACE,qBAACA,mBAAD;EACQ;EACN,QAAQ,UAAU;EAClB,OAAO,SAAS;EAChB,GAAI,WACF,CAAC,OAAO,MAAM,cAAc,QAAQ,GACpC,KACE,oBACA,YAAY,gBAAgB,+BAC5B,SACF,GACA,KACF;EAZF,UAAA,CAcG,QACC,oBAAC,uBAAD;GACE,WAAW,KAAK,8BAA8B,YAAY,SAAS;GACzD;GACV,OAAO,cAAc;GACZ;GACT,QAAQ,OAAO;GAEd,UAAA;EACoB,CAAA,IAEvB,oBAAC,OAAD;GACE,GAAI,WACF,OAAO,WACP,KAAK,8BAA8B,YAAY,SAAS,GACxD,EACE,OAAO,OAAO,qBAChB,CACF;GAEC,UAAA,eAAe;EACb,CAAA,GAGP,oBAAC,YAAD;GACE,gBAAe;GACf,cAAa;GACb,aAAY;GACD;GACX,cAAY;GACP;GACL,OAAO;GACP,WAAW,MAAM;IACf,WAAW,CAAC;IACZ,QAAQ,EAAE,OAAO,KAAK;GACxB;GACA,GAAI,WAAW,OAAO,UAAU,YAAY,UAAU,cAAc,QAAQ;GAC5E,GAAI;EACL,CAAA,CACM;;AAEb,CACF;AAEA,WAAW,cAAc"}
+{"version":3,"file":"CodeEditor.mjs","names":["Flexbox","clsx"],"sources":["../../src/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { SyntaxHighlighterImpl } from '@/Highlighter/SyntaxHighlighter';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles, variantStyles } from './style';\nimport type { CodeEditorProps } from './type';\n\nconst CodeEditor = memo<CodeEditorProps>(\n  ({\n    autoFocus,\n    classNames,\n    styles: customStyles,\n    defaultValue = '',\n    onChange,\n    placeholder = '',\n    style,\n    className,\n    onValueChange,\n    value,\n    language = 'markdown',\n    variant = 'borderless',\n    width,\n    height,\n    flex,\n    ref,\n    ...rest\n  }) => {\n    const [code, setCode] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onValueChange,\n      value,\n    });\n\n    return (\n      <Flexbox\n        flex={flex}\n        height={height ?? 'fit-content'}\n        width={width ?? '100%'}\n        {...styleProps(\n          [styles.root, variantStyles[variant]],\n          clsx(\n            'lobe-code-editor',\n            variant === 'borderless' && 'lobe-code-editor-borderless',\n            className,\n          ),\n          style,\n        )}\n      >\n        {value ? (\n          <SyntaxHighlighterImpl\n            className={clsx('lobe-code-editor-highlight', classNames?.highlight)}\n            language={language}\n            style={customStyles?.highlight}\n            variant={variant}\n            xstyle={styles.highlight}\n          >\n            {value}\n          </SyntaxHighlighterImpl>\n        ) : (\n          <pre\n            {...styleProps(\n              styles.highlight,\n              clsx('lobe-code-editor-highlight', classNames?.highlight),\n              {\n                color: cssVar.colorTextDescription,\n              },\n            )}\n          >\n            {placeholder || ' '}\n          </pre>\n        )}\n\n        <textarea\n          autoCapitalize=\"off\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoFocus={autoFocus}\n          data-gramm={false}\n          ref={ref}\n          value={code}\n          onChange={(e) => {\n            onChange?.(e);\n            setCode(e.target.value);\n          }}\n          {...styleProps(styles.textarea, classNames?.textarea, customStyles?.textarea)}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nCodeEditor.displayName = 'CodeEditor';\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,aAAa,MAChB,EACC,WACA,YACA,QAAQ,cACR,eAAe,IACf,UACA,cAAc,IACd,OACA,WACA,eACA,OACA,WAAW,YACX,UAAU,cACV,OACA,QACA,MACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,mBAAmB,cAAc;EACvD;EACA,UAAU;EACV;CACF,CAAC;CAED,OACE,qBAACA,mBAAD;EACQ;EACN,QAAQ,UAAU;EAClB,OAAO,SAAS;EAChB,GAAI,WACF,CAAC,OAAO,MAAM,cAAc,QAAQ,GACpCC,OACE,oBACA,YAAY,gBAAgB,+BAC5B,SACF,GACA,KACF;EAZF,UAAA,CAcG,QACC,oBAAC,uBAAD;GACE,WAAWA,OAAK,8BAA8B,YAAY,SAAS;GACzD;GACV,OAAO,cAAc;GACZ;GACT,QAAQ,OAAO;GAEd,UAAA;EACoB,CAAA,IAEvB,oBAAC,OAAD;GACE,GAAI,WACF,OAAO,WACPA,OAAK,8BAA8B,YAAY,SAAS,GACxD,EACE,OAAO,OAAO,qBAChB,CACF;GAEC,UAAA,eAAe;EACb,CAAA,GAGP,oBAAC,YAAD;GACE,gBAAe;GACf,cAAa;GACb,aAAY;GACD;GACX,cAAY;GACP;GACL,OAAO;GACP,WAAW,MAAM;IACf,WAAW,CAAC;IACZ,QAAQ,EAAE,OAAO,KAAK;GACxB;GACA,GAAI,WAAW,OAAO,UAAU,YAAY,UAAU,cAAc,QAAQ;GAC5E,GAAI;EACL,CAAA,CACM;;AAEb,CACF;AAEA,WAAW,cAAc"}

package/es/ColorPicker/ColorInputs.mjs

@@ -0,0 +1,136 @@
+"use client";
+import Input_default from "../Input/Input.mjs";
+import InputNumber_default from "../Input/InputNumber.mjs";
+import { formatColor, fromHsl, fromRgb, normalizeHexInput, parseColor, toHsl, toRgb } from "./color.mjs";
+import { SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectTrigger, SelectValue } from "../Select/atoms.mjs";
+import { styles } from "./style.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Check, ChevronDown } from "lucide-react";
+//#region src/ColorPicker/ColorInputs.tsx
+const CHANNELS = {
+	hsl: {
+		labels: [
+			"H",
+			"S",
+			"L"
+		],
+		max: [
+			360,
+			100,
+			100
+		]
+	},
+	rgb: {
+		labels: [
+			"R",
+			"G",
+			"B"
+		],
+		max: [
+			255,
+			255,
+			255
+		]
+	}
+};
+const FORMATS = [
+	"hex",
+	"rgb",
+	"hsl"
+];
+const ColorInputs = ({ alpha, alphaLabel, format, formatLabel, hsva, onCommit, onFormatChange }) => {
+	const hex = formatColor(hsva, alpha);
+	const [drafts, setDrafts] = useState({});
+	useEffect(() => {
+		setDrafts({});
+	}, [hex, format]);
+	const channels = (kind) => kind === "rgb" ? toRgb(hsva) : toHsl(hsva);
+	const hints = {
+		hex: hex.slice(0, 7).toUpperCase(),
+		hsl: toHsl(hsva).join(" "),
+		rgb: toRgb(hsva).join(" ")
+	};
+	const commitHex = () => {
+		const draft = drafts.hex;
+		if (draft === void 0) return;
+		const normalized = normalizeHexInput(draft);
+		if (!normalized) return setDrafts({});
+		onCommit(parseColor(normalized, hsva.h));
+	};
+	const commitChannel = (kind, index) => {
+		const draft = drafts[`${kind}${index}`];
+		if (draft === void 0) return;
+		const parsed = Number.parseInt(draft, 10);
+		if (Number.isNaN(parsed)) return setDrafts({});
+		const next = channels(kind);
+		next[index] = Math.min(CHANNELS[kind].max[index], Math.max(0, parsed));
+		onCommit(kind === "rgb" ? fromRgb(next, hsva) : fromHsl(next, hsva));
+	};
+	const field = (key, label, value, onCommitField) => /* @__PURE__ */ jsx(Input_default, {
+		"aria-label": label,
+		prefix: format === "hex" ? "#" : void 0,
+		size: "small",
+		title: label,
+		value: drafts[key] ?? value,
+		variant: "filled",
+		className: stylex.props(styles.channelField, format !== "hex" && styles.channelCompact).className,
+		classNames: format === "hex" ? void 0 : { input: stylex.props(styles.channelInput).className },
+		onBlur: onCommitField,
+		onChange: (event) => setDrafts((current) => ({
+			...current,
+			[key]: event.target.value
+		})),
+		onPressEnter: onCommitField
+	}, key);
+	return /* @__PURE__ */ jsxs("div", {
+		...stylex.props(styles.inputs),
+		children: [
+			/* @__PURE__ */ jsxs(SelectRoot, {
+				value: format,
+				onValueChange: (next) => next && onFormatChange(next),
+				children: [/* @__PURE__ */ jsxs(SelectTrigger, {
+					"aria-label": formatLabel,
+					className: stylex.props(styles.formatSelect).className,
+					size: "small",
+					variant: "filled",
+					children: [/* @__PURE__ */ jsx(SelectValue, { children: (current) => String(current).toUpperCase() }), /* @__PURE__ */ jsx(SelectIcon, { children: /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) })]
+				}), /* @__PURE__ */ jsx(SelectPortal, { children: /* @__PURE__ */ jsx(SelectPositioner, { children: /* @__PURE__ */ jsx(SelectPopup, {
+					className: stylex.props(styles.formatPopup).className,
+					children: /* @__PURE__ */ jsx(SelectList, { children: FORMATS.map((item) => /* @__PURE__ */ jsxs(SelectItem, {
+						value: item,
+						children: [
+							/* @__PURE__ */ jsx(SelectItemText, { children: item.toUpperCase() }),
+							/* @__PURE__ */ jsx("span", {
+								...stylex.props(styles.formatHint),
+								children: hints[item]
+							}),
+							/* @__PURE__ */ jsx(SelectItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 14 }) })
+						]
+					}, item)) })
+				}) }) })]
+			}),
+			format === "hex" ? field("hex", "HEX", hex.slice(1).toUpperCase(), commitHex) : channels(format).map((value, index) => field(`${format}${index}`, CHANNELS[format].labels[index], String(value), () => commitChannel(format, index))),
+			alpha && /* @__PURE__ */ jsx(InputNumber_default, {
+				"aria-label": alphaLabel,
+				className: stylex.props(styles.alphaField).className,
+				controls: false,
+				max: 100,
+				min: 0,
+				size: "small",
+				suffix: "%",
+				value: Math.round(hsva.a * 100),
+				variant: "filled",
+				onChange: (a) => a !== null && onCommit({
+					...hsva,
+					a: a / 100
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { ColorInputs as default };
+
+//# sourceMappingURL=ColorInputs.mjs.map

package/es/ColorPicker/ColorInputs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInputs.mjs","names":["Input","InputNumber"],"sources":["../../src/ColorPicker/ColorInputs.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Check, ChevronDown } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\nimport { Input, InputNumber } from '@/Input';\nimport {\n  SelectIcon,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectList,\n  SelectPopup,\n  SelectPortal,\n  SelectPositioner,\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n} from '@/Select';\n\nimport {\n  type ColorFormat,\n  formatColor,\n  fromHsl,\n  fromRgb,\n  type Hsva,\n  normalizeHexInput,\n  parseColor,\n  toHsl,\n  toRgb,\n} from './color';\nimport { styles } from './style';\n\ntype Channels = [number, number, number];\n\nconst CHANNELS: Record<Exclude<ColorFormat, 'hex'>, { labels: string[]; max: Channels }> = {\n  hsl: { labels: ['H', 'S', 'L'], max: [360, 100, 100] },\n  rgb: { labels: ['R', 'G', 'B'], max: [255, 255, 255] },\n};\n\nconst FORMATS: ColorFormat[] = ['hex', 'rgb', 'hsl'];\n\nexport interface ColorInputsProps {\n  alpha: boolean;\n  alphaLabel: string;\n  format: ColorFormat;\n  formatLabel: string;\n  hsva: Hsva;\n  onCommit: (next: Hsva) => void;\n  onFormatChange: (format: ColorFormat) => void;\n}\n\nconst ColorInputs = ({\n  alpha,\n  alphaLabel,\n  format,\n  formatLabel,\n  hsva,\n  onCommit,\n  onFormatChange,\n}: ColorInputsProps) => {\n  const hex = formatColor(hsva, alpha);\n  const [drafts, setDrafts] = useState<Record<string, string>>({});\n\n  useEffect(() => {\n    setDrafts({});\n  }, [hex, format]);\n\n  const channels = (kind: Exclude<ColorFormat, 'hex'>): Channels =>\n    kind === 'rgb' ? toRgb(hsva) : toHsl(hsva);\n\n  const hints: Record<ColorFormat, string> = {\n    hex: hex.slice(0, 7).toUpperCase(),\n    hsl: toHsl(hsva).join(' '),\n    rgb: toRgb(hsva).join(' '),\n  };\n\n  const commitHex = () => {\n    const draft = drafts.hex;\n    if (draft === undefined) return;\n    const normalized = normalizeHexInput(draft);\n    if (!normalized) return setDrafts({});\n    onCommit(parseColor(normalized, hsva.h));\n  };\n\n  const commitChannel = (kind: Exclude<ColorFormat, 'hex'>, index: number) => {\n    const draft = drafts[`${kind}${index}`];\n    if (draft === undefined) return;\n    const parsed = Number.parseInt(draft, 10);\n    if (Number.isNaN(parsed)) return setDrafts({});\n    const next = channels(kind);\n    next[index] = Math.min(CHANNELS[kind].max[index], Math.max(0, parsed));\n    onCommit(kind === 'rgb' ? fromRgb(next, hsva) : fromHsl(next, hsva));\n  };\n\n  const field = (key: string, label: string, value: string, onCommitField: () => void) => (\n    <Input\n      aria-label={label}\n      key={key}\n      prefix={format === 'hex' ? '#' : undefined}\n      size=\"small\"\n      title={label}\n      value={drafts[key] ?? value}\n      variant=\"filled\"\n      className={\n        stylex.props(styles.channelField, format !== 'hex' && styles.channelCompact).className\n      }\n      classNames={\n        format === 'hex' ? undefined : { input: stylex.props(styles.channelInput).className }\n      }\n      onBlur={onCommitField}\n      onChange={(event) => setDrafts((current) => ({ ...current, [key]: event.target.value }))}\n      onPressEnter={onCommitField}\n    />\n  );\n\n  return (\n    <div {...stylex.props(styles.inputs)}>\n      <SelectRoot\n        value={format}\n        onValueChange={(next) => next && onFormatChange(next as ColorFormat)}\n      >\n        <SelectTrigger\n          aria-label={formatLabel}\n          className={stylex.props(styles.formatSelect).className}\n          size=\"small\"\n          variant=\"filled\"\n        >\n          <SelectValue>{(current) => String(current).toUpperCase()}</SelectValue>\n          <SelectIcon>\n            <ChevronDown size={12} />\n          </SelectIcon>\n        </SelectTrigger>\n        <SelectPortal>\n          <SelectPositioner>\n            <SelectPopup className={stylex.props(styles.formatPopup).className}>\n              <SelectList>\n                {FORMATS.map((item) => (\n                  <SelectItem key={item} value={item}>\n                    <SelectItemText>{item.toUpperCase()}</SelectItemText>\n                    <span {...stylex.props(styles.formatHint)}>{hints[item]}</span>\n                    <SelectItemIndicator>\n                      <Check size={14} />\n                    </SelectItemIndicator>\n                  </SelectItem>\n                ))}\n              </SelectList>\n            </SelectPopup>\n          </SelectPositioner>\n        </SelectPortal>\n      </SelectRoot>\n      {format === 'hex'\n        ? field('hex', 'HEX', hex.slice(1).toUpperCase(), commitHex)\n        : channels(format).map((value, index) =>\n            field(`${format}${index}`, CHANNELS[format].labels[index], String(value), () =>\n              commitChannel(format, index),\n            ),\n          )}\n      {alpha && (\n        <InputNumber\n          aria-label={alphaLabel}\n          className={stylex.props(styles.alphaField).className}\n          controls={false}\n          max={100}\n          min={0}\n          size=\"small\"\n          suffix=\"%\"\n          value={Math.round(hsva.a * 100)}\n          variant=\"filled\"\n          onChange={(a) => a !== null && onCommit({ ...hsva, a: a / 100 })}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ColorInputs;\n"],"mappings":"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"}