@neuralytics/alpine-ds 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +64 -17
  3. package/dist/components/tooltip/Tooltip.vue.d.ts +2 -2
  4. package/dist/fonts/OFL.txt +94 -0
  5. package/dist/fonts/lato-latin-bold.woff2 +0 -0
  6. package/dist/fonts/lato-latin-ext-bold.woff2 +0 -0
  7. package/dist/fonts/lato-latin-ext-medium.woff2 +0 -0
  8. package/dist/fonts/lato-latin-ext-regular.woff2 +0 -0
  9. package/dist/fonts/lato-latin-medium.woff2 +0 -0
  10. package/dist/fonts/lato-latin-regular.woff2 +0 -0
  11. package/dist/fonts.css +67 -0
  12. package/dist/index.mjs +891 -894
  13. package/dist/tailwind-preset.d.ts +3 -0
  14. package/dist/tailwind-preset.mjs +32 -15
  15. package/dist/theme.css +137 -0
  16. package/package.json +5 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @neuralytics/alpine-ds
2
2
 
3
+ ## 0.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - bb5dadd: Add typography to the theme: Lato as default `font-sans`, a custom font size scale (`sm` to `3xl`) and `normal`/`medium`/`bold` weights, all replacing Tailwind's defaults. Add an optional `fonts.css` shipping Lato 2.0 as `woff2`. `body` now defaults to `font-sans` and `text-base`, and form controls inherit the page font, even with preflight disabled.
8
+
9
+ ### Patch Changes
10
+
11
+ - bb5dadd: Fix floating layers positioned at the top-left corner when anchored to an `AlpineButton` or `AlpineIcon`: `AlpineTooltip` (their root) now has a single root element, so their `$el` is a real element, and floating layers resolve `display: contents` references to the first descendant with a box.
12
+
13
+ ## 0.6.0
14
+
15
+ ### Minor Changes
16
+
17
+ - df0d828: Add theme.css, a native Tailwind v4 CSS theme (deprecates the JS preset, which remains supported).
18
+
3
19
  ## 0.5.0
4
20
 
5
21
  ### Minor Changes
package/README.md CHANGED
@@ -38,28 +38,30 @@ export default defineConfig({
38
38
  })
39
39
  ```
40
40
 
41
- 4. Import the Tailwind configuration in your main style file. The path in `@config` is relative to this CSS file — adjust it if your `tailwind.config.ts` isn't next to it (e.g. `../tailwind.config.ts` if your CSS lives in `src/` and the config is at your project root):
41
+ 4. Import the design system's CSS theme in your main style file:
42
+
43
+ **Without a `tailwind.config` (recommended)** — `theme.css` already handles detection of the package's classes, no `content` entry needed:
42
44
 
43
45
  ```css
44
46
  @import "tailwindcss";
45
- @config "./tailwind.config.ts";
47
+ @import "@neuralytics/alpine-ds/theme.css";
48
+ @import "@neuralytics/alpine-ds/fonts.css"; /* optional, see Typography */
46
49
  ```
47
50
 
48
- 5. Configure Tailwind (`tailwind.config.ts`) using the design system's preset, which already handles detection of the package's classes:
49
-
50
- ```ts
51
- import type { Config } from "tailwindcss"
52
- import alpineDsPreset from "@neuralytics/alpine-ds/tailwind-preset"
51
+ **With a `tailwind.config`** — if your project already has a `tailwind.config.ts`/`.js` (custom `theme.extend`, plugins, `content`...), keep it alongside the CSS import:
53
52
 
54
- export default {
55
- presets: [alpineDsPreset],
56
- content: [
57
- // ... your source files ...
58
- ],
59
- } as Config
53
+ ```css
54
+ @import "tailwindcss";
55
+ @config "./tailwind.config.ts";
56
+ @import "@neuralytics/alpine-ds/theme.css";
57
+ @import "@neuralytics/alpine-ds/fonts.css"; /* optional, see Typography */
60
58
  ```
61
59
 
