@yo-yo.art/ui 0.0.0-stage → 0.1.0

package/dist/index.mjs

@@ -0,0 +1,23 @@
+import { badgeClasses } from "./components/Badge/badge-classes.mjs";
+import { Badge } from "./components/Badge/Badge.mjs";
+import "./components/Badge/index.mjs";
+import { buttonClasses } from "./components/Button/button-classes.mjs";
+import { Button } from "./components/Button/Button.mjs";
+import { ButtonLink } from "./components/Button/ButtonLink.mjs";
+import "./components/Button/index.mjs";
+import { Eyebrow } from "./components/Eyebrow/Eyebrow.mjs";
+import "./components/Eyebrow/index.mjs";
+import { iconButtonClasses } from "./components/IconButton/icon-button-classes.mjs";
+import { IconButton } from "./components/IconButton/IconButton.mjs";
+import "./components/IconButton/index.mjs";
+import { linkClasses } from "./components/Link/link-classes.mjs";
+import { Link } from "./components/Link/Link.mjs";
+import "./components/Link/index.mjs";
+import { Logo } from "./components/Logo/Logo.mjs";
+import "./components/Logo/index.mjs";
+import { panelClasses } from "./components/Panel/panel-classes.mjs";
+import { Panel } from "./components/Panel/Panel.mjs";
+import "./components/Panel/index.mjs";
+import { ThemeToggle } from "./components/ThemeToggle/ThemeToggle.mjs";
+import "./components/ThemeToggle/index.mjs";
+export { Badge, Button, ButtonLink, Eyebrow, IconButton, Link, Logo, Panel, ThemeToggle, badgeClasses, buttonClasses, iconButtonClasses, linkClasses, panelClasses };

package/dist/lib/cn.cjs

@@ -0,0 +1,5 @@
+// src/lib/cn.ts
+const cn = (...values) => values.filter((value) => Boolean(value)).join(" ");
+exports.cn = cn;
+
+//# sourceMappingURL=cn.cjs.map

package/dist/lib/cn.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.cjs","names":[],"sources":["../../src/lib/cn.ts"],"sourcesContent":["export type ClassValue = string | false | null | undefined;\n\nexport const cn = (...values: ClassValue[]): string =>\n  values.filter((value): value is string => Boolean(value)).join(\" \");\n"],"mappings":";AAEA,MAAa,MAAM,GAAG,WACpB,OAAO,QAAQ,UAA2B,QAAQ,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG"}

package/dist/lib/cn.mjs

@@ -0,0 +1,5 @@
+// src/lib/cn.ts
+const cn = (...values) => values.filter((value) => Boolean(value)).join(" ");
+export { cn };
+
+//# sourceMappingURL=cn.mjs.map

package/dist/lib/cn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.mjs","names":[],"sources":["../../src/lib/cn.ts"],"sourcesContent":["export type ClassValue = string | false | null | undefined;\n\nexport const cn = (...values: ClassValue[]): string =>\n  values.filter((value): value is string => Boolean(value)).join(\" \");\n"],"mappings":";AAEA,MAAa,MAAM,GAAG,WACpB,OAAO,QAAQ,UAA2B,QAAQ,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG"}

package/dist/scenography.css

