minora 0.1.0

package/src/components/divider.css

@@ -0,0 +1,295 @@
+/* ============================================================
+   ELEGANT MINIMALIST UI KIT — Divider & Separator Components
+   divider.css
+
+   ANATOMY — HORIZONTAL DIVIDER
+   ─────────────────────────────────────────────────────────────
+   Structure:
+     <!-- Simple line -->
+     <hr class="divider" />
+
+     <!-- With centered text -->
+     <div class="divider divider-label">
+       <span>atau</span>
+     </div>
+
+     <!-- With centered icon -->
+     <div class="divider divider-icon">
+       <svg class="divider-icon-svg">...</svg>
+     </div>
+
+     <!-- With left/right label -->
+     <div class="divider divider-label divider-label-left">
+       <span>Section</span>
+     </div>
+
+   Class layers:
+     1. .divider               → Base: full-width horizontal rule
+     2. .divider-{weight}      → Thickness (thin/thick)
+     3. .divider-{style}       → Line style (solid/dashed)
+     4. .divider-{color}       → Color (subtle/muted/accent)
+     5. .divider-label         → Wrapper for text/icon variant
+     6. .divider-label-left    → Modifier: label aligned left
+     7. .divider-label-right   → Modifier: label aligned right
+     8. .divider-{spacing}     → Margin utility (sm/md/lg)
+   ─────────────────────────────────────────────────────────────
+
+   ANATOMY — VERTICAL SEPARATOR
+   ─────────────────────────────────────────────────────────────
+   Structure:
+     <div class="flex-row">
+       <span>Home</span>
+       <span class="separator"></span>
+       <span>Components</span>
+       <span class="separator separator-dashed"></span>
+       <span>Divider</span>
+     </div>
+
+   Class layers:
+     1. .separator             → Base: vertical line, stretches in flex
+     2. .separator-{weight}    → Thickness (thin/thick)
+     3. .separator-{style}     → Line style (solid/dashed)
+     4. .separator-{color}     → Color (subtle/muted/accent)
+   ─────────────────────────────────────────────────────────────
+   ============================================================ */
+
+/* ═══════════════════════════════════════════════════════════
+   DIVIDER — Base (Horizontal)
+   ═══════════════════════════════════════════════════════════ */
+
+/* Simple <hr> divider */
+.divider {
+  display: block;
+  width: 100%;
+  border: none;
+  border-top: var(--border-width) solid var(--color-neutral-200);
+  margin: 0;
+}
+
+/* Divider wrapper — for text/icon variants */
+.divider-label {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--space-4);
+}
+
+/* The line — left side */
+.divider-label::before {
+  content: '';
+  flex: 1;
+  border-top: var(--border-width) solid var(--color-neutral-200);
+}
+
+/* The line — right side */
+.divider-label::after {
+  content: '';
+  flex: 1;
+  border-top: var(--border-width) solid var(--color-neutral-200);
+}
+
+/* Centered label */
+.divider-label > span,
+.divider-label > svg {
+  flex-shrink: 0;
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  letter-spacing: var(--tracking-wide);
+  color: var(--color-neutral-400);
+  line-height: var(--leading-none);
+  text-transform: lowercase;
+}
+
+/* Icon inside divider */
+.divider-icon-svg {
+  flex-shrink: 0;
+  color: var(--color-neutral-400);
+}
+
+/* ── Label alignment modifiers ──────────────────────────── */
+
+/* Label aligned left — only right line visible */
+.divider-label-left::before {
+  display: none;
+}
+
+/* Label aligned right — only left line visible */
+.divider-label-right::after {
+  display: none;
+}
+
+/* Override text-transform for left/right labels */
+.divider-label-left > span,
+.divider-label-right > span {
+  text-transform: none;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   DIVIDER — Weight (Thickness)
+   ═══════════════════════════════════════════════════════════ */
+
+/* Thin (1px — default) */
+.divider-thin {
+  border-top-width: var(--border-width);
+}
+
+.divider-thin.divider-label::before,
+.divider-thin.divider-label::after {
+  border-top-width: var(--border-width);
+}
+
+/* Thick (2px) */
+.divider-thick {
+  border-top-width: var(--border-width-2);
+}
+
+.divider-thick.divider-label::before,
+.divider-thick.divider-label::after {
+  border-top-width: var(--border-width-2);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   DIVIDER — Style
+   ═══════════════════════════════════════════════════════════ */
+
+/* Dashed */
+.divider-dashed {
+  border-top-style: dashed;
+}
+
+.divider-dashed.divider-label::before,
+.divider-dashed.divider-label::after {
+  border-top-style: dashed;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   DIVIDER — Color
+   ═══════════════════════════════════════════════════════════ */
+
+/* Subtle (default — neutral-200) */
+.divider-subtle {
+  border-top-color: var(--color-neutral-200);
+}
+
+.divider-subtle.divider-label::before,
+.divider-subtle.divider-label::after {
+  border-top-color: var(--color-neutral-200);
+}
+
+.divider-subtle.divider-label > span,
+.divider-subtle.divider-label > svg {
+  color: var(--color-neutral-400);
+}
+
+/* Muted — more visible (neutral-300) */
+.divider-muted {
+  border-top-color: var(--color-neutral-300);
+}
+
+.divider-muted.divider-label::before,
+.divider-muted.divider-label::after {
+  border-top-color: var(--color-neutral-300);
+}
+
+.divider-muted.divider-label > span,
+.divider-muted.divider-label > svg {
+  color: var(--color-neutral-500);
+}
+
+/* Accent — warm gold */
+.divider-accent {
+  border-top-color: var(--color-accent-300);
+}
+
+.divider-accent.divider-label::before,
+.divider-accent.divider-label::after {
+  border-top-color: var(--color-accent-300);
+}
+
+.divider-accent.divider-label > span,
+.divider-accent.divider-label > svg {
+  color: var(--color-accent-500);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   DIVIDER — Spacing Utility
+   Margin top and bottom for consistent spacing
+   ═══════════════════════════════════════════════════════════ */
+
+.divider-sm {
+  margin-top: var(--space-4);
+  margin-bottom: var(--space-4);
+}
+
+.divider-md {
+  margin-top: var(--space-6);
+  margin-bottom: var(--space-6);
+}
+
+.divider-lg {
+  margin-top: var(--space-10);
+  margin-bottom: var(--space-10);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   DIVIDER — On dark background
+   ═══════════════════════════════════════════════════════════ */
+
+.divider-dark {
+  border-top-color: var(--color-neutral-700);
+}
+
+.divider-dark.divider-label::before,
+.divider-dark.divider-label::after {
+  border-top-color: var(--color-neutral-700);
+}
+
+.divider-dark.divider-label > span,
+.divider-dark.divider-label > svg {
+  color: var(--color-neutral-500);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SEPARATOR — Vertical
+   ═══════════════════════════════════════════════════════════ */
+
+.separator {
+  display: inline-block;
+  align-self: stretch;
+  width: 0;
+  border-right: var(--border-width) solid var(--color-neutral-200);
+  margin: 0 var(--space-4);
+  flex-shrink: 0;
+}
+
+/* ── Weight ─────────────────────────────────────────────── */
+.separator-thin {
+  border-right-width: var(--border-width);
+}
+
+.separator-thick {
+  border-right-width: var(--border-width-2);
+}
+
+/* ── Style ──────────────────────────────────────────────── */
+.separator-dashed {
+  border-right-style: dashed;
+}
+
+/* ── Color ──────────────────────────────────────────────── */
+.separator-subtle {
+  border-right-color: var(--color-neutral-200);
+}
+
+.separator-muted {
+  border-right-color: var(--color-neutral-300);
+}
+
+.separator-accent {
+  border-right-color: var(--color-accent-300);
+}
+
+.separator-dark {
+  border-right-color: var(--color-neutral-700);
+}