62
- 6. Set the accent color in your project's `main.ts`:
60
+ Nothing needs to change in `tailwind.config.ts` itself — keep your own `theme.extend`, plugins, `content`, etc. as they are, the DS's classes and colors come entirely from `theme.css`.
61
+
62
+ > Migrating from the old JS preset? Remove the `presets: [alpineDsPreset]` entry (or wherever you imported `@neuralytics/alpine-ds/tailwind-preset`) and any `content` glob you'd added just to scan `@neuralytics/alpine-ds`'s own files — both are now handled by `theme.css`. `tailwind-preset` is still published but deprecated.
63
+
64
+ 5. Set the accent color in your project's `main.ts`:
63
65
 
64
66
  ```js
65
67
  import { setAccentColorTheme } from "@neuralytics/alpine-ds"
@@ -69,7 +71,7 @@ setAccentColorTheme("#fe4e29")
69
71
 
70
72
  Note that this function can be called at any time. Calling it in your `main.ts` gives you a default value.
71
73
 
72
- 7. (Optional) Set the text color of the primary `AlpineButton` if `white` doesn't fit your accent color:
74
+ 6. (Optional) Set the text color of the primary `AlpineButton` if `white` doesn't fit your accent color:
73
75
 
74
76
  ```js
75
77
  import { setButtonTextColor } from "@neuralytics/alpine-ds"
@@ -79,7 +81,7 @@ setButtonTextColor("#000000")
79
81
 
80
82
  This only affects the primary button's text (not disabled or loading states) and defaults to `white` if never called.
81
83
 
82
- 8. Import a component in a `.vue` file
84
+ 7. Import a component in a `.vue` file
83
85
 
