@bit.rhplus/ui2.ai-button 0.0.4 → 0.0.5

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@bit.rhplus/ui2.ai-button",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "homepage": "https://bit.cloud/remote-scope/ui2/ai-button",
   "main": "dist/index.js",
   "componentId": {
     "scope": "remote-scope",
     "name": "ui2/ai-button",
-    "version": "0.0.4"
+    "version": "0.0.5"
   },
   "dependencies": {
     "classnames": "^2.5.1"
   },
   "devDependencies": {
-    "@teambit/react.react-env": "1.3.1"
+    "@bitdev/react.react-env": "4.0.14"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -20,6 +20,7 @@
   "license": "SEE LICENSE IN UNLICENSED",
   "optionalDependencies": {},
   "peerDependenciesMeta": {},
+  "type": "module",
   "private": false,
   "publishConfig": {
     "scope": "@bit.rhplus",

package/dist/index.d.ts

@@ -1,3 +0,0 @@
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.RefAttributes<any>>>;
-export default _default;
-import React from 'react';

package/dist/index.js

@@ -1,73 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable */
-import React, { useEffect, useRef, useCallback } from 'react';
-import classnames from 'classnames';
-import './style.css';
-/**
- * AI Rainbow Button - Moderní tlačítko s rotujícím duhovým prstencem
- * OPTIMALIZOVÁNO PRO MAXIMÁLNÍ VÝKON:
- * - IntersectionObserver pro pause/resume animací
- * - Box-shadow místo blur filter
- * - GPU akcelerace a will-change hints
- * - Sloučené animace
- * - CSS containment
- *
- * @param {Object} props
- * @param {string} [props.label='AI'] - Text zobrazený na tlačítku
- * @param {Function} [props.onClick] - Handler pro kliknutí
- * @param {string|number} [props.size='110px'] - Velikost tlačítka
- * @param {string|number} [props.ring='10px'] - Tloušťka duhového prstence
- * @param {string} [props.className] - Dodatečné CSS třídy
- * @param {string} [props.ariaLabel] - Aria label pro accessibility (výchozí je hodnota label)
- * @param {string} [props.type='button'] - Typ tlačítka
- * @param {Object} [props.style] - Inline styly pro tlačítko
- * @param {boolean} [props.disabled=false] - Zakázat tlačítko
- * @param {boolean} [props.disableVisibilityOptimization=false] - Vypnout automatické pausování animací
- */
-const AIButton = React.forwardRef((props, ref) => {
-    const { label = 'AI', onClick, size = '110px', ring = '10px', className, ariaLabel, type = 'button', style, disabled = false, disableVisibilityOptimization = false, ...restProps } = props;
-    // Interní ref pro IntersectionObserver
-    const internalRef = useRef(null);
-    const [isPaused, setIsPaused] = React.useState(false);
-    // Kombinace external a internal ref
-    const setRefs = useCallback((node) => {
-        internalRef.current = node;
-        if (typeof ref === 'function') {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-    }, [ref]);
-    // IntersectionObserver - pausne animace když tlačítko není viditelné
-    useEffect(() => {
-        if (disableVisibilityOptimization || !internalRef.current)
-            return;
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                // Pausne když není viditelné nebo je mimo viewport
-                setIsPaused(!entry.isIntersecting);
-            });
-        }, {
-            threshold: 0, // Spustí se hned jak zmizí z viewportu
-            rootMargin: '50px', // Trochu bufferu
-        });
-        observer.observe(internalRef.current);
-        return () => {
-            observer.disconnect();
-        };
-    }, [disableVisibilityOptimization]);
-    // Inline CSS proměnné pro customizaci
-    const buttonStyle = {
-        '--size': typeof size === 'number' ? `${size}px` : size,
-        '--ring': typeof ring === 'number' ? `${ring}px` : ring,
-        ...style,
-    };
-    return (_jsx("button", { ref: setRefs, className: classnames('ai-btn', className, {
-            'ai-btn-paused': isPaused,
-        }), type: type, "aria-label": ariaLabel || label, onClick: onClick, style: buttonStyle, disabled: disabled, ...restProps, children: _jsx("div", { className: "ai-inner", children: _jsx("div", { className: "ai-label", children: label }) }) }));
-});
-AIButton.displayName = 'AIButton';
-// Memoizace komponenty - zabrání zbytečným re-renderům
-export default React.memo(AIButton);
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":"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"}

package/dist/preview-1773045662114.js

@@ -1,7 +0,0 @@
-;
-;
-
-export const compositions = [];
-export const overview = [];
-
-export const compositions_metadata = {"compositions":[]};

package/dist/style.css

@@ -1,202 +0,0 @@
-/* AI Rainbow Button - Duhové tlačítko s rotujícím prstencem */
-/* OPTIMALIZOVÁNO PRO MAXIMÁLNÍ VÝKON */
-
-.ai-btn {
-  /* CSS proměnné - lze přepsat pomocí inline style */
-  --size: 110px;
-  --ring: 10px;
-  --bg: #ffffff;
-  --text: rgba(20, 20, 20, 0.92);
-
-  /* Sdílený gradient - použije se vícekrát */
-  --rainbow-gradient: conic-gradient(
-    from 0deg,
-    #ff004c,
-    #ff8a00,
-    #ffe600,
-    #35ff7a,
-    #00d4ff,
-    #6a5cff,
-    #ff4fd8,
-    #ff004c
-  );
-
-  position: relative;
-  width: var(--size);
-  height: var(--size);
-  border: 0;
-  border-radius: 999px;
-  cursor: pointer;
-  background: transparent;
-  padding: 0;
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-
-  /* GPU akcelerace + containment pro izolaci */
-  transform: translateZ(0);
-  will-change: transform;
-  contain: layout style paint;
-  transition: transform 0.15s ease;
-}
-
-.ai-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-/* Duhový rotující prstenec */
-.ai-btn::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-
-  /* Použití sdíleného gradientu */
-  background: var(--rainbow-gradient);
-
-  /* Vyříznutí vnitřku => prstenec */
-  -webkit-mask: radial-gradient(
-    closest-side,
-    transparent calc(100% - var(--ring)),
-    #000 calc(100% - var(--ring) + 1px)
-  );
-  mask: radial-gradient(
-    closest-side,
-    transparent calc(100% - var(--ring)),
-    #000 calc(100% - var(--ring) + 1px)
-  );
-
-  /* GPU akcelerace pro rotaci */
-  transform: translateZ(0);
-  will-change: transform;
-
-  /* Animace "točení" barev */
-  animation: ai-btn-spin 3.2s linear infinite;
-  filter: saturate(1.15) brightness(1.05);
-}
-
-.ai-btn:disabled::before {
-  animation: none;
-  filter: saturate(0.5) brightness(0.8);
-}
-
-/* Glow aura kolem tlačítka - OPTIMALIZOVÁNO: box-shadow místo blur */
-.ai-btn::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-
-  /* Použití sdíleného gradientu */
-  background: var(--rainbow-gradient);
-
-  /* GPU akcelerace */
-  transform: translateZ(0);
-  will-change: transform, opacity;
-
-  /* Box-shadow glow místo blur filter (MNOHEM rychlejší) */
-  box-shadow: 0 0 30px 12px rgba(255, 0, 76, 0.4),
-    0 0 50px 20px rgba(255, 138, 0, 0.3), 0 0 70px 28px rgba(0, 212, 255, 0.25),
-    0 0 90px 35px rgba(106, 92, 255, 0.2);
-
-  /* Sloučená animace pro lepší výkon */
-  animation: ai-btn-glow 3.2s linear infinite;
-  opacity: 0.35;
-  pointer-events: none;
-}
-
-.ai-btn:disabled::after {
-  animation: none;
-  opacity: 0.15;
-}
-
-/* Pausnutí animací když není viditelné - řízeno IntersectionObserver */
-.ai-btn.ai-btn-paused::before,
-.ai-btn.ai-btn-paused::after {
-  animation-play-state: paused;
-}
-
-/* Vnitřek tlačítka */
-.ai-inner {
-  position: absolute;
-  inset: var(--ring);
-  border-radius: inherit;
-  background: radial-gradient(
-    120% 120% at 30% 20%,
-    rgba(255, 255, 255, 1) 0%,
-    rgba(250, 250, 250, 1) 40%,
-    rgba(240, 242, 245, 1) 80%,
-    rgba(235, 237, 240, 1) 100%
-  );
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08),
-    inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.12);
-  display: grid;
-  place-items: center;
-  user-select: none;
-}
-
-.ai-label {
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  font-size: 14px;
-  text-transform: uppercase;
-  color: var(--text);
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-/* Hover efekt */
-.ai-btn:hover:not(:disabled) {
-  transform: translateZ(0) scale(1.03);
-}
-
-/* Active (stisknuté) */
-.ai-btn:active:not(:disabled) {
-  transform: translateZ(0) scale(0.98);
-}
-
-/* Focus - accessibility */
-.ai-btn:focus-visible .ai-inner {
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
-    inset 0 -10px 30px rgba(0, 0, 0, 0.55), 0 10px 30px rgba(0, 0, 0, 0.35),
-    0 0 0 3px rgba(255, 255, 255, 0.16);
-}
-
-/* Animace - rotace */
-@keyframes ai-btn-spin {
-  to {
-    transform: translateZ(0) rotate(360deg);
-  }
-}
-
-/* Animace - sloučená glow (spin + breathe) pro lepší výkon */
-@keyframes ai-btn-glow {
-  0% {
-    transform: translateZ(0) rotate(0deg);
-    opacity: 0.28;
-  }
-  25% {
-    opacity: 0.38;
-  }
-  50% {
-    transform: translateZ(0) rotate(180deg);
-    opacity: 0.46;
-  }
-  75% {
-    opacity: 0.38;
-  }
-  100% {
-    transform: translateZ(0) rotate(360deg);
-    opacity: 0.28;
-  }
-}
-
-/* Respektovat uživatelské preference pro redukci pohybu */
-@media (prefers-reduced-motion: reduce) {
-  .ai-btn::before,
-  .ai-btn::after {
-    animation: none;
-  }
-  .ai-btn {
-    transition: none;
-  }
-}

package/types/asset.d.ts

@@ -1,43 +0,0 @@
-declare module '*.png' {
-  const value: any;
-  export = value;
-}
-declare module '*.svg' {
-  import type { FunctionComponent, SVGProps } from 'react';
-
-  export const ReactComponent: FunctionComponent<
-    SVGProps<SVGSVGElement> & { title?: string }
-  >;
-  const src: string;
-  export default src;
-}
-
-// @TODO Gilad
-declare module '*.jpg' {
-  const value: any;
-  export = value;
-}
-declare module '*.jpeg' {
-  const value: any;
-  export = value;
-}
-declare module '*.gif' {
-  const value: any;
-  export = value;
-}
-declare module '*.bmp' {
-  const value: any;
-  export = value;
-}
-declare module '*.otf' {
-  const value: any;
-  export = value;
-}
-declare module '*.woff' {
-  const value: any;
-  export = value;
-}
-declare module '*.woff2' {
-  const value: any;
-  export = value;
-}

package/types/style.d.ts

@@ -1,42 +0,0 @@
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.less' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.less' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.mdx' {
-  const component: any;
-  export default component;
-}