@xplor-education/core-stencil-components 2.0.0

package/dist/xplor-component-library/xplor-component-library.css

@@ -0,0 +1 @@
+*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;}::before,::after{--tw-content:''}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;}body{margin:0;line-height:inherit;}hr{height:0;color:inherit;border-top-width:1px;}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse;}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0;}button,select{text-transform:none}button,input:where([type='button']),input:where([type='reset']),input:where([type='submit']){-webkit-appearance:button;background-color:transparent;background-image:none;}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type='search']{-webkit-appearance:textfield;outline-offset:-2px;}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af;}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af;}button,[role="button"]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden="until-found"])){display:none}html[data-theme='office']{--color-primary:rgb(219, 59, 3);--color-secondary:rgb(0, 119, 107);--color-buttons:#89da59;--color-typography:#ff320e}html{--color-primary:#db3b03;--color-secondary:rgb(0, 119, 107);--color-buttons:#fbbc05;--color-typography:#ea4335}:root{--color-primary:#db3b03;--color-secondary:rgb(0, 119, 107);--color-tertiary:rgb(128, 104, 186);--color-white:white;--color-emphasis:rgb(8, 8, 9);--color-supergiant:rgb(213, 66, 99);--color-orange:rgb(250, 200, 127);--color-buttons:#fbbc05;--color-typography:#ea4335;--background:20 66% 99%;--foreground:20 51% 4%;--muted:20 25% 86%;--muted-foreground:20 7% 25%;--popover:20 66% 98%;--popover-foreground:20 51% 3%;--card:20 66% 98%;--card-foreground:20 51% 3%;--border:20 15% 94%;--input:20 15% 94%;--primary:20 48% 72%;--primary-foreground:20 48% 12%;--secondary:20 12% 92%;--secondary-foreground:20 12% 32%;--accent:20 12% 92%;--accent-foreground:20 12% 32%;--destructive:11 80% 22%;--destructive-foreground:11 80% 82%;--ring:20 48% 72%;--radius:0.5rem;--chart-1:12 76% 61%;--chart-2:173 58% 39%;--chart-3:197 37% 24%;--chart-4:43 74% 66%;--chart-5:27 87% 67%}.dark{--background:253 43% 3%;--foreground:253 31% 98%;--muted:253 7% 13%;--muted-foreground:253 13% 63%;--popover:253 43% 3%;--popover-foreground:253 31% 98%;--card:253 43% 4%;--card-foreground:253 31% 99%;--border:215 27.9% 16.9%;--input:215 27.9% 16.9%;--primary:253 91% 58%;--primary-foreground:253 91% 98%;--secondary:253 7% 9%;--secondary-foreground:253 7% 69%;--accent:253 13% 14%;--accent-foreground:253 13% 74%;--destructive:339.2 90.36% 51.18%;--destructive-foreground:0 0% 100%;--ring:253 91% 58%;--chart-1:220 70% 50%;--chart-2:160 60% 45%;--chart-3:30 80% 55%;--chart-4:280 65% 60%;--chart-5:340 75% 55%}*{border-color:hsl(var(--border))}body{box-sizing:border-box;background-color:hsl(var(--background));color:hsl(var(--foreground))}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:0.25rem}.mb-6{margin-bottom:1.5rem}.mt-6{margin-top:1.5rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.size-16{width:1rem;height:1rem}.h-3{height:0.75rem}.h-4{height:0.25rem}.w-3{width:0.75rem}.w-4{width:0.25rem}.w-full{width:100%}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-xl{max-width:36rem}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:0.25rem}.gap-2{gap:0.5rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.gap-y-12{row-gap:0.75rem}.overflow-x-auto{overflow-x:auto}.text-pretty{text-wrap:pretty}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-1\.5{padding:0.375rem}.p-2{padding:0.5rem}.p-6{padding:1.5rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}.py-24{padding-top:1.5rem;padding-bottom:1.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:Montserrat, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-base\/7{font-size:1rem;line-height:1.75rem}.text-lg\/8{font-size:1.125rem;line-height:2rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-sm\/6{font-size:0.875rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.tracking-tight{letter-spacing:-0.025em}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-primary{color:var(--color-primary)}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.outline{outline-style:solid}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.theme-office{--color-black:#000000;--color-white:#ffffff;--color-primary:#db3b03;--color-secondary:#ec7702;--color-buttons:#89da59;--color-typography:#ff320e}.theme-pg{--color-primary:#00776b;--color-secondary:#01a39d;--color-buttons:#89da59;--color-typography:#ff320e}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.hover\:bg-teal-50:hover{--tw-bg-opacity:1;background-color:rgb(240 253 250 / var(--tw-bg-opacity, 1))}.hover\:bg-teal-700:hover{--tw-bg-opacity:1;background-color:rgb(15 118 110 / var(--tw-bg-opacity, 1))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.hover\:text-gray-800:hover{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.hover\:text-teal-800:hover{--tw-text-opacity:1;color:rgb(17 94 89 / var(--tw-text-opacity, 1))}.focus\:border-teal-500:focus{--tw-border-opacity:1;border-color:rgb(20 184 166 / var(--tw-border-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\:ring-teal-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(20 184 166 / var(--tw-ring-opacity, 1))}.disabled\:opacity-50:disabled{opacity:0.5}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\:gap-y-16{row-gap:1rem}.sm\:py-32{padding-top:2rem;padding-bottom:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width: 1024px){.lg\:px-8{padding-left:0.5rem;padding-right:0.5rem}}@media (min-width: 1280px){.xl\:col-span-2{grid-column:span 2 / span 2}.xl\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}

package/dist/xplor-component-library/xplor-component-library.esm.js

@@ -0,0 +1,2 @@
+import{p as e,g as l,b as t}from"./p-Zkk2NJif.js";export{s as setNonce}from"./p-Zkk2NJif.js";var o=()=>{const l=import.meta.url;const t={};if(l!==""){t.resourcesUrl=new URL(".",l).href}return e(t)};o().then((async e=>{await l();return t([["p-25fa8553",[[6,"xplor-btn-tooltip",{text:[1],tooltipText:[1,"tooltip-text"],tooltipPosition:[1,"tooltip-position"],type:[1],mode:[1],iconPosition:[1,"icon-position"],disabled:[4]}],[1,"xplor-chat-widget",{languageOptions:[16,"language-options"],textId:[1,"text-id"],apiKey:[1,"api-key"],selectedLanguage:[32],textValue:[32]}],[6,"xplor-avatar-and-name",{name:[1],src:[1],size:[1],color:[1],status:[1]}],[2,"xplor-date-picker",{value:[1025],label:[1],placeholder:[1],type:[1],monthType:[1,"month-type"],display:[1],dateFormat:[1,"date-format"],min:[1],max:[1],readonly:[4],disabled:[4],clearable:[4],closeOnSelect:[4,"close-on-select"],bgColor:[1,"bg-color"],color:[1],startWeekOnSunday:[4,"start-week-on-sunday"],error:[1],hideDetails:[8,"hide-details"],required:[4],isOpen:[32],inputText:[32],dropdownPosition:[32]},[[4,"click","handleDocumentClick"]]],[2,"xplor-drag-and-drop-input",{disabled:[4],accepts:[1],label:[1],browseLabel:[1,"browse-label"],dragover:[32],currentFile:[32],clearCurrentFile:[64]}],[2,"xplor-input-send",{placeholder:[1],disabled:[4],maxLength:[2,"max-length"],value:[1025],buttonText:[1,"button-text"],buttonType:[1,"button-type"],internalValue:[32]}],[4,"xplor-modal-persistent",{open:[4],width:[1],maxWidth:[1,"max-width"],maxHeight:[1,"max-height"],loading:[4]}],[6,"xplor-alert-dialog",{open:[1028],width:[1],persistent:[4]},null,{open:["handleOpenChange"]}],[6,"xplor-alert-message",{type:[1],alertTitle:[1,"alert-title"],dismissible:[4]}],[2,"xplor-assistant",{apiEndpoint:[1,"api-endpoint"],userId:[1,"user-id"],userEmail:[1,"user-email"],userName:[1,"user-name"],sessionId:[1,"session-id"],quickReplies:[16,"quick-replies"],placeholder:[1],enableVoiceInput:[4,"enable-voice-input"],enableTextToSpeech:[4,"enable-text-to-speech"],autoSpeak:[4,"auto-speak"],maxHeight:[1,"max-height"],disabled:[4],messages:[32],internalSessionId:[32],isLoading:[32],isListening:[32],isSpeaking:[32],error:[32],inputValue:[32],hasVoiceSupport:[32],hasTTSSupport:[32],sendMessage:[64],clearHistory:[64],speak:[64],stopSpeaking:[64]},null,{sessionId:["handleSessionIdChange"]}],[2,"xplor-autocomplete",{items:[16],value:[1032],placeholder:[1],label:[1],disabled:[4],readonly:[4],clearable:[4],multiple:[4],minSearchLength:[2,"min-search-length"],itemValue:[1,"item-value"],itemText:[1,"item-text"],menuMaxWidth:[1,"menu-max-width"],renderItem:[16,"render-item"],renderSelection:[16,"render-selection"],isOpen:[32],searchQuery:[32],filteredItems:[32],selectedItems:[32],highlightedIndex:[32]},[[4,"click","handleDocumentClick"]]],[6,"xplor-badge",{backgroundColor:[1,"background-color"],color:[1],threshold:[2],variant:[1],size:[1],datatable:[4],text:[1]}],[2,"xplor-badge-active"],[2,"xplor-badge-archived"],[2,"xplor-badge-deleted"],[2,"xplor-badge-expired"],[2,"xplor-badge-inactive"],[2,"xplor-badge-recalled"],[6,"xplor-badge-session-booking",{booking:[16],item:[16]}],[2,"xplor-badge-upcoming"],[2,"xplor-badge-waitlist"],[6,"xplor-btn-back",{color:[1],minWidth:[1,"min-width"],minHeight:[1,"min-height"],gap:[1],disabled:[4]}],[2,"xplor-btn-back-to-parent",{size:[1],inline:[4],bgColor:[1,"bg-color"],color:[1],variant:[1]}],[6,"xplor-btn-icon",{color:[1],size:[8],iconSize:[8,"icon-size"],variant:[1],disabled:[4]}],[6,"xplor-btn-menu",{label:[1],options:[16],hiddenKeys:[16,"hidden-keys"],disabledKeys:[16,"disabled-keys"],color:[1],density:[1],show:[32]}],[6,"xplor-btn-toggle",{active:[1028],color:[1],disabled:[4],inactiveOutlined:[4,"inactive-outlined"]}],[6,"xplor-btn-toggle-group",{multiple:[4],density:[1]}],[6,"xplor-btn-toggle-secondary",{active:[1028],disabled:[4],inactiveOutlined:[4,"inactive-outlined"]}],[1,"xplor-checkbox",{initialChecked:[4,"initial-checked"],initialIndeterminate:[4,"initial-indeterminate"],disabled:[4],error:[4],label:[1],checked:[32],indeterminate:[32],isHovered:[32],isFocused:[32],isPressed:[32]},null,{initialChecked:["watchCheckedProp"],initialIndeterminate:["watchIndeterminateProp"]}],[2,"xplor-combobox",{items:[16],value:[1032],placeholder:[1],label:[1],disabled:[4],readonly:[4],clearable:[4],multiple:[4],allowCustom:[4,"allow-custom"],createMessage:[1,"create-message"],isOpen:[32],searchQuery:[32],filteredItems:[32],selectedItems:[32],highlightedIndex:[32],customItems:[32]},[[4,"click","handleDocumentClick"]]],[1,"xplor-datatable",{headers:[16],items:[16],loading:[4],pagination:[16],selected:[16],canSelect:[4,"can-select"],horizontalLines:[4,"horizontal-lines"],striped:[4],height:[8],skeletonLoader:[4,"skeleton-loader"],hover:[4],perPageOptions:[16,"per-page-options"],sortBy:[32],sortDirection:[32],internalSelected:[32],allSelected:[32]},null,{selected:["watchSelected"],items:["watchItems"]}],[6,"xplor-expansion-panel",{disabled:[4],open:[1028],panelId:[32],contentHeight:[32]}],[6,"xplor-expansion-panels",{value:[1025],multiple:[4],accordion:[4],openPanels:[32]},[[0,"xplorPanelToggle","handlePanelToggle"]]],[2,"xplor-file-upload",{accepts:[1],maxSize:[2,"max-size"],multiple:[4],disabled:[4],showPreview:[4,"show-preview"],label:[1],files:[32],isDragging:[32],error:[32]}],[6,"xplor-inline-checkbox",{checked:[1028],value:[8],color:[1],disabled:[4],indeterminate:[4],label:[1]}],[6,"xplor-inline-switch",{checked:[1028],value:[8],color:[1],disabled:[4],label:[1]}],[2,"xplor-input-file",{label:[1],placeholder:[1],color:[1],disabled:[4],multiple:[4],accept:[1],maxChips:[2,"max-chips"],counter:[4],showSize:[2,"show-size"],prependInnerIcon:[1,"prepend-inner-icon"],selectedFiles:[32]}],[6,"xplor-input-search",{value:[1025],placeholder:[1],bgColor:[1,"bg-color"],color:[1],disabled:[4],density:[1],isFocused:[32]}],[2,"xplor-input-select",{value:[1032],label:[1],placeholder:[1],options:[16],multiple:[4],bgColor:[1,"bg-color"],color:[1],disabled:[4],readonly:[4],hideDetails:[8,"hide-details"],error:[1],helperText:[1,"helper-text"],required:[4],isOpen:[32],isFocused:[32]}],[6,"xplor-input-text",{value:[1025],label:[1],placeholder:[1],type:[1],bgColor:[1,"bg-color"],color:[1],disabled:[4],readonly:[4],hideDetails:[8,"hide-details"],error:[1],helperText:[1,"helper-text"],required:[4],isFocused:[32]}],[2,"xplor-input-text-area",{value:[1025],label:[1],placeholder:[1],bgColor:[1,"bg-color"],color:[1],disabled:[4],readonly:[4],clearable:[4],rows:[2],hideDetails:[8,"hide-details"],error:[1],helperText:[1,"helper-text"],required:[4],isFocused:[32]}],[6,"xplor-input-text-secondary",{value:[1025],label:[1],placeholder:[1],type:[1],bgColor:[1,"bg-color"],disabled:[4],readonly:[4],hideDetails:[8,"hide-details"],error:[1],helperText:[1,"helper-text"],required:[4],isDirty:[4,"is-dirty"],isFocused:[32]}],[2,"xplor-input-title",{value:[1025],placeholder:[1],disabled:[4],readonly:[4]}],[1,"xplor-links",{brand:[1]}],[6,"xplor-nav-tabs",{value:[1025],items:[16],color:[1],grow:[4]}],[6,"xplor-section-card",{outlined:[4],rounded:[4],padding:[1]}],[6,"xplor-section-heading",{size:[1],text:[1]}],[1,"xplor-table",{columns:[16],data:[16],freeze:[4],multiselect:[4],striped:[4],selectedValues:[16,"selected-values"],isSortable:[4,"is-sortable"],sortableColumns:[16,"sortable-columns"],areAllSelected:[32],rowData:[32],hasScrolled:[32],selected:[32],sortTypeArray:[32],selectedDateRange:[32],currentPage:[32],totalPages:[32]},null,{data:["watchData"]}],[6,"xplor-text-bubble",{color:[1]}],[6,"xplor-text-field",{value:[1025],label:[1],placeholder:[1],type:[1],color:[1],variant:[1],bgColor:[1,"bg-color"],errorMessages:[16,"error-messages"],hideDetails:[8,"hide-details"],disabled:[4],readonly:[4],required:[4],isDirty:[4,"is-dirty"],clearable:[4],customClass:[1,"custom-class"],maxlength:[2],min:[2],max:[2],isFocused:[32],hasValue:[32]},null,{value:["handleValueChange"]}],[2,"xplor-time-picker",{value:[1025],label:[1],placeholder:[1],clearable:[4],prefill:[4],bgColor:[1,"bg-color"],showSeconds:[4,"show-seconds"],disabled:[4],readonly:[4],error:[1],hideDetails:[8,"hide-details"],required:[4],isOpen:[32],inputText:[32],hours:[32],minutes:[32],seconds:[32],period:[32],lastGoodValue:[32]},[[4,"click","handleDocumentClick"]]],[1,"xplor-avatar",{color:[1],disabled:[4],href:[1],name:[1],size:[1],src:[1],status:[1],target:[1]}],[1,"xplor-dropdown",{options:[16],selected:[1],handleChange:[16,"handle-change"]}],[2,"xplor-inline-date-picker",{selectedDate:[1025,"selected-date"],min:[1],max:[1],readonly:[4],color:[1],startWeekOnSunday:[4,"start-week-on-sunday"],currentYear:[32],currentMonth:[32],viewDate:[32]}],[6,"xplor-modal",{open:[1028],width:[1],maxWidth:[1,"max-width"],maxHeight:[1,"max-height"],scrollable:[4],persistent:[4],loading:[4],showTitle:[4,"show-title"]},null,{open:["handleOpenChange"]}],[6,"xplor-tooltip",{position:[1],trigger:[1],arrow:[4],open:[1028],content:[1],disabled:[4],tooltipStyle:[32],arrowStyle:[32]},[[4,"click","handleDocumentClick"]]],[6,"xplor-button",{text:[1],type:[1],mode:[1],size:[1],styles:[1],clickAction:[16,"click-action"],iconPosition:[1,"icon-position"],icon:[1],iconSvg:[1,"icon-svg"]}]]]],e)}));
+//# sourceMappingURL=xplor-component-library.esm.js.map

package/dist/xplor-component-library/xplor-component-library.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-component-library.esm.js","sources":["../../node_modules/.pnpm/@stencil+core@4.35.1/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.35.1 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}

package/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -0,0 +1,24 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1 @@
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,2 @@
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/loader.js';

package/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@xplor-education/core-stencil-components",
+  "version": "2.0.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Xplor Design System - Professional Stencil web components library with advanced datatable, forms, and UI components",
+  "license": "MIT",
+  "author": "Xplor Design Team",
+  "keywords": [
+    "stencil",
+    "web-components",
+    "datatable",
+    "component-library",
+    "design-system",
+    "ui-components",
+    "pagination",
+    "forms",
+    "react",
+    "vue",
+    "angular"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ionic-team/stencil-ds-output-targets.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues"
+  },
+  "homepage": "https://github.com/ionic-team/stencil-ds-output-targets#readme",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.js",
+  "es2017": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/component-library/component-library.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs.js",
+      "default": "./dist/index.mjs"
+    },
+    "./hydrate": {
+      "types": "./hydrate/index.d.ts",
+      "import": "./hydrate/index.js",
+      "require": "./hydrate/index.cjs.js",
+      "default": "./hydrate/index.js"
+    },
+    "./loader": {
+      "types": "./loader/index.d.ts",
+      "import": "./loader/index.js",
+      "require": "./loader/index.js",
+      "default": "./loader/index.js"
+    },
+    "./components/*.js": {
+      "types": "./dist/types/components/*.d.ts",
+      "import": "./components/*.js"
+    },
+    "./components": {
+      "types": "./dist/types/components.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist/",
+    "loader/",
+    "components/"
+  ],
+  "scripts": {
+    "build": "npm run css-build; stencil build --docs",
+    "test": "echo \"No tests specified\" && exit 0",
+    "start": "stencil build --dev --watch --serve & npm run css-build",
+    "generate": "stencil generate",
+    "css-build": "tailwindcss -i ./src/styles/directives.css -o ./src/styles/tailwind.css ",
+    "css": "tailwindcss -i ./src/styles/directives.css -o ./src/styles/tailwind.css --watch",
+    "css-build-watch": "tailwindcss -i ./src/styles/directives.css -o ./www/tailwind.css",
+    "prettier": "pnpm run prettier.base --write",
+    "prettier.base": "prettier \"./src/**/*.{ts,tsx,js,jsx}|*.{ts,tsx,js,jsx}\"",
+    "prettier.dry-run": "pnpm run prettier.base --list-different",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "npm run build & storybook build",
+    "prepublishOnly": "npm run build",
+    "pack": "npm pack",
+    "publish:npm": "npm publish"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.7",
+    "@stencil-community/postcss": "^2.2.0",
+    "@stencil/angular-output-target": "workspace:^",
+    "@stencil/core": "^4.35.1",
+    "@stencil/react-output-target": "workspace:*",
+    "@stencil/sass": "^3.2.1",
+    "@stencil/vue-output-target": "workspace:*",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-webpack5-compiler-swc": "^2.1.0",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/html": "^8.6.14",
+    "@storybook/html-vite": "^8.6.14",
+    "@storybook/html-webpack5": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@types/jest": "^29.5.14",
+    "@types/puppeteer": "2.0.1",
+    "postcss-pxtorem": "^6.1.0",
+    "stencil-tailwind-plugin": "^1.8.0",
+    "storybook": "^8.6.14",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.4.21",
+    "from": "^0.1.7",
+    "import": "^0.0.6",
+    "postcss": "^8.5.6",
+    "postcss-scss": "^4.0.9",
+    "uuid": "^11.1.0"
+  }
+}