84
86
  ```js
85
87
  import { AlpineButton } from "@neuralytics/alpine-ds"
@@ -99,7 +101,52 @@ The Design System uses the following Tailwind colors:
99
101
  These are the only colors available: any other Tailwind color utility (e.g. `bg-purple-500`) will not generate any CSS.
100
102
 
101
103
  Note that all colors use 10 shades: `50`, `100`, `200`, ..., `900`.
102
- `accent` must be provided by the consumer via `setAccentColorTheme` (see step 6 of [Integration](#integration)); the other colors already have a default value.
104
+ `accent` must be provided by the consumer via `setAccentColorTheme` (see step 5 of [Integration](#integration)); the other colors already have a default value.
105
+
106
+ ## Typography
107
+
108
+ ### Font family
109
+
110
+ `theme.css` sets `font-sans` to **Lato** (falling back to the system sans-serif font), but does not load it. To use Lato, also import `fonts.css`:
111
+
112
+ ```css
113
+ @import "@neuralytics/alpine-ds/fonts.css";
114
+ ```
115
+
116
+ It ships Lato 2.0 (`400`, `500`, `700`) as `woff2` files, bundled into your app by Vite and served from your own domain — no external request. Without this import, Lato is never downloaded.
117
+
118
+ To use another font, load it yourself and override `--font-sans` after importing `theme.css`:
119
+
120
+ ```css
121
+ @theme {
122
+ --font-sans: "Poppins", sans-serif;
123
+ }
124
+ ```
125
+
126
+ ### Font sizes
127
+
128
+ These sizes replace Tailwind's default scale (any other size, e.g. `text-xs` or `text-4xl`, will not generate any CSS):
129
+
130
+ | Class | Font size | Line height |
131
+ |-------------|--------------------|--------------------|
132
+ | `text-sm` | `0.6875rem` (11px) | `1rem` (16px) |
133
+ | `text-base` | `0.8125rem` (13px) | `1.25rem` (20px) |
134
+ | `text-lg` | `1rem` (16px) | `1.5rem` (24px) |
135
+ | `text-xl` | `1.25rem` (20px) | `1.75rem` (28px) |
136
+ | `text-2xl` | `1.5rem` (24px) | `2rem` (32px) |
137
+ | `text-3xl` | `1.875rem` (30px) | `2.25rem` (36px) |
138
+
139
+ `theme.css` applies `font-sans` and `text-base` to `body` as the default text style (overridable by any class or rule of your app).
140
+
141
+ Sizes are in `rem` so they follow the user's browser font size setting: don't force `html { font-size: 16px }`.
142
+
143
+ ### Font weights
144
+
145
+ Only `font-normal` (400), `font-medium` (500) and `font-bold` (700) are available, matching the weights shipped by `fonts.css`.
146
+
147
+ ### Form controls
148
+
149
+ `theme.css` makes `button`, `input`, `select` and `textarea` inherit the page's font family and size, even with Tailwind's preflight disabled.
103
150
 
104
151
  ## Icons
105
152
 
package/dist/components/tooltip/Tooltip.vue.d.ts CHANGED
@@ -7,7 +7,7 @@ declare function __VLS_template(): {
7
7
  refs: {
8
8
  triggerWrapper: HTMLDivElement;
9
9
  };
10
- rootEl: any;
10
+ rootEl: HTMLDivElement;
11
11
  };
12
12
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
13
13
  declare const __VLS_component: import('vue').DefineComponent<TooltipProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
@@ -16,7 +16,7 @@ declare const __VLS_component: import('vue').DefineComponent<TooltipProps, {}, {
16
16
  isDisabled: boolean;
17
17
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
18
18
  triggerWrapper: HTMLDivElement;
19
- }, any>;
19
+ }, HTMLDivElement>;
20
20
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
21
21
  export default _default;
22
22
  type __VLS_WithTemplateSlots<T, S> = T & {
package/dist/fonts/OFL.txt ADDED
@@ -0,0 +1,94 @@
1
+ Copyright (c) 2010-2015, Łukasz Dziedzic (dziedzic@typoland.com),
2
+ with Reserved Font Name Lato.
3
+
4
+ This Font Software is licensed under the SIL Open Font License, Version 1.1.
5
+ This license is copied below, and is also available with a FAQ at:
6
+ http://scripts.sil.org/OFL
7
+
8
+
9
+ -----------------------------------------------------------
10
+ SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
11
+ -----------------------------------------------------------
12
+
13
+ PREAMBLE
14
+ The goals of the Open Font License (OFL) are to stimulate worldwide
15
+ development of collaborative font projects, to support the font creation
16
+ efforts of academic and linguistic communities, and to provide a free and
17
+ open framework in which fonts may be shared and improved in partnership
18
+ with others.
19
+
20
+ The OFL allows the licensed fonts to be used, studied, modified and
21
+ redistributed freely as long as they are not sold by themselves. The
22
+ fonts, including any derivative works, can be bundled, embedded,
23
+ redistributed and/or sold with any software provided that any reserved
24
+ names are not used by derivative works. The fonts and derivatives,
25
+ however, cannot be released under any other type of license. The
26
+ requirement for fonts to remain under this license does not apply
27
+ to any document created using the fonts or their derivatives.
28
+
29
+ DEFINITIONS
30
+ "Font Software" refers to the set of files released by the Copyright
31
+ Holder(s) under this license and clearly marked as such. This may
32
+ include source files, build scripts and documentation.
33
+
34
+ "Reserved Font Name" refers to any names specified as such after the
35
+ copyright statement(s).
36
+
37
+ "Original Version" refers to the collection of Font Software components as
38
+ distributed by the Copyright Holder(s).
39
+
40
+ "Modified Version" refers to any derivative made by adding to, deleting,
41
+ or substituting -- in part or in whole -- any of the components of the
42
+ Original Version, by changing formats or by porting the Font Software to a
43
+ new environment.
44
+
45
+ "Author" refers to any designer, engineer, programmer, technical
46
+ writer or other person who contributed to the Font Software.
47
+
48
+ PERMISSION & CONDITIONS
49
+ Permission is hereby granted, free of charge, to any person obtaining
50
+ a copy of the Font Software, to use, study, copy, merge, embed, modify,
51
+ redistribute, and sell modified and unmodified copies of the Font
52
+ Software, subject to the following conditions:
53
+
54
+ 1) Neither the Font Software nor any of its individual components,
55
+ in Original or Modified Versions, may be sold by itself.
56
+
57
+ 2) Original or Modified Versions of the Font Software may be bundled,
58
+ redistributed and/or sold with any software, provided that each copy
59
+ contains the above copyright notice and this license. These can be
60
+ included either as stand-alone text files, human-readable headers or
61
+ in the appropriate machine-readable metadata fields within text or
62
+ binary files as long as those fields can be easily viewed by the user.
63
+
64
+ 3) No Modified Version of the Font Software may use the Reserved Font
65
+ Name(s) unless explicit written permission is granted by the corresponding
66
+ Copyright Holder. This restriction only applies to the primary font name as
67
+ presented to the users.
68
+
69
+ 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
70
+ Software shall not be used to promote, endorse or advertise any
71
+ Modified Version, except to acknowledge the contribution(s) of the
72
+ Copyright Holder(s) and the Author(s) or with their explicit written
73
+ permission.
74
+
75
+ 5) The Font Software, modified or unmodified, in part or in whole,
76
+ must be distributed entirely under this license, and must not be
77
+ distributed under any other license. The requirement for fonts to
78
+ remain under this license does not apply to any document created
79
+ using the Font Software.
80
+
81
+ TERMINATION
82
+ This license becomes null and void if any of the above conditions are
83
+ not met.
84
+
85
+ DISCLAIMER
86
+ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
87
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
88
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
89
+ OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
90
+ COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
91
+ INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
92
+ DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
93
+ FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
94
+ OTHER DEALINGS IN THE FONT SOFTWARE.
package/dist/fonts/lato-latin-bold.woff2 ADDED
Binary file
package/dist/fonts.css ADDED
@@ -0,0 +1,67 @@
1
+ /*
2
+ * Optional: loads Lato 2.0 (400/500/700), the default `--font-sans` of theme.css.
3
+ * Source: https://www.latofonts.com (Lato2OFL.zip, v2.015, SIL OFL — see fonts/OFL.txt).
4
+ * Converted to woff2 without hinting and split into `latin`/`latin-ext` subsets
5
+ * (same unicode ranges as Google Fonts).
6
+ *
7
+ * `unicode-range` tells the browser which characters each file contains: a file is
8
+ * only downloaded if the page displays at least one character of its range, and
9
+ * only for the weights actually used.
10
+ * - `latin` (~30 KB): ASCII, Western European accents (é, ç, ü…), œ, typographic
11
+ * punctuation (« », –, …), €, ™, arrows. Enough for a French page.
12
+ * - `latin-ext` (~56 KB): Central European and other languages (ą, č, ł, ş…) and
13
+ * other currency symbols. Only fetched when such a character appears.
14
+ */
15
+ @font-face {
16
+ font-family: "Lato";
17
+ font-style: normal;
18
+ font-weight: 400;
19
+ font-display: swap;
20
+ src: url("./fonts/lato-latin-regular.woff2") format("woff2");
21
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
22
+ }
23
+
24
+ @font-face {
25
+ font-family: "Lato";
26
+ font-style: normal;
27
+ font-weight: 400;
28
+ font-display: swap;
29
+ src: url("./fonts/lato-latin-ext-regular.woff2") format("woff2");
30
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
31
+ }
32
+
33
+ @font-face {
34
+ font-family: "Lato";
35
+ font-style: normal;
36
+ font-weight: 500;
37
+ font-display: swap;
38
+ src: url("./fonts/lato-latin-medium.woff2") format("woff2");
39
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
40
+ }
41
+
42
+ @font-face {
43
+ font-family: "Lato";
44
+ font-style: normal;
45
+ font-weight: 500;
46
+ font-display: swap;
47
+ src: url("./fonts/lato-latin-ext-medium.woff2") format("woff2");
48
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
49
+ }
50
+
51
+ @font-face {
52
+ font-family: "Lato";
53
+ font-style: normal;
54
+ font-weight: 700;
55
+ font-display: swap;
56
+ src: url("./fonts/lato-latin-bold.woff2") format("woff2");
57
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
58
+ }
59
+
60
+ @font-face {
61
+ font-family: "Lato";
62
+ font-style: normal;
63
+ font-weight: 700;
64
+ font-display: swap;
65
+ src: url("./fonts/lato-latin-ext-bold.woff2") format("woff2");
66
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
67
+ }