@proyecto-viviana/ui 0.3.5 → 0.4.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Proyecto Viviana contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,192 +1,115 @@
 # @proyecto-viviana/ui
 
-Styled UI components for SolidJS - beautiful, accessible, and ready to use.
+Viviana UI's design-system package, built on Solid.
 
-## Installation
+It builds on `@proyecto-viviana/solid-spectrum`, so Spectrum components are
+available from the root package and from deep component subpaths. It also ships
+Viviana components, tokens, and product patterns such as cards, chips,
+conversation, layout, logo, and timeline pieces.
 
-```bash
-bun add @proyecto-viviana/ui solid-js
-```
+This package is part of Viviana UI, an unofficial open-source Solid port and
+design-system suite built from Adobe's React Stately, React Aria, React Aria
+Components, and React Spectrum S2. It is not affiliated with Adobe.
 
-## Setup
+## Install
 
-Import the CSS in your app entry point:
-
-```tsx
-import "@proyecto-viviana/ui/styles.css";
+```bash
+npm install @proyecto-viviana/ui solid-js
 ```
 
-## Quick Start
-
 ```tsx
-import { Button, TextField, Select } from "@proyecto-viviana/ui";
-import "@proyecto-viviana/ui/styles.css";
+import { Provider, Button } from "@proyecto-viviana/ui";
+import { TextField } from "@proyecto-viviana/ui/TextField";
+
+import "@proyecto-viviana/ui/theme.css";
+import "@proyecto-viviana/ui/components.css";
 
