@enmera/panel-kit 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.2.1
+
+- `SectionCard`: on phones (below `sm`) the header wraps, so actions that do not fit move under the title instead of
+  squeezing it into a narrow column. Nothing changes from `sm` up.
+- `Button` / `LinkButton` accept `aria-keyshortcuts`. react-aria drops this attribute from DOM props; it is now written to
+  the element through the `render` prop (a `render` you pass yourself still works).
+- `Button` `variant="floating"`: in dark mode it uses the card colour with a light ring instead of the primary colour, so the
+  floating button does not look like the page's main action.
+
+## 0.2.0
+
+- `Button` `variant="destructive-ghost"`: row delete/remove icons; red text, background only on hover.
+- `TextButton` / `TextLink` `tone="danger"`.
+- `Heading` `size="xs"` for dense tool panels.
+- `Input` `size="xs"` and `mono`; `Textarea` `size="sm"` and `mono` (codes, keys, JSON).
+
 ## 0.1.0
 
 - First release: the shared components of the Searvia panel, with `configurePanelKit` for translation, locale and

package/README.md

@@ -63,14 +63,14 @@ class at the call site.
 
 | What | Component | Options |
 |---|---|---|
-| Button, link button | `ui/button`: `Button`, `LinkButton` | default, outline, secondary, ghost, inverse, light, on-brand, on-brand-soft, floating, warning, caution, destructive, link · xs, sm, default, lg, icon sizes |
-| Text button and link | `ui/text-button`: `TextButton`, `TextLink` | primary, muted, brand, warning · xs, sm |
+| Button, link button | `ui/button`: `Button`, `LinkButton` | default, outline, secondary, ghost, inverse, light, on-brand, on-brand-soft, floating, warning, caution, destructive, destructive-ghost, link · xs, sm, default, lg, icon sizes |
+| Text button and link | `ui/text-button`: `TextButton`, `TextLink` | primary, muted, brand, warning, danger · xs, sm |
 | Clickable row | `ui/row-button`: `RowButton` (`isSelected`), `RowLink` | padding from the caller |
 | Selectable card | `ui/option-card`: `OptionCard` (`isSelected`) | |
 | Main choice, filter pill | `ui/segmented`: `Segmented`; `ui/chip`: `Chip` | |
 | Badge | `status-badge`: `StatusBadge` | success, danger, warning, info, purple, neutral, primary, accent, overlay · sm, default |
 | Box, section | `ui/tile`: `Tile`, `TooltipBox`; `section-card`: `SectionCard` | default, primary, muted, success, warning, danger, info · sm, default, lg, flush · `interactive`; SectionCard `highlighted`, `flush` |
-| Heading | `ui/heading`: `Heading` | mega, hero, display, section, title, subtitle, card, small, base, sm |
+| Heading | `ui/heading`: `Heading` | mega, hero, display, section, title, subtitle, card, small, base, sm, xs |
 | Icon background | `ui/icon-tile`: `IconTile` | beside text, not above a heading |
 | Small parts | `ui/code`: `Code`; `ui/meta`: `MetaRow`, `List`, `ListRow` | |
 | Forms and overlays | `ui/input`, `ui/input-group`, `ui/select`, `ui/combobox`, `ui/textarea`, `ui/checkbox`, `ui/radio-group`, `ui/switch`, `ui/slider`, `ui/field`, `ui/dialog`, `ui/alert-dialog`, `ui/sheet`, `ui/popover`, `ui/dropdown-menu`, `ui/tooltip`, `ui/command` | |