@@ -0,0 +1,332 @@
+@layer components {
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    min-height: 2rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
+    background-color: color-mix(in oklab, var(--color-base-100) 80%, transparent);
+    color: var(--color-base-content);
+    font: inherit;
+    font-weight: 500;
+    line-height: 1.2;
+    text-align: center;
+    cursor: pointer;
+    backdrop-filter: blur(8px);
+    transition:
+      background-color 150ms ease,
+      color 150ms ease,
+      border-color 150ms ease;
+  }
+
+  .btn:hover {
+    background-color: var(--color-base-200);
+  }
+
+  .btn:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  .btn:is([type="checkbox"], [type="radio"]) {
+    appearance: none;
+  }
+
+  .btn:is([type="checkbox"], [type="radio"])[aria-label]::after {
+    content: attr(aria-label);
+  }
+
+  .btn:checked,
+  .btn-active {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-primary-content);
+  }
+
+  .btn-ghost {
+    border-color: transparent;
+    background-color: transparent;
+    backdrop-filter: none;
+  }
+
+  .btn-ghost:hover {
+    background-color: color-mix(in oklab, var(--color-base-content) 8%, transparent);
+  }
+
+  .btn-sm {
+    min-height: 1.75rem;
+    padding: 0.375rem 0.625rem;
+    font-size: 0.75rem;
+  }
+
+  .btn-xs {
+    min-height: 1.5rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.6875rem;
+  }
+
+  .btn-circle {
+    width: 2rem;
+    height: 2rem;
+    min-height: 0;
+    padding: 0;
+    border-radius: 0;
+  }
+
+  .btn-block {
+    width: 100%;
+  }
+
+  .modal {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    overflow: clip;
+  }
+
+  .modal:not([open]) {
+    display: none;
+  }
+
+  .modal[open] {
+    display: grid;
+    place-items: center;
+  }
+
+  .modal::backdrop {
+    background: transparent;
+  }
+
+  .modal-box {
+    position: relative;
+    z-index: 1;
+    width: calc(100% - 2rem);
+    max-width: 32rem;
+    max-height: calc(100dvh - 2rem);
+    overflow-y: auto;
+    padding: 1.5rem;
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
+  .modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    display: grid;
+    background-color: color-mix(in oklab, #000 60%, transparent);
+  }
+
+  .modal-backdrop button {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .tabs {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .tab {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 0.75rem;
+    border: 0;
+    border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
+    background: transparent;
+    color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    cursor: pointer;
+  }
+
+  .tab:is(input[type="radio"]) {
+    min-width: fit-content;
+  }
+
+  .tab:is(input[type="radio"])::after {
+    content: attr(aria-label);
+  }
+
+  .tab:checked {
+    border-bottom-color: var(--color-base-content);
+    color: var(--color-base-content);
+  }
+
+  .tab-content {
+    order: 1;
+    display: none;
+    width: 100%;
+  }
+
+  .tab:checked + .tab-content {
+    display: block;
+  }
+
+  .join {
+    display: inline-flex;
+    align-items: stretch;
+  }
+
+  .join > * + * {
+    margin-left: -1px;
+  }
+
+  .join-item {
+    border-radius: 0;
+  }
+
+  .label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+  }
+
+  .label:has(input) {
+    cursor: pointer;
+  }
+
+  .label-text {
+    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    font-size: 0.875rem;
+  }
+
+  .form-control {
+    display: block;
+  }
+
+  .select {
+    width: 100%;
+    padding: 0.375rem 0.625rem;
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 15%, transparent);
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+    font: inherit;
+  }
+
+  .select-sm {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+  }
+
+  .radio {
+    appearance: none;
+    position: relative;
+    display: inline-block;
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 30%, transparent);
+    border-radius: 9999px;
+    cursor: pointer;
+  }
+
+  .radio:checked {
+    border-color: var(--color-primary);
+  }
+
+  .radio:checked::before {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    border-radius: 9999px;
+    background-color: var(--color-primary);
+  }
+
+  .radio-sm {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  .toggle {
+    appearance: none;
+    position: relative;
+    flex-shrink: 0;
+    width: 2rem;
+    height: 1.125rem;
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    border-radius: 9999px;
+    background-color: var(--color-base-300);
+    cursor: pointer;
+    transition:
+      background-color 150ms ease,
+      border-color 150ms ease;
+  }
+
+  .toggle::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 2px;
+    width: 0.875rem;
+    height: 0.875rem;
+    border-radius: 9999px;
+    background-color: var(--color-base-content);
+    transform: translateY(-50%);
+    transition: left 150ms ease;
+  }
+
+  .toggle:checked {
+    border-color: var(--color-primary);
+    background-color: var(--color-primary);
+  }
+
+  .toggle:checked::before {
+    left: calc(100% - 0.875rem - 2px);
+    background-color: var(--color-primary-content);
+  }
+
+  .toggle-sm {
+    width: 1.75rem;
+    height: 1rem;
+  }
+
+  .toggle-sm::before {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .toggle-sm:checked::before {
+    left: calc(100% - 0.75rem - 2px);
+  }
+
+  .range {
+    width: 100%;
+    accent-color: var(--color-primary);
+    cursor: pointer;
+  }
+
+  .range-sm {
+    height: 1rem;
+  }
+
+  .link {
+    text-decoration-line: underline;
+  }
+
+  .link-hover {
+    text-decoration-line: none;
+  }
+
+  .link-hover:hover {
+    text-decoration-line: underline;
+  }
+}

