@mineui/utils 0.0.2 → 0.0.4

package/dist/scss/responsive.scss

@@ -0,0 +1,383 @@
+// @mineui/responsive (RESPONSIVE & STATE VARIANTS)
+//
+// Made with ❤️ by Maysara.
+
+
+
+// ----------------------------------------------------------------------------
+// PACK
+// ----------------------------------------------------------------------------
+    @use '../../../node_modules/@mineui/tokens' as *;
+
+
+// ----------------------------------------------------------------------------
+// RESPONSIVE VARIANTS (sm, md, lg, xl, 2xl)
+// ----------------------------------------------------------------------------
+
+// Macro to generate responsive variants
+@mixin responsive-variants($class-name, $property, $value) {
+  @each $breakpoint-name, $breakpoint-value in $breakpoints {
+    @if $breakpoint-value != 0 {
+      @media (min-width: $breakpoint-value) {
+        .#{$breakpoint-name}\:#{$class-name} {
+          #{$property}: $value !important;
+        }
+      }
+    }
+  }
+}
+
+// Generate responsive classes for most common utilities
+@each $breakpoint-name, $breakpoint-value in $breakpoints {
+  @if $breakpoint-value != 0 {
+    @media (min-width: $breakpoint-value) {
+
+      // Display
+      .#{$breakpoint-name}\:block { display: block !important; }
+      .#{$breakpoint-name}\:inline-block { display: inline-block !important; }
+      .#{$breakpoint-name}\:inline { display: inline !important; }
+      .#{$breakpoint-name}\:flex { display: flex !important; }
+      .#{$breakpoint-name}\:inline-flex { display: inline-flex !important; }
+      .#{$breakpoint-name}\:grid { display: grid !important; }
+      .#{$breakpoint-name}\:hidden { display: none !important; }
+
+      // Flex Direction
+      .#{$breakpoint-name}\:flex-row { flex-direction: row !important; }
+      .#{$breakpoint-name}\:flex-col { flex-direction: column !important; }
+
+      // Justify & Align
+      .#{$breakpoint-name}\:justify-start { justify-content: flex-start !important; }
+      .#{$breakpoint-name}\:justify-center { justify-content: center !important; }
+      .#{$breakpoint-name}\:justify-end { justify-content: flex-end !important; }
+      .#{$breakpoint-name}\:justify-between { justify-content: space-between !important; }
+
+      .#{$breakpoint-name}\:items-start { align-items: flex-start !important; }
+      .#{$breakpoint-name}\:items-center { align-items: center !important; }
+      .#{$breakpoint-name}\:items-end { align-items: flex-end !important; }
+
+      // Grid Columns
+      @for $i from 1 through 12 {
+        .#{$breakpoint-name}\:grid-cols-#{$i} {
+          grid-template-columns: repeat($i, minmax(0, 1fr)) !important;
+        }
+        .#{$breakpoint-name}\:col-span-#{$i} {
+          grid-column: span $i / span $i !important;
+        }
+      }
+
+      // Width
+      .#{$breakpoint-name}\:w-auto { width: auto !important; }
+      .#{$breakpoint-name}\:w-full { width: 100% !important; }
+      .#{$breakpoint-name}\:w-1\/2 { width: 50% !important; }
+      .#{$breakpoint-name}\:w-1\/3 { width: 33.333333% !important; }
+      .#{$breakpoint-name}\:w-2\/3 { width: 66.666667% !important; }
+      .#{$breakpoint-name}\:w-1\/4 { width: 25% !important; }
+      .#{$breakpoint-name}\:w-3\/4 { width: 75% !important; }
+
+      // Text Alignment
+      .#{$breakpoint-name}\:text-start { text-align: start !important; }
+      .#{$breakpoint-name}\:text-center { text-align: center !important; }
+      .#{$breakpoint-name}\:text-end { text-align: end !important; }
+
+      // Text Size
+      .#{$breakpoint-name}\:text-xs { font-size: $fs-xs !important; }
+      .#{$breakpoint-name}\:text-sm { font-size: $fs-sm !important; }
+      .#{$breakpoint-name}\:text-base { font-size: $fs-base !important; }
+      .#{$breakpoint-name}\:text-lg { font-size: $fs-lg !important; }
+      .#{$breakpoint-name}\:text-xl { font-size: $fs-xl !important; }
+      .#{$breakpoint-name}\:text-2xl { font-size: $fs-2xl !important; }
+      .#{$breakpoint-name}\:text-3xl { font-size: $fs-3xl !important; }
+
+      // Common Spacing
+      @each $sp-key, $sp-value in (0: $sp-0, 1: $sp-1, 2: $sp-2, 3: $sp-3, 4: $sp-4, 6: $sp-6, 8: $sp-8, 12: $sp-12) {
+        .#{$breakpoint-name}\:p-#{$sp-key} { padding: $sp-value !important; }
+        .#{$breakpoint-name}\:px-#{$sp-key} { padding-inline: $sp-value !important; }
+        .#{$breakpoint-name}\:py-#{$sp-key} { padding-block: $sp-value !important; }
+        .#{$breakpoint-name}\:m-#{$sp-key} { margin: $sp-value !important; }
+        .#{$breakpoint-name}\:mx-#{$sp-key} { margin-inline: $sp-value !important; }
+        .#{$breakpoint-name}\:my-#{$sp-key} { margin-block: $sp-value !important; }
+        .#{$breakpoint-name}\:gap-#{$sp-key} { gap: $sp-value !important; }
+      }
+
+      .#{$breakpoint-name}\:mx-auto { margin-inline: auto !important; }
+    }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// HOVER STATE VARIANTS
+// ----------------------------------------------------------------------------
+
+// Background
+.hover\:bg-brand:hover { background-color: var(--brand-hover) !important; }
+.hover\:bg-success:hover { background-color: var(--success-hover) !important; }
+.hover\:bg-warning:hover { background-color: var(--warning-hover) !important; }
+.hover\:bg-error:hover { background-color: var(--error-hover) !important; }
+
+// Opacity
+@each $key, $value in (0: $opacity-0, 50: $opacity-50, 75: $opacity-75, 100: $opacity-100) {
+  .hover\:opacity-#{$key}:hover { opacity: $value !important; }
+}
+
+// Scale
+.hover\:scale-105:hover { transform: scale(1.05) !important; }
+.hover\:scale-110:hover { transform: scale(1.1) !important; }
+.hover\:scale-125:hover { transform: scale(1.25) !important; }
+
+// Shadow
+.hover\:shadow-sm:hover { box-shadow: var(--shadow-sm) !important; }
+.hover\:shadow-md:hover { box-shadow: var(--shadow-md) !important; }
+.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg) !important; }
+
+// Translate
+.hover\:-translate-y-1:hover { transform: translateY(-#{$sp-1}) !important; }
+.hover\:-translate-y-2:hover { transform: translateY(-#{$sp-2}) !important; }
+
+// Brightness
+.hover\:brightness-110:hover { filter: brightness(1.1) !important; }
+.hover\:brightness-125:hover { filter: brightness(1.25) !important; }
+
+// ----------------------------------------------------------------------------
+// FOCUS STATE VARIANTS
+// ----------------------------------------------------------------------------
+
+// Outline
+.focus\:outline-none:focus { outline: none !important; }
+.focus\:outline-brand:focus { outline: 2px solid var(--border-focus) !important; }
+
+// Ring (Focus Ring)
+.focus\:ring:focus-visible {
+  outline: 2px solid var(--border-focus) !important;
+  outline-offset: 2px !important;
+}
+
+.focus\:ring-inset:focus-visible {
+  outline: 2px solid var(--border-focus) !important;
+  outline-offset: -2px !important;
+}
+
+// Scale
+.focus\:scale-105:focus { transform: scale(1.05) !important; }
+
+// ----------------------------------------------------------------------------
+// ACTIVE STATE VARIANTS
+// ----------------------------------------------------------------------------
+
+// Scale
+.active\:scale-95:active { transform: scale(0.95) !important; }
+.active\:scale-90:active { transform: scale(0.9) !important; }
+
+// Opacity
+.active\:opacity-80:active { opacity: $opacity-80 !important; }
+
+// Background
+.active\:bg-brand:active { background-color: var(--brand-active) !important; }
+
+// ----------------------------------------------------------------------------
+// DISABLED STATE VARIANTS
+// ----------------------------------------------------------------------------
+
+// Opacity
+.disabled\:opacity-50:disabled,
+.disabled\:opacity-50[aria-disabled="true"] {
+  opacity: var(--disabled-opacity) !important;
+}
+
+// Cursor
+.disabled\:cursor-not-allowed:disabled,
+.disabled\:cursor-not-allowed[aria-disabled="true"] {
+  cursor: not-allowed !important;
+}
+
+// ----------------------------------------------------------------------------
+// GROUP HOVER VARIANTS
+// ----------------------------------------------------------------------------
+
+.group:hover .group-hover\:opacity-100 { opacity: $opacity-100 !important; }
+.group:hover .group-hover\:scale-105 { transform: scale(1.05) !important; }
+.group:hover .group-hover\:translate-x-1 { transform: translateX($sp-1) !important; }
+.group:hover .group-hover\:block { display: block !important; }
+
+// ----------------------------------------------------------------------------
+// DARK MODE VARIANTS
+// ----------------------------------------------------------------------------
+
+[data-theme="dark"] {
+  .dark\:bg-page { background-color: var(--bg-page) !important; }
+  .dark\:bg-surface { background-color: var(--bg-surface) !important; }
+  .dark\:bg-raised { background-color: var(--bg-raised) !important; }
+
+  .dark\:text-1 { color: var(--text-1) !important; }
+  .dark\:text-2 { color: var(--text-2) !important; }
+  .dark\:text-3 { color: var(--text-3) !important; }
+
+  .dark\:border-1 { border-color: var(--border-1) !important; }
+  .dark\:border-2 { border-color: var(--border-2) !important; }
+
+  .dark\:hidden { display: none !important; }
+  .dark\:block { display: block !important; }
+}
+
+// Auto dark mode (system preference)
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    .dark\:bg-page { background-color: var(--bg-page) !important; }
+    .dark\:bg-surface { background-color: var(--bg-surface) !important; }
+    .dark\:text-1 { color: var(--text-1) !important; }
+    .dark\:hidden { display: none !important; }
+    .dark\:block { display: block !important; }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// RTL VARIANTS
+// ----------------------------------------------------------------------------
+
+[dir="rtl"] {
+  .rtl\:hidden { display: none !important; }
+  .rtl\:block { display: block !important; }
+  .rtl\:flex-row-reverse { flex-direction: row-reverse !important; }
+  .rtl\:text-start { text-align: start !important; }
+  .rtl\:text-end { text-align: end !important; }
+  .rtl\:rotate-180 { transform: rotate(180deg) !important; }
+}
+
+[dir="ltr"] {
+  .ltr\:hidden { display: none !important; }
+  .ltr\:block { display: block !important; }
+}
+
+// ----------------------------------------------------------------------------
+// MOTION SAFE/REDUCE
+// ----------------------------------------------------------------------------
+
+@media (prefers-reduced-motion: no-preference) {
+  .motion-safe\:animate-spin { animation: spin 1s linear infinite !important; }
+  .motion-safe\:animate-bounce { animation: bounce 1s infinite !important; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .motion-reduce\:transition-none { transition: none !important; }
+  .motion-reduce\:animate-none { animation: none !important; }
+}
+
+// ----------------------------------------------------------------------------
+// PRINT VARIANTS
+// ----------------------------------------------------------------------------
+
+@media print {
+  .print\:hidden { display: none !important; }
+  .print\:block { display: block !important; }
+  .print\:inline { display: inline !important; }
+  .print\:flex { display: flex !important; }
+  .print\:grid { display: grid !important; }
+}
+
+// ----------------------------------------------------------------------------
+// FIRST/LAST CHILD VARIANTS
+// ----------------------------------------------------------------------------
+
+.first\:mt-0:first-child { margin-block-start: 0 !important; }
+.last\:mb-0:last-child { margin-block-end: 0 !important; }
+
+.first\:rounded-t:first-child {
+  border-start-start-radius: $br-base !important;
+  border-start-end-radius: $br-base !important;
+}
+
+.last\:rounded-b:last-child {
+  border-end-start-radius: $br-base !important;
+  border-end-end-radius: $br-base !important;
+}
+
+// ----------------------------------------------------------------------------
+// ODD/EVEN VARIANTS (Table Stripes)
+// ----------------------------------------------------------------------------
+
+.odd\:bg-surface:nth-child(odd) { background-color: var(--bg-surface) !important; }
+.even\:bg-raised:nth-child(even) { background-color: var(--bg-raised) !important; }
+
+// ----------------------------------------------------------------------------
+// PLACEHOLDER VARIANT
+// ----------------------------------------------------------------------------
+
+.placeholder\:text-3::placeholder { color: var(--text-3) !important; }
+.placeholder\:opacity-50::placeholder { opacity: $opacity-50 !important; }
+
+// ----------------------------------------------------------------------------
+// FILE INPUT VARIANT
+// ----------------------------------------------------------------------------
+
+.file\:border-0::file-selector-button { border: 0 !important; }
+.file\:bg-brand::file-selector-button { background-color: var(--brand) !important; }
+.file\:text-inverse::file-selector-button { color: var(--text-inverse) !important; }
+
+// ----------------------------------------------------------------------------
+// PEER VARIANTS (Sibling States)
+// ----------------------------------------------------------------------------
+
+.peer:checked ~ .peer-checked\:block { display: block !important; }
+.peer:checked ~ .peer-checked\:hidden { display: none !important; }
+.peer:focus ~ .peer-focus\:ring {
+  outline: 2px solid var(--border-focus) !important;
+  outline-offset: 2px !important;
+}
+
+// ----------------------------------------------------------------------------
+// CONTAINER QUERIES (Modern!)
+// ----------------------------------------------------------------------------
+
+@container (min-width: 320px) {
+  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+}
+
+@container (min-width: 640px) {
+  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
+}
+
+@container (min-width: 1024px) {
+  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
+}
+
+// ----------------------------------------------------------------------------
+// CONTAINER CLASS
+// ----------------------------------------------------------------------------
+
+.container {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: $sp-4;
+
+  @media (min-width: $bp-sm) { max-width: $bp-sm; }
+  @media (min-width: $bp-md) { max-width: $bp-md; }
+  @media (min-width: $bp-lg) { max-width: $bp-lg; }
+  @media (min-width: $bp-xl) { max-width: $bp-xl; }
+  @media (min-width: $bp-2xl) { max-width: $bp-2xl; }
+}
+
+// ----------------------------------------------------------------------------
+// SCREEN READER ONLY
+// ----------------------------------------------------------------------------
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mineui/utils",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"description": "utils",
 	"keywords": ["mine", "ui", "utils"],
 	"license": "MIT",
@@ -26,10 +26,11 @@
 			"types": "./dist/index.d.ts",
 			"import": "./dist/index.js",
 			"require": "./dist/index.js"
-		}
+		},
+		"./style": "./dist/scss/index.scss"
 	},
 	"scripts": {
-		"build": "sass src/style/index.scss dist/index.css --style=compressed",
+		"build": "bun scripts/copy-scss.js",
 		"lint": "eslint src --ext .ts",
 		"test": "bun test"
 	},
@@ -39,6 +40,9 @@
 	"peerDependencies": {
 		"bun": "^1.3.3"
 	},
+	"dependencies": {
+		"@mineui/tokens": "^0.0.7"
+	},
 	"devDependencies": {
 		"@eslint/js": "^9.39.2",
 		"@stylistic/eslint-plugin": "^5.6.1",
@@ -52,5 +56,6 @@
 		"tsup": "^8.5.1",
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.51.0"
-	}
+	},
+	"style": "./dist/index.css"
 }