kff-ui-kit 0.1.0 → 0.2.0

package/dist/index.d.cts

@@ -325,8 +325,10 @@ type FormDialogProps = {
     children?: ReactNode;
     primaryLabel: string;
     onSubmit: () => void;
+    /** См. Base UI Dialog `Popup.initialFocus` — элемент/условие для начального фокуса при открытии. */
+    initialFocus?: Dialog$1.Popup.Props['initialFocus'];
 };
-declare function FormDialog({ open, onOpenChange, requirement, title, description, errors, children, primaryLabel, onSubmit, }: FormDialogProps): React$1.JSX.Element;
+declare function FormDialog({ open, onOpenChange, requirement, title, description, errors, children, primaryLabel, onSubmit, initialFocus, }: FormDialogProps): React$1.JSX.Element;
 
 type CellState = 'value' | 'unanswered' | 'empty' | 'na' | 'computed';
 declare function ValueCell({ state, value, reason, source, onEdit, }: {
@@ -371,10 +373,16 @@ type PageHeaderTrailItem = {
     label: string;
     href?: string;
 };
-declare function PageHeader({ trail, title, actions, }: {
+type PageHeaderLinkComponent = ElementType<{
+    href: string;
+} & ComponentProps<'a'>>;
+declare function PageHeader({ trail, title, actions, backLabel, linkAs: LinkAs, }: {
     trail: PageHeaderTrailItem[];
     title: string;
     actions?: ReactNode;
+    /** Текст кнопки "назад" (без неё, если не задан). Библиотека не хардкодит язык. */
+    backLabel?: ReactNode;
+    linkAs?: PageHeaderLinkComponent;
 }): React$1.JSX.Element;
 
 declare function SectionTabs({ value, onChange, items, }: {

package/dist/index.d.ts

@@ -325,8 +325,10 @@ type FormDialogProps = {
     children?: ReactNode;
     primaryLabel: string;
     onSubmit: () => void;
+    /** См. Base UI Dialog `Popup.initialFocus` — элемент/условие для начального фокуса при открытии. */
+    initialFocus?: Dialog$1.Popup.Props['initialFocus'];
 };
-declare function FormDialog({ open, onOpenChange, requirement, title, description, errors, children, primaryLabel, onSubmit, }: FormDialogProps): React$1.JSX.Element;
+declare function FormDialog({ open, onOpenChange, requirement, title, description, errors, children, primaryLabel, onSubmit, initialFocus, }: FormDialogProps): React$1.JSX.Element;
 
 type CellState = 'value' | 'unanswered' | 'empty' | 'na' | 'computed';
 declare function ValueCell({ state, value, reason, source, onEdit, }: {
@@ -371,10 +373,16 @@ type PageHeaderTrailItem = {
     label: string;
     href?: string;
 };
-declare function PageHeader({ trail, title, actions, }: {
+type PageHeaderLinkComponent = ElementType<{
+    href: string;
+} & ComponentProps<'a'>>;
+declare function PageHeader({ trail, title, actions, backLabel, linkAs: LinkAs, }: {
     trail: PageHeaderTrailItem[];
     title: string;
     actions?: ReactNode;
+    /** Текст кнопки "назад" (без неё, если не задан). Библиотека не хардкодит язык. */
+    backLabel?: ReactNode;
+    linkAs?: PageHeaderLinkComponent;
 }): React$1.JSX.Element;
 
 declare function SectionTabs({ value, onChange, items, }: {

package/dist/index.js

@@ -458,6 +458,9 @@ styleInject(`/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
+  .bottom-0 {
+    bottom: 0;
+  }
   .left-0 {
     left: 0;
   }
@@ -670,6 +673,9 @@ styleInject(`/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
   .max-h-\\(--available-height\\) {
     max-height: var(--available-height);
   }
+  .max-h-\\[calc\\(100vh-2rem\\)\\] {
+    max-height: calc(100vh - 2rem);
+  }
   .min-h-0 {
     min-height: 0;
   }
@@ -3362,7 +3368,7 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva as cva3 } from "class-variance-authority";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var buttonVariants = cva3(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -3570,7 +3576,7 @@ function DialogContent({
       {
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100vh-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         ),
         ...props,
@@ -4931,7 +4937,7 @@ import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { cva as cva6 } from "class-variance-authority";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var toggleVariants = cva6(
-  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/toggle inline-flex cursor-pointer items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -5497,15 +5503,17 @@ function FormDialog({
   errors = [],
   children,
   primaryLabel,
-  onSubmit
+  onSubmit,
+  initialFocus
 }) {
   return /* @__PURE__ */ jsx28(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs14(
     DialogContent,
     {
       showCloseButton: false,
+      initialFocus,
       className: "max-w-115 gap-0 rounded-none border-2 border-primary bg-background p-0 text-primary",
       children: [
-        /* @__PURE__ */ jsxs14(DialogHeader, { className: "bg-hatch flex-row items-center justify-between gap-3.5 border-b border-primary px-4 py-2.75", children: [
+        /* @__PURE__ */ jsxs14(DialogHeader, { className: "bg-hatch sticky top-0 z-10 flex-row items-center justify-between gap-3.5 border-b border-primary px-4 py-2.75", children: [
           /* @__PURE__ */ jsx28("span", { className: "w-fit bg-background px-2 py-0.75 font-mono text-[10px]", children: requirement }),
           /* @__PURE__ */ jsx28(DialogClose, { className: "w-fit cursor-pointer bg-background px-1.75 py-0.75 font-mono text-[10px]", children: "\u2715" })
         ] }),
@@ -5515,7 +5523,7 @@ function FormDialog({
           /* @__PURE__ */ jsx28(ValidationSummary, { errors }),
           children
         ] }),
-        /* @__PURE__ */ jsxs14(DialogFooter, { className: "mx-0 mb-0 flex-row justify-end gap-2.25 rounded-none border-t border-primary bg-secondary px-4.5 py-3", children: [
+        /* @__PURE__ */ jsxs14(DialogFooter, { className: "sticky bottom-0 z-10 mx-0 mb-0 flex-row justify-end gap-2.25 rounded-none border-t border-primary bg-secondary px-4.5 py-3", children: [
           /* @__PURE__ */ jsx28(ActionButton, { variant: "outline", onClick: () => onOpenChange(false), children: "\u041E\u0442\u043C\u0435\u043D\u0430" }),
           /* @__PURE__ */ jsx28(ActionButton, { onClick: onSubmit, children: primaryLabel })
         ] })
@@ -5665,17 +5673,29 @@ import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 function PageHeader({
   trail,
   title,
-  actions
+  actions,
+  backLabel,
+  linkAs: LinkAs = "a"
 }) {
-  const back = [...trail].reverse().find((t) => t.href);
+  const back = [...trail].reverse().find((t) => Boolean(t.href));
   return /* @__PURE__ */ jsxs18("header", { className: "flex flex-wrap items-center justify-between gap-5 border-b border-border bg-background px-8 py-5", children: [
     /* @__PURE__ */ jsxs18("div", { className: "min-w-0", children: [
       /* @__PURE__ */ jsx32(Breadcrumb, { children: /* @__PURE__ */ jsx32(BreadcrumbList, { className: "font-mono text-[12px]", children: trail.map((t, i) => /* @__PURE__ */ jsxs18(Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx32(BreadcrumbSeparator, {}),
-        /* @__PURE__ */ jsx32(BreadcrumbItem, { children: t.href ? /* @__PURE__ */ jsx32(BreadcrumbLink, { href: t.href, children: t.label }) : /* @__PURE__ */ jsx32(BreadcrumbPage, { className: "text-muted-foreground", children: t.label }) })
+        /* @__PURE__ */ jsx32(BreadcrumbItem, { children: t.href ? /* @__PURE__ */ jsx32(BreadcrumbLink, { render: /* @__PURE__ */ jsx32(LinkAs, { href: t.href }), children: t.label }) : /* @__PURE__ */ jsx32(BreadcrumbPage, { className: "text-muted-foreground", children: t.label }) })
       ] }, t.label)) }) }),
       /* @__PURE__ */ jsxs18("div", { className: "mt-1.5 flex items-center gap-3", children: [
-        back && /* @__PURE__ */ jsx32(ActionButton, { variant: "outline", size: "sm", render: /* @__PURE__ */ jsx32("a", { href: back.href, children: "\u2039 \u041D\u0430\u0437\u0430\u0434" }) }),
+        back && backLabel && /* @__PURE__ */ jsx32(
+          ActionButton,
+          {
+            variant: "outline",
+            size: "sm",
+            render: /* @__PURE__ */ jsxs18(LinkAs, { href: back.href, children: [
+              "\u2039 ",
+              backLabel
+            ] })
+          }
+        ),
         /* @__PURE__ */ jsx32("h1", { className: "truncate text-[19px] font-semibold text-primary", children: title })
       ] })
     ] }),