@ryanhelsing/ry-ui 1.0.1 → 1.0.2

package/dist/css/ry-structure.css

@@ -38,7 +38,8 @@ ry-card, ry-accordion, ry-modal, ry-tabs, ry-dropdown,
 ry-button, ry-badge, ry-alert, ry-field, ry-nav, ry-logo, ry-actions,
 ry-accordion-item, ry-tab, ry-menu, ry-menu-item, ry-divider,
 ry-theme-toggle, ry-select, ry-switch, ry-tooltip, ry-drawer, ry-toast,
-ry-toggle-button, ry-knob, ry-slider, ry-color-picker, ry-color-input {
+ry-toggle-button, ry-knob, ry-slider, ry-number-select, ry-color-picker, ry-color-input,
+ry-tree, ry-tree-item {
   box-sizing: border-box;
 }
 
@@ -455,6 +456,134 @@ ry-knob [data-ry-target="label"] {
 ry-knob[size="sm"] [data-ry-target="ring"] { --knob-size: 48px; }
 ry-knob[size="lg"] [data-ry-target="ring"] { --knob-size: 80px; }
 
+/* ═══════════════════════════════════════════════════════════════
+   NUMBER SELECT
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-number-select {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  user-select: none;
+  touch-action: none;
+}
+
+ry-number-select[disabled] {
+  pointer-events: none;
+}
+
+ry-number-select [data-ry-target="decrement"],
+ry-number-select [data-ry-target="increment"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 36px;
+  padding: 0;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+ry-number-select [data-ry-target="decrement"] svg,
+ry-number-select [data-ry-target="increment"] svg {
+  width: 16px;
+  height: 16px;
+}
+
+ry-number-select [data-ry-target="display"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  height: 36px;
+  padding: 0 var(--ry-space-2, 0.5rem);
+  position: relative;
+  cursor: ew-resize;
+  outline: none;
+}
+
+ry-number-select[drag="y"] [data-ry-target="display"],
+ry-number-select[arrows="stacked"]:not([drag]) [data-ry-target="display"] {
+  cursor: ns-resize;
+}
+
+ry-number-select[drag="none"] [data-ry-target="display"] {
+  cursor: default;
+}
+
+ry-number-select[data-dragging] {
+  cursor: ew-resize;
+}
+
+ry-number-select[drag="y"][data-dragging],
+ry-number-select[arrows="stacked"]:not([drag])[data-dragging] {
+  cursor: ns-resize;
+}
+
+ry-number-select [data-ry-target="value"] {
+  display: inline-block;
+  min-width: 2em;
+  text-align: center;
+  transition: transform 60ms ease-out;
+}
+
+ry-number-select [data-ry-target="prefix"],
+ry-number-select [data-ry-target="suffix"] {
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
+ry-number-select [data-ry-target="input"] {
+  display: none;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  padding: 0 var(--ry-space-1, 0.25rem);
+  outline: none;
+}
+
+ry-number-select [data-ry-target="label"] {
+  display: block;
+  text-align: center;
+  margin-right: var(--ry-space-2, 0.5rem);
+  order: -1;
+}
+
+/* Stacked layout (buttons above/below) */
+ry-number-select[arrows="stacked"] {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+ry-number-select[arrows="stacked"] [data-ry-target="decrement"],
+ry-number-select[arrows="stacked"] [data-ry-target="increment"] {
+  width: auto;
+  height: 24px;
+}
+
+ry-number-select[arrows="stacked"] [data-ry-target="decrement"] svg,
+ry-number-select[arrows="stacked"] [data-ry-target="increment"] svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Sizes */
+ry-number-select[size="xs"] [data-ry-target="decrement"],
+ry-number-select[size="xs"] [data-ry-target="increment"] { width: 20px; height: 22px; }
+ry-number-select[size="xs"] [data-ry-target="display"] { min-width: 28px; height: 22px; padding: 0 var(--ry-space-1, 0.25rem); }
+ry-number-select[size="xs"] [data-ry-target="decrement"] svg,
+ry-number-select[size="xs"] [data-ry-target="increment"] svg { width: 12px; height: 12px; }
+
+ry-number-select[size="sm"] [data-ry-target="decrement"],
+ry-number-select[size="sm"] [data-ry-target="increment"] { width: 24px; height: 28px; }
+ry-number-select[size="sm"] [data-ry-target="display"] { min-width: 36px; height: 28px; }
+
+ry-number-select[size="lg"] [data-ry-target="decrement"],
+ry-number-select[size="lg"] [data-ry-target="increment"] { width: 40px; height: 44px; }
+ry-number-select[size="lg"] [data-ry-target="display"] { min-width: 60px; height: 44px; }
+
 /* ═══════════════════════════════════════════════════════════════
    SLIDER
    ═══════════════════════════════════════════════════════════════ */
@@ -828,6 +957,20 @@ ry-dropdown[data-ry-state="open"] ry-menu {
   transform: translateY(0);
 }
 
+ry-dropdown[data-ry-position="top"] [data-ry-target="menu"],
+ry-dropdown[data-ry-position="top"] ry-menu {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: var(--ry-space-1, 0.25rem);
+  transform: translateY(0.5rem);
+}
+
+ry-dropdown[data-ry-position="top"][data-ry-state="open"] [data-ry-target="menu"],
+ry-dropdown[data-ry-position="top"][data-ry-state="open"] ry-menu {
+  transform: translateY(0);
+}
+
 ry-menu-item {
   display: block;
   width: 100%;
@@ -1765,3 +1908,313 @@ ry-color-input ry-color-picker[inline] [data-ry-target="panel"] {
   border: none;
   box-shadow: none;
 }
+
+/* ═══════════════════════════════════════════════════════════════
+   GRADIENT PICKER
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-gradient-picker {
+  display: block;
+  width: var(--ry-color-picker-width, 240px);
+}
+
+ry-gradient-picker[disabled] {
+  pointer-events: none;
+}
+
+/* Controls row */
+ry-gradient-picker [data-ry-target="controls"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-3, 0.75rem);
+  padding: var(--ry-space-3, 0.75rem);
+}
+
+ry-gradient-picker [data-ry-target="type-toggle"] {
+  display: flex;
+  gap: var(--ry-space-1, 0.25rem);
+}
+
+ry-gradient-picker [data-ry-target="type-toggle"] button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+ry-gradient-picker [data-ry-target="type-toggle"] button svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Angle control — visible when linear (default) */
+ry-gradient-picker [data-ry-target="angle-control"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-1, 0.25rem);
+  margin-left: auto;
+}
+
+ry-gradient-picker [data-ry-target="angle-control"] ry-number-select {
+  min-width: 0;
+}
+
+/* Shape control — hidden by default */
+ry-gradient-picker [data-ry-target="shape-control"] {
+  display: none;
+  gap: var(--ry-space-1, 0.25rem);
+  margin-left: auto;
+}
+
+ry-gradient-picker [data-ry-target="shape-control"] button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+ry-gradient-picker [data-ry-target="shape-control"] button svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* When radial: hide angle, show shape */
+ry-gradient-picker[data-ry-type="radial"] [data-ry-target="angle-control"] {
+  display: none;
+}
+
+ry-gradient-picker[data-ry-type="radial"] [data-ry-target="shape-control"] {
+  display: flex;
+}
+
+/* When solid: hide bar, angle, shape */
+ry-gradient-picker[data-ry-type="solid"] [data-ry-target="bar-container"] {
+  display: none;
+}
+
+ry-gradient-picker[data-ry-type="solid"] [data-ry-target="angle-control"] {
+  display: none;
+}
+
+ry-gradient-picker[data-ry-type="solid"] [data-ry-target="shape-control"] {
+  display: none;
+}
+
+/* Gradient bar */
+ry-gradient-picker [data-ry-target="bar-container"] {
+  position: relative;
+  margin: 0 10px;
+  padding: var(--ry-space-4, 1rem) 0;
+}
+
+ry-gradient-picker [data-ry-target="bar"] {
+  position: relative;
+  height: var(--ry-gradient-picker-bar-height, 24px);
+  cursor: pointer;
+  touch-action: none;
+}
+
+/* Stop handle */
+ry-gradient-picker [data-ry-target="stop"] {
+  position: absolute;
+  top: 50%;
+  width: var(--ry-gradient-picker-stop-size, 16px);
+  height: var(--ry-gradient-picker-stop-size, 16px);
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  z-index: 1;
+}
+
+ry-gradient-picker [data-ry-target="stop"]:active {
+  cursor: grabbing;
+}
+
+ry-gradient-picker [data-ry-target="stop"][data-selected] {
+  z-index: 2;
+  width: calc(var(--ry-gradient-picker-stop-size, 16px) + 4px);
+  height: calc(var(--ry-gradient-picker-stop-size, 16px) + 4px);
+}
+
+/* Inline color picker — remove extra border */
+ry-gradient-picker ry-color-picker[inline] [data-ry-target="panel"] {
+  border: none;
+  box-shadow: none;
+}
+
+/* CSS output */
+ry-gradient-picker [data-ry-target="output-row"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-1, 0.25rem);
+  padding: 0 var(--ry-space-3, 0.75rem) var(--ry-space-3, 0.75rem);
+}
+
+ry-gradient-picker [data-ry-target="output"] {
+  flex: 1;
+  min-width: 0;
+  padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
+  border: none;
+}
+
+ry-gradient-picker [data-ry-target="copy-btn"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+ry-gradient-picker [data-ry-target="copy-btn"] svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   TREE
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-tree {
+  display: block;
+}
+
+ry-tree-item {
+  display: none;
+}
+
+.ry-tree__root,
+.ry-tree__children {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ry-tree__children {
+  margin-left: 11px;
+  padding-left: 11px;
+  overflow: hidden;
+}
+
+.ry-tree__item {
+  position: relative;
+  margin-top: var(--ry-space-1, 0.25rem);
+}
+
+/* Horizontal connector lines for nested items */
+.ry-tree__children .ry-tree__item::before {
+  content: "";
+  position: absolute;
+  left: -11px;
+  top: 14px;
+  width: 11px;
+  height: 1px;
+}
+
+.ry-tree__label,
+.ry-tree__file {
+  display: flex;
+  align-items: center;
+  gap: var(--ry-space-2, 0.5rem);
+  padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
+  height: 28px;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+}
+
+/* Hidden checkbox — the CSS engine for expand/collapse */
+/* Compound selector to override global input[type="checkbox"] styles */
+input[type="checkbox"].ry-tree__toggle {
+  display: none;
+  appearance: auto;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+/* Folder icon swap */
+.ry-tree__icon-open {
+  display: none;
+}
+.ry-tree__icon-closed {
+  display: flex;
+}
+
+.ry-tree__toggle:checked ~ .ry-tree__label .ry-tree__icon-open {
+  display: flex;
+}
+.ry-tree__toggle:checked ~ .ry-tree__label .ry-tree__icon-closed {
+  display: none;
+}
+
+/* Grid animation for expand/collapse */
+.ry-tree__children-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--ry-tree-duration, 150ms) var(--ry-ease, ease);
+}
+
+ry-tree[no-animate] .ry-tree__children-wrapper {
+  transition-duration: 0ms;
+}
+
+.ry-tree__toggle:checked ~ .ry-tree__children-wrapper {
+  grid-template-rows: 1fr;
+}
+
+.ry-tree__icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* ── Drag and Drop ── */
+
+.ry-tree__ghost {
+  position: fixed;
+  pointer-events: none;
+  user-select: none;
+  z-index: var(--ry-z-toast, 1080);
+  transform: rotate(-2deg);
+}
+
+.ry-tree__item[data-ry-dragging] {
+  opacity: 0.4;
+}
+
+.ry-tree__item--collapsed {
+  height: 4px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.ry-tree__item[data-ry-drop-target="before"]::after,
+.ry-tree__item[data-ry-drop-target="after"]::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  pointer-events: none;
+}
+
+.ry-tree__item[data-ry-drop-target="before"]::after {
+  top: -1px;
+}
+
+.ry-tree__item[data-ry-drop-target="after"]::after {
+  bottom: -1px;
+}