package/dist/styles.css

@@ -0,0 +1,76 @@
+/*
+ * The package ships its compiled JS in `dist`, so Tailwind scans that folder
+ * whenever a consumer imports this file. The tokens are the same ones used by
+ * the group site: warm paper, ink, acid green and square corners.
+ */
+@source "./";
+
+@theme {
+  --font-sans:
+    "Archivo Variable", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  --color-base-100: #f7f5f0;
+  --color-base-200: #efebe3;
+  --color-base-300: #e0dbd0;
+  --color-base-content: #111111;
+  --color-primary: #111111;
+  --color-primary-content: #f7f5f0;
+  --color-secondary: #4a4741;
+  --color-secondary-content: #f7f5f0;
+  --color-accent: #d6ff3d;
+  --color-accent-content: #111111;
+  --color-neutral: #111111;
+  --color-neutral-content: #f7f5f0;
+  --color-info: #2563eb;
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-error: #dc2626;
+}
+
+[data-theme="yo-yo-dark"] {
+  --color-base-100: #000000;
+  --color-base-200: #0f0f0f;
+  --color-base-300: #1c1c1c;
+  --color-base-content: #f2f0ea;
+  --color-primary: #f2f0ea;
+  --color-primary-content: #000000;
+  --color-secondary: #a8a49c;
+  --color-secondary-content: #000000;
+  --color-accent: #d6ff3d;
+  --color-accent-content: #111111;
+  --color-neutral: #f2f0ea;
+  --color-neutral-content: #000000;
+  --color-info: #60a5fa;
+  --color-success: #4ade80;
+  --color-warning: #fbbf24;
+  --color-error: #f87171;
+}
+
+::selection {
+  background: var(--color-accent);
+  color: var(--color-accent-content);
+}
+
+/* The acid green reads on black but disappears on paper, so the letter form
+   uses a deeper green in light mode and the pure accent in dark mode. */
+.text-accent-ink {
+  color: #6f8f00;
+}
+
+[data-theme="yo-yo-dark"] .text-accent-ink {
+  color: var(--color-accent);
+}
+
+/* The identity ships a light mark and its reversed twin. */
+.logo-inverse {
+  display: none;
+}
+
+[data-theme="yo-yo-dark"] .logo-mark {
+  display: none;
+}
+
+[data-theme="yo-yo-dark"] .logo-inverse {
+  display: block;
+}

package/package.json

@@ -1,6 +1,75 @@
 {
   "name": "@yo-yo.art/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "The Grupo Yo-Yo design system: shared React components and tokens.",
+  "keywords": [
+    "design-system",
+    "react",
+    "tailwind",
+    "yo-yo"
+  ],
+  "homepage": "https://yo-yo.codeberg.page/ui/",
+  "bugs": {
+    "url": "https://codeberg.org/yo-yo/ui/issues"
+  },
+  "license": "MIT",
+  "author": "Javier López Úbeda <jlopezcur@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://codeberg.org/yo-yo/ui.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./gallery": {
+      "import": {
+        "types": "./dist/gallery.d.mts",
+        "default": "./dist/gallery.mjs"
+      },
+      "require": {
+        "types": "./dist/gallery.d.cts",
+        "default": "./dist/gallery.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./scenography.css": "./dist/scenography.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown && node scripts/copy-css.mjs",
+    "dev": "tsdown --watch",
+    "prepack": "pnpm build",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "^10.6.5",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "lucide-react": "1.24.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7"
+  },
+  "peerDependencies": {
+    "lucide-react": "^1",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=4"
+  }
+}