slexkit 0.2.0

package/dist/components/tabs.css

@@ -0,0 +1,192 @@
+.slex-tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.slex-tabs[data-orientation="vertical"] {
+  flex-direction: row;
+}
+
+.slex-tabs-list {
+  --slex-tabs-indicator-inline-inset: 12px;
+  --slex-tabs-indicator-block-inset: 8px;
+  position: relative;
+  display: flex;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: hidden;
+  border-bottom: 1px solid var(--border);
+}
+
+.slexkit-root .slex-tabs-list {
+  display: flex;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.slexkit-root .slex-tabs-list li {
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  list-style: none;
+}
+
+.slex-tabs-selected-indicator {
+  position: absolute;
+  z-index: 20;
+  top: 0;
+  left: 0;
+  width: var(--slex-tabs-indicator-width, 0);
+  height: var(--slex-tabs-indicator-height, 0.125rem);
+  border-radius: 999px;
+  background: var(--primary);
+  opacity: var(--slex-tabs-indicator-opacity, 0);
+  pointer-events: none;
+  transform: translate3d(var(--slex-tabs-indicator-x, 0), var(--slex-tabs-indicator-y, 0), 0);
+}
+
+.slex-tabs-list[data-indicator-ready="true"] .slex-tabs-selected-indicator {
+  transition:
+    transform var(--slex-tabs-indicator-duration, 140ms) var(--slex-motion-ease-standard, cubic-bezier(0.22, 1, 0.36, 1)),
+    width var(--slex-tabs-indicator-duration, 140ms) var(--slex-motion-ease-standard, cubic-bezier(0.22, 1, 0.36, 1)),
+    height var(--slex-tabs-indicator-duration, 140ms) var(--slex-motion-ease-standard, cubic-bezier(0.22, 1, 0.36, 1)),
+    opacity var(--slex-tabs-indicator-duration, 140ms) var(--slex-motion-ease-standard, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.slex-tabs[data-orientation="vertical"] .slex-tabs-list {
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  border-bottom: none;
+}
+
+.slex-tabs-trigger {
+  position: relative;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--muted-foreground);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+
+.slex-tabs-trigger--icon {
+  display: inline-grid;
+  width: var(--slex-control-height, 2.25rem);
+  min-height: var(--slex-control-height, 2.25rem);
+  place-items: center;
+  padding-inline: 0;
+}
+
+.slex-tabs-trigger--with-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.slex-tabs-trigger-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  width: 1.125rem;
+  height: 1.125rem;
+  color: currentColor;
+}
+
+.slex-tabs-trigger-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.slex-tabs-trigger:hover:not([data-disabled]) {
+  background: transparent;
+  color: var(--muted-foreground);
+}
+
+.slex-tabs-trigger.slex-tabs-trigger--selected {
+  color: var(--primary);
+}
+
+.slex-tabs-trigger.slex-tabs-trigger--selected:hover:not([data-disabled]) {
+  color: var(--primary);
+}
+
+.slex-tabs-trigger[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.slex-tabs-trigger:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+
+.slex-tabs-content {
+  margin-top: 0.75rem !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  padding: 0 !important;
+  color: var(--foreground);
+  font-size: 0.875rem;
+  line-height: 1.625;
+  animation: slex-tabs-content-in 200ms ease-out;
+}
+
+.slex-tabs[data-orientation="vertical"] .slex-tabs-content {
+  margin-top: 0 !important;
+  margin-left: 0.75rem !important;
+}
+
+.slex-tabs-content:empty {
+  display: none;
+}
+
+@keyframes slex-tabs-content-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slex-tabs-content[hidden] {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .slex-tabs-list {
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .slex-tabs-list::-webkit-scrollbar {
+    display: none;
+  }
+
+  .slex-tabs[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  .slex-tabs[data-orientation="vertical"] .slex-tabs-list {
+    flex-direction: row;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+}

package/dist/components/tabs.js

@@ -0,0 +1,17 @@
+import {
+  Tabs
+} from "../chunks/accordion-cfjyxw93.js";
+import"../chunks/accordion-hzyrngd6.js";
+import"../chunks/accordion-cw5r75jm.js";
+import {
+  createSvelteRenderer
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/tabs.ts
+import { register } from "../runtime.js";
+register("tabs", createSvelteRenderer("tabs", Tabs), { state: "value" });
+var tabs_default = Tabs;
+export {
+  tabs_default as default,
+  Tabs
+};

package/dist/components/text-input.css

@@ -0,0 +1,245 @@
+.slex-input-field {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  width: 100%;
+  min-width: 0;
+}
+
+.slex-input-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  width: fit-content;
+  color: var(--foreground);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.slex-input-field[data-required="true"] .slex-input-label::after {
+  content: "*";
+  color: var(--destructive);
+  font-weight: 700;
+}
+
+.slex-input-control {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-width: 0;
+}
+
+.slex-input {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--input);
+  border-radius: var(--radius);
+  background: var(--background);
+  color: var(--foreground);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  outline: none;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.slex-input-control[data-has-unit="true"] .slex-input,
+.slex-input-control[data-has-controls="true"] .slex-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.slex-input-unit {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.5625rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--input);
+  border-left: 0;
+  border-radius: 0 var(--radius) var(--radius) 0;
+  background: var(--muted);
+  color: var(--muted-foreground);
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.5;
+  white-space: nowrap;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.slex-input-control[data-has-controls="true"] .slex-input-unit {
+  border-radius: 0;
+}
+
+.slex-input-controls {
+  box-sizing: border-box;
+  display: inline-grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: stretch;
+  flex: 0 0 auto;
+  width: 3.75rem;
+  min-width: 3.75rem;
+  min-height: 2.5625rem;
+  overflow: hidden;
+  border: 1px solid var(--input);
+  border-left: 0;
+  border-radius: 0 var(--radius) var(--radius) 0;
+  background: var(--background);
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.slex-input-step {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+  min-height: 100%;
+  padding: 0;
+  border: 0;
+  border-left: 1px solid var(--input);
+  border-radius: 0;
+  background: transparent;
+  color: var(--foreground);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
+}
+
+.slex-input-step:first-child {
+  border-left: 0;
+}
+
+.slex-input-step:last-child {
+  border-radius: 0;
+}
+
+.slex-input-step:hover:not(:disabled) {
+  background: color-mix(in oklab, var(--muted) 52%, var(--background));
+}
+
+.slex-input-step:focus-visible {
+  z-index: 1;
+  border-color: var(--ring);
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
+}
+
+.slex-input-step:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.slex-input::placeholder {
+  color: var(--muted-foreground);
+}
+
+.slex-input:focus {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
+}
+
+.slex-input[type="number"] {
+  appearance: textfield;
+}
+
+.slex-input[type="number"]::-webkit-outer-spin-button,
+.slex-input[type="number"]::-webkit-inner-spin-button {
+  margin: 0;
+  appearance: none;
+}
+
+.slex-input[readonly] {
+  background: color-mix(in oklab, var(--muted) 42%, var(--background));
+  color: color-mix(in oklab, var(--foreground) 82%, var(--muted-foreground));
+}
+
+.slex-input-field[data-invalid="true"] .slex-input {
+  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
+}
+
+.slex-input-field[data-invalid="true"] .slex-input:focus {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
+}
+
+.slex-input-control:focus-within .slex-input-unit {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
+}
+
+.slex-input-control:focus-within .slex-input-step {
+  border-color: var(--ring);
+}
+
+.slex-input-control:focus-within .slex-input-controls {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
+}
+
+.slex-input-field[data-invalid="true"] .slex-input-unit {
+  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
+  color: color-mix(in oklab, var(--destructive) 84%, var(--muted-foreground));
+}
+
+.slex-input-field[data-invalid="true"] .slex-input-step {
+  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
+}
+
+.slex-input-field[data-invalid="true"] .slex-input-controls {
+  border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
+}
+
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
+}
+
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-step {
+  border-color: var(--destructive);
+}
+
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-controls {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
+}
+
+.slex-input[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.slex-input[disabled] + .slex-input-unit {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.slex-input[disabled] ~ .slex-input-controls,
+.slex-input[readonly] ~ .slex-input-controls {
+  opacity: 0.6;
+}
+
+.slex-input-description {
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  line-height: 1.35;
+}
+
+.slex-input-error {
+  color: var(--destructive);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.35;
+}

package/dist/components/text.js

@@ -0,0 +1,50 @@
+import {
+  append,
+  bindPropStore,
+  child,
+  createSvelteRenderer,
+  from_html,
+  get,
+  pop,
+  proxy,
+  push,
+  reset,
+  set,
+  set_class,
+  set_text,
+  state,
+  template_effect,
+  text1 as text,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/text.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/display/Text.svelte
+var root = from_html(`<div> </div>`);
+function Text($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  var div = root();
+  var text_1 = child(div, true);
+  reset(div);
+  template_effect(($0, $1) => {
+    set_class(div, 1, $0);
+    set_text(text_1, $1);
+  }, [
+    () => `slex-text${get(p).variant ? ` slex-text--${text(get(p).variant)}` : ""}${get(p).class ? ` ${text(get(p).class)}` : ""}`,
+    () => text(get(p).content ?? get(p).text ?? get(p).label)
+  ]);
+  append($$anchor, div);
+  pop();
+}
+
+// src/components/entries/text.ts
+register("text", createSvelteRenderer("text", Text), { state: "readable" });
+var text_default = Text;
+export {
+  text_default as default,
+  Text
+};