@kubit-ui-web/react-components 1.17.3 → 2.0.0-beta.1

package/dist/esm/components/popover/styles/keyframes.css

@@ -0,0 +1,421 @@
+/**
+ * CSS animations for popover positioning
+ * Each animation corresponds to a specific body position from positionStyles.ts
+ */
+
+/* ========================================
+   CENTER POSITION ANIMATIONS
+   ======================================== */
+
+/* Center position - scales from center */
+@keyframes popover-enter-center {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes popover-exit-center {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+}
+
+/* ========================================
+   TOP POSITION ANIMATIONS
+   ======================================== */
+
+/* Top center - slides down and fades in */
+@keyframes popover-enter-top {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@keyframes popover-exit-top {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-20px);
+  }
+}
+
+/* Top start (left) - slides down only (same as top) */
+@keyframes popover-enter-top-start {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popover-exit-top-start {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
+
+/* Top end (right) - slides down only (same as top) */
+@keyframes popover-enter-top-end {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popover-exit-top-end {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
+
+/* ========================================
+   BOTTOM POSITION ANIMATIONS
+   ======================================== */
+
+/* Bottom center - slides up and fades in */
+@keyframes popover-enter-bottom {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@keyframes popover-exit-bottom {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(20px);
+  }
+}
+
+/* Bottom start (left) - slides up only (same as bottom) */
+@keyframes popover-enter-bottom-start {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popover-exit-bottom-start {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+/* Bottom end (right) - slides up only (same as bottom) */
+@keyframes popover-enter-bottom-end {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popover-exit-bottom-end {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+/* ========================================
+   LEFT POSITION ANIMATIONS
+   ======================================== */
+
+/* Left center - slides right and fades in */
+@keyframes popover-enter-left {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+}
+
+@keyframes popover-exit-left {
+  from {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-20px);
+  }
+}
+
+/* Left start (top) - slides right only (same as left) */
+@keyframes popover-enter-left-start {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes popover-exit-left-start {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+}
+
+/* Left end (bottom) - slides right only (same as left) */
+@keyframes popover-enter-left-end {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes popover-exit-left-end {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+}
+
+/* ========================================
+   RIGHT POSITION ANIMATIONS
+   ======================================== */
+
+/* Right center - slides left and fades in */
+@keyframes popover-enter-right {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+}
+
+@keyframes popover-exit-right {
+  from {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-50%) translateX(20px);
+  }
+}
+
+/* Right start (top) - slides left only (same as right) */
+@keyframes popover-enter-right-start {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes popover-exit-right-start {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+/* Right end (bottom) - slides left only (same as right) */
+@keyframes popover-enter-right-end {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes popover-exit-right-end {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+/* ========================================
+   NOTE: No default animation needed
+   ======================================== */
+/* When no placement is specified, center animation is used as fallback */
+
+/* ========================================
+   UTILITY CLASSES FOR APPLYING ANIMATIONS
+   ======================================== */
+
+/* Animation duration and timing */
+.popover-animate {
+  animation-duration: 200ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  animation-fill-mode: forwards;
+}
+
+/* Enter animations by position */
+.popover-enter-center {
+  animation-name: popover-enter-center;
+}
+.popover-enter-top {
+  animation-name: popover-enter-top;
+}
+.popover-enter-top-start {
+  animation-name: popover-enter-top-start;
+}
+.popover-enter-top-end {
+  animation-name: popover-enter-top-end;
+}
+.popover-enter-bottom {
+  animation-name: popover-enter-bottom;
+}
+.popover-enter-bottom-start {
+  animation-name: popover-enter-bottom-start;
+}
+.popover-enter-bottom-end {
+  animation-name: popover-enter-bottom-end;
+}
+.popover-enter-left {
+  animation-name: popover-enter-left;
+}
+.popover-enter-left-start {
+  animation-name: popover-enter-left-start;
+}
+.popover-enter-left-end {
+  animation-name: popover-enter-left-end;
+}
+.popover-enter-right {
+  animation-name: popover-enter-right;
+}
+.popover-enter-right-start {
+  animation-name: popover-enter-right-start;
+}
+.popover-enter-right-end {
+  animation-name: popover-enter-right-end;
+}
+
+/* Exit animations by position */
+.popover-exit-center {
+  animation-name: popover-exit-center;
+}
+.popover-exit-top {
+  animation-name: popover-exit-top;
+}
+.popover-exit-top-start {
+  animation-name: popover-exit-top-start;
+}
+.popover-exit-top-end {
+  animation-name: popover-exit-top-end;
+}
+.popover-exit-bottom {
+  animation-name: popover-exit-bottom;
+}
+.popover-exit-bottom-start {
+  animation-name: popover-exit-bottom-start;
+}
+.popover-exit-bottom-end {
+  animation-name: popover-exit-bottom-end;
+}
+.popover-exit-left {
+  animation-name: popover-exit-left;
+}
+.popover-exit-left-start {
+  animation-name: popover-exit-left-start;
+}
+.popover-exit-left-end {
+  animation-name: popover-exit-left-end;
+}
+.popover-exit-right {
+  animation-name: popover-exit-right;
+}
+.popover-exit-right-start {
+  animation-name: popover-exit-right-start;
+}
+.popover-exit-right-end {
+  animation-name: popover-exit-right-end;
+}

package/dist/esm/components/popover/styles/popover-arrow.css

@@ -0,0 +1,42 @@
+/* ============================================= */
+/* PopoverV2 Arrow Styles */
+/* ============================================= */
+
+/* Arrow base styles */
+[data-kbt-id='popover-arrow'] {
+  position: absolute;
+  transform: rotate(45deg);
+  z-index: -1;
+}
+
+/* Arrow positioning based on placement */
+[data-kbt-id='popover-arrow'][data-kbt-placement^='top'] {
+  bottom: calc(-1 * var(--arrow-size, 8px) / 2);
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+[data-kbt-id='popover-arrow'][data-kbt-placement^='bottom'] {
+  top: calc(-1 * var(--arrow-size, 8px) / 2);
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+[data-kbt-id='popover-arrow'][data-kbt-placement^='left'] {
+  right: calc(-1 * var(--arrow-size, 8px) / 2);
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+[data-kbt-id='popover-arrow'][data-kbt-placement^='right'] {
+  left: calc(-1 * var(--arrow-size, 8px) / 2);
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+/* Center placement arrow - default to bottom position */
+[data-kbt-id='popover-arrow'][data-kbt-placement='center'] {
+  top: calc(-1 * var(--arrow-size, 8px) / 2);
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+}

package/dist/esm/components/popover/styles/popover.css

@@ -0,0 +1,189 @@
+/**
+ * PopoverV2 Main Styles
+ * Contains animation logic and positioning styles
+ */
+
+/* Import all animation keyframes */
+@import './keyframes.css';
+
+/* Popover Animation Styles */
+/* ============================================= */
+
+/* Base animation properties - ALWAYS applied (even with disableAnimations=true) */
+/* This allows additionalClasses to work properly */
+[data-kbt-id='popover'][data-kbt-placement] {
+  animation-duration: 500ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+}
+
+/* Opening animations based on placement - ONLY when animations are enabled */
+[data-kbt-id='popover'][data-kbt-closing='false']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  --animation-prefix: 'popover-enter-';
+}
+
+[data-kbt-id='popover'][data-kbt-placement='center'][data-kbt-closing='false']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-enter-center;
+}
+
+[data-kbt-id='popover'][data-kbt-placement^='top'][data-kbt-closing='false']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: var(--animation-name, popover-enter-top);
+}
+
+[data-kbt-id='popover'][data-kbt-placement='top-start'][data-kbt-closing='false']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-enter-top-start;
+}
+
+[data-kbt-id='popover'][data-kbt-placement='top-end'][data-kbt-closing='false']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-enter-top-end;
+}
+
+[data-kbt-id='popover'][data-kbt-placement^='bottom'][data-kbt-closing='false']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: var(--animation-name, popover-enter-bottom);
+}
+
+[data-kbt-id='popover'][data-kbt-placement='bottom-start'][data-kbt-closing='false']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-enter-bottom-start;
+}
+
+[data-kbt-id='popover'][data-kbt-placement='bottom-end'][data-kbt-closing='false']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-enter-bottom-end;
+}
+
+[data-kbt-id='popover'][data-kbt-placement^='left'][data-kbt-closing='false']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: var(--animation-name, popover-enter-left);
+}
+
+[data-kbt-id='popover'][data-kbt-placement='left-start'][data-kbt-closing='false']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-enter-left-start;
+}
+
+[data-kbt-id='popover'][data-kbt-placement='left-end'][data-kbt-closing='false']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-enter-left-end;
+}
+
+[data-kbt-id='popover'][data-kbt-placement^='right'][data-kbt-closing='false']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: var(--animation-name, popover-enter-right);
+}
+
+[data-kbt-id='popover'][data-kbt-placement='right-start'][data-kbt-closing='false']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-enter-right-start;
+}
+
+[data-kbt-id='popover'][data-kbt-placement='right-end'][data-kbt-closing='false']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-enter-right-end;
+}
+
+/* Closing animations based on placement - ONLY when animations are enabled */
+[data-kbt-id='popover'][data-kbt-closing='true']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  --animation-prefix: 'popover-exit-';
+}
+
+[data-kbt-id='popover'][data-kbt-placement='center'][data-kbt-closing='true']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-exit-center;
+}
+
+[data-kbt-id='popover'][data-kbt-placement^='top'][data-kbt-closing='true']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: var(--exit-animation-name, popover-exit-top);
+}
+
+[data-kbt-id='popover'][data-kbt-placement='top-start'][data-kbt-closing='true']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-exit-top-start;
+}
+
+[data-kbt-id='popover'][data-kbt-placement='top-end'][data-kbt-closing='true']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-exit-top-end;
+}
+
+[data-kbt-id='popover'][data-kbt-placement^='bottom'][data-kbt-closing='true']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: var(--exit-animation-name, popover-exit-bottom);
+}
+
+[data-kbt-id='popover'][data-kbt-placement='bottom-start'][data-kbt-closing='true']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-exit-bottom-start;
+}
+
+[data-kbt-id='popover'][data-kbt-placement='bottom-end'][data-kbt-closing='true']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-exit-bottom-end;
+}
+
+[data-kbt-id='popover'][data-kbt-placement^='left'][data-kbt-closing='true']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: var(--exit-animation-name, popover-exit-left);
+}
+
+[data-kbt-id='popover'][data-kbt-placement='left-start'][data-kbt-closing='true']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-exit-left-start;
+}
+
+[data-kbt-id='popover'][data-kbt-placement='left-end'][data-kbt-closing='true']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-exit-left-end;
+}
+
+[data-kbt-id='popover'][data-kbt-placement^='right'][data-kbt-closing='true']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: var(--exit-animation-name, popover-exit-right);
+}
+
+[data-kbt-id='popover'][data-kbt-placement='right-start'][data-kbt-closing='true']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-exit-right-start;
+}
+
+[data-kbt-id='popover'][data-kbt-placement='right-end'][data-kbt-closing='true']:not(
+    [data-kbt-disable-animations='true']
+  ) {
+  animation-name: popover-exit-right-end;
+}

package/dist/esm/components/popover/types/animation.js

@@ -0,0 +1 @@
+const e="center";export{e as DEFAULT_PLACEMENT};

package/dist/esm/components/popover/utils/placement.utils.js

@@ -0,0 +1 @@
+import{DEFAULT_PLACEMENT as t}from"../types/animation.js";const o=o=>o?o.startsWith("top")?"top":o.startsWith("bottom")?"bottom":o.startsWith("left")?"left":o.startsWith("right")?"right":t:t;export{o as getPlacementDirection};

package/dist/esm/components/popover/utils/styling.utils.js

@@ -0,0 +1 @@
+import{getPlacementDirection as r}from"./placement.utils.js";const o={bottom:r=>({borderLeft:r,borderTop:r}),left:r=>({borderRight:r,borderTop:r}),right:r=>({borderBottom:r,borderLeft:r}),top:r=>({borderBottom:r,borderRight:r})},t=(t,e)=>{if(!e)return{};const b={"--arrow-size":`${e.size}px`,backgroundColor:e.backgroundColor,height:`${e.size}px`,width:`${e.size}px`};if(e.border){const i=r(t),d=o[i];d&&Object.assign(b,d(e.border))}return b};export{t as getArrowBorderStyles};

package/dist/esm/components/portal/index.js

@@ -0,0 +1 @@
+export {  Portal  } from './portal.js';

package/dist/esm/components/portal/portal.js

@@ -0,0 +1 @@
+import{createPortal as e}from"react-dom";const t=({children:t,wrapperId:d})=>{let r=document.body;return d&&(r=document.getElementById(d),r||(r=(e=>{const t=document.createElement("div");return t.setAttribute("id",e),document.body.appendChild(t),t})(d))),e(t,r)};export{t as Portal};

package/dist/esm/components/progressBar/index.js

@@ -0,0 +1 @@
+export {  ProgressBar  } from './progressBar.js';

package/dist/esm/components/progressBar/progressBar.js

@@ -0,0 +1,2 @@
+import{j as s}from"../../_virtual/jsx-runtime.js";import{forwardRef as a}from"react";import{useClassName as e}from"../../lib/hooks/useClassName/useClassName.js";import{ProgressBarStandalone as r}from"./progressBarStandAlone.js";const t=a(({additionalSizeClasses:a,additionalVariantClasses:t,percentProgressCompleted:o,size:i,variant:n,...m},l)=>{const p=e({additionalClassNames:t,component:"PROGRESS_BAR",variant:n}),d=e({additionalClassNames:a,component:"PROGRESS_BAR",variant:i}),C=o?Math.min(Math.max(o,0),100):0;/* @__PURE__ */
+return s.jsx(r,{...m,ref:l,cssSizeClasses:d,cssVariantClasses:p,progressCompleted:C})});export{t as ProgressBar};

