@justin_evo/evo-ui 1.0.1

package/src/css/utilities/_spacing.scss

@@ -0,0 +1,99 @@
+// ==========================================
+// SPACING UTILITIES
+// m-{n} | p-{n} | gap-{n}  (1 unit = 0.25rem)
+// ==========================================
+
+$_spacing: (
+  0:  0,
+  1:  0.25rem,
+  2:  0.5rem,
+  3:  0.75rem,
+  4:  1rem,
+  5:  1.25rem,
+  6:  1.5rem,
+  7:  1.75rem,
+  8:  2rem,
+  9:  2.25rem,
+  10: 2.5rem,
+  11: 2.75rem,
+  12: 3rem,
+  14: 3.5rem,
+  16: 4rem,
+  20: 5rem,
+  24: 6rem,
+  28: 7rem,
+  32: 8rem,
+  36: 9rem,
+  40: 10rem,
+  44: 11rem,
+  48: 12rem,
+  56: 14rem,
+  64: 16rem,
+  72: 18rem,
+  80: 20rem,
+  96: 24rem,
+);
+
+@each $key, $val in $_spacing {
+  // Margin
+  .m-#{$key}  { margin: $val; }
+  .mt-#{$key} { margin-top: $val; }
+  .mr-#{$key} { margin-right: $val; }
+  .mb-#{$key} { margin-bottom: $val; }
+  .ml-#{$key} { margin-left: $val; }
+  .mx-#{$key} { margin-inline: $val; }
+  .my-#{$key} { margin-block: $val; }
+
+  // Padding
+  .p-#{$key}  { padding: $val; }
+  .pt-#{$key} { padding-top: $val; }
+  .pr-#{$key} { padding-right: $val; }
+  .pb-#{$key} { padding-bottom: $val; }
+  .pl-#{$key} { padding-left: $val; }
+  .px-#{$key} { padding-inline: $val; }
+  .py-#{$key} { padding-block: $val; }
+
+  // Gap
+  .gap-#{$key}   { gap: $val; }
+  .gap-x-#{$key} { column-gap: $val; }
+  .gap-y-#{$key} { row-gap: $val; }
+}
+
+// Pixel variants
+.m-px  { margin: 1px; }
+.mt-px { margin-top: 1px; }
+.mr-px { margin-right: 1px; }
+.mb-px { margin-bottom: 1px; }
+.ml-px { margin-left: 1px; }
+.mx-px { margin-inline: 1px; }
+.my-px { margin-block: 1px; }
+.p-px  { padding: 1px; }
+.pt-px { padding-top: 1px; }
+.pr-px { padding-right: 1px; }
+.pb-px { padding-bottom: 1px; }
+.pl-px { padding-left: 1px; }
+.px-px { padding-inline: 1px; }
+.py-px { padding-block: 1px; }
+.gap-px { gap: 1px; }
+
+// Auto margins
+.m-auto  { margin: auto; }
+.mt-auto { margin-top: auto; }
+.mr-auto { margin-right: auto; }
+.mb-auto { margin-bottom: auto; }
+.ml-auto { margin-left: auto; }
+.mx-auto { margin-inline: auto; }
+.my-auto { margin-block: auto; }
+
+// Negative margins
+@each $key, $val in $_spacing {
+  @if $key != 0 {
+    .-m-#{$key}  { margin: -$val; }
+    .-mt-#{$key} { margin-top: -$val; }
+    .-mr-#{$key} { margin-right: -$val; }
+    .-mb-#{$key} { margin-bottom: -$val; }
+    .-ml-#{$key} { margin-left: -$val; }
+    .-mx-#{$key} { margin-inline: -$val; }
+    .-my-#{$key} { margin-block: -$val; }
+  }
+}

package/src/css/utilities/_typography.scss

@@ -0,0 +1,121 @@
+@use '../base/variables' as *;
+
+// ==========================================
+// TYPOGRAPHY UTILITIES
+// ==========================================
+
+// Font size
+.text-xs   { font-size: $text-xs;   line-height: 1rem; }
+.text-sm   { font-size: $text-sm;   line-height: 1.25rem; }
+.text-base { font-size: $text-base; line-height: 1.5rem; }
+.text-lg   { font-size: $text-lg;   line-height: 1.75rem; }
+.text-xl   { font-size: $text-xl;   line-height: 1.75rem; }
+.text-2xl  { font-size: $text-2xl;  line-height: 2rem; }
+.text-3xl  { font-size: $text-3xl;  line-height: 2.25rem; }
+.text-4xl  { font-size: 2.25rem;    line-height: 2.5rem; }
+.text-5xl  { font-size: 3rem;       line-height: 1; }
+.text-6xl  { font-size: 3.75rem;    line-height: 1; }
+
+// Font weight
+.font-thin       { font-weight: 100; }
+.font-extralight { font-weight: 200; }
+.font-light      { font-weight: 300; }
+.font-normal     { font-weight: 400; }
+.font-medium     { font-weight: 500; }
+.font-semibold   { font-weight: 600; }
+.font-bold       { font-weight: 700; }
+.font-extrabold  { font-weight: 800; }
+.font-black      { font-weight: 900; }
+
+// Font family
+.font-sans    { font-family: $font-sans; }
+.font-display { font-family: $font-display; }
+.font-mono    { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; }
+
+// Text alignment
+.text-left    { text-align: left; }
+.text-center  { text-align: center; }
+.text-right   { text-align: right; }
+.text-justify { text-align: justify; }
+.text-start   { text-align: start; }
+.text-end     { text-align: end; }
+
+// Text transform
+.uppercase   { text-transform: uppercase; }
+.lowercase   { text-transform: lowercase; }
+.capitalize  { text-transform: capitalize; }
+.normal-case { text-transform: none; }
+
+// Text decoration
+.underline       { text-decoration-line: underline; }
+.overline        { text-decoration-line: overline; }
+.line-through    { text-decoration-line: line-through; }
+.no-underline    { text-decoration-line: none; }
+
+// Font style
+.italic     { font-style: italic; }
+.not-italic { font-style: normal; }
+
+// Line height
+.leading-none    { line-height: 1; }
+.leading-tight   { line-height: 1.25; }
+.leading-snug    { line-height: 1.375; }
+.leading-normal  { line-height: 1.5; }
+.leading-relaxed { line-height: 1.625; }
+.leading-loose   { line-height: 2; }
+
+// Letter spacing
+.tracking-tighter { letter-spacing: -0.05em; }
+.tracking-tight   { letter-spacing: -0.025em; }
+.tracking-normal  { letter-spacing: 0; }
+.tracking-wide    { letter-spacing: 0.025em; }
+.tracking-wider   { letter-spacing: 0.05em; }
+.tracking-widest  { letter-spacing: 0.1em; }
+
+// Whitespace
+.whitespace-normal   { white-space: normal; }
+.whitespace-nowrap   { white-space: nowrap; }
+.whitespace-pre      { white-space: pre; }
+.whitespace-pre-line { white-space: pre-line; }
+.whitespace-pre-wrap { white-space: pre-wrap; }
+.whitespace-break    { white-space: break-spaces; }
+
+// Word break
+.break-normal { overflow-wrap: normal; word-break: normal; }
+.break-words  { overflow-wrap: break-word; }
+.break-all    { word-break: break-all; }
+.break-keep   { word-break: keep-all; }
+
+// Truncate (single line ellipsis)
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Multi-line clamp
+.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
+.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
+.line-clamp-4 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
+
+// Text overflow
+.text-ellipsis { text-overflow: ellipsis; }
+.text-clip     { text-overflow: clip; }
+
+// Vertical align
+.align-baseline    { vertical-align: baseline; }
+.align-top         { vertical-align: top; }
+.align-middle      { vertical-align: middle; }
+.align-bottom      { vertical-align: bottom; }
+.align-text-top    { vertical-align: text-top; }
+.align-text-bottom { vertical-align: text-bottom; }
+.align-sub         { vertical-align: sub; }
+.align-super       { vertical-align: super; }
+
+// List style
+.list-none    { list-style-type: none; }
+.list-disc    { list-style-type: disc; }
+.list-decimal { list-style-type: decimal; }
+.list-inside  { list-style-position: inside; }
+.list-outside { list-style-position: outside; }

package/src/css/utilities/index.scss

@@ -0,0 +1,24 @@
+// ==========================================
+// EVO-UI UTILITY CLASSES
+// Tailwind-inspired utility-first CSS helpers
+// ==========================================
+//
+// Import this file to get the full utility layer:
+//   import '@justin_evo/evo-ui/dist/utilities.css'
+//
+// Or rely on the utilities already bundled inside:
+//   import '@justin_evo/evo-ui/dist/evo-ui.css'
+// ==========================================
+
+// Theme tokens (light & dark CSS variables) must be emitted first
+// so every following rule can read them via `var(--evo-color-*)`.
+@use '../base/theme';
+
+@use './colors';
+@use './spacing';
+@use './typography';
+@use './layout';
+@use './sizing';
+@use './borders';
+@use './effects';
+@use './position';

package/src/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '*.module.scss' {
+  const classes: Record<string, string>;
+  export default classes;
+}
+
+declare module '*.scss' {}

package/src/index.ts

@@ -0,0 +1,60 @@
+/**
+ * @module EvoUI
+ * @summary A high-performance, enterprise-grade UI component library built for modern web applications.
+ * @version 1.0.0
+ * @author Justin Khor
+ * @license MIT
+ * @see {@link https://github.com/your-repo/evo-ui} Official Documentation
+ */
+
+// Utility classes (bundled into dist/evo-ui.css)
+// Also emits the theme tokens (light + dark CSS variables) so consumers
+// only need a single CSS import to get themed components.
+import './css/utilities/index.scss';
+
+// Theming
+export * from './Theme/ThemeProvider';
+export * from './Theme/ThemeToggle';
+
+// Existing
+export * from './Button/Button';
+export * from './Card/Card';
+
+// Layout & Structure
+export * from './Stack/Stack';
+export * from './Grid/Grid';
+export * from './Divider/Divider';
+export * from './Container/Container';
+
+// Navigation
+export * from './Tabs/Tabs';
+export * from './Breadcrumb/Breadcrumb';
+export * from './Nav/Nav';
+export * from './TopNav/TopNav';
+export * from './Pagination/Pagination';
+export * from './CommandPalette/CommandPalette';
+
+// Forms & Inputs
+export * from './Input/Input';
+export * from './RichTextArea/RichTextArea';
+export * from './Select/Select';
+export * from './TreeSelect/TreeSelect';
+export * from './AutoComplete/AutoComplete';
+export * from './Checkbox/Checkbox';
+export * from './Radio/Radio';
+export * from './Toggle/Toggle';
+export * from './Form/Form';
+
+// Feedback & Overlays
+export * from './Modal/Modal';
+export * from './Notification/Notification';
+export * from './Tooltip/Tooltip';
+export * from './Alert/Alert';
+
+// Data Display
+export * from './Badge/Badge';
+export * from './Skeleton/Skeleton';
+export * from './Table/Table';
+
+// Media
+export * from './ImageCropper/ImageCropper';