@regardio/tailwind 0.3.4 → 0.3.5

package/dist/index.d.mts

@@ -0,0 +1,12 @@
+import { ClassValue } from "clsx";
+import { twMerge } from "fluid-tailwindcss/tailwind-merge";
+import { tv } from "tailwind-variants";
+
+//#region src/utils/index.d.ts
+/**
+* Merge Tailwind CSS classes with conflict resolution
+* Supports strings, objects, arrays, and conditional classes
+*/
+declare const cn: (...inputs: ClassValue[]) => string;
+//#endregion
+export { cn, tv, twMerge };

package/dist/index.mjs

@@ -0,0 +1,15 @@
+import { clsx } from "clsx";
+import { twMerge } from "fluid-tailwindcss/tailwind-merge";
+import { tv } from "tailwind-variants";
+
+//#region src/utils/index.ts
+/**
+* Merge Tailwind CSS classes with conflict resolution
+* Supports strings, objects, arrays, and conditional classes
+*/
+const cn = (...inputs) => {
+	return twMerge(clsx(inputs));
+};
+
+//#endregion
+export { cn, tv, twMerge };

package/dist/styles/animations.css

@@ -0,0 +1,153 @@
+/**
+ * Animation Utilities
+ * Common keyframes and animation classes
+ */
+
+/* Extended duration classes beyond Tailwind defaults */
+.duration-2000 {
+  transition-duration: 2000ms;
+}
+
+.duration-2500 {
+  transition-duration: 2500ms;
+}
+
+.duration-3000 {
+  transition-duration: 3000ms;
+}
+
+.duration-4000 {
+  transition-duration: 4000ms;
+}
+
+.duration-5000 {
+  transition-duration: 5000ms;
+}
+
+.duration-6000 {
+  transition-duration: 6000ms;
+}
+
+@theme {
+  /* Fade animations */
+  --animate-fade-in: fade-in 0.3s ease-out forwards;
+  --animate-fade-out: fade-out 0.3s ease-out forwards;
+  --animate-fade-in-slow: fade-in 0.6s ease-out forwards;
+  --animate-fade-out-slow: fade-out 0.6s ease-out forwards;
+
+  /* Slide animations */
+  --animate-slide-in-up: slide-in-up 0.3s ease-out forwards;
+  --animate-slide-in-down: slide-in-down 0.3s ease-out forwards;
+  --animate-slide-in-left: slide-in-left 0.3s ease-out forwards;
+  --animate-slide-in-right: slide-in-right 0.3s ease-out forwards;
+
+  /* Scale animations */
+  --animate-scale-in: scale-in 0.2s ease-out forwards;
+  --animate-scale-out: scale-out 0.2s ease-out forwards;
+
+  /* Image slideshow animations */
+  --animate-image-fade-in: image-fade-in 6s ease-out forwards;
+  --animate-image-fade-out: image-fade-out 6s ease-out forwards;
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes slide-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-in-down {
+    from {
+      opacity: 0;
+      transform: translateY(-1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-in-left {
+    from {
+      opacity: 0;
+      transform: translateX(-1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes scale-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  @keyframes image-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes image-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+}

package/dist/styles/base.css

@@ -0,0 +1,75 @@
+/**
+ * Base Styles
+ * Foundational design defaults that may vary per project
+ */
+@layer base {
+  /* Design tokens applied to all elements */
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  /* Body typography defaults */
+  body {
+    font-feature-settings:
+      "liga" 1,
+      "dlig" 1,
+      "calt" 1,
+      "hlig" 1;
+    font-variant-ligatures: common-ligatures discretionary-ligatures contextual historical-ligatures;
+    line-height: 1.5;
+  }
+
+  /* Text wrapping improvements */
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.2;
+    text-wrap: balance;
+  }
+
+  /* Focus ring styling */
+  :focus-visible {
+    @apply outline-2 outline-offset-2;
+  }
+
+  /* Selection styling */
+  ::selection {
+    @apply bg-primary text-primary-foreground;
+  }
+
+  /* Links without class */
+  a:not([class]) {
+    text-underline-offset: 0.2em;
+  }
+
+  /* Prevent tiny textareas */
+  textarea:not([rows]) {
+    min-height: 10em;
+  }
+
+  /* Auto-sizing textareas (progressive enhancement) */
+  @supports (field-sizing: content) {
+    textarea {
+      field-sizing: content;
+      min-height: 3lh;
+      max-height: 50vh;
+    }
+  }
+}

package/dist/styles/grid.css

@@ -0,0 +1,61 @@
+/**
+ * Grid Utilities
+ * Reusable container and grid layout classes
+ */
+@layer components {
+  /**
+   * Container with max-width and horizontal padding
+   * Uses CSS custom properties for configurability:
+   * - --spacing-grid-max: Maximum container width
+   * - --spacing-grid-gutter: Horizontal padding/gap
+   */
+  .u-container {
+    position: relative;
+    max-width: var(--spacing-grid-max);
+    padding-inline: var(--spacing-grid-gutter);
+    margin-inline: auto;
+  }
+
+  /**
+   * 12-column CSS Grid with container queries
+   * Uses CSS custom properties for configurability:
+   * - --spacing-grid-gutter: Gap between grid items
+   */
+  .u-grid {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    grid-auto-flow: dense;
+    gap: var(--spacing-grid-gutter);
+    width: 100%;
+    container-name: grid;
+    container-type: inline-size;
+  }
+
+  /**
+   * Full-width grid item spanning all 12 columns
+   */
+  .u-grid-full {
+    grid-column: 1 / -1;
+  }
+
+  /**
+   * Half-width grid item spanning 6 columns
+   */
+  .u-grid-half {
+    grid-column: span 6;
+  }
+
+  /**
+   * Third-width grid item spanning 4 columns
+   */
+  .u-grid-third {
+    grid-column: span 4;
+  }
+
+  /**
+   * Quarter-width grid item spanning 3 columns
+   */
+  .u-grid-quarter {
+    grid-column: span 3;
+  }
+}

package/dist/styles/index.css

@@ -0,0 +1,19 @@
+/**
+ * @regardio/tailwind - Shared Styles
+ *
+ * Import this file to include all shared styles:
+ * @import "@regardio/tailwind/styles";
+ *
+ * Or import individual files:
+ * @import "@regardio/tailwind/styles/plugins.css";
+ * @import "@regardio/tailwind/styles/reset.css";
+ * @import "@regardio/tailwind/styles/base.css";
+ * @import "@regardio/tailwind/styles/grid.css";
+ * @import "@regardio/tailwind/styles/animations.css";
+ */
+
+@import "./plugins.css";
+@import "./reset.css";
+@import "./base.css";
+@import "./grid.css";
+@import "./animations.css";

package/dist/styles/plugins.css

@@ -0,0 +1,13 @@
+/**
+ * Tailwind CSS Core & Plugins
+ * Import this to get Tailwind CSS with Regardio's standard plugins
+ */
+
+/* Tailwind CSS v4 */
+@import "tailwindcss";
+
+/* Animation utilities */
+@import "tw-animate-css";
+
+/* Fluid typography and spacing */
+@plugin "fluid-tailwindcss";

package/dist/styles/reset.css

@@ -0,0 +1,277 @@
+/**
+ * CSS Reset
+ * Browser normalization and cross-browser fixes only.
+ * Design defaults belong in base.css
+ *
+ * @see https://www.joshwcomeau.com/css/custom-css-reset/
+ */
+@layer base {
+  /* ============================================
+   * BOX MODEL
+   * ============================================ */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  /* Reset margin on all elements except dialog (uses margin: auto for centering) */
+  *:not(dialog) {
+    margin: 0;
+  }
+
+  /* Tailwind-compatible border reset */
+  *,
+  *::before,
+  *::after {
+    border-style: solid;
+    border-width: 0;
+  }
+
+  /* Fix flex item overflow bug */
+  * {
+    min-width: 0;
+  }
+
+  /* ============================================
+   * HTML ROOT
+   * ============================================ */
+  html {
+    /* Prevent iOS text size inflation */
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+
+    /* System color scheme support */
+    color-scheme: light dark;
+
+    /* Enable height-based layouts */
+    height: 100%;
+
+    /* Consistent tab size */
+    tab-size: 2;
+
+    /* Better scroll anchoring */
+    overflow-anchor: auto;
+
+    /* Touch scroll momentum (iOS) */
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Enable keyword animations + smooth scroll only for users without motion sensitivity */
+  @media (prefers-reduced-motion: no-preference) {
+    html {
+      interpolate-size: allow-keywords;
+      scroll-behavior: smooth;
+    }
+  }
+
+  html[data-theme="light"] {
+    color-scheme: light;
+  }
+
+  html[data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  /* ============================================
+   * BODY
+   * ============================================ */
+  body {
+    position: relative;
+    min-height: 100%;
+    margin: 0;
+
+    /* Antialiased rendering (macOS browsers default to subpixel) */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* ============================================
+   * FORM ELEMENTS
+   * Inherit instead of browser defaults
+   * ============================================ */
+  input,
+  button,
+  textarea,
+  select,
+  optgroup {
+    font: inherit;
+    color: inherit;
+    background-color: transparent;
+  }
+
+  /* Explicit input types for edge cases */
+  [type="date"],
+  [type="datetime-local"],
+  [type="email"],
+  [type="month"],
+  [type="number"],
+  [type="password"],
+  [type="search"],
+  [type="tel"],
+  [type="text"],
+  [type="time"],
+  [type="url"],
+  [type="week"],
+  [multiple] {
+    font: inherit;
+    background-color: transparent;
+  }
+
+  /* Remove webkit search styling */
+  [type="search"]::-webkit-search-decoration,
+  [type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+
+  /* Cursor normalization */
+  button,
+  [role="button"] {
+    cursor: pointer;
+  }
+
+  button:disabled,
+  [role="button"]:disabled,
+  input:disabled,
+  select:disabled,
+  textarea:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ============================================
+   * MEDIA ELEMENTS
+   * ============================================ */
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    flex-shrink: 0;
+    max-width: 100%;
+  }
+
+  img,
+  video {
+    height: auto;
+  }
+
+  /* Icons inherit text color unless explicitly set */
+  svg:not([fill]) {
+    fill: currentColor;
+  }
+
+  iframe,
+  embed,
+  object {
+    display: block;
+    max-width: 100%;
+  }
+
+  /* ============================================
+   * INTERACTIVE ELEMENTS
+   * ============================================ */
+
+  /* Focus only visible on keyboard navigation */
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  /* Dialog normalization */
+  dialog {
+    padding: 0;
+    border: none;
+  }
+
+  /* Summary/details normalization */
+  summary {
+    display: list-item;
+    cursor: pointer;
+  }
+
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
+  /* Enforce hidden attribute */
+  [hidden] {
+    /* biome-ignore lint/complexity/noImportantStyles: Must always work */
+    display: none !important;
+  }
+
+  /* Inert elements */
+  [inert],
+  [inert] * {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  /* ============================================
+   * TABLES
+   * ============================================ */
+  table {
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  /* ============================================
+   * LINKS
+   * ============================================ */
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  a:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
+
+  /* ============================================
+   * LISTS (Safari VoiceOver fix)
+   * ============================================ */
+  ul[role="list"],
+  ol[role="list"] {
+    padding: 0;
+    list-style: none;
+  }
+
+  /* ============================================
+   * STACKING CONTEXTS
+   * ============================================ */
+  #root,
+  #__next,
+  #app {
+    isolation: isolate;
+  }
+
+  /* ============================================
+   * MOBILE
+   * ============================================ */
+  * {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  @media (pointer: coarse) {
+    html {
+      touch-action: manipulation;
+    }
+  }
+
+  /* ============================================
+   * ACCESSIBILITY - REDUCED MOTION
+   * ============================================ */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      /* biome-ignore lint/complexity/noImportantStyles: Accessibility override */
+      animation-duration: 0.01ms !important;
+      /* biome-ignore lint/complexity/noImportantStyles: Accessibility override */
+      animation-iteration-count: 1 !important;
+      /* biome-ignore lint/complexity/noImportantStyles: Accessibility override */
+      transition-duration: 0.01ms !important;
+      /* biome-ignore lint/complexity/noImportantStyles: Accessibility override */
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "@regardio/tailwind",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Regardio Tailwind CSS utilities and configuration",
   "keywords": ["tailwind", "tailwindcss", "utilities", "regardio"],
   "homepage": "https://github.com/regardio/tailwind#readme",
@@ -25,7 +25,7 @@
   },
   "files": ["dist"],
   "scripts": {
-    "build": "exec-s fix",
+    "build": "exec-s tsdown fix",
     "dev": "tsdown --watch",
     "fix": "exec-s fix:pkg fix:md fix:biome",
     "fix:biome": "lint-biome check --write --unsafe .",