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

package/es/Image/viewer/ViewerChrome.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewerChrome.mjs","names":["imageMessages","ActionIcon"],"sources":["../../../src/Image/viewer/ViewerChrome.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { X } from 'lucide-react';\nimport type { MotionValue } from 'motion/react';\nimport { memo, type MouseEvent, type ReactNode, useCallback } from 'react';\n\nimport { ActionIconImpl as ActionIcon } from '@/ActionIcon/ActionIcon';\nimport imageMessages from '@/i18n/resources/en/image';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { styles } from '../style';\nimport GalleryNav from './GalleryNav';\nimport type { Rect, Rotation, Size } from './geometry';\nimport Toolbar from './Toolbar';\nimport { useChromeIdle } from './useChromeIdle';\n\nexport interface ViewerChromeProps {\n  canZoomIn: boolean;\n  canZoomOut: boolean;\n  chromeRef: (node: HTMLElement | null) => void;\n  current: number;\n  fitRect: Rect;\n  flipHorizontal: () => void;\n  flipVertical: () => void;\n  hasNext: boolean;\n  hasPrev: boolean;\n  natural: Size;\n  next: () => void;\n  onClose: () => void;\n  onDownload?: (source: string) => void | Promise<void>;\n  prev: () => void;\n  rotateLeft: () => void;\n  rotateRight: () => void;\n  rotation: Rotation;\n  scale: MotionValue<number>;\n  source: string;\n  toggleActualSize: () => void;\n  toolbarAddon?: ReactNode;\n  total: number;\n  zoomIn: () => void;\n  zoomOut: () => void;\n}\n\nconst ViewerChrome = memo<ViewerChromeProps>(\n  ({ chromeRef, current, hasNext, hasPrev, next, onClose, prev, total, ...toolbarProps }) => {\n    const { t } = useTranslation(imageMessages);\n    const idle = useChromeIdle();\n\n    const handleChromeClick = useCallback((event: MouseEvent<HTMLDivElement>) => {\n      event.stopPropagation();\n    }, []);\n\n    return (\n      <div {...stylex.props(styles.viewerChrome)} ref={chromeRef} onClick={handleChromeClick}>\n        <div\n          {...stylex.props(styles.viewerChromeIdle)}\n          data-idle-hidden={idle.hidden ? '' : undefined}\n          ref={idle.ref}\n        >\n          <ActionIcon\n            className=\"lobe-image-viewer-close\"\n            icon={X}\n            title={t('image.close')}\n            xstyle={styles.viewerClose}\n            onClick={onClose}\n          />\n          {total > 1 && (\n            <GalleryNav\n              current={current}\n              hasNext={hasNext}\n              hasPrev={hasPrev}\n              next={next}\n              prev={prev}\n              total={total}\n            />\n          )}\n          <Toolbar {...toolbarProps} onMoreOpenChange={idle.setHeld} />\n        </div>\n      </div>\n    );\n  },\n);\n\nViewerChrome.displayName = 'ViewerChrome';\n\nexport default ViewerChrome;\n"],"mappings":";;;;;;;;;;;;;AAwCA,MAAM,eAAe,MAAyB,EAC5C,WACA,SACA,SACA,SACA,MACA,SACA,MACA,OACA,GAAG,mBACC;CACJ,MAAM,EACJ,MACE,eAAeA,aAAa;CAChC,MAAM,OAAO,cAAc;CAC3B,MAAM,oBAAoB,aAAa,UAAsC;EAC3E,MAAM,gBAAgB;CACxB,GAAG,CAAC,CAAC;CACL,OAAO,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,YAAY;EAAG,KAAK;EAAW,SAAS;EACtE,UAAA,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,gBAAgB;GAAG,oBAAkB,KAAK,SAAS,KAAK,KAAA;GAAW,KAAK,KAAK;GAA1G,UAAA;IACE,oBAACC,gBAAD;KAAY,WAAU;KAA0B,MAAM;KAAG,OAAO,EAAE,aAAa;KAAG,QAAQ,OAAO;KAAa,SAAS;IAAU,CAAA;IAChI,QAAQ,KAAK,oBAAC,YAAD;KAAqB;KAAkB;KAAkB;KAAe;KAAY;KAAa;IAAQ,CAAA;IACvH,oBAAC,SAAD;KAAS,GAAI;KAAc,kBAAkB,KAAK;IAAU,CAAA;GACzD;;CACF,CAAA;AACX,CAAC;AACD,aAAa,cAAc"}
+{"version":3,"file":"ViewerChrome.mjs","names":["imageMessages","ActionIcon"],"sources":["../../../src/Image/viewer/ViewerChrome.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { X } from 'lucide-react';\nimport type { MotionValue } from 'motion/react';\nimport { memo, type MouseEvent, type ReactNode, useCallback } from 'react';\n\nimport { ActionIconImpl as ActionIcon } from '@/ActionIcon/ActionIcon';\nimport imageMessages from '@/i18n/resources/en/image';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { styles } from '../style';\nimport GalleryNav from './GalleryNav';\nimport type { Rect, Rotation, Size } from './geometry';\nimport Toolbar from './Toolbar';\nimport { useChromeIdle } from './useChromeIdle';\n\nexport interface ViewerChromeProps {\n  canZoomIn: boolean;\n  canZoomOut: boolean;\n  chromeRef: (node: HTMLElement | null) => void;\n  current: number;\n  fetchImage?: (source: string) => Promise<Blob>;\n  fitRect: Rect;\n  flipHorizontal: () => void;\n  flipVertical: () => void;\n  hasNext: boolean;\n  hasPrev: boolean;\n  natural: Size;\n  next: () => void;\n  onClose: () => void;\n  onDownload?: (source: string) => void | Promise<void>;\n  prev: () => void;\n  rotateLeft: () => void;\n  rotateRight: () => void;\n  rotation: Rotation;\n  scale: MotionValue<number>;\n  source: string;\n  toggleActualSize: () => void;\n  toolbarAddon?: ReactNode;\n  total: number;\n  zoomIn: () => void;\n  zoomOut: () => void;\n}\n\nconst ViewerChrome = memo<ViewerChromeProps>(\n  ({ chromeRef, current, hasNext, hasPrev, next, onClose, prev, total, ...toolbarProps }) => {\n    const { t } = useTranslation(imageMessages);\n    const idle = useChromeIdle();\n\n    const handleChromeClick = useCallback((event: MouseEvent<HTMLDivElement>) => {\n      event.stopPropagation();\n    }, []);\n\n    return (\n      <div {...stylex.props(styles.viewerChrome)} ref={chromeRef} onClick={handleChromeClick}>\n        <div\n          {...stylex.props(styles.viewerChromeIdle)}\n          data-idle-hidden={idle.hidden ? '' : undefined}\n          ref={idle.ref}\n        >\n          <ActionIcon\n            className=\"lobe-image-viewer-close\"\n            icon={X}\n            title={t('image.close')}\n            xstyle={styles.viewerClose}\n            onClick={onClose}\n          />\n          {total > 1 && (\n            <GalleryNav\n              current={current}\n              hasNext={hasNext}\n              hasPrev={hasPrev}\n              next={next}\n              prev={prev}\n              total={total}\n            />\n          )}\n          <Toolbar {...toolbarProps} onMoreOpenChange={idle.setHeld} />\n        </div>\n      </div>\n    );\n  },\n);\n\nViewerChrome.displayName = 'ViewerChrome';\n\nexport default ViewerChrome;\n"],"mappings":";;;;;;;;;;;;;AAyCA,MAAM,eAAe,MAAyB,EAC5C,WACA,SACA,SACA,SACA,MACA,SACA,MACA,OACA,GAAG,mBACC;CACJ,MAAM,EACJ,MACE,eAAeA,aAAa;CAChC,MAAM,OAAO,cAAc;CAC3B,MAAM,oBAAoB,aAAa,UAAsC;EAC3E,MAAM,gBAAgB;CACxB,GAAG,CAAC,CAAC;CACL,OAAO,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,YAAY;EAAG,KAAK;EAAW,SAAS;EACtE,UAAA,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,gBAAgB;GAAG,oBAAkB,KAAK,SAAS,KAAK,KAAA;GAAW,KAAK,KAAK;GAA1G,UAAA;IACE,oBAACC,gBAAD;KAAY,WAAU;KAA0B,MAAM;KAAG,OAAO,EAAE,aAAa;KAAG,QAAQ,OAAO;KAAa,SAAS;IAAU,CAAA;IAChI,QAAQ,KAAK,oBAAC,YAAD;KAAqB;KAAkB;KAAkB;KAAe;KAAY;KAAa;IAAQ,CAAA;IACvH,oBAAC,SAAD;KAAS,GAAI;KAAc,kBAAkB,KAAK;IAAU,CAAA;GACzD;;CACF,CAAA;AACX,CAAC;AACD,aAAa,cAAc"}

package/es/Input/style.mjs

@@ -164,11 +164,11 @@ const styles = {
 		kmkexE: "lbavbupb",
 		kGNEyG: "lb6s0dn4",
 		kB7OPa: "lb9f619",
-		kMwMTN: "lb66ogz0 lb1pedyqg",
-		kkrTdU: "lb1ed109x lbzoe6q",
+		kMwMTN: "lb66ogz0 lb1k6ehaq",
+		kkrTdU: "lb1ed109x lb1btkyy5",
 		k1xSpc: "lb3nfvp2",
 		kGuDYH: "lbif65rj",
-		kSiTet: "lbb5d7sw",
+		kSiTet: "lb1gf9ui9",
 		kzqmXN: "lbh8yej3",
 		$$css: true
 	},

package/es/Input/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Input/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { inputMarker } from './marker.stylex';\nimport type { InputSize, InputVariant } from './type';\n\nconst disabled = ':is([data-disabled], :has(:disabled))';\nconst hover = ':hover:not(:focus-within, [data-disabled])';\nconst invalid = \":has([data-invalid], [aria-invalid='true'])\";\nconst invalidIdle =\n  \":has([data-invalid], [aria-invalid='true']):is(:focus-within, :not(:hover), [data-disabled])\";\nconst invalidFocus = \":has([data-invalid], [aria-invalid='true']):focus-within\";\nconst validFocus = \":focus-within:not(:has([data-invalid], [aria-invalid='true']))\";\n\nconst lobeShadow = `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`;\nconst primaryRing = `0 0 0 2px ${cssVar.colorPrimaryBg}`;\nconst errorRing = `0 0 0 2px ${cssVar.colorErrorBg}`;\n\nexport const styles = stylex.create({\n  borderless: {\n    borderColor: { default: 'transparent', [invalid]: cssVar.colorError },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n    boxShadow: { default: null, [invalidFocus]: errorRing },\n  },\n  clear: {\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: '50%',\n    borderStyle: 'none',\n    borderWidth: 0,\n    flex: 'none',\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorTextQuaternary,\n      ':hover': cssVar.colorTextTertiary,\n    },\n    color: cssVar.colorBgContainer,\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    visibility: {\n      default: 'hidden',\n      [stylex.when.ancestor(':focus-within', inputMarker)]: 'visible',\n      [stylex.when.ancestor(':hover', inputMarker)]: 'visible',\n    },\n    height: 16,\n    width: 16,\n  },\n  count: {\n    borderRadius: 999,\n    paddingInline: 8,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorFillTertiary,\n      ':is([data-over])': cssVar.colorError,\n    },\n    color: {\n      'default': cssVar.colorTextSecondary,\n      ':is([data-over])': cssVar.colorWhite,\n    },\n    display: 'inline-flex',\n    fontSize: 11,\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: 600,\n    insetBlockEnd: 6,\n    insetInlineEnd: 8,\n    pointerEvents: 'none',\n    position: 'absolute',\n    height: 20,\n  },\n  filled: {\n    borderColor: { default: 'transparent', [invalid]: cssVar.colorError },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: {\n      default: cssVar.colorFillTertiary,\n      [hover]: cssVar.colorFillSecondary,\n    },\n    boxShadow: { default: null, [invalidFocus]: errorRing },\n  },\n  input: {\n    'font': 'inherit',\n    'padding': 0,\n    'borderColor': 'currentcolor',\n    'borderStyle': 'none',\n    'borderWidth': 'medium',\n    'flex': '1',\n    'outline': 'none',\n    'appearance': 'none',\n    'backgroundColor': 'transparent',\n    'color': 'inherit',\n    'minWidth': 0,\n    '::placeholder': {\n      color: cssVar.colorTextPlaceholder,\n    },\n  },\n  numberControl: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: 4,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    outline: 'none',\n    transition: `color 150ms ${cssVar.motionEaseOut}, background 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': 'transparent',\n      ':hover:not(:disabled)': cssVar.colorFillSecondary,\n    },\n    color: {\n      'default': cssVar.colorTextTertiary,\n      ':hover:not(:disabled)': cssVar.colorText,\n    },\n    cursor: { 'default': 'pointer', ':disabled': 'not-allowed' },\n    display: 'flex',\n    justifyContent: 'center',\n    opacity: { 'default': null, ':disabled': 0.3 },\n    height: 13,\n    width: 20,\n  },\n  numberControlLarge: {\n    height: 15,\n    width: 22,\n  },\n  numberControls: {\n    flex: 'none',\n    display: 'flex',\n    flexDirection: 'column',\n    marginInlineEnd: -6,\n  },\n  numberControlSmall: {\n    borderRadius: 3,\n    height: 10,\n    width: 16,\n  },\n  numberControlsSmall: {\n    marginInlineEnd: -4,\n  },\n  numberInput: {\n    fontVariantNumeric: 'tabular-nums',\n  },\n  otpCell: {\n    flex: 'none',\n    paddingInline: 0,\n    textAlign: 'center',\n    width: 32,\n  },\n  otpRoot: {\n    gap: 8,\n    alignItems: 'center',\n    display: 'inline-flex',\n  },\n  outlined: {\n    borderColor: {\n      default: cssVar.colorBorderSecondary,\n      [hover]: cssVar.colorBorder,\n      [invalidIdle]: cssVar.colorError,\n      [validFocus]: cssVar.colorPrimary,\n    },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: { default: null, [invalidFocus]: errorRing, [validFocus]: primaryRing },\n  },\n  passwordToggle: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    outline: 'none',\n    transition: `color 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    color: { 'default': cssVar.colorTextTertiary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  root: {\n    borderRadius: cssVar.borderRadius,\n    gap: 8,\n    paddingInline: 12,\n    transition: `background 150ms ${cssVar.motionEaseOut}, border-color 150ms ${cssVar.motionEaseOut}, box-shadow 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    color: { default: cssVar.colorText, [disabled]: cssVar.colorTextQuaternary },\n    cursor: { default: 'text', [disabled]: 'not-allowed' },\n    display: 'inline-flex',\n    fontSize: 14,\n    opacity: { default: null, [disabled]: 0.66 },\n    width: '100%',\n  },\n  shadow: {\n    boxShadow: { default: lobeShadow, [invalidFocus]: errorRing },\n  },\n  shadowOutlined: {\n    boxShadow: { default: lobeShadow, [invalidFocus]: errorRing, [validFocus]: primaryRing },\n  },\n  sizeLarge: {\n    borderRadius: cssVar.borderRadiusLG,\n    fontSize: 16,\n    minHeight: 40,\n  },\n  sizeMiddle: {\n    minHeight: 32,\n  },\n  sizeSmall: {\n    borderRadius: cssVar.borderRadiusSM,\n    paddingInline: 8,\n    fontSize: 12,\n    minHeight: 24,\n  },\n  slot: {\n    flex: 'none',\n    alignItems: 'center',\n    color: cssVar.colorTextTertiary,\n    display: 'inline-flex',\n  },\n  textarea: {\n    paddingBlock: 8,\n    position: 'relative',\n    height: 'auto',\n  },\n  textareaAutoSize: {\n    fieldSizing: 'content',\n  },\n  textareaClear: {\n    insetBlockStart: 10,\n    insetInlineEnd: 10,\n    position: 'absolute',\n  },\n  textareaControl: {\n    lineHeight: 1.5,\n    resize: 'none',\n    maxHeight: 'var(--textarea-max-height, none)',\n    minHeight: 'calc(1.5em * var(--textarea-min-rows, 2))',\n  },\n  textareaResize: {\n    resize: 'vertical',\n  },\n  textareaWithCount: {\n    paddingBlockEnd: 30,\n  },\n});\n\nconst sizeStyles = {\n  large: styles.sizeLarge,\n  middle: styles.sizeMiddle,\n  small: styles.sizeSmall,\n};\n\nconst variantStyles = {\n  borderless: styles.borderless,\n  filled: styles.filled,\n  outlined: styles.outlined,\n};\n\ninterface RootOptions {\n  shadow?: boolean | null;\n  size?: InputSize | null;\n  variant?: InputVariant | null;\n}\n\nexport const inputRootStyles = ({ shadow, size, variant }: RootOptions = {}) => {\n  const mergedVariant = variant || 'outlined';\n  return [\n    inputMarker,\n    styles.root,\n    sizeStyles[size || 'middle'],\n    variantStyles[mergedVariant],\n    shadow && (mergedVariant === 'outlined' ? styles.shadowOutlined : styles.shadow),\n  ];\n};\n\nexport const rootVariants = (options?: RootOptions) =>\n  stylex.props(inputRootStyles(options)).className ?? '';\n\nconst className = (style: Parameters<typeof styleProps>[0]) => styleProps(style).className;\n\nexport const inputClassNames = {\n  borderless: className(styles.borderless),\n  clear: className(styles.clear),\n  count: className(styles.count),\n  filled: className(styles.filled),\n  input: className(styles.input),\n  invalid: '',\n  numberControl: className(styles.numberControl),\n  numberControlLarge: className(styles.numberControlLarge),\n  numberControls: className(styles.numberControls),\n  numberControlSmall: className(styles.numberControlSmall),\n  numberControlsSmall: className(styles.numberControlsSmall),\n  numberInput: className(styles.numberInput),\n  otpCell: className(styles.otpCell),\n  otpRoot: className(styles.otpRoot),\n  outlined: className(styles.outlined),\n  passwordToggle: className(styles.passwordToggle),\n  root: className([inputMarker, styles.root]),\n  shadow: className(styles.shadow),\n  sizeLarge: className(styles.sizeLarge),\n  sizeMiddle: className(styles.sizeMiddle),\n  sizeSmall: className(styles.sizeSmall),\n  slot: className(styles.slot),\n  textarea: className(styles.textarea),\n  textareaAutoSize: className(styles.textareaAutoSize),\n  textareaClear: className(styles.textareaClear),\n  textareaResize: className(styles.textareaResize),\n  textareaWithCount: className(styles.textareaWithCount),\n};\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Input/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { inputMarker } from './marker.stylex';\nimport type { InputSize, InputVariant } from './type';\n\nexport const disabledControl = 'input:disabled, textarea:disabled';\n\nconst disabled = `:is([data-disabled], :has(${disabledControl}))`;\nconst hover = ':hover:not(:focus-within, [data-disabled])';\nconst invalid = \":has([data-invalid], [aria-invalid='true'])\";\nconst invalidIdle =\n  \":has([data-invalid], [aria-invalid='true']):is(:focus-within, :not(:hover), [data-disabled])\";\nconst invalidFocus = \":has([data-invalid], [aria-invalid='true']):focus-within\";\nconst validFocus = \":focus-within:not(:has([data-invalid], [aria-invalid='true']))\";\n\nconst lobeShadow = `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`;\nconst primaryRing = `0 0 0 2px ${cssVar.colorPrimaryBg}`;\nconst errorRing = `0 0 0 2px ${cssVar.colorErrorBg}`;\n\nexport const styles = stylex.create({\n  borderless: {\n    borderColor: { default: 'transparent', [invalid]: cssVar.colorError },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n    boxShadow: { default: null, [invalidFocus]: errorRing },\n  },\n  clear: {\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: '50%',\n    borderStyle: 'none',\n    borderWidth: 0,\n    flex: 'none',\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorTextQuaternary,\n      ':hover': cssVar.colorTextTertiary,\n    },\n    color: cssVar.colorBgContainer,\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    visibility: {\n      default: 'hidden',\n      [stylex.when.ancestor(':focus-within', inputMarker)]: 'visible',\n      [stylex.when.ancestor(':hover', inputMarker)]: 'visible',\n    },\n    height: 16,\n    width: 16,\n  },\n  count: {\n    borderRadius: 999,\n    paddingInline: 8,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorFillTertiary,\n      ':is([data-over])': cssVar.colorError,\n    },\n    color: {\n      'default': cssVar.colorTextSecondary,\n      ':is([data-over])': cssVar.colorWhite,\n    },\n    display: 'inline-flex',\n    fontSize: 11,\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: 600,\n    insetBlockEnd: 6,\n    insetInlineEnd: 8,\n    pointerEvents: 'none',\n    position: 'absolute',\n    height: 20,\n  },\n  filled: {\n    borderColor: { default: 'transparent', [invalid]: cssVar.colorError },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: {\n      default: cssVar.colorFillTertiary,\n      [hover]: cssVar.colorFillSecondary,\n    },\n    boxShadow: { default: null, [invalidFocus]: errorRing },\n  },\n  input: {\n    'font': 'inherit',\n    'padding': 0,\n    'borderColor': 'currentcolor',\n    'borderStyle': 'none',\n    'borderWidth': 'medium',\n    'flex': '1',\n    'outline': 'none',\n    'appearance': 'none',\n    'backgroundColor': 'transparent',\n    'color': 'inherit',\n    'minWidth': 0,\n    '::placeholder': {\n      color: cssVar.colorTextPlaceholder,\n    },\n  },\n  numberControl: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: 4,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    outline: 'none',\n    transition: `color 150ms ${cssVar.motionEaseOut}, background 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': 'transparent',\n      ':hover:not(:disabled)': cssVar.colorFillSecondary,\n    },\n    color: {\n      'default': cssVar.colorTextTertiary,\n      ':hover:not(:disabled)': cssVar.colorText,\n    },\n    cursor: { 'default': 'pointer', ':disabled': 'not-allowed' },\n    display: 'flex',\n    justifyContent: 'center',\n    opacity: { 'default': null, ':disabled': 0.3 },\n    height: 13,\n    width: 20,\n  },\n  numberControlLarge: {\n    height: 15,\n    width: 22,\n  },\n  numberControls: {\n    flex: 'none',\n    display: 'flex',\n    flexDirection: 'column',\n    marginInlineEnd: -6,\n  },\n  numberControlSmall: {\n    borderRadius: 3,\n    height: 10,\n    width: 16,\n  },\n  numberControlsSmall: {\n    marginInlineEnd: -4,\n  },\n  numberInput: {\n    fontVariantNumeric: 'tabular-nums',\n  },\n  otpCell: {\n    flex: 'none',\n    paddingInline: 0,\n    textAlign: 'center',\n    width: 32,\n  },\n  otpRoot: {\n    gap: 8,\n    alignItems: 'center',\n    display: 'inline-flex',\n  },\n  outlined: {\n    borderColor: {\n      default: cssVar.colorBorderSecondary,\n      [hover]: cssVar.colorBorder,\n      [invalidIdle]: cssVar.colorError,\n      [validFocus]: cssVar.colorPrimary,\n    },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: { default: null, [invalidFocus]: errorRing, [validFocus]: primaryRing },\n  },\n  passwordToggle: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    outline: 'none',\n    transition: `color 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    color: { 'default': cssVar.colorTextTertiary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  root: {\n    borderRadius: cssVar.borderRadius,\n    gap: 8,\n    paddingInline: 12,\n    transition: `background 150ms ${cssVar.motionEaseOut}, border-color 150ms ${cssVar.motionEaseOut}, box-shadow 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    color: { default: cssVar.colorText, [disabled]: cssVar.colorTextQuaternary },\n    cursor: { default: 'text', [disabled]: 'not-allowed' },\n    display: 'inline-flex',\n    fontSize: 14,\n    opacity: { default: null, [disabled]: 0.66 },\n    width: '100%',\n  },\n  shadow: {\n    boxShadow: { default: lobeShadow, [invalidFocus]: errorRing },\n  },\n  shadowOutlined: {\n    boxShadow: { default: lobeShadow, [invalidFocus]: errorRing, [validFocus]: primaryRing },\n  },\n  sizeLarge: {\n    borderRadius: cssVar.borderRadiusLG,\n    fontSize: 16,\n    minHeight: 40,\n  },\n  sizeMiddle: {\n    minHeight: 32,\n  },\n  sizeSmall: {\n    borderRadius: cssVar.borderRadiusSM,\n    paddingInline: 8,\n    fontSize: 12,\n    minHeight: 24,\n  },\n  slot: {\n    flex: 'none',\n    alignItems: 'center',\n    color: cssVar.colorTextTertiary,\n    display: 'inline-flex',\n  },\n  textarea: {\n    paddingBlock: 8,\n    position: 'relative',\n    height: 'auto',\n  },\n  textareaAutoSize: {\n    fieldSizing: 'content',\n  },\n  textareaClear: {\n    insetBlockStart: 10,\n    insetInlineEnd: 10,\n    position: 'absolute',\n  },\n  textareaControl: {\n    lineHeight: 1.5,\n    resize: 'none',\n    maxHeight: 'var(--textarea-max-height, none)',\n    minHeight: 'calc(1.5em * var(--textarea-min-rows, 2))',\n  },\n  textareaResize: {\n    resize: 'vertical',\n  },\n  textareaWithCount: {\n    paddingBlockEnd: 30,\n  },\n});\n\nconst sizeStyles = {\n  large: styles.sizeLarge,\n  middle: styles.sizeMiddle,\n  small: styles.sizeSmall,\n};\n\nconst variantStyles = {\n  borderless: styles.borderless,\n  filled: styles.filled,\n  outlined: styles.outlined,\n};\n\ninterface RootOptions {\n  shadow?: boolean | null;\n  size?: InputSize | null;\n  variant?: InputVariant | null;\n}\n\nexport const inputRootStyles = ({ shadow, size, variant }: RootOptions = {}) => {\n  const mergedVariant = variant || 'outlined';\n  return [\n    inputMarker,\n    styles.root,\n    sizeStyles[size || 'middle'],\n    variantStyles[mergedVariant],\n    shadow && (mergedVariant === 'outlined' ? styles.shadowOutlined : styles.shadow),\n  ];\n};\n\nexport const rootVariants = (options?: RootOptions) =>\n  stylex.props(inputRootStyles(options)).className ?? '';\n\nconst className = (style: Parameters<typeof styleProps>[0]) => styleProps(style).className;\n\nexport const inputClassNames = {\n  borderless: className(styles.borderless),\n  clear: className(styles.clear),\n  count: className(styles.count),\n  filled: className(styles.filled),\n  input: className(styles.input),\n  invalid: '',\n  numberControl: className(styles.numberControl),\n  numberControlLarge: className(styles.numberControlLarge),\n  numberControls: className(styles.numberControls),\n  numberControlSmall: className(styles.numberControlSmall),\n  numberControlsSmall: className(styles.numberControlsSmall),\n  numberInput: className(styles.numberInput),\n  otpCell: className(styles.otpCell),\n  otpRoot: className(styles.otpRoot),\n  outlined: className(styles.outlined),\n  passwordToggle: className(styles.passwordToggle),\n  root: className([inputMarker, styles.root]),\n  shadow: className(styles.shadow),\n  sizeLarge: className(styles.sizeLarge),\n  sizeMiddle: className(styles.sizeMiddle),\n  sizeSmall: className(styles.sizeSmall),\n  slot: className(styles.slot),\n  textarea: className(styles.textarea),\n  textareaAutoSize: className(styles.textareaAutoSize),\n  textareaClear: className(styles.textareaClear),\n  textareaResize: className(styles.textareaResize),\n  textareaWithCount: className(styles.textareaWithCount),\n};\n"],"mappings":"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"}

