@micazoyolli/foundation 0.1.2

package/README.md

@@ -0,0 +1,92 @@
+# @micazoyolli/foundation
+
+Paquete público de fundamentos compartidos no visuales para los proyectos de Micazoyolli. Centraliza utilidades pequeñas y estables para mantener consistencia entre repos independientes sin introducir componentes visuales ni decisiones de marca.
+
+## Características
+
+- Tokens SCSS base para spacing, radius, z-index y motion
+- Breakpoints y mixins responsive reutilizables
+- Helper `cx` para composición segura de clases
+- Guards TypeScript pequeños para validaciones comunes
+- Utilidades básicas de accesibilidad y protección selectiva de media
+- Exports separados para TypeScript y SCSS
+- Consumo desde npm sin credenciales especiales
+
+## Tecnologías
+
+- TypeScript
+- SCSS
+- Yarn 1
+- npm
+
+## Estructura
+
+```txt
+src/
+├── a11y/
+├── scss/
+│   ├── mixins/
+│   └── tokens/
+├── utils/
+└── index.ts
+
+examples/
+dist/
+```
+
+## Scripts
+
+```bash
+yarn install
+yarn build
+yarn clean
+yarn prepack
+```
+
+## Instalación
+
+```bash
+yarn add @micazoyolli/foundation
+```
+
+## Uso
+
+TypeScript:
+
+```ts
+import { cx, isElement } from '@micazoyolli/foundation';
+
+const className = cx('button', isActive && 'button--active');
+
+if (isElement(event.target)) {
+  event.target.closest('[data-protected-media]');
+}
+```
+
+SCSS:
+
+```scss
+@use '@micazoyolli/foundation/scss' as foundation;
+
+.section {
+  padding: foundation.$space-6;
+  border-radius: foundation.$radius-md;
+
+  @include foundation.down(foundation.$breakpoint-md) {
+    padding: foundation.$space-4;
+  }
+}
+```
+
+## Buenas prácticas
+
+- Mantener el paquete pequeño y estrictamente no visual
+- Evitar tokens de marca, layouts, componentes React, SEO o tipografías finales
+- Publicar cambios mediante versiones semánticas
+- Exportar solo utilidades compartibles entre repos independientes
+- Evitar dependencias UI pesadas
+- Adoptar el paquete gradualmente en cada proyecto
+
+## Autora
+
+Una creación de [`<micazoyolli />✨`](https://nadia.dev)

package/dist/a11y/index.d.ts

@@ -0,0 +1,3 @@
+export { isElement, isHTMLElement } from './targets';
+export { KEYBOARD_KEYS, isKeyboardActivation } from './keyboard';
+export { PROTECTED_MEDIA_SELECTOR, isProtectedMediaTarget, } from './protectedMedia';

package/dist/a11y/index.js

@@ -0,0 +1,3 @@
+export { isElement, isHTMLElement } from './targets';
+export { KEYBOARD_KEYS, isKeyboardActivation } from './keyboard';
+export { PROTECTED_MEDIA_SELECTOR, isProtectedMediaTarget, } from './protectedMedia';

package/dist/a11y/keyboard.d.ts

@@ -0,0 +1,6 @@
+export declare const KEYBOARD_KEYS: {
+    readonly enter: "Enter";
+    readonly space: " ";
+    readonly escape: "Escape";
+};
+export declare const isKeyboardActivation: (event: Pick<KeyboardEvent, "key">) => boolean;

package/dist/a11y/keyboard.js

@@ -0,0 +1,6 @@
+export const KEYBOARD_KEYS = {
+    enter: 'Enter',
+    space: ' ',
+    escape: 'Escape',
+};
+export const isKeyboardActivation = (event) => event.key === KEYBOARD_KEYS.enter || event.key === KEYBOARD_KEYS.space;

package/dist/a11y/protectedMedia.d.ts

@@ -0,0 +1,2 @@
+export declare const PROTECTED_MEDIA_SELECTOR: string;
+export declare const isProtectedMediaTarget: (target: EventTarget | null) => boolean;

package/dist/a11y/protectedMedia.js

@@ -0,0 +1,9 @@
+import { isElement } from './targets';
+export const PROTECTED_MEDIA_SELECTOR = [
+    'img',
+    'svg',
+    'canvas',
+    'video',
+    '[data-protected-media]',
+].join(',');
+export const isProtectedMediaTarget = (target) => isElement(target) && Boolean(target.closest(PROTECTED_MEDIA_SELECTOR));

package/dist/a11y/targets.d.ts

@@ -0,0 +1,2 @@
+export declare const isElement: (target: EventTarget | null) => target is Element;
+export declare const isHTMLElement: (target: EventTarget | null) => target is HTMLElement;

package/dist/a11y/targets.js

@@ -0,0 +1,2 @@
+export const isElement = (target) => target instanceof Element;
+export const isHTMLElement = (target) => target instanceof HTMLElement;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { KEYBOARD_KEYS, PROTECTED_MEDIA_SELECTOR, isElement, isHTMLElement, isKeyboardActivation, isProtectedMediaTarget, } from './a11y';
+export { cx } from './utils/cx';
+export type { ClassValue } from './utils/cx';
+export { isNonEmptyString } from './utils/guards';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { KEYBOARD_KEYS, PROTECTED_MEDIA_SELECTOR, isElement, isHTMLElement, isKeyboardActivation, isProtectedMediaTarget, } from './a11y';
+export { cx } from './utils/cx';
+export { isNonEmptyString } from './utils/guards';

package/dist/scss/index.scss

@@ -0,0 +1,6 @@
+@forward 'mixins/responsive';
+@forward 'tokens/breakpoints';
+@forward 'tokens/motion';
+@forward 'tokens/radius';
+@forward 'tokens/spacing';
+@forward 'tokens/z-index';

package/dist/scss/mixins/_responsive.scss

@@ -0,0 +1,17 @@
+@mixin down($breakpoint) {
+  @media (max-width: $breakpoint) {
+    @content;
+  }
+}
+
+@mixin up($breakpoint) {
+  @media (min-width: $breakpoint) {
+    @content;
+  }
+}
+
+@mixin between($min-breakpoint, $max-breakpoint) {
+  @media (min-width: $min-breakpoint) and (max-width: $max-breakpoint) {
+    @content;
+  }
+}

package/dist/scss/tokens/_breakpoints.scss

@@ -0,0 +1,5 @@
+$breakpoint-xs: 320px;
+$breakpoint-sm: 425px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 1024px;
+$breakpoint-xl: 1280px;

package/dist/scss/tokens/_motion.scss

@@ -0,0 +1,14 @@
+$duration-instant: 75ms;
+$duration-fast: 150ms;
+$duration-base: 250ms;
+$duration-slow: 400ms;
+
+$ease-standard: cubic-bezier(0.2, 0, 0, 1);
+$ease-enter: cubic-bezier(0, 0, 0.2, 1);
+$ease-exit: cubic-bezier(0.4, 0, 1, 1);
+
+@mixin reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}

