@studiocms/ui 1.1.1 → 1.2.0

package/dist/components/Footer/footer.css

@@ -56,7 +56,7 @@ footer.sui-footer {
     padding: 2rem;
   }
 }
-@media screen and (max-width: 1280px) {
+@media screen and (max-width: 1024px) {
   .upper {
     flex-direction: column;
     gap: 2rem;

package/dist/components/Skeleton/skeleton.d.ts

@@ -1,97 +1,27 @@
 import { z } from 'astro/zod';
-export declare const SkeletonSchema: z.ZodUnion<[z.ZodObject<{
-    /**
-     * The variant of the skeleton.
-     */
+export declare const SkeletonSchema: z.ZodUnion<readonly [z.ZodObject<{
     variant: z.ZodLiteral<"text">;
-    /**
-     * The class of the skeleton. Defaults to `undefined`.
-     */
     class: z.ZodOptional<z.ZodString>;
-    /**
-     * The radius of the skeleton. Defaults to `lg`.
-     */
-    radius: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"none">, z.ZodLiteral<"sm">, z.ZodLiteral<"md">, z.ZodLiteral<"lg">]>>;
-    /**
-     * The animation of the skeleton. Defaults to `slide`.
-     */
-    animation: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"none">, z.ZodLiteral<"slide">, z.ZodLiteral<"pulse">]>>;
-    /**
-     * The width of the skeleton. Defaults to `100%`.
-     */
-    width: z.ZodOptional<z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>>;
-    /**
-     * The height of the skeleton. Defaults to `100%`.
-     */
-    height: z.ZodOptional<z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>>;
-}, "strip", z.ZodTypeAny, {
-    variant: "text";
-    width?: `${number}px` | `${number}rem` | `${number}%` | undefined;
-    height?: `${number}px` | `${number}rem` | `${number}%` | undefined;
-    class?: string | undefined;
-    radius?: "sm" | "none" | "md" | "lg" | undefined;
-    animation?: "none" | "slide" | "pulse" | undefined;
-}, {
-    variant: "text";
-    width?: `${number}px` | `${number}rem` | `${number}%` | undefined;
-    height?: `${number}px` | `${number}rem` | `${number}%` | undefined;
-    class?: string | undefined;
-    radius?: "sm" | "none" | "md" | "lg" | undefined;
-    animation?: "none" | "slide" | "pulse" | undefined;
-}>, z.ZodObject<{
+    radius: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<"none">, z.ZodLiteral<"sm">, z.ZodLiteral<"md">, z.ZodLiteral<"lg">]>>;
+    animation: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<"none">, z.ZodLiteral<"slide">, z.ZodLiteral<"pulse">]>>;
+    width: z.ZodOptional<z.ZodUnion<readonly [z.ZodCustom<`${number}px`, `${number}px`>, z.ZodCustom<`${number}rem`, `${number}rem`>, z.ZodCustom<`${number}%`, `${number}%`>]>>;
+    height: z.ZodOptional<z.ZodUnion<readonly [z.ZodCustom<`${number}px`, `${number}px`>, z.ZodCustom<`${number}rem`, `${number}rem`>, z.ZodCustom<`${number}%`, `${number}%`>]>>;
+}, z.core.$strip>, z.ZodObject<{
     class: z.ZodOptional<z.ZodString>;
-    radius: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"none">, z.ZodLiteral<"sm">, z.ZodLiteral<"md">, z.ZodLiteral<"lg">]>>;
-    animation: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"none">, z.ZodLiteral<"slide">, z.ZodLiteral<"pulse">]>>;
-    width: z.ZodOptional<z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>>;
-    height: z.ZodOptional<z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>>;
-} & {
+    radius: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<"none">, z.ZodLiteral<"sm">, z.ZodLiteral<"md">, z.ZodLiteral<"lg">]>>;
+    animation: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<"none">, z.ZodLiteral<"slide">, z.ZodLiteral<"pulse">]>>;
+    width: z.ZodOptional<z.ZodUnion<readonly [z.ZodCustom<`${number}px`, `${number}px`>, z.ZodCustom<`${number}rem`, `${number}rem`>, z.ZodCustom<`${number}%`, `${number}%`>]>>;
+    height: z.ZodOptional<z.ZodUnion<readonly [z.ZodCustom<`${number}px`, `${number}px`>, z.ZodCustom<`${number}rem`, `${number}rem`>, z.ZodCustom<`${number}%`, `${number}%`>]>>;
     variant: z.ZodLiteral<"card">;
-    direction: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"row">, z.ZodLiteral<"column">]>>;
-    hAlign: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"start">, z.ZodLiteral<"center">, z.ZodLiteral<"end">]>>;
-    vAlign: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"start">, z.ZodLiteral<"center">, z.ZodLiteral<"end">]>>;
-    gap: z.ZodOptional<z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>>;
-}, "strip", z.ZodTypeAny, {
-    variant: "card";
-    width?: `${number}px` | `${number}rem` | `${number}%` | undefined;
-    height?: `${number}px` | `${number}rem` | `${number}%` | undefined;
-    class?: string | undefined;
-    radius?: "sm" | "none" | "md" | "lg" | undefined;
-    animation?: "none" | "slide" | "pulse" | undefined;
-    direction?: "row" | "column" | undefined;
-    hAlign?: "center" | "start" | "end" | undefined;
-    vAlign?: "center" | "start" | "end" | undefined;
-    gap?: `${number}px` | `${number}rem` | `${number}%` | undefined;
-}, {
-    variant: "card";
-    width?: `${number}px` | `${number}rem` | `${number}%` | undefined;
-    height?: `${number}px` | `${number}rem` | `${number}%` | undefined;
-    class?: string | undefined;
-    radius?: "sm" | "none" | "md" | "lg" | undefined;
-    animation?: "none" | "slide" | "pulse" | undefined;
-    direction?: "row" | "column" | undefined;
-    hAlign?: "center" | "start" | "end" | undefined;
-    vAlign?: "center" | "start" | "end" | undefined;
-    gap?: `${number}px` | `${number}rem` | `${number}%` | undefined;
-}>, z.ZodObject<{
+    direction: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<"row">, z.ZodLiteral<"column">]>>;
+    hAlign: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<"start">, z.ZodLiteral<"center">, z.ZodLiteral<"end">]>>;
+    vAlign: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<"start">, z.ZodLiteral<"center">, z.ZodLiteral<"end">]>>;
+    gap: z.ZodOptional<z.ZodUnion<readonly [z.ZodCustom<`${number}px`, `${number}px`>, z.ZodCustom<`${number}rem`, `${number}rem`>, z.ZodCustom<`${number}%`, `${number}%`>]>>;
+}, z.core.$strip>, z.ZodObject<{
     class: z.ZodOptional<z.ZodString>;
-    radius: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"none">, z.ZodLiteral<"sm">, z.ZodLiteral<"md">, z.ZodLiteral<"lg">]>>;
-    animation: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"none">, z.ZodLiteral<"slide">, z.ZodLiteral<"pulse">]>>;
-} & {
-    variant: z.ZodUnion<[z.ZodLiteral<"circle">, z.ZodLiteral<"block">]>;
-    width: z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>;
-    height: z.ZodUnion<[z.ZodType<`${number}px`, z.ZodTypeDef, `${number}px`>, z.ZodType<`${number}rem`, z.ZodTypeDef, `${number}rem`>, z.ZodType<`${number}%`, z.ZodTypeDef, `${number}%`>]>;
-}, "strip", z.ZodTypeAny, {
-    width: `${number}px` | `${number}rem` | `${number}%`;
-    height: `${number}px` | `${number}rem` | `${number}%`;
-    variant: "circle" | "block";
-    class?: string | undefined;
-    radius?: "sm" | "none" | "md" | "lg" | undefined;
-    animation?: "none" | "slide" | "pulse" | undefined;
-}, {
-    width: `${number}px` | `${number}rem` | `${number}%`;
-    height: `${number}px` | `${number}rem` | `${number}%`;
-    variant: "circle" | "block";
-    class?: string | undefined;
-    radius?: "sm" | "none" | "md" | "lg" | undefined;
-    animation?: "none" | "slide" | "pulse" | undefined;
-}>]>;
+    radius: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<"none">, z.ZodLiteral<"sm">, z.ZodLiteral<"md">, z.ZodLiteral<"lg">]>>;
+    animation: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<"none">, z.ZodLiteral<"slide">, z.ZodLiteral<"pulse">]>>;
+    variant: z.ZodUnion<readonly [z.ZodLiteral<"circle">, z.ZodLiteral<"block">]>;
+    width: z.ZodUnion<readonly [z.ZodCustom<`${number}px`, `${number}px`>, z.ZodCustom<`${number}rem`, `${number}rem`>, z.ZodCustom<`${number}%`, `${number}%`>]>;
+    height: z.ZodUnion<readonly [z.ZodCustom<`${number}px`, `${number}px`>, z.ZodCustom<`${number}rem`, `${number}rem`>, z.ZodCustom<`${number}%`, `${number}%`>]>;
+}, z.core.$strip>]>;

package/dist/css/global.css

@@ -1,3 +1,2 @@
 @import "./colors.css";
-@import "./resets.css";
 @import "./radii.css";

package/dist/index.d.ts

@@ -27,6 +27,15 @@ type Options = {
      * ```
      */
     noInjectCSS?: boolean;
+    /**
+     * Disables the CSS reset. Can be manually included.
+     *
+     * @example
+     * ```ts
+     * import 'studiocms:ui/reset-css';
+     * ```
+     */
+    noInjectResetCSS?: boolean;
     /**
      * Allows the ability to add custom icons to the Icon component.
      *

package/dist/index.js

@@ -10,7 +10,12 @@ function createIconifyCollection(icons) {
   const collectionNames = [];
   const availableIcons = [];
   if (!icons) {
-    return { collections, collectionNames, integrationCollections: void 0, availableIcons };
+    return {
+      collections,
+      collectionNames,
+      integrationCollections: void 0,
+      availableIcons
+    };
   }
   for (const [prefix, collection] of Object.entries(icons)) {
     collections[prefix] = collection;
@@ -20,7 +25,12 @@ function createIconifyCollection(icons) {
     }
   }
   const integrationCollections = `export const collections = ${JSON.stringify(collections)};`;
-  return { collections, collectionNames, integrationCollections, availableIcons };
+  return {
+    collections,
+    collectionNames,
+    integrationCollections,
+    availableIcons
+  };
 }
 function integration(options = {}) {
   const { resolve } = createResolver(import.meta.url);
@@ -119,6 +129,7 @@ function integration(options = {}) {
             "studiocms:ui/version": `export default '${pkgJson.version}';`,
             // Styles
             "studiocms:ui/global-css": `import '${resolve("./css/global.css")}';`,
+            "studiocms:ui/reset-css": `import '${resolve("./css/resets.css")}';`,
             "studiocms:ui/prose": `import '${resolve("./css/prose.css")}';`,
             "studiocms:ui/custom-css": `import '${rootResolve(options.customCss ? options.customCss : "")}';`,
             // Scripts
@@ -149,6 +160,9 @@ function integration(options = {}) {
 						`
           }
         });
+        if (!options.noInjectResetCSS || !options.noInjectCSS) {
+          injectScript("page-ssr", `import 'studiocms:ui/reset-css';`);
+        }
         if (!options.noInjectCSS) {
           injectScript("page-ssr", `import 'studiocms:ui/global-css';`);
         }

package/dist/utils/headers.d.ts

@@ -1,21 +1,19 @@
-import type { AstroGlobalPartial } from 'astro';
+import type { AstroGlobal } from 'astro';
 import { z } from 'astro/zod';
 export declare const HeadConfigSchema: () => z.ZodDefault<z.ZodArray<z.ZodObject<{
-    /** Name of the HTML tag to add to `<head>`, e.g. `'meta'`, `'link'`, or `'script'`. */
-    tag: z.ZodEnum<["title", "base", "link", "style", "meta", "script", "noscript", "template"]>;
-    /** Attributes to set on the tag, e.g. `{ rel: 'stylesheet', href: '/custom.css' }`. */
-    attrs: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodString, z.ZodBoolean, z.ZodUndefined]>>>;
-    /** Content to place inside the tag (optional). */
+    tag: z.ZodEnum<{
+        base: "base";
+        link: "link";
+        meta: "meta";
+        noscript: "noscript";
+        script: "script";
+        style: "style";
+        template: "template";
+        title: "title";
+    }>;
+    attrs: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodBoolean, z.ZodUndefined]>>>;
     content: z.ZodDefault<z.ZodString>;