package/es/Text/style.d.mts

@@ -14,13 +14,13 @@ export declare const textStyles: {
   text: string;
   disabled: string;
   danger: string;
+  success: string;
+  info: string;
+  warning: string;
   delete: string;
   ellipsis: string;
   italic: string;
   underline: string;
-  success: string;
-  warning: string;
-  info: string;
   ellipsisMulti: string;
   secondary: string;
 };

package/es/awesome/Grainient/Grainient.d.mts

@@ -0,0 +1,11 @@
+import { GrainientProps } from "./type.mjs";
+//#region src/awesome/Grainient/Grainient.d.ts
+/**
+ * Animated grainy gradient (WebGL2, no extra dependency). Fills its nearest positioned ancestor,
+ * pauses when off-screen or the tab is hidden, and draws one still frame when reduced motion is
+ * preferred. Without WebGL2 it renders nothing, so give the parent a fallback background.
+ */
+declare const Grainient: import("react").NamedExoticComponent<GrainientProps>;
+//#endregion
+export { Grainient as default };
+//# sourceMappingURL=Grainient.d.mts.map

package/es/awesome/Grainient/Grainient.mjs

@@ -0,0 +1,314 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { useThemeMode } from "../../styles/theme/scope.mjs";
+import { styles } from "./style.mjs";
+import { memo, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/awesome/Grainient/Grainient.tsx
+const VERTEX_SHADER = `#version 300 es
+in vec2 position;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+uniform vec2 iResolution;
+uniform float iTime;
+uniform float uTimeSpeed;
+uniform float uColorBalance;
+uniform float uWarpStrength;
+uniform float uWarpFrequency;
+uniform float uWarpSpeed;
+uniform float uWarpAmplitude;
+uniform float uBlendAngle;
+uniform float uBlendSoftness;
+uniform float uRotationAmount;
+uniform float uNoiseScale;
+uniform float uGrainAmount;
+uniform float uGrainScale;
+uniform float uGrainAnimated;
+uniform float uContrast;
+uniform float uGamma;
+uniform float uSaturation;
+uniform vec2 uCenterOffset;
+uniform float uZoom;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+uniform float uLightMode;
+out vec4 fragColor;
+#define S(a,b,t) smoothstep(a,b,t)
+mat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}
+vec2 hash(vec2 p){p=vec2(dot(p,vec2(2127.1,81.17)),dot(p,vec2(1269.5,283.37)));return fract(sin(p)*43758.5453);}
+float noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);float n=mix(mix(dot(-1.0+2.0*hash(i+vec2(0.0,0.0)),f-vec2(0.0,0.0)),dot(-1.0+2.0*hash(i+vec2(1.0,0.0)),f-vec2(1.0,0.0)),u.x),mix(dot(-1.0+2.0*hash(i+vec2(0.0,1.0)),f-vec2(0.0,1.0)),dot(-1.0+2.0*hash(i+vec2(1.0,1.0)),f-vec2(1.0,1.0)),u.x),u.y);return 0.5+0.5*n;}
+void mainImage(out vec4 o, vec2 C){
+  float t=iTime*uTimeSpeed;
+  vec2 uv=C/iResolution.xy;
+  float ratio=iResolution.x/iResolution.y;
+  vec2 tuv=uv-0.5+uCenterOffset;
+  tuv/=max(uZoom,0.001);
+
+  float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);
+  tuv.y*=1.0/ratio;
+  tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));
+  tuv.y*=ratio;
+
+  float frequency=uWarpFrequency;
+  float ws=max(uWarpStrength,0.001);
+  float amplitude=uWarpAmplitude/ws;
+  float warpTime=t*uWarpSpeed;
+  tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;
+  tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);
+
+  vec3 colLav=uColor1;
+  vec3 colOrg=uColor2;
+  vec3 colDark=uColor3;
+  float b=uColorBalance;
+  float s=max(uBlendSoftness,0.0);
+  mat2 blendRot=Rot(radians(uBlendAngle));
+  float blendX=(tuv*blendRot).x;
+  float edge0=-0.3-b-s;
+  float edge1=0.2-b+s;
+  float v0=0.5-b+s;
+  float v1=-0.3-b-s;
+  vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));
+  vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));
+  vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));
+
+  vec2 grainUv=uv*max(uGrainScale,0.001);
+  if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);}
+  float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);
+  col+=(grain-0.5)*uGrainAmount;
+
+  col=(col-0.5)*uContrast+0.5;
+  float luma=dot(col,vec3(0.2126,0.7152,0.0722));
+  col=mix(vec3(luma),col,uSaturation);
+  col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));
+  col=clamp(col,0.0,1.0);
+  if(uLightMode>0.5){
+    float energy=max(max(col.r,col.g),col.b);
+    vec3 hue=col/max(energy,0.001);
+    float chroma=length(col-vec3(dot(col,vec3(0.333333))));
+    float coverage=clamp(0.12+chroma*1.15+energy*0.18,0.0,0.88);
+    col=mix(vec3(1.0),clamp(hue*0.58+col*0.18,0.0,1.0),coverage);
+  }
+
+  o=vec4(col,1.0);
+}
+void main(){
+  vec4 o=vec4(0.0);
+  mainImage(o,gl_FragCoord.xy);
+  fragColor=o;
+}
+`;
+const hexToRgb = (hex) => {
+	let value = hex.trim().replace("#", "");
+	if (value.length === 3) value = [...value].map((c) => c + c).join("");
+	const result = /^([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.exec(value);
+	if (!result) return [
+		1,
+		1,
+		1
+	];
+	return [
+		Number.parseInt(result[1], 16) / 255,
+		Number.parseInt(result[2], 16) / 255,
+		Number.parseInt(result[3], 16) / 255
+	];
+};
+const compile = (gl, type, source) => {
+	const shader = gl.createShader(type);
+	if (!shader) return null;
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+		gl.deleteShader(shader);
+		return null;
+	}
+	return shader;
+};
+/**
+* Animated grainy gradient (WebGL2, no extra dependency). Fills its nearest positioned ancestor,
+* pauses when off-screen or the tab is hidden, and draws one still frame when reduced motion is
+* preferred. Without WebGL2 it renders nothing, so give the parent a fallback background.
+*/
+const Grainient = memo(({ timeSpeed = .25, colorBalance = 0, warpStrength = 1, warpFrequency = 5, warpSpeed = 2, warpAmplitude = 50, blendAngle = 0, blendSoftness = .05, rotationAmount = 500, noiseScale = 2, grainAmount = .1, grainScale = 2, contrast = 1.5, gamma = 1, saturation = 1, zoom = .9, centerX = 0, centerY = 0, color1 = "#FF9FFC", color2 = "#5227FF", color3 = "#B497CF", grainAnimated = false, lightMode = false, className, style, ...rest }) => {
+	const containerRef = useRef(null);
+	const drawRef = useRef(null);
+	const uniformsRef = useRef(null);
+	const { isDarkMode } = useThemeMode();
+	const light = lightMode === "auto" ? !isDarkMode : lightMode;
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const canvas = document.createElement("canvas");
+		canvas.className = stylex.props(styles.canvas).className ?? "";
+		const gl = canvas.getContext("webgl2", {
+			alpha: true,
+			antialias: false
+		});
+		if (!gl) return;
+		container.append(canvas);
+		const vs = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+		const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+		const program = gl.createProgram();
+		if (!vs || !fs || !program) {
+			canvas.remove();
+			return;
+		}
+		gl.attachShader(program, vs);
+		gl.attachShader(program, fs);
+		gl.linkProgram(program);
+		if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+			canvas.remove();
+			return;
+		}
+		gl.useProgram(program);
+		const buffer = gl.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+			-1,
+			-1,
+			3,
+			-1,
+			-1,
+			3
+		]), gl.STATIC_DRAW);
+		const position = gl.getAttribLocation(program, "position");
+		gl.enableVertexAttribArray(position);
+		gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+		const loc = (name) => gl.getUniformLocation(program, name);
+		const uTime = loc("iTime");
+		const uRes = loc("iResolution");
+		const started = performance.now();
+		const draw = () => {
+			gl.uniform1f(uTime, (performance.now() - started) * .001);
+			gl.drawArrays(gl.TRIANGLES, 0, 3);
+		};
+		drawRef.current = draw;
+		uniformsRef.current?.();
+		const setSize = () => {
+			const rect = container.getBoundingClientRect();
+			const dpr = Math.min(window.devicePixelRatio || 1, 2);
+			canvas.width = Math.max(1, Math.floor(rect.width * dpr));
+			canvas.height = Math.max(1, Math.floor(rect.height * dpr));
+			gl.viewport(0, 0, canvas.width, canvas.height);
+			gl.uniform2f(uRes, canvas.width, canvas.height);
+			draw();
+		};
+		const reducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+		let raf = 0;
+		let inView = true;
+		const loop = () => {
+			draw();
+			raf = requestAnimationFrame(loop);
+		};
+		const stop = () => {
+			if (raf) cancelAnimationFrame(raf);
+			raf = 0;
+		};
+		const sync = () => {
+			const run = inView && !document.hidden && !reducedMotion?.matches;
+			if (run && !raf) raf = requestAnimationFrame(loop);
+			if (!run) {
+				stop();
+				draw();
+			}
+		};
+		const resizeObserver = new ResizeObserver(setSize);
+		resizeObserver.observe(container);
+		const intersectionObserver = new IntersectionObserver(([entry]) => {
+			inView = entry.isIntersecting;
+			sync();
+		});
+		intersectionObserver.observe(container);
+		document.addEventListener("visibilitychange", sync);
+		reducedMotion?.addEventListener("change", sync);
+		setSize();
+		sync();
+		return () => {
+			stop();
+			resizeObserver.disconnect();
+			intersectionObserver.disconnect();
+			document.removeEventListener("visibilitychange", sync);
+			reducedMotion?.removeEventListener("change", sync);
+			drawRef.current = null;
+			gl.deleteBuffer(buffer);
+			gl.deleteProgram(program);
+			gl.deleteShader(vs);
+			gl.deleteShader(fs);
+			canvas.remove();
+		};
+	}, []);
+	useEffect(() => {
+		const apply = () => {
+			const gl = (containerRef.current?.querySelector("canvas"))?.getContext("webgl2");
+			if (!gl) return;
+			const program = gl.getParameter(gl.CURRENT_PROGRAM);
+			if (!program) return;
+			const loc = (name) => gl.getUniformLocation(program, name);
+			gl.uniform1f(loc("uTimeSpeed"), timeSpeed);
+			gl.uniform1f(loc("uColorBalance"), colorBalance);
+			gl.uniform1f(loc("uWarpStrength"), warpStrength);
+			gl.uniform1f(loc("uWarpFrequency"), warpFrequency);
+			gl.uniform1f(loc("uWarpSpeed"), warpSpeed);
+			gl.uniform1f(loc("uWarpAmplitude"), warpAmplitude);
+			gl.uniform1f(loc("uBlendAngle"), blendAngle);
+			gl.uniform1f(loc("uBlendSoftness"), blendSoftness);
+			gl.uniform1f(loc("uRotationAmount"), rotationAmount);
+			gl.uniform1f(loc("uNoiseScale"), noiseScale);
+			gl.uniform1f(loc("uGrainAmount"), grainAmount);
+			gl.uniform1f(loc("uGrainScale"), grainScale);
+			gl.uniform1f(loc("uContrast"), contrast);
+			gl.uniform1f(loc("uGamma"), gamma);
+			gl.uniform1f(loc("uSaturation"), saturation);
+			gl.uniform1f(loc("uZoom"), zoom);
+			gl.uniform1f(loc("uGrainAnimated"), grainAnimated ? 1 : 0);
+			gl.uniform1f(loc("uLightMode"), light ? 1 : 0);
+			gl.uniform2f(loc("uCenterOffset"), centerX, centerY);
+			gl.uniform3f(loc("uColor1"), ...hexToRgb(color1));
+			gl.uniform3f(loc("uColor2"), ...hexToRgb(color2));
+			gl.uniform3f(loc("uColor3"), ...hexToRgb(color3));
+			drawRef.current?.();
+		};
+		uniformsRef.current = apply;
+		apply();
+	}, [
+		timeSpeed,
+		colorBalance,
+		warpStrength,
+		warpFrequency,
+		warpSpeed,
+		warpAmplitude,
+		blendAngle,
+		blendSoftness,
+		rotationAmount,
+		noiseScale,
+		grainAmount,
+		grainScale,
+		contrast,
+		gamma,
+		saturation,
+		zoom,
+		centerX,
+		centerY,
+		color1,
+		color2,
+		color3,
+		grainAnimated,
+		light
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		ref: containerRef,
+		...rest,
+		...styleProps(styles.root, className, style)
+	});
+});
+Grainient.displayName = "Grainient";
+//#endregion
+export { Grainient as default, hexToRgb };
+
+//# sourceMappingURL=Grainient.mjs.map

