@mohasinac/appkit 3.3.5 → 3.3.6

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

@@ -1,5 +1,6 @@
 import type { AnchorHTMLAttributes, ReactNode } from "react";
-import { type RoundedKey, type ShadowKey } from "./surface-tokens";
+import { type PaddingKey, type RoundedKey, type ShadowKey } from "./surface-tokens";
+export type AnchorGap = "none" | "2xs" | "xs" | "sm" | "md" | "lg";
 /**
  * Anchor — primitive for **external** links, `mailto:`, and `tel:` URLs.
  *
@@ -37,6 +38,12 @@ export interface AnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     shadow?: ShadowKey;
     /** Display layout. `"inline-flex"` and `"flex"` include `items-center` automatically. */
     layout?: "inline-flex" | "flex";
+    /** Padding — for card/banner-style anchors. Replaces consumer `p*-*` className. */
+    padding?: PaddingKey;
+    /** Gap between flex children — only meaningful with `layout`. Replaces consumer `gap-*` className. */
+    gap?: AnchorGap;
+    /** Themed hover background — replaces consumer `hover:bg-*` className on card-style anchors. */
+    hoverSurface?: "none" | "subtle";
     /**
      * Escape hatch for behaviour-coupled utility classes (layout overrides,
      * state-driven classes like `group`, structural card-link styling).
@@ -44,4 +51,4 @@ export interface AnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
      */
     className?: string;
 }
-export declare function Anchor({ href, children, tone, underline, size, rounded, shadow, layout, external, rel, target, className, ...rest }: AnchorProps): import("react").JSX.Element;
+export declare function Anchor({ href, children, tone, underline, size, rounded, shadow, layout, padding, gap, hoverSurface, external, rel, target, className, ...rest }: AnchorProps): import("react").JSX.Element;

package/dist/ui/components/Anchor.js

@@ -1,11 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ROUNDED_MAP, SHADOW_MAP } from "./surface-tokens";
+import { PADDING_MAP, ROUNDED_MAP, SHADOW_MAP } from "./surface-tokens";
+const ANCHOR_GAP_CLS = {
+    none: "",
+    "2xs": "gap-0.5",
+    xs: "gap-1",
+    sm: "gap-1.5",
+    md: "gap-2",
+    lg: "gap-3",
+};
 const ANCHOR_SIZE_CLS = {
     xs: "text-xs",
     sm: "text-sm",
     base: "text-base",
     lg: "text-lg",
 };
+const ANCHOR_HOVER_SURFACE_CLS = {
+    none: "",
+    subtle: "hover:bg-[var(--appkit-color-border-subtle)]",
+};
 const TONE_CLS = {
     default: "text-[var(--appkit-color-text)]",
     muted: "text-[var(--appkit-color-text-muted)]",
@@ -31,7 +43,7 @@ const ANCHOR_LAYOUT_CLS = {
     "inline-flex": "inline-flex items-center",
     flex: "flex items-center",
 };
-export function Anchor({ href, children, tone = "brand", underline = "hover", size, rounded, shadow, layout, external, rel, target, className, ...rest }) {
+export function Anchor({ href, children, tone = "brand", underline = "hover", size, rounded, shadow, layout, padding, gap, hoverSurface, external, rel, target, className, ...rest }) {
     const resolvedExternal = external ?? isExternalShape(href);
     const isHttp = isHttpProtocol(href);
     const computedTarget = target ?? (resolvedExternal && isHttp ? "_blank" : undefined);
@@ -47,6 +59,9 @@ export function Anchor({ href, children, tone = "brand", underline = "hover", si
             rounded ? ROUNDED_MAP[rounded] : "",
             shadow ? SHADOW_MAP[shadow] : "",
             layout ? ANCHOR_LAYOUT_CLS[layout] : "",
+            padding ? PADDING_MAP[padding] : "",
+            gap ? ANCHOR_GAP_CLS[gap] : "",
+            hoverSurface ? ANCHOR_HOVER_SURFACE_CLS[hoverSurface] : "",
             "transition-colors",
             className ?? "",
         ].filter(Boolean).join(" "), ...rest, children: children }));

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

@@ -3,7 +3,7 @@ import type { SurfaceProps } from "./surface-tokens";
 type DivColor = "default" | "primary" | "muted" | "faint" | "success" | "warning" | "error" | "info" | "inverse";
 type DivTextSize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
 type DivTextWeight = "normal" | "medium" | "semibold" | "bold";
-type DivLayout = "block" | "flex" | "inline-flex" | "grid" | "inline-block" | "inline";
+type DivLayout = "block" | "flex" | "flex-col" | "inline-flex" | "grid" | "inline-block" | "inline";
 type DivGap = "none" | "1" | "2" | "3" | "4" | "5" | "6" | "8";
 type DivAlign = "start" | "center" | "end" | "baseline" | "stretch";
 type DivJustify = "start" | "center" | "end" | "between" | "around" | "evenly";

package/dist/ui/components/Div.js

@@ -34,6 +34,8 @@ const DIV_TEXT_WEIGHT_MAP = {
 const DIV_LAYOUT_MAP = {
     block: "block",
     flex: "flex",
+    /** `flex flex-col` — for one-off Divs that need a ref Stack can't forward. */
+    "flex-col": "flex flex-col",
     "inline-flex": "inline-flex",
     grid: "grid",
     "inline-block": "inline-block",

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

@@ -175,7 +175,7 @@ export declare function Caption({ variant, color, weight, className, children, .
 /** Inline-decorations allowed on Span (pill chips, code-like wraps, etc). */
 type SpanRounded = "none" | "default" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 type SpanBorder = "none" | "default" | "subtle" | "strong";
-type SpanPadding = "none" | "2xs" | "x-xs" | "x-sm" | "x-md" | "y-2xs" | "y-xs" | "y-sm" | "inline-sm" | "inline" | "pill-2xs" | "pill-xs" | "pill-sm" | "pill-sm-tall" | "pill-md" | "pill-lg";
+type SpanPadding = "none" | "1" | "2xs" | "x-xs" | "x-sm" | "x-md" | "y-2xs" | "y-xs" | "y-sm" | "inline-sm" | "inline" | "pill-2xs" | "pill-xs" | "pill-sm" | "pill-sm-tall" | "pill-md" | "pill-lg";
 type SpanBg = "none" | "muted" | "subtle" | "default" | "success-surface" | "danger-surface" | "warning-surface" | "info-surface" | "overlay-xs" | "overlay-sm" | "overlay-md" | "overlay-lg" | "overlay-xl";
 type SpanLayout = "inline" | "inline-flex" | "flex" | "inline-flex-center" | "flex-center" | "inline-block" | "block";
 type SpanGap = "none" | "2xs" | "xs" | "sm" | "md" | "lg";

package/dist/ui/components/Typography.js

@@ -231,6 +231,7 @@ const SPAN_ROUNDED_MAP = {
 };
 const SPAN_PADDING_MAP = {
     none: "",
+    "1": "p-1",
     "2xs": "p-2",
     "x-xs": "px-2",
     "x-sm": "px-3",

package/dist/ui/components/surface-tokens.d.ts

@@ -216,7 +216,7 @@ export declare const PADDING_PRESETS: {
     readonly "content-banner": "py-10 md:py-12 lg:py-16";
 };
 export type PaddingPresetKey = PaddingKey;
-export type XPaddingKey = "none" | "x-xs" | "x-sm" | "x-md" | "x-5" | "x-lg" | "x-xl" | "x-sm-md" | "x-sm-lg-md" | "x-md-lg" | "x-md-xl" | "x-md-2xl" | "x-page";
+export type XPaddingKey = "none" | "x-xs" | "x-sm" | "x-md" | "x-5" | "x-lg" | "x-xl" | "x-sm-md" | "x-sm-lg-md" | "x-md-lg" | "x-md-xl" | "x-md-2xl" | "x-page" | "l-xl";
 type YPaddingKey = "none" | "y-2xs" | "y-2xs-tall" | "y-xs" | "y-xs-tall" | "y-sm" | "y-sm-tall" | "y-md" | "y-md-lg" | "y-lg" | "y-xl" | "y-2xl" | "y-3xl" | "y-4xl" | "y-5xl" | "y-6xl" | "y-2-5xl" | "t-2xs" | "b-2xs" | "t-xs" | "b-xs" | "t-sm" | "b-sm" | "t-md" | "b-md" | "b-md-lg" | "b-lg" | "t-md-b-lg";
 export declare const X_ONLY_MAP: Record<XPaddingKey, string>;
 export type OverflowKey = "auto" | "hidden" | "scroll" | "visible" | "x-auto" | "x-hidden" | "y-auto" | "y-hidden";

package/dist/ui/components/surface-tokens.js

@@ -210,6 +210,10 @@ export const X_ONLY_MAP = {
     "x-md-2xl": "px-4 sm:px-8",
     /** Responsive: `px-4 sm:px-6 lg:px-8` — canonical page-container horizontal padding. */
     "x-page": "px-4 sm:px-6 lg:px-8",
+    // Asymmetric left one-sided value (for sites that pad just one edge, e.g. a
+    // selection-checkbox gutter).
+    /** Asymmetric: `pl-8` — reserves a left gutter (e.g. for an overlaid selection checkbox). */
+    "l-xl": "pl-8",
 };
 const Y_ONLY_MAP = {
     none: "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "3.3.5",
+  "version": "3.3.6",
   "license": "MIT",
   "publishConfig": {
     "access": "public"