package/dist/esm/components/progressBar/progressBarStandAlone.js

@@ -0,0 +1,4 @@
+import{j as r}from"../../_virtual/jsx-runtime.js";import{forwardRef as s}from"react";import{classNames as a}from"../../lib/utils/classNames/classNames.js";import{Slider as e}from"../slider/slider.js";const o=s(({barAriaLabel:s,color:o,cssSizeClasses:t,cssVariantClasses:i,onChange:n,onDragEnd:l,onDragStart:d,progressAnimation:m,progressCompleted:c,tooltip:g,useAsSlider:p=!1,...b},u)=>{const j=b["data-testid"]||"progress-bar",x={backgroundColor:o?.bar},C={backgroundColor:o?.progressBar,transition:`width ${m?.duration} ${m?.timingFunction}`,width:`${c}%`};/* @__PURE__ */
+return r.jsx("div",{ref:u,className:i?.progress_bar,"data-testid":`${j}-progressbar`,children:/* @__PURE__ */r.jsx("div",{className:i?.barcontainer,children:p?/* @__PURE__ */r.jsx(e,{additionalClasses:i?.slider,ariaLabel:s,max:1e3,min:0,tooltip:g,type:"continuous",value:10*c,onChange:r=>{n&&!Array.isArray(r)&&n(r/10)},onDragEnd:l,onDragStart:d}):/* @__PURE__ */r.jsxs(r.Fragment,{children:[
+/* @__PURE__ */r.jsx("div",{className:a(t?.bar,i?.bar),"data-testid":j,style:x}),
+/* @__PURE__ */r.jsx("div",{className:a(t?.progressbar,i?.progressbar),style:C})]})})})});export{o as ProgressBarStandalone};

package/dist/esm/components/radioButton/index.js

@@ -0,0 +1,2 @@
+export {  RadioButton  } from './radioButton.js';
+export {  RadioButtonStandAlone  } from './radioButtonStandAlone.js';

package/dist/esm/components/radioButton/radioButton.js

@@ -0,0 +1,2 @@
+import{j as s}from"../../_virtual/jsx-runtime.js";import{useClassName as a}from"../../lib/hooks/useClassName/useClassName.js";import{RadioButtonStandAlone as t}from"./radioButtonStandAlone.js";import{getState as e}from"./utils/state.utils.js";const o=({additionalClasses:o,checked:r=!1,cssClasses:i,disabled:l=!1,error:m=!1,variant:n,...d})=>{const c=a({additionalClassNames:o,component:"RADIO_BUTTON",variant:n}),u=e(r,l,m);/* @__PURE__ */
+return s.jsx(t,{cssClasses:i??c,state:u,...d,checked:r,disabled:l,error:m})};export{o as RadioButton};