@instincthub/react-ui 0.0.2 → 0.0.4

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

@@ -0,0 +1,342 @@
+# 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 |
+
+## 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-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/{assets → src/assets}/css/styles.css

@@ -5,6 +5,8 @@
 @import url("./tag-only-selectors.css");
 @import url("./main.css");
 @import url("./forms/input-fields.css");
+@import url("./forms/ihub-file-uploader.css");
+@import url("./forms/unsplash-random-image.css");
 @import url("./modals.css");
 @import url("./tooltip.css");
 
@@ -14,6 +16,7 @@
 @import url("./ui/editor.css");
 @import url("./ui/content-viewer.css");
 @import url("./ui/code-display.css");
+@import url("./ui/signout-session.css");
 
 /* Third-party Framework Styles */
 @import url("./material-ui.css");

package/dist/{assets → src/assets}/css/ui/list-styles.css

@@ -120,7 +120,7 @@
 
 .ihub-content-viewer ul:not([data-type="taskList"]) li {
   position: relative;
-  padding-left: 1.75rem;
+  padding-left: 2rem;
   margin-bottom: 0.75rem;
 }
 
@@ -128,10 +128,14 @@
   content: "+";
   position: absolute;
   left: 0;
-  width: 24px;
-  height: 24px;
-  color: var(--Gunmetal);
-  display: inline-block;
+  top: -4px;
+  width: 20px;
+  height: 20px;
+  color: var(--White);
+  display: flex;
+  align-items: center;
+  text-align: center;
+  justify-content: space-around;
 }
 
 /* Custom Bullet List - checkmark style */

package/dist/src/assets/css/ui/signout-session.css

@@ -0,0 +1,177 @@
+/* SessionExpiresLogout Component Styles */
+
+.ihub-session-loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: var(--Gray, #f4f4f4);
+  }
+  
+  .ihub-session-loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid rgba(0, 131, 143, 0.3);
+    border-radius: 50%;
+    border-top-color: var(--DarkCyan, #00838f);
+    animation: ihub-spin 1s infinite linear;
+  }
+  
+  @keyframes ihub-spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+/* SignOutSession Component Styles */
+
+.ihub-signout-section {
+    width: 100%;
+    min-height: 100vh;
+  }
+  
+  .ihub-signout-overlay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: var(--Gray, #f4f4f4);
+    padding: 20px;
+  }
+  
+  .ihub-signout-card {
+    background-color: var(--White, #ffffff);
+    padding: 30px;
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    text-align: center;
+    width: 100%;
+    max-width: 420px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    animation: ihub-fade-in 0.5s ease-out;
+  }
+  
+  @keyframes ihub-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  .ihub-signout-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+  }
+  
+  .ihub-signout-image-container {
+    margin-bottom: 20px;
+  }
+  
+  .ihub-signout-image {
+    max-width: 120px;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+  }
+  
+  .ihub-signout-title {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin: 0 0 15px 0;
+    color: var(--Gunmetal, #2c333a);
+    font-family: var(--Nunito, 'Nunito', sans-serif);
+  }
+  
+  .ihub-signout-message {
+    font-size: 1rem;
+    line-height: 1.5;
+    margin: 0 0 25px 0;
+    color: var(--Gunmetal, #2c333a);
+    opacity: 0.9;
+    font-family: var(--Nunito, 'Nunito', sans-serif);
+    max-width: 320px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .ihub-signout-actions {
+    margin: 25px 0;
+  }
+  
+  .ihub-signout-button {
+    padding: 12px 24px;
+    font-size: 1rem;
+    font-weight: 600;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    min-width: 150px;
+  }
+  
+  .ihub-signout-button:focus {
+    outline: 2px solid var(--DarkCyan, #00838f);
+    outline-offset: 2px;
+  }
+  
+  .ihub-signout-help {
+    font-size: 0.875rem;
+    margin: 20px 0 0 0;
+    color: var(--Gunmetal, #2c333a);
+    opacity: 0.7;
+  }
+  
+  .ihub-signout-link {
+    color: var(--DarkCyan, #00838f);
+    text-decoration: none;
+    font-weight: 600;
+    transition: opacity 0.2s ease;
+  }
+  
+  .ihub-signout-link:hover {
+    text-decoration: underline;
+    opacity: 0.9;
+  }
+  
+  /* Light pulsing animation for the sign out button */
+  @keyframes ihub-pulse {
+    0% {
+      box-shadow: 0 0 0 0 rgba(0, 131, 143, 0.4);
+    }
+    70% {
+      box-shadow: 0 0 0 10px rgba(0, 131, 143, 0);
+    }
+    100% {
+      box-shadow: 0 0 0 0 rgba(0, 131, 143, 0);
+    }
+  }
+  
+  /* Apply the animation only on hover */
+  .ihub-signout-button:hover {
+    animation: ihub-pulse 1.5s infinite;
+  }
+  
+  /* Responsive adjustments */
+  @media (max-width: 480px) {
+    .ihub-signout-card {
+      padding: 25px 20px;
+    }
+    
+    .ihub-signout-title {
+      font-size: 1.5rem;
+    }
+    
+    .ihub-signout-message {
+      font-size: 0.875rem;
+    }
+    
+    .ihub-signout-button {
+      width: 100%;
+    }
+  }