package/es/awesome/Grainient/Grainient.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grainient.mjs","names":[],"sources":["../../../src/awesome/Grainient/Grainient.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, useEffect, useRef } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { styles } from './style';\nimport type { GrainientProps } from './type';\n\nconst VERTEX_SHADER = `#version 300 es\nin vec2 position;\nvoid main() {\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n`;\n\nconst FRAGMENT_SHADER = `#version 300 es\nprecision highp float;\nuniform vec2 iResolution;\nuniform float iTime;\nuniform float uTimeSpeed;\nuniform float uColorBalance;\nuniform float uWarpStrength;\nuniform float uWarpFrequency;\nuniform float uWarpSpeed;\nuniform float uWarpAmplitude;\nuniform float uBlendAngle;\nuniform float uBlendSoftness;\nuniform float uRotationAmount;\nuniform float uNoiseScale;\nuniform float uGrainAmount;\nuniform float uGrainScale;\nuniform float uGrainAnimated;\nuniform float uContrast;\nuniform float uGamma;\nuniform float uSaturation;\nuniform vec2 uCenterOffset;\nuniform float uZoom;\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform vec3 uColor3;\nuniform float uLightMode;\nout vec4 fragColor;\n#define S(a,b,t) smoothstep(a,b,t)\nmat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}\nvec2 hash(vec2 p){p=vec2(dot(p,vec2(2127.1,81.17)),dot(p,vec2(1269.5,283.37)));return fract(sin(p)*43758.5453);}\nfloat noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);float n=mix(mix(dot(-1.0+2.0*hash(i+vec2(0.0,0.0)),f-vec2(0.0,0.0)),dot(-1.0+2.0*hash(i+vec2(1.0,0.0)),f-vec2(1.0,0.0)),u.x),mix(dot(-1.0+2.0*hash(i+vec2(0.0,1.0)),f-vec2(0.0,1.0)),dot(-1.0+2.0*hash(i+vec2(1.0,1.0)),f-vec2(1.0,1.0)),u.x),u.y);return 0.5+0.5*n;}\nvoid mainImage(out vec4 o, vec2 C){\n  float t=iTime*uTimeSpeed;\n  vec2 uv=C/iResolution.xy;\n  float ratio=iResolution.x/iResolution.y;\n  vec2 tuv=uv-0.5+uCenterOffset;\n  tuv/=max(uZoom,0.001);\n\n  float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);\n  tuv.y*=1.0/ratio;\n  tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));\n  tuv.y*=ratio;\n\n  float frequency=uWarpFrequency;\n  float ws=max(uWarpStrength,0.001);\n  float amplitude=uWarpAmplitude/ws;\n  float warpTime=t*uWarpSpeed;\n  tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;\n  tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);\n\n  vec3 colLav=uColor1;\n  vec3 colOrg=uColor2;\n  vec3 colDark=uColor3;\n  float b=uColorBalance;\n  float s=max(uBlendSoftness,0.0);\n  mat2 blendRot=Rot(radians(uBlendAngle));\n  float blendX=(tuv*blendRot).x;\n  float edge0=-0.3-b-s;\n  float edge1=0.2-b+s;\n  float v0=0.5-b+s;\n  float v1=-0.3-b-s;\n  vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));\n  vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));\n  vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));\n\n  vec2 grainUv=uv*max(uGrainScale,0.001);\n  if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);}\n  float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);\n  col+=(grain-0.5)*uGrainAmount;\n\n  col=(col-0.5)*uContrast+0.5;\n  float luma=dot(col,vec3(0.2126,0.7152,0.0722));\n  col=mix(vec3(luma),col,uSaturation);\n  col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));\n  col=clamp(col,0.0,1.0);\n  if(uLightMode>0.5){\n    float energy=max(max(col.r,col.g),col.b);\n    vec3 hue=col/max(energy,0.001);\n    float chroma=length(col-vec3(dot(col,vec3(0.333333))));\n    float coverage=clamp(0.12+chroma*1.15+energy*0.18,0.0,0.88);\n    col=mix(vec3(1.0),clamp(hue*0.58+col*0.18,0.0,1.0),coverage);\n  }\n\n  o=vec4(col,1.0);\n}\nvoid main(){\n  vec4 o=vec4(0.0);\n  mainImage(o,gl_FragCoord.xy);\n  fragColor=o;\n}\n`;\n\nexport const hexToRgb = (hex: string): [number, number, number] => {\n  let value = hex.trim().replace('#', '');\n  if (value.length === 3) value = [...value].map((c) => c + c).join('');\n  const result = /^([\\da-f]{2})([\\da-f]{2})([\\da-f]{2})$/i.exec(value);\n  if (!result) return [1, 1, 1];\n  return [\n    Number.parseInt(result[1], 16) / 255,\n    Number.parseInt(result[2], 16) / 255,\n    Number.parseInt(result[3], 16) / 255,\n  ];\n};\n\nconst compile = (gl: WebGL2RenderingContext, type: number, source: string) => {\n  const shader = gl.createShader(type);\n  if (!shader) return null;\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    gl.deleteShader(shader);\n    return null;\n  }\n  return shader;\n};\n\n/**\n * Animated grainy gradient (WebGL2, no extra dependency). Fills its nearest positioned ancestor,\n * pauses when off-screen or the tab is hidden, and draws one still frame when reduced motion is\n * preferred. Without WebGL2 it renders nothing, so give the parent a fallback background.\n */\nconst Grainient = memo<GrainientProps>(\n  ({\n    timeSpeed = 0.25,\n    colorBalance = 0,\n    warpStrength = 1,\n    warpFrequency = 5,\n    warpSpeed = 2,\n    warpAmplitude = 50,\n    blendAngle = 0,\n    blendSoftness = 0.05,\n    rotationAmount = 500,\n    noiseScale = 2,\n    grainAmount = 0.1,\n    grainScale = 2,\n    contrast = 1.5,\n    gamma = 1,\n    saturation = 1,\n    zoom = 0.9,\n    centerX = 0,\n    centerY = 0,\n    color1 = '#FF9FFC',\n    color2 = '#5227FF',\n    color3 = '#B497CF',\n    grainAnimated = false,\n    lightMode = false,\n    className,\n    style,\n    ...rest\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const drawRef = useRef<(() => void) | null>(null);\n    const uniformsRef = useRef<(() => void) | null>(null);\n    const { isDarkMode } = useThemeMode();\n    const light = lightMode === 'auto' ? !isDarkMode : lightMode;\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const canvas = document.createElement('canvas');\n      canvas.className = stylex.props(styles.canvas).className ?? '';\n      const gl = canvas.getContext('webgl2', { alpha: true, antialias: false });\n      if (!gl) return;\n      container.append(canvas);\n\n      const vs = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);\n      const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);\n      const program = gl.createProgram();\n      if (!vs || !fs || !program) {\n        canvas.remove();\n        return;\n      }\n      gl.attachShader(program, vs);\n      gl.attachShader(program, fs);\n      gl.linkProgram(program);\n      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n        canvas.remove();\n        return;\n      }\n      gl.useProgram(program);\n\n      // One triangle that covers the viewport.\n      const buffer = gl.createBuffer();\n      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);\n      const position = gl.getAttribLocation(program, 'position');\n      gl.enableVertexAttribArray(position);\n      gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);\n\n      const loc = (name: string) => gl.getUniformLocation(program, name);\n      const uTime = loc('iTime');\n      const uRes = loc('iResolution');\n      const started = performance.now();\n\n      const draw = () => {\n        gl.uniform1f(uTime, (performance.now() - started) * 0.001);\n        gl.drawArrays(gl.TRIANGLES, 0, 3);\n      };\n      drawRef.current = draw;\n      uniformsRef.current?.();\n\n      const setSize = () => {\n        const rect = container.getBoundingClientRect();\n        const dpr = Math.min(window.devicePixelRatio || 1, 2);\n        canvas.width = Math.max(1, Math.floor(rect.width * dpr));\n        canvas.height = Math.max(1, Math.floor(rect.height * dpr));\n        gl.viewport(0, 0, canvas.width, canvas.height);\n        gl.uniform2f(uRes, canvas.width, canvas.height);\n        draw();\n      };\n\n      const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)');\n      let raf = 0;\n      let inView = true;\n\n      const loop = () => {\n        draw();\n        raf = requestAnimationFrame(loop);\n      };\n      const stop = () => {\n        if (raf) cancelAnimationFrame(raf);\n        raf = 0;\n      };\n      const sync = () => {\n        const run = inView && !document.hidden && !reducedMotion?.matches;\n        if (run && !raf) raf = requestAnimationFrame(loop);\n        if (!run) {\n          stop();\n          draw();\n        }\n      };\n\n      const resizeObserver = new ResizeObserver(setSize);\n      resizeObserver.observe(container);\n      const intersectionObserver = new IntersectionObserver(([entry]) => {\n        inView = entry.isIntersecting;\n        sync();\n      });\n      intersectionObserver.observe(container);\n      document.addEventListener('visibilitychange', sync);\n      reducedMotion?.addEventListener('change', sync);\n      setSize();\n      sync();\n\n      return () => {\n        stop();\n        resizeObserver.disconnect();\n        intersectionObserver.disconnect();\n        document.removeEventListener('visibilitychange', sync);\n        reducedMotion?.removeEventListener('change', sync);\n        drawRef.current = null;\n        gl.deleteBuffer(buffer);\n        gl.deleteProgram(program);\n        gl.deleteShader(vs);\n        gl.deleteShader(fs);\n        canvas.remove();\n      };\n    }, []);\n\n    useEffect(() => {\n      const apply = () => {\n        const canvas = containerRef.current?.querySelector('canvas');\n        const gl = canvas?.getContext('webgl2');\n        if (!gl) return;\n        const program = gl.getParameter(gl.CURRENT_PROGRAM) as WebGLProgram | null;\n        if (!program) return;\n        const loc = (name: string) => gl.getUniformLocation(program, name);\n        gl.uniform1f(loc('uTimeSpeed'), timeSpeed);\n        gl.uniform1f(loc('uColorBalance'), colorBalance);\n        gl.uniform1f(loc('uWarpStrength'), warpStrength);\n        gl.uniform1f(loc('uWarpFrequency'), warpFrequency);\n        gl.uniform1f(loc('uWarpSpeed'), warpSpeed);\n        gl.uniform1f(loc('uWarpAmplitude'), warpAmplitude);\n        gl.uniform1f(loc('uBlendAngle'), blendAngle);\n        gl.uniform1f(loc('uBlendSoftness'), blendSoftness);\n        gl.uniform1f(loc('uRotationAmount'), rotationAmount);\n        gl.uniform1f(loc('uNoiseScale'), noiseScale);\n        gl.uniform1f(loc('uGrainAmount'), grainAmount);\n        gl.uniform1f(loc('uGrainScale'), grainScale);\n        gl.uniform1f(loc('uContrast'), contrast);\n        gl.uniform1f(loc('uGamma'), gamma);\n        gl.uniform1f(loc('uSaturation'), saturation);\n        gl.uniform1f(loc('uZoom'), zoom);\n        gl.uniform1f(loc('uGrainAnimated'), grainAnimated ? 1 : 0);\n        gl.uniform1f(loc('uLightMode'), light ? 1 : 0);\n        gl.uniform2f(loc('uCenterOffset'), centerX, centerY);\n        gl.uniform3f(loc('uColor1'), ...hexToRgb(color1));\n        gl.uniform3f(loc('uColor2'), ...hexToRgb(color2));\n        gl.uniform3f(loc('uColor3'), ...hexToRgb(color3));\n        drawRef.current?.();\n      };\n      uniformsRef.current = apply;\n      apply();\n    }, [\n      timeSpeed,\n      colorBalance,\n      warpStrength,\n      warpFrequency,\n      warpSpeed,\n      warpAmplitude,\n      blendAngle,\n      blendSoftness,\n      rotationAmount,\n      noiseScale,\n      grainAmount,\n      grainScale,\n      contrast,\n      gamma,\n      saturation,\n      zoom,\n      centerX,\n      centerY,\n      color1,\n      color2,\n      color3,\n      grainAnimated,\n      light,\n    ]);\n\n    return (\n      <div\n        aria-hidden\n        ref={containerRef}\n        {...rest}\n        {...styleProps(styles.root, className, style)}\n      />\n    );\n  },\n);\n\nGrainient.displayName = 'Grainient';\n\nexport default Grainient;\n"],"mappings":"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"}

