@msqd/lydia 0.0.0-stage → 0.6.0

package/dist/css/Components/Formatter/prism.css

@@ -0,0 +1,79 @@
+/*
+ * Token colours for the highlighter (refractor), the only place they are defined.
+ * The palette is GitHub's light theme. refractor emits Prism-compatible `token` classes.
+ */
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6a737d;
+  font-style: italic;
+}
+
+.token.punctuation {
+  color: #24292e;
+}
+
+.token.property,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.builtin,
+.token.url,
+.token.literal {
+  color: #005cc5;
+}
+
+.token.tag,
+.token.selector,
+.token.inserted {
+  color: #22863a;
+}
+
+.token.deleted,
+.token.operator,
+.token.keyword,
+.token.template-punctuation {
+  color: #d73a49;
+}
+
+.token.attr-name,
+.token.entity,
+.token.function,
+.token.class-name,
+.token.function-name,
+.token.function-variable,
+.token.namespace {
+  color: #6f42c1;
+}
+
+.token.string,
+.token.char,
+.token.regex,
+.token.attr-value,
+.token.template-string {
+  color: #032f62;
+}
+
+.token.variable {
+  color: #e36209;
+}
+
+.token.important {
+  color: #d73a49;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

package/dist/css/Components/Inputs/Input/Input.css

@@ -0,0 +1,73 @@
+/*
+ * Plain CSS in the components layer, scoped to Lydia's own inputs: `lydia-input` marks the inputs of
+ * Input, Checkbox, Radio, SearchInput and RangeSlider, `calendar-icon-right` the date input. Nothing here
+ * selects an element of the host application.
+ */
+@layer components {
+  /* Hide the default calendar picker indicator */
+  .calendar-icon-right::-webkit-calendar-picker-indicator {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    cursor: pointer;
+  }
+
+  /* Setup date input styles */
+  .calendar-icon-right {
+    color-scheme: light;
+    appearance: none;
+    -webkit-appearance: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+
+  /* Hide the calendar picker in Firefox but keep it functional */
+  .calendar-icon-right::-moz-calendar-picker-indicator {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    cursor: pointer;
+  }
+
+  /* Ensure placeholder text for date inputs has the same color as other inputs */
+  .calendar-icon-right::placeholder,
+  .calendar-icon-right::-webkit-input-placeholder {
+    color: var(--color-gray-400, #9ca3af);
+  }
+
+  /* Style empty date inputs to look like placeholders */
+  .calendar-icon-right:invalid {
+    color: var(--color-gray-400, #9ca3af);
+  }
+
+  /* Override for valid but empty date inputs in some browsers */
+  .calendar-icon-right:not([value=""]):not(:focus):invalid {
+    color: var(--color-gray-400, #9ca3af);
+  }
+
+  /* Custom disabled styles */
+  .lydia-input:disabled {
+    background-color: var(--color-gray-50, #f9fafb);
+    color: var(--color-gray-500, #6b7280);
+    cursor: not-allowed;
+  }
+
+  /* Input wrappers with disabled inputs */
+  div:has(> .lydia-input:disabled) {
+    background-color: var(--color-gray-50, #f9fafb);
+    border-color: var(--color-gray-200, #e5e7eb);
+    outline-color: var(--color-gray-200, #e5e7eb);
+    cursor: not-allowed;
+  }
+}

package/dist/css/Components/Inputs/Sliders/RangeSliderStyles.css

@@ -0,0 +1,92 @@
+/*
+ * Plain CSS on theme variables, no Tailwind directive: this file ships as a source for a consumer's own
+ * Tailwind build and must not need Tailwind, or a second copy of it, to compile.
+ */
+@layer components {
+  .range-slider-input {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    z-index: 3;
+    padding: 0;
+    cursor: pointer;
+    pointer-events: none;
+    appearance: none;
+  }
+
+  /* Styles for WebKit (Chrome, Safari, modern Edge) */
+  .range-slider-input::-webkit-slider-thumb {
+    pointer-events: auto;
+    cursor: grab;
+    border: 0;
+    border-radius: 0;
+    background-color: var(--color-primary-500);
+    -webkit-appearance: none;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+  }
+
+  .range-slider-input::-webkit-slider-thumb:active {
+    cursor: grabbing;
+  }
+
+  .range-slider-input:focus::-webkit-slider-runnable-track {
+    background-color: transparent;
+    border-color: transparent;
+    appearance: none;
+  }
+
+  /* Styles for Firefox */
+  .range-slider-input::-moz-range-thumb {
+    pointer-events: auto;
+    cursor: grab;
+    border: 0;
+    border-radius: 0;
+    background-color: var(--color-primary-500);
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+  }
+
+  .range-slider-input::-moz-range-thumb:active {
+    cursor: grabbing;
+  }
+
+  .range-slider-input:focus::-moz-range-track {
+    background-color: transparent;
+    border-color: transparent;
+    appearance: none;
+  }
+
+  /* Styles for IE and legacy Edge */
+  .range-slider-input::-ms-thumb {
+    pointer-events: auto;
+    cursor: grab;
+    border: 0;
+    border-radius: 0;
+    background-color: var(--color-primary-500);
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+  }
+
+  .range-slider-input::-ms-thumb:active {
+    cursor: grabbing;
+  }
+
+  .range-slider-input:focus::-ms-track {
+    background-color: transparent;
+    border-color: transparent;
+    appearance: none;
+  }
+
+  /*
+   * The inputs are invisible and the drawn thumbs live in a sibling subtree, so the focus of an
+   * input is shown on its thumb from the common wrapper. The outline sits outside the thumb, so it
+   * stays visible when the twin thumb paints over it.
+   */
+  .range-slider:has(input:nth-of-type(1):focus-visible) [data-thumb="min"],
+  .range-slider:has(input:nth-of-type(2):focus-visible) [data-thumb="max"] {
+    outline: 2px solid var(--color-primary-600);
+    outline-offset: 2px;
+  }
+}

package/dist/css/components.css

@@ -0,0 +1,6 @@
+/* Component styles. Needs a Tailwind 4 build that imports `theme.css`; it does not import Tailwind itself. */
+@import "./Components/Inputs/Input/Input.css";
+@import "./Components/Inputs/Sliders/RangeSliderStyles.css";
+@import "./Components/Formatter/prism.css";
+
+@source "../**/*.js";

package/dist/css/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/css/theme.css

@@ -0,0 +1,109 @@
+/* Lato Font Definitions */
+@font-face {
+  font-family: "Lato";
+  src: url("./fonts/Lato-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lato";
+  src: url("./fonts/Lato-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lato";
+  src: url("./fonts/Lato-Italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lato";
+  src: url("./fonts/Lato-BoldItalic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@theme static {
+  --color-primary-50: #e8ebf3;
+  --color-primary-100: #c4cde2;
+  --color-primary-200: #9eadcd;
+  --color-primary-300: #798db9;
+  --color-primary-400: #5b74ab;
+  --color-primary-500: #3d5c9e;
+  --color-primary-600: #365495;
+  --color-primary-700: #2d4a89;
+  --color-primary-800: #1d3a88; /* desaturated */
+  --color-primary-900: #1c2f65; /* desaturated */
+
+  /*
+   * Status tokens. Every surface that means "this worked", "look at this" or "this failed"
+   * references these rather than a hue, so a consumer can retheme status without forking
+   * components. Values are Tailwind's green, yellow and red ramps, so adopting the tokens
+   * changed no pixels.
+   */
+  --color-success-50: oklch(98.2% 0.018 155.826);
+  --color-success-100: oklch(96.2% 0.044 156.743);
+  --color-success-200: oklch(92.5% 0.084 155.995);
+  --color-success-300: oklch(87.1% 0.15 154.449);
+  --color-success-400: oklch(79.2% 0.209 151.711);
+  --color-success-500: oklch(72.3% 0.219 149.579);
+  --color-success-600: oklch(62.7% 0.194 149.214);
+  --color-success-700: oklch(52.7% 0.154 150.069);
+  --color-success-800: oklch(44.8% 0.119 151.328);
+  --color-success-900: oklch(39.3% 0.095 152.535);
+
+  --color-warning-50: oklch(98.7% 0.026 102.212);
+  --color-warning-100: oklch(97.3% 0.071 103.193);
+  --color-warning-200: oklch(94.5% 0.129 101.54);
+  --color-warning-300: oklch(90.5% 0.182 98.111);
+  --color-warning-400: oklch(85.2% 0.199 91.936);
+  --color-warning-500: oklch(79.5% 0.184 86.047);
+  --color-warning-600: oklch(68.1% 0.162 75.834);
+  --color-warning-700: oklch(55.4% 0.135 66.442);
+  --color-warning-800: oklch(47.6% 0.114 61.907);
+  --color-warning-900: oklch(42.1% 0.095 57.708);
+
+  --color-danger-50: oklch(97.1% 0.013 17.38);
+  --color-danger-100: oklch(93.6% 0.032 17.717);
+  --color-danger-200: oklch(88.5% 0.062 18.334);
+  --color-danger-300: oklch(80.8% 0.114 19.571);
+  --color-danger-400: oklch(70.4% 0.191 22.216);
+  --color-danger-500: oklch(63.7% 0.237 25.331);
+  --color-danger-600: oklch(57.7% 0.245 27.325);
+  --color-danger-700: oklch(50.5% 0.213 27.518);
+  --color-danger-800: oklch(44.4% 0.177 26.899);
+  --color-danger-900: oklch(39.6% 0.141 25.723);
+
+  /*
+   * TPDEX scale, one token per rating. Badges paint them as `bg-tpdex-*` and charts read them
+   * through the computed style (`Models/Tpdex`), so retheming one moves both. Values are
+   * Tailwind's teal, emerald, green, lime, yellow, amber, orange and red ramps.
+   */
+  --color-tpdex-a-plus-plus: oklch(77.7% 0.152 181.912);
+  --color-tpdex-a-plus: oklch(76.5% 0.177 163.223);
+  --color-tpdex-a: oklch(72.3% 0.219 149.579);
+  --color-tpdex-b: oklch(76.8% 0.233 130.85);
+  --color-tpdex-c: oklch(79.5% 0.184 86.047);
+  --color-tpdex-d: oklch(76.9% 0.188 70.08);
+  --color-tpdex-e: oklch(70.5% 0.213 47.604);
+  --color-tpdex-f: oklch(63.7% 0.237 25.331);
+  --color-tpdex-g: oklch(50.5% 0.213 27.518);
+
+  /* Chart colours that no status token covers. Errors and cached bars use the danger and success tokens. */
+  --color-chart-transactions: oklch(85.6% 0.049 219.654);
+  --color-chart-rest: oklch(92.2% 0 0);
+  --color-chart-label: oklch(47.5% 0.126 248.446);
+  --color-chart-out-of-range: oklch(70.8% 0 0);
+
+  /* Font Family Configuration */
+  --font-sans:
+    Lato, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Components/index.js";
+export * from "./Elements/index.js";
+export * from "./Models/index.js";
+export * from "./Pages/index.js";