package/dist/scss/tokens/_radius.scss

@@ -0,0 +1,7 @@
+$radius-none: 0;
+$radius-xs: 4px;
+$radius-sm: 6px;
+$radius-md: 8px;
+$radius-lg: 12px;
+$radius-xl: 16px;
+$radius-pill: 999px;

package/dist/scss/tokens/_spacing.scss

@@ -0,0 +1,11 @@
+$space-0: 0;
+$space-1: 0.25rem;
+$space-2: 0.5rem;
+$space-3: 0.75rem;
+$space-4: 1rem;
+$space-5: 1.5rem;
+$space-6: 2rem;
+$space-7: 3rem;
+$space-8: 4rem;
+$space-9: 6rem;
+$space-10: 8rem;

package/dist/scss/tokens/_z-index.scss

@@ -0,0 +1,7 @@
+$z-base: 0;
+$z-raised: 1;
+$z-sticky: 10;
+$z-header: 100;
+$z-overlay: 1000;
+$z-modal: 1100;
+$z-toast: 1200;

package/dist/utils/cx.d.ts

@@ -0,0 +1,2 @@
+export type ClassValue = string | false | null | undefined;
+export declare const cx: (...classes: ClassValue[]) => string;

package/dist/utils/cx.js

@@ -0,0 +1 @@
+export const cx = (...classes) => classes.filter(Boolean).join(' ');

package/dist/utils/guards.d.ts

@@ -0,0 +1 @@
+export declare const isNonEmptyString: (value: unknown) => value is string;

package/dist/utils/guards.js

@@ -0,0 +1 @@
+export const isNonEmptyString = (value) => typeof value === 'string' && value.trim().length > 0;

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@micazoyolli/foundation",
+  "version": "0.1.2",
+  "description": "Fundamentos compartidos no visuales para los proyectos de Micazoyolli.",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./scss": {
+      "sass": "./dist/scss/index.scss"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && yarn copy-scss",
+    "clean": "rm -rf dist",
+    "copy-scss": "rsync -av --include='*/' --include='*.scss' --exclude='*' src/scss/ dist/scss/",
+    "prepack": "yarn build"
+  },
+  "devDependencies": {
+    "typescript": "6.0.3"
+  },
+  "packageManager": "yarn@1.22.22"
+}