-function App() {
+export function App() {
   return (
-    <div>
-      <TextField label="Email" placeholder="Enter your email" />
-      <Button variant="accent" onPress={() => alert("Hello!")}>
-        Submit
-      </Button>
-    </div>
+    <Provider colorScheme="dark">
+      <TextField label="Name" />
+      <Button variant="accent">Save</Button>
+    </Provider>
   );
 }
 ```
 
-## Available Components
-
-### Form Controls
-
-| Component | Description |
-|-----------|-------------|
-| Button | Action buttons with variants |
-| TextField | Text input with label |
-| NumberField | Numeric input with inc/dec |
-| SearchField | Search input with clear |
-| Slider | Range slider |
-| Checkbox, CheckboxGroup | Checkboxes |
-| RadioGroup, Radio | Radio buttons |
-| ToggleSwitch | Toggle switch |
-
-### Selection
-
-| Component | Description |
-|-----------|-------------|
-| Select | Dropdown select |
-| Menu, MenuItem | Action menus |
-| ListBox, ListBoxOption | Selectable lists |
-
-### Navigation
-
-| Component | Description |
-|-----------|-------------|
-| Tabs, TabList, Tab, TabPanel | Tabbed navigation |
-| Breadcrumbs, BreadcrumbItem | Breadcrumb trail |
-| Link | Accessible links |
-| Landmark, SkipLink, LandmarkNavigator | ARIA landmarks with F6 navigation |
-
-### Data Display
-
-| Component | Description |
-|-----------|-------------|
-| Table | Data tables with sorting/selection |
-| GridList, GridListItem | Grid lists with keyboard nav |
-| Tree, TreeItem | Hierarchical tree views |
-
-### Color
-
-| Component | Description |
-|-----------|-------------|
-| ColorSlider | Single channel color slider |
-| ColorArea | 2D color gradient picker |
-| ColorWheel | Circular hue picker |
-| ColorField | Hex/RGB color input |
-| ColorSwatch | Color preview |
-| ColorPicker | Complete color picker |
-
-### Feedback
-
-| Component | Description |
-|-----------|-------------|
-| Alert | Informational alerts |
-| Badge | Status badges |
-| ProgressBar | Progress indicators |
-| Tooltip | Contextual tooltips |
-| Dialog | Modal dialogs |
-
-### Layout
-
-| Component | Description |
-|-----------|-------------|
-| Separator | Visual dividers |
-| Avatar, AvatarGroup | User avatars |
-
-### Custom Components
-
-| Component | Description |
-|-----------|-------------|
-| Chip | Tag-like chips |
-| ProfileCard | User profile cards |
-| EventCard | Event display |
-| CalendarCard | Calendar widget |
-| Conversation | Chat bubbles |
-| LateralNav | Side navigation |
-| PageLayout | Page structure |
-
-## Examples
-
-### Button
-
-```tsx
-<Button>Default</Button>
-<Button variant="accent">Accent</Button>
-<Button variant="negative">Delete</Button>
-<Button style="outline">Outline</Button>
-```
+Deep imports such as `@proyecto-viviana/ui/TextField` are preferred in app code.
+The root barrel is convenient for examples and shared entry points.
 
-### TextField
+## Styling
 
-```tsx
-<TextField label="Name" placeholder="Enter your name" />
-<TextField label="Email" type="email" isRequired />
-```
+Components do not inject CSS. Import the design-system CSS once at your app
+entry.
 
-### Select
+Most apps should import:
 
-```tsx
-<Select
-  label="Country"
-  items={[
-    { key: "us", label: "United States" },
-    { key: "uk", label: "United Kingdom" },
-  ]}
-  onSelectionChange={(key) => console.log(key)}
-/>
+```ts
+import "@proyecto-viviana/ui/theme.css";
+import "@proyecto-viviana/ui/components.css";
 ```
 
-### Tabs
+`theme.css` contains the color-scheme tokens and Viviana brand variables.
+`components.css` contains font faces plus the generated component styles.
 
-```tsx
-<Tabs defaultSelectedKey="overview">
-  <TabList>
-    <Tab id="overview">Overview</Tab>
-    <Tab id="features">Features</Tab>
-  </TabList>
-  <TabPanel id="overview">Overview content</TabPanel>
-  <TabPanel id="features">Features content</TabPanel>
-</Tabs>
+Apps that manage font loading themselves can import the two component-style
+halves separately:
+
+```ts
+import "@proyecto-viviana/ui/theme.css";
+import "@proyecto-viviana/ui/font-faces.css";
+import "@proyecto-viviana/ui/styles.css";
 ```
 
-## Sizes
+| Subpath          | Contents                                                   |
+| ---------------- | ---------------------------------------------------------- |
+| `theme.css`      | Color-scheme tokens + Viviana brand `--color-*` variables. |
+| `components.css` | `font-faces.css` + `styles.css`.                           |
+| `styles.css`     | Generated component rules, without font faces or tokens.   |
+| `font-faces.css` | Font-face declarations only.                               |
 
-Most components support size variants:
+## Authoring `style()`
 
-```tsx
-<Button size="sm">Small</Button>
-<Button size="md">Medium</Button>
-<Button size="lg">Large</Button>
-```
+Using the published components does not require a macro plugin. Their styles are
+already generated in the package build.
 
-## Theming
+You only need the macro setup if your app writes its own `style()` calls from
+`@proyecto-viviana/ui/style`:
 
-Customize via CSS variables:
-
-```css
-:root {
-  --color-primary-100: #your-color;
-  --color-accent: #your-accent;
-}
+```ts
+import { style } from "@proyecto-viviana/ui/style" with { type: "macro" };
 ```
 
-## TypeScript
+For Vite apps, use the package helper:
+
+```ts
+import { defineConfig } from "vite";
+import solid from "vite-plugin-solid";
+import { vivianaMacros } from "@proyecto-viviana/ui/vite";
+
+export default defineConfig({
+  plugins: [vivianaMacros(), solid({ ssr: true })],
+  optimizeDeps: {
+    exclude: ["@proyecto-viviana/ui", "@proyecto-viviana/solid-spectrum"],
+  },
+  ssr: {
+    noExternal: ["@proyecto-viviana/ui", "@proyecto-viviana/solid-spectrum"],
+  },
+});
+```
 
-Full TypeScript support:
+`vivianaMacros()` uses `unplugin-parcel-macros`, which is an optional peer. Add it
+as a dev dependency when you use the helper:
 
-```tsx
-import { Button, type ButtonProps } from "@proyecto-viviana/ui";
+```bash
+npm install -D unplugin-parcel-macros
 ```
 
-## License
+## Status
+
+`@proyecto-viviana/ui` is published and in active development. Expect APIs,
+package boundaries, and component behavior to keep tightening while the suite
+settles.
 
-MIT
+The package ships ESM, preserved-JSX `solid` exports, and TypeScript
+declarations.

package/dist/ActionButton.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/ActionButton";
+//# sourceMappingURL=ActionButton.d.ts.map

package/dist/ActionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../src/ActionButton.ts"],"names":[],"mappings":"AAAA,cAAc,+CAA+C,CAAC"}

package/dist/ActionButton.js

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ActionButton";

package/dist/ActionButton.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ActionButton";

package/dist/ActionMenu.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/ActionMenu";
+//# sourceMappingURL=ActionMenu.d.ts.map

package/dist/ActionMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../src/ActionMenu.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC"}

package/dist/ActionMenu.js

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ActionMenu";

package/dist/ActionMenu.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ActionMenu";

package/dist/Breadcrumbs.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/Breadcrumbs";
+//# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/Breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../src/Breadcrumbs.ts"],"names":[],"mappings":"AAAA,cAAc,8CAA8C,CAAC"}

package/dist/Breadcrumbs.js

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/Breadcrumbs";

package/dist/Breadcrumbs.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/Breadcrumbs";

package/dist/Button.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/Button";
+//# sourceMappingURL=Button.d.ts.map

package/dist/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.ts"],"names":[],"mappings":"AAAA,cAAc,yCAAyC,CAAC"}

package/dist/Button.js

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/Button";

package/dist/Button.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/Button";

package/dist/Calendar.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/Calendar";
+//# sourceMappingURL=Calendar.d.ts.map

package/dist/Calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../src/Calendar.ts"],"names":[],"mappings":"AAAA,cAAc,2CAA2C,CAAC"}

package/dist/Calendar.js

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/Calendar";

package/dist/Calendar.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/Calendar";

package/dist/CalendarCard.d.ts

@@ -0,0 +1,2 @@
+export * from "./custom/calendar-card";
+//# sourceMappingURL=CalendarCard.d.ts.map

package/dist/CalendarCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarCard.d.ts","sourceRoot":"","sources":["../src/CalendarCard.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/dist/CalendarCard.js

@@ -0,0 +1,96 @@
+import { t as Chip } from "./chip2.js";
+/* empty css                                                                       */
+/* empty css                                                                       */
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, setAttribute, template } from "solid-js/web";
+import { For, Show } from "solid-js";
+//#region src/custom/calendar-card/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<img class=" ZKniM151 FKniM151 _va151 _Hb151 oc151 nc151 kc151 jc151 _kc151 hc151 mc151 lc151 _jf151 ij1j4Pd151">`), _tmpl$2 = /*#__PURE__*/ template(`<span class=" xd151 _xa151 xX0cczbc151 _xX0cczba151 pO550xe151"><!$><!/> más`), _tmpl$3 = /*#__PURE__*/ template(`<span class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pxeCuqc151">seguida por <!$><!/><!$><!/>`), _tmpl$4 = /*#__PURE__*/ template(`<div class=" sd151 _wb151 Ub151 qb151">`), _tmpl$5 = /*#__PURE__*/ template(`<div><!$><!/><div class=" sd151 _ta151 Ue151 qe151 _ub151 Na151"><span class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-f151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pXDQpyb151 _Nc151 Pc151 _Yb151 _7c151"></span><!$><!/><!$><!/>`), _tmpl$6 = /*#__PURE__*/ template(`<span class=" xd151 _xa151 xX0cczbc151 _xX0cczba151 pO550xe151">`);
+const card = " sd151 eb151 Ug151 qg151 Za151 LQAax0d151 Te151 Qe151 Se151 Re151 oe151 ne151 ke151 je151 _kc151 hc151 mc151 lc151 _jf151 i6nBqyb151 gg0eWE151 _nLeasBb151";
+function CalendarCard(props) {
+	const displayedFollowers = () => props.followers?.slice(0, 2) ?? [];
+	const remainingCount = () => {
+		return (props.followerCount ?? props.followers?.length ?? 0) - displayedFollowers().length;
+	};
+	return (() => {
+		var _el$ = getNextElement(_tmpl$5), _el$19 = _el$.firstChild, [_el$20, _co$6] = getNextMarker(_el$19.nextSibling), _el$3 = _el$20.nextSibling, _el$4 = _el$3.firstChild, _el$15 = _el$4.nextSibling, [_el$16, _co$4] = getNextMarker(_el$15.nextSibling), _el$17 = _el$16.nextSibling, [_el$18, _co$5] = getNextMarker(_el$17.nextSibling);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.image;
+			},
+			get children() {
+				var _el$2 = getNextElement(_tmpl$);
+				effect((_p$) => {
+					var _v$ = props.image, _v$2 = props.title;
+					_v$ !== _p$.e && setAttribute(_el$2, "src", _p$.e = _v$);
+					_v$2 !== _p$.t && setAttribute(_el$2, "alt", _p$.t = _v$2);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$2;
+			}
+		}), _el$20, _co$6);
+		insert(_el$4, () => props.title);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return displayedFollowers().length > 0;
+			},
+			get children() {
+				var _el$5 = getNextElement(_tmpl$3), _el$10 = _el$5.firstChild.nextSibling, [_el$11, _co$2] = getNextMarker(_el$10.nextSibling), _el$12 = _el$11.nextSibling, [_el$13, _co$3] = getNextMarker(_el$12.nextSibling);
+				insert(_el$5, createComponent(For, {
+					get each() {
+						return displayedFollowers();
+					},
+					children: (follower, index) => [(() => {
+						var _el$21 = getNextElement(_tmpl$6);
+						insert(_el$21, () => follower.name);
+						return _el$21;
+					})(), memo(() => index() < displayedFollowers().length - 1 && ", ")]
+				}), _el$11, _co$2);
+				insert(_el$5, createComponent(Show, {
+					get when() {
+						return remainingCount() > 0;
+					},
+					get children() {
+						return [
+							" ",
+							"y ",
+							(() => {
+								var _el$8 = getNextElement(_tmpl$2), _el$0 = _el$8.firstChild, [_el$1, _co$] = getNextMarker(_el$0.nextSibling);
+								_el$1.nextSibling;
+								insert(_el$8, remainingCount, _el$1, _co$);
+								return _el$8;
+							})()
+						];
+					}
+				}), _el$13, _co$3);
+				return _el$5;
+			}
+		}), _el$16, _co$4);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return memo(() => !!props.tags)() && props.tags.length > 0;
+			},
+			get children() {
+				var _el$14 = getNextElement(_tmpl$4);
+				insert(_el$14, createComponent(For, {
+					get each() {
+						return props.tags;
+					},
+					children: (tag) => createComponent(Chip, {
+						text: tag,
+						variant: "primary"
+					})
+				}));
+				return _el$14;
+			}
+		}), _el$18, _co$5);
+		effect(() => className(_el$, `${card} ${props.class ?? ""}`));
+		return _el$;
+	})();
+}
+//#endregion
+export { CalendarCard };
+
+//# sourceMappingURL=CalendarCard.js.map

