@instincthub/react-ui 0.0.4 → 0.0.6

package/dist/src/assets/css/bootstrap/readme/overflow.md

@@ -0,0 +1,97 @@
+# InstinctHub CSS Overflow Utilities
+
+This document outlines the custom overflow utilities for InstinctHub's CSS framework, designed to provide consistent overflow behavior across the platform.
+
+## General Overflow Utilities
+
+These utilities control the overflow behavior in both directions (horizontal and vertical).
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-overflow-auto` | Adds scrollbars only when content overflows |
+| `.ihub-overflow-hidden` | Clips content that overflows the element's box |
+| `.ihub-overflow-visible` | Content is not clipped when it overflows |
+| `.ihub-overflow-scroll` | Always displays scrollbars, even when content doesn't overflow |
+
+## Axis-Specific Overflow
+
+These utilities allow you to control overflow behavior on a specific axis.
+
+### Horizontal Overflow
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-overflow-x-auto` | Adds horizontal scrollbar only when content overflows horizontally |
+| `.ihub-overflow-x-hidden` | Clips content that overflows horizontally |
+| `.ihub-overflow-x-scroll` | Always displays horizontal scrollbar |
+
+### Vertical Overflow
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-overflow-y-auto` | Adds vertical scrollbar only when content overflows vertically |
+| `.ihub-overflow-y-hidden` | Clips content that overflows vertically |
+| `.ihub-overflow-y-scroll` | Always displays vertical scrollbar |
+
+## Scrollbar Styling
+
+Custom scrollbar styling for elements with overflow.
+
+| Class | Description |
+|-------|-------------|
+| `.ihub-scrollbar-thin` | Displays thin scrollbars (4px) with InstinctHub brand colors |
+| `.ihub-scrollbar-hidden` | Hides scrollbars while maintaining scroll functionality |
+
+## Usage Examples
+
+### Basic Container with Auto Overflow
+
+```html
+<div class="ihub-overflow-auto" style="max-height: 300px">
+  <!-- Content that might overflow -->
+</div>
+```
+
+### Horizontal Scrolling Container
+
+```html
+<div class="ihub-overflow-x-auto ihub-overflow-y-hidden">
+  <!-- Horizontally scrollable content -->
+</div>
+```
+
+### Custom Scrollbar Styling
+
+```html
+<div class="ihub-overflow-auto ihub-scrollbar-thin">
+  <!-- Content with custom-styled scrollbars -->
+</div>
+<div class="ihub-overflow-auto ihub-scrollbar-thin-light">
+  <!-- Content with custom-styled scrollbars -->
+</div>
+```
+
+### Hidden Scrollbars
+
+```html
+<div class="
+ ihub-scrollbar-hidden">
+  <!-- Content with functional but invisible scrollbars -->
+</div>
+```
+
+## Implementation Notes
+
+- These utilities use CSS variables from InstinctHub's main theme
+- Compatible with all modern browsers
+- For Internet Explorer support, use polyfills or fallbacks
+- Follows the `ihub-` prefix convention for InstinctHub's component library
+
+## Integration with Existing Components
+
+When using these utilities with existing InstinctHub components, follow these guidelines:
+
+1. Apply overflow utilities to container elements rather than directly to components
+2. Use `ihub-overflow-hidden` on parent containers to prevent layout shifts
+3. For long content areas like course descriptions or lesson content, use `ihub-overflow-y-auto` with a defined height
+4. When creating horizontally scrolling galleries or carousels, use `ihub-overflow-x-auto ihub-overflow-y-hidden`

package/dist/src/assets/css/bootstrap/readme/width-height-padding.md

@@ -0,0 +1,380 @@
+# InstinctHub CSS Utilities Documentation
+
+This documentation covers the custom CSS utilities for width, height, and padding created specifically for InstinctHub's front-end framework.
+
+## Table of Contents
+
+1. [Width Utilities](#width-utilities)
+2. [Height Utilities](#height-utilities)
+3. [Padding Utilities](#padding-utilities)
+4. [Responsive Utilities](#responsive-utilities)
+5. [Usage Examples](#usage-examples)
+
+## Width Utilities
+
+Width utilities control the horizontal space an element occupies.
+
+### Fixed Widths
+
+Fixed width utilities set a specific pixel width to an element.
+
+| Class         | Description         |
+| ------------- | ------------------- |
+| `.ihub-w-1`   | Sets width to 1px   |
+| `.ihub-w-2`   | Sets width to 2px   |
+| `.ihub-w-4`   | Sets width to 4px   |
+| `.ihub-w-8`   | Sets width to 8px   |
+| `.ihub-w-16`  | Sets width to 16px  |
+| `.ihub-w-24`  | Sets width to 24px  |
+| `.ihub-w-32`  | Sets width to 32px  |
+| `.ihub-w-48`  | Sets width to 48px  |
+| `.ihub-w-64`  | Sets width to 64px  |
+| `.ihub-w-80`  | Sets width to 80px  |
+| `.ihub-w-96`  | Sets width to 96px  |
+| `.ihub-w-128` | Sets width to 128px |
+| `.ihub-w-200` | Sets width to 200px |
+| `.ihub-w-250` | Sets width to 250px |
+| `.ihub-w-300` | Sets width to 300px |
+| `.ihub-w-350` | Sets width to 350px |
+| `.ihub-w-400` | Sets width to 400px |
+| `.ihub-w-500` | Sets width to 500px |
+| `.ihub-w-600` | Sets width to 600px |
+| `.ihub-w-700` | Sets width to 700px |
+| `.ihub-w-800` | Sets width to 800px |
+
+### Percentage Widths
+
+Percentage-based width utilities set a width relative to the parent element.
+
+| Class          | Description              |
+| -------------- | ------------------------ |
+| `.ihub-w-25`   | Sets width to 25%        |
+| `.ihub-w-33`   | Sets width to 33.333333% |
+| `.ihub-w-50`   | Sets width to 50%        |
+| `.ihub-w-75`   | Sets width to 75%        |
+| `.ihub-w-100`  | Sets width to 100%       |
+| `.ihub-w-auto` | Sets width to auto       |
+
+### Maximum Widths
+
+Maximum width utilities constrain an element's width to a maximum value.
+
+| Class              | Description                  |
+| ------------------ | ---------------------------- |
+| `.ihub-max-w-300`  | Sets max-width to 300px      |
+| `.ihub-max-w-400`  | Sets max-width to 400px      |
+| `.ihub-max-w-500`  | Sets max-width to 500px      |
+| `.ihub-max-w-600`  | Sets max-width to 600px      |
+| `.ihub-max-w-700`  | Sets max-width to 700px      |
+| `.ihub-max-w-800`  | Sets max-width to 800px      |
+| `.ihub-max-w-900`  | Sets max-width to 900px      |
+| `.ihub-max-w-1000` | Sets max-width to 1000px     |
+| `.ihub-max-w-1200` | Sets max-width to 1200px     |
+| `.ihub-max-w-1400` | Sets max-width to 1400px     |
+| `.ihub-max-w-1600` | Sets max-width to 1600px     |
+| `.ihub-max-w-full` | Sets max-width to 100%       |
+| `.ihub-max-w-none` | Removes max-width constraint |
+
+### Minimum Widths
+
+Minimum width utilities set a minimum width for an element.
+
+| Class                | Description              |
+| -------------------- | ------------------------ |
+| `.ihub-min-w-0`      | Sets min-width to 0     |
+| `.ihub-min-w-100`    | Sets min-width to 100px |
+| `.ihub-min-w-200`    | Sets min-width to 200px |
+| `.ihub-min-w-300`    | Sets min-width to 300px |
+| `.ihub-min-w-400`    | Sets min-width to 400px |
+| `.ihub-min-w-500`    | Sets min-width to 500px |
+| `.ihub-min-w-600`    | Sets min-width to 600px |
+| `.ihub-min-w-700`    | Sets min-width to 700px |
+| `.ihub-min-w-800`    | Sets min-width to 800px |
+| `.ihub-min-w-900`    | Sets min-width to 900px |
+| `.ihub-min-w-1000`   | Sets min-width to 1000px|
+| `.ihub-min-w-1100`   | Sets min-width to 1100px |
+| `.ihub-min-w-1200`   | Sets min-width to 1200px |
+| `.ihub-min-w-1300`   | Sets min-width to 1300px |
+| `.ihub-min-w-1400`   | Sets min-width to 1400px |
+| `.ihub-min-w-1500`   | Sets min-width to 1500px |
+| `.ihub-min-w-full`   | Sets min-width to 100%  |
+| `.ihub-min-w-screen` | Sets min-width to 100vh |
+
+
+
+## Height Utilities
+
+Height utilities control the vertical space an element occupies.
+
+### Fixed Heights
+
+Fixed height utilities set a specific pixel height to an element.
+
+| Class         | Description          |
+| ------------- | -------------------- |
+| `.ihub-h-1`   | Sets height to 1px   |
+| `.ihub-h-2`   | Sets height to 2px   |
+| `.ihub-h-4`   | Sets height to 4px   |
+| `.ihub-h-8`   | Sets height to 8px   |
+| `.ihub-h-16`  | Sets height to 16px  |
+| `.ihub-h-24`  | Sets height to 24px  |
+| `.ihub-h-32`  | Sets height to 32px  |
+| `.ihub-h-48`  | Sets height to 48px  |
+| `.ihub-h-64`  | Sets height to 64px  |
+| `.ihub-h-80`  | Sets height to 80px  |
+| `.ihub-h-96`  | Sets height to 96px  |
+| `.ihub-h-128` | Sets height to 128px |
+| `.ihub-h-200` | Sets height to 200px |
+| `.ihub-h-300` | Sets height to 300px |
+| `.ihub-h-400` | Sets height to 400px |
+| `.ihub-h-500` | Sets height to 500px |
+| `.ihub-h-600` | Sets height to 600px |
+
+### Percentage Heights
+
+Percentage-based height utilities set a height relative to the parent element.
+
+| Class            | Description                                 |
+| ---------------- | ------------------------------------------- |
+| `.ihub-h-25`     | Sets height to 25%                          |
+| `.ihub-h-33`     | Sets height to 33.333333%                   |
+| `.ihub-h-50`     | Sets height to 50%                          |
+| `.ihub-h-75`     | Sets height to 75%                          |
+| `.ihub-h-100`    | Sets height to 100%                         |
+| `.ihub-h-auto`   | Sets height to auto                         |
+| `.ihub-h-screen` | Sets height to 100vh (full viewport height) |
+
+### Maximum Heights
+
+Maximum height utilities constrain an element's height to a maximum value.
+
+| Class                | Description                   |
+| -------------------- | ----------------------------- |
+| `.ihub-max-h-200`    | Sets max-height to 200px      |
+| `.ihub-max-h-300`    | Sets max-height to 300px      |
+| `.ihub-max-h-400`    | Sets max-height to 400px      |
+| `.ihub-max-h-500`    | Sets max-height to 500px      |
+| `.ihub-max-h-600`    | Sets max-height to 600px      |
+| `.ihub-max-h-full`   | Sets max-height to 100%       |
+| `.ihub-max-h-screen` | Sets max-height to 100vh      |
+| `.ihub-max-h-none`   | Removes max-height constraint |
+
+### Minimum Heights
+
+Minimum height utilities set a minimum height for an element.
+
+| Class                | Description              |
+| -------------------- | ------------------------ |
+| `.ihub-min-h-0`      | Sets min-height to 0     |
+| `.ihub-min-h-100`    | Sets min-height to 100px |
+| `.ihub-min-h-200`    | Sets min-height to 200px |
+| `.ihub-min-h-300`    | Sets min-height to 300px |
+| `.ihub-min-h-400`    | Sets min-height to 400px |
+| `.ihub-min-h-500`    | Sets min-height to 500px |
+| `.ihub-min-h-600`    | Sets min-height to 600px |
+| `.ihub-min-h-700`    | Sets min-height to 700px |
+| `.ihub-min-h-800`    | Sets min-height to 800px |
+| `.ihub-min-h-900`    | Sets min-height to 900px |
+| `.ihub-min-h-1000`   | Sets min-height to 1000px|
+| `.ihub-min-h-1100`   | Sets min-height to 1100px |
+| `.ihub-min-h-1200`   | Sets min-height to 1200px |
+| `.ihub-min-h-1300`   | Sets min-height to 1300px |
+| `.ihub-min-h-1400`   | Sets min-height to 1400px |
+| `.ihub-min-h-1500`   | Sets min-height to 1500px |
+| `.ihub-min-h-full`   | Sets min-height to 100%  |
+| `.ihub-min-h-screen` | Sets min-height to 100vh |
+
+
+## Padding Utilities
+
+Padding utilities control the space between an element's content and its border.
+
+### All-Side Padding
+
+These utilities apply padding to all sides of an element.
+
+| Class        | Description           |
+| ------------ | --------------------- |
+| `.ihub-p-0`  | Sets padding to 0     |
+| `.ihub-p-1`  | Sets padding to 4px   |
+| `.ihub-p-2`  | Sets padding to 8px   |
+| `.ihub-p-3`  | Sets padding to 12px  |
+| `.ihub-p-4`  | Sets padding to 16px  |
+| `.ihub-p-5`  | Sets padding to 20px  |
+| `.ihub-p-6`  | Sets padding to 24px  |
+| `.ihub-p-8`  | Sets padding to 32px  |
+| `.ihub-p-10` | Sets padding to 40px  |
+| `.ihub-p-12` | Sets padding to 48px  |
+| `.ihub-p-16` | Sets padding to 64px  |
+| `.ihub-p-20` | Sets padding to 80px  |
+| `.ihub-p-24` | Sets padding to 96px  |
+| `.ihub-p-32` | Sets padding to 128px |
+
+### Directional Padding
+
+These utilities apply padding to specific sides of an element.
+
+#### Top Padding
+
+| Class                              | Description                        |
+| ---------------------------------- | ---------------------------------- |
+| `.ihub-pt-0`                       | Sets padding-top to 0              |
+| `.ihub-pt-1` through `.ihub-pt-32` | Sets padding-top from 4px to 128px |
+
+#### Right Padding
+
+| Class                              | Description                          |
+| ---------------------------------- | ------------------------------------ |
+| `.ihub-pr-0`                       | Sets padding-right to 0              |
+| `.ihub-pr-1` through `.ihub-pr-32` | Sets padding-right from 4px to 128px |
+
+#### Bottom Padding
+
+| Class                              | Description                           |
+| ---------------------------------- | ------------------------------------- |
+| `.ihub-pb-0`                       | Sets padding-bottom to 0              |
+| `.ihub-pb-1` through `.ihub-pb-32` | Sets padding-bottom from 4px to 128px |
+
+#### Left Padding
+
+| Class                              | Description                         |
+| ---------------------------------- | ----------------------------------- |
+| `.ihub-pl-0`                       | Sets padding-left to 0              |
+| `.ihub-pl-1` through `.ihub-pl-32` | Sets padding-left from 4px to 128px |
+
+### Horizontal & Vertical Padding
+
+These utilities apply padding to horizontal (left and right) or vertical (top and bottom) sides simultaneously.
+
+#### Horizontal Padding
+
+| Class                              | Description                               |
+| ---------------------------------- | ----------------------------------------- |
+| `.ihub-px-0`                       | Sets horizontal padding to 0              |
+| `.ihub-px-1` through `.ihub-px-32` | Sets horizontal padding from 4px to 128px |
+
+#### Vertical Padding
+
+| Class                              | Description                             |
+| ---------------------------------- | --------------------------------------- |
+| `.ihub-py-0`                       | Sets vertical padding to 0              |
+| `.ihub-py-1` through `.ihub-py-32` | Sets vertical padding from 4px to 128px |
+
+## Responsive Utilities
+
+These utilities apply different styles based on screen size.
+
+### Small Screen Utilities (max-width: 768px)
+
+| Class             | Description                                      |
+| ----------------- | ------------------------------------------------ |
+| `.ihub-sm-w-100`  | Sets width to 100% on small screens              |
+| `.ihub-sm-h-auto` | Sets height to auto on small screens             |
+| `.ihub-sm-p-2`    | Sets padding to 8px on small screens             |
+| `.ihub-sm-p-3`    | Sets padding to 12px on small screens            |
+| `.ihub-sm-p-4`    | Sets padding to 16px on small screens            |
+| `.ihub-sm-py-2`   | Sets vertical padding to 8px on small screens    |
+| `.ihub-sm-py-3`   | Sets vertical padding to 12px on small screens   |
+| `.ihub-sm-px-2`   | Sets horizontal padding to 8px on small screens  |
+| `.ihub-sm-px-3`   | Sets horizontal padding to 12px on small screens |
+
+### Medium Screen Utilities (769px - 1024px)
+
+| Class            | Description                                       |
+| ---------------- | ------------------------------------------------- |
+| `.ihub-md-w-50`  | Sets width to 50% on medium screens               |
+| `.ihub-md-w-75`  | Sets width to 75% on medium screens               |
+| `.ihub-md-w-100` | Sets width to 100% on medium screens              |
+| `.ihub-md-p-4`   | Sets padding to 16px on medium screens            |
+| `.ihub-md-p-5`   | Sets padding to 20px on medium screens            |
+| `.ihub-md-py-4`  | Sets vertical padding to 16px on medium screens   |
+| `.ihub-md-py-5`  | Sets vertical padding to 20px on medium screens   |
+| `.ihub-md-px-4`  | Sets horizontal padding to 16px on medium screens |
+| `.ihub-md-px-5`  | Sets horizontal padding to 20px on medium screens |
+
+### Large Screen Utilities (min-width: 1025px)
+
+| Class           | Description                                      |
+| --------------- | ------------------------------------------------ |
+| `.ihub-lg-w-25` | Sets width to 25% on large screens               |
+| `.ihub-lg-w-33` | Sets width to 33.333333% on large screens        |
+| `.ihub-lg-w-50` | Sets width to 50% on large screens               |
+| `.ihub-lg-w-75` | Sets width to 75% on large screens               |
+| `.ihub-lg-p-6`  | Sets padding to 24px on large screens            |
+| `.ihub-lg-p-8`  | Sets padding to 32px on large screens            |
+| `.ihub-lg-py-6` | Sets vertical padding to 24px on large screens   |
+| `.ihub-lg-py-8` | Sets vertical padding to 32px on large screens   |
+| `.ihub-lg-px-6` | Sets horizontal padding to 24px on large screens |
+| `.ihub-lg-px-8` | Sets horizontal padding to 32px on large screens |
+
+## Usage Examples
+
+### Basic Layout Structure
+
+```html
+<div class="ihub-w-100 ihub-max-w-1200 ihub-p-4 ihub-md-p-6 ihub-lg-p-8">
+  <div class="ihub-w-100 ihub-lg-w-50 ihub-p-3">
+    <!-- Content here -->
+  </div>
+</div>
+```
+
+### Card Component
+
+```html
+<div class="ihub-w-300 ihub-sm-w-100 ihub-md-w-50 ihub-p-4 ihub-max-h-500">
+  <div class="ihub-w-100 ihub-h-200">
+    <img src="image.jpg" alt="Card image" class="ihub-w-100 ihub-h-100" />
+  </div>
+  <div class="ihub-py-3 ihub-px-2">
+    <h3>Card Title</h3>
+    <p>Card description goes here</p>
+  </div>
+</div>
+```
+
+### Full-Height Layout
+
+```html
+<div class="ihub-w-100 ihub-h-screen">
+  <header class="ihub-w-100 ihub-h-64 ihub-px-4 ihub-py-2">
+    <!-- Header content -->
+  </header>
+  <main class="ihub-w-100 ihub-min-h-400 ihub-p-4">
+    <!-- Main content -->
+  </main>
+  <footer class="ihub-w-100 ihub-h-80 ihub-py-4 ihub-px-4">
+    <!-- Footer content -->
+  </footer>
+</div>
+```
+
+### Responsive Grid
+
+```html
+<div class="ihub-w-100 ihub-p-2 ihub-md-p-4">
+  <div class="ihub-w-100 ihub-lg-w-33 ihub-p-2">Column 1</div>
+  <div class="ihub-w-100 ihub-lg-w-33 ihub-p-2">Column 2</div>
+  <div class="ihub-w-100 ihub-lg-w-33 ihub-p-2">Column 3</div>
+</div>
+```
+
+### Dashboard Widget
+
+```html
+<div class="ihub-w-350 ihub-sm-w-100 ihub-md-w-50 ihub-p-4 ihub-max-h-300">
+  <div class="ihub-w-100 ihub-h-200 ihub-p-3">
+    <!-- Widget content -->
+  </div>
+  <div class="ihub-p-2">
+    <button class="ihub-w-100 ihub-p-2">View Details</button>
+  </div>
+</div>
+```
+
+## Implementation Notes
+
+- These utilities use a 4px base scale for consistency
+- Use responsive utilities to create mobile-first designs
+- Combine width and height utilities with `display: flex` for advanced layouts
+- When nesting elements with percentage-based widths, remember that percentages are relative to the parent container

package/dist/src/assets/css/bootstrap/style.css

@@ -0,0 +1,8 @@
+@import url("./display.css");
+@import url("./font-size.css");
+@import url("./margin.css");
+@import url("./overflow.css");
+@import url("./width-height-padding.css");
+@import url("./color-classes.css");
+@import url("./borders.css");
+@import url("./position.css");