package/es/awesome/Grainient/index.d.mts

@@ -0,0 +1,3 @@
+import { GrainientProps } from "./type.mjs";
+import Grainient from "./Grainient.mjs";
+export { type GrainientProps, Grainient as default };

package/es/awesome/Grainient/style.mjs

@@ -0,0 +1,23 @@
+//#region src/awesome/Grainient/style.ts
+const styles = {
+	canvas: {
+		kpwlN0: "lb10a8y8t",
+		kZKoxP: "lb5yr21d",
+		k1xSpc: "lb1lliihq",
+		kzqmXN: "lbh8yej3",
+		kVAEAm: "lb10l6tqk",
+		$$css: true
+	},
+	root: {
+		kpwlN0: "lb10a8y8t",
+		kVQacm: "lbb3r6kr",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lb1ja2u2z",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/awesome/Grainient/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Grainient/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  canvas: {\n    inset: 0,\n    blockSize: '100%',\n    display: 'block',\n    inlineSize: '100%',\n    position: 'absolute',\n  },\n  root: {\n    inset: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 0,\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/awesome/Grainient/type.d.mts

@@ -0,0 +1,121 @@
+import { DivProps } from "../../types/index.mjs";
+//#region src/awesome/Grainient/type.d.ts
+export interface GrainientProps extends DivProps {
+  /**
+   * Angle of the color blend, in degrees.
+   * @default 0
+   */
+  blendAngle?: number;
+  /**
+   * Softness of the color edges.
+   * @default 0.05
+   */
+  blendSoftness?: number;
+  /**
+   * Horizontal offset of the field center.
+   * @default 0
+   */
+  centerX?: number;
+  /**
+   * Vertical offset of the field center.
+   * @default 0
+   */
+  centerY?: number;
+  /**
+   * First color stop, as hex.
+   * @default '#FF9FFC'
+   */
+  color1?: string;
+  /**
+   * Second color stop, as hex.
+   * @default '#5227FF'
+   */
+  color2?: string;
+  /**
+   * Third color stop, as hex.
+   * @default '#B497CF'
+   */
+  color3?: string;
+  /**
+   * Shifts the blend toward color1 (negative) or color3 (positive).
+   * @default 0
+   */
+  colorBalance?: number;
+  /**
+   * Output contrast.
+   * @default 1.5
+   */
+  contrast?: number;
+  /**
+   * Output gamma.
+   * @default 1
+   */
+  gamma?: number;
+  /**
+   * Film grain strength. 0 turns it off.
+   * @default 0.1
+   */
+  grainAmount?: number;
+  /**
+   * Animate the grain with time.
+   * @default false
+   */
+  grainAnimated?: boolean;
+  /**
+   * Film grain scale.
+   * @default 2
+   */
+  grainScale?: number;
+  /**
+   * Wash the colors toward white for a light surface. `'auto'` follows the current theme.
+   * @default false
+   */
+  lightMode?: boolean | 'auto';
+  /**
+   * Scale of the rotation noise.
+   * @default 2
+   */
+  noiseScale?: number;
+  /**
+   * Noise-driven rotation, in degrees.
+   * @default 500
+   */
+  rotationAmount?: number;
+  /**
+   * Output saturation.
+   * @default 1
+   */
+  saturation?: number;
+  /**
+   * Animation speed. A still frame is drawn when reduced motion is preferred.
+   * @default 0.25
+   */
+  timeSpeed?: number;
+  /**
+   * Warp amplitude divisor; higher is calmer.
+   * @default 50
+   */
+  warpAmplitude?: number;
+  /**
+   * Frequency of the warp waves.
+   * @default 5
+   */
+  warpFrequency?: number;
+  /**
+   * Speed of the warp waves.
+   * @default 2
+   */
+  warpSpeed?: number;
+  /**
+   * How strongly the field is warped.
+   * @default 1
+   */
+  warpStrength?: number;
+  /**
+   * Zoom of the field.
+   * @default 0.9
+   */
+  zoom?: number;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/index.d.mts

@@ -35,6 +35,9 @@ import "./Giscus/index.mjs";
 import { GradientButtonProps } from "./GradientButton/type.mjs";
 import GradientButton from "./GradientButton/GradientButton.mjs";
 import "./GradientButton/index.mjs";
+import { GrainientProps } from "./Grainient/type.mjs";
+import Grainient from "./Grainient/Grainient.mjs";
+import "./Grainient/index.mjs";
 import { GridBackgroundProps, GridShowcaseProps } from "./GridBackground/type.mjs";
 import GridBackground from "./GridBackground/GridBackground.mjs";
 import GridShowcase from "./GridBackground/GridShowcase.mjs";
@@ -64,4 +67,4 @@ import "./Spotlight/index.mjs";
 import { CursorStyle, SegmentMode, TypewriterEffectProps } from "./TypewriterEffect/type.mjs";
 import TypewriterEffect from "./TypewriterEffect/TypewriterEffect.mjs";
 import "./TypewriterEffect/index.mjs";
-export { AgentSkillCard, type AgentSkillCardAgent, type AgentSkillCardMode, type AgentSkillCardPanel, type AgentSkillCardProps, AuroraBackground, type AuroraBackgroundProps, BentoCard, type BentoCardProps, BentoGrid, type BentoGridProps, BottomGradientButton, type BottomGradientButtonProps, CodeShowcase, type CodeShowcaseItem, type CodeShowcaseProps, type CursorStyle, DEFAULT_SKILL_AGENTS, FeatureGrid, type FeatureGridItem, type FeatureGridProps, type FeatureItemType, Features, type FeaturesProps, FluidGradient, type FluidGradientProps, Giscus, type GiscusProps, GradientButton, type GradientButtonProps, GridBackground, type GridBackgroundProps, GridShowcase, type GridShowcaseProps, Hero, type HeroAction, type HeroProps, InstallBanner, type InstallBannerProps, LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, type LandingAction, LandingHero, type LandingHeroAction, type LandingHeroProps, type LandingLinkProps, type LandingLinkRender, type LandingNavigate, type LandingPalette, LandingSection, type LandingSectionProps, LogoMarquee, type LogoMarqueeItem, type LogoMarqueeProps, type SegmentMode, Spline, type SplineProps, Spotlight, SpotlightCard, type SpotlightCardProps, type SpotlightProps, TypewriterEffect, type TypewriterEffectProps, accentGradient as landingAccentGradient };
+export { AgentSkillCard, type AgentSkillCardAgent, type AgentSkillCardMode, type AgentSkillCardPanel, type AgentSkillCardProps, AuroraBackground, type AuroraBackgroundProps, BentoCard, type BentoCardProps, BentoGrid, type BentoGridProps, BottomGradientButton, type BottomGradientButtonProps, CodeShowcase, type CodeShowcaseItem, type CodeShowcaseProps, type CursorStyle, DEFAULT_SKILL_AGENTS, FeatureGrid, type FeatureGridItem, type FeatureGridProps, type FeatureItemType, Features, type FeaturesProps, FluidGradient, type FluidGradientProps, Giscus, type GiscusProps, GradientButton, type GradientButtonProps, Grainient, type GrainientProps, GridBackground, type GridBackgroundProps, GridShowcase, type GridShowcaseProps, Hero, type HeroAction, type HeroProps, InstallBanner, type InstallBannerProps, LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, type LandingAction, LandingHero, type LandingHeroAction, type LandingHeroProps, type LandingLinkProps, type LandingLinkRender, type LandingNavigate, type LandingPalette, LandingSection, type LandingSectionProps, LogoMarquee, type LogoMarqueeItem, type LogoMarqueeProps, type SegmentMode, Spline, type SplineProps, Spotlight, SpotlightCard, type SpotlightCardProps, type SpotlightProps, TypewriterEffect, type TypewriterEffectProps, accentGradient as landingAccentGradient };