package/dist/section-card.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 /**
  * Bölüm kartı: başlık, açıklama, sağda seçenekler.
  * `flush` gövdeyi kenar boşluksuz bırakır (liste, ızgara, tablo için).
+ * Telefonda başlık satırı sarılır: sığmayan seçenekler başlığın altına iner, başlık dar bir sütuna sıkışmaz.
  */
 export declare function SectionCard({ title, description, actions, flush, highlighted, className, contentClassName, children, }: {
     title?: ReactNode;

package/dist/section-card.js

@@ -4,9 +4,10 @@ import { cn } from './utils.js';
 /**
  * Bölüm kartı: başlık, açıklama, sağda seçenekler.
  * `flush` gövdeyi kenar boşluksuz bırakır (liste, ızgara, tablo için).
+ * Telefonda başlık satırı sarılır: sığmayan seçenekler başlığın altına iner, başlık dar bir sütuna sıkışmaz.
  */
 export function SectionCard({ title, description, actions, flush = false, highlighted = false, className, contentClassName, children, }) {
-    return (_jsxs("section", { className: cn('flex flex-col overflow-hidden rounded-3xl bg-card text-card-foreground shadow-sm ring-1 ring-foreground/5 dark:ring-foreground/10', highlighted && 'ring-2 ring-primary/40 dark:ring-primary/40', className), children: [(title || actions) && (_jsxs("header", { className: cn('flex items-start gap-3 px-4 py-3 sm:px-6 sm:py-4', hasContent(children) && 'border-b'), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [title && _jsx("h2", { className: "text-sm font-semibold sm:text-base", children: title }), description && _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground sm:text-sm", children: description })] }), actions && _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] })), hasContent(children) && _jsx("div", { className: cn('flex-1', !flush && 'p-4 sm:p-6', contentClassName), children: children })] }));
+    return (_jsxs("section", { className: cn('flex flex-col overflow-hidden rounded-3xl bg-card text-card-foreground shadow-sm ring-1 ring-foreground/5 dark:ring-foreground/10', highlighted && 'ring-2 ring-primary/40 dark:ring-primary/40', className), children: [(title || actions) && (_jsxs("header", { className: cn('flex items-start gap-3 max-sm:flex-wrap px-4 py-3 sm:px-6 sm:py-4', hasContent(children) && 'border-b'), children: [_jsxs("div", { className: "min-w-0 flex-1 max-sm:min-w-[min(100%,12rem)]", children: [title && _jsx("h2", { className: "text-sm font-semibold sm:text-base", children: title }), description && _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground sm:text-sm", children: description })] }), actions && _jsx("div", { className: "flex shrink-0 items-center gap-2 max-sm:max-w-full max-sm:flex-wrap", children: actions })] })), hasContent(children) && _jsx("div", { className: cn('flex-1', !flush && 'p-4 sm:p-6', contentClassName), children: children })] }));
 }
 function hasContent(children) {
     return Children.toArray(children).length > 0;

package/dist/ui/button.d.ts

@@ -2,13 +2,17 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { type ButtonProps as ButtonPrimitiveProps, type LinkProps as LinkPrimitiveProps } from "react-aria-components";
 declare const buttonVariants: (props?: ({
-    variant?: "caution" | "default" | "destructive" | "floating" | "ghost" | "inverse" | "light" | "link" | "on-brand" | "on-brand-soft" | "outline" | "secondary" | "warning" | null | undefined;
+    variant?: "caution" | "default" | "destructive" | "destructive-ghost" | "floating" | "ghost" | "inverse" | "light" | "link" | "on-brand" | "on-brand-soft" | "outline" | "secondary" | "warning" | null | undefined;
     size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, children, ...props }: Omit<ButtonPrimitiveProps, "className"> & React.RefAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
+declare function Button({ className, variant, size, children, "aria-keyshortcuts": keyShortcuts, render, ...props }: Omit<ButtonPrimitiveProps, "className"> & React.RefAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
     className?: string;
+    /** Klavye kısayolu, ör. "Meta+K Control+K"; öğeye `aria-keyshortcuts` olarak yazılır. */
+    "aria-keyshortcuts"?: string;
 }): React.JSX.Element;
-declare function LinkButton({ className, variant, size, ...props }: Omit<LinkPrimitiveProps, "className"> & VariantProps<typeof buttonVariants> & {
+declare function LinkButton({ className, variant, size, "aria-keyshortcuts": keyShortcuts, render, ...props }: Omit<LinkPrimitiveProps, "className"> & VariantProps<typeof buttonVariants> & {
     className?: string;
+    /** Klavye kısayolu, ör. "Meta+K Control+K"; öğeye `aria-keyshortcuts` olarak yazılır. */
+    "aria-keyshortcuts"?: string;
 }): React.JSX.Element;
 export { Button, LinkButton, buttonVariants };

package/dist/ui/button.js

@@ -16,11 +16,13 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
             // Zamanlama gibi "sonra olacak" eylemleri.
             caution: "bg-yellow-400 text-yellow-950 hover:bg-yellow-400/85 focus-visible:ring-yellow-400/40",
             destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+            // Satırdaki sil/kaldır ikonu: zemin yalnız üzerine gelince, yazı her zaman kırmızı.
+            "destructive-ghost": "text-destructive hover:bg-destructive/10 hover:text-destructive focus-visible:ring-destructive/20 aria-expanded:bg-destructive/10 dark:hover:bg-destructive/20",
             link: "text-primary underline-offset-4 hover:underline",
             // Açık zeminde koyu düğme (sitede ikinci çağrı, yüzen "Searvia'ya sor"); koyu temada marka rengi.
             inverse: "bg-ink text-white hover:bg-ink/85 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/85",
-            // Sayfanın üstünde yüzen koyu düğme ("Searvia'ya sor").
-            floating: "bg-ink text-white shadow-lg hover:bg-ink/85 dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/85",
+            // Sayfanın üstünde yüzen koyu düğme ("Searvia'ya sor"); koyu temada kart rengi, sayfanın birincil düğmesiyle karışmaz.
+            floating: "bg-ink text-white shadow-lg hover:bg-ink/85 dark:bg-card dark:text-foreground dark:ring-1 dark:ring-foreground/15 dark:hover:bg-muted",
             // Marka renkli zeminin üstündeki düğmeler (ana sayfa, blog çağrısı): dolu ve saydam.
             "on-brand": "bg-on-brand text-on-brand-ink hover:bg-on-brand/90",
             "on-brand-soft": "bg-on-brand/10 text-on-brand ring-1 ring-on-brand/30 hover:bg-on-brand/20",
@@ -56,10 +58,19 @@ function withPendingIcon(children) {
     }
     return [_jsx(LoaderCircleIcon, { className: "animate-spin" }, "pending"), ...items];
 }
-function Button({ className, variant = "default", size = "default", children, ...props }) {
-    return (_jsx(ButtonPrimitive, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props, children: props.isPending && typeof children !== "function" ? withPendingIcon(children) : children }));
+function withKeyShortcuts(tag, shortcuts, render) {
+    if (!shortcuts)
+        return render;
+    return (props, renderProps) => render
+        ? React.cloneElement(render(props, renderProps), { "aria-keyshortcuts": shortcuts })
+        : React.createElement(tag, { ...props, "aria-keyshortcuts": shortcuts });
 }
-function LinkButton({ className, variant = "default", size = "default", ...props }) {
-    return (_jsx(LinkPrimitive, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
+function Button({ className, variant = "default", size = "default", children, "aria-keyshortcuts": keyShortcuts, render, ...props }) {
+    return (_jsx(ButtonPrimitive, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), render: withKeyShortcuts("button", keyShortcuts, render), ...props, children: props.isPending && typeof children !== "function" ? withPendingIcon(children) : children }));
+}
+function LinkButton({ className, variant = "default", size = "default", "aria-keyshortcuts": keyShortcuts, render, ...props }) {
+    // react-aria bağlantısı adres yoksa ya da kapalıysa <span> çizer.
+    const tag = props.href && !props.isDisabled ? "a" : "span";
+    return (_jsx(LinkPrimitive, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), render: withKeyShortcuts(tag, keyShortcuts, render), ...props }));
 }
 export { Button, LinkButton, buttonVariants };

package/dist/ui/heading.d.ts

@@ -14,6 +14,7 @@ declare const sizes: {
     readonly small: 'font-display text-lg tracking-tight';
     readonly base: 'text-base';
     readonly sm: 'text-sm';
+    readonly xs: 'text-xs';
 };
 export type HeadingSize = keyof typeof sizes;
 export declare function Heading({ as: Tag, size, className, ...props }: React.HTMLAttributes<HTMLHeadingElement> & {

package/dist/ui/heading.js

@@ -16,6 +16,8 @@ const sizes = {
     small: 'font-display text-lg tracking-tight',
     base: 'text-base',
     sm: 'text-sm',
+    // Yoğun araç panellerindeki küçük bölüm başlığı.
+    xs: 'text-xs',
 };
 export function Heading({ as: Tag = 'h2', size, className, ...props }) {
     return _jsx(Tag, { className: cn('font-semibold text-balance', sizes[size], className), ...props });

package/dist/ui/input.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { Input as InputPrimitive } from "react-aria-components";
-declare function Input({ className, type, size, ...props }: Omit<React.ComponentProps<typeof InputPrimitive>, "size"> & {
-    size?: "default" | "sm";
+declare function Input({ className, type, size, mono, ...props }: Omit<React.ComponentProps<typeof InputPrimitive>, "size"> & {
+    size?: "default" | "sm" | "xs";
+    /** Kod, anahtar, adres gibi eş aralıklı yazılması gereken değerler. */
+    mono?: boolean;
 }): React.JSX.Element;
 export { Input };

package/dist/ui/input.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../utils.js";
 import { composeRenderProps, Input as InputPrimitive, } from "react-aria-components";
-function Input({ className, type, size = "default", ...props }) {
-    return (_jsx(InputPrimitive, { type: type, "data-slot": "input", "data-size": size, className: composeRenderProps(className, (className) => cn("h-9 data-[size=sm]:h-8 data-[size=sm]:text-sm w-full min-w-0 rounded-3xl border border-transparent bg-input/50 px-3 py-1 text-base transition-[color,box-shadow,background-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className)), ...props }));
+function Input({ className, type, size = "default", mono = false, ...props }) {
+    return (_jsx(InputPrimitive, { type: type, "data-slot": "input", "data-size": size, "data-mono": mono || undefined, className: composeRenderProps(className, (className) => cn("h-9 data-[size=sm]:h-8 data-[size=sm]:text-sm data-[size=xs]:h-7 data-[size=xs]:px-2.5 data-[size=xs]:text-xs data-mono:font-mono w-full min-w-0 rounded-3xl border border-transparent bg-input/50 px-3 py-1 text-base transition-[color,box-shadow,background-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className)), ...props }));
 }
 export { Input };

package/dist/ui/text-button.d.ts

@@ -4,6 +4,7 @@ declare const tones: {
     readonly muted: 'text-muted-foreground hover:text-foreground hover:underline';
     readonly brand: 'font-medium text-brand-link hover:underline dark:text-primary';
     readonly warning: 'font-medium text-amber-700 hover:underline dark:text-amber-400';
+    readonly danger: 'font-medium text-destructive hover:underline';
 };
 /** Bağlantı görünümlü metin düğmesi ("Tüm kelimeler", geliştirici adına göre süz): satır içinde, kutusuz. */
 export declare function TextButton({ tone, size, className, ...props }: Omit<ButtonProps, 'className'> & {

package/dist/ui/text-button.js

@@ -7,6 +7,8 @@ const tones = {
     // Tanıtım sitesinin bağlantı rengi (beyaz zeminde okunaklı marka tonu).
     brand: 'font-medium text-brand-link hover:underline dark:text-primary',
     warning: 'font-medium text-amber-700 hover:underline dark:text-amber-400',
+    // Başarısız işlemi yeniden deneme gibi hata bağlamındaki metin düğmesi.
+    danger: 'font-medium text-destructive hover:underline',
 };
 const base = 'inline-flex max-w-full items-center gap-1 rounded-sm text-start underline-offset-4 outline-hidden focus-visible:ring-2 focus-visible:ring-ring/40 [&_svg]:size-3.5 [&_svg]:shrink-0';
 /** Bağlantı görünümlü metin düğmesi ("Tüm kelimeler", geliştirici adına göre süz): satır içinde, kutusuz. */

package/dist/ui/textarea.d.ts

@@ -1,4 +1,9 @@
 import * as React from "react";
 import { TextArea as TextareaPrimitive } from "react-aria-components";
-declare function Textarea({ className, ...props }: React.ComponentProps<typeof TextareaPrimitive>): React.JSX.Element;
+declare function Textarea({ className, size, mono, ...props }: React.ComponentProps<typeof TextareaPrimitive> & {
+    /** `sm`: ızgara ve tablo içindeki sıkı alan. */
+    size?: "default" | "sm";
+    /** Kod, JSON gibi eş aralıklı yazılması gereken değerler. */
+    mono?: boolean;
+}): React.JSX.Element;
 export { Textarea };

package/dist/ui/textarea.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../utils.js";
 import { composeRenderProps, TextArea as TextareaPrimitive, } from "react-aria-components";
-function Textarea({ className, ...props }) {
-    return (_jsx(TextareaPrimitive, { "data-slot": "textarea", className: composeRenderProps(className, (className) => cn("flex field-sizing-content min-h-16 w-full resize-none rounded-2xl border border-transparent bg-input/50 px-3 py-3 text-base transition-[color,box-shadow,background-color] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className)), ...props }));
+function Textarea({ className, size = "default", mono = false, ...props }) {
+    return (_jsx(TextareaPrimitive, { "data-slot": "textarea", "data-size": size, "data-mono": mono || undefined, className: composeRenderProps(className, (className) => cn("flex field-sizing-content min-h-16 data-[size=sm]:min-h-9 data-[size=sm]:rounded-xl data-[size=sm]:px-2.5 data-[size=sm]:py-2 data-[size=sm]:text-xs data-mono:font-mono w-full resize-none rounded-2xl border border-transparent bg-input/50 px-3 py-3 text-base transition-[color,box-shadow,background-color] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className)), ...props }));
 }
 export { Textarea };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enmera/panel-kit",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Shared components for admin panels built with React, react-aria and Tailwind CSS: one look for every button, badge, box and heading.",
   "type": "module",
   "license": "MIT",