@justin_evo/evo-ui 1.1.0 → 1.2.1

package/src/css/utilities/_typography.scss

@@ -1,121 +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; }
+@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

@@ -1,24 +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';
+// ==========================================
+// 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

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

package/src/index.ts

@@ -1,60 +1,60 @@
-/**
- * @module EvoUI
- * @summary A high-performance, enterprise-grade UI component library built for modern web applications.
- * @version 1.0.2
- * @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';
+/**
+ * @module EvoUI
+ * @summary A high-performance, enterprise-grade UI component library built for modern web applications.
+ * @version 1.0.2
+ * @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';