package/dist/CalendarCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarCard.js","names":[],"sources":["../src/custom/calendar-card/index.tsx"],"sourcesContent":["import { Show, For } from \"solid-js\";\nimport { Chip } from \"../chip\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A horizontal \"followed calendar\" card: square thumbnail +\n// title + followers line + tag chips, on the S2 ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface CalendarCardProps {\n  title: string;\n  image?: string;\n  tags?: string[];\n  followers?: { name: string }[];\n  followerCount?: number;\n  class?: string;\n}\n\nconst card = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 12,\n  width: \"full\",\n  maxWidth: 500,\n  padding: 12,\n  borderRadius: \"xl\",\n  borderWidth: 2,\n  borderStyle: \"solid\",\n  borderColor: \"[var(--color-primary-600)]\",\n  backgroundColor: \"[var(--color-bg-300)]\",\n  boxShadow: \"elevated\",\n});\n\nconst thumb = style({\n  width: 80,\n  height: 80,\n  flexShrink: 0,\n  objectFit: \"cover\",\n  borderRadius: \"lg\",\n  borderWidth: 2,\n  borderStyle: \"solid\",\n  borderColor: \"[var(--color-accent)]\",\n});\n\nconst body = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 8,\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst title = style({\n  font: \"heading-sm\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst followers = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n});\n\nconst followerName = style({\n  fontWeight: \"bold\",\n  // WCAG AA fix: the follower names sit on the `--color-bg-300` card. They are\n  // small text (`ui-sm`, inherited), so the 4.5:1 normal-text floor applies.\n  // `--color-accent` (#df5c9a) is a fixed pink in both themes and read only\n  // 2.42:1 on the light-blue card (5.08:1 dark); no pink ramp step clears 4.5:1\n  // on both the dark-grey and light-blue card (`--color-accent-500` is 4.39:1\n  // dark — a hair under). The names keep their emphasis via `fontWeight: bold`\n  // against the secondary-grey connectors and take the flipping `--color-text`,\n  // which clears 4.5:1 both ways (17.40:1 dark / 9.63:1 light). The card's pink\n  // accent moment stays on the thumbnail border (bears no text).\n  color: \"[var(--color-text)]\",\n});\n\nconst tags = style({\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  gap: 4,\n});\n\nexport function CalendarCard(props: CalendarCardProps) {\n  const displayedFollowers = () => props.followers?.slice(0, 2) ?? [];\n  const remainingCount = () => {\n    const total = props.followerCount ?? props.followers?.length ?? 0;\n    const displayed = displayedFollowers().length;\n    return total - displayed;\n  };\n\n  return (\n    <div class={`${card} ${props.class ?? \"\"}`}>\n      <Show when={props.image}>\n        <img class={thumb} src={props.image} alt={props.title} />\n      </Show>\n      <div class={body}>\n        <span class={title}>{props.title}</span>\n        <Show when={displayedFollowers().length > 0}>\n          <span class={followers}>\n            seguida por{\" \"}\n            <For each={displayedFollowers()}>\n              {(follower, index) => (\n                <>\n                  <span class={followerName}>{follower.name}</span>\n                  {index() < displayedFollowers().length - 1 && \", \"}\n                </>\n              )}\n            </For>\n            <Show when={remainingCount() > 0}>\n              {\" \"}\n              y <span class={followerName}>{remainingCount()} más</span>\n            </Show>\n          </span>\n        </Show>\n        <Show when={props.tags && props.tags.length > 0}>\n          <div class={tags}>\n            <For each={props.tags}>{(tag) => <Chip text={tag} variant=\"primary\" />}</For>\n          </div>\n        </Show>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAgBA,MAAM,OAAA;AAmEN,SAAgB,aAAa,OAAwB;CACnD,MAAM,2BAA2B,MAAM,WAAW,MAAM,GAAG,CAAA,KAAM,CAAA;CACjE,MAAM,uBAAiB;EAGrB,QAFc,MAAM,iBAAiB,MAAM,WAAW,UAAU,KAC9C,mBAAA,EAAqB;CAEzC;CAEA,cAAA;EAAA,IAAA,OAAA,eAAA,OAAA,GAAA,SAAA,KAAA,YAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA,GAAA,QAAA,OAAA,aAAA,QAAA,MAAA,YAAA,SAAA,MAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA,GAAA,SAAA,OAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA;EAAA,OAAA,MAAA,gBAEK,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,MAAM;GAAK;GAAA,IAAA,WAAA;IAAA,IAAA,QAAA,eAAA,MAAA;IAAA,QAAA,QAAA;KAAA,IAAA,MACG,MAAM,OAAK,OAAO,MAAM;KAAK,QAAA,IAAA,KAAA,aAAA,OAAA,OAAA,IAAA,IAAA,GAAA;KAAA,SAAA,IAAA,KAAA,aAAA,OAAA,OAAA,IAAA,IAAA,IAAA;KAAA,OAAA;IAAA,GAAA;KAAA,GAAA,KAAA;KAAA,GAAA,KAAA;IAAA,CAAA;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,QAAA,KAAA;EAAA,OAAA,aAGhC,MAAM,KAAK;EAAA,OAAA,OAAA,gBAC/B,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,mBAAA,EAAqB,SAAS;GAAA;GAAA,IAAA,WAAA;IAAA,IAAA,QAAA,eAAA,OAAA,GAAA,SAAA,MAAA,WAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA,GAAA,SAAA,OAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA;IAAA,OAAA,OAAA,gBAGrC,KAAA;KAAA,IAAI,OAAA;MAAA,OAAM,mBAAA;KAAA;KAAA,WACP,UAAU,UAAA,QAAA;MAAA,IAAA,SAAA,eAAA,OAAA;MAAA,OAAA,cAEoB,SAAS,IAAI;MAAA,OAAA;KAAA,GAAA,GAAA,WACxC,MAAA,IAAU,mBAAA,EAAqB,SAAS,KAAK,IAAA,CAAA;IAElD,CAAA,GAAA,QAAA,KAAA;IAAA,OAAA,OAAA,gBAED,MAAA;KAAA,IAAK,OAAA;MAAA,OAAM,eAAA,IAAmB;KAAA;KAAA,IAAA,WAAA;MAAA,OAAA;OAC5B;OAAA;cAAA;QAAA,IAAA,QAAA,eAAA,OAAA,GAAA,QAAA,MAAA,YAAA,CAAA,OAAA,QAAA,cAAA,MAAA,WAAA;QAAA,MAAA;QAAA,OAAA,OAC6B,gBAAA,OAAA,IAAA;QAAA,OAAA;OAAA,GAAA;MAAA;KAAA;IAAA,CAAA,GAAA,QAAA,KAAA;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,QAAA,KAAA;EAAA,OAAA,OAAA,gBAInC,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,WAAA,CAAA,CAAA,MAAM,IAAI,EAAA,KAAI,MAAM,KAAK,SAAS;GAAA;GAAA,IAAA,WAAA;IAAA,IAAA,SAAA,eAAA,OAAA;IAAA,OAAA,QAAA,gBAEzC,KAAA;KAAA,IAAI,OAAA;MAAA,OAAM,MAAM;KAAI;KAAA,WAAI,QAAA,gBAAS,MAAA;MAAK,MAAM;MAAK,SAAA;KAAA,CAAA;IAAQ,CAAA,CAAA;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,QAAA,KAAA;EAAA,aAAA,UAAA,MAzBtD,GAAG,KAAA,GAAQ,MAAM,SAAS,IAAI,CAAA;EAAA,OAAA;CAAA,GAAA;AA+B9C"}

