@enmera/panel-kit 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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.

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

@@ -5,10 +5,14 @@ declare const buttonVariants: (props?: ({
     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

@@ -21,8 +21,8 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
             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",
@@ -58,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enmera/panel-kit",
-  "version": "0.2.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",