@vellira-ui/react 2.19.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Roman Bakurov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,94 @@
+# @vellira-ui/react
+
+React component package for Vellira.
+
+This package contains the web implementation of the design system. It extends shared contracts from `@vellira-ui/types`, uses shared tokens from `@vellira-ui/tokens`, and keeps DOM, CSS, accessibility ids, and browser events inside the web layer.
+
+## Components
+
+- Button
+- Checkbox
+- Input
+- FormField
+- RadioGroup
+- Select
+- Dropdown
+- Tabs
+- Tooltip
+- Modal
+
+Each public component has Storybook coverage and Vitest unit coverage.
+
+For detailed props, shared types, examples, and compound component APIs, see
+[Web Component API](./API.md).
+
+## Installation
+
+```bash
+pnpm add @vellira-ui/react
+```
+
+If consuming from GitHub Packages, configure the scope registry:
+
+```bash
+@romanbakurov:registry=https://npm.pkg.github.com
+```
+
+## Usage
+
+Import the stylesheet once in your app entry point:
+
+```tsx
+import '@vellira-ui/react/styles';
+```
+
+Then use the components:
+
+```tsx
+import { Button, Checkbox, Input } from '@vellira-ui/react';
+import { useState } from 'react';
+
+export function Example() {
+  const [email, setEmail] = useState('');
+
+  return (
+    <form>
+      <Input
+        label='Email'
+        value={email}
+        onChange={setEmail}
+        placeholder='name@example.com'
+      />
+      <Checkbox label='Accept terms' />
+      <Button variant='primary'>Submit</Button>
+    </form>
+  );
+}
+```
+
+## Testing
+
+Run only web tests:
+
+```bash
+pnpm --filter @vellira-ui/react test
+```
+
+The web package uses Vitest with `jsdom`. Tests live next to components as `*.test.tsx` and use a small local render helper based on `react-dom/client`.
+
+## Storybook
+
+Run web Storybook from the workspace root:
+
+```bash
+pnpm --filter @vellira-ui/react-storybook dev
+```
+
+Stories live next to components as `*.stories.tsx` and are also used for Chromatic visual review.
+
+## Development
+
+```bash
+pnpm --filter @vellira-ui/react build
+pnpm --filter @vellira-ui/react test
+```

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("react"),l=require("clsx");l=s(l,1);let u=require("react-dom"),d=require("react/jsx-runtime"),f=require("@floating-ui/react"),p=require("@vellira-ui/core"),m=require("@vellira-ui/icons"),h=require("focus-trap-react");h=s(h,1);var g=(...e)=>(0,l.default)(e),_=({children:e})=>{let[t,n]=(0,c.useState)(!1);if((0,c.useEffect)(()=>{n(!0)},[]),!t)return null;let r=document.getElementById(`overlay-root`)??document.body;return r?(0,u.createPortal)(e,r):null},v={dropdown:`_dropdown_6pgxt_1`,dropdownIn:`_dropdownIn_6pgxt_1`},y=(0,c.forwardRef)(({children:e,floatingStyles:t,menuId:n,labelledById:r,label:i,activeDescendantId:a,onKeyDown:o,className:s},c)=>(0,d.jsx)(_,{children:(0,d.jsx)(`ul`,{ref:c,id:n,role:`menu`,tabIndex:-1,"aria-labelledby":r,"aria-label":r?void 0:i,"aria-activedescendant":a,onKeyDown:o,style:t,className:g(v.dropdown,s),children:e})}));y.displayName=`DropdownContent`;var b=e=>{let[t,n]=(0,c.useState)(()=>typeof window>`u`||typeof window.matchMedia!=`function`||!e?!1:window.matchMedia(`(max-width: ${e}px)`).matches);return(0,c.useEffect)(()=>{if(typeof window>`u`||typeof window.matchMedia!=`function`||!e)return;let t=window.matchMedia(`(max-width: ${e}px)`),r=()=>n(t.matches);return r(),t.addEventListener(`change`,r),()=>{t.removeEventListener(`change`,r)}},[e]),t},x=({open:e,onOpenChange:t,placement:n=`bottom-start`,strategy:r=`fixed`,matchTriggerWidth:i=!1,mobileSheetBreakpoint:a,middleware:o=[]}={})=>{let s=b(a),{refs:l,floatingStyles:u,update:d,context:p,middlewareData:m,placement:h}=(0,f.useFloating)({open:e,onOpenChange:t,placement:n,strategy:r,transform:!1,middleware:(0,c.useMemo)(()=>[(0,f.offset)(6),(0,f.flip)(),(0,f.size)({apply({rects:e,elements:t}){!i||s||Object.assign(t.floating.style,{width:`${e.reference.width}px`})}}),(0,f.shift)({padding:8}),...o],[o,s,i]),whileElementsMounted:f.autoUpdate});return(0,c.useEffect)(()=>{s&&l.floating.current?.style.removeProperty(`width`)},[s,l.floating]),{context:p,placement:h,middlewareData:m,floatingStyles:s?{}:u,isMobileSheet:s,setRef:l.setReference,setFloatingRef:l.setFloating,updatePosition:d}},S=(e,t,n=!0)=>{let r=(0,c.useRef)(e);r.current=e;let i=(0,c.useRef)(t);i.current=t,(0,c.useEffect)(()=>{if(!n)return;let e=e=>{let t=e.target;r.current.every(e=>e.current&&!e.current.contains(t))&&i.current()};return document.addEventListener(`pointerdown`,e),()=>document.removeEventListener(`pointerdown`,e)},[n])},C={group:`_group_1yomt_1`},w=({label:e})=>(0,d.jsx)(`li`,{role:`presentation`,className:C.group,children:e}),T={item:`_item_t87eq_1`,disabled:`_disabled_t87eq_18`,active:`_active_t87eq_28`,danger:`_danger_t87eq_37`,itemIcon:`_itemIcon_t87eq_61`,itemShortcut:`_itemShortcut_t87eq_62`,itemText:`_itemText_t87eq_68`,"itemText--truncate":`_itemText--truncate_t87eq_74`,"itemText--wrap":`_itemText--wrap_t87eq_79`,"itemText--nowrap":`_itemText--nowrap_t87eq_83`},E=({id:e,children:t,label:n,icon:r,danger:i,disabled:a,active:o,onClick:s,onMouseEnter:c,shortcut:l,textWrap:u=`truncate`,className:f})=>{let p=t||n;return(0,d.jsxs)(`li`,{id:e,role:`menuitem`,tabIndex:-1,"aria-disabled":a||void 0,"data-active":o||void 0,"data-danger":i||void 0,onClick:a?void 0:s,onMouseEnter:a?void 0:c,className:g(T.item,{[T.active]:o,[T.disabled]:a,[T.danger]:i},f),children:[r&&(0,d.jsx)(`span`,{"aria-hidden":`true`,className:T.itemIcon,children:r}),p&&(0,d.jsx)(`span`,{className:g(T.itemText,T[`itemText--${u}`]),children:p}),l&&(0,d.jsx)(`span`,{className:T.itemShortcut,children:l})]})},D={group:`_group_ts4nb_1`},O=()=>(0,d.jsx)(`li`,{role:`separator`,className:D.separator,"aria-hidden":`true`}),k={button:`_button_ii6sx_1`,disabled:`_disabled_ii6sx_16`,iconLeft:`_iconLeft_ii6sx_27`,arrow:`_arrow_ii6sx_39`,iconOnly:`_iconOnly_ii6sx_42`,open:`_open_ii6sx_75`},A=(0,c.forwardRef)(({children:e,isOpen:t,icon:n,arrowIcon:r,showArrow:i=!0,rotateAngle:a=90,label:o,className:s,...c},l)=>{let u=!!n,f=!!e,p=u&&!f,h=i&&f,_=r??(0,d.jsx)(m.ChevronDown,{}),v=p?o??`Open menu`:void 0;return(0,d.jsxs)(`button`,{...c,ref:l,type:`button`,className:g(k.button,{[k.disabled]:c.disabled,[k.iconOnly]:p},s),"aria-label":v,"aria-expanded":t,"aria-haspopup":`menu`,style:{"--dropdown-rotate-angle":`${a}deg`},children:[u&&(0,d.jsx)(`span`,{"aria-hidden":`true`,className:k.iconLeft,children:n}),e,h&&(0,d.jsx)(`span`,{"aria-hidden":`true`,className:g(k.arrow,{[k.open]:t}),children:_})]})});A.displayName=`DropdownTrigger`;var ee=e=>e.type!==`group`&&e.type!==`separator`,te=e=>e.type===`group`,j=e=>e.type===`separator`,ne={wrapper:`_wrapper_14ue8_1`},M=({label:e,icon:t,trigger:n,items:r,onSelect:i,className:a,disabled:o,rotateAngle:s=90,placement:l,matchTriggerWidth:u,textWrap:f,showArrow:m=!0,arrowIcon:h})=>{let[_,v]=(0,c.useState)(!1),[b,C]=(0,c.useState)(-1),T=(0,c.useRef)(null),D=(0,c.useRef)(null),k=(0,c.useId)(),M=`${k}-trigger`,{floatingStyles:N,setRef:P,setFloatingRef:re}=x({placement:l,matchTriggerWidth:u,mobileSheetBreakpoint:640}),F=r.filter(ee),I=_&&b>=0?`${k}-item-${b}`:void 0,L=()=>F.findIndex(e=>!e.disabled),R=()=>{o||v(e=>{let t=!e;return C(t?L():-1),t})},z=()=>{v(!1),C(-1)},B=()=>{z(),T.current?.focus()},{onKeyDown:V}=(0,p.useKeyboardNavigation)({activeIndex:b,setActiveIndex:C,items:F,isOpen:_,onOpen:R,onSelect:()=>{let e=F[b];!e||e.disabled||(i?.(e.value),B())},onClose:B});S([T,D],()=>z(),_);let ie=e=>{T.current=e,P(e)},H=e=>{D.current=e,re(e),e?.focus()};return(0,d.jsxs)(`div`,{className:g(ne.wrapper,a),children:[(0,d.jsx)(A,{ref:ie,id:M,isOpen:_,disabled:o,icon:t,label:e,showArrow:m,arrowIcon:h,rotateAngle:s,onClick:R,onKeyDown:V,"aria-expanded":_,"aria-haspopup":`menu`,..._&&{"aria-controls":k},children:n}),_&&(0,d.jsx)(y,{ref:H,floatingStyles:N,menuId:k,labelledById:n?M:void 0,label:n?void 0:e,activeDescendantId:I,onKeyDown:V,children:r.map((e,t)=>{if(te(e))return(0,d.jsx)(w,{label:e.label},`group-${e.label}`);if(j(e))return(0,d.jsx)(O,{},`separator-${t}`);if(ee(e)){let t=F.findIndex(t=>t===e);return(0,d.jsx)(E,{id:`${k}-item-${t}`,...e,active:b===t,textWrap:e.textWrap||f,onClick:()=>{e.disabled||(i?.(e.value),B())},onMouseEnter:()=>{t<0||e.disabled||C(t)},children:e.label},e.value)}})})]})},N=(0,c.createContext)(void 0),P=()=>{let e=(0,c.useContext)(N);if(e===void 0)throw Error(`Modal compound components must be used inside Modal`);return e};N.displayName=`ModalContext`;var re={modalBody:`_modalBody_iv33a_1`},F=({children:e})=>{let{descriptionId:t}=P();return(0,d.jsx)(`div`,{id:t,className:re.modalBody,children:e})};F.displayName=`ModalBody`;var I={content:`_content_avpai_1`},L=({children:e})=>(0,d.jsx)(`div`,{className:I.content,children:e});L.displayName=`ModalContent`;var R={modalFooter:`_modalFooter_ezys6_1`},z=({children:e})=>(0,d.jsx)(`div`,{className:R.modalFooter,children:e});z.displayName=`ModalFooter`;var B={modalHeader:`_modalHeader_155d7_1`,modalHeaderTitle:`_modalHeaderTitle_155d7_8`,modalHeaderCloseButton:`_modalHeaderCloseButton_155d7_15`},V=({children:e})=>{let{onClose:t,titleId:n}=P();return(0,d.jsxs)(`div`,{className:B.modalHeader,children:[(0,d.jsx)(`h2`,{id:n,className:B.modalHeaderTitle,children:e}),t&&(0,d.jsx)(`button`,{type:`button`,className:B.modalHeaderCloseButton,onClick:t,"aria-label":`Close modal`,children:(0,d.jsx)(m.Close,{size:16})})]})};V.displayName=`ModalHeader`;var ie=({isOpen:e,onClose:t})=>{let n=(0,c.useCallback)(n=>{e&&n.key===`Escape`&&(n.preventDefault(),t?.())},[e,t]);(0,c.useEffect)(()=>(document.addEventListener(`keydown`,n),()=>document.removeEventListener(`keydown`,n)),[n])},H={overlay:`_overlay_1xotg_1`,"overlay--open":`_overlay--open_1xotg_13`,"overlay--animated":`_overlay--animated_1xotg_17`,modal:`_modal_1xotg_21`},U=0,ae=``,oe=({children:e,onClose:t,isOpen:n,className:r,closeOnBackdrop:i,closeOnClick:a,closeOnEsc:o=!0,zIndex:s=1e3,animated:l=!0})=>{let u=i??a??!0,f=(0,c.useRef)(null),{titleId:p,descriptionId:m}=P(),v=(0,c.useCallback)(e=>{u&&e.target===e.currentTarget&&t?.()},[u,t]);return ie({isOpen:n,onClose:o?t:void 0}),(0,c.useEffect)(()=>{if(n)return U===0&&(ae=document.body.style.overflow),U+=1,document.body.style.overflow=`hidden`,()=>{U=Math.max(0,U-1),U===0&&(document.body.style.overflow=ae)}},[n]),!n&&!l?null:(0,d.jsx)(_,{children:(0,d.jsx)(`div`,{className:g(H.overlay,n&&H[`overlay--open`],l&&H[`overlay--animated`],r),onClick:v,tabIndex:-1,role:`presentation`,"aria-hidden":!n,style:{zIndex:s},children:(0,d.jsx)(h.default,{active:n,focusTrapOptions:{fallbackFocus:()=>f.current,returnFocusOnDeactivate:!0,allowOutsideClick:!0},children:(0,d.jsx)(`div`,{ref:f,tabIndex:-1,className:H.modal,role:`dialog`,"aria-modal":`true`,"aria-labelledby":p,"aria-describedby":m,children:e})})})})};oe.displayName=`ModalOverlay`;var se=({isOpen:e,children:t,onClose:n,closeOnBackdrop:r,closeOnClick:i,closeOnEsc:a=!0})=>{let o=(0,c.useId)(),s=(0,c.useId)();return e?(0,d.jsx)(N.Provider,{value:{onClose:n,titleId:o,descriptionId:s},children:(0,d.jsx)(oe,{isOpen:e,onClose:n,closeOnBackdrop:r??i,closeOnEsc:a,children:(0,d.jsx)(L,{children:t})})}):null};se.displayName=`Modal`;var ce=Object.assign(se,{Header:V,Body:F,Content:L,Footer:z}),W={wrapper:`_wrapper_14t1p_1`,label:`_label_14t1p_9`,required:`_required_14t1p_20`,description:`_description_14t1p_25`,control:`_control_14t1p_32`,errorText:`_errorText_14t1p_38`,disabled:`_disabled_14t1p_45`},G=({id:e,label:t,description:n,error:r,required:i=!1,disabled:a=!1,children:o,className:s})=>{let l=(0,c.useId)(),u=e??l,f=n?`${u}-description`:void 0,p=r?`${u}-error`:void 0;return(0,d.jsxs)(`div`,{className:g(W.wrapper,{[W.disabled]:a},s),"data-disabled":a||void 0,"data-invalid":!!r||void 0,children:[t&&(0,d.jsxs)(`label`,{className:W.label,htmlFor:u,children:[t,i&&(0,d.jsx)(`span`,{className:W.required,"aria-hidden":`true`,children:`*`})]}),n&&(0,d.jsx)(`span`,{className:W.description,id:f,children:n}),(0,d.jsx)(`div`,{className:W.control,children:o}),r&&(0,d.jsx)(`span`,{className:W.errorText,id:p,role:`alert`,children:r})]})},K={group:`_group_rncsx_1`,vertical:`_vertical_rncsx_7`,horizontal:`_horizontal_rncsx_11`,option:`_option_rncsx_16`,disabled:`_disabled_rncsx_27`,customRadio:`_customRadio_rncsx_30`,input:`_input_rncsx_35`,label:`_label_rncsx_86`},le=({label:e,description:t,value:n,defaultValue:r,onChange:i,options:a,name:o,required:s=!1,disabled:l=!1,error:u,className:f,orientation:m=`vertical`})=>{let h=(0,c.useId)(),_=`${h}-group`,v=[t?`${h}-description`:void 0,u?`${h}-error`:void 0].filter(Boolean).join(` `)||void 0,[y,b]=(0,p.useControllableState)({value:n,defaultValue:r??``,onChange:i});return(0,d.jsx)(G,{id:h,label:e,description:t,required:s,disabled:l,error:u,children:(0,d.jsx)(`div`,{id:_,className:g(K.group,K[m],f),role:`radiogroup`,"aria-required":s||void 0,"aria-invalid":!!u||void 0,"aria-describedby":v,children:a.map(e=>{let t=`${h}-${e.value}`,n=l||e.disabled;return(0,d.jsxs)(`label`,{htmlFor:t,className:g(K.option,{[K.disabled]:n}),children:[(0,d.jsx)(`input`,{id:t,type:`radio`,name:o,value:e.value,checked:y===e.value,required:s,disabled:n,onChange:()=>{n||b(e.value)},className:K.input}),(0,d.jsx)(`span`,{className:K.customRadio,"aria-hidden":`true`}),(0,d.jsx)(`span`,{className:K.label,children:e.label})]},e.value)})})})};le.displayName=`RadioGroup`;var q={option:`_option_1qm3g_1`,selected:`_selected_1qm3g_10`,disabled:`_disabled_1qm3g_10`,active:`_active_1qm3g_21`},ue=({option:e,isSelected:t,isActive:n,optionId:r,onSelect:i,onMouseEnter:a})=>{let o=!!e.disabled;return(0,d.jsx)(`li`,{id:r,role:`option`,"aria-selected":t,"aria-disabled":o||void 0,className:g(q.option,{[q.selected]:t,[q.active]:n,[q.disabled]:o}),onClick:()=>{o||i(e.value)},onMouseEnter:()=>{o||a()},children:e.label})};ue.displayName=`SelectOption`;var de={dropdown:`_dropdown_1vrjb_1`,dropdownIn:`_dropdownIn_1vrjb_1`},fe=({isOpen:e,listboxId:t,labelledById:n,setDropdownRef:r,style:i,options:a,selectedValue:o,activeIndex:s,onSelect:c,onMouseEnter:l})=>e?(0,d.jsx)(_,{children:(0,d.jsx)(`ul`,{ref:r,id:t,role:`listbox`,"aria-labelledby":n,className:de.dropdown,style:i,children:a.map((e,n)=>(0,d.jsx)(ue,{option:e,isSelected:e.value===o,isActive:n===s,optionId:`${t}-option-${n}`,onSelect:c,onMouseEnter:()=>l(n)},e.value))})}):null;fe.displayName=`SelectDropdown`;var J={control:`_control_mmsxg_1`,disabled:`_disabled_mmsxg_19`,arrow:`_arrow_mmsxg_24`,value:`_value_mmsxg_34`,placeholder:`_placeholder_mmsxg_42`,error:`_error_mmsxg_46`,open:`_open_mmsxg_87`},pe=({id:e,errorId:t,isOpen:n,disabled:r,required:i,listboxId:a,activeIndex:o,ariaLabel:s,error:c,displayText:l,isPlaceholder:u,buttonRef:f,onClick:p,onKeyDown:h})=>(0,d.jsxs)(`button`,{id:e,ref:f,type:`button`,role:`combobox`,disabled:r,"aria-disabled":r||void 0,"aria-required":i||void 0,"aria-expanded":n,"aria-haspopup":`listbox`,"aria-label":s,"aria-controls":n?a:void 0,"aria-describedby":t,"aria-activedescendant":n&&o>=0?`${a}-option-${o}`:void 0,className:g(J.control,{[J.error]:!!c,[J.disabled]:r}),onClick:p,onKeyDown:h,children:[(0,d.jsx)(`span`,{className:g(J.value,{[J.placeholder]:u}),children:l}),(0,d.jsx)(`span`,{className:g(J.arrow,{[J.open]:n}),"aria-hidden":`true`,children:(0,d.jsx)(m.ChevronDown,{})})]});pe.displayName=`SelectTrigger`;var me=({label:e,description:t,id:n,name:r,value:i,defaultValue:a,onChange:o,options:s,placeholder:l=`Select...`,required:u=!1,disabled:f=!1,error:m,className:h})=>{let g=(0,c.useId)(),_=n??g,v=`${_}-listbox`,y=m?`${_}-error`:void 0,b=(0,c.useRef)(null),C=(0,c.useRef)(null),[w,T]=(0,p.useControllableState)({value:i,defaultValue:a??``,onChange:o}),[E,D]=(0,c.useState)(!1),[O,k]=(0,c.useState)(-1),A=(0,c.useMemo)(()=>s.find(e=>e.value===w),[s,w]),ee=!!A,{floatingStyles:te,setRef:j,setFloatingRef:ne}=x({open:E,matchTriggerWidth:!0,mobileSheetBreakpoint:640}),M=(0,c.useCallback)(()=>{let e=s.findIndex(e=>e.value===w&&!e.disabled);return e>=0?e:s.findIndex(e=>!e.disabled)},[s,w]),N=(0,c.useCallback)(()=>{f||(k(M()),D(!0))},[f,M]),P=(0,c.useCallback)(()=>{D(!1)},[]),re=(0,c.useCallback)(()=>{if(!f){if(E){P();return}N()}},[P,f,E,N]),F=(0,c.useCallback)(e=>{T(e),P(),b.current?.focus()},[P,T]),{onKeyDown:I}=(0,p.useKeyboardNavigation)({activeIndex:O,setActiveIndex:k,items:s,isOpen:E,onOpen:N,onClose:P,onSelect:()=>{let e=s[O];!e||e.disabled||F(e.value)}});S([b,C],P,E);let L=(0,c.useCallback)(e=>{b.current=e,j(e)},[j]),R=(0,c.useCallback)(e=>{C.current=e,ne(e)},[ne]);return(0,d.jsxs)(G,{id:_,label:e,description:t,error:m,required:u,disabled:f,className:h,children:[(0,d.jsx)(pe,{id:_,errorId:y,isOpen:E,disabled:f,required:u,listboxId:v,activeIndex:O,ariaLabel:e?void 0:A?.label||l,error:m,displayText:A?.label??l,isPlaceholder:!ee,buttonRef:L,onClick:re,onKeyDown:I}),r&&(0,d.jsx)(`input`,{type:`hidden`,name:r,value:w,disabled:f}),(0,d.jsx)(fe,{isOpen:E,listboxId:v,labelledById:_,style:te,options:s,selectedValue:w,activeIndex:O,setDropdownRef:R,onSelect:F,onMouseEnter:k})]})};me.displayName=`Select`;var he=(0,c.createContext)(null),ge=()=>{let e=(0,c.useContext)(he);if(!e)throw Error(`Tabs components must be used inside Tabs`);return e},Y={list:`_list_astty_1`,vertical:`_vertical_astty_8`},_e=({children:e,className:t,...n})=>{let{orientation:r,appearance:i}=ge();return(0,d.jsx)(`div`,{...n,role:`tablist`,"aria-orientation":r,className:g(Y.list,r===`vertical`&&Y.vertical,i===`underline`&&Y.underline,i===`pills`&&Y.pills,t),children:e})};_e.displayName=`TabsList`;var ve={panel:`_panel_1e9ds_1`,visible:`_visible_1e9ds_10`,vertical:`_vertical_1e9ds_15`},ye=({index:e,children:t,className:n})=>{let{activeIndex:r,orientation:i}=ge(),[a,o]=(0,c.useState)(!1),s=r===e;return(0,c.useEffect)(()=>{if(!s){o(!1);return}let e=setTimeout(()=>o(!0),10);return()=>clearTimeout(e)},[s]),(0,d.jsx)(`div`,{role:`tabpanel`,id:`tab-panel-${e}`,"aria-labelledby":`tab-${e}`,hidden:!s,tabIndex:0,className:g(ve.panel,a&&ve.visible,i===`vertical`&&ve.vertical,n),children:t})};ye.displayName=`TabsPanel`;var X={tab:`_tab_160gh_1`,iconOnly:`_iconOnly_160gh_19`,tabIcon:`_tabIcon_160gh_27`,label:`_label_160gh_41`,default:`_default_160gh_46`,underline:`_underline_160gh_53`,pills:`_pills_160gh_81`,vertical:`_vertical_160gh_93`},be=(0,c.forwardRef)(({index:e,children:t,className:n,disabled:r=!1,icon:i,onClick:a,onKeyDown:o,...s},l)=>{let{activeIndex:u,setActiveIndex:f,orientation:p,appearance:m=`default`,registerTab:h,onTabKeyDown:_}=ge(),v=u===e,y=!!i,b=y&&t==null;return(0,d.jsxs)(`button`,{type:`button`,ref:(0,c.useCallback)(t=>{h(e,t),typeof l==`function`?l(t):l&&(l.current=t)},[h,e,l]),role:`tab`,"aria-selected":v,"aria-controls":`tab-panel-${e}`,id:`tab-${e}`,disabled:r,tabIndex:v?0:-1,className:g(X.tab,X[m],p===`vertical`&&X.vertical,y&&X.withIcon,b&&X.iconOnly,n),onClick:t=>{r||(f(e),a?.(t))},onKeyDown:e=>{_(e),o?.(e)},...s,children:[y&&(0,d.jsx)(`span`,{className:X.tabIcon,"aria-hidden":`true`,children:i}),t!=null&&(0,d.jsx)(`span`,{className:X.label,children:t})]})});be.displayName=`Tab`;var xe={tabs:`_tabs_15a7w_1`,vertical:`_vertical_15a7w_4`},Se=({children:e,activeIndex:t,defaultActiveIndex:n=0,onChange:r,orientation:i=`horizontal`,appearance:a=`default`,className:o})=>{let[s,l]=(0,c.useState)(n),u=t!==void 0,f=u?t:s,m=(0,c.useCallback)(e=>{u||l(e),r?.(e)},[u,r]),h=(0,c.useRef)([]),_=(0,c.useCallback)((e,t)=>{h.current[e]=t},[]),{onKeyDown:v}=(0,p.useTabsKeyboard)({activeIndex:f,setActiveIndex:m,tabRefs:h,orientation:i}),y={activeIndex:f,setActiveIndex:m,orientation:i,appearance:a,registerTab:_,onTabKeyDown:v};return(0,d.jsx)(he.Provider,{value:y,children:(0,d.jsx)(`div`,{className:g(xe.tabs,i===`vertical`&&xe.vertical,o),children:e})})};Se.displayName=`Tabs`;var Ce=Object.assign(Se,{List:_e,Tab:be,Panel:ye}),we={tooltip:`_tooltip_frlq7_1`,arrow:`_arrow_frlq7_22`},Te=(0,c.forwardRef)(({content:e,placement:t=`top`,arrowRef:n,arrowX:r,arrowY:i,className:a,style:o,...s},c)=>{let l={top:`bottom`,right:`left`,bottom:`top`,left:`right`}[t.split(`-`)[0]],u={position:`absolute`,pointerEvents:`none`,left:r==null?``:`${r}px`,top:i==null?``:`${i}px`,[l]:`-5px`};return(0,d.jsxs)(`div`,{ref:c,className:g(we.tooltip,a),"data-placement":t,"data-state":`open`,style:o,...s,children:[e,(0,d.jsx)(`div`,{ref:n,className:we.arrow,style:u})]})});Te.displayName=`TooltipContent`;var Ee=({children:e,placement:t=`top`,content:n,disabled:r=!1,delay:i={open:300,close:100},maxWidth:a=250,className:o,onOpenChange:s})=>{let[l,u]=(0,c.useState)(!1),p=(0,c.useRef)(null),m=(0,c.useId)(),{context:h,floatingStyles:g,middlewareData:_,setRef:v,setFloatingRef:y,placement:b}=x({open:l,onOpenChange:e=>{r||(u(e),s?.(e))},placement:t,middleware:[(0,f.arrow)({element:p})]}),S=_.arrow?.x,C=_.arrow?.y,{getReferenceProps:w,getFloatingProps:T}=(0,f.useInteractions)([(0,f.useHover)(h,{delay:{open:i.open,close:i.close}}),(0,f.useFocus)(h)]);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(`div`,{ref:v,style:{display:`inline-flex`},"aria-describedby":l?m:void 0,...w(),children:e}),(0,d.jsx)(f.FloatingPortal,{children:l&&n&&(0,d.jsx)(Te,{id:m,ref:y,content:n,arrowRef:p,arrowX:S,arrowY:C,role:`tooltip`,style:{...g,maxWidth:typeof a==`number`?`${a}px`:a},placement:b,className:o,...T()})})]})};Ee.displayName=`Tooltip`;var Z={button:`_button_1nc1z_1`,primary:`_primary_1nc1z_22`,secondary:`_secondary_1nc1z_38`,danger:`_danger_1nc1z_54`,sm:`_sm_1nc1z_80`,md:`_md_1nc1z_87`,lg:`_lg_1nc1z_94`,iconOnly:`_iconOnly_1nc1z_100`,fullWidth:`_fullWidth_1nc1z_105`,label:`_label_1nc1z_121`,icon:`_icon_1nc1z_100`},De=(0,c.forwardRef)(({children:e,variant:t=`primary`,size:n=`md`,disabled:r=!1,leftIcon:i,rightIcon:a,fullWidth:o=!1,className:s,onClick:c,ariaLabel:l},u)=>{let f=!e&&(i||a);return f&&!l&&process.env.NODE_ENV!==`production`&&console.warn(`Button: icon-only buttons must provide ariaLabel.`),(0,d.jsxs)(`button`,{ref:u,type:`button`,disabled:r,onClick:c,"aria-label":l||void 0,className:g(Z.button,Z[t],Z[n],s,{[Z.disabled]:r,[Z.fullWidth]:o,[Z.iconOnly]:f}),children:[i&&(0,d.jsx)(`span`,{className:Z.icon,children:i}),e&&(0,d.jsx)(`span`,{className:Z.label,children:e}),a&&(0,d.jsx)(`span`,{className:Z.icon,children:a})]})});De.displayName=`Button`;var Q={wrapper:`_wrapper_36r4m_1`,input:`_input_36r4m_9`,customCheckbox:`_customCheckbox_36r4m_21`,checkmark:`_checkmark_36r4m_38`,container:`_container_36r4m_54`,label:`_label_36r4m_60`,error:`_error_36r4m_65`,errorText:`_errorText_36r4m_69`,disabled:`_disabled_36r4m_115`},Oe=(0,c.forwardRef)(({label:e,checked:t,defaultChecked:n=!1,disabled:r=!1,className:i,onCheckedChange:a,error:o},s)=>{let l=(0,c.useId)(),u=!!o,[f,h]=(0,p.useControllableState)({value:t,defaultValue:n,onChange:a});return(0,d.jsxs)(`div`,{className:Q.container,children:[(0,d.jsxs)(`label`,{htmlFor:l,className:g(Q.wrapper,r&&Q.disabled,i),children:[(0,d.jsx)(`input`,{ref:s,id:l,type:`checkbox`,checked:f,disabled:r,onChange:e=>{h(e.target.checked)},className:Q.input,"aria-invalid":u||void 0,"aria-describedby":u?`${l}-error`:void 0,"aria-label":e?void 0:`Checkbox`}),(0,d.jsx)(`span`,{className:g(Q.customCheckbox,u&&Q.error),"aria-hidden":`true`,children:f&&(0,d.jsx)(`span`,{className:Q.checkmark,children:(0,d.jsx)(m.Check,{})})}),e&&(0,d.jsx)(`span`,{className:Q.label,children:e})]}),u&&(0,d.jsx)(`span`,{id:`${l}-error`,className:Q.errorText,children:o})]})});Oe.displayName=`Checkbox`;var $={inputWrapper:`_inputWrapper_kfk5j_1`,input:`_input_kfk5j_1`,error:`_error_kfk5j_36`,withEllipsis:`_withEllipsis_kfk5j_43`,sm:`_sm_kfk5j_48`,md:`_md_kfk5j_52`,lg:`_lg_kfk5j_56`,tooltip:`_tooltip_kfk5j_63`,fadeIn:`_fadeIn_kfk5j_1`},ke=(0,c.forwardRef)(({id:e,label:t,placeholder:n,value:r,onChange:i,size:a=`md`,error:o,disabled:s=!1,required:l=!1,className:u,autoComplete:f,type:p=`text`,showOverflowTooltip:m=!1},h)=>{let _=(0,c.useId)(),v=e??_,y=(0,c.useRef)(null),[b,x]=(0,c.useState)(!1),[S,C]=(0,c.useState)(!1),w=r!=null&&r!==``,T=(0,c.useCallback)(()=>{let e=y.current;if(!e){x(!1);return}x(e.scrollWidth>e.clientWidth)},[]);(0,c.useEffect)(()=>{if(!m)return;if(T(),typeof ResizeObserver>`u`)return window.addEventListener(`resize`,T),()=>{window.removeEventListener(`resize`,T)};let e=new ResizeObserver(T);return y.current&&e.observe(y.current),window.addEventListener(`resize`,T),()=>{e.disconnect(),window.removeEventListener(`resize`,T)}},[T,m]),(0,c.useEffect)(()=>{m&&T()},[r,T,m]);let E=(0,c.useCallback)(e=>{if(y.current=e,typeof h==`function`){h(e);return}h&&(h.current=e)},[h]),D=(0,c.useCallback)(e=>{i?.(e.target.value)},[i]),O=(0,c.useCallback)(()=>{m&&b&&w&&C(!0)},[w,b,m]),k=(0,c.useCallback)(()=>{C(!1)},[]);return(0,d.jsx)(G,{id:v,label:t,error:o,required:l,disabled:s,children:(0,d.jsxs)(`div`,{className:$.inputWrapper,children:[(0,d.jsx)(`input`,{ref:E,id:v,type:p,autoComplete:f,className:g($.input,$[a],{[$.error]:!!o,[$.withEllipsis]:m},u),value:r,onChange:D,placeholder:n,disabled:s,required:l,"aria-invalid":!!o,"aria-describedby":o?`${v}-error`:void 0,onMouseEnter:O,onMouseLeave:k}),m&&S&&b&&w&&(0,d.jsx)(`div`,{className:$.tooltip,role:`tooltip`,children:r})]})})});ke.displayName=`Input`;var Ae=(0,c.createContext)(null),je=e=>e===`highContrast`?`high-contrast`:e,Me=({theme:e,defaultTheme:t=`light`,onThemeChange:n,children:r})=>{let[i,a]=(0,p.useControllableState)({value:e,defaultValue:t,onChange:n}),o=je(i);(0,c.useEffect)(()=>{if(typeof document>`u`)return;let{documentElement:e}=document,t=e.dataset.velliraTheme;return e.dataset.velliraTheme=o,()=>{if(t===void 0){delete e.dataset.velliraTheme;return}e.dataset.velliraTheme=t}},[o]);let s=(0,c.useMemo)(()=>({theme:i,setTheme:a}),[i,a]);return(0,d.jsx)(Ae.Provider,{value:s,children:(0,d.jsx)(`div`,{"data-vellira-theme":o,children:r})})};Me.displayName=`ThemeProvider`;function Ne(){let e=(0,c.useContext)(Ae);if(!e)throw Error(`useTheme must be used within ThemeProvider.`);return e}exports.Button=De,exports.Checkbox=Oe,exports.Dropdown=M,exports.FormField=G,exports.Input=ke,exports.Modal=ce,exports.RadioGroup=le,exports.Select=me,exports.Tabs=Ce,exports.ThemeProvider=Me,exports.Tooltip=Ee,exports.useTheme=Ne;

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+export type { DropdownProps } from './components/Dropdown';
+export { Dropdown } from './components/Dropdown';
+export type { ModalProps } from './components/Modal';
+export { Modal } from './components/Modal';
+export type { RadioGroupProps } from './components/RadioGroup';
+export { RadioGroup } from './components/RadioGroup';
+export type { SelectOption, SelectProps } from './components/Select';
+export { Select } from './components/Select';
+export type { TabProps, TabsListProps, TabsPanelProps, TabsProps, } from './components/Tabs';
+export { Tabs } from './components/Tabs';
+export type { TooltipProps } from './components/Tooltip';
+export { Tooltip } from './components/Tooltip';
+export type { FormFieldProps } from './patterns/FormField';
+export { FormField } from './patterns/FormField';
+export type { ButtonProps } from './primitives/Button';
+export { Button } from './primitives/Button';
+export type { CheckboxProps } from './primitives/Checkbox';
+export { Checkbox } from './primitives/Checkbox';
+export type { InputProps } from './primitives/Input';
+export { Input } from './primitives/Input';
+export * from './theme';