UNPKG

daily-toolset

Version:

A lightweight, versatile collection of TypeScript utility functions for everyday development needs. Simplify and streamline your Node.js, React, and Next.js projects with a powerful suite of well-organized helpers for strings, arrays, dates, objects, and

1,706 lines (1,471 loc) 43.3 kB
/* @tailwind base; */ /* @tailwind utilities; */ .explita-spinner svg { display: inline; } @keyframes spin { to { transform: rotate(360deg); } } .explita-spinner svg { animation: spin 1s linear infinite; fill: #e5e7eb; } .explita-spinner svg[data-size="sm"] { width: 1rem; height: 1rem; } .explita-spinner svg[data-size="md"] { width: 1.5rem; height: 1.5rem; } .explita-spinner svg[data-size="lg"] { width: 2rem; height: 2rem; } .explita-spinner svg[data-size="xl"] { width: 2.5rem; height: 2.5rem; } .explita-spinner svg[data-color="blue"] { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity, 1)); } .explita-spinner svg[data-color="red"] { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity, 1)); } .explita-spinner svg[data-color="green"] { --tw-text-opacity: 1; color: rgb(22 163 74 / var(--tw-text-opacity, 1)); } .explita-spinner svg[data-color="yellow"] { --tw-text-opacity: 1; color: rgb(234 179 8 / var(--tw-text-opacity, 1)); } .explita-spinner svg:is(.dark *) { fill: #4b5563; } .explita-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; border-radius: calc(var(--radius) - 2px); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; outline: 2px solid transparent; outline-offset: 2px; 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; } .explita-button:focus-visible { --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(0px + 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); --tw-ring-color: hsl(var(--ring)); } .explita-button:disabled { pointer-events: none; opacity: 0.5; } .explita-button svg { pointer-events: none; width: 1rem; height: 1rem; flex-shrink: 0; } .explita-button .explita-spinner { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; } .explita-button.default { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); --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); } .explita-button.default:hover { background-color: hsl(var(--primary) / 0.9); } .explita-button.destructive { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); --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); } .explita-button.destructive:hover { background-color: hsl(var(--destructive) / 0.9); } .explita-button.outline { border-width: 1px; border-color: hsl(var(--input)); background-color: hsl(var(--background)); --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); } .explita-button.outline:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .explita-button.secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); --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); } .explita-button.secondary:hover { background-color: hsl(var(--secondary) / 0.8); } .explita-button.ghost:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .explita-button.link { color: hsl(var(--primary)); text-underline-offset: 4px; } .explita-button.link:hover { text-decoration-line: underline; } .explita-button.teal { --tw-bg-opacity: 1; background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); --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); } .explita-button.teal:hover { --tw-bg-opacity: 1; background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); } .explita-button.green { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); --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); } .explita-button.green:hover { --tw-bg-opacity: 1; background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); } .explita-button.size-default { height: 2.25rem; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .explita-button.size-sm { height: 2rem; border-radius: calc(var(--radius) - 2px); padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.75rem; line-height: 1rem; } .explita-button.size-lg { height: 2.5rem; border-radius: calc(var(--radius) - 2px); padding-left: 1rem; padding-right: 1rem; } .explita-button.size-icon { width: 2.25rem; height: 2.25rem; } .explita-input-root { display: flex; flex-direction: column; gap: 0.25rem; } .explita-input-root .chevron-icon { margin-left: 0.5rem; height: 1rem; width: 1rem; flex-shrink: 0; opacity: 0.5; } .explita-input-root div { position: relative; } .explita-input-root .input-label { position: relative; display: flex; gap: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } .explita-input-root .input-label[data-required="true"]::after { margin-left: 0.125rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity, 1)); --tw-content: "*"; content: var(--tw-content); } .explita-input-root .left-section { position: absolute; top: 10px; left: 0.5rem; --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); } .explita-input-root input { display: flex; height: 2.25rem; width: 100%; border-radius: calc(var(--radius) - 2px); border-width: 1px; border-color: hsl(var(--input)); background-color: transparent; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 1rem; line-height: 1.5rem; --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); 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; } .explita-input-root input::file-selector-button { border-width: 0px; background-color: transparent; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: hsl(var(--foreground)); } .explita-input-root input::-moz-placeholder { color: hsl(var(--muted-foreground)); } .explita-input-root input::placeholder { color: hsl(var(--muted-foreground)); } .explita-input-root input:focus-visible { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-color: hsl(var(--ring)); } .explita-input-root input:disabled { cursor: not-allowed; opacity: 0.5; } .explita-input-root input[data-error="true"] { --tw-border-opacity: 1; border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); } .explita-input-root input:focus-visible[data-error="false"] { --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(1px + 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); } .explita-input-root input:is(.dark *) { --tw-bg-opacity: 1 !important; background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)) !important; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } @media (min-width: 768px) { .explita-input-root input { font-size: 0.875rem; line-height: 1.25rem; } } .explita-input-root input.has-left-section { padding-left: 2.25rem; } .explita-input-root .input-error { font-size: 0.75rem; line-height: 1rem; --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } .explita-input-root .date-input { width: 100%; justify-content: flex-start; padding-left: 0.5rem; padding-right: 1rem; text-align: left; font-weight: 400; } .explita-input-root .date-input[data-empty="true"] { margin-bottom: 0px; } .explita-input-root .date-input[data-clearable="true"] { padding-right: 2rem; } .explita-input-root .date-input[data-empty="true"] { color: hsl(var(--muted-foreground)); } .explita-input-root .date-input:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .explita-input-root .date-input[data-empty="true"] span, .explita-input-root .multi-select-input[data-empty="true"] span, .explita-input-root .select-trigger[data-empty="true"] span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .explita-input-root .date-input[data-empty="true"] span:is(.dark *), .explita-input-root .multi-select-input[data-empty="true"] span:is(.dark *), .explita-input-root .select-trigger[data-empty="true"] span:is(.dark *) { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); } .explita-input-root .clear-input { position: absolute; right: 0px; top: 0.125rem; z-index: 50; cursor: pointer; padding: 0.5rem; --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } .explita-checkbox-root, .explita-switch-toggle-root { display: flex; align-items: center; gap: 0.5rem; } .explita-checkbox-root label { margin-left: 0.5rem; cursor: pointer; font-size: 0.875rem; line-height: 1.25rem; } .explita-checkbox-root button { width: 1.25rem; height: 1.25rem; flex-shrink: 0; border-radius: calc(var(--radius) - 4px); border-width: 1px; border-color: hsl(var(--primary)); --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); } .explita-checkbox-root button:focus-visible { outline: 2px solid transparent; outline-offset: 2px; --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(1px + 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); --tw-ring-color: hsl(var(--ring)); } .explita-checkbox-root button:disabled { cursor: not-allowed; opacity: 0.5; } .explita-checkbox-root button[data-state="checked"] { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .explita-checkbox-root .indicator { display: flex; align-items: center; justify-content: center; color: currentColor; } .explita-input-root .multi-select-input { height: auto; width: 100%; min-width: 7rem; justify-content: space-between; padding-left: 0.5rem; padding-right: 0.5rem; } .explita-input-root .multi-select-input[data-empty="true"] { margin-bottom: 0px; } .explita-input-root .multi-select-input[data-error="true"] { --tw-border-opacity: 1; border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); } .explita-input-root .multi-select-input[data-empty="false"] { padding: 0.25rem; } .explita-input-root .multi-select-input[data-empty="true"] { color: hsl(var(--muted-foreground)); } .explita-input-root .multi-select-input:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity, 1)); } .explita-input-root .multi-select-items { display: flex; flex-wrap: wrap; gap: 0.25rem; } .explita-input-root .multi-select-item { display: flex; align-items: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem; border-radius: 0.25rem; --tw-bg-opacity: 1; background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; } .explita-input-root .multi-select-item:hover { --tw-bg-opacity: 1; background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1)); } .explita-input-root .multi-select-item:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity, 1)); } .explita-input-root .multi-select-item:hover:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); } .select-list { max-height: 300px; } .select-list .emty-list { height: -moz-fit-content; height: fit-content; padding: 0.5rem; padding-top: 0.75rem; text-align: center; } .select-list .select-list-item { display: flex; align-items: center; justify-content: space-between; } .select-list .select-list-item span { display: flex; flex-direction: column; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select-list .select-list-item span.description { font-size: 0.75rem; line-height: 1rem; } .select-list .select-list-item .check-icon { margin-right: 0.5rem; width: 1rem; height: 1rem; opacity: 0; } .select-list .select-list-item .check-icon[data-checked="true"] { opacity: 1; } .explita-radio-group-button { display: flex; align-items: center; } .explita-radio-group-button > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } .explita-input-root .select-trigger { width: 100%; min-width: 5rem; justify-content: space-between; overflow: hidden; padding-left: 0.5rem; padding-right: 0.5rem; } .explita-input-root .select-trigger[data-empty="true"] { margin-bottom: 0px; } .explita-input-root .select-trigger[data-error="true"] { --tw-border-opacity: 1; border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); } .explita-input-root .select-trigger[data-clearable="true"] { padding-right: 2.25rem; } .explita-input-root .select-trigger[data-empty="true"] { color: hsl(var(--muted-foreground)); } .explita-input-root .select-trigger:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity, 1)); } .explita-popover-content { z-index: 9999999; width: 100%; border-radius: calc(var(--radius) - 2px); border-width: 1px; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); padding: 0px; color: hsl(var(--popover-foreground)); --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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: 2px solid transparent; outline-offset: 2px; } .explita-popover-content:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(31 41 55 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); } .explita-popover-content:not(.explita-calendar-content) { max-height: var(--radix-popover-content-available-height); min-width: var(--radix-popover-trigger-width); } .explita-input-root textarea { display: block; min-height: -moz-fit-content; min-height: fit-content; width: 100%; border-radius: calc(var(--radius) - 2px); border-width: 1px; border-color: hsl(var(--input)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 1rem; line-height: 1.5rem; --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); } .explita-input-root textarea::-moz-placeholder { color: hsl(var(--muted-foreground)); } .explita-input-root textarea::placeholder { color: hsl(var(--muted-foreground)); } .explita-input-root textarea:focus-visible { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-color: hsl(var(--ring)); } .explita-input-root textarea:disabled { cursor: not-allowed; opacity: 0.5; } .explita-input-root textarea[data-error="true"] { --tw-border-opacity: 1; border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); } .explita-input-root textarea:focus-visible[data-error="false"] { --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(1px + 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); } .explita-input-root textarea:is(.dark *) { --tw-bg-opacity: 1 !important; background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)) !important; --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity, 1)); } @media (min-width: 768px) { .explita-input-root textarea { font-size: 0.875rem; line-height: 1.25rem; } } .explita-calendar-root { position: relative; overflow: hidden; border-radius: calc(var(--radius) - 2px); padding: 0.75rem; } .explita-calendar-root .months { display: flex; flex-direction: column; } .explita-calendar-root .months > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } @media (min-width: 640px) { .explita-calendar-root .months { flex-direction: row; } .explita-calendar-root .months > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); --tw-space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0px * var(--tw-space-y-reverse)); } } .explita-calendar-root .month > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .explita-calendar-root .caption { display: flex; align-items: center; justify-content: center; padding-top: 0.25rem; } .explita-calendar-root .caption-label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; } .explita-calendar-root .nav { display: flex; align-items: center; } .explita-calendar-root .nav > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); } .explita-calendar-root .nav-button { height: 1.75rem; width: 1.75rem; background-color: transparent; padding: 0px; opacity: 0.5; } .explita-calendar-root .nav-button:hover { opacity: 1; } .explita-calendar-root .nav-next { position: absolute; right: 0.75rem; } .explita-calendar-root .nav-prev { position: absolute; left: 0.75rem; } .explita-calendar-root .table { width: 100%; border-collapse: collapse; } .explita-calendar-root .table > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } .explita-calendar-root .head-row { display: flex; } .explita-calendar-root .head-cell { width: 2rem; border-radius: calc(var(--radius) - 2px); font-size: 0.8rem; font-weight: 400; color: hsl(var(--muted-foreground)); } .explita-calendar-root .row { margin-top: 0.5rem; display: flex; width: 100%; } .explita-calendar-root .cell { position: relative; padding: 0px; text-align: center; font-size: 0.875rem; line-height: 1.25rem; } .explita-calendar-root .cell:focus-within { position: relative; z-index: 20; } .explita-calendar-root .cell:has([aria-selected]) { background-color: hsl(var(--accent)); } .explita-calendar-root .cell:has([aria-selected].day-range-end) { border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .explita-calendar-root .cell:has([aria-selected].dayoutside) { background-color: hsl(var(--accent) / 0.5); } .explita-calendar-root .cell.range-cell:has(>.day-range-end) { border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .explita-calendar-root .cell.range-cell:has(>.day-range-start) { border-top-left-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); } .explita-calendar-root .cell.range-cell:has([aria-selected]):first-child { border-top-left-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); } .explita-calendar-root .cell.range-cell:has([aria-selected]):last-child { border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .explita-calendar-root .cell.single-cell:has([aria-selected]) { border-radius: calc(var(--radius) - 2px); } .explita-calendar-root .day { height: 2rem; width: 2rem; padding: 0px; font-weight: 400; } .explita-calendar-root .day[aria-selected="true"] { opacity: 1; } .explita-calendar-root .day-selected { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .explita-calendar-root .day-selected:hover { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .explita-calendar-root .day-selected:focus { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .explita-calendar-root .day-today { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .explita-calendar-root .day-outside { color: hsl(var(--muted-foreground)); } .explita-calendar-root .day-outside[aria-selected="true"] { background-color: hsl(var(--accent) / 0.5); color: hsl(var(--muted-foreground)); } .explita-calendar-root .day-disabled { color: hsl(var(--muted-foreground)); opacity: 0.5; } .explita-calendar-root .day-range-middle[aria-selected="true"] { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .explita-calendar-root .day-hidden { visibility: hidden; } .explita-calendar-root .icon-size, .explita-input-root .icon-size, .explita-icon-size { width: 1rem; height: 1rem; } .explita-calendar-root .year-picker-label { -webkit-user-select: none; -moz-user-select: none; user-select: none; border-radius: 0.25rem; padding: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .explita-calendar-root .year-picker-label:hover { --tw-scale-x: 1.1; --tw-scale-y: 1.1; 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)); background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .explita-calendar-root .year-picker-root { position: absolute; right: 0px; left: 0px; bottom: -100%; z-index: 50; display: flex; height: 100%; flex-direction: column; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .explita-calendar-root .year-picker-root[data-open="true"] { bottom: 0px; transition-duration: 100ms; } .explita-calendar-root .year-picker-root:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity, 1)); } .explita-calendar-root .year-picker-root .title { display: block; background-color: hsl(var(--accent)); padding: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; text-align: center; font-weight: 600; } .explita-calendar-root .year-picker-root .title:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1)); } .explita-calendar-root .year-picker-root .year-picker-scroll-area { height: 100%; width: 100%; } .explita-calendar-root .year-picker-root .items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.125rem; padding: 0.25rem; } .explita-calendar-root .year-picker-root .items .item { border-radius: 0.25rem; padding: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; text-align: center; } .explita-calendar-root .year-picker-root .items .item:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .explita-calendar-root .year-picker-root .items .item[data-active="true"] { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .explita-calendar-content, .explita-multi-select-content { z-index: 9999999; width: auto; padding: 0px; } .explita-password-popover { z-index: 9999999; width: 100%; padding: 0.75rem; padding-top: 0.25rem; } .explita-password-popover .password-requirement { margin-top: 0.5rem; display: flex; align-items: center; -moz-column-gap: 0.5rem; column-gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; } .explita-password-popover .password-requirement.success { --tw-text-opacity: 1; color: rgb(20 184 166 / var(--tw-text-opacity, 1)); } .explita-password-popover .password-requirement.error { --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } .explita-command-dialog { overflow: hidden; padding: 0px; } .explita-command [cmdk-group-heading] { padding-left: 0.5rem; padding-right: 0.5rem; font-weight: 500; color: hsl(var(--muted-foreground)); } .explita-command [cmdk-group]:not([hidden]) ~[cmdk-group] { padding-top: 0px; } .explita-command [cmdk-group] { padding-left: 0.5rem; padding-right: 0.5rem; } .explita-command [cmdk-input-wrapper] svg { height: 1.25rem; width: 1.25rem; } .explita-command [cmdk-input] { height: 3rem; } .explita-command [cmdk-item] { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .explita-command [cmdk-item] svg { height: 1.25rem; width: 1.25rem; } .explita-command-input-wrapper { display: flex; align-items: center; border-bottom-width: 1px; padding-left: 0.75rem; padding-right: 0.75rem; } .explita-command-input-wrapper svg { margin-right: 0.5rem; height: 1rem; width: 1rem; flex-shrink: 0; opacity: 0.5; } .explita-command-input-wrapper .input { display: flex; height: 2.5rem; width: 100%; border-radius: calc(var(--radius) - 2px); background-color: transparent; padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; outline: 2px solid transparent; outline-offset: 2px; } .explita-command-input-wrapper .input::-moz-placeholder { color: hsl(var(--muted-foreground)); } .explita-command-input-wrapper .input::placeholder { color: hsl(var(--muted-foreground)); } .explita-command-input-wrapper .input:disabled { cursor: not-allowed; opacity: 0.5; } .explita-command-list { max-height: 300px; overflow-y: auto; overflow-x: hidden; } .explita-command-empty { padding-top: 1.5rem; padding-bottom: 1.5rem; text-align: center; font-size: 0.875rem; line-height: 1.25rem; } .explita-command-group { overflow: hidden; padding: 0.25rem; color: hsl(var(--foreground)); } .explita-command-group [cmdk-group-heading] { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: hsl(var(--muted-foreground)); } .explita-command-separator { margin-left: -0.25rem; margin-right: -0.25rem; height: 1px; background-color: hsl(var(--border)); } .explita-command-item { position: relative; display: flex; cursor: default; -webkit-user-select: none; -moz-user-select: none; user-select: none; align-items: center; gap: 0.5rem; border-radius: calc(var(--radius) - 4px); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; outline: 2px solid transparent; outline-offset: 2px; } .explita-command-item[data-disabled="true"] { pointer-events: none; } .explita-command-item[data-selected="true"] { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .explita-command-item[data-disabled="true"] { opacity: 0.5; } .explita-command-item svg { pointer-events: none; width: 1rem; height: 1rem; flex-shrink: 0; } .explita-command-shortcut { margin-left: auto; font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.1em; color: hsl(var(--muted-foreground)); } .explita-dialog-overlay { position: fixed; inset: 0px; z-index: 50; background-color: rgb(0 0 0 / 0.8); } .explita-dialog-content { position: fixed; left: 50%; top: 50%; z-index: 50; display: grid; width: 100%; max-width: 32rem; --tw-translate-x: -50%; --tw-translate-y: -50%; 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)); gap: 1rem; border-width: 1px; background-color: hsl(var(--background)); padding: 1.5rem; --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); transition-duration: 200ms; } @media (min-width: 640px) { .explita-dialog-content { border-radius: var(--radius); } } .explita-dialog-close { position: absolute; right: 1rem; top: 1rem; border-radius: calc(var(--radius) - 4px); opacity: 0.7; --tw-ring-offset-color: hsl(var(--background)); transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .explita-dialog-close:hover { opacity: 1; } .explita-dialog-close:focus { outline: 2px solid transparent; outline-offset: 2px; --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); --tw-ring-color: hsl(var(--ring)); --tw-ring-offset-width: 2px; } .explita-dialog-close:disabled { pointer-events: none; } .explita-dialog-close[data-state="open"] { background-color: hsl(var(--accent)); color: hsl(var(--muted-foreground)); } .explita-dialog-header { display: flex; flex-direction: column; } .explita-dialog-header > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); } .explita-dialog-header { text-align: center; } @media (min-width: 640px) { .explita-dialog-header { text-align: left; } } .explita-dialog-footer { display: flex; flex-direction: column-reverse; } @media (min-width: 640px) { .explita-dialog-footer { flex-direction: row; justify-content: flex-end; } .explita-dialog-footer > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } } .explita-dialog-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; line-height: 1; letter-spacing: -0.025em; } .explita-dialog-description { font-size: 0.875rem; line-height: 1.25rem; color: hsl(var(--muted-foreground)); } .explita-radio-group-root { display: grid; gap: 0.5rem; } .explita-radio-group-item { aspect-ratio: 1 / 1; height: 1rem; width: 1rem; border-radius: 9999px; border-width: 1px; border-color: hsl(var(--primary)); color: hsl(var(--primary)); --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); } .explita-radio-group-item:focus { outline: 2px solid transparent; outline-offset: 2px; } .explita-radio-group-item:focus-visible { --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(1px + 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); --tw-ring-color: hsl(var(--ring)); } .explita-radio-group-item:disabled { cursor: not-allowed; opacity: 0.5; } .explita-radio-group-item .indicator { display: flex; align-items: center; justify-content: center; } .explita-radio-group-item .button { height: 0.875rem; width: 0.875rem; fill: hsl(var(--primary)); } .explita-scroll-area-root { position: relative; overflow: hidden; } .explita-scroll-area-viewport { height: 100%; width: 100%; border-radius: inherit; } .explita-scroll-area-scrollbar { display: flex; touch-action: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; 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; } .explita-scroll-area-scrollbar.vertical { height: 100%; width: 0.625rem; border-left-width: 1px; border-left-color: transparent; padding: 1px; } .explita-scroll-area-scrollbar.horizontal { height: 0.625rem; flex-direction: column; border-top-width: 1px; border-top-color: transparent; padding: 1px; } .explita-scroll-area-thumb { position: relative; flex: 1 1 0%; border-radius: 9999px; background-color: hsl(var(--border)); } .explita-switch-root { display: inline-flex; height: 1.25rem; width: 2.25rem; flex-shrink: 0; cursor: pointer; align-items: center; border-radius: 9999px; border-width: 2px; border-color: transparent; --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); 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; } .explita-switch-root:focus-visible { outline: 2px solid transparent; outline-offset: 2px; --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); --tw-ring-color: hsl(var(--ring)); --tw-ring-offset-width: 2px; --tw-ring-offset-color: hsl(var(--background)); } .explita-switch-root:disabled { cursor: not-allowed; opacity: 0.5; } .explita-switch-root[data-state="checked"] { background-color: hsl(var(--primary)); } .explita-switch-root[data-state="unchecked"] { background-color: hsl(var(--input)); } .explita-switch-thumb { pointer-events: none; display: block; height: 1rem; width: 1rem; border-radius: 9999px; background-color: hsl(var(--background)); --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); --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(0px + 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); transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .explita-switch-thumb[data-state="checked"] { --tw-translate-x: 1rem; 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)); } .explita-switch-thumb[data-state="unchecked"] { --tw-translate-x: 0px; 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)); } :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --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%; --radius: 0.5rem; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --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%; } *, ::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-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --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; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::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-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --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; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }