@schemavaults/ui 0.38.0 → 0.39.0

package/dist/components/ui/aspect-ratio/aspect-ratio.d.ts

@@ -0,0 +1,39 @@
+import { type VariantProps } from "class-variance-authority";
+import type { ComponentProps, ReactElement } from "react";
+export declare const aspectRatioPresetIds: ["square", "video", "photo", "wide", "ultrawide", "cinema", "portrait", "classic-portrait", "story"];
+export type AspectRatioPresetId = (typeof aspectRatioPresetIds)[number];
+/** Named, common aspect ratios resolved to width / height. */
+export declare const ASPECT_RATIO_PRESETS: Record<AspectRatioPresetId, number>;
+export declare const aspectRatioRadiusIds: ["none", "sm", "md", "lg", "xl", "2xl", "full"];
+export type AspectRatioRadiusId = (typeof aspectRatioRadiusIds)[number];
+export declare const aspectRatioVariants: (props?: ({
+    radius?: "sm" | "lg" | "xl" | "none" | "md" | "2xl" | "full" | null | undefined;
+    bordered?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AspectRatioProps extends Omit<ComponentProps<"div">, "ratio">, VariantProps<typeof aspectRatioVariants> {
+    /**
+     * Aspect ratio as `width / height` (e.g. `16 / 9` for widescreen).
+     * Takes precedence over `preset`. If neither is provided, defaults to `video` (16:9).
+     */
+    ratio?: number;
+    /**
+     * Named ratio preset. Use `ratio` for arbitrary values.
+     * - `square` (1:1) - avatars, tiles
+     * - `video` (16:9) - HD video / modern displays
+     * - `photo` (4:3) - classic photo
+     * - `wide` (3:2) - DSLR
+     * - `ultrawide` (21:9) - cinematic banners
+     * - `cinema` (~2.35:1) - anamorphic widescreen
+     * - `portrait` (3:4)
+     * - `classic-portrait` (2:3)
+     * - `story` (9:16) - vertical / mobile story
+     */
+    preset?: AspectRatioPresetId;
+    /** Render as the child element via Radix Slot. */
+    asChild?: boolean;
+}
+declare function AspectRatio({ className, ratio, preset, radius, bordered, asChild, style, children, ...props }: AspectRatioProps): ReactElement;
+declare namespace AspectRatio {
+    var displayName: string;
+}
+export { AspectRatio };

package/dist/components/ui/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils";
+export const aspectRatioPresetIds = [
+    "square",
+    "video",
+    "photo",
+    "wide",
+    "ultrawide",
+    "cinema",
+    "portrait",
+    "classic-portrait",
+    "story",
+];
+/** Named, common aspect ratios resolved to width / height. */
+export const ASPECT_RATIO_PRESETS = {
+    square: 1, // 1:1 - avatars, profile tiles, album art
+    video: 16 / 9, // 16:9 - HD video, modern displays
+    photo: 4 / 3, // 4:3 - classic photo / older displays
+    wide: 3 / 2, // 3:2 - DSLR photography
+    ultrawide: 21 / 9, // 21:9 - cinematic / banner heros
+    cinema: 2.35 / 1, // ~2.35:1 - anamorphic widescreen
+    portrait: 3 / 4, // 3:4 - portrait photo
+    "classic-portrait": 2 / 3, // 2:3 - portrait DSLR
+    story: 9 / 16, // 9:16 - vertical / mobile story
+};
+export const aspectRatioRadiusIds = [
+    "none",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "full",
+];
+export const aspectRatioVariants = cva("relative w-full overflow-hidden [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>video]:h-full [&>video]:w-full [&>video]:object-cover [&>iframe]:h-full [&>iframe]:w-full [&>iframe]:border-0", {
+    variants: {
+        radius: {
+            none: "rounded-none",
+            sm: "rounded-sm",
+            md: "rounded-md",
+            lg: "rounded-lg",
+            xl: "rounded-xl",
+            "2xl": "rounded-2xl",
+            full: "rounded-full",
+        },
+        bordered: {
+            true: "border border-border",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        radius: "md",
+        bordered: false,
+    },
+});
+function AspectRatio({ className, ratio, preset, radius, bordered, asChild = false, style, children, ...props }) {
+    const Comp = asChild ? Slot : "div";
+    const resolvedRatio = ratio ??
+        (preset !== undefined
+            ? ASPECT_RATIO_PRESETS[preset]
+            : ASPECT_RATIO_PRESETS.video);
+    const mergedStyle = {
+        aspectRatio: String(resolvedRatio),
+        ...style,
+    };
+    return (_jsx(Comp, { "data-slot": "aspect-ratio", "data-preset": preset, className: cn(aspectRatioVariants({ radius, bordered }), className), style: mergedStyle, ...props, children: children }));
+}
+AspectRatio.displayName = "AspectRatio";
+export { AspectRatio };
+//# sourceMappingURL=aspect-ratio.js.map

package/dist/components/ui/aspect-ratio/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.js","sourceRoot":"","sources":["../../../../src/components/ui/aspect-ratio/aspect-ratio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,QAAQ;IACR,OAAO;IACP,OAAO;IACP,MAAM;IACN,WAAW;IACX,QAAQ;IACR,UAAU;IACV,kBAAkB;IAClB,OAAO;CACoB,CAAC;AAG9B,8DAA8D;AAC9D,MAAM,CAAC,MAAM,oBAAoB,GAAwC;IACvE,MAAM,EAAE,CAAC,EAAE,0CAA0C;IACrD,KAAK,EAAE,EAAE,GAAG,CAAC,EAAE,mCAAmC;IAClD,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,uCAAuC;IACrD,IAAI,EAAE,CAAC,GAAG,CAAC,EAAE,yBAAyB;IACtC,SAAS,EAAE,EAAE,GAAG,CAAC,EAAE,kCAAkC;IACrD,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,kCAAkC;IACpD,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,uBAAuB;IACxC,kBAAkB,EAAE,CAAC,GAAG,CAAC,EAAE,sBAAsB;IACjD,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE,iCAAiC;CACjD,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,KAAK;IACL,MAAM;CACqB,CAAC;AAG9B,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CACpC,qMAAqM,EACrM;IACE,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,IAAI,EAAE,cAAc;YACpB,EAAE,EAAE,YAAY;YAChB,EAAE,EAAE,YAAY;YAChB,EAAE,EAAE,YAAY;YAChB,EAAE,EAAE,YAAY;YAChB,KAAK,EAAE,aAAa;YACpB,IAAI,EAAE,cAAc;SACyB;QAC/C,QAAQ,EAAE;YACR,IAAI,EAAE,sBAAsB;YAC5B,KAAK,EAAE,EAAE;SACV;KACF;IACD,eAAe,EAAE;QACf,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,KAAK;KAChB;CACF,CACF,CAAC;AA2BF,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACS;IACjB,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACpC,MAAM,aAAa,GACjB,KAAK;QACL,CAAC,MAAM,KAAK,SAAS;YACnB,CAAC,CAAC,oBAAoB,CAAC,MAAM,CAAC;YAC9B,CAAC,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAElC,MAAM,WAAW,GAAkB;QACjC,WAAW,EAAE,MAAM,CAAC,aAAa,CAAC;QAClC,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,iBACO,cAAc,iBACX,MAAM,EACnB,SAAS,EAAE,EAAE,CAAC,mBAAmB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,CAAC,EACnE,KAAK,EAAE,WAAW,KACd,KAAK,YAER,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC;AACD,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/ui/aspect-ratio/index.d.ts

@@ -0,0 +1,3 @@
+export { AspectRatio, aspectRatioVariants, aspectRatioPresetIds, aspectRatioRadiusIds, ASPECT_RATIO_PRESETS, } from "./aspect-ratio";
+export type * from "./aspect-ratio";
+export { AspectRatio as default } from "./aspect-ratio";

package/dist/components/ui/aspect-ratio/index.js

@@ -0,0 +1,3 @@
+export { AspectRatio, aspectRatioVariants, aspectRatioPresetIds, aspectRatioRadiusIds, ASPECT_RATIO_PRESETS, } from "./aspect-ratio";
+export { AspectRatio as default } from "./aspect-ratio";
+//# sourceMappingURL=index.js.map

package/dist/components/ui/aspect-ratio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/aspect-ratio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/ui/index.d.ts

@@ -142,3 +142,5 @@ export * from "./number-ticker";
 export type * from "./number-ticker";
 export * from "./sparkline";
 export type * from "./sparkline";
+export * from "./aspect-ratio";
+export type * from "./aspect-ratio";

package/dist/components/ui/index.js

@@ -70,4 +70,5 @@ export * from "./chip";
 export * from "./tags-input";
 export * from "./number-ticker";
 export * from "./sparkline";
+export * from "./aspect-ratio";
 //# sourceMappingURL=index.js.map

package/dist/components/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,aAAa,CAAC;AAG5B,cAAc,SAAS,CAAC;AAGxB,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AAGxB,cAAc,mBAAmB,CAAC;AAGlC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC;AAGxB,cAAc,kBAAkB,CAAC;AAGjC,cAAc,aAAa,CAAC;AAG5B,cAAc,kCAAkC,CAAC;AAGjD,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAExB,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,aAAa,CAAC;AAG5B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,WAAW,CAAC;AAG1B,cAAc,mBAAmB,CAAC;AAGlC,cAAc,UAAU,CAAC;AAGzB,cAAc,WAAW,CAAC;AAG1B,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,cAAc,CAAC;AAG7B,cAAc,eAAe,CAAC;AAG9B,cAAc,YAAY,CAAC;AAG3B,cAAc,2BAA2B,CAAC;AAG1C,cAAc,kBAAkB,CAAC;AAGjC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,cAAc,CAAC;AAG7B,cAAc,cAAc,CAAC;AAG7B,cAAc,OAAO,CAAC;AAGtB,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,QAAQ,CAAC;AAGvB,cAAc,cAAc,CAAC;AAG7B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,aAAa,CAAC;AAG5B,cAAc,SAAS,CAAC;AAGxB,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AAGxB,cAAc,mBAAmB,CAAC;AAGlC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC;AAGxB,cAAc,kBAAkB,CAAC;AAGjC,cAAc,aAAa,CAAC;AAG5B,cAAc,kCAAkC,CAAC;AAGjD,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAExB,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,aAAa,CAAC;AAG5B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,WAAW,CAAC;AAG1B,cAAc,mBAAmB,CAAC;AAGlC,cAAc,UAAU,CAAC;AAGzB,cAAc,WAAW,CAAC;AAG1B,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,cAAc,CAAC;AAG7B,cAAc,eAAe,CAAC;AAG9B,cAAc,YAAY,CAAC;AAG3B,cAAc,2BAA2B,CAAC;AAG1C,cAAc,kBAAkB,CAAC;AAGjC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,cAAc,CAAC;AAG7B,cAAc,cAAc,CAAC;AAG7B,cAAc,OAAO,CAAC;AAGtB,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,QAAQ,CAAC;AAGvB,cAAc,cAAc,CAAC;AAG7B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,aAAa,CAAC;AAG5B,cAAc,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schemavaults/ui",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "private": false,
   "license": "UNLICENSED",
   "description": "React.js UI components for SchemaVaults frontend applications",