@yatoday/astro-ui 0.0.2

package/components/WidgetWrapper/WidgetWrapper.astro

@@ -0,0 +1,31 @@
+---
+import { twMerge } from 'tailwind-merge';
+import type { WidgetWrapperProps as Props } from './types';
+import Background from '../Background/Background.astro';
+
+const { id, isDark = false, containerClass = '', bg, as = 'section' } = Astro.props;
+
+const WrapperTag = as;
+---
+
+<WrapperTag class="relative" {...id ? { id } : {}}>
+  <!-- WrapperTag: bg -z-[1] -->
+  <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+    <slot name="bg">
+      {bg ? <Fragment set:html={bg} /> : <Background isDark={isDark} />}
+    </slot>
+  </div>
+
+  <!-- WrapperTag: content -->
+  <div
+    class:list={[
+      twMerge(
+        'relative mx-auto max-w-7xl 2xl:max-w-[96rem] px-4 md:px-6 py-12 md:py-16 lg:py-20 text-default',
+        containerClass
+      ),
+      { dark: isDark },
+    ]}
+  >
+    <slot />
+  </div>
+</WrapperTag>

package/components/WidgetWrapper/WidgetWrapper.ts

@@ -0,0 +1,6 @@
+import type { HTMLTag } from 'astro/types';
+
+export type Card0Props = {
+  as?: HTMLTag;
+  classes?: Record<string, string>;
+};

package/components/WidgetWrapper/types.ts

@@ -0,0 +1,10 @@
+import type { HTMLTag } from 'astro/types';
+
+export type WidgetWrapperProps = {
+  containerClass?: string;
+  ['as']?: HTMLTag;
+  id?: string;
+  isDark?: boolean;
+  bg?: string;
+  classes?: Record<string, string | Record<string, string>>;
+};

package/index.d.ts

@@ -0,0 +1,180 @@
+
+export type Gap = 'none'
+    | 'xxs'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'default'
+    | 'lg'
+    | 'xl'
+    | 'xl2'
+    | 'xl3'
+    | 'xl4'
+    | 'xl5'
+    | ''
+
+export type VerticalAlignment = 'center'
+    | 'start'
+    | 'end'
+    | 'baseline'
+    | 'stretch'
+    | ''
+
+export type HorizontalAlignment = 'center'
+    | 'start'
+    | 'end'
+    | 'between'
+    | 'around'
+    | 'evenly'
+    | 'stretch'
+    | ''
+
+export type Direction = 'row'
+    | 'column'
+    | 'row-reverse'
+    | 'column-reverse'
+    | ''
+
+export type Wrap = 'wrap'
+    | 'nowrap'
+    | 'wrap-reverse'
+    | ''
+
+export type Column = (2 | 3) | {
+    default?: 2 | 3
+    xs?: 2 | 3 | 4
+    sm?: 2 | 3 | 4
+    md?: 2 | 3 | 4 | 5 | 6
+    lg?: 2 | 3 | 4 | 5 | 6 | 7 | 8
+} | null
+
+export type Responsive<T> = T | {
+    default?: T
+    xs?: T
+    sm?: T
+    md?: T
+    lg?: T
+}
+
+export type Alignment = {
+    horizontal?: HorizontalAlignment
+    vertical?: VerticalAlignment
+}
+
+export type getLayoutClassesConfig = {
+    gap?: Responsive<Gap>
+    alignment?: Responsive<Alignment>
+    direction?: Responsive<Direction>
+    wrap?: Responsive<Wrap>
+}
+
+export type ModalCallback = {
+    trigger: Element | null
+    modal: HTMLElement
+}
+
+export type Modal = {
+    trigger: string
+    modal: string
+    onOpen?: (args: ModalCallback) => unknown
+    onClose?: (args: ModalCallback) => unknown
+}
+
+export type PopoverPosition = 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+
+export type PopoverCallback = {
+    trigger: HTMLElement
+    popover: HTMLElement
+    position: PopoverPosition | undefined
+}
+
+export type Popover = {
+    trigger: string
+    popover: string
+    position?: PopoverPosition
+    offset?: number
+    closeOnBlur?: boolean
+    closeOnEsc?: boolean
+    onOpen?: (args: PopoverCallback) => unknown
+    onClose?: (args: PopoverCallback) => unknown
+}
+
+export type Toast = {
+    element: string
+    timeout?: number
+    title?: string
+    content?: string
+    position?: 'bottom-left'
+        | 'top-left'
+        | 'top-right'
+        | 'bottom-full'
+        | 'top-full'
+        | null
+}
+
+declare module 'yt-astro-ui' {
+    export const bodyFreeze: (freeze: boolean) => void
+    export const classNames: (classes: any[]) => string
+
+    export const setCookie: (name: string, value: string, days: number) => void
+    export const getCookie: (name: string) => string | null
+    export const removeCookie: (name: string) => void
+
+    export const debounce: <T extends (...args: any[]) => any>(
+        fn: T,
+        waitFor?: number
+    ) => {
+        (...args: Parameters<T>): void
+        cancel: () => void
+    }
+
+    export const get: (selector: string, all?: boolean) => Element | NodeListOf<Element> | null
+    export const on: (
+        selector: string | HTMLElement | Document,
+        event: string,
+        callback: any,
+        all?: boolean
+    ) => void
+
+    export const dispatch: (event: string, detail: unknown) => void
+    export const listen: (event: string, callback: (e: any) => unknown) => {
+        remove: () => void
+    }
+
+    export const getLayoutClasses: (config: getLayoutClassesConfig) => string
+
+    export const clamp: (num: number, min: number, max: number) => number
+    export const lerp: (start: number, end: number, value: number) => number
+    export const invlerp: (start: number, end: number, value: number) => number
+    export const interpolate: (
+        value: number,
+        input: [start: number, end: number],
+        output: [start: number, end: number]
+    ) => number
+
+    export const modal: (config: Modal | string) => {
+        open: () => void
+        remove: () => void
+    } | void
+    export const closeModal: (modal: string) => void
+
+    export const popover: (config: Popover) => {
+        remove: () => void
+    } | void
+    export const closePopover: (selector: string) => void
+
+    export const setDefaultTimeout: (time: number) => number
+    export const toast: (config: Toast | string) => void
+    export const hideToast: (element: string) => void
+}

package/index.js

@@ -0,0 +1,6 @@
+export * from './utils/css.ts'
+export * from './utils/images-optimization.ts'
+export * from './utils/images.ts'
+export * from './utils/index.ts'
+export * from './utils/permalinks.ts'
+export * from './utils/utils.ts'

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@yatoday/astro-ui",
+  "type": "module",
+  "version": "0.0.2",
+  "scripts": {
+    "prepare": "husky",
+    "pre-commit": "lint-staged",
+    "dev": "astro dev",
+    "build": "astro check && astro build",
+    "build:package": "node scripts/build.js",
+    "build:local": "node scripts/build.js --local",
+    "pub": "npm run build:package && cd dist && npm publish --access public",
+    "check": "npm run check:astro && npm run check:eslint && npm run check:prettier",
+    "check:astro": "astro check",
+    "check:eslint": "eslint .",
+    "check:prettier": "prettier --check .",
+    "fix": "npm run fix:eslint && npm run fix:prettier",
+    "fix:eslint": "eslint --fix .",
+    "fix:prettier": "prettier -w .",
+    "create-component": "node scripts/createComponent.js"
+  },
+  "dependencies": {
+    "lodash.merge": "^4.6.2",
+    "limax": "4.1.0",
+    "unpic": "^3.22.0",
+    "photoswipe": "^5.4.4",
+    "swiper": "^11.2.5"
+  },
+  "devDependencies": {
+    "@astrojs/check": "0.9.4",
+    "@astrojs/mdx": "^4.1.0",
+    "@astrojs/node": "^9.1.2",
+    "@astrojs/partytown": "^2.1.4",
+    "@astrojs/svelte": "^7.0.5",
+    "@eslint/js": "9.18.0",
+    "@tailwindcss/vite": "^4.0.12",
+    "@types/js-yaml": "^4.0.9",
+    "@typescript-eslint/parser": "8.21.0",
+    "astro": "^5.4.2",
+    "astro-compress": "2.3.6",
+    "astro-eslint-parser": "1.1.0",
+    "astro-icon": "^1.1.5",
+    "clsx": "^2.1.1",
+    "eslint": "9.18.0",
+    "eslint-plugin-astro": "1.3.1",
+    "eslint-plugin-simple-import-sort": "12.1.1",
+    "eslint-plugin-svelte": "2.46.1",
+    "husky": "9.1.7",
+    "js-yaml": "^4.1.0",
+    "jsdom": "26.0.0",
+    "lint-staged": "15.4.2",
+    "prettier": "^3.4.2",
+    "prettier-plugin-astro": "^0.14.1",
+    "svelte": "5.20.1",
+    "svelte-eslint-parser": "0.43.0",
+    "tailwindcss": "^4.0.12",
+    "tailwind-merge": "^3.0.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "typescript": "5.7.3",
+    "typescript-eslint": "8.21.0",
+    "vite-tsconfig-paths": "5.1.4",
+    "@types/html-escaper": "^3.0.4",
+    "@types/lodash.merge": "^4.6.9",
+    "@iconify-json/tabler": "^1.2.10"
+  },
+  "exports": {
+    ".": "./index.js",
+    "./astro": "./astro.js",
+    "./svelte": "./svelte.js",
+    "./vendor-config": "./vendor-config/index.ts"
+  },
+  "files": [
+    "components",
+    "vendor-config",
+    "utils",
+    "astro.d.ts",
+    "astro.js",
+    "svelte.d.ts",
+    "svelte.js",
+    "index.js",
+    "index.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "license": "MIT",
+  "description": "A component library built for Astro and Svelte",
+  "keywords": [],
+  "homepage": "https://astro-ui.dev.yatoday.es",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/qwert2001qwert-alex/yt-astro-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/qwert2001qwert-alex/yt-astro-ui/issues"
+  },
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx,svelte,astro}": "eslint src/**/*"
+  }
+}

package/svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Component } from 'svelte'
+import type { SvelteAnalyticsProps as YtSvelteAnalyticsProps } from './components/Analytics/types'
+import type { SvelteBackgroundProps as YtSvelteBackgroundProps } from './components/Background/types'
+import type { SvelteCard0Props as YtSvelteCard0Props } from './components/Card0/types'
+import type { SvelteConditionalWrapperProps as YtSvelteConditionalWrapperProps } from './components/ConditionalWrapper/types'
+import type { SvelteDarkModeProps as YtSvelteDarkModeProps } from './components/DarkMode/types'
+import type { SvelteLayoutProps as YtSvelteLayoutProps } from './components/Layout/types'
+import type { SvelteMetadataProps as YtSvelteMetadataProps } from './components/Metadata/types'
+import type { SvelteSiteVerificationProps as YtSvelteSiteVerificationProps } from './components/SiteVerification/types'
+import type { SvelteWidgetWrapperProps as YtSvelteWidgetWrapperProps } from './components/WidgetWrapper/types'
+
+declare module '@yatoday/astro-ui/svelte' {
+  export const Analytics: Component<YtSvelteAnalyticsProps>
+	export const Background: Component<YtSvelteBackgroundProps>
+	export const Card0: Component<YtSvelteCard0Props>
+	export const ConditionalWrapper: Component<YtSvelteConditionalWrapperProps>
+	export const DarkMode: Component<YtSvelteDarkModeProps>
+	export const Layout: Component<YtSvelteLayoutProps>
+	export const Metadata: Component<YtSvelteMetadataProps>
+	export const SiteVerification: Component<YtSvelteSiteVerificationProps>
+	export const WidgetWrapper: Component<YtSvelteWidgetWrapperProps>
+
+  export type AnalyticsProps = YtSvelteAnalyticsProps
+	export type BackgroundProps = YtSvelteBackgroundProps
+	export type Card0Props = YtSvelteCard0Props
+	export type ConditionalWrapperProps = YtSvelteConditionalWrapperProps
+	export type DarkModeProps = YtSvelteDarkModeProps
+	export type LayoutProps = YtSvelteLayoutProps
+	export type MetadataProps = YtSvelteMetadataProps
+	export type SiteVerificationProps = YtSvelteSiteVerificationProps
+	export type WidgetWrapperProps = YtSvelteWidgetWrapperProps
+}

package/svelte.js

@@ -0,0 +1,19 @@
+import AnalyticsComponent from './components/Analytics/Analytics.svelte'
+import BackgroundComponent from './components/Background/Background.svelte'
+import Card0Component from './components/Card0/Card0.svelte'
+import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.svelte'
+import DarkModeComponent from './components/DarkMode/DarkMode.svelte'
+import LayoutComponent from './components/Layout/Layout.svelte'
+import MetadataComponent from './components/Metadata/Metadata.svelte'
+import SiteVerificationComponent from './components/SiteVerification/SiteVerification.svelte'
+import WidgetWrapperComponent from './components/WidgetWrapper/WidgetWrapper.svelte'
+
+export const Analytics = AnalyticsComponent
+export const Background = BackgroundComponent
+export const Card0 = Card0Component
+export const ConditionalWrapper = ConditionalWrapperComponent
+export const DarkMode = DarkModeComponent
+export const Layout = LayoutComponent
+export const Metadata = MetadataComponent
+export const SiteVerification = SiteVerificationComponent
+export const WidgetWrapper = WidgetWrapperComponent