@fab1o978/react-ui 0.1.3 → 0.1.5

package/dist/index.css

@@ -1026,4 +1026,489 @@
   padding: 0;
   flex-shrink: 0;
 }
+
+/* src/components/SlidingCounter/SlidingCounter.module.scss */
+:root {
+  --accent: #3b82f6;
+  --accent-dot: rgb(82.52, 145, 247.08);
+  --accent-track: #3b82f6;
+  --accent-ring: #3b82f6;
+  --accent-glow: rgba(59, 130, 246, 0.3);
+  --accent-light: rgb(157.485, 188.725, 239.765);
+  --color-primary-50: rgb(169.3455, 194.6925, 236.1045);
+  --color-primary-100: rgb(149.4545, 184.4575, 241.6455);
+  --color-primary-400: rgb(82.52, 145, 247.08);
+  --color-primary-500: #3b82f6;
+  --color-primary-600: rgb(29.8390243902, 111.4024390244, 244.6609756098);
+  --color-primary-700: rgb(10.712195122, 95.2195121951, 233.287804878);
+  --color-neutral-0: #ffffff;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-600: #4b5563;
+  --color-neutral-900: #111827;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-danger-500: #ef4444;
+  --color-danger-600: #dc2626;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --font-family-base:
+    "Inter",
+    system-ui,
+    -apple-system,
+    sans-serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --transition-fast: 150ms ease;
+  --color-surface: #ffffff;
+  --color-surface-elevated: #ffffff;
+}
+[data-theme=dark] {
+  --color-neutral-0: #0f172a;
+  --color-neutral-100: #1e293b;
+  --color-neutral-200: #334155;
+  --color-neutral-400: #94a3b8;
+  --color-neutral-600: #cbd5e1;
+  --color-neutral-900: #f8fafc;
+  --color-surface: #1e293b;
+  --color-surface-elevated: #273549;
+  --color-primary-50: #172554;
+  --color-primary-100: #1e3a8a;
+  --accent-light: #172554;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+}
+.SlidingCounter_module_counter {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+  font-family: var(--font-family-base);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--sliding-counter-accent-dot, var(--accent-dot));
+  user-select: none;
+}
+.SlidingCounter_module_sign {
+  line-height: 1;
+  margin-right: 2px;
+}
+.SlidingCounter_module_separator {
+  line-height: 1;
+  margin: 0 1px;
+  opacity: 0.5;
+  align-self: flex-end;
+  padding-bottom: 0.5em;
+}
+.SlidingCounter_module_reelWindow {
+  overflow: hidden;
+  position: relative;
+}
+.SlidingCounter_module_reelWindow.SlidingCounter_module_sm {
+  height: 1.6rem;
+  width: 0.85rem;
+  font-size: 1.25rem;
+  line-height: 1.6rem;
+}
+.SlidingCounter_module_reelWindow.SlidingCounter_module_md {
+  height: 2.6rem;
+  width: 1.35rem;
+  font-size: 2rem;
+  line-height: 2.6rem;
+}
+.SlidingCounter_module_reelWindow.SlidingCounter_module_lg {
+  height: 3.8rem;
+  width: 2rem;
+  font-size: 3rem;
+  line-height: 3.8rem;
+}
+.SlidingCounter_module_reel {
+  display: flex;
+  flex-direction: column;
+  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.SlidingCounter_module_digitCell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.SlidingCounter_module_reelWindow.SlidingCounter_module_sm .SlidingCounter_module_digitCell {
+  height: 1.6rem;
+  width: 0.85rem;
+}
+.SlidingCounter_module_reelWindow.SlidingCounter_module_md .SlidingCounter_module_digitCell {
+  height: 2.6rem;
+  width: 1.35rem;
+}
+.SlidingCounter_module_reelWindow.SlidingCounter_module_lg .SlidingCounter_module_digitCell {
+  height: 3.8rem;
+  width: 2rem;
+}
+
+/* src/components/RichTextEditor/RichTextEditor.module.scss */
+:root {
+  --accent: #3b82f6;
+  --accent-dot: rgb(82.52, 145, 247.08);
+  --accent-track: #3b82f6;
+  --accent-ring: #3b82f6;
+  --accent-glow: rgba(59, 130, 246, 0.3);
+  --accent-light: rgb(157.485, 188.725, 239.765);
+  --color-primary-50: rgb(169.3455, 194.6925, 236.1045);
+  --color-primary-100: rgb(149.4545, 184.4575, 241.6455);
+  --color-primary-400: rgb(82.52, 145, 247.08);
+  --color-primary-500: #3b82f6;
+  --color-primary-600: rgb(29.8390243902, 111.4024390244, 244.6609756098);
+  --color-primary-700: rgb(10.712195122, 95.2195121951, 233.287804878);
+  --color-neutral-0: #ffffff;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-600: #4b5563;
+  --color-neutral-900: #111827;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-danger-500: #ef4444;
+  --color-danger-600: #dc2626;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --font-family-base:
+    "Inter",
+    system-ui,
+    -apple-system,
+    sans-serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --transition-fast: 150ms ease;
+  --color-surface: #ffffff;
+  --color-surface-elevated: #ffffff;
+}
+[data-theme=dark] {
+  --color-neutral-0: #0f172a;
+  --color-neutral-100: #1e293b;
+  --color-neutral-200: #334155;
+  --color-neutral-400: #94a3b8;
+  --color-neutral-600: #cbd5e1;
+  --color-neutral-900: #f8fafc;
+  --color-surface: #1e293b;
+  --color-surface-elevated: #273549;
+  --color-primary-50: #172554;
+  --color-primary-100: #1e3a8a;
+  --accent-light: #172554;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+}
+.RichTextEditor_module_root {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+.RichTextEditor_module_root:focus-within {
+  border-color: var(--rich-text-editor-accent-ring, var(--accent-ring));
+  box-shadow: 0 0 0 3px var(--rich-text-editor-accent-glow, var(--accent-glow));
+}
+.RichTextEditor_module_readOnly {
+  border-color: transparent;
+  background: transparent;
+}
+.RichTextEditor_module_readOnly:focus-within {
+  border-color: transparent;
+  box-shadow: none;
+}
+.RichTextEditor_module_toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1) var(--spacing-2);
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-md);
+  flex-shrink: 0;
+  position: sticky;
+  top: var(--spacing-1);
+  margin: var(--spacing-1) var(--spacing-1) 0;
+  z-index: 10;
+}
+.RichTextEditor_module_toolbarGroup {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.RichTextEditor_module_divider {
+  width: 1px;
+  height: 18px;
+  background: var(--color-neutral-200);
+  margin: 0 var(--spacing-1);
+  flex-shrink: 0;
+}
+.RichTextEditor_module_toolbarButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-neutral-600);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  font-family: var(--font-family-base);
+  line-height: 1;
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+.RichTextEditor_module_toolbarButton:hover {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-900);
+}
+.RichTextEditor_module_toolbarButton:focus-visible {
+  outline: 2px solid var(--rich-text-editor-accent-ring, var(--accent-ring));
+  outline-offset: 1px;
+}
+.RichTextEditor_module_toolbarButton.RichTextEditor_module_active {
+  background: var(--rich-text-editor-accent-light, var(--accent-light));
+  color: var(--rich-text-editor-accent, var(--accent));
+}
+.RichTextEditor_module_headingButton {
+  width: auto;
+  min-width: 28px;
+  padding: 0 var(--spacing-2);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+.RichTextEditor_module_bubbleMenu {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: var(--spacing-1) var(--spacing-2);
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}
+.RichTextEditor_module_prose {
+  color: var(--color-neutral-900);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-md);
+  line-height: 1.65;
+}
+.RichTextEditor_module_prose > * + * {
+  margin-top: 0.5em;
+}
+.RichTextEditor_module_prose p {
+  margin: 0;
+}
+.RichTextEditor_module_prose h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.25;
+  color: var(--color-neutral-900);
+  margin-top: 0.75em;
+  margin-bottom: 0.25em;
+}
+.RichTextEditor_module_prose h1:first-child {
+  margin-top: 0;
+}
+.RichTextEditor_module_prose h2 {
+  font-size: 1.375rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--color-neutral-900);
+  margin-top: 0.75em;
+  margin-bottom: 0.25em;
+}
+.RichTextEditor_module_prose h2:first-child {
+  margin-top: 0;
+}
+.RichTextEditor_module_prose h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--color-neutral-900);
+  margin-top: 0.75em;
+  margin-bottom: 0.25em;
+}
+.RichTextEditor_module_prose h3:first-child {
+  margin-top: 0;
+}
+.RichTextEditor_module_prose ul,
+.RichTextEditor_module_prose ol {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+.RichTextEditor_module_prose ul {
+  list-style-type: disc;
+}
+.RichTextEditor_module_prose ol {
+  list-style-type: decimal;
+}
+.RichTextEditor_module_prose li {
+  line-height: 1.65;
+}
+.RichTextEditor_module_prose li + li {
+  margin-top: 0.25em;
+}
+.RichTextEditor_module_prose li p {
+  margin: 0;
+}
+.RichTextEditor_module_prose {
+  padding: var(--spacing-3) var(--spacing-4);
+}
+.RichTextEditor_module_editorContent {
+  flex: 1;
+  overflow-y: auto;
+  max-height: var(--rte-max-height);
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-neutral-200) transparent;
+}
+.RichTextEditor_module_editorContent::-webkit-scrollbar {
+  width: 4px;
+}
+.RichTextEditor_module_editorContent::-webkit-scrollbar-track {
+  background: transparent;
+}
+.RichTextEditor_module_editorContent::-webkit-scrollbar-thumb {
+  background: var(--color-neutral-200);
+  border-radius: var(--radius-full);
+}
+.RichTextEditor_module_editorContent::before {
+  content: "";
+  display: block;
+  position: sticky;
+  top: 0;
+  pointer-events: none;
+  z-index: 9;
+}
+.RichTextEditor_module_editorContent .ProseMirror {
+  color: var(--color-neutral-900);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-md);
+  line-height: 1.65;
+}
+.RichTextEditor_module_editorContent .ProseMirror > * + * {
+  margin-top: 0.5em;
+}
+.RichTextEditor_module_editorContent .ProseMirror p {
+  margin: 0;
+}
+.RichTextEditor_module_editorContent .ProseMirror h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.25;
+  color: var(--color-neutral-900);
+  margin-top: 0.75em;
+  margin-bottom: 0.25em;
+}
+.RichTextEditor_module_editorContent .ProseMirror h1:first-child {
+  margin-top: 0;
+}
+.RichTextEditor_module_editorContent .ProseMirror h2 {
+  font-size: 1.375rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--color-neutral-900);
+  margin-top: 0.75em;
+  margin-bottom: 0.25em;
+}
+.RichTextEditor_module_editorContent .ProseMirror h2:first-child {
+  margin-top: 0;
+}
+.RichTextEditor_module_editorContent .ProseMirror h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--color-neutral-900);
+  margin-top: 0.75em;
+  margin-bottom: 0.25em;
+}
+.RichTextEditor_module_editorContent .ProseMirror h3:first-child {
+  margin-top: 0;
+}
+.RichTextEditor_module_editorContent .ProseMirror ul,
+.RichTextEditor_module_editorContent .ProseMirror ol {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+.RichTextEditor_module_editorContent .ProseMirror ul {
+  list-style-type: disc;
+}
+.RichTextEditor_module_editorContent .ProseMirror ol {
+  list-style-type: decimal;
+}
+.RichTextEditor_module_editorContent .ProseMirror li {
+  line-height: 1.65;
+}
+.RichTextEditor_module_editorContent .ProseMirror li + li {
+  margin-top: 0.25em;
+}
+.RichTextEditor_module_editorContent .ProseMirror li p {
+  margin: 0;
+}
+.RichTextEditor_module_editorContent .ProseMirror {
+  min-height: var(--rte-min-height, 200px);
+  padding: var(--spacing-3) var(--spacing-4);
+  outline: none;
+  caret-color: var(--rich-text-editor-accent, var(--accent));
+}
+.RichTextEditor_module_editorContent .ProseMirror p.RichTextEditor_module_is-empty:first-child::before {
+  content: attr(data-placeholder);
+  color: var(--color-neutral-400);
+  pointer-events: none;
+  float: left;
+  height: 0;
+}
+.RichTextEditor_module_editorContent .ProseMirror div[data-type=page-break] {
+  position: relative;
+  margin: 1em 0;
+  border: none;
+  height: 0;
+  border-top: 2px dashed var(--color-neutral-200);
+  pointer-events: none;
+  user-select: none;
+}
+.RichTextEditor_module_editorContent .ProseMirror div[data-type=page-break]::after {
+  content: "Page break";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 0 var(--spacing-2);
+  background: var(--color-surface);
+  font-size: var(--font-size-xs);
+  color: var(--color-neutral-400);
+  font-family: var(--font-family-base);
+  white-space: nowrap;
+}
+.RichTextEditor_module_editorContent .ProseMirror ::selection {
+  background: var(--rich-text-editor-accent-light, var(--accent-light));
+}
 /*# sourceMappingURL=index.css.map */