@wakastellar/ui 0.1.0

package/src/styles/code-highlight.css

@@ -0,0 +1,232 @@
+/* Styles de coloration syntaxique ultra-spécifiques pour éviter les conflits avec TweakCN */
+
+/* Override complet pour les éléments de code */
+.waka-code pre[class*="language-"] code[class*="language-"],
+pre[class*="language-"] code[class*="language-"] {
+  color: inherit !important;
+  background: transparent !important;
+  text-shadow: none !important;
+  font-family: inherit !important;
+  font-size: inherit !important;
+  line-height: inherit !important;
+}
+
+/* Styles de base pour les blocs de code */
+.waka-code pre[class*="language-"],
+pre[class*="language-"] {
+  background: #f8f9fa !important;
+  border: 1px solid #e9ecef !important;
+  border-radius: 0.5rem !important;
+  padding: 1rem !important;
+  margin: 0.5rem 0 !important;
+  overflow-x: auto !important;
+  font-family: 'Fira Code', 'Monaco', 'Consolas', 'Ubuntu Mono', monospace !important;
+  font-size: 0.875rem !important;
+  line-height: 1.5 !important;
+  color: #333 !important;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+  .waka-code pre[class*="language-"],
+  pre[class*="language-"] {
+    background: #1a1a1a !important;
+    border-color: #333 !important;
+    color: #e6e6e6 !important;
+  }
+}
+
+/* Coloration syntaxique avec sélecteurs ultra-spécifiques */
+.waka-code .token.comment,
+.waka-code .token.prolog,
+.waka-code .token.doctype,
+.waka-code .token.cdata,
+pre[class*="language-"] .token.comment,
+pre[class*="language-"] .token.prolog,
+pre[class*="language-"] .token.doctype,
+pre[class*="language-"] .token.cdata {
+  color: #6a737d !important;
+  font-style: italic !important;
+}
+
+.waka-code .token.punctuation,
+pre[class*="language-"] .token.punctuation {
+  color: #586069 !important;
+}
+
+.waka-code .token.property,
+.waka-code .token.tag,
+.waka-code .token.boolean,
+.waka-code .token.number,
+.waka-code .token.constant,
+.waka-code .token.symbol,
+.waka-code .token.deleted,
+pre[class*="language-"] .token.property,
+pre[class*="language-"] .token.tag,
+pre[class*="language-"] .token.boolean,
+pre[class*="language-"] .token.number,
+pre[class*="language-"] .token.constant,
+pre[class*="language-"] .token.symbol,
+pre[class*="language-"] .token.deleted {
+  color: #005cc5 !important;
+}
+
+.waka-code .token.selector,
+.waka-code .token.attr-name,
+.waka-code .token.string,
+.waka-code .token.char,
+.waka-code .token.builtin,
+.waka-code .token.inserted,
+pre[class*="language-"] .token.selector,
+pre[class*="language-"] .token.attr-name,
+pre[class*="language-"] .token.string,
+pre[class*="language-"] .token.char,
+pre[class*="language-"] .token.builtin,
+pre[class*="language-"] .token.inserted {
+  color: #032f62 !important;
+}
+
+.waka-code .token.operator,
+.waka-code .token.entity,
+.waka-code .token.url,
+.waka-code .language-css .token.string,
+.waka-code .style .token.string,
+pre[class*="language-"] .token.operator,
+pre[class*="language-"] .token.entity,
+pre[class*="language-"] .token.url,
+pre[class*="language-"] .language-css .token.string,
+pre[class*="language-"] .style .token.string {
+  color: #d73a49 !important;
+}
+
+.waka-code .token.atrule,
+.waka-code .token.attr-value,
+.waka-code .token.keyword,
+pre[class*="language-"] .token.atrule,
+pre[class*="language-"] .token.attr-value,
+pre[class*="language-"] .token.keyword {
+  color: #d73a49 !important;
+  font-weight: 600 !important;
+}
+
+.waka-code .token.function,
+.waka-code .token.class-name,
+pre[class*="language-"] .token.function,
+pre[class*="language-"] .token.class-name {
+  color: #6f42c1 !important;
+}
+
+.waka-code .token.regex,
+.waka-code .token.important,
+.waka-code .token.variable,
+pre[class*="language-"] .token.regex,
+pre[class*="language-"] .token.important,
+pre[class*="language-"] .token.variable {
+  color: #e36209 !important;
+}
+
+/* Dark theme colors */
+@media (prefers-color-scheme: dark) {
+  .waka-code .token.comment,
+  .waka-code .token.prolog,
+  .waka-code .token.doctype,
+  .waka-code .token.cdata,
+  pre[class*="language-"] .token.comment,
+  pre[class*="language-"] .token.prolog,
+  pre[class*="language-"] .token.doctype,
+  pre[class*="language-"] .token.cdata {
+    color: #8b949e !important;
+  }
+
+  .waka-code .token.punctuation,
+  pre[class*="language-"] .token.punctuation {
+    color: #c9d1d9 !important;
+  }
+
+  .waka-code .token.property,
+  .waka-code .token.tag,
+  .waka-code .token.boolean,
+  .waka-code .token.number,
+  .waka-code .token.constant,
+  .waka-code .token.symbol,
+  .waka-code .token.deleted,
+  pre[class*="language-"] .token.property,
+  pre[class*="language-"] .token.tag,
+  pre[class*="language-"] .token.boolean,
+  pre[class*="language-"] .token.number,
+  pre[class*="language-"] .token.constant,
+  pre[class*="language-"] .token.symbol,
+  pre[class*="language-"] .token.deleted {
+    color: #79c0ff !important;
+  }
+
+  .waka-code .token.selector,
+  .waka-code .token.attr-name,
+  .waka-code .token.string,
+  .waka-code .token.char,
+  .waka-code .token.builtin,
+  .waka-code .token.inserted,
+  pre[class*="language-"] .token.selector,
+  pre[class*="language-"] .token.attr-name,
+  pre[class*="language-"] .token.string,
+  pre[class*="language-"] .token.char,
+  pre[class*="language-"] .token.builtin,
+  pre[class*="language-"] .token.inserted {
+    color: #a5d6ff !important;
+  }
+
+  .waka-code .token.operator,
+  .waka-code .token.entity,
+  .waka-code .token.url,
+  .waka-code .language-css .token.string,
+  .waka-code .style .token.string,
+  pre[class*="language-"] .token.operator,
+  pre[class*="language-"] .token.entity,
+  pre[class*="language-"] .token.url,
+  pre[class*="language-"] .language-css .token.string,
+  pre[class*="language-"] .style .token.string {
+    color: #ff7b72 !important;
+  }
+
+  .waka-code .token.atrule,
+  .waka-code .token.attr-value,
+  .waka-code .token.keyword,
+  pre[class*="language-"] .token.atrule,
+  pre[class*="language-"] .token.attr-value,
+  pre[class*="language-"] .token.keyword {
+    color: #ff7b72 !important;
+  }
+
+  .waka-code .token.function,
+  .waka-code .token.class-name,
+  pre[class*="language-"] .token.function,
+  pre[class*="language-"] .token.class-name {
+    color: #d2a8ff !important;
+  }
+
+  .waka-code .token.regex,
+  .waka-code .token.important,
+  .waka-code .token.variable,
+  pre[class*="language-"] .token.regex,
+  pre[class*="language-"] .token.important,
+  pre[class*="language-"] .token.variable {
+    color: #ffa657 !important;
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .waka-code pre[class*="language-"],
+  pre[class*="language-"] {
+    font-size: 0.75rem !important;
+    padding: 0.75rem !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .waka-code pre[class*="language-"],
+  pre[class*="language-"] {
+    font-size: 1rem !important;
+    padding: 1.5rem !important;
+  }
+}

package/src/styles/datepicker.css

@@ -0,0 +1,420 @@
+/* ============================================
+   Styles pour react-datepicker 
+   Isolation contre TweakCN et styles globaux
+   ============================================ */
+
+/* Reset et isolation de base */
+.react-datepicker-wrapper,
+.react-datepicker__input-container {
+  display: block !important;
+  width: 100% !important;
+}
+
+/* Container principal - haute priorité */
+.react-datepicker-popper {
+  z-index: 9999 !important;
+}
+
+.react-datepicker {
+  font-family: inherit !important;
+  font-size: 0.875rem !important;
+  background-color: hsl(var(--popover)) !important;
+  color: hsl(var(--popover-foreground)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+  border-radius: 0.5rem !important;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+  display: inline-block !important;
+  position: relative !important;
+}
+
+/* Header */
+.react-datepicker__header {
+  text-align: center !important;
+  background-color: hsl(var(--popover)) !important;
+  border-bottom: 1px solid hsl(var(--border)) !important;
+  border-top-left-radius: 0.5rem !important;
+  border-top-right-radius: 0.5rem !important;
+  padding: 0.5rem 0 !important;
+  position: relative !important;
+}
+
+.react-datepicker__current-month {
+  margin-top: 0 !important;
+  color: hsl(var(--foreground)) !important;
+  font-weight: 600 !important;
+  font-size: 0.875rem !important;
+}
+
+.react-datepicker__day-names {
+  margin-bottom: -0.5rem !important;
+  display: flex !important;
+  justify-content: space-around !important;
+  padding: 0.5rem 0 !important;
+}
+
+.react-datepicker__day-name {
+  color: hsl(var(--muted-foreground)) !important;
+  display: inline-block !important;
+  width: 2rem !important;
+  line-height: 2rem !important;
+  text-align: center !important;
+  margin: 0.166rem !important;
+  font-weight: 500 !important;
+  font-size: 0.75rem !important;
+}
+
+/* Navigation */
+.react-datepicker__navigation {
+  background: none !important;
+  border: none !important;
+  line-height: 1.7rem !important;
+  text-align: center !important;
+  cursor: pointer !important;
+  position: absolute !important;
+  top: 0.5rem !important;
+  padding: 0 !important;
+  z-index: 1 !important;
+  height: 2rem !important;
+  width: 2rem !important;
+  text-indent: -999em !important;
+  overflow: hidden !important;
+  border-radius: 0.25rem !important;
+}
+
+.react-datepicker__navigation:hover {
+  background-color: hsl(var(--accent)) !important;
+}
+
+.react-datepicker__navigation--previous {
+  left: 0.5rem !important;
+  border-right-color: hsl(var(--foreground)) !important;
+}
+
+.react-datepicker__navigation--next {
+  right: 0.5rem !important;
+  border-left-color: hsl(var(--foreground)) !important;
+}
+
+.react-datepicker__navigation-icon::before {
+  border-color: hsl(var(--foreground)) !important;
+  border-style: solid !important;
+  border-width: 2px 2px 0 0 !important;
+  content: "" !important;
+  display: block !important;
+  height: 9px !important;
+  position: absolute !important;
+  top: 6px !important;
+  width: 9px !important;
+}
+
+.react-datepicker__navigation-icon--previous::before {
+  transform: rotate(225deg) !important;
+  right: -2px !important;
+}
+
+.react-datepicker__navigation-icon--next::before {
+  transform: rotate(45deg) !important;
+  left: -2px !important;
+}
+
+/* Month */
+.react-datepicker__month {
+  margin: 0.4rem !important;
+  text-align: center !important;
+}
+
+.react-datepicker__week {
+  display: flex !important;
+  justify-content: space-around !important;
+}
+
+/* Days */
+.react-datepicker__day {
+  cursor: pointer !important;
+  display: inline-block !important;
+  width: 2rem !important;
+  line-height: 2rem !important;
+  text-align: center !important;
+  margin: 0.166rem !important;
+  color: hsl(var(--foreground)) !important;
+  border-radius: 0.375rem !important;
+  font-size: 0.875rem !important;
+  background: transparent !important;
+  transition: all 150ms ease-in-out !important;
+}
+
+.react-datepicker__day:hover {
+  background-color: hsl(var(--accent)) !important;
+  color: hsl(var(--accent-foreground)) !important;
+}
+
+.react-datepicker__day--selected {
+  background-color: hsl(var(--primary)) !important;
+  color: hsl(var(--primary-foreground)) !important;
+  font-weight: 600 !important;
+}
+
+.react-datepicker__day--selected:hover {
+  background-color: hsl(var(--primary)) !important;
+  color: hsl(var(--primary-foreground)) !important;
+}
+
+.react-datepicker__day--today {
+  background-color: hsl(var(--accent)) !important;
+  color: hsl(var(--accent-foreground)) !important;
+  font-weight: 600 !important;
+}
+
+.react-datepicker__day--keyboard-selected {
+  background-color: hsl(var(--accent)) !important;
+  color: hsl(var(--accent-foreground)) !important;
+}
+
+.react-datepicker__day--outside-month {
+  color: hsl(var(--muted-foreground)) !important;
+  opacity: 0.5 !important;
+}
+
+.react-datepicker__day--disabled {
+  cursor: not-allowed !important;
+  opacity: 0.3 !important;
+  color: hsl(var(--muted-foreground)) !important;
+}
+
+.react-datepicker__day--disabled:hover {
+  background-color: transparent !important;
+}
+
+/* Range selection */
+.react-datepicker__day--in-range {
+  background-color: hsl(var(--primary) / 0.2) !important;
+  color: hsl(var(--primary)) !important;
+}
+
+.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
+  background-color: hsl(var(--primary) / 0.1) !important;
+}
+
+.react-datepicker__day--range-start,
+.react-datepicker__day--range-end {
+  background-color: hsl(var(--primary)) !important;
+  color: hsl(var(--primary-foreground)) !important;
+}
+
+/* Time picker */
+.react-datepicker__time-container {
+  float: right !important;
+  border-left: 1px solid hsl(var(--border)) !important;
+  width: 85px !important;
+}
+
+.react-datepicker__time {
+  position: relative !important;
+  background: hsl(var(--popover)) !important;
+  border-bottom-right-radius: 0.5rem !important;
+}
+
+.react-datepicker__time-box {
+  width: 85px !important;
+  overflow-x: hidden !important;
+  margin: 0 auto !important;
+  text-align: center !important;
+  border-bottom-right-radius: 0.5rem !important;
+}
+
+.react-datepicker__time-list {
+  height: calc(195px + (1.7rem / 2)) !important;
+  overflow-y: scroll !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  list-style: none !important;
+  background: hsl(var(--popover)) !important;
+}
+
+.react-datepicker__time-list-item {
+  height: 30px !important;
+  padding: 5px 10px !important;
+  white-space: nowrap !important;
+  cursor: pointer !important;
+  color: hsl(var(--foreground)) !important;
+  font-size: 0.875rem !important;
+}
+
+.react-datepicker__time-list-item:hover {
+  background-color: hsl(var(--accent)) !important;
+  color: hsl(var(--accent-foreground)) !important;
+}
+
+.react-datepicker__time-list-item--selected {
+  background-color: hsl(var(--primary)) !important;
+  color: hsl(var(--primary-foreground)) !important;
+  font-weight: 600 !important;
+}
+
+.react-datepicker__time-list-item--disabled {
+  color: hsl(var(--muted-foreground)) !important;
+  opacity: 0.3 !important;
+  cursor: not-allowed !important;
+}
+
+.react-datepicker__time-list-item--disabled:hover {
+  background-color: transparent !important;
+}
+
+/* Input styles */
+.react-datepicker__input-container input {
+  width: 100% !important;
+  border-radius: 0.375rem !important;
+  border: 1px solid hsl(var(--input)) !important;
+  background-color: hsl(var(--background)) !important;
+  padding: 0.5rem 0.75rem !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+  color: hsl(var(--foreground)) !important;
+}
+
+.react-datepicker__input-container input:focus {
+  outline: none !important;
+  box-shadow: 0 0 0 2px hsl(var(--ring)) !important;
+  border-color: hsl(var(--ring)) !important;
+}
+
+.react-datepicker__input-container input::placeholder {
+  color: hsl(var(--muted-foreground)) !important;
+}
+
+.react-datepicker__input-container input:disabled {
+  cursor: not-allowed !important;
+  opacity: 0.5 !important;
+}
+
+/* Week numbers */
+.react-datepicker__week-number {
+  color: hsl(var(--muted-foreground)) !important;
+  display: inline-block !important;
+  width: 2rem !important;
+  line-height: 2rem !important;
+  text-align: center !important;
+  margin: 0.166rem !important;
+  font-weight: 500 !important;
+  font-size: 0.75rem !important;
+}
+
+/* Month/Year dropdowns */
+.react-datepicker__month-dropdown,
+.react-datepicker__year-dropdown {
+  background-color: hsl(var(--popover)) !important;
+  position: absolute !important;
+  width: 50% !important;
+  left: 25% !important;
+  top: 30px !important;
+  z-index: 1 !important;
+  text-align: center !important;
+  border-radius: 0.5rem !important;
+  border: 1px solid hsl(var(--border)) !important;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
+}
+
+.react-datepicker__month-option,
+.react-datepicker__year-option {
+  line-height: 20px !important;
+  width: 100% !important;
+  display: block !important;
+  padding: 0.5rem !important;
+  cursor: pointer !important;
+  color: hsl(var(--foreground)) !important;
+}
+
+.react-datepicker__month-option:hover,
+.react-datepicker__year-option:hover {
+  background-color: hsl(var(--accent)) !important;
+  color: hsl(var(--accent-foreground)) !important;
+}
+
+.react-datepicker__month-option--selected_month,
+.react-datepicker__year-option--selected_year {
+  background-color: hsl(var(--primary)) !important;
+  color: hsl(var(--primary-foreground)) !important;
+  font-weight: 600 !important;
+}
+
+/* Portal */
+.react-datepicker__portal {
+  position: fixed !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  background-color: rgba(0, 0, 0, 0.8) !important;
+  left: 0 !important;
+  top: 0 !important;
+  justify-content: center !important;
+  align-items: center !important;
+  display: flex !important;
+  z-index: 2147483647 !important;
+}
+
+.react-datepicker__portal .react-datepicker {
+  position: relative !important;
+}
+
+/* Styles personnalisés pour WakaDateTimePicker */
+.waka-datepicker-container {
+  position: relative !important;
+  display: block !important;
+  width: 100% !important;
+}
+
+.waka-datepicker-container .react-datepicker-wrapper {
+  display: block !important;
+  width: 100% !important;
+}
+
+/* Classes utilitaires */
+.waka-datepicker .highlighted-date {
+  position: relative !important;
+  background-color: hsl(var(--accent) / 0.5) !important;
+  color: hsl(var(--accent-foreground)) !important;
+  font-weight: 600 !important;
+}
+
+.waka-datepicker .highlighted-date::after {
+  content: '' !important;
+  position: absolute !important;
+  bottom: 0.25rem !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  width: 0.25rem !important;
+  height: 0.25rem !important;
+  border-radius: 50% !important;
+  background-color: hsl(var(--primary)) !important;
+}
+
+/* Animations désactivées si demandé */
+.waka-datepicker.no-animations * {
+  transition: none !important;
+  animation: none !important;
+}
+
+/* Multiple mois */
+.react-datepicker__month-container {
+  float: left !important;
+}
+
+.react-datepicker--time-only .react-datepicker__time-container {
+  border-left: 0 !important;
+}
+
+.react-datepicker--time-only .react-datepicker__time {
+  border-radius: 0.5rem !important;
+}
+
+/* Fix pour les conflits potentiels */
+.react-datepicker * {
+  box-sizing: border-box !important;
+}
+
+.react-datepicker button {
+  border: none !important;
+  cursor: pointer !important;
+  background: transparent !important;
+  padding: 0 !important;
+}