@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/switch.d.ts

@@ -1,15 +1,13 @@
-import * as React from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { Switch as Switch$1 } from '@base-ui/react/switch';
-import { VariantProps } from 'class-variance-authority';
-
+import { VariantProps } from "class-variance-authority";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+//#region src/switch.d.ts
 declare const switchVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SwitchSize = NonNullable<VariantProps<typeof switchVariants>["size"]>;
 type SwitchProps = Omit<Switch$1.Root.Props, "children"> & {
-    loading?: boolean;
-    size?: SwitchSize;
+  loading?: boolean;
+  size?: SwitchSize;
 };
 /**
  * Compose with the shared field primitives for label and helper text.
@@ -24,6 +22,6 @@ type SwitchProps = Omit<Switch$1.Root.Props, "children"> & {
  * </Field>
  * ```
  */
-declare function Switch({ className, disabled, loading, readOnly, size, ...props }: SwitchProps): React.JSX.Element;
-
-export { Switch, switchVariants };
+declare function Switch({ className, disabled, loading, readOnly, size, ...props }: SwitchProps): import("react").JSX.Element;
+//#endregion
+export { Switch, switchVariants };

package/dist/switch.js

@@ -1,108 +1,51 @@
-// src/components/ui/switch.tsx
-import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { jsx } from "react/jsx-runtime";
 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));
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+//#region src/switch.tsx
+const switchVariants = cva("peer group/switch relative inline-flex shrink-0 items-center rounded-full border bg-clip-padding p-0.5 transition-[background-color,border-color,box-shadow,opacity] outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-checked:border-action-primary data-checked:bg-action-primary data-unchecked:border-line data-unchecked:bg-transparent data-[loading=true]:border-action-primary data-[loading=true]:bg-action-primary data-disabled:border-line-subtle! data-disabled:bg-transparent! data-disabled:cursor-not-allowed data-disabled:opacity-60 h-6 w-10 [--switch-spinner-size:0.75rem] [--switch-thumb-size:18px] [--switch-track-width:2.5rem] group-data-[size=sm]/field:h-5 group-data-[size=sm]/field:w-8 group-data-[size=sm]/field:[--switch-spinner-size:0.625rem] group-data-[size=sm]/field:[--switch-thumb-size:14px] group-data-[size=sm]/field:[--switch-track-width:2rem] group-data-[size=md]/field:h-6 group-data-[size=md]/field:w-10 group-data-[size=md]/field:[--switch-spinner-size:0.75rem] group-data-[size=md]/field:[--switch-thumb-size:18px] group-data-[size=md]/field:[--switch-track-width:2.5rem] group-data-[size=lg]/field:h-7 group-data-[size=lg]/field:w-12 group-data-[size=lg]/field:[--switch-spinner-size:0.875rem] group-data-[size=lg]/field:[--switch-thumb-size:22px] group-data-[size=lg]/field:[--switch-track-width:3rem]", { variants: { size: {
+	sm: "h-5 w-8 [--switch-spinner-size:0.625rem] [--switch-thumb-size:14px] [--switch-track-width:2rem]",
+	md: "h-6 w-10 [--switch-spinner-size:0.75rem] [--switch-thumb-size:18px] [--switch-track-width:2.5rem]",
+	lg: "h-7 w-12 [--switch-spinner-size:0.875rem] [--switch-thumb-size:22px] [--switch-track-width:3rem]"
+} } });
+/**
+* Compose with the shared field primitives for label and helper text.
+*
+* ```tsx
+* <Field orientation="horizontal" size="sm">
+*   <Switch id="notifications" />
+*   <FieldContent>
+*     <FieldLabel htmlFor="notifications">Notifications</FieldLabel>
+*     <FieldDescription>Receive product update emails.</FieldDescription>
+*   </FieldContent>
+* </Field>
+* ```
+*/
+function Switch({ className, disabled = false, loading = false, readOnly = false, size, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const isDisabled = disabled;
+	const isReadOnly = readOnly || loading;
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		"aria-busy": loading || void 0,
+		"data-slot": "switch",
+		"data-loading": loading,
+		"data-size": resolvedSize,
+		disabled: isDisabled,
+		readOnly: isReadOnly,
+		className: cn(switchVariants({ size: resolvedSize }), className),
+		...props,
+		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
+			"data-slot": "switch-thumb",
+			className: cn("pointer-events-none grid size-(--switch-thumb-size) translate-x-0 place-items-center rounded-full bg-fg-on-brand text-fg-brand ring-0 transition-transform duration-200 ease-out data-checked:translate-x-[calc(var(--switch-track-width)-var(--switch-thumb-size)-4px)]", loading && "translate-x-[calc(var(--switch-track-width)-var(--switch-thumb-size)-4px)]", isDisabled && "translate-x-0! bg-line text-fg-caption-placeholder"),
+			children: loading && !isDisabled && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "switch-spinner",
+				className: "size-(--switch-spinner-size) animate-spin rounded-full border-2 border-current border-r-transparent"
+			})
+		})
+	});
 }
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/switch.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var switchVariants = cva(
-  "peer group/switch relative inline-flex shrink-0 items-center rounded-full border bg-clip-padding p-0.5 transition-[background-color,border-color,box-shadow,opacity] outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-checked:border-action-primary data-checked:bg-action-primary data-unchecked:border-line data-unchecked:bg-transparent data-[loading=true]:border-action-primary data-[loading=true]:bg-action-primary data-disabled:border-line-subtle! data-disabled:bg-transparent! data-disabled:cursor-not-allowed data-disabled:opacity-60 h-6 w-10 [--switch-spinner-size:0.75rem] [--switch-thumb-size:18px] [--switch-track-width:2.5rem] group-data-[size=sm]/field:h-5 group-data-[size=sm]/field:w-8 group-data-[size=sm]/field:[--switch-spinner-size:0.625rem] group-data-[size=sm]/field:[--switch-thumb-size:14px] group-data-[size=sm]/field:[--switch-track-width:2rem] group-data-[size=md]/field:h-6 group-data-[size=md]/field:w-10 group-data-[size=md]/field:[--switch-spinner-size:0.75rem] group-data-[size=md]/field:[--switch-thumb-size:18px] group-data-[size=md]/field:[--switch-track-width:2.5rem] group-data-[size=lg]/field:h-7 group-data-[size=lg]/field:w-12 group-data-[size=lg]/field:[--switch-spinner-size:0.875rem] group-data-[size=lg]/field:[--switch-thumb-size:22px] group-data-[size=lg]/field:[--switch-track-width:3rem]",
-  {
-    variants: {
-      size: {
-        sm: "h-5 w-8 [--switch-spinner-size:0.625rem] [--switch-thumb-size:14px] [--switch-track-width:2rem]",
-        md: "h-6 w-10 [--switch-spinner-size:0.75rem] [--switch-thumb-size:18px] [--switch-track-width:2.5rem]",
-        lg: "h-7 w-12 [--switch-spinner-size:0.875rem] [--switch-thumb-size:22px] [--switch-track-width:3rem]"
-      }
-    }
-  }
-);
-function Switch({
-  className,
-  disabled = false,
-  loading = false,
-  readOnly = false,
-  size,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  const isDisabled = disabled;
-  const isReadOnly = readOnly || loading;
-  return /* @__PURE__ */ jsx2(
-    SwitchPrimitive.Root,
-    {
-      "aria-busy": loading || void 0,
-      "data-slot": "switch",
-      "data-loading": loading,
-      "data-size": resolvedSize,
-      disabled: isDisabled,
-      readOnly: isReadOnly,
-      className: cn(switchVariants({ size: resolvedSize }), className),
-      ...props,
-      children: /* @__PURE__ */ jsx2(
-        SwitchPrimitive.Thumb,
-        {
-          "data-slot": "switch-thumb",
-          className: cn(
-            "pointer-events-none grid size-(--switch-thumb-size) translate-x-0 place-items-center rounded-full bg-fg-on-brand text-fg-brand ring-0 transition-transform duration-200 ease-out data-checked:translate-x-[calc(var(--switch-track-width)-var(--switch-thumb-size)-4px)]",
-            loading && "translate-x-[calc(var(--switch-track-width)-var(--switch-thumb-size)-4px)]",
-            isDisabled && "translate-x-0! bg-line text-fg-caption-placeholder"
-          ),
-          children: loading && !isDisabled && /* @__PURE__ */ jsx2(
-            "span",
-            {
-              "aria-hidden": "true",
-              "data-slot": "switch-spinner",
-              className: "size-(--switch-spinner-size) animate-spin rounded-full border-2 border-current border-r-transparent"
-            }
-          )
-        }
-      )
-    }
-  );
-}
-export {
-  Switch,
-  switchVariants
-};
-//# sourceMappingURL=switch.js.map
+//#endregion
+export { Switch, switchVariants };

package/dist/table-card.d.ts

@@ -0,0 +1,35 @@
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/table-card.d.ts
+declare const tableCardVariants: (props?: ({
+  selected?: boolean | null | undefined;
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TableCardDetailItem = {
+  className?: string;
+  label: React.ReactNode;
+  labelClassName?: string;
+  value: React.ReactNode;
+  valueClassName?: string;
+};
+type TableCardProps = Omit<React.ComponentProps<"article">, "title"> & VariantProps<typeof tableCardVariants> & {
+  action?: React.ReactNode;
+  actions?: React.ReactNode;
+  badge?: React.ReactNode;
+  details?: TableCardDetailItem[];
+  selection?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  title?: React.ReactNode;
+};
+declare function TableCard({ action, actions, badge, children, className, details, selection, selected, size, subtitle, title, ...props }: TableCardProps): React.JSX.Element;
+declare function TableCardAction({ className, render, ...props }: useRender.ComponentProps<"button">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function TableCardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function TableCardTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
+declare function TableCardSubtitle({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function TableCardSelection({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function TableCardActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function TableCardDetails({ className, ...props }: React.ComponentProps<"dl">): React.JSX.Element;
+declare function TableCardDetail({ className, label, labelClassName, value, valueClassName }: TableCardDetailItem): React.JSX.Element | null;
+//#endregion
+export { TableCard, TableCardAction, TableCardActions, TableCardDetail, type TableCardDetailItem, TableCardDetails, TableCardHeader, type TableCardProps, TableCardSelection, TableCardSubtitle, TableCardTitle, tableCardVariants };

package/dist/table-card.js

@@ -0,0 +1,125 @@
+import { t as cn } from "./cn-BI_4DMBf.js";
+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/table-card.tsx
+const tableCardVariants = cva("group/table-card relative flex w-full min-w-0 flex-col border border-line-subtle bg-canvas text-fg-primary shadow-1 outline-none transition-[background-color,border-color,box-shadow,filter,transform] hover:bg-surface hover:shadow-2 active:bg-surface-raised active:shadow-none has-[[data-slot=table-card-action]:focus-visible]:border-line-focus has-[[data-slot=table-card-action]:focus-visible]:inset-ring-1 has-[[data-slot=table-card-action]:focus-visible]:inset-ring-line-focus has-[[data-slot=table-card-action]]:cursor-pointer", {
+	variants: {
+		selected: {
+			true: "border-line-focus bg-surface-brand-subtle inset-ring-1 inset-ring-line-focus hover:bg-surface-brand-subtle hover:brightness-95 active:bg-surface-brand-subtle active:brightness-90",
+			false: ""
+		},
+		size: {
+			sm: "gap-4 rounded-xl p-4",
+			md: "gap-5 rounded-2xl p-5",
+			lg: "gap-6 rounded-[20px] p-6"
+		}
+	},
+	defaultVariants: {
+		selected: false,
+		size: "md"
+	}
+});
+function TableCard({ action, actions, badge, children, className, details, selection, selected = false, size = "md", subtitle, title, ...props }) {
+	return /* @__PURE__ */ jsx("article", {
+		"data-slot": "table-card",
+		"data-size": size,
+		"data-state": selected ? "selected" : void 0,
+		className: cn(tableCardVariants({
+			selected,
+			size
+		}), className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			action,
+			/* @__PURE__ */ jsxs(TableCardHeader, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 items-start gap-3",
+				children: [selection ? /* @__PURE__ */ jsx(TableCardSelection, { children: selection }) : null, /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [title ? /* @__PURE__ */ jsx(TableCardTitle, { children: title }) : null, subtitle ? /* @__PURE__ */ jsx(TableCardSubtitle, { children: subtitle }) : null]
+				})]
+			}), actions ? /* @__PURE__ */ jsx(TableCardActions, { children: actions }) : null] }),
+			badge ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "table-card-badge",
+				className: "pointer-events-none relative z-2 flex min-w-0 items-center",
+				children: badge
+			}) : null,
+			details?.length ? /* @__PURE__ */ jsx(TableCardDetails, { children: details.map((detail, index) => /* @__PURE__ */ jsx(TableCardDetail, { ...detail }, typeof detail.label === "string" ? detail.label : index.toString())) }) : null
+		] })
+	});
+}
+function TableCardAction({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			"data-slot": "table-card-action",
+			className: cn("absolute inset-0 z-1 rounded-[inherit] border-0 bg-transparent p-0 text-transparent outline-none", className),
+			type: "button"
+		}, props),
+		render,
+		state: { slot: "table-card-action" }
+	});
+}
+function TableCardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-card-header",
+		className: cn("pointer-events-none relative z-2 flex min-w-0 items-start justify-between gap-4", className),
+		...props
+	});
+}
+function TableCardTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h3", {
+		"data-slot": "table-card-title",
+		className: cn("text-gdt-md font-bold text-fg-primary group-data-[size=lg]/table-card:text-gdt-lg", className),
+		...props
+	});
+}
+function TableCardSubtitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "table-card-subtitle",
+		className: cn("mt-1 text-gdt-sm text-fg-secondary [&_a]:pointer-events-auto [&_a]:relative [&_a]:z-3", className),
+		...props
+	});
+}
+function TableCardSelection({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-table-card-interactive": "",
+		"data-slot": "table-card-selection",
+		className: cn("pointer-events-auto relative z-3 flex shrink-0 pt-0.5", className),
+		...props
+	});
+}
+function TableCardActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-table-card-interactive": "",
+		"data-slot": "table-card-actions",
+		className: cn("pointer-events-auto relative z-3 -m-1 flex shrink-0 items-center justify-center p-1", className),
+		...props
+	});
+}
+function TableCardDetails({ className, ...props }) {
+	return /* @__PURE__ */ jsx("dl", {
+		"data-slot": "table-card-details",
+		className: cn("pointer-events-none relative z-2 flex min-w-0 flex-col divide-y divide-line-subtle", className),
+		...props
+	});
+}
+function TableCardDetail({ className, label, labelClassName, value, valueClassName }) {
+	if (value === null || value === void 0 || value === "") return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "table-card-detail",
+		className: cn("grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,max-content)] items-start gap-4 py-3 text-gdt-sm first:pt-0 last:pb-0", className),
+		children: [/* @__PURE__ */ jsx("dt", {
+			"data-slot": "table-card-detail-label",
+			className: cn("min-w-0 text-fg-secondary", labelClassName),
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			"data-slot": "table-card-detail-value",
+			className: cn("min-w-0 max-w-40 text-right font-semibold text-fg-primary [&_a]:pointer-events-auto [&_a]:relative [&_a]:z-3 [&_button]:pointer-events-auto [&_button]:relative [&_button]:z-3", valueClassName),
+			children: value
+		})]
+	});
+}
+//#endregion
+export { TableCard, TableCardAction, TableCardActions, TableCardDetail, TableCardDetails, TableCardHeader, TableCardSelection, TableCardSubtitle, TableCardTitle, tableCardVariants };

package/dist/table.d.ts

@@ -1,14 +1,15 @@
-import * as React from 'react';
-
+import * as React from "react";
+//#region src/table.d.ts
+type TablePinnedSide = "left" | "right";
 /**
  * Outer card wrapper.
  *
- * Tokens: bg-surface-overlay (container fill), border-line (container border).
+ * Tokens: bg-canvas (container fill), border-line-subtle (container border).
  * Pass `containerClassName` to override scroll, sizing, or rounding for
  * individual call-sites (e.g. the data-table's max-height + rounded-[20px]).
  */
 declare function Table({ className, containerClassName, ...props }: React.ComponentProps<"table"> & {
-    containerClassName?: string;
+  containerClassName?: string;
 }): React.JSX.Element;
 /**
  * Header band (thead).
@@ -17,7 +18,7 @@ declare function Table({ className, containerClassName, ...props }: React.Compon
  * Add `sticky` to pin the header and show Shadow-2 elevation while scrolled.
  */
 declare function TableHeader({ className, sticky, ...props }: React.ComponentProps<"thead"> & {
-    sticky?: boolean;
+  sticky?: boolean;
 }): React.JSX.Element;
 declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
 /**
@@ -37,21 +38,24 @@ declare function TableRow({ className, ...props }: React.ComponentProps<"tr">):
  * Header cell (th).
  *
  * Tokens: bg-surface-raised (always applied so sticky/pinned th cells correctly
- * cover scrolling content), text-fg-secondary, text-gdt-capitalized + uppercase
- * for the tiny-caps column label style described in the design system.
+ * cover scrolling content), text-fg-secondary, text-gdt-sm semibold for the
+ * table header style in Figma.
  */
-declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
+declare function TableHead({ className, pinnedSide, ...props }: React.ComponentProps<"th"> & {
+  pinnedSide?: TablePinnedSide;
+}): React.JSX.Element;
 /**
  * Standard body cell (td).
  *
  * Token: text-fg-primary (body cell text), text-gdt-sm.
  * Pass `pinned` when the column is sticky. Pinned cells get an opaque
- * bg-canvas cover so scrolling content doesn't bleed through, and they
- * mirror the parent row's hover/selected states via group variants.
+ * bg-canvas cover so scrolling content doesn't bleed through. Pass
+ * `pinnedSide` to draw the 2px sticky-column divider from the Figma spec.
  * Non-pinned cells are left transparent so the parent row's surface shows through.
  */
-declare function TableCell({ className, pinned, ...props }: React.ComponentProps<"td"> & {
-    pinned?: boolean;
+declare function TableCell({ className, pinned, pinnedSide, ...props }: React.ComponentProps<"td"> & {
+  pinned?: boolean;
+  pinnedSide?: TablePinnedSide;
 }): React.JSX.Element;
 /**
  * Formatted cell title, for use within a TableCell
@@ -65,5 +69,5 @@ declare function TableCellCaption({ className, ...props }: React.ComponentProps<
  * Caption — rendered below the table, uses secondary text token.
  */
 declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
-
-export { Table, TableBody, TableCaption, TableCell, TableCellCaption, TableCellTitle, TableFooter, TableHead, TableHeader, TableRow };
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableCellCaption, TableCellTitle, TableFooter, TableHead, TableHeader, TableRow };