-}, "strip", z.ZodTypeAny, {
-    tag: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
-    attrs: Record<string, string | boolean | undefined>;
-    content: string;
-}, {
-    tag: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
-    attrs?: Record<string, string | boolean | undefined> | undefined;
-    content?: string | undefined;
-}>, "many">>;
+}, z.core.$strip>>>;
 /**
  * Default Head Tags for use with createHead() helper
  *
@@ -28,27 +26,25 @@ export declare const HeadConfigSchema: () => z.ZodDefault<z.ZodArray<z.ZodObject
  * @param canonical
  * @returns
  */
-export declare const headDefaults: (title: string, description: string, Astro: AstroGlobalPartial, ogImage: string | undefined, canonical: URL | undefined) => {
+export declare const headDefaults: (title: string, description: string, Astro: AstroGlobal, ogImage: string | undefined, canonical: URL | undefined) => {
     tag: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
     attrs?: Record<string, string | boolean | undefined> | undefined;
     content?: string | undefined;
 }[];
 export declare const HeadSchema: z.ZodDefault<z.ZodArray<z.ZodObject<{
-    /** Name of the HTML tag to add to `<head>`, e.g. `'meta'`, `'link'`, or `'script'`. */
-    tag: z.ZodEnum<["title", "base", "link", "style", "meta", "script", "noscript", "template"]>;
-    /** Attributes to set on the tag, e.g. `{ rel: 'stylesheet', href: '/custom.css' }`. */
-    attrs: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodString, z.ZodBoolean, z.ZodUndefined]>>>;
-    /** Content to place inside the tag (optional). */
+    tag: z.ZodEnum<{
+        base: "base";
+        link: "link";
+        meta: "meta";
+        noscript: "noscript";
+        script: "script";
+        style: "style";
+        template: "template";
+        title: "title";
+    }>;
+    attrs: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodBoolean, z.ZodUndefined]>>>;
     content: z.ZodDefault<z.ZodString>;
-}, "strip", z.ZodTypeAny, {
-    tag: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
-    attrs: Record<string, string | boolean | undefined>;
-    content: string;
-}, {
-    tag: "base" | "link" | "meta" | "noscript" | "script" | "style" | "template" | "title";
-    attrs?: Record<string, string | boolean | undefined> | undefined;
-    content?: string | undefined;
-}>, "many">>;
+}, z.core.$strip>>>;
 export type HeadUserConfig = z.input<ReturnType<typeof HeadConfigSchema>>;
 export type HeadConfig = z.output<ReturnType<typeof HeadConfigSchema>>;
 /**

package/dist/utils/headers.js

@@ -4,7 +4,7 @@ const HeadConfigSchema = () => z.array(
     /** Name of the HTML tag to add to `<head>`, e.g. `'meta'`, `'link'`, or `'script'`. */
     tag: z.enum(["title", "base", "link", "style", "meta", "script", "noscript", "template"]),
     /** Attributes to set on the tag, e.g. `{ rel: 'stylesheet', href: '/custom.css' }`. */
-    attrs: z.record(z.union([z.string(), z.boolean(), z.undefined()])).default({}),
+    attrs: z.record(z.string(), z.union([z.string(), z.boolean(), z.undefined()])).default({}),
     /** Content to place inside the tag (optional). */
     content: z.string().default("")
   })
