kff-ui-kit 0.1.0 → 0.2.0

package/README.md

@@ -2,29 +2,12 @@
 
 Внутренняя UI-библиотека КФФ на Tailwind CSS v4 + shadcn/base-ui.
 
-## Структура
-
-```
-src/
-├── components/
-│   ├── ui/        # примитивы (shadcn/base-ui) — Button, Dialog, Input и т.д.
-│   └── kff/        # компоненты, собранные поверх примитивов — ActionButton, AppSidebar и т.д.
-├── hooks/
-├── lib/            # cn() и утилиты, специфичные для КФФ
-├── styles/
-│   ├── globals.css     # токены темы + @import "tailwindcss" (исходник)
-│   └── generated.css   # сгенерирован из globals.css Tailwind CLI при сборке, в git не хранится
-└── index.ts         # единая точка входа пакета
-```
-
-Пакет — **один entry point**: и примитивы, и составные компоненты экспортируются из `@kff/ui-kit`.
-
 ## Использование
 
 ```bash
-npm install @kff/ui-kit
+npm install kff-ui-kit
 ```
 
 ```ts
-import { Button, ActionButton } from "@kff/ui-kit";
+import { Button, ActionButton } from "kff-ui-kit";
 ```

package/dist/index.cjs

@@ -631,6 +631,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;
   }
@@ -843,6 +846,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;
   }
@@ -3535,7 +3541,7 @@ var import_button = require("@base-ui/react/button");
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority3.cva)(
-  "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: {
@@ -3743,7 +3749,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,
@@ -5098,7 +5104,7 @@ var import_toggle = require("@base-ui/react/toggle");
 var import_class_variance_authority6 = require("class-variance-authority");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var toggleVariants = (0, import_class_variance_authority6.cva)(
-  "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: {
@@ -5664,15 +5670,17 @@ function FormDialog({
   errors = [],
   children,
   primaryLabel,
-  onSubmit
+  onSubmit,
+  initialFocus
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     DialogContent,
     {
       showCloseButton: false,
+      initialFocus,
       className: "max-w-115 gap-0 rounded-none border-2 border-primary bg-background p-0 text-primary",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(DialogHeader, { className: "bg-hatch flex-row items-center justify-between gap-3.5 border-b border-primary px-4 py-2.75", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(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__ */ (0, import_jsx_runtime28.jsx)("span", { className: "w-fit bg-background px-2 py-0.75 font-mono text-[10px]", children: requirement }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DialogClose, { className: "w-fit cursor-pointer bg-background px-1.75 py-0.75 font-mono text-[10px]", children: "\u2715" })
         ] }),
@@ -5682,7 +5690,7 @@ function FormDialog({
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ValidationSummary, { errors }),
           children
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(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__ */ (0, import_jsx_runtime28.jsxs)(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__ */ (0, import_jsx_runtime28.jsx)(ActionButton, { variant: "outline", onClick: () => onOpenChange(false), children: "\u041E\u0442\u043C\u0435\u043D\u0430" }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ActionButton, { onClick: onSubmit, children: primaryLabel })
         ] })
@@ -5832,17 +5840,29 @@ var import_jsx_runtime32 = require("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__ */ (0, import_jsx_runtime32.jsxs)("header", { className: "flex flex-wrap items-center justify-between gap-5 border-b border-border bg-background px-8 py-5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "min-w-0", children: [
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Breadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BreadcrumbList, { className: "font-mono text-[12px]", children: trail.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react2.Fragment, { children: [
         i > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BreadcrumbSeparator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BreadcrumbItem, { children: t.href ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BreadcrumbLink, { href: t.href, children: t.label }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BreadcrumbPage, { className: "text-muted-foreground", children: t.label }) })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BreadcrumbItem, { children: t.href ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BreadcrumbLink, { render: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LinkAs, { href: t.href }), children: t.label }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BreadcrumbPage, { className: "text-muted-foreground", children: t.label }) })
       ] }, t.label)) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mt-1.5 flex items-center gap-3", children: [
-        back && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ActionButton, { variant: "outline", size: "sm", render: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: back.href, children: "\u2039 \u041D\u0430\u0437\u0430\u0434" }) }),
+        back && backLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          ActionButton,
+          {
+            variant: "outline",
+            size: "sm",
+            render: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(LinkAs, { href: back.href, children: [
+              "\u2039 ",
+              backLabel
+            ] })
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h1", { className: "truncate text-[19px] font-semibold text-primary", children: title })
       ] })
     ] }),