@neo-ui-kit/react 0.0.0-stage → 1.0.1

package/dist/components/controls/Slider/styles.css

@@ -0,0 +1,138 @@
+/* Styles owned by Slider: a thermometer. The track is a groove pressed into the panel, the
+   fill heats from deep primary to a bright secondary tip under a glassy highlight, and the
+   thumb is a convex glass bead lit from above. */
+.ad-slider {
+  --ad-slider-track: 0.55rem;
+  --ad-slider-thumb: 1.125rem;
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  height: max(var(--ad-size-h, 2rem), var(--ad-slider-thumb));
+  background: transparent;
+  margin: 0;
+  cursor: pointer;
+}
+.ad-slider[data-ad-size="xs"] {
+  --ad-slider-track: 0.375rem;
+  --ad-slider-thumb: 0.875rem;
+}
+.ad-slider[data-ad-size="sm"] {
+  --ad-slider-track: 0.45rem;
+  --ad-slider-thumb: 1rem;
+}
+.ad-slider[data-ad-size="lg"] {
+  --ad-slider-track: 0.65rem;
+  --ad-slider-thumb: 1.25rem;
+}
+
+/* Groove + fill: gloss and heat are clipped to the level, the dark tube shows beyond it. */
+.ad-slider::-webkit-slider-runnable-track {
+  height: var(--ad-slider-track);
+  border-radius: 999rem;
+  background:
+    linear-gradient(#ffffff40, #ffffff00 60%) 0 0 / var(--ad-level) 100%
+      no-repeat,
+    linear-gradient(
+        90deg,
+        var(--ad-primary-700),
+        var(--ad-primary) 70%,
+        var(--ad-secondary)
+      )
+      0 0 / var(--ad-level) 100% no-repeat,
+    linear-gradient(var(--ad-neutral-950), var(--ad-neutral-900));
+  box-shadow:
+    inset 0 0.1rem 0.2rem #000d,
+    inset 0 -0.0625rem 0 #ffffff14,
+    0 0.0625rem 0 #ffffff0f;
+}
+.ad-slider::-moz-range-track {
+  height: var(--ad-slider-track);
+  border-radius: 999rem;
+  background: linear-gradient(var(--ad-neutral-950), var(--ad-neutral-900));
+  box-shadow:
+    inset 0 0.1rem 0.2rem #000d,
+    inset 0 -0.0625rem 0 #ffffff14;
+}
+.ad-slider::-moz-range-progress {
+  height: var(--ad-slider-track);
+  border-radius: 999rem;
+  background:
+    linear-gradient(#ffffff40, #ffffff00 60%),
+    linear-gradient(
+      90deg,
+      var(--ad-primary-700),
+      var(--ad-primary) 70%,
+      var(--ad-secondary)
+    );
+  box-shadow: 0 0 0.5rem rgb(from var(--ad-primary) r g b / 0.55);
+}
+
+/* The bead: light from the top left, shadow underneath, a warm rim. */
+.ad-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: var(--ad-slider-thumb);
+  height: var(--ad-slider-thumb);
+  margin-top: calc((var(--ad-slider-track) - var(--ad-slider-thumb)) / 2);
+  border: 0;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle at 35% 30%,
+    #fff,
+    var(--ad-secondary-100) 30%,
+    var(--ad-secondary) 62%,
+    var(--ad-primary-700)
+  );
+  box-shadow:
+    0 0.15rem 0.3rem #000b,
+    inset 0 -0.12rem 0.2rem rgb(from var(--ad-primary-800) r g b / 0.7),
+    0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.7);
+  transition:
+    transform 0.25s cubic-bezier(0.34, 1.56, 0.5, 1),
+    box-shadow 0.25s;
+}
+.ad-slider::-moz-range-thumb {
+  width: calc(var(--ad-slider-thumb) - 0.125rem);
+  height: calc(var(--ad-slider-thumb) - 0.125rem);
+  border: 0;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle at 35% 30%,
+    #fff,
+    var(--ad-secondary-100) 30%,
+    var(--ad-secondary) 62%,
+    var(--ad-primary-700)
+  );
+  box-shadow:
+    0 0.15rem 0.3rem #000b,
+    0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.7);
+  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.5, 1);
+}
+
+/* Hover lifts the bead; dragging presses it into a brighter glow. */
+.ad-slider:hover:not(:disabled)::-webkit-slider-thumb {
+  transform: scale(1.18);
+  box-shadow:
+    0 0.25rem 0.45rem #000b,
+    inset 0 -0.12rem 0.2rem rgb(from var(--ad-primary-800) r g b / 0.7),
+    0 0 0 0.3rem rgb(from var(--ad-primary) r g b / 0.15),
+    0 0 0.9rem var(--ad-primary);
+}
+.ad-slider:active:not(:disabled)::-webkit-slider-thumb {
+  transform: scale(1.3);
+  box-shadow:
+    0 0.1rem 0.25rem #000b,
+    inset 0 -0.12rem 0.2rem rgb(from var(--ad-primary-800) r g b / 0.7),
+    0 0 0 0.45rem rgb(from var(--ad-primary) r g b / 0.2),
+    0 0 1.2rem var(--ad-primary);
+}
+.ad-slider:hover:not(:disabled)::-moz-range-thumb {
+  transform: scale(1.18);
+}
+.ad-slider:disabled {
+  opacity: 0.42;
+  filter: saturate(0.2) brightness(0.88);
+  cursor: not-allowed;
+}
+.ad-slider-field:has(.ad-slider:disabled) .ad-field-label {
+  opacity: 0.5;
+}

package/dist/components/controls/SplitButton/SplitButton.d.ts

@@ -0,0 +1,2 @@
+import type { SplitButtonProps } from "../shared";
+export declare const SplitButton: (p: SplitButtonProps) => import("react").JSX.Element;

package/dist/components/controls/SplitButton/styles.css

@@ -0,0 +1,169 @@
+/* SplitButton shares the premium button shell so all variants stay visually consistent. */
+.ad-split-button {
+  --ad-split-trigger: calc(var(--ad-size-h) * 0.92);
+  --ad-btn-radius: 999rem;
+  --ad-btn-bg-top: var(--ad-neutral-700);
+  --ad-btn-bg-mid: var(--ad-neutral-850);
+  --ad-btn-bg-bottom: var(--ad-neutral-900);
+  --ad-btn-border-a: rgb(from var(--ad-neutral-300) r g b / 0.62);
+  --ad-btn-border-b: rgb(from var(--ad-primary-700) r g b / 0.4);
+  --ad-btn-edge: rgb(from var(--ad-primary) r g b / 0.21);
+  --ad-btn-glow: rgb(from var(--ad-primary) r g b / 0.15);
+  --ad-btn-inner: #ffffff3c;
+  --ad-btn-bottom: #000a;
+  display: inline-grid;
+  grid-template-columns: minmax(0, auto) auto;
+  align-items: stretch;
+  position: relative;
+  inline-size: max-content;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  height: var(--ad-size-h);
+  overflow: hidden;
+  isolation: isolate;
+  border: 0.0625rem solid transparent;
+  border-radius: var(--ad-btn-radius);
+  background:
+    linear-gradient(
+        180deg,
+        var(--ad-btn-bg-top),
+        var(--ad-btn-bg-mid) 58%,
+        var(--ad-btn-bg-bottom)
+      )
+      padding-box,
+    linear-gradient(
+        135deg,
+        var(--ad-btn-border-a),
+        #ffffff18 18%,
+        var(--ad-btn-border-b) 56%,
+        rgb(from var(--ad-primary-800) r g b / 0.31) 100%
+      )
+      border-box;
+  box-shadow:
+    inset 0 0.08rem 0.15rem var(--ad-btn-inner),
+    inset 0 -0.48rem 0.95rem var(--ad-btn-bottom),
+    inset 0 0 0 0.03125rem #ffffff09,
+    0 0.42rem 1rem #0009,
+    0 0 1rem var(--ad-btn-glow);
+  transition:
+    transform 0.22s cubic-bezier(0.2, 0.78, 0.24, 1),
+    filter 0.22s,
+    box-shadow 0.22s;
+}
+.ad-split-button::before {
+  content: "";
+  position: absolute;
+  inset: 0.0625rem;
+  z-index: -1;
+  border-radius: calc(var(--ad-btn-radius) - 0.0625rem);
+  pointer-events: none;
+  background:
+    radial-gradient(
+      70% 105% at 50% 20%,
+      #ffffff3f 0%,
+      rgb(from var(--ad-neutral-200) r g b / 0.14) 24%,
+      rgb(from var(--ad-secondary-200) r g b / 0.08) 48%,
+      transparent 72%
+    ),
+    linear-gradient(180deg, #ffffff2f 0%, #ffffff10 18%, transparent 36%),
+    radial-gradient(88% 48% at 50% 112%, var(--ad-btn-edge) 0%, transparent 74%);
+  opacity: 0.96;
+}
+.ad-split-button .ad-split-button-main,
+.ad-split-button .ad-split-button-trigger {
+  height: 100%;
+  min-width: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  animation: none;
+  transform: none;
+  filter: none;
+  overflow: hidden;
+  outline: 0;
+}
+.ad-split-button .ad-split-button-main::before,
+.ad-split-button .ad-split-button-main::after,
+.ad-split-button .ad-split-button-trigger::before,
+.ad-split-button .ad-split-button-trigger::after {
+  display: none;
+}
+.ad-split-button .ad-split-button-main {
+  flex: 1 1 auto;
+  inline-size: auto;
+  max-inline-size: 100%;
+  padding-inline: calc(var(--ad-size-pad-x) * 1.35);
+  justify-content: flex-start;
+  gap: calc(var(--ad-size-gap) * 0.82);
+}
+.ad-split-button .ad-split-button-main > .ad-icon {
+  flex: 0 0 auto;
+  filter: drop-shadow(0 0 0.24rem rgb(from var(--ad-secondary-100) r g b / 0.42));
+}
+.ad-split-button .ad-split-button-main > .ad-button-label {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ad-split-button .ad-split-button-trigger {
+  flex: 0 0 var(--ad-split-trigger);
+  inline-size: var(--ad-split-trigger);
+  padding: 0;
+  position: relative;
+  justify-content: center;
+}
+.ad-split-button .ad-split-button-trigger > .ad-icon {
+  flex: 0 0 auto;
+  filter: drop-shadow(0 0 0.2rem rgb(from var(--ad-secondary-100) r g b / 0.49));
+}
+.ad-split-button .ad-split-button-trigger::before {
+  display: block;
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 18%;
+  bottom: 18%;
+  inline-size: 0.0625rem;
+  background: linear-gradient(
+    180deg,
+    transparent,
+    rgb(from var(--ad-neutral-200) r g b / 0.36),
+    #ffffff30,
+    rgb(from var(--ad-neutral-200) r g b / 0.36),
+    transparent
+  );
+}
+.ad-split-button:hover {
+  transform: translateY(-0.09rem);
+  filter: brightness(1.07) saturate(1.08);
+  box-shadow:
+    inset 0 0.09rem 0.18rem #ffffff61,
+    inset 0 -0.54rem 1.05rem var(--ad-btn-bottom),
+    inset 0 0 0 0.03125rem #ffffff14,
+    0 0.58rem 1.15rem #000a,
+    0 0 1.35rem color-mix(in srgb, var(--ad-btn-glow) 92%, transparent);
+}
+.ad-split-button .ad-split-button-main:hover,
+.ad-split-button .ad-split-button-trigger:hover {
+  background: #ffffff08;
+}
+.ad-split-button .ad-split-button-main:active,
+.ad-split-button .ad-split-button-trigger:active {
+  background: #00000024;
+}
+.ad-split-button:focus-within {
+  outline: 0.125rem solid var(--ad-neutral-200);
+  outline-offset: 0.18rem;
+}
+
+@media (max-width: 24rem) {
+  .ad-split-button {
+    inline-size: 100%;
+  }
+  .ad-split-button .ad-split-button-main {
+    padding-inline: var(--ad-size-pad-x);
+  }
+}

package/dist/components/controls/Switch/Switch.d.ts

@@ -0,0 +1,2 @@
+import { type BooleanProps } from "../shared";
+export declare const Switch: (p: BooleanProps) => import("react").JSX.Element;

package/dist/components/controls/Switch/styles.css

@@ -0,0 +1,54 @@
+/* Styles owned by Switch: ruby fill pours in after the thumb, which springs and squashes on press. */
+.ad-switch .ad-toggle-track {
+  overflow: hidden;
+  transition:
+    border-color 0.25s,
+    box-shadow 0.35s;
+}
+.ad-switch .ad-toggle-track::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    linear-gradient(180deg, #ffffff2a, transparent 45%),
+    linear-gradient(90deg, var(--ad-primary-800), var(--ad-primary-700) 60%, var(--ad-primary));
+  clip-path: inset(0 100% 0 0 round 999rem);
+  transition: clip-path 0.42s cubic-bezier(0.34, 1.3, 0.5, 1);
+}
+.ad-switch .ad-toggle-track i {
+  z-index: 1;
+}
+.ad-switch:hover input:not(:disabled) + .ad-toggle-track {
+  border-color: var(--ad-secondary);
+  box-shadow:
+    inset 0 0 0.3125rem #000b,
+    0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.19);
+}
+.ad-switch:active input:not(:disabled) + .ad-toggle-track i {
+  scale: 1.22 0.88;
+}
+.ad-switch input:checked + .ad-toggle-track {
+  border-color: var(--ad-primary);
+  animation: ad-switch-flare 0.6s ease-out;
+  box-shadow: 0 0 0.75rem rgb(from var(--ad-primary) r g b / 0.25);
+}
+.ad-switch input:checked + .ad-toggle-track::before {
+  clip-path: inset(0 0 0 0 round 999rem);
+}
+.ad-switch input:checked + .ad-toggle-track i {
+  transform: translateX(calc(var(--ad-track-w) - var(--ad-track-h)));
+  background: radial-gradient(circle at 35% 30%, #ffffff, var(--ad-secondary-100) 60%, var(--ad-secondary-200));
+  border-color: var(--ad-neutral-200);
+  box-shadow:
+    0 0 0.4rem #fff8,
+    0 0 0.9rem rgb(from var(--ad-primary) r g b / 0.67);
+}
+.ad-switch input:disabled + .ad-toggle-track {
+  opacity: 0.45;
+}
+@keyframes ad-switch-flare {
+  40% {
+    box-shadow: 0 0 1.4rem 0.2rem rgb(from var(--ad-primary) r g b / 0.67);
+  }
+}

package/dist/components/controls/Tab/Tab.d.ts

@@ -0,0 +1,2 @@
+import type { TabProps } from "../shared";
+export declare const Tab: import("react").ForwardRefExoticComponent<Omit<TabProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/controls/Tab/styles.css

@@ -0,0 +1,111 @@
+/* Styles owned by Tab. Outside Tabs a selected tab draws the blade itself; inside, Tabs flies one. */
+.ad-tab {
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--ad-size-gap) * 0.75);
+  min-width: 0;
+  height: calc(var(--ad-size-h) - 0.375rem);
+  padding-inline: calc(var(--ad-size-pad-x) * 1.35);
+  border: 0;
+  border-radius: var(--ad-size-radius);
+  background: transparent;
+  color: var(--ad-neutral-400);
+  font: inherit;
+  font-size: var(--ad-size-font);
+  font-weight: 650;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  cursor: pointer;
+  overflow: hidden;
+  transition:
+    color 0.2s,
+    text-shadow 0.2s;
+}
+.ad-tab > .ad-icon {
+  --ad-icon-size: calc(var(--ad-size-font) * 1.45);
+  transition:
+    transform 0.25s var(--ad-tabs-spring, ease),
+    filter 0.25s;
+}
+.ad-tab-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Hover: a ghost of the blade fades in and the label starts to glow. */
+.ad-tab::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  clip-path: var(--ad-blade);
+  background:
+    linear-gradient(180deg, rgb(from var(--ad-secondary) r g b / 0.11), rgb(from var(--ad-secondary) r g b / 0.03)),
+    linear-gradient(90deg, rgb(from var(--ad-secondary) r g b / 0), rgb(from var(--ad-secondary) r g b / 0.19), rgb(from var(--ad-secondary) r g b / 0)) 0 100% / 100%
+      0.0625rem no-repeat;
+  opacity: 0;
+  scale: 0.92;
+  transition:
+    opacity 0.22s,
+    scale 0.3s cubic-bezier(0.34, 1.45, 0.5, 1);
+}
+.ad-tab:hover:not(:disabled):not([aria-selected="true"]) {
+  color: #fff;
+  text-shadow: 0 0 0.6rem rgb(from var(--ad-secondary) r g b / 0.6);
+}
+.ad-tab:hover:not(:disabled):not([aria-selected="true"])::before {
+  opacity: 1;
+  scale: 1;
+}
+.ad-tab:hover:not(:disabled):not([aria-selected="true"]) > .ad-icon {
+  transform: translateY(-0.0625rem) rotate(-6deg);
+  filter: drop-shadow(0 0 0.3rem rgb(from var(--ad-secondary) r g b / 0.67));
+}
+
+/* Selected: the label lights up and the icon pops once. */
+.ad-tab[aria-selected="true"] {
+  color: #fff;
+  text-shadow: 0 0 0.75rem rgb(from var(--ad-secondary) r g b / 0.67);
+}
+.ad-tab[aria-selected="true"] > .ad-icon {
+  filter: drop-shadow(0 0 0.35rem var(--ad-secondary-200));
+  animation: ad-tab-pop 0.55s cubic-bezier(0.34, 1.6, 0.5, 1);
+}
+/* A standalone selected tab carries its own blade. */
+.ad-tab[aria-selected="true"]::before {
+  opacity: 1;
+  scale: 1;
+  background:
+    radial-gradient(60% 90% at 50% 120%, rgb(from var(--ad-primary) r g b / 0.67), transparent 70%),
+    linear-gradient(180deg, var(--ad-primary-700), var(--ad-primary-800) 62%, var(--ad-primary-900));
+}
+
+.ad-tab:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.ad-tab:focus-visible {
+  outline: 0.125rem solid var(--ad-pink);
+  outline-offset: -0.125rem;
+}
+
+@keyframes ad-tab-pop {
+  0% {
+    transform: scale(0.6) rotate(-20deg);
+  }
+  60% {
+    transform: scale(1.3) rotate(6deg);
+  }
+  100% {
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ad-tab > .ad-icon {
+    animation: none;
+    transition: none;
+  }
+}

package/dist/components/controls/Tabs/Tabs.d.ts

@@ -0,0 +1,2 @@
+import { type TabsProps } from "../shared";
+export declare function Tabs<V extends string = string>(p: TabsProps<V>): import("react").JSX.Element;