@@ -14,7 +14,10 @@ const headDefaults = (title, description, Astro, ogImage, canonical) => {
     { tag: "meta", attrs: { charset: "utf-8" } },
     {
       tag: "meta",
-      attrs: { name: "viewport", content: "width=device-width, initial-scale=1" }
+      attrs: {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1"
+      }
     },
     { tag: "title", content: `${title}` },
     { tag: "meta", attrs: { name: "title", content: title } },
@@ -24,28 +27,61 @@ const headDefaults = (title, description, Astro, ogImage, canonical) => {
     // Favicon
     {
       tag: "link",
-      attrs: { rel: "apple-touch-icon", href: "/apple-touch-icon.png", sizes: "180x180" }
+      attrs: {
+        rel: "apple-touch-icon",
+        href: "/apple-touch-icon.png",
+        sizes: "180x180"
+      }
     },
     {
       tag: "link",
-      attrs: { rel: "icon", href: "/favicon-32x32.png", type: "image/png", sizes: "32x32" }
+      attrs: {
+        rel: "icon",
+        href: "/favicon-32x32.png",
+        type: "image/png",
+        sizes: "32x32"
+      }
     },
     {
       tag: "link",
-      attrs: { rel: "icon", href: "/favicon-16x16.png", type: "image/png", sizes: "16x16" }
+      attrs: {
+        rel: "icon",
+        href: "/favicon-16x16.png",
+        type: "image/png",
+        sizes: "16x16"
+      }
+    },
+    {
+      tag: "link",
+      attrs: { rel: "icon", href: "/favicon.png", type: "image/png" }
     },
-    { tag: "link", attrs: { rel: "icon", href: "/favicon.png", type: "image/png" } },
     { tag: "link", attrs: { rel: "manifest", href: "/site.webmanifest" } },
-    { tag: "link", attrs: { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: "#5bbad5" } },
+    {
+      tag: "link",
+      attrs: {
+        rel: "mask-icon",
+        href: "/safari-pinned-tab.svg",
+        color: "#5bbad5"
+      }
+    },
     { tag: "link", attrs: { rel: "shortcut icon", href: "/favicon.ico" } },
-    { tag: "meta", attrs: { name: "msapplication-TileColor", content: "#da532c" } },
-    { tag: "meta", attrs: { name: "msapplication-config", content: "/browserconfig.xml" } },
+    {
+      tag: "meta",
+      attrs: { name: "msapplication-TileColor", content: "#da532c" }
+    },
+    {
+      tag: "meta",
+      attrs: { name: "msapplication-config", content: "/browserconfig.xml" }
+    },
     { tag: "meta", attrs: { name: "theme-color", content: "#aa87f4" } },
     // OpenGraph Tags
     { tag: "meta", attrs: { property: "og:title", content: title } },
     { tag: "meta", attrs: { property: "og:type", content: "website" } },
     { tag: "meta", attrs: { property: "og:url", content: canonical?.href } },
-    { tag: "meta", attrs: { property: "og:description", content: description } },
+    {
+      tag: "meta",
+      attrs: { property: "og:description", content: description }
+    },
     { tag: "meta", attrs: { property: "og:site_name", content: title } },
     // Twitter Tags
     {
@@ -54,7 +90,10 @@ const headDefaults = (title, description, Astro, ogImage, canonical) => {
     },
     { tag: "meta", attrs: { name: "twitter:url", content: canonical?.href } },
     { tag: "meta", attrs: { name: "twitter:title", content: title } },
-    { tag: "meta", attrs: { name: "twitter:description", content: description } }
+    {
+      tag: "meta",
+      attrs: { name: "twitter:description", content: description }
+    }
   ];
   if (ogImage) {
     headDefaults2.push(

package/dist/utils/iconifyUtils.d.ts

@@ -115,7 +115,7 @@ export interface IconifyIconBuildResult {
 /**
  * Check if value should be unset. Allows multiple keywords
  */
-export declare const isUnsetKeyword: (value: unknown) => value is "unset" | "undefined" | "none";
+export declare const isUnsetKeyword: (value: unknown) => value is "undefined" | "none" | "unset";
 /**
  * Replace IDs in SVG output with unique IDs
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiocms/ui",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.",
   "repository": {
     "type": "git",
@@ -59,17 +59,17 @@
   "dependencies": {
     "@iconify-json/heroicons": "^1.2.1",
     "@iconify/types": "^2.0.0",
-    "astro-transition-event-polyfill": "^1.1.0",
-    "astro-integration-kit": "^0.19.0"
+    "astro-transition-event-polyfill": "^1.2.1",
+    "astro-integration-kit": "^0.20.0"
   },
   "peerDependencies": {
-    "astro": "^4.5 || ^5.0.0-beta.0",
-    "vite": "^5.0.0 || ^6.0.0"
+    "astro": "^4.5 || ^5.0.0-beta.0 || ^6.0.0-beta.20",
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "astro": "^5.13.8",
-    "typescript": "^5.7.2",
-    "@types/node": "^24.5.2"
+    "astro": "^6.0.0",
+    "typescript": "^5.9.3",
+    "@types/node": "^24.12.0"
   },
   "scripts": {
     "delete:dist": "node -e \"import { rmSync } from 'fs'; rmSync('./dist', { recursive: true, force: true });\"",