package/dist/CalendarCard.jsx

@@ -0,0 +1,50 @@
+import { t as Chip } from "./chip2.jsx";
+/* empty css                                                                        */
+/* empty css                                                                        */
+import { For, Show } from "solid-js";
+//#region src/custom/calendar-card/index.tsx
+const card = " sd151 eb151 Ug151 qg151 Za151 LQAax0d151 Te151 Qe151 Se151 Re151 oe151 ne151 ke151 je151 _kc151 hc151 mc151 lc151 _jf151 i6nBqyb151 gg0eWE151 _nLeasBb151";
+const thumb = " ZKniM151 FKniM151 _va151 _Hb151 oc151 nc151 kc151 jc151 _kc151 hc151 mc151 lc151 _jf151 ij1j4Pd151";
+const body = " sd151 _ta151 Ue151 qe151 _ub151 Na151";
+const title = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-f151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pXDQpyb151 _Nc151 Pc151 _Yb151 _7c151";
+const followers = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pxeCuqc151";
+const followerName = " xd151 _xa151 xX0cczbc151 _xX0cczba151 pO550xe151";
+const tags = " sd151 _wb151 Ub151 qb151";
+function CalendarCard(props) {
+	const displayedFollowers = () => props.followers?.slice(0, 2) ?? [];
+	const remainingCount = () => {
+		return (props.followerCount ?? props.followers?.length ?? 0) - displayedFollowers().length;
+	};
+	return <div class={`${card} ${props.class ?? ""}`}>
+      <Show when={props.image}>
+        <img class={thumb} src={props.image} alt={props.title} />
+      </Show>
+      <div class={body}>
+        <span class={title}>{props.title}</span>
+        <Show when={displayedFollowers().length > 0}>
+          <span class={followers}>
+            seguida por{" "}
+            <For each={displayedFollowers()}>
+              {(follower, index) => <>
+                  <span class={followerName}>{follower.name}</span>
+                  {index() < displayedFollowers().length - 1 && ", "}
+                </>}
+            </For>
+            <Show when={remainingCount() > 0}>
+              {" "}
+              y <span class={followerName}>{remainingCount()} más</span>
+            </Show>
+          </span>
+        </Show>
+        <Show when={props.tags && props.tags.length > 0}>
+          <div class={tags}>
+            <For each={props.tags}>{(tag) => <Chip text={tag} variant="primary" />}</For>
+          </div>
+        </Show>
+      </div>
+    </div>;
+}
+//#endregion
+export { CalendarCard };
+
+//# sourceMappingURL=CalendarCard.jsx.map