package/readme.md

@@ -0,0 +1,315 @@
+# Xplor Component Library
+
+![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
+[![npm version](https://img.shields.io/npm/v/@xplor-education/component-library.svg)](https://www.npmjs.com/package/@xplor-education/component-library)
+[![license](https://img.shields.io/npm/l/@xplor-education/component-library.svg)](./LICENSE)
+
+A comprehensive, production-ready web components library built with Stencil. Features advanced components including a powerful datatable with pagination, sorting, and selection capabilities.
+
+## 🚀 Features
+
+- ✨ **50+ Components** - Buttons, forms, modals, datatables, and more
+- 📊 **Advanced Datatable** - Sorting, pagination, row selection, and custom cell rendering
+- 🎨 **Framework Agnostic** - Works with React, Vue, Angular, or vanilla JavaScript
+- 🔧 **TypeScript Support** - Full type definitions included
+- 📱 **Responsive** - Mobile-friendly components
+- ♿ **Accessible** - WCAG compliant
+- 🎭 **Customizable** - Themeable with CSS variables
+- 📦 **Tree Shakeable** - Import only what you need
+
+## 📦 Installation
+
+```bash
+npm install @xplor-education/component-library
+```
+
+or
+
+```bash
+yarn add @xplor-education/component-library
+```
+
+## 🔨 Usage
+
+### Vanilla JavaScript / HTML
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script type="module" src="https://unpkg.com/@xplor-education/component-library@2.0.0/dist/xplor-component-library/xplor-component-library.esm.js"></script>
+</head>
+<body>
+  <xplor-button text="Click Me" type="primary"></xplor-button>
+</body>
+</html>
+```
+
+### React
+
+```bash
+npm install @xplor-education/component-library xplor-component-library-react
+```
+
+```tsx
+import { XplorButton } from 'xplor-component-library-react';
+
+function App() {
+  return <XplorButton text="Click Me" type="primary" />;
+}
+```
+
+### Vue 3
+
+```bash
+npm install @xplor-education/component-library xplor-component-library-vue
+```
+
+```vue
+<template>
+  <xplor-button text="Click Me" type="primary"></xplor-button>
+</template>
+
+<script>
+import { defineCustomElements } from '@xplor-education/component-library/loader';
+
+defineCustomElements();
+</script>
+```
+
+### Angular
+
+```bash
+npm install @xplor-education/component-library xplor-component-library-angular
+```
+
+```typescript
+// app.module.ts
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineCustomElements } from '@xplor-education/component-library/loader';
+
+defineCustomElements();
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule {}
+```
+
+## 🎯 Component Examples
+
+### Datatable with Pagination (New in v2.0!)
+
+```html
+<xplor-datatable id="myTable" can-select="true" striped="true"></xplor-datatable>
+
+<script>
+  const table = document.getElementById('myTable');
+  
+  table.headers = [
+    { text: 'Name', value: 'name', sortable: true },
+    { text: 'Email', value: 'email', sortable: true },
+    { text: 'Status', value: 'status', align: 'center' }
+  ];
+  
+  table.items = [
+    { name: 'John Doe', email: 'john@example.com', status: 'Active' },
+    { name: 'Jane Smith', email: 'jane@example.com', status: 'Pending' }
+  ];
+  
+  table.pagination = {
+    page: 1,
+    perpage: 10,
+    total: 50
+  };
+  
+  table.addEventListener('xplorSelectionChange', (e) => {
+    console.log('Selected items:', e.detail);
+  });
+  
+  table.addEventListener('paginationChange', (e) => {
+    console.log('Page changed:', e.detail);
+  });
+</script>
+```
+
+### Buttons
+
+```html
+<xplor-button text="Primary" type="primary"></xplor-button>
+<xplor-button text="Secondary" type="secondary"></xplor-button>
+<xplor-button text="Ghost" type="ghost"></xplor-button>
+```
+
+### Form Inputs
+
+```html
+<xplor-input-text label="Email" placeholder="Enter your email" type="email"></xplor-input-text>
+<xplor-input-text-area label="Message" placeholder="Type your message"></xplor-input-text-area>
+<xplor-checkbox label="Accept terms"></xplor-checkbox>
+<xplor-input-select label="Country" placeholder="Select country"></xplor-input-select>
+```
+
+### Autocomplete & Combobox
+
+```html
+<xplor-autocomplete id="autocomplete" label="Search" clearable="true"></xplor-autocomplete>
+<xplor-combobox id="combobox" label="Tags" multiple="true"></xplor-combobox>
+
+<script>
+  document.getElementById('autocomplete').items = [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Banana', value: 'banana' }
+  ];
+</script>
+```
+
+### Date & Time Pickers
+
+```html
+<xplor-date-picker label="Select Date" clearable="true"></xplor-date-picker>
+<xplor-time-picker label="Select Time" show-seconds="true"></xplor-time-picker>
+```
+
+### Modals & Dialogs
+
+```html
+<xplor-button text="Open Modal" onclick="document.getElementById('myModal').open = true"></xplor-button>
+<xplor-modal id="myModal" title="My Modal">
+  <p>Modal content goes here</p>
+</xplor-modal>
+```
+
+## 📚 Available Components
+
+### Layout & Display Components
+- `xplor-section-card` - Card container
+- `xplor-section-heading` - Section headers
+- `xplor-avatar` - User avatars
+- `xplor-avatar-and-name` - Combined avatar and name display
+- `xplor-text-bubble` - Message bubbles
+- `xplor-badge-*` - Status badges (active, inactive, archived, etc.)
+- `xplor-links` - Navigation links
+- `xplor-tooltip` - Tooltips
+
+### Interactive Components
+- `xplor-dropdown` - Dropdown menus
+- `xplor-table` - Basic data table
+- `xplor-modal` - Modal dialogs
+- `xplor-modal-persistent` - Non-dismissible modals
+- `xplor-alert-dialog` - Alert dialogs
+- `xplor-alert-message` - Alert messages
+- `xplor-assistant` - AI assistant widget
+- `xplor-chat-widget` - Chat interface
+
+### Form Components
+- `xplor-input-text` - Text input
+- `xplor-input-text-secondary` - Rounded text input
+- `xplor-input-text-area` - Multi-line text
+- `xplor-input-title` - Title input
+- `xplor-input-select` - Select dropdown
+- `xplor-input-search` - Search input
+- `xplor-input-send` - Send input with button
+- `xplor-input-file` - File upload
+- `xplor-checkbox` - Checkbox
+- `xplor-inline-checkbox` - Inline checkbox
+- `xplor-inline-switch` - Toggle switch
+- `xplor-autocomplete` - Searchable select
+- `xplor-combobox` - Combo box with custom values
+- `xplor-date-picker` - Date selection
+- `xplor-time-picker` - Time selection
+- `xplor-inline-date-picker` - Inline date picker
+- `xplor-file-upload` - Advanced file upload
+
+### Navigation & Organization
+- `xplor-expansion-panels` - Accordion panels
+- `xplor-nav-tabs` - Navigation tabs
+- `xplor-btn-toggle-group` - Toggle button groups
+
+### Advanced Datatable ⭐ NEW in v2.0
+- `xplor-datatable` - Full-featured data table with:
+  - ✅ Sorting (ascending/descending)
+  - ✅ Pagination with configurable items per page
+  - ✅ Row selection with checkboxes
+  - ✅ Loading states with skeleton loader
+  - ✅ Fixed/sticky headers
+  - ✅ Horizontal and striped row styles
+  - ✅ Custom column configuration (width, alignment, sortable)
+  - ✅ Empty state handling
+  - ✅ Comprehensive event system
+  - ✅ Server-side data support
+
+## 🎨 Theming
+
+Components can be customized using CSS variables:
+
+```css
+xplor-button {
+  --button-primary-bg: #008480;
+  --button-primary-text: white;
+  --button-border-radius: 8px;
+}
+
+xplor-datatable {
+  --datatable-border-color: #e3e4e5;
+  --datatable-header-bg: #f7f8f9;
+  --datatable-row-hover: #f5f5f5;
+  --datatable-selected-bg: rgba(0, 132, 128, 0.08);
+  --datatable-primary-color: #008480;
+}
+```
+
+## 📖 Documentation
+
+For detailed documentation on each component, see the component's readme file in the [src/components](./src/components/) directory.
+
+## 🔧 Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm start
+
+# Build for production
+npm run build
+
+# Run Storybook
+npm run storybook
+```
+
+## 📦 Building and Publishing
+
+```bash
+# Build the library
+npm run build
+
+# Create tarball for testing
+npm run pack
+
+# Publish to npm
+npm run publish:npm
+```
+
+## 🤝 Contributing
+
+Contributions are welcome! Please read our contributing guidelines before submitting PRs.
+
+## 📝 License
+
+MIT © Xplor Design Team
+
+## 🔗 Links
+
+- [GitHub Repository](https://github.com/ionic-team/stencil-ds-output-targets)
+- [Issue Tracker](https://github.com/ionic-team/stencil-ds-output-targets/issues)
+- [NPM Package](https://www.npmjs.com/package/@xplor-education/component-library)
+
+## 📋 Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) for version history.
+
+---
+
+Built with ❤️ using [Stencil](https://stenciljs.com/)