@indxsearch/systm 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+All notable changes to @indxsearch/systm will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [2.0.0] - 2026-05-12
+
+### Changed
+- Version bump to align with the indx-react monorepo v5 release
+- No breaking changes to components or CSS API
+
+### Compatibility
+- React ^19.0.0
+- React DOM ^19.0.0

package/README.md

@@ -32,18 +32,27 @@ function App() {
 - **Button** - Customizable button with variants
 - **Checkbox** - Checkbox input component
 - **InputField** - Text input field
+- **Textarea** - Multi-line text input
 - **RadioButton** - Radio button input
 - **SearchField** - Search input with icon
 - **Select** - Radix UI select dropdown
 - **Slider** - Range slider component
 - **ToggleSwitch** - Toggle switch input
+- **DatePicker** - Single-date calendar picker in a popover
 - **Popover** - Radix UI popover component
+- **Modal** - Accessible dialog (Radix) with overlay, title, and close
+- **Table** - Composable table (TableHeader, TableRow, TableCell, TableValue, TableIcon)
+- **Tabs** - Tab list for switching between views
+- **ProgressBar** - Progress indicator with optional label
+- **Chip** - Compact label/tag with custom colors
+- **Tooltip** - Radix UI tooltip with positioning
+- **Chart** - Line and bar chart component
 - **Base** - Base container component
 - **FilterPanelBase** - Filter panel container
 
 ## Custom Cursors (Optional)
 
-Systm includes an optional custom cursor system with 13 cursor utilities. Import the cursors stylesheet to enable:
+Systm includes an optional custom cursor system with 12 cursor utilities. Import the cursors stylesheet to enable:
 
 ```tsx
 import '@indxsearch/systm/styles.css';
@@ -72,6 +81,7 @@ Systm includes SVG patterns as CSS custom properties, automatically bundled in `
 
 ```tsx
 import '@indxsearch/systm/styles.css'; // Patterns included by default
+import '@indxsearch/systm/patterns.css'; // Or import patterns standalone
 ```
 
 **Available patterns:**
@@ -102,7 +112,10 @@ import '@indxsearch/systm/styles.css'; // Patterns included by default
 ## Dependencies
 
 - `@indxsearch/pixl` - Icon library
+- `@radix-ui/react-dialog` - Modal/dialog primitives
+- `@radix-ui/react-popover` - Popover component primitives
 - `@radix-ui/react-select` - Select component primitives
+- `@radix-ui/react-tooltip` - Tooltip component primitives
 - `react-range` - Range slider component
 
 ## Peer Dependencies

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface IconProps {
     size?: string | number;
     color?: string;

package/dist/components/Chart/Chart.d.ts

@@ -0,0 +1,15 @@
+export interface ChartSeries {
+    label: string;
+    data: number[];
+    color?: string;
+    hoverColor?: string;
+}
+export interface ChartProps {
+    series: ChartSeries[];
+    labels?: string[];
+    type?: 'line' | 'bar';
+    height?: number;
+    showLegend?: boolean;
+    className?: string;
+}
+export declare function Chart({ series, labels, type, height, showLegend, className, }: ChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     score?: string;

package/dist/components/Chip/Chip.d.ts

@@ -1,8 +1,17 @@
-import React from 'react';
+import { default as React } from 'react';
+interface IconProps {
+    size?: string | number;
+    color?: string;
+}
 export interface ChipProps {
     children: React.ReactNode;
     color?: string;
     textColor?: string;
     className?: string;
+    /** Optional leading icon. Sized and coloured to match the chip text. */
+    icon?: React.ReactElement<IconProps>;
+    /** `large` is a taller, more-padded badge that suits a leading icon. */
+    size?: 'default' | 'large';
 }
-export declare function Chip({ children, color, textColor, className }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chip({ children, color, textColor, className, icon, size }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface DatePickerProps {
+    value?: Date | null;
+    onChange?: (date: Date) => void;
+    label?: string;
+    placeholder?: string;
+    error?: string;
+    isValid?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** Format the selected date shown in the trigger. Default: ISO yyyy-mm-dd. */
+    formatDate?: (date: Date) => string;
+}
+export declare const DatePicker: React.FC<DatePickerProps>;

package/dist/components/InputField/InputField.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     error?: string;

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface ModalProps {
+    /** Optional element that opens the modal. Omit when controlling via `open`. */
+    trigger?: React.ReactNode;
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title?: string;
+    description?: string;
+    className?: string;
+    /** Show the top-right close button (default true). */
+    showClose?: boolean;
+}
+export declare const Modal: React.FC<ModalProps>;

package/dist/components/Popover/Popover.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export interface PopoverProps {
     trigger: React.ReactNode;
     children: React.ReactNode;

package/dist/components/RadioButton/RadioButton.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 type RadioButtonProps = {
     id: string;
     name: string;

package/dist/components/SearchField/SearchField.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface IconProps {
     size?: string | number;
     color?: string;

package/dist/components/Select/Select.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export interface SelectOption {
     label: string;
     value: string;
@@ -11,6 +11,7 @@ export interface SelectProps {
     className?: string;
     disabled?: boolean;
     label?: string;
+    size?: 'micro' | 'default' | 'large';
     'aria-label'?: string;
     id?: string;
 }

package/dist/components/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 type SingleValue = number;
 type RangeValue = [number, number];
 interface BaseSliderProps {

package/dist/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface TableProps {
     children: React.ReactNode;
     caption?: string;

package/dist/components/Table/TableCell.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface TableCellProps {
     label?: string;
     children?: React.ReactNode;

package/dist/components/Table/TableHeader.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface TableHeaderProps {
     children: React.ReactNode;
 }

package/dist/components/Table/TableIcon.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface IconProps {
     size?: string | number;
     color?: string;

package/dist/components/Table/TableRow.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface TableRowProps {
     children: React.ReactNode;
 }

package/dist/components/Table/TableValue.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface TableValueProps {
     children: React.ReactNode;
 }

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    className?: string;
+    isValid?: boolean;
+}
+export declare function Textarea({ label, error, className, isValid, id: providedId, rows, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 type ToggleSwitchProps = {
     id?: string;
     checked: boolean;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,8 @@
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipProps = {
+    content: string;
+    position?: TooltipPosition;
+    children: React.ReactElement;
+    className?: string;
+};
+export declare function Tooltip({ content, position, children, className }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.cjs.js

@@ -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");c=s(c,1);let l=require("react/jsx-runtime"),u=require("@indxsearch/pixl"),d=require("react-range"),f=require("@radix-ui/react-select");f=s(f,1);let p=require("@radix-ui/react-popover");p=s(p,1);let m=require("@radix-ui/react-tooltip");m=s(m,1);let h=require("@radix-ui/react-dialog");h=s(h,1);var g={button:`_button_1sns4_1`,micro:`_micro_1sns4_22`,default:`_default_1sns4_30`,large:`_large_1sns4_38`,primary:`_primary_1sns4_47`,secondary:`_secondary_1sns4_57`,ghost:`_ghost_1sns4_67`};function _(e){let{size:t=`default`,variant:n=`primary`,iconLeft:r,iconRight:i,className:a,children:o,...s}=e,{href:u}=s,d=`disabled`in s?s.disabled:!1,f=t===`micro`?`14px`:t===`large`?`21px`:`14px`,p=[g.button,g[t],g[n],d?`cursor-not-allowed`:`cursor-pointer`,a].filter(Boolean).join(` `);if(process.env.NODE_ENV!==`production`){let e=(r||i)&&!o,t=s[`aria-label`]||s[`aria-labelledby`];e&&!t&&console.warn(`Button: Icon-only buttons should have an aria-label or aria-labelledby for accessibility.`)}let m=(0,l.jsxs)(l.Fragment,{children:[r&&c.default.cloneElement(r,{size:f,color:`currentColor`}),o,i&&c.default.cloneElement(i,{size:f,color:`currentColor`})]});if(u){let{type:e,disabled:t,...n}=s;return(0,l.jsx)(`a`,{className:p,href:u,...n,"aria-disabled":d?`true`:void 0,onClick:d?e=>e.preventDefault():n.onClick,children:m})}let{type:h=`button`,..._}=s;return(0,l.jsx)(`button`,{className:p,type:h,..._,children:m})}var v={checkboxWrapper:`_checkboxWrapper_1vygn_1`,checkbox:`_checkbox_1vygn_1`,label:`_label_1vygn_44`,score:`_score_1vygn_48`,disabled:`_disabled_1vygn_55`},y=({label:e,score:t,className:n=``,id:r,"aria-label":i,...a})=>{let o=c.default.useId(),s=r||o,u=t?`${s}-score`:void 0,d=a.disabled;return e||t?(0,l.jsxs)(`label`,{htmlFor:s,className:`${v.checkboxWrapper} ${n} ${d?v.disabled:``} ${d?`cursor-not-allowed`:`cursor-pointer`}`,children:[(0,l.jsx)(`input`,{id:s,type:`checkbox`,className:v.checkbox,"aria-describedby":u,"aria-label":i,...a}),e&&(0,l.jsx)(`span`,{className:v.label,children:e}),t&&(0,l.jsx)(`span`,{id:u,className:v.score,children:t})]}):(0,l.jsx)(`input`,{id:s,type:`checkbox`,className:`${v.checkbox} ${n}`,"aria-label":i,disabled:d,...a})},b={container:`_container_dlzj1_1`,default:`_default_dlzj1_5`};function x({children:e,className:t}){return(0,l.jsx)(`div`,{className:`${b.container} ${b.default} ${t||``}`,children:e})}var S={container:`_container_10bfq_1`,header:`_header_10bfq_11`,title:`_title_10bfq_31`,toggleButton:`_toggleButton_10bfq_38`,body:`_body_10bfq_49`};function C({title:e,children:t,className:n=``,collapsible:r=!0,collapsed:i=!1}){let[a,o]=(0,c.useState)(()=>!i),s=c.default.useId();return(0,c.useEffect)(()=>{r&&o(!i)},[i,r]),(0,l.jsxs)(`div`,{className:`${S.container} ${n}`,children:[e&&(r?(0,l.jsxs)(`button`,{type:`button`,className:S.header,onClick:()=>{r&&o(e=>!e)},"aria-label":`${e}: ${a?`Collapse panel`:`Expand panel`}`,"aria-expanded":a,"aria-controls":s,children:[(0,l.jsx)(`div`,{className:S.title,children:e}),(0,l.jsx)(`span`,{"aria-hidden":`true`,children:a?(0,l.jsx)(u.Minus,{color:`var(--lv5)`,size:14}):(0,l.jsx)(u.Plus,{color:`var(--lv5)`,size:14})})]}):(0,l.jsx)(`div`,{className:S.header,children:(0,l.jsx)(`div`,{className:S.title,children:e})})),(!r||a)&&(0,l.jsx)(`div`,{id:s,className:S.body,role:`region`,"aria-label":e||`Filter panel content`,children:t})]})}var w={wrapper:`_wrapper_tf1yl_1`,label:`_label_tf1yl_7`,inputContainer:`_inputContainer_tf1yl_12`,input:`_input_tf1yl_12`,focus:`_focus_tf1yl_35`,searchIcon:`_searchIcon_tf1yl_52`,rightContent:`_rightContent_tf1yl_67`,sizeMicro:`_sizeMicro_tf1yl_78`,sizeDefault:`_sizeDefault_tf1yl_87`,error:`_error_tf1yl_110`,errorText:`_errorText_tf1yl_114`},T={micro:14,default:21};function E({label:e,error:t,className:n=``,showSearchIcon:r=!0,searchIcon:i,searchIconColor:a,inputSize:o=`default`,showFocusBorder:s=!1,children:d,id:f,type:p=`search`,...m}){let h=(0,c.useRef)(null),g=c.default.useId(),_=f||g,v=`${_}-error`,y=T[o],b={};a&&(b[`--search-icon-color`]=a);let x=i??(0,l.jsx)(u.Search,{}),S=o===`micro`?w.sizeMicro:w.sizeDefault;return(0,l.jsxs)(`div`,{className:`${w.wrapper} ${n}`,children:[e&&(0,l.jsx)(`label`,{htmlFor:_,className:w.label,children:e}),(0,l.jsxs)(`div`,{className:`${w.inputContainer} ${S}`,children:[r&&(0,l.jsx)(`span`,{className:w.searchIcon,"aria-hidden":`true`,children:c.default.cloneElement(x,{size:y,color:a??`var(--search-icon-color)`})}),(0,l.jsx)(`input`,{ref:h,id:_,type:p,className:`${w.input} ${s?w.focus:``} ${t?w.error:``}`,style:b,"aria-invalid":t?`true`:`false`,"aria-describedby":t?v:void 0,...m}),d&&(0,l.jsx)(`div`,{className:w.rightContent,children:d})]}),t&&(0,l.jsx)(`span`,{id:v,className:w.errorText,role:`alert`,children:t})]})}var D={wrapper:`_wrapper_su5p5_1`,label:`_label_su5p5_7`,input:`_input_su5p5_12`,error:`_error_su5p5_61`,errorText:`_errorText_su5p5_69`,borderBottom:`_borderBottom_su5p5_75`};function O({label:e,error:t,className:n=``,isValid:r=!0,variant:i=`default`,id:a,...o}){let s=c.default.useId(),u=a||s,d=`${u}-error`,f=t||!r;return(0,l.jsxs)(`div`,{className:`${D.wrapper} ${n}`,children:[e&&(0,l.jsxs)(`label`,{htmlFor:u,className:D.label,children:[e,o.required&&(0,l.jsx)(`span`,{"aria-label":`required`,children:` *`})]}),(0,l.jsx)(`input`,{id:u,className:`${D.input} ${i===`borderBottom`?D.borderBottom:``} ${f?D.error:``}`,"aria-invalid":f?`true`:`false`,"aria-describedby":t?d:void 0,...o}),t&&(0,l.jsx)(`span`,{id:d,className:D.errorText,role:`alert`,children:t})]})}var k={radioWrapper:`_radioWrapper_1faq0_1`,radioInput:`_radioInput_1faq0_9`,customRadio:`_customRadio_1faq0_23`,labelText:`_labelText_1faq0_57`,disabled:`_disabled_1faq0_63`},A=({id:e,name:t,value:n,label:r,checked:i=!1,onChange:a,disabled:o=!1,"aria-label":s})=>(0,l.jsxs)(`label`,{htmlFor:e,className:`${k.radioWrapper} ${o?k.disabled:``} ${o?`cursor-not-allowed`:`cursor-pointer`}`,children:[(0,l.jsx)(`input`,{id:e,type:`radio`,name:t,value:n,checked:i,onChange:a,disabled:o,"aria-label":s,className:k.radioInput}),(0,l.jsx)(`span`,{className:k.customRadio}),(0,l.jsx)(`span`,{className:k.labelText,children:r})]}),j={switch:`_switch_1xsea_1`,slider:`_slider_1xsea_23`,label:`_label_1xsea_28`,disabled:`_disabled_1xsea_43`},M=({id:e,checked:t,onChange:n,disabled:r=!1,label:i,"aria-label":a})=>{let o=c.default.useId(),s=e||o;return(0,l.jsxs)(`label`,{htmlFor:s,className:`${j.switch} ${r?j.disabled:``} ${r?`cursor-not-allowed`:`cursor-pointer`}`,children:[(0,l.jsx)(`input`,{id:s,type:`checkbox`,role:`switch`,"aria-checked":t,"aria-label":a,checked:t,onChange:e=>n(e.target.checked),disabled:r}),(0,l.jsx)(`span`,{className:j.slider,"aria-hidden":`true`}),i&&(0,l.jsx)(`span`,{className:j.label,children:i})]})},N={label:`_label_12as9_1`,basetrack:`_basetrack_12as9_8`,selectedtrack:`_selectedtrack_12as9_36`,livetrack:`_livetrack_12as9_43`,livetrackFaceted:`_livetrackFaceted_12as9_49`,livetrackDefault:`_livetrackDefault_12as9_52`,thumbs:`_thumbs_12as9_55`,disabled:`_disabled_12as9_89`},ee=e=>{let{min:t,max:n,step:r=1,disabled:i=!1,className:a,activeMin:o,activeMax:s,isFaceted:u=!1,highlightFaceted:f=!0,onChange:p,onFinalChange:m,label:h,"aria-label":g,id:_}=e,v=c.default.useId(),y=_||v;if(process.env.NODE_ENV!==`production`&&!h&&!g&&console.warn(`Slider: Component should have either a label or aria-label for accessibility.`),`isRange`in e&&e.isRange){let c=e.value,[f,_]=c;return(0,l.jsxs)(`div`,{className:a,children:[h&&(0,l.jsx)(`label`,{htmlFor:y,className:N.label,children:h}),(0,l.jsx)(d.Range,{step:r,min:t,max:n,values:c,onChange:e=>p(e),onFinalChange:e=>m?.(e),disabled:i,renderTrack:({props:e,children:r})=>{let{key:i,...a}=e,c=n-t,d=(f-t)/c*100,p=(_-f)/c*100,m=0,h=0,g=typeof o==`number`&&typeof s==`number`&&s>o&&(o>t||s<n);return g&&(m=(o-t)/c*100,h=(s-o)/c*100),(0,l.jsxs)(`div`,{...a,className:N.basetrack,style:{...a.style},children:[!g&&(0,l.jsx)(`div`,{className:N.selectedtrack,style:{left:`${d}%`,width:`${p}%`,zIndex:`1`}}),g&&(0,l.jsx)(`div`,{className:`${N.livetrack} ${u?N.livetrackFaceted:N.livetrackDefault}`,style:{left:`${m}%`,width:`${h}%`,zIndex:`2`}}),r]},i)},renderThumb:({props:e,index:r})=>{let{key:a,...o}=e,s=r===0?f:_;return(0,l.jsx)(`div`,{...o,id:r===0?y:void 0,className:`${N.thumbs} ${i?N.disabled:``} ${i?`cursor-not-allowed`:`cursor-resize-col`}`,style:{...o.style,zIndex:`3`},"aria-label":g||(r===0?`Minimum value`:`Maximum value`),"aria-valuemin":t,"aria-valuemax":n,"aria-valuenow":s},a)}})]})}else{let c=e.value;return(0,l.jsxs)(`div`,{className:a,children:[h&&(0,l.jsx)(`label`,{htmlFor:y,className:N.label,children:h}),(0,l.jsx)(d.Range,{step:r,min:t,max:n,values:[c],onChange:e=>p(e[0]),onFinalChange:e=>m?.(e[0]),disabled:i,renderTrack:({props:e,children:r})=>{let{key:i,...a}=e,d=n-t,f=(c-t)/d*100,p=0,m=0,h=typeof o==`number`&&typeof s==`number`&&s>o&&(o>t||s<n);return h&&(p=(o-t)/d*100,m=(s-o)/d*100),(0,l.jsxs)(`div`,{...a,className:N.basetrack,style:{...a.style},children:[!h&&(0,l.jsx)(`div`,{className:N.selectedtrack,style:{left:`0%`,width:`${f}%`,zIndex:`1`}}),h&&(0,l.jsx)(`div`,{className:`${N.livetrack} ${u?N.livetrackFaceted:N.livetrackDefault}`,style:{left:`${p}%`,width:`${m}%`,zIndex:`2`}}),r]},i)},renderThumb:({props:e})=>{let{key:r,...a}=e;return(0,l.jsx)(`div`,{...a,id:y,className:`${N.thumbs} ${i?N.disabled:``} ${i?`cursor-not-allowed`:`cursor-resize-col`}`,style:{...a.style,zIndex:`3`},"aria-label":g,"aria-valuemin":t,"aria-valuemax":n,"aria-valuenow":c},r)}})]})}},P={wrapper:`_wrapper_15fsv_1`,label:`_label_15fsv_7`,trigger:`_trigger_15fsv_12`,micro:`_micro_15fsv_28`,default:`_default_15fsv_34`,large:`_large_15fsv_40`,icon:`_icon_15fsv_60`,content:`_content_15fsv_68`,viewport:`_viewport_15fsv_76`,item:`_item_15fsv_82`,itemIndicator:`_itemIndicator_15fsv_105`},F=({value:e,onValueChange:t,options:n,placeholder:r=`Select...`,className:i=``,disabled:a=!1,label:o,size:s=`default`,"aria-label":d,id:p})=>{let m=c.default.useId(),h=p||m,g=`${h}-label`,_=(0,l.jsxs)(f.Root,{value:e,onValueChange:t,disabled:a,children:[(0,l.jsxs)(f.Trigger,{id:h,className:`${P.trigger} ${P[s]} ${i} cursor-pointer`,...o?{"aria-labelledby":g}:d?{"aria-label":d}:{},children:[(0,l.jsx)(f.Value,{placeholder:r}),(0,l.jsx)(f.Icon,{className:P.icon,"aria-hidden":`true`,children:(0,l.jsx)(u.Chevron_down,{size:s===`large`?21:14,color:`currentColor`})})]}),(0,l.jsx)(f.Portal,{children:(0,l.jsx)(f.Content,{className:P.content,position:`popper`,side:`bottom`,align:`start`,sideOffset:4,children:(0,l.jsx)(f.Viewport,{className:P.viewport,children:n.map(e=>(0,l.jsxs)(f.Item,{value:e.value,className:P.item,children:[(0,l.jsx)(f.ItemText,{children:e.label}),(0,l.jsx)(f.ItemIndicator,{className:P.itemIndicator,children:(0,l.jsx)(u.Check,{size:12,color:`currentColor`})})]},e.value))})})})]});return o?(0,l.jsxs)(`div`,{className:P.wrapper,children:[(0,l.jsx)(`label`,{id:g,htmlFor:h,className:P.label,children:o}),_]}):_},I={content:`_content_1qahr_1`},L=({trigger:e,children:t,open:n,onOpenChange:r,align:i=`end`,side:a=`bottom`,sideOffset:o=5,className:s=``,"aria-label":c,"aria-describedby":u})=>(0,l.jsxs)(p.Root,{open:n,onOpenChange:r,children:[(0,l.jsx)(p.Trigger,{asChild:!0,children:e}),(0,l.jsx)(p.Portal,{children:(0,l.jsx)(p.Content,{className:`${I.content} ${s}`,align:i,side:a,sideOffset:o,"aria-label":c,"aria-describedby":u,children:t})})]}),R={table:`_table_1b0iq_1`,caption:`_caption_1b0iq_8`,headerRow:`_headerRow_1b0iq_25`,dataRow:`_dataRow_1b0iq_33`,cellInner:`_cellInner_1b0iq_41`,cellLabel:`_cellLabel_1b0iq_47`,cellContent:`_cellContent_1b0iq_52`,value:`_value_1b0iq_58`,icon:`_icon_1b0iq_64`};function te({children:e,caption:t,"aria-label":n}){return process.env.NODE_ENV!==`production`&&!t&&!n&&console.warn(`Table: Component should have either a caption or aria-label for accessibility.`),(0,l.jsxs)(`table`,{className:R.table,"aria-label":n,children:[t&&(0,l.jsx)(`caption`,{className:R.caption,children:t}),e]})}function ne({children:e}){let t=c.default.Children.map(e,e=>c.default.isValidElement(e)&&e.type===`td`?(0,l.jsx)(`th`,{scope:`col`,...e.props}):e);return(0,l.jsx)(`thead`,{children:(0,l.jsx)(`tr`,{className:R.headerRow,children:t})})}function re({children:e}){return(0,l.jsx)(`tr`,{className:R.dataRow,children:e})}function ie({label:e,children:t,isHeader:n=!1,scope:r}){let i=n?`th`:`td`,a=n&&r?{scope:r}:{};return e||t?(0,l.jsx)(i,{...a,children:(0,l.jsxs)(`div`,{className:R.cellInner,children:[e&&(0,l.jsx)(`span`,{className:R.cellLabel,children:e}),t&&(0,l.jsx)(`div`,{className:R.cellContent,children:t})]})}):(0,l.jsx)(i,{...a,children:t})}function z({children:e}){return(0,l.jsx)(`span`,{className:R.value,children:e})}function B({children:e,"aria-label":t}){let n=!t;return(0,l.jsx)(`span`,{className:R.icon,"aria-hidden":n?`true`:void 0,"aria-label":t,children:c.default.cloneElement(e,{size:`14px`,color:`currentColor`})})}var V={tabs:`_tabs_qrelf_1`,tab:`_tab_qrelf_1`,active:`_active_qrelf_23`,micro:`_micro_qrelf_29`,default:`_default_qrelf_36`,large:`_large_qrelf_43`};function H({items:e,value:t,onValueChange:n,size:r=`default`}){return(0,l.jsx)(`div`,{className:V.tabs,role:`tablist`,children:e.map(e=>(0,l.jsx)(`button`,{role:`tab`,type:`button`,"aria-selected":t===e.value,className:`${V.tab} ${V[r]} ${t===e.value?V.active:``}`,onClick:()=>n(e.value),children:e.label},e.value))})}var U={wrapper:`_wrapper_1a9jo_1`,track:`_track_1a9jo_8`,fill:`_fill_1a9jo_36`,label:`_label_1a9jo_46`};function ae({value:e,showLabel:t=!1,fulfilledColor:n=!1,className:r=``}){let i=Math.min(100,Math.max(0,e)),a=`${Math.round(i)}%`,o=n&&i>=100?`var(--CPureBlue)`:void 0;return(0,l.jsxs)(`div`,{className:`${U.wrapper} ${r}`,role:`progressbar`,"aria-valuenow":i,"aria-valuemin":0,"aria-valuemax":100,children:[(0,l.jsx)(`div`,{className:U.track,children:(0,l.jsx)(`div`,{className:U.fill,style:{width:`${i}%`,backgroundColor:o}})}),t&&(0,l.jsx)(`span`,{className:U.label,"aria-hidden":`true`,children:a})]})}var W={chip:`_chip_iaxe0_1`,large:`_large_iaxe0_14`};function oe({children:e,color:t,textColor:n,className:r,icon:i,size:a=`default`}){let o={};return t&&(o.backgroundColor=t),n&&(o.color=n),(0,l.jsxs)(`span`,{className:[W.chip,a===`large`&&W.large,r].filter(Boolean).join(` `),style:o,children:[i&&c.default.cloneElement(i,{size:14,color:`currentColor`}),e]})}var G={tooltip:`_tooltip_1de7z_1`,arrow:`_arrow_1de7z_13`};function se({content:e,position:t=`top`,children:n,className:r}){return(0,l.jsx)(m.Provider,{delayDuration:80,children:(0,l.jsxs)(m.Root,{children:[(0,l.jsx)(m.Trigger,{asChild:!0,children:n}),(0,l.jsx)(m.Portal,{children:(0,l.jsxs)(m.Content,{side:t,sideOffset:7,className:[G.tooltip,r].filter(Boolean).join(` `),children:[e,(0,l.jsx)(m.Arrow,{className:G.arrow})]})})]})})}var K={wrapper:`_wrapper_1w5vh_1`,chart:`_chart_1w5vh_8`,svg:`_svg_1w5vh_33`,tooltip:`_tooltip_1w5vh_39`,tooltipLabel:`_tooltipLabel_1w5vh_49`,tooltipRow:`_tooltipRow_1w5vh_57`,tooltipDot:`_tooltipDot_1w5vh_64`,tooltipName:`_tooltipName_1w5vh_70`,tooltipValue:`_tooltipValue_1w5vh_76`,legend:`_legend_1w5vh_83`,legendItem:`_legendItem_1w5vh_90`,legendMark:`_legendMark_1w5vh_96`,legendLabel:`_legendLabel_1w5vh_102`},q=`var(--lv4)`,J=12,ce=8,le=8,ue=28,Y=8;function de(e){return Number.isInteger(e)?String(e):e.toLocaleString(void 0,{maximumFractionDigits:2})}function fe({series:e,labels:t,type:n=`line`,height:r=200,showLegend:i=!0,className:a}){let o=(0,c.useRef)(null),[s,u]=(0,c.useState)(0),[d,f]=(0,c.useState)(null);(0,c.useEffect)(()=>{let e=o.current;if(!e)return;let t=new ResizeObserver(([e])=>u(e.contentRect.width));return t.observe(e),u(e.clientWidth),()=>t.disconnect()},[]);let p=t?.length?ue:le,m=Math.max(s-Y-ce,0),h=Math.max(r-J-p,0),g=e.flatMap(e=>e.data.filter(Number.isFinite)),_=g.length?Math.max(...g,0):1,v=n===`bar`?0:Math.min(...g,0),y=_-v||1,b=Math.max(...e.map(e=>e.data.length),0),x=e=>J+(1-(e-v)/y)*h,S=e=>b<=1?Y+m/2:Y+e/(b-1)*m,C=(0,c.useCallback)(e=>{if(b===0)return;let t=e.currentTarget.getBoundingClientRect(),r=e.clientX-t.left,i=e.clientY-t.top;if(n===`line`){let e=Math.round((r-Y)/m*(b-1));f({index:Math.max(0,Math.min(b-1,e)),x:r,y:i})}else{let e=m/b,t=Math.floor((r-Y)/e);f({index:Math.max(0,Math.min(b-1,t)),x:r,y:i})}},[n,b,m]),w=(0,c.useCallback)(()=>f(null),[]),T=(0,l.jsx)(`line`,{x1:Y,y1:J+h*.5,x2:Y+m,y2:J+h*.5,stroke:`var(--chart-midline)`,strokeWidth:`0.5`}),E=(0,l.jsx)(`line`,{x1:Y,y1:J+h,x2:Y+m,y2:J+h,stroke:`var(--chart-baseline)`,strokeWidth:`1`}),D=d&&n===`bar`?(()=>{let e=m/b;return(0,l.jsx)(`rect`,{x:Y+d.index*e,y:J,width:e,height:h,fill:`var(--chart-column-hover)`})})():null,O=()=>e.map((e,t)=>{if(!e.data.length)return null;let n=e.color??q;return(0,l.jsxs)(`g`,{children:[(0,l.jsx)(`polyline`,{points:e.data.map((e,t)=>`${S(t).toFixed(2)},${x(e).toFixed(2)}`).join(` `),fill:`none`,stroke:n,strokeWidth:`1`,strokeLinejoin:`round`,strokeLinecap:`round`}),e.data.map((e,t)=>{let r=d?.index===t?10:5,i=r/2;return(0,l.jsx)(`rect`,{x:S(t)-i,y:x(e)-i,width:r,height:r,fill:n},t)})]},t)}),k=()=>{if(!b)return null;let t=e.length,n=m/b,r=Math.max((n-2*(t+1))/t,2),i=J+h;return e.map((e,t)=>e.data.map((a,o)=>{let s=Y+o*n+2+t*(r+2),c=x(a);return(0,l.jsx)(`rect`,{x:s,y:c,width:r,height:Math.max(i-c,0),fill:e.color??`var(--chart-bar)`},`${t}-${o}`)}))},A=()=>{if(!t?.length)return null;let e=J+h+18;return t.map((t,r)=>(0,l.jsx)(`text`,{x:n===`line`?S(r):Y+(r+.5)*(m/b),y:e,textAnchor:`middle`,fill:`var(--lv4)`,style:{font:`var(--text-2xs)`},children:t},r))},j=d&&n===`line`?(0,l.jsx)(`line`,{x1:S(d.index),y1:J,x2:S(d.index),y2:J+h,stroke:`var(--chart-crosshair)`,strokeWidth:`1`,strokeDasharray:`3 3`}):null,M=d?(()=>{let n=t?.[d.index]??String(d.index+1),r=Math.min(Math.max(d.x,60),s-60);return(0,l.jsxs)(`div`,{className:K.tooltip,style:d.y<80?{left:r,top:d.y+12,transform:`translate(-50%, 0)`}:{left:r,top:d.y-8,transform:`translate(-50%, -100%)`},children:[(0,l.jsx)(`div`,{className:K.tooltipLabel,children:n}),e.map((e,t)=>(0,l.jsxs)(`div`,{className:K.tooltipRow,children:[(0,l.jsx)(`span`,{className:K.tooltipDot,style:{background:e.color??q}}),(0,l.jsx)(`span`,{className:K.tooltipName,children:e.label}),(0,l.jsx)(`span`,{className:K.tooltipValue,children:de(e.data[d.index]??0)})]},t))]})})():null;return(0,l.jsxs)(`div`,{className:[K.wrapper,a].filter(Boolean).join(` `),children:[(0,l.jsxs)(`div`,{ref:o,className:K.chart,style:{height:r},children:[s>0&&(0,l.jsxs)(`svg`,{width:s,height:r,className:K.svg,onMouseMove:C,onMouseLeave:w,children:[T,E,D,j,n===`line`?O():k(),A()]}),M]}),i&&e.length>1&&(0,l.jsx)(`div`,{className:K.legend,children:e.map((e,t)=>(0,l.jsxs)(`div`,{className:K.legendItem,children:[(0,l.jsx)(`div`,{className:K.legendMark,style:{background:e.color??q}}),(0,l.jsx)(`span`,{className:K.legendLabel,children:e.label})]},t))})]})}var X={wrapper:`_wrapper_17ws4_1`,label:`_label_17ws4_7`,textarea:`_textarea_17ws4_12`,error:`_error_17ws4_48`,errorText:`_errorText_17ws4_56`};function pe({label:e,error:t,className:n=``,isValid:r=!0,id:i,rows:a=4,...o}){let s=c.default.useId(),u=i||s,d=`${u}-error`,f=t||!r;return(0,l.jsxs)(`div`,{className:`${X.wrapper} ${n}`,children:[e&&(0,l.jsxs)(`label`,{htmlFor:u,className:X.label,children:[e,o.required&&(0,l.jsx)(`span`,{"aria-label":`required`,children:` *`})]}),(0,l.jsx)(`textarea`,{id:u,rows:a,className:`${X.textarea} ${f?X.error:``}`,"aria-invalid":f?`true`:`false`,"aria-describedby":t?d:void 0,...o}),t&&(0,l.jsx)(`span`,{id:d,className:X.errorText,role:`alert`,children:t})]})}var Z={overlay:`_overlay_xud7c_1`,content:`_content_xud7c_8`,title:`_title_xud7c_26`,description:`_description_xud7c_34`,close:`_close_xud7c_40`,srOnly:`_srOnly_xud7c_62`},me=({trigger:e,children:t,open:n,onOpenChange:r,title:i,description:a,className:o=``,showClose:s=!0})=>(0,l.jsxs)(h.Root,{open:n,onOpenChange:r,children:[e&&(0,l.jsx)(h.Trigger,{asChild:!0,children:e}),(0,l.jsxs)(h.Portal,{children:[(0,l.jsx)(h.Overlay,{className:Z.overlay}),(0,l.jsxs)(h.Content,{className:`${Z.content} ${o}`,children:[(0,l.jsx)(h.Title,{className:i?Z.title:Z.srOnly,children:i||`Dialog`}),a&&(0,l.jsx)(h.Description,{className:Z.description,children:a}),s&&(0,l.jsx)(h.Close,{className:Z.close,"aria-label":`Close`,children:(0,l.jsx)(u.X_or_error,{size:16,color:`currentColor`})}),t]})]})]}),Q={wrapper:`_wrapper_aimna_1`,label:`_label_aimna_7`,trigger:`_trigger_aimna_12`,error:`_error_aimna_43`,placeholder:`_placeholder_aimna_47`,valueText:`_valueText_aimna_51`,calendar:`_calendar_aimna_55`,header:`_header_aimna_65`,monthLabel:`_monthLabel_aimna_71`,navButton:`_navButton_aimna_77`,weekdays:`_weekdays_aimna_95`,grid:`_grid_aimna_96`,weekday:`_weekday_aimna_95`,day:`_day_aimna_109`,outside:`_outside_aimna_127`,today:`_today_aimna_131`,selected:`_selected_aimna_136`,errorText:`_errorText_aimna_142`},he=[`Mo`,`Tu`,`We`,`Th`,`Fr`,`Sa`,`Su`],ge=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`];function _e(e){let t=String(e.getMonth()+1).padStart(2,`0`),n=String(e.getDate()).padStart(2,`0`);return`${e.getFullYear()}-${t}-${n}`}function $(e,t){return!!e&&!!t&&e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function ve(e,t){let n=(new Date(e,t,1).getDay()+6)%7,r=[];for(let i=0;i<42;i++)r.push(new Date(e,t,1-n+i));return r}var ye=({value:e,onChange:t,label:n,placeholder:r=`Select a date`,error:i,isValid:a=!0,disabled:o=!1,className:s=``,formatDate:d=_e})=>{let f=`${c.default.useId()}-error`,m=!!i||!a,[h,g]=(0,c.useState)(!1),_=new Date,v=e??_,[y,b]=(0,c.useState)(v.getFullYear()),[x,S]=(0,c.useState)(v.getMonth());c.default.useEffect(()=>{h&&e&&(b(e.getFullYear()),S(e.getMonth()))},[h]);let C=()=>{x===0?(S(11),b(y-1)):S(x-1)},w=()=>{x===11?(S(0),b(y+1)):S(x+1)},T=e=>{t?.(e),g(!1)},E=ve(y,x);return(0,l.jsxs)(`div`,{className:`${Q.wrapper} ${s}`,children:[n&&(0,l.jsx)(`span`,{className:Q.label,children:n}),(0,l.jsxs)(p.Root,{open:h,onOpenChange:g,children:[(0,l.jsx)(p.Trigger,{asChild:!0,children:(0,l.jsxs)(`button`,{type:`button`,className:`${Q.trigger} ${m?Q.error:``}`,disabled:o,"aria-invalid":m?`true`:`false`,"aria-describedby":i?f:void 0,children:[(0,l.jsx)(`span`,{className:e?Q.valueText:Q.placeholder,children:e?d(e):r}),(0,l.jsx)(u.Chevron_down,{size:14,color:`currentColor`})]})}),(0,l.jsx)(p.Portal,{children:(0,l.jsxs)(p.Content,{className:Q.calendar,align:`start`,sideOffset:5,children:[(0,l.jsxs)(`div`,{className:Q.header,children:[(0,l.jsx)(`button`,{type:`button`,className:Q.navButton,onClick:C,"aria-label":`Previous month`,children:(0,l.jsx)(u.Chevron_left,{size:14,color:`currentColor`})}),(0,l.jsxs)(`span`,{className:Q.monthLabel,children:[ge[x],` `,y]}),(0,l.jsx)(`button`,{type:`button`,className:Q.navButton,onClick:w,"aria-label":`Next month`,children:(0,l.jsx)(u.Chevron_right,{size:14,color:`currentColor`})})]}),(0,l.jsx)(`div`,{className:Q.weekdays,children:he.map(e=>(0,l.jsx)(`span`,{className:Q.weekday,children:e},e))}),(0,l.jsx)(`div`,{className:Q.grid,children:E.map(t=>{let n=t.getMonth()!==x,r=$(t,e),i=$(t,_);return(0,l.jsx)(`button`,{type:`button`,className:[Q.day,n?Q.outside:``,r?Q.selected:``,i&&!r?Q.today:``].filter(Boolean).join(` `),onClick:()=>T(t),children:t.getDate()},t.toISOString())})})]})})]}),i&&(0,l.jsx)(`span`,{id:f,className:Q.errorText,role:`alert`,children:i})]})};exports.Base=x,exports.Button=_,exports.Chart=fe,exports.Checkbox=y,exports.Chip=oe,exports.DatePicker=ye,exports.FilterPanelBase=C,exports.InputField=O,exports.Modal=me,exports.Popover=L,exports.ProgressBar=ae,exports.RadioButton=A,exports.SearchField=E,exports.Select=F,exports.Slider=ee,exports.Table=te,exports.TableCell=ie,exports.TableHeader=ne,exports.TableIcon=B,exports.TableRow=re,exports.TableValue=z,exports.Tabs=H,exports.Textarea=pe,exports.ToggleSwitch=M,exports.Tooltip=se;

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-import './globals/globals.css';
-import './globals/patterns.css';
 export { Button } from './components/Button/Button';
 export { Checkbox } from './components/Checkbox/Checkbox';
 export { Base, type BaseProps } from './components/Base/Base';
@@ -16,3 +14,8 @@ export { Table, TableHeader, TableRow, TableCell, TableValue, TableIcon } from '
 export { Tabs, type TabItem, type TabsProps } from './components/Tabs/Tabs';
 export { ProgressBar, type ProgressBarProps } from './components/ProgressBar/ProgressBar';
 export { Chip, type ChipProps } from './components/Chip/Chip';
+export { Tooltip, type TooltipProps, type TooltipPosition } from './components/Tooltip/Tooltip';
+export { Chart, type ChartProps, type ChartSeries } from './components/Chart/Chart';
+export { Textarea, type TextareaProps } from './components/Textarea/Textarea';
+export { Modal, type ModalProps } from './components/Modal/Modal';
+export { DatePicker, type DatePickerProps } from './components/DatePicker/DatePicker';