package/dist/CalendarCard.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarCard.jsx","names":[],"sources":["../src/custom/calendar-card/index.tsx"],"sourcesContent":["import { Show, For } from \"solid-js\";\nimport { Chip } from \"../chip\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A horizontal \"followed calendar\" card: square thumbnail +\n// title + followers line + tag chips, on the S2 ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface CalendarCardProps {\n  title: string;\n  image?: string;\n  tags?: string[];\n  followers?: { name: string }[];\n  followerCount?: number;\n  class?: string;\n}\n\nconst card = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 12,\n  width: \"full\",\n  maxWidth: 500,\n  padding: 12,\n  borderRadius: \"xl\",\n  borderWidth: 2,\n  borderStyle: \"solid\",\n  borderColor: \"[var(--color-primary-600)]\",\n  backgroundColor: \"[var(--color-bg-300)]\",\n  boxShadow: \"elevated\",\n});\n\nconst thumb = style({\n  width: 80,\n  height: 80,\n  flexShrink: 0,\n  objectFit: \"cover\",\n  borderRadius: \"lg\",\n  borderWidth: 2,\n  borderStyle: \"solid\",\n  borderColor: \"[var(--color-accent)]\",\n});\n\nconst body = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 8,\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst title = style({\n  font: \"heading-sm\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst followers = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n});\n\nconst followerName = style({\n  fontWeight: \"bold\",\n  // WCAG AA fix: the follower names sit on the `--color-bg-300` card. They are\n  // small text (`ui-sm`, inherited), so the 4.5:1 normal-text floor applies.\n  // `--color-accent` (#df5c9a) is a fixed pink in both themes and read only\n  // 2.42:1 on the light-blue card (5.08:1 dark); no pink ramp step clears 4.5:1\n  // on both the dark-grey and light-blue card (`--color-accent-500` is 4.39:1\n  // dark — a hair under). The names keep their emphasis via `fontWeight: bold`\n  // against the secondary-grey connectors and take the flipping `--color-text`,\n  // which clears 4.5:1 both ways (17.40:1 dark / 9.63:1 light). The card's pink\n  // accent moment stays on the thumbnail border (bears no text).\n  color: \"[var(--color-text)]\",\n});\n\nconst tags = style({\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  gap: 4,\n});\n\nexport function CalendarCard(props: CalendarCardProps) {\n  const displayedFollowers = () => props.followers?.slice(0, 2) ?? [];\n  const remainingCount = () => {\n    const total = props.followerCount ?? props.followers?.length ?? 0;\n    const displayed = displayedFollowers().length;\n    return total - displayed;\n  };\n\n  return (\n    <div class={`${card} ${props.class ?? \"\"}`}>\n      <Show when={props.image}>\n        <img class={thumb} src={props.image} alt={props.title} />\n      </Show>\n      <div class={body}>\n        <span class={title}>{props.title}</span>\n        <Show when={displayedFollowers().length > 0}>\n          <span class={followers}>\n            seguida por{\" \"}\n            <For each={displayedFollowers()}>\n              {(follower, index) => (\n                <>\n                  <span class={followerName}>{follower.name}</span>\n                  {index() < displayedFollowers().length - 1 && \", \"}\n                </>\n              )}\n            </For>\n            <Show when={remainingCount() > 0}>\n              {\" \"}\n              y <span class={followerName}>{remainingCount()} más</span>\n            </Show>\n          </span>\n        </Show>\n        <Show when={props.tags && props.tags.length > 0}>\n          <div class={tags}>\n            <For each={props.tags}>{(tag) => <Chip text={tag} variant=\"primary\" />}</For>\n          </div>\n        </Show>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAgBA,MAAM,QAAA;AAeN,MAAM,OAAA;AAWN,MAAM,QAAA;AAQN,MAAM,YAAA;AAQN,MAAM,eAAA;AAKN,MAAM,OAAA;AAcN,SAAM,aAAA,OAAA;CAMN,MAAA,2BAAqD,MAAA,WAAA,MAAA,GAAA,CAAA,KAAA,CAAA;CACnD,MAAM,uBAAA;EACN,QAAM,MAAA,iBAAiB,MAAA,WAAA,UAAA,KAAA,mBAAA,EAAA;;CAIvB,OAAA,CAAA,IAAA,OAAA,GAAA,KAAA,GAAA,MAAA,SAAA,MAAA;MAEA,CAAA,KACG,MAAI,MAAU,OAAQ;QACpB,CAAA,IAAK,OAAM,OAAM,KAAO,MAAA,OAAA,KAAA,MAAA,SAAA;QACvB,KAAK;MACP,CAAA,IAAE,OAAK,MAAA;QACN,CAAA,KAAI,OAAO,QAAM,MAAA,MAAA,EAAA,KAAA;QAChB,CAAC,KAAK,MAAA,mBAAqB,EAAK,SAAQ,GAAA;UACvC,CAAA,KAAK,OAAM,WAAA;wBACG,IAAA;0CACK,GAAA;gBACf,UAAU,UAAA,EAAA;kBACP,CAAA,KAAA,OAAU,eACR,SAAA,KAAA,EAAA,KAAA;mBACC,MAAK,IAAA,mBAAsB,EAAA,SAAS,KAAO,KAAK;oBAChD;kBACH;YAEJ,CAAA,KAAM,MAAA,eAAA,IAAA,GAAA;eACL,IAAK;gBACH,CAAA,KAAI,OAAA,eAAA,eAAA,EAAA,IAAA,EAAA,KAAA;mBACF;YACL,KAAE;UACJ,KAAE;QACJ,CAAA,KAAE,MAAK,MAAA,QAAA,MAAA,KAAA,SAAA,GAAA;UACN,CAAA,IAAK,OAAM,MAAM;YACf,CAAA,IAAI,MAAO,MAAM,QAAA,QAAA,CAAA,KAAA,MAAA,KAAA,qBAAA,EAAA,IAAA;YAChB,IAAC;UACH,KAAE;QACJ,IAAE;MACJ"}

