@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/editorial-card.d.ts

@@ -0,0 +1,27 @@
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+//#region src/editorial-card.d.ts
+declare const editorialCardVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type EditorialCardProps = useRender.ComponentProps<"article"> & VariantProps<typeof editorialCardVariants>;
+declare function EditorialCard({ className, render, size, ...props }: EditorialCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function EditorialCardHeader({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function EditorialCardMeta({ className, render, ...props }: useRender.ComponentProps<"p">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function EditorialCardTitle({ className, render, ...props }: useRender.ComponentProps<"h3">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function EditorialCardMedia({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function EditorialCardCategory({ className, render, ...props }: useRender.ComponentProps<"span">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function EditorialCardPlayButton({ className, render, children, "aria-label": ariaLabel, ...props }: useRender.ComponentProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type EditorialCardAttributionProps = Omit<useRender.ComponentProps<"div">, "children"> & {
+  authorName: string;
+  brand?: {
+    name?: string;
+    photo?: string;
+  };
+  prefix?: string;
+};
+declare function EditorialCardAttribution({ authorName, brand, className, prefix, render, ...props }: EditorialCardAttributionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function EditorialCardExcerpt({ className, render, ...props }: useRender.ComponentProps<"p">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function EditorialCardLink({ className, render, children, ...props }: useRender.ComponentProps<"a">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { EditorialCard, EditorialCardAttribution, type EditorialCardAttributionProps, EditorialCardCategory, EditorialCardExcerpt, EditorialCardHeader, EditorialCardLink, EditorialCardMedia, EditorialCardMeta, EditorialCardPlayButton, type EditorialCardProps, EditorialCardTitle, editorialCardVariants };

package/dist/editorial-card.js

@@ -0,0 +1,144 @@
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { buttonVariants } from "./button.js";
+import { ArrowRight, Play } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+//#region src/editorial-card.tsx
+const editorialCardVariants = cva("group/editorial-card relative flex w-full min-w-0 flex-col overflow-hidden rounded-2xl border border-line-subtle bg-surface text-fg-primary transition-[background-color,border-color,box-shadow]", {
+	variants: { size: {
+		sm: "gap-2.5 p-4",
+		md: "gap-3 p-4.5",
+		lg: "gap-3.5 p-5"
+	} },
+	defaultVariants: { size: "md" }
+});
+function EditorialCard({ className, render, size = "md", ...props }) {
+	return useRender({
+		defaultTagName: "article",
+		props: mergeProps({ className: cn(editorialCardVariants({ size }), className) }, props),
+		render,
+		state: {
+			slot: "editorial-card",
+			size
+		}
+	});
+}
+function EditorialCardHeader({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("flex min-w-0 flex-col gap-2 group-data-[size=lg]/editorial-card:gap-3", className) }, props),
+		render,
+		state: { slot: "editorial-card-header" }
+	});
+}
+function getInitials(name) {
+	return name.trim().split(/\s+/).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("");
+}
+function EditorialCardMeta({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "p",
+		props: mergeProps({ className: cn("text-fg-secondary text-gdt-xs group-data-[size=lg]/editorial-card:text-gdt-sm", className) }, props),
+		render,
+		state: { slot: "editorial-card-meta" }
+	});
+}
+function EditorialCardTitle({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "h3",
+		props: mergeProps({ className: cn("text-fg-primary text-gdt-md font-extrabold group-data-[size=md]/editorial-card:text-gdt-lg", "group-data-[size=lg]/editorial-card:text-gdt-h5", className) }, props),
+		render,
+		state: { slot: "editorial-card-title" }
+	});
+}
+function EditorialCardMedia({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("relative isolate flex min-w-0 items-center justify-center overflow-hidden rounded-xl bg-surface-raised", "min-h-28 group-data-[size=md]/editorial-card:min-h-40 group-data-[size=lg]/editorial-card:min-h-56", "[&>img]:absolute [&>img]:inset-0 [&>img]:size-full [&>img]:object-cover", className) }, props),
+		render,
+		state: { slot: "editorial-card-media" }
+	});
+}
+function EditorialCardCategory({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({ className: cn("absolute top-2 left-2 z-10 inline-flex w-fit items-center rounded-full bg-surface-brand px-2 py-1", "text-gdt-capitalized font-bold text-fg-on-brand uppercase", "group-data-[size=lg]/editorial-card:top-3 group-data-[size=sm]/editorial-card:left-3 group-data-[size=sm]/editorial-card:py-0.5 group-data-[size=lg]/editorial-card:px-3", className) }, props),
+		render,
+		state: { slot: "editorial-card-category" }
+	});
+}
+function EditorialCardPlayButton({ className, render, children, "aria-label": ariaLabel = "Play media", ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			"aria-label": ariaLabel,
+			className: cn("absolute top-1/2 left-1/2 z-10 -translate-x-1/2 -translate-y-1/2 active:-translate-y-1/2", buttonVariants({
+				variant: "glass-overlay",
+				size: "icon-lg"
+			}), "size-12 group-data-[size=md]/editorial-card:size-16 group-data-[size=lg]/editorial-card:size-20", "[&>svg]:ml-1 [&>svg]:size-5 group-data-[size=md]/editorial-card:[&>svg]:size-7 group-data-[size=lg]/editorial-card:[&>svg]:size-8", className),
+			children: children ?? /* @__PURE__ */ jsx(Play, {
+				"aria-hidden": "true",
+				fill: "currentColor"
+			})
+		}, props),
+		render,
+		state: { slot: "editorial-card-play-button" }
+	});
+}
+function EditorialCardAttribution({ authorName, brand, className, prefix = "By", render, ...props }) {
+	const brandName = brand?.name?.trim();
+	const brandPhoto = brand?.photo;
+	const showBrandAvatar = Boolean(brandName || brandPhoto);
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			className: cn("flex min-w-0 items-center gap-2 text-gdt-xs text-fg-secondary", "group-data-[size=lg]/editorial-card:text-gdt-sm", className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+				prefix ? /* @__PURE__ */ jsx("span", { children: prefix }) : null,
+				showBrandAvatar ? /* @__PURE__ */ jsxs(Avatar, {
+					size: "sm",
+					className: "size-6 group-data-[size=lg]/editorial-card:size-7",
+					children: [brandPhoto ? /* @__PURE__ */ jsx(AvatarImage, {
+						alt: brandName ?? "",
+						src: brandPhoto
+					}) : null, brandName ? /* @__PURE__ */ jsx(AvatarFallback, {
+						className: "text-gdt-capitalized bg-surface-brand text-fg-on-brand",
+						children: getInitials(brandName)
+					}) : null]
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate font-bold text-fg-primary",
+					children: authorName
+				})
+			] })
+		}, props),
+		render,
+		state: { slot: "editorial-card-attribution" }
+	});
+}
+function EditorialCardExcerpt({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "p",
+		props: mergeProps({ className: cn("line-clamp-3 text-gdt-xs text-fg-secondary group-data-[size=md]/editorial-card:text-gdt-md group-data-[size=lg]/editorial-card:text-gdt-lg", className) }, props),
+		render,
+		state: { slot: "editorial-card-excerpt" }
+	});
+}
+function EditorialCardLink({ className, render, children, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({
+			className: cn("inline-flex w-fit items-center gap-gdt-sm text-gdt-xs font-bold text-fg-brand underline underline-offset-2", "group-data-[size=lg]/editorial-card:text-gdt-sm hover:opacity-80 focus-visible:outline-none", "focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ArrowRight, {
+				"aria-hidden": "true",
+				className: "size-5 shrink-0"
+			}), /* @__PURE__ */ jsx("span", { children })] })
+		}, props),
+		render,
+		state: { slot: "editorial-card-link" }
+	});
+}
+//#endregion
+export { EditorialCard, EditorialCardAttribution, EditorialCardCategory, EditorialCardExcerpt, EditorialCardHeader, EditorialCardLink, EditorialCardMedia, EditorialCardMeta, EditorialCardPlayButton, EditorialCardTitle, editorialCardVariants };

package/dist/empty-state.d.ts

@@ -1,17 +1,16 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/empty-state.d.ts
 declare function Empty({ className, variant, ...props }: React.ComponentProps<"div"> & {
-    variant?: "filled" | "outline" | "default";
+  variant?: "filled" | "outline" | "default";
 }): React.JSX.Element;
 declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const emptyMediaVariants: (props?: ({
-    variant?: "default" | "icon" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): React.JSX.Element;
 declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
 declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-
-export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
+//#endregion
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/empty-state.js

@@ -1,146 +1,59 @@
-// src/components/ui/empty-state.tsx
-import { cva } from "class-variance-authority";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/empty-state.tsx
+import { t as cn } from "./cn-BI_4DMBf.js";
 import { jsx } from "react/jsx-runtime";
-function Empty({
-  className,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "empty",
-      className: cn(
-        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-gdt-xl rounded-2xl p-gdt-2xl text-center text-balance",
-        variant === "filled" && "bg-surface-raised border border-line-subtle",
-        variant === "outline" && "border border-line",
-        className
-      ),
-      ...props
-    }
-  );
+import { cva } from "class-variance-authority";
+//#region src/empty-state.tsx
+function Empty({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty",
+		className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-gdt-xl rounded-2xl p-gdt-2xl text-center text-balance", variant === "filled" && "bg-surface-raised border border-line-subtle", variant === "outline" && "border border-line", className),
+		...props
+	});
 }
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "empty-header",
-      className: cn(
-        "flex w-full max-w-95 flex-col items-center gap-gdt-sm",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-header",
+		className: cn("flex w-full max-w-95 flex-col items-center gap-gdt-sm", className),
+		...props
+	});
 }
-var emptyMediaVariants = cva(
-  "mb-gdt-sm flex shrink-0 items-center justify-center text-fg-brand [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "size-24 rounded-full bg-surface-brand-subtle [&_svg:not([class*='size-'])]:size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function EmptyMedia({
-  className,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "empty-media",
-      "data-variant": variant,
-      className: cn(emptyMediaVariants({ variant, className })),
-      ...props
-    }
-  );
+const emptyMediaVariants = cva("mb-gdt-sm flex shrink-0 items-center justify-center text-fg-brand [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "size-24 rounded-full bg-surface-brand-subtle [&_svg:not([class*='size-'])]:size-10"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function EmptyMedia({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-media",
+		"data-variant": variant,
+		className: cn(emptyMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
 }
 function EmptyTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "empty-title",
-      className: cn(
-        "text-gdt-h4 font-extrabold tracking-tight text-fg-primary",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-title",
+		className: cn("text-gdt-h4 font-extrabold tracking-tight text-fg-primary", className),
+		...props
+	});
 }
 function EmptyDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "empty-description",
-      className: cn(
-        "max-w-95 text-gdt-md font-normal text-fg-secondary [&>a]:font-semibold [&>a]:text-fg-brand [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-fg-primary",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "empty-description",
+		className: cn("max-w-95 text-gdt-md font-normal text-fg-secondary [&>a]:font-semibold [&>a]:text-fg-brand [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-fg-primary", className),
+		...props
+	});
 }
 function EmptyContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "empty-content",
-      className: cn(
-        "flex w-full max-w-95 min-w-0 flex-col items-center justify-center gap-gdt-sm text-gdt-sm text-balance sm:flex-row [&_[data-slot=button]]:w-full sm:[&_[data-slot=button]]:w-auto",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-content",
+		className: cn("flex w-full max-w-95 min-w-0 flex-col items-center justify-center gap-gdt-sm text-gdt-sm text-balance sm:flex-row [&_[data-slot=button]]:w-full sm:[&_[data-slot=button]]:w-auto", className),
+		...props
+	});
 }
-export {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle
-};
-//# sourceMappingURL=empty-state.js.map
+//#endregion
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/field.d.ts

@@ -1,29 +1,27 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import * as React$1 from 'react';
-import { VariantProps } from 'class-variance-authority';
-import { Label } from './label.js';
-
-declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): React$1.JSX.Element;
+import { Label } from "./label.js";
+import { VariantProps } from "class-variance-authority";
+//#region src/field.d.ts
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react").JSX.Element;
 declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
-    variant?: "legend" | "label";
-}): React$1.JSX.Element;
-declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+  variant?: "legend" | "label";
+}): import("react").JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare const fieldVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Field({ className, orientation, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): React$1.JSX.Element;
-declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
-declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): React$1.JSX.Element;
-declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
-declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): React$1.JSX.Element;
+  orientation?: "horizontal" | "responsive" | "vertical" | null | undefined;
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Field({ className, orientation, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react").JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
 declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
-    children?: React.ReactNode;
-}): React$1.JSX.Element;
+  children?: React.ReactNode;
+}): import("react").JSX.Element;
 declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
-    errors?: Array<{
-        message?: string;
-    } | undefined>;
-}): React$1.JSX.Element | null;
-
-export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
+  errors?: Array<{
+    message?: string;
+  } | undefined>;
+}): import("react").JSX.Element | null;
+//#endregion
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };