@bit.rhplus/ui2.ai-button 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+export default AIButton;
+/**
+ * AI Rainbow Button - Moderní tlačítko s rotujícím duhovým prstencem
+ *
+ * @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
+ */
+declare const AIButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/dist/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import classnames from 'classnames';
+import './style.css';
+/**
+ * AI Rainbow Button - Moderní tlačítko s rotujícím duhovým prstencem
+ *
+ * @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
+ */
+const AIButton = React.forwardRef((props, ref) => {
+    const { label = 'AI', onClick, size = '110px', ring = '10px', className, ariaLabel, type = 'button', style, disabled = false, ...restProps } = props;
+    // 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: ref, className: classnames('ai-btn', className), 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';
+export default AIButton;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,aAAa,CAAC;AAErB;;;;;;;;;;;;;GAaG;AACH,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC/C,MAAM,EACJ,KAAK,GAAG,IAAI,EACZ,OAAO,EACP,IAAI,GAAG,OAAO,EACd,IAAI,GAAG,MAAM,EACb,SAAS,EACT,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,sCAAsC;IACtC,MAAM,WAAW,GAAG;QAClB,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI;QACvD,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI;QACvD,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,EAC1C,IAAI,EAAE,IAAI,gBACE,SAAS,IAAI,KAAK,EAC9B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,YAEb,cAAK,SAAS,EAAC,UAAU,YACvB,cAAK,SAAS,EAAC,UAAU,YAAE,KAAK,GAAO,GACnC,GACC,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,eAAe,QAAQ,CAAC"}

package/dist/preview-1769973842678.js

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

package/dist/style.css

@@ -0,0 +1,172 @@
+/* AI Rainbow Button - Duhové tlačítko s rotujícím prstencem */
+
+.ai-btn {
+  /* CSS proměnné - lze přepsat pomocí inline style */
+  --size: 110px;
+  --ring: 10px;
+  --bg: #ffffff;
+  --text: rgba(20, 20, 20, 0.92);
+
+  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;
+  transform: translateZ(0);
+  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;
+
+  /* Duhový conic gradient */
+  background: conic-gradient(
+    from 0deg,
+    #ff004c,
+    #ff8a00,
+    #ffe600,
+    #35ff7a,
+    #00d4ff,
+    #6a5cff,
+    #ff4fd8,
+    #ff004c
+  );
+
+  /* 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)
+  );
+
+  /* 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 */
+.ai-btn::after {
+  content: '';
+  position: absolute;
+  inset: -18px;
+  border-radius: inherit;
+  background: conic-gradient(
+    from 0deg,
+    #ff004c,
+    #ff8a00,
+    #ffe600,
+    #35ff7a,
+    #00d4ff,
+    #6a5cff,
+    #ff4fd8,
+    #ff004c
+  );
+  opacity: 0.35;
+  filter: blur(22px);
+  animation: ai-btn-spin 3.2s linear infinite, ai-btn-breathe 2.6s ease-in-out infinite;
+  transform: translateZ(0);
+  pointer-events: none;
+}
+
+.ai-btn:disabled::after {
+  animation: none;
+  opacity: 0.15;
+}
+
+/* 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: rotate(360deg);
+  }
+}
+
+/* Animace - dýchání (breathe) */
+@keyframes ai-btn-breathe {
+  0%,
+  100% {
+    opacity: 0.28;
+  }
+  50% {
+    opacity: 0.46;
+  }
+}
+
+/* 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/index.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import classnames from 'classnames';
+import './style.css';
+
+/**
+ * AI Rainbow Button - Moderní tlačítko s rotujícím duhovým prstencem
+ *
+ * @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
+ */
+const AIButton = React.forwardRef((props, ref) => {
+  const {
+    label = 'AI',
+    onClick,
+    size = '110px',
+    ring = '10px',
+    className,
+    ariaLabel,
+    type = 'button',
+    style,
+    disabled = false,
+    ...restProps
+  } = props;
+
+  // Inline CSS proměnné pro customizaci
+  const buttonStyle = {
+    '--size': typeof size === 'number' ? `${size}px` : size,
+    '--ring': typeof ring === 'number' ? `${ring}px` : ring,
+    ...style,
+  };
+
+  return (
+    <button
+      ref={ref}
+      className={classnames('ai-btn', className)}
+      type={type}
+      aria-label={ariaLabel || label}
+      onClick={onClick}
+      style={buttonStyle}
+      disabled={disabled}
+      {...restProps}
+    >
+      <div className="ai-inner">
+        <div className="ai-label">{label}</div>
+      </div>
+    </button>
+  );
+});
+
+AIButton.displayName = 'AIButton';
+
+export default AIButton;

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@bit.rhplus/ui2.ai-button",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "name": "ui2/ai-button",
+    "version": "0.0.1",
+    "scope": "remote-scope"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1"
+  },
+  "devDependencies": {
+    "@teambit/react.react-env": "1.0.132"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "license": "SEE LICENSE IN UNLICENSED",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "private": false,
+  "publishConfig": {
+    "scope": "@bit.rhplus",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/style.css

@@ -0,0 +1,172 @@
+/* AI Rainbow Button - Duhové tlačítko s rotujícím prstencem */
+
+.ai-btn {
+  /* CSS proměnné - lze přepsat pomocí inline style */
+  --size: 110px;
+  --ring: 10px;
+  --bg: #ffffff;
+  --text: rgba(20, 20, 20, 0.92);
+
+  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;
+  transform: translateZ(0);
+  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;
+
+  /* Duhový conic gradient */
+  background: conic-gradient(
+    from 0deg,
+    #ff004c,
+    #ff8a00,
+    #ffe600,
+    #35ff7a,
+    #00d4ff,
+    #6a5cff,
+    #ff4fd8,
+    #ff004c
+  );
+
+  /* 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)
+  );
+
+  /* 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 */
+.ai-btn::after {
+  content: '';
+  position: absolute;
+  inset: -18px;
+  border-radius: inherit;
+  background: conic-gradient(
+    from 0deg,
+    #ff004c,
+    #ff8a00,
+    #ffe600,
+    #35ff7a,
+    #00d4ff,
+    #6a5cff,
+    #ff4fd8,
+    #ff004c
+  );
+  opacity: 0.35;
+  filter: blur(22px);
+  animation: ai-btn-spin 3.2s linear infinite, ai-btn-breathe 2.6s ease-in-out infinite;
+  transform: translateZ(0);
+  pointer-events: none;
+}
+
+.ai-btn:disabled::after {
+  animation: none;
+  opacity: 0.15;
+}
+
+/* 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: rotate(360deg);
+  }
+}
+
+/* Animace - dýchání (breathe) */
+@keyframes ai-btn-breathe {
+  0%,
+  100% {
+    opacity: 0.28;
+  }
+  50% {
+    opacity: 0.46;
+  }
+}
+
+/* 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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,42 @@
+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;
+}