package/dist/Card.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/Card";
+//# sourceMappingURL=Card.d.ts.map

package/dist/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../src/Card.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC"}

package/dist/Card.js

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/Card";

package/dist/Card.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/Card";

package/dist/CardView.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/CardView";
+//# sourceMappingURL=CardView.d.ts.map

package/dist/CardView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardView.d.ts","sourceRoot":"","sources":["../src/CardView.ts"],"names":[],"mappings":"AAAA,cAAc,2CAA2C,CAAC"}

package/dist/CardView.js

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/CardView";

package/dist/CardView.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/CardView";

package/dist/CenterBaseline.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/CenterBaseline";
+//# sourceMappingURL=CenterBaseline.d.ts.map

package/dist/CenterBaseline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CenterBaseline.d.ts","sourceRoot":"","sources":["../src/CenterBaseline.ts"],"names":[],"mappings":"AAAA,cAAc,iDAAiD,CAAC"}

package/dist/CenterBaseline.js

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/CenterBaseline";

package/dist/CenterBaseline.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/CenterBaseline";

package/dist/Chip.d.ts

@@ -0,0 +1,2 @@
+export * from "./custom/chip";
+//# sourceMappingURL=Chip.d.ts.map

package/dist/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../src/Chip.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/Chip.js

@@ -0,0 +1,2 @@
+import { t as Chip } from "./chip2.js";
+export { Chip };

package/dist/Chip.jsx

@@ -0,0 +1,2 @@
+import { t as Chip } from "./chip2.jsx";
+export { Chip };

package/dist/ColorArea.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorArea";
+//# sourceMappingURL=ColorArea.d.ts.map

package/dist/ColorArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorArea.d.ts","sourceRoot":"","sources":["../src/ColorArea.ts"],"names":[],"mappings":"AAAA,cAAc,4CAA4C,CAAC"}

package/dist/ColorArea.js

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorArea";

package/dist/ColorArea.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorArea";

package/dist/ColorField.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorField";
+//# sourceMappingURL=ColorField.d.ts.map

package/dist/ColorField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField.d.ts","sourceRoot":"","sources":["../src/ColorField.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC"}