softui-css 1.8.6 → 1.10.0

package/README.md

@@ -32,7 +32,7 @@
 
 | Feature | Description |
 |---|---|
-| **60+ Components** | Buttons, Cards, Modals, Tables, Tabs, Calendar, Charts, and more |
+| **65+ Components** | Buttons, Cards, Modals, Tables, Tabs, Calendar, Charts, Pricing, 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 |
@@ -94,9 +94,9 @@ That's it. Every component adapts automatically.
 
 ## Components
 
-**Forms** — Input, Select, Textarea, Toggle, Checkbox, Radio, Slider, OTP, Combobox, Color Picker, File Upload, Tags Input, Number Input, Password Input
+**Forms** — Input, Styled Select, Textarea, Toggle, Checkbox, Radio, Slider, OTP, Combobox, Color Picker, File Upload, Tags Input, Number Input, Password Input
 
-**General** — Buttons, Button Group, Card, Badge, Avatar, Chip, Divider, Kbd, Copy Button, Swap
+**General** — Buttons, Button Group, Card, Badge, Avatar, Chip, Divider, Kbd, Copy Button, Swap, Pricing
 
 **Data Display** — Table, Data Table, Chart, Stat Card, Timeline, Chat Bubble, Calendar, Tree View, Radial Progress, Rating
 

package/dist/softui.css

@@ -1,4 +1,4 @@
-/*! SoftUI v1.8.6 — A Neumorphic CSS Library */
+/*! SoftUI v1.10.0 — A Neumorphic CSS Library */
 
 /* ===========================================
    CSS Variables / Tokens
@@ -433,6 +433,16 @@ a.sui-btn-warning:visited {
   color: var(--sui-text-light);
 }
 
+.sui-input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.sui-input[type="number"]::-webkit-inner-spin-button,
+.sui-input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
 .sui-input:focus,
 .sui-input.sui-input-focus {
   box-shadow: var(--sui-shadow-inset), 0 0 0 3px rgba(91, 84, 224, 0.35);
@@ -463,6 +473,132 @@ a.sui-btn-warning:visited {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238B95A8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
 }
 
+/* Styled Select (custom dropdown replacement for native <select>) */
+.sui-styled-select {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.sui-styled-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 16px;
+  font-size: 14px;
+  font-family: var(--sui-font);
+  color: var(--sui-text);
+  background: var(--sui-bg);
+  border: none;
+  border-radius: var(--sui-radius-sm);
+  box-shadow: var(--sui-shadow-inset);
+  cursor: pointer;
+  outline: none;
+  text-align: left;
+  transition: box-shadow var(--sui-transition-fast);
+}
+
+.sui-styled-select-trigger::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-right: 2px solid var(--sui-text-muted);
+  border-bottom: 2px solid var(--sui-text-muted);
+  transform: rotate(45deg);
+  flex-shrink: 0;
+  margin-left: 12px;
+  transition: transform var(--sui-transition-fast);
+}
+
+.sui-styled-select.open .sui-styled-select-trigger::after {
+  transform: rotate(-135deg);
+}
+
+.sui-styled-select-trigger:focus-visible {
+  box-shadow: var(--sui-shadow-inset), 0 0 0 2px var(--sui-primary);
+}
+
+.sui-styled-select-value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sui-styled-select-placeholder {
+  color: var(--sui-text-muted);
+}
+
+.sui-styled-select-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  background: var(--sui-bg);
+  border-radius: var(--sui-radius-sm);
+  box-shadow: var(--sui-shadow-raised);
+  padding: 6px;
+  z-index: 100;
+  max-height: 240px;
+  overflow-y: auto;
+  display: none;
+}
+
+.sui-styled-select.open .sui-styled-select-menu {
+  display: block;
+}
+
+.sui-styled-select-option {
+  padding: 8px 12px;
+  font-size: 14px;
+  font-family: var(--sui-font);
+  color: var(--sui-text);
+  border-radius: var(--sui-radius-xs);
+  cursor: pointer;
+  transition: background var(--sui-transition-fast);
+  white-space: nowrap;
+}
+
+.sui-styled-select-option:hover {
+  background: rgba(91, 84, 224, 0.06);
+}
+
+[data-theme="dark"] .sui-styled-select-option:hover {
+  background: rgba(124, 107, 255, 0.1);
+}
+
+.sui-styled-select-option.selected {
+  color: var(--sui-primary);
+  font-weight: 600;
+  background: rgba(91, 84, 224, 0.08);
+}
+
+.sui-styled-select-option.focused {
+  background: rgba(91, 84, 224, 0.06);
+}
+
+/* Sizes */
+.sui-styled-select-sm .sui-styled-select-trigger {
+  padding: 7px 12px;
+  font-size: 13px;
+}
+
+.sui-styled-select-sm .sui-styled-select-option {
+  padding: 6px 10px;
+  font-size: 13px;
+}
+
+.sui-styled-select-lg .sui-styled-select-trigger {
+  padding: 14px 20px;
+  font-size: 16px;
+}
+
+.sui-styled-select-lg .sui-styled-select-option {
+  padding: 10px 14px;
+  font-size: 16px;
+}
+
 .sui-textarea {
   resize: vertical;
   min-height: 80px;
@@ -855,6 +991,10 @@ a.sui-btn-warning:visited {
   margin-right: auto;
 }
 
+.sui-navbar-brand:hover {
+  color: var(--sui-text);
+}
+
 .sui-navbar-links {
   display: flex;
   gap: 4px;
@@ -1135,8 +1275,7 @@ a.sui-btn-warning:visited {
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
   width: 90%;
   max-width: 520px;
-  max-height: 85vh;
-  overflow-y: auto;
+  overflow: visible;
   transform: translateY(20px) scale(0.97);
   transition: transform var(--sui-transition-base) ease;
 }
@@ -1217,6 +1356,7 @@ a.sui-btn-warning:visited {
   padding: 0 28px 24px;
 }
 
+
 /* Size variants */
 .sui-modal-sm { max-width: 380px; }
 .sui-modal-lg { max-width: 720px; }
@@ -2727,6 +2867,56 @@ a.sui-btn-warning:visited {
   background-position: right 10px center;
 }
 
+/* Filter — native select fallback */
+select.sui-datatable-filter {
+  padding: 6px 28px 6px 10px;
+  font-size: 13px;
+  font-family: inherit;
+  color: var(--sui-text);
+  background: var(--sui-bg);
+  border: none;
+  border-radius: var(--sui-radius-xs);
+  box-shadow: var(--sui-shadow-raised-sm);
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  flex-shrink: 0;
+}
+
+/* Filter — styled dropdown */
+.sui-datatable-filter.sui-dropdown {
+  flex-shrink: 0;
+}
+
+.sui-datatable-filter .sui-dropdown-toggle {
+  padding: 6px 12px;
+  font-size: 13px;
+  font-family: inherit;
+  color: var(--sui-text);
+  background: var(--sui-bg);
+  border: none;
+  border-radius: var(--sui-radius-xs);
+  box-shadow: var(--sui-shadow-raised-sm);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sui-datatable-filter .sui-dropdown-toggle::after {
+  width: 5px;
+  height: 5px;
+  border-width: 1.5px;
+  margin-left: 4px;
+}
+
+.sui-datatable-filter .sui-dropdown-menu {
+  min-width: max-content;
+}
+
 /* Sortable headers */
 .sui-datatable .sui-table th[data-sort] {
   cursor: pointer;
@@ -4308,10 +4498,11 @@ a.sui-btn-warning:visited {
 
 /* Calendar — Date Picker (popover trigger) */
 .sui-datepicker-trigger {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 8px;
-  padding: 10px 14px;
+  width: 100%;
+  padding: 12px 18px;
   font-size: 14px;
   font-weight: 500;
   font-family: var(--sui-font);
@@ -4322,7 +4513,6 @@ a.sui-btn-warning:visited {
   box-shadow: var(--sui-shadow-inset);
   cursor: pointer;
   transition: var(--sui-transition);
-  min-width: 200px;
 }
 
 .sui-datepicker-trigger:hover {
@@ -4347,24 +4537,19 @@ a.sui-btn-warning:visited {
 
 .sui-datepicker {
   position: relative;
-  display: inline-block;
 }
 
 .sui-datepicker-popover {
   position: absolute;
   top: calc(100% + 8px);
   left: 50%;
-  transform: translateX(-50%) translateY(-6px);
+  transform: translateX(-50%);
   z-index: 500;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity var(--sui-transition-fast) ease, transform var(--sui-transition-fast) ease, visibility var(--sui-transition-fast);
+  display: none;
 }
 
 .sui-datepicker-popover.open {
-  opacity: 1;
-  visibility: visible;
-  transform: translateX(-50%) translateY(0);
+  display: block;
 }
 
 .sui-datepicker-popover .sui-calendar {
@@ -12625,6 +12810,211 @@ a.sui-btn-warning:visited {
   box-shadow: var(--sui-shadow-raised);
 }
 
+/* ===========================================
+   Pricing / Plan Cards
+   =========================================== */
+.sui-pricing {
+  display: flex;
+  gap: 20px;
+  align-items: stretch;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.sui-pricing-card {
+  background: var(--sui-bg);
+  border-radius: var(--sui-radius-lg);
+  box-shadow: var(--sui-shadow-raised);
+  padding: 32px 28px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  flex: 1;
+  min-width: 240px;
+  max-width: 340px;
+  position: relative;
+  transition: var(--sui-transition);
+}
+
+.sui-pricing-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--sui-shadow-raised-lg);
+}
+
+/* Featured / recommended plan */
+.sui-pricing-featured {
+  box-shadow: 0 0 0 3px var(--sui-primary), 0 0 16px rgba(91, 84, 224, 0.25);
+  z-index: 1;
+}
+
+.sui-pricing-featured:hover {
+  box-shadow: 0 0 0 3px var(--sui-primary), 0 0 20px rgba(91, 84, 224, 0.3);
+}
+
+.sui-pricing-badge {
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--sui-primary);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  font-family: var(--sui-font);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 4px 16px;
+  border-radius: var(--sui-radius-full);
+  white-space: nowrap;
+}
+
+.sui-pricing-name {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--sui-text);
+  margin: 0 0 4px;
+}
+
+.sui-pricing-desc {
+  font-size: 13px;
+  color: var(--sui-text-muted);
+  margin: 0 0 20px;
+}
+
+.sui-pricing-price {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.sui-pricing-amount {
+  font-size: 42px;
+  font-weight: 800;
+  color: var(--sui-text);
+  line-height: 1;
+}
+
+.sui-pricing-currency {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--sui-text-muted);
+}
+
+.sui-pricing-period {
+  font-size: 13px;
+  color: var(--sui-text-muted);
+  margin-bottom: 24px;
+}
+
+.sui-pricing-features {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 28px;
+  width: 100%;
+  text-align: left;
+}
+
+.sui-pricing-features li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 0;
+  font-size: 14px;
+  color: var(--sui-text);
+  border-bottom: 1px solid var(--sui-bg-dark);
+}
+
+.sui-pricing-features li:last-child {
+  border-bottom: none;
+}
+
+.sui-pricing-features li::before {
+  content: '';
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: var(--sui-success);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 10px;
+}
+
+.sui-pricing-features li.disabled {
+  color: var(--sui-text-light);
+  text-decoration: line-through;
+}
+
+.sui-pricing-features li.disabled::before {
+  background: var(--sui-bg-dark);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 10px;
+}
+
+.sui-pricing-cta {
+  margin-top: auto;
+  width: 100%;
+}
+
+/* Billing toggle */
+.sui-pricing-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 32px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--sui-text-muted);
+}
+
+.sui-pricing-toggle-active {
+  color: var(--sui-text);
+  font-weight: 600;
+}
+
+.sui-pricing-save {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--sui-success);
+  background: rgba(31, 169, 110, 0.1);
+  padding: 2px 8px;
+  border-radius: var(--sui-radius-full);
+}
+
+/* Inset variant */
+.sui-pricing-inset .sui-pricing-card {
+  box-shadow: var(--sui-shadow-inset);
+}
+
+.sui-pricing-inset .sui-pricing-card:hover {
+  box-shadow: var(--sui-shadow-inset);
+  transform: none;
+}
+
+.sui-pricing-inset .sui-pricing-featured {
+  box-shadow: var(--sui-shadow-inset), 0 0 0 3px var(--sui-primary);
+}
+
+/* Selectable variant */
+.sui-pricing-selectable .sui-pricing-card {
+  cursor: pointer;
+}
+
+.sui-pricing-selectable .sui-pricing-card.selected {
+  box-shadow: 0 0 0 3px var(--sui-primary), 0 0 16px rgba(91, 84, 224, 0.25);
+}
+
+.sui-pricing-selectable.sui-pricing-inset .sui-pricing-card.selected {
+  box-shadow: var(--sui-shadow-inset), 0 0 0 3px var(--sui-primary);
+}
+
+
 /* ===========================================
    Reduced Motion
    =========================================== */