@ugurdemirel/landcraft 0.1.0 → 0.1.2

package/src/styles/theme.css

@@ -0,0 +1,242 @@
+/**
+ * @ugurdemirel/landcraft — Tailwind v4 theme (the "preset").
+ *
+ * Import this file into your own project's CSS to reuse the whole design
+ * language with Tailwind v4:
+ *
+ *   @import "tailwindcss";
+ *   @import "@ugurdemirel/landcraft/theme.css";
+ *
+ * Every design decision (color, type, radius, shadow) is driven by plain CSS
+ * custom properties, so consumers can re-skin the entire library from outside
+ * by overriding a handful of tokens — no JavaScript, no build config.
+ *
+ * Colors store space-separated RGB channels ("79 70 229") so the library's
+ * `rgb(var(--color-x))` inline styles and Tailwind opacity modifiers
+ * (`text-primary/60`) keep working after a runtime override.
+ */
+
+@plugin "@tailwindcss/typography";
+
+@layer base {
+  :root {
+    /* ── Brand ─────────────────────────────────────────────── */
+    --color-primary: 79 70 229;        /* indigo-600 */
+    --color-primary-hover: 67 56 202;  /* indigo-700 */
+    --color-primary-soft: 238 242 255; /* indigo-50 */
+    --color-on-primary: 255 255 255;
+
+    --color-secondary: 15 15 15;       /* ink */
+    --color-secondary-hover: 38 38 38;
+    --color-on-secondary: 250 250 250;
+
+    --color-accent: 5 150 105;         /* emerald-600 */
+    --color-accent-hover: 4 120 87;
+    --color-on-accent: 255 255 255;
+
+    /* ── Surfaces & text (warm paper, not pure white) ──────── */
+    --color-background: 250 250 250;
+    --color-foreground: 17 17 17;
+    --color-muted-foreground: 97 97 97;
+    --color-surface: 255 255 255;
+    --color-surface-strong: 244 244 242;
+    --color-border: 229 229 228;
+    --color-ring: 79 70 229;
+    --color-danger: 217 45 32;
+    --color-danger-soft: 255 241 242;
+
+    /* ── Type & shape ──────────────────────────────────────── */
+    --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+
+    --radius-sm: 0.375rem;
+    --radius-md: 0.625rem;
+    --radius-lg: 0.875rem;
+    --radius-xl: 1.125rem;
+    --radius-2xl: 1.5rem;
+    --radius-3xl: 2rem;
+
+    /* ── Elevation ─────────────────────────────────────────── */
+    --shadow-soft: 0 1px 2px rgb(17 17 17 / 0.04), 0 2px 8px rgb(17 17 17 / 0.04);
+    --shadow-raised: 0 2px 4px rgb(17 17 17 / 0.05), 0 12px 32px rgb(17 17 17 / 0.08);
+    --shadow-overlay: 0 24px 64px -12px rgb(17 17 17 / 0.18);
+  }
+}
+
+/*
+ * Bind the raw tokens above onto Tailwind's theme namespaces. `@theme inline`
+ * inlines each value into the generated utilities instead of emitting another
+ * `:root` variable, so the tokens stay the single source of truth and can be
+ * overridden at runtime (bg-primary -> rgb(var(--color-primary)), opacity
+ * modifiers become color-mix() against the live value).
+ */
+@theme inline {
+  --color-primary: rgb(var(--color-primary));
+  --color-primary-hover: rgb(var(--color-primary-hover));
+  --color-primary-soft: rgb(var(--color-primary-soft));
+  --color-on-primary: rgb(var(--color-on-primary));
+  --color-secondary: rgb(var(--color-secondary));
+  --color-secondary-hover: rgb(var(--color-secondary-hover));
+  --color-on-secondary: rgb(var(--color-on-secondary));
+  --color-accent: rgb(var(--color-accent));
+  --color-accent-hover: rgb(var(--color-accent-hover));
+  --color-on-accent: rgb(var(--color-on-accent));
+  --color-background: rgb(var(--color-background));
+  --color-foreground: rgb(var(--color-foreground));
+  --color-muted-foreground: rgb(var(--color-muted-foreground));
+  --color-surface: rgb(var(--color-surface));
+  --color-surface-strong: rgb(var(--color-surface-strong));
+  --color-border: rgb(var(--color-border));
+  --color-ring: rgb(var(--color-ring));
+  --color-danger: rgb(var(--color-danger));
+  --color-danger-soft: rgb(var(--color-danger-soft));
+}
+
+@theme {
+  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+
+  --radius-sm: 0.375rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 0.875rem;
+  --radius-xl: 1.125rem;
+  --radius-2xl: 1.5rem;
+  --radius-3xl: 2rem;
+
+  --shadow-soft: 0 1px 2px rgb(17 17 17 / 0.04), 0 2px 8px rgb(17 17 17 / 0.04);
+  --shadow-raised: 0 2px 4px rgb(17 17 17 / 0.05), 0 12px 32px rgb(17 17 17 / 0.08);
+  --shadow-overlay: 0 24px 64px -12px rgb(17 17 17 / 0.18);
+
+  --animate-marquee: marquee 38s linear infinite;
+}
+
+/*
+ * Re-skin @tailwindcss/typography through the same tokens. In Tailwind v4 the
+ * plugin's styles are emitted into `@layer utilities`, so the overrides live
+ * there too (same layer, later + higher specificity -> they win). The rules
+ * use the plugin's `--tw-prose-*` variables and zero-specificity `:where()`
+ * selectors, so overriding the variables + a few rules is enough.
+ */
+@layer utilities {
+  .prose {
+    --tw-prose-body: rgb(var(--color-foreground));
+    --tw-prose-headings: rgb(var(--color-foreground));
+    --tw-prose-lead: rgb(var(--color-muted-foreground));
+    --tw-prose-links: rgb(var(--color-primary));
+    --tw-prose-bold: rgb(var(--color-foreground));
+    --tw-prose-counters: rgb(var(--color-muted-foreground));
+    --tw-prose-bullets: rgb(var(--color-muted-foreground));
+    --tw-prose-hr: rgb(var(--color-border));
+    --tw-prose-quotes: rgb(var(--color-foreground));
+    --tw-prose-quote-borders: rgb(var(--color-primary));
+    --tw-prose-captions: rgb(var(--color-muted-foreground));
+    --tw-prose-code: rgb(var(--color-foreground));
+    --tw-prose-pre-code: rgb(var(--color-on-secondary));
+    --tw-prose-pre-bg: rgb(var(--color-secondary));
+    --tw-prose-th-borders: rgb(var(--color-border));
+    --tw-prose-td-borders: rgb(var(--color-border));
+  }
+
+  .prose :is(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--font-display);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+  }
+
+  .prose a {
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+    font-weight: 500;
+  }
+
+  .prose blockquote,
+  .prose figure figcaption {
+    font-style: normal;
+  }
+
+  .prose pre {
+    border: 1px solid rgb(var(--color-border));
+    border-radius: var(--radius-xl);
+    background-color: rgb(var(--color-secondary));
+    color: rgb(var(--color-on-secondary));
+  }
+
+  .prose code {
+    background-color: rgb(var(--color-surface-strong));
+    border-radius: var(--radius-md);
+    padding: 0.125rem 0.3125rem;
+    font-weight: 500;
+  }
+
+  .prose code::before,
+  .prose code::after {
+    content: none;
+  }
+
+  .prose pre code {
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
+  }
+}
+
+/* ── Custom utilities ─────────────────────────────────────── */
+
+@utility grain {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
+}
+
+@utility mask-fade-x {
+  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
+}
+
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+/* ── Popover-based Modal (dialog) ────────────────────────── */
+
+.modal-anim {
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease,
+    overlay 150ms ease allow-discrete,
+    display 150ms ease allow-discrete;
+}
+
+.modal-anim[popover] {
+  opacity: 0;
+  transform: scale(0.96);
+}
+
+.modal-anim[popover]:popover-open {
+  opacity: 1;
+  transform: scale(1);
+}
+
+@starting-style {
+  .modal-anim[popover]:popover-open {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+.modal-backdrop::backdrop {
+  background-color: rgb(0 0 0 / 0.5);
+  backdrop-filter: blur(4px);
+  transition:
+    opacity 150ms ease,
+    overlay 150ms ease allow-discrete,
+    display 150ms ease allow-discrete;
+}
+
+@starting-style {
+  .modal-backdrop::backdrop {
+    opacity: 0;
+  }
+}

package/src/utils/iso2Flag.ts

@@ -0,0 +1,26 @@
+/**
+ * Convert an ISO 3166-1 alpha-2 country code (e.g. "TR", "us") to its flag emoji
+ * via regional indicator symbols. Returns `""` when the code is not a real
+ * country code (e.g. a language code like "en"), so callers can fall back.
+ *
+ *   iso2ToFlagEmoji("tr") // 🇹🇷
+ *   iso2ToFlagEmoji("en") // ""  (not a country)
+ *   iso2ToFlagEmoji("")   // ""
+ */
+const ISO3166 = new Set(
+  `AD AE AF AG AI AL AM AO AQ AR AS AT AU AW AX AZ BA BB BD BE BF BG BH BI BJ BL BM BN BO BQ BR BS BT BV BW BY BZ
+  CA CC CD CF CG CH CI CK CL CM CN CO CR CU CV CW CX CY CZ DE DJ DK DM DO DZ EC EE EG EH ER ES ET FI FJ FK FM FO FR
+  GA GB GD GE GF GG GH GI GL GM GN GP GQ GR GS GT GU GW GY HK HM HN HR HT HU ID IE IL IM IN IO IQ IR IS IT JE JM JO
+  JP KE KG KH KI KM KN KP KR KW KY KZ LA LB LC LI LK LR LS LT LU LV LY MA MC MD ME MF MG MH MK ML MM MN MO MP MQ MR
+  MS MT MU MV MW MX MY MZ NA NC NE NF NG NI NL NO NP NR NU NZ OM PA PE PF PG PH PK PL PM PN PR PS PT PW PY QA RE RO
+  RS RU RW SA SB SC SD SE SG SH SI SJ SK SL SM SN SO SR SS ST SV SX SY SZ TC TD TF TG TH TJ TK TL TM TN TO TR TT TV
+  TW TZ UA UG UM US UY UZ VA VC VE VG VI VN VU WF WS YE YT ZA ZM ZW`.split(/\s+/),
+);
+
+export function iso2ToFlagEmoji(code: string): string {
+  const upper = code.toUpperCase();
+  if (ISO3166.has(upper)) {
+    return String.fromCodePoint(0x1f1e6 + upper.charCodeAt(0) - 65, 0x1f1e6 + upper.charCodeAt(1) - 65);
+  }
+  return "";
+}

package/tailwind.preset.cjs

@@ -1,121 +0,0 @@
-/**
- * Tailwind preset for @ugurdemirel/landcraft.
- *
- * Every design decision (color, type, radius, shadow) is driven by CSS custom
- * properties so consumers can re-skin the whole library from outside without
- * touching a single component.
- *
- * Colors store space-separated RGB channels so Tailwind's `<alpha-value>`
- * opacity syntax keeps working (e.g. `text-primary/60`).
- */
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        primary: "rgb(var(--color-primary) / <alpha-value>)",
-        "primary-hover": "rgb(var(--color-primary-hover) / <alpha-value>)",
-        "primary-soft": "rgb(var(--color-primary-soft) / <alpha-value>)",
-        "on-primary": "rgb(var(--color-on-primary) / <alpha-value>)",
-        secondary: "rgb(var(--color-secondary) / <alpha-value>)",
-        "secondary-hover": "rgb(var(--color-secondary-hover) / <alpha-value>)",
-        "on-secondary": "rgb(var(--color-on-secondary) / <alpha-value>)",
-        accent: "rgb(var(--color-accent) / <alpha-value>)",
-        "accent-hover": "rgb(var(--color-accent-hover) / <alpha-value>)",
-        "on-accent": "rgb(var(--color-on-accent) / <alpha-value>)",
-        background: "rgb(var(--color-background) / <alpha-value>)",
-        foreground: "rgb(var(--color-foreground) / <alpha-value>)",
-        "muted-foreground": "rgb(var(--color-muted-foreground) / <alpha-value>)",
-        surface: "rgb(var(--color-surface) / <alpha-value>)",
-        "surface-strong": "rgb(var(--color-surface-strong) / <alpha-value>)",
-        border: "rgb(var(--color-border) / <alpha-value>)",
-        ring: "rgb(var(--color-ring) / <alpha-value>)",
-        danger: "rgb(var(--color-danger) / <alpha-value>)",
-        "danger-soft": "rgb(var(--color-danger-soft) / <alpha-value>)",
-      },
-      fontFamily: {
-        sans: ["var(--font-sans)"],
-        display: ["var(--font-display)"],
-      },
-      borderRadius: {
-        sm: "var(--radius-sm)",
-        md: "var(--radius-md)",
-        lg: "var(--radius-lg)",
-        xl: "var(--radius-xl)",
-        "2xl": "var(--radius-2xl)",
-        "3xl": "var(--radius-3xl)",
-        full: "9999px",
-      },
-      boxShadow: {
-        soft: "var(--shadow-soft)",
-        raised: "var(--shadow-raised)",
-        overlay: "var(--shadow-overlay)",
-      },
-      borderColor: {
-        DEFAULT: "rgb(var(--color-border) / <alpha-value>)",
-      },
-      ringColor: {
-        DEFAULT: "rgb(var(--color-ring) / <alpha-value>)",
-      },
-      typography: {
-        DEFAULT: {
-          css: {
-            "--tw-prose-body": "rgb(var(--color-foreground))",
-            "--tw-prose-headings": "rgb(var(--color-foreground))",
-            "--tw-prose-lead": "rgb(var(--color-muted-foreground))",
-            "--tw-prose-links": "rgb(var(--color-primary))",
-            "--tw-prose-bold": "rgb(var(--color-foreground))",
-            "--tw-prose-counters": "rgb(var(--color-muted-foreground))",
-            "--tw-prose-bullets": "rgb(var(--color-muted-foreground))",
-            "--tw-prose-hr": "rgb(var(--color-border))",
-            "--tw-prose-quotes": "rgb(var(--color-foreground))",
-            "--tw-prose-quote-borders": "rgb(var(--color-primary))",
-            "--tw-prose-captions": "rgb(var(--color-muted-foreground))",
-            "--tw-prose-code": "rgb(var(--color-foreground))",
-            "--tw-prose-pre-code": "rgb(var(--color-on-secondary))",
-            "--tw-prose-pre-bg": "rgb(var(--color-secondary))",
-            "--tw-prose-th-borders": "rgb(var(--color-border))",
-            "--tw-prose-td-borders": "rgb(var(--color-border))",
-            "h1, h2, h3, h4, h5, h6": {
-              fontFamily: "var(--font-display)",
-              fontWeight: "600",
-              letterSpacing: "-0.02em",
-            },
-            a: {
-              textDecorationThickness: "1px",
-              textUnderlineOffset: "3px",
-              fontWeight: "500",
-            },
-            blockquote: {
-              fontStyle: "normal",
-            },
-            "figure figcaption": {
-              fontStyle: "normal",
-            },
-            "pre": {
-              border: "1px solid rgb(var(--color-border))",
-              borderRadius: "var(--radius-xl)",
-              backgroundColor: "rgb(var(--color-secondary))",
-              color: "rgb(var(--color-on-secondary))",
-            },
-            code: {
-              backgroundColor: "rgb(var(--color-surface-strong))",
-              borderRadius: "var(--radius-md)",
-              padding: "0.125rem 0.3125rem",
-              fontWeight: "500",
-              "&::before, &::after": {
-                content: "none",
-              },
-            },
-            "pre code": {
-              backgroundColor: "transparent",
-              padding: "0",
-              borderRadius: "0",
-            },
-          },
-        },
-      },
-    },
-  },
-  plugins: [require("@tailwindcss/typography")],
-};