npm - softui-css - Versions diffs - 1.0.7 → 1.1.0 - Mend

softui-css 1.0.7 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -1,19 +1,50 @@
-# SoftUI
-A neumorphic CSS component library with soft shadows, muted palettes, and tactile depth. No dependencies. Dark mode included.
-**[Documentation](https://softui-css.netlify.app)** | **[Live Demo](https://softui-demo.netlify.app)**
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/siddharth-bhansali/softui/main/assets/banner-dark.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/siddharth-bhansali/softui/main/assets/banner-light.png">
+    <img alt="SoftUI — Neumorphic CSS Components" src="https://raw.githubusercontent.com/siddharth-bhansali/softui/main/assets/banner-light.png" width="100%">
+  </picture>
+</p>
+<h1 align="center">SoftUI</h1>
+<p align="center">
+  A neumorphic CSS library with soft shadows, muted palettes, and tactile depth.<br>
+  Zero dependencies. Dark mode built in. Just drop it in.
+</p>
+<p align="center">
+  <a href="https://www.npmjs.com/package/softui-css"><img src="https://img.shields.io/npm/v/softui-css?color=5B54E0&label=npm" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/softui-css"><img src="https://img.shields.io/npm/dm/softui-css?color=22c55e" alt="npm downloads"></a>
+  <a href="https://github.com/siddharth-bhansali/softui/blob/main/LICENSE"><img src="https://img.shields.io/github/license/siddharth-bhansali/softui?color=f59e0b" alt="license"></a>
+  <a href="https://softui-css.netlify.app"><img src="https://img.shields.io/badge/docs-live-5B54E0" alt="docs"></a>
+</p>
+<p align="center">
+  <a href="https://softui-css.netlify.app"><strong>Documentation</strong></a> &nbsp;&middot;&nbsp;
+  <a href="https://softui-demo.netlify.app"><strong>Live Demo</strong></a> &nbsp;&middot;&nbsp;
+  <a href="https://softui-css.netlify.app/playground/"><strong>Playground</strong></a>
+</p>
+---
+## Highlights
+| | |
+|---|---|
+| **44+ Components** | Buttons, Cards, Modals, Tables, Tabs, Calendar, Charts, and more |
+| **Dark Mode** | Add `data-theme="dark"` and everything adapts |
+| **Zero Dependencies** | Pure CSS + vanilla JS. No build step required |
+| **CSS Variables** | Fully customizable via custom properties |
+| **Responsive Grid** | 12-column flexbox grid with breakpoints and gap utilities |
+| **Interactive Playground** | Write HTML and preview components live in the browser |
+---
 ## Install
 ```bash
 npm install softui-css
-# or
-yarn add softui-css
-# or
-pnpm add softui-css
-# or
-bun add softui-css
 ```
 ### CDN
@@ -23,19 +54,18 @@ bun add softui-css
 <script src="https://unpkg.com/softui-css/dist/softui.min.js"></script>
 ```
-### Manual
-Download `softui.min.css` and `softui.min.js` from the `dist/` folder and include them in your HTML:
-```html
-<link rel="stylesheet" href="softui.min.css">
-<script src="softui.min.js"></script>
-```
+---
 ## Quick Start
 ```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link rel="stylesheet" href="https://unpkg.com/softui-css/dist/softui.min.css">
+</head>
 <body class="sui-d-flex sui-justify-center sui-align-center sui-min-vh-100">
   <div class="sui-card sui-raised sui-p-5 sui-text-center">
     <h3>Hello SoftUI</h3>
     <p class="sui-text-muted sui-mt-2 sui-mb-3">
@@ -43,53 +73,66 @@ Download `softui.min.css` and `softui.min.js` from the `dist/` folder and includ
     </p>
     <button class="sui-btn sui-btn-primary">Get Started</button>
   </div>
+  <script src="https://unpkg.com/softui-css/dist/softui.min.js"></script>
 </body>
+</html>
 ```
-## Dark Mode
+---
-Add `data-theme="dark"` to the `<html>` element. All components adapt automatically.
+## Dark Mode
 ```html
 <html data-theme="dark">
 ```
+That's it. Every component adapts automatically.
+---
 ## Components
-**Layout** — Container, Grid (12-col responsive), Flex utilities
+**Layout** &mdash; Container, Grid, Flex utilities
-**Forms** — Input, Select, Textarea, Toggle, Checkbox, Radio, Slider, Input OTP, Combobox
+**Forms** &mdash; Input, Select, Textarea, Toggle, Checkbox, Radio, Slider, OTP, Combobox
-**Data Display** — Table, Data Table (sort/filter/paginate), Card, Badge, Avatar, Kbd, Chart, Stat
+**Data Display** &mdash; Table, Data Table, Card, Badge, Avatar, Kbd, Chart
-**Feedback** — Alert, Toast, Progress, Skeleton, Spinner
+**Feedback** &mdash; Alert, Toast, Progress, Skeleton, Spinner
-**Navigation** — Navbar, Tabs, Breadcrumb, Pagination, Stepper, Menubar
+**Navigation** &mdash; Navbar, Tabs, Breadcrumb, Pagination, Stepper, Menubar
-**Overlay** — Modal, Sheet/Drawer, Dropdown, Popover, Hover Card, Tooltip, Context Menu, Command Palette
+**Overlay** &mdash; Modal, Sheet, Dropdown, Popover, Hover Card, Tooltip, Context Menu, Command Palette
-**Interactive** — Accordion, Collapsible, Carousel, Toggle Group, Calendar, Drag & Drop
+**Interactive** &mdash; Accordion, Collapsible, Carousel, Toggle Group, Calendar, Drag & Drop
-**Content** — Chip, Divider, Scroll Area, Resizable, Button Group
+**Content** &mdash; Chip, Divider, Scroll Area, Resizable, Button Group
-**Utilities** — Shadows, Border Radius, Spacing, Text/Colors, Aspect Ratio, Typography
+**Utilities** &mdash; Shadows, Radius, Spacing, Text, Aspect Ratio, Typography
-## CSS Custom Properties
+> Browse all components at [softui-css.netlify.app](https://softui-css.netlify.app) or try them in the [Playground](https://softui-css.netlify.app/playground/).
-SoftUI is built on CSS variables. Override them to customize:
+---
+## Customization
+SoftUI is built on CSS custom properties. Override them to make it yours:
 ```css
 :root {
   --sui-primary: #7C5CFC;
   --sui-radius: 12px;
-  --sui-shadow-raised: 6px 6px 12px rgba(0,0,0,0.15), -6px -6px 12px rgba(255,255,255,0.05);
+  --sui-font: 'Inter', sans-serif;
 }
 ```
+---
 ## Browser Support
-All modern browsers (Chrome, Firefox, Safari, Edge). No IE support.
+All modern browsers &mdash; Chrome, Firefox, Safari, Edge.
 ## License
-MIT
+[MIT](LICENSE)

package/dist/softui.css CHANGED Viewed

@@ -2325,18 +2325,24 @@ a.sui-btn-warning:visited {
    Progress — Label
    =========================================== */
 .sui-progress-labeled {
+  position: relative;
   height: 20px;
 }
 .sui-progress-labeled .sui-progress-bar {
-  font-size: 11px;
-  font-weight: 600;
-  color: #fff;
-  text-align: center;
-  line-height: 1;
+  overflow: visible;
+}
+.sui-progress-labeled .sui-progress-bar::after {
+  content: attr(data-label);
+  position: absolute;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--sui-text-muted);
+  white-space: nowrap;
+  pointer-events: none;
 }
 /* ===========================================
@@ -7822,3 +7828,431 @@ a.sui-btn-warning:visited {
     width: 100%;
   }
 }
+/* ===========================================
+   Sidebar
+   =========================================== */
+.sui-sidebar {
+  --sui-sidebar-width: 260px;
+  width: var(--sui-sidebar-width);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--sui-bg);
+  box-shadow: var(--sui-shadow);
+  overflow: hidden;
+  transition: width 0.2s ease;
+}
+/* --- Sticky behaviour --- */
+.sui-sidebar-sticky {
+  position: sticky;
+  top: 0;
+  align-self: flex-start;
+  height: 100vh;
+}
+/* Offset for a fixed navbar above */
+.sui-sidebar-sticky.sui-sidebar-nav-offset {
+  top: 56px;
+  height: calc(100vh - 56px);
+}
+/* --- Header / Content / Footer --- */
+.sui-sidebar-header {
+  flex-shrink: 0;
+  padding: 20px 16px 12px;
+}
+.sui-sidebar-header-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.sui-sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  font-weight: 700;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.sui-sidebar-content {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 12px 16px;
+}
+.sui-sidebar-header + .sui-sidebar-divider + .sui-sidebar-content,
+.sui-sidebar-header + .sui-sidebar-content {
+  padding-top: 4px;
+}
+.sui-sidebar-footer {
+  flex-shrink: 0;
+  padding: 12px 16px 20px;
+  margin-top: auto;
+}
+/* --- Groups --- */
+.sui-sidebar-group {
+  margin-bottom: 8px;
+}
+.sui-sidebar-group-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--sui-text-muted);
+  padding: 8px 12px 4px;
+  margin: 0;
+}
+/* --- Nav list --- */
+.sui-sidebar-nav {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.sui-sidebar-nav li a,
+.sui-sidebar-nav li button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 9px 12px;
+  border: none;
+  background: none;
+  border-radius: var(--sui-radius-sm);
+  color: var(--sui-text-muted);
+  text-decoration: none;
+  font-family: var(--sui-font);
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--sui-transition);
+}
+.sui-sidebar-nav li a:hover,
+.sui-sidebar-nav li button:hover {
+  background: rgba(91, 84, 224, 0.06);
+  color: var(--sui-text);
+}
+.sui-sidebar-nav li a.active,
+.sui-sidebar-nav li button.active {
+  background: rgba(91, 84, 224, 0.1);
+  color: var(--sui-primary);
+  font-weight: 600;
+  box-shadow: var(--sui-shadow-inset-sm);
+}
+[data-theme="dark"] .sui-sidebar-nav li a:hover,
+[data-theme="dark"] .sui-sidebar-nav li button:hover {
+  background: rgba(124, 107, 255, 0.1);
+}
+[data-theme="dark"] .sui-sidebar-nav li a.active,
+[data-theme="dark"] .sui-sidebar-nav li button.active {
+  background: rgba(124, 107, 255, 0.15);
+}
+/* Nav item icon */
+.sui-sidebar-nav li svg {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+.sui-sidebar-nav li a.active svg,
+.sui-sidebar-nav li button.active svg {
+  opacity: 1;
+}
+/* Nav item badge (right-aligned) */
+.sui-sidebar-nav li .sui-sidebar-badge {
+  margin-left: auto;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: var(--sui-radius-full);
+  background: rgba(91, 84, 224, 0.1);
+  color: var(--sui-primary);
+}
+/* --- Divider --- */
+.sui-sidebar-divider {
+  height: 1px;
+  background: var(--sui-bg-dark);
+  margin: 8px 12px;
+  border: none;
+}
+/* --- Width variants --- */
+.sui-sidebar-sm {
+  --sui-sidebar-width: 200px;
+}
+.sui-sidebar-lg {
+  --sui-sidebar-width: 300px;
+}
+/* --- Border variant (no shadow) --- */
+.sui-sidebar-bordered {
+  box-shadow: none;
+  border-right: 1px solid var(--sui-bg-dark);
+}
+/* --- Inset variant (flat, blends with page) --- */
+.sui-sidebar-inset {
+  box-shadow: none;
+  background: transparent;
+}
+/* --- Compact variant (docs-style, tighter spacing) --- */
+.sui-sidebar-compact {
+  --sui-sidebar-width: 220px;
+}
+.sui-sidebar-compact .sui-sidebar-content {
+  padding: 12px 10px;
+}
+.sui-sidebar-compact .sui-sidebar-group-label {
+  font-size: 10px;
+  padding: 12px 12px 4px;
+  color: var(--sui-text-light);
+}
+.sui-sidebar-compact .sui-sidebar-group-label:first-child {
+  padding-top: 0;
+}
+.sui-sidebar-compact .sui-sidebar-nav li a,
+.sui-sidebar-compact .sui-sidebar-nav li button {
+  padding: 7px 12px;
+  font-size: 13px;
+  border-radius: var(--sui-radius-xs);
+}
+.sui-sidebar-compact .sui-sidebar-nav li a.active,
+.sui-sidebar-compact .sui-sidebar-nav li button.active {
+  box-shadow: none;
+}
+/* --- Collapsed (icon-only) --- */
+.sui-sidebar-collapsed {
+  --sui-sidebar-width: 64px;
+}
+.sui-sidebar-collapsed .sui-sidebar-header,
+.sui-sidebar-collapsed .sui-sidebar-content,
+.sui-sidebar-collapsed .sui-sidebar-footer {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.sui-sidebar-collapsed .sui-sidebar-group-label,
+.sui-sidebar-collapsed .sui-sidebar-badge,
+.sui-sidebar-collapsed .sui-sidebar-nav li span:not(.sui-sidebar-icon) {
+  display: none;
+}
+.sui-sidebar-collapsed .sui-sidebar-nav li a,
+.sui-sidebar-collapsed .sui-sidebar-nav li button {
+  justify-content: center;
+  padding: 10px;
+  gap: 0;
+}
+.sui-sidebar-collapsed .sui-sidebar-nav li svg {
+  width: 20px;
+  height: 20px;
+  opacity: 0.85;
+}
+.sui-sidebar-collapsed .sui-sidebar-divider {
+  margin: 8px 4px;
+}
+/* --- Collapsible (animated collapse/expand) --- */
+.sui-sidebar-collapsible {
+  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.sui-sidebar-collapsible .sui-sidebar-header,
+.sui-sidebar-collapsible .sui-sidebar-content,
+.sui-sidebar-collapsible .sui-sidebar-footer {
+  transition: padding 0.25s ease;
+}
+.sui-sidebar-collapsible .sui-sidebar-nav li a,
+.sui-sidebar-collapsible .sui-sidebar-nav li button {
+  transition: padding 0.25s ease, gap 0.25s ease, color 0.15s ease, background 0.15s ease;
+}
+.sui-sidebar-collapsible .sui-sidebar-group-label {
+  transition: opacity 0.15s ease, max-height 0.25s ease, margin 0.25s ease;
+  max-height: 30px;
+  overflow: hidden;
+}
+.sui-sidebar-collapsible .sui-sidebar-nav li span:not(.sui-sidebar-icon),
+.sui-sidebar-collapsible .sui-sidebar-badge {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 180px;
+  transition: opacity 0.15s ease, max-width 0.25s ease, padding 0.25s ease, margin 0.25s ease;
+}
+.sui-sidebar-collapsible .sui-sidebar-header span,
+.sui-sidebar-collapsible .sui-sidebar-footer span {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 180px;
+  transition: opacity 0.15s ease, max-width 0.25s ease;
+}
+.sui-sidebar-collapsible .sui-sidebar-divider {
+  transition: margin 0.25s ease;
+}
+/* Override static display:none for collapsible — use animated properties instead */
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-group-label {
+  display: block;
+  opacity: 0;
+  max-height: 0;
+  margin: 0;
+}
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-badge,
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-nav li span:not(.sui-sidebar-icon) {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-header span,
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-footer span {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-header > *:not(.sui-sidebar-toggle) {
+  display: none;
+}
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-header {
+  display: flex;
+  justify-content: center;
+}
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-footer {
+  display: flex;
+  justify-content: center;
+}
+/* Toggle button */
+.sui-sidebar-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--sui-bg-dark);
+  background: var(--sui-bg);
+  border-radius: var(--sui-radius-xs);
+  cursor: pointer;
+  color: var(--sui-text-muted);
+  transition: var(--sui-transition);
+  flex-shrink: 0;
+}
+.sui-sidebar-toggle:hover {
+  color: var(--sui-text);
+  border-color: var(--sui-primary);
+}
+.sui-sidebar-toggle svg {
+  width: 16px;
+  height: 16px;
+  transition: transform 0.25s ease;
+}
+.sui-sidebar-collapsed .sui-sidebar-toggle svg {
+  transform: rotate(180deg);
+}
+/* --- Trigger button --- */
+.sui-sidebar-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--sui-bg-dark);
+  background: var(--sui-bg);
+  border-radius: var(--sui-radius-xs);
+  cursor: pointer;
+  color: var(--sui-text-muted);
+  transition: var(--sui-transition);
+}
+.sui-sidebar-trigger:hover {
+  color: var(--sui-text);
+  border-color: var(--sui-primary);
+}
+/* --- Responsive --- */
+@media (max-width: 900px) {
+  .sui-sidebar {
+    display: none;
+  }
+  .sui-sidebar.sui-sidebar-mobile-open {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 280px;
+    height: 100vh;
+    z-index: 200;
+    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.15);
+  }
+}
+/* Sidebar overlay for mobile */
+.sui-sidebar-overlay {
+  display: none;
+}
+@media (max-width: 900px) {
+  .sui-sidebar-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 199;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+  }
+  .sui-sidebar-overlay.open {
+    display: block;
+    opacity: 1;
+    pointer-events: auto;
+  }
+}

package/dist/softui.js CHANGED Viewed

@@ -2874,5 +2874,29 @@ const SoftUI = (() => {
     });
   }
-  return { modal, sheet, toast, carousel };
+  // =========================================
+  // Sidebar — collapsible toggle
+  // =========================================
+  document.addEventListener('click', function(e) {
+    var btn = e.target.closest('[data-sidebar-toggle]');
+    if (!btn) return;
+    var sidebar = btn.closest('.sui-sidebar');
+    if (sidebar) {
+      sidebar.classList.toggle('sui-sidebar-collapsed');
+    }
+  });
+  function sidebar(selector) {
+    var el = typeof selector === 'string' ? document.querySelector(selector) : selector;
+    if (!el) return null;
+    function collapse() { el.classList.add('sui-sidebar-collapsed'); }
+    function expand() { el.classList.remove('sui-sidebar-collapsed'); }
+    function toggle() { el.classList.toggle('sui-sidebar-collapsed'); }
+    function isCollapsed() { return el.classList.contains('sui-sidebar-collapsed'); }
+    return { collapse: collapse, expand: expand, toggle: toggle, isCollapsed: isCollapsed, el: el };
+  }
+  return { modal, sheet, toast, carousel, sidebar };
 })();