tamga-ui 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -5,6 +5,29 @@ Versions follow [semver](https://semver.org/). Through `0.x`, breaking changes m
 
 > 🇹🇷 Türkçe için [tamga.org.tr/tr](https://tamga.org.tr/tr).
 
+## 0.10.0
+
+> The busy spinner picks its shape and sits in the centre; the radio mark stays put when chosen.
+
+### Added
+
+- **`Button` `busyLook`** · the spinner's shape while busy, per button: `bars` (default,
+  unchanged) or `Spinner`'s `dots`, `pixels`, `ring`, `square`. No app-wide setting.
+
+### Fixed
+
+- **`Button` busy spinner sits in the exact centre** of the button in every browser: it was an
+  absolutely positioned child with no offsets, so its place depended on the browser's
+  static-position rule for flex children. `inset: 0; margin: auto; width: fit-content; height: fit-content` now centres the spinner's own box, whatever its look; the invisible
+  label still keeps the width. Measured for sm/base/lg and primary/soft/ghost/danger
+  (`pnpm olc:dugme`). The five looks are measured, by their painted parts.
+- **`RadioGroup` mark and selected card** · the mark's top offset is computed from its own size
+  (radio 20px, checkbox 22px) instead of a single 18px, so it sits centred on the first line
+  and a single-line option no longer looks a pixel or two low. The selected card's wash is
+  a lighter mix of `--color-accent-bg` (the selected menu row's) and the shell, with the page ink; `--color-accent-soft` made
+  the chosen card read as a heavy button beside its neighbours. The checked radio no longer shifts 2px down and right: the pressed-in look is
+  carried by the dropped shadow alone, so the mark stays centred on its line in both states.
+
 ## 0.9.0
 
 > An equal grid for the filter row, and a box-shaped panel for the searchable field. Both opt-in; a bar that gives neither renders as before, locked by test.

package/dist/components/button.d.ts

@@ -30,8 +30,16 @@ export type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof b
      * ama okunur); adsız bir düğme olmuyor.
      */
     busyLabel?: string;
+    /**
+     * The spinner's shape while `busy`: `bars` (default, today's) or `Spinner`'s `dots`,
+     * `pixels`, `ring`, `square`. Chosen where the button is used; there is no app-wide
+     * setting. TR: `busy` sürerken spinner'ın biçimi: `bars` (varsayılan, bugünkü) ya da
+     * `Spinner`ın `dots`, `pixels`, `ring`, `square`ı. Düğmenin kullanıldığı yerde seçilir;
+     * uygulama geneli bir ayar yok.
+     */
+    busyLook?: "bars" | "dots" | "pixels" | "ring" | "square";
 };
-export declare function Button({ className, variant, size, full, busy, busyLabel, children, disabled, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ className, variant, size, full, busy, busyLabel, busyLook, children, disabled, ...props }: ButtonProps): import("react").JSX.Element;
 export declare const iconButtonVariants: (props?: ({
     size?: "base" | "lg" | "sm" | null | undefined;
     variant?: "danger" | "ghost" | "primary" | "secondary" | "soft" | null | undefined;

package/dist/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE;;;;GAIG;AAEH,eAAO,MAAM,cAAc;;;;8EAwCzB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GACtD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAY,EACZ,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,+BA8Bb;AAID,eAAO,MAAM,kBAAkB;;;8EAoB7B,CAAC;AAEH;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,+BASnE;AAED,eAAO,MAAM,kBAAkB;;8EAW7B,CAAC;AAEH,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,+BASnE"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE;;;;GAIG;AAEH,eAAO,MAAM,cAAc;;;;8EAwCzB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GACtD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC3D,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAY,EACZ,SAAS,EACT,QAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,+BA8Bb;AAID,eAAO,MAAM,kBAAkB;;;8EAoB7B,CAAC;AAEH;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,+BASnE;AAED,eAAO,MAAM,kBAAkB;;8EAW7B,CAAC;AAEH,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,+BASnE"}

package/dist/components/button.js

@@ -48,11 +48,11 @@ export const buttonVariants = cva("tamga-btn", {
     },
     defaultVariants: { variant: "secondary", size: "base", full: false },
 });
-export function Button({ className, variant, size, full, busy = false, busyLabel, children, disabled, ...props }) {
+export function Button({ className, variant, size, full, busy = false, busyLabel, busyLook = "bars", children, disabled, ...props }) {
     return (_jsx("button", { "data-slot": "button", "data-busy": busy || undefined, "aria-busy": busy || undefined, 
         /* Kilit `disabled` ile: sürerken ikinci bir tıklama olayı hiç doğmuyor.
            `pointer-events: none` yetmezdi — klavye Enter'ı yine gönderirdi. */
-        disabled: disabled || busy, className: cn(buttonVariants({ variant, size, full }), className), ...props, children: busy ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: 16, label: busyLabel ?? "" }), busyLabel ? null : _jsx("span", { className: "sr-only", children: children }), _jsx("span", { className: "invisible", "aria-hidden": true, children: children })] })) : (children) }));
+        disabled: disabled || busy, className: cn(buttonVariants({ variant, size, full }), className), ...props, children: busy ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: 16, look: busyLook, label: busyLabel ?? "" }), busyLabel ? null : _jsx("span", { className: "sr-only", children: children }), _jsx("span", { className: "invisible", "aria-hidden": true, children: children })] })) : (children) }));
 }
 /* --------------------------- icon button -------------------------- */
 export const iconButtonVariants = cva("tamga-icon-btn", {

package/dist/fonts.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.9.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.10.0 · MIT · https://tamga.org.tr */
 @font-face {
   font-family: "Red Hat Display";
   font-style: normal;

package/dist/kit.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.9.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.10.0 · MIT · https://tamga.org.tr */
 :root {
 
   --overlay-gap: 8px;
@@ -615,8 +615,14 @@
     box-shadow: 4px 4px 0 var(--color-edge-strong);
     cursor: progress;
   }
+
   .tamga-btn[data-busy] > [role="status"] {
     position: absolute;
+    inset: 0;
+    margin: auto;
+
+    width: fit-content;
+    height: fit-content;
   }
   .tamga-btn[data-busy] {
     position: relative;
@@ -2785,7 +2791,12 @@
 
   .tamga-choice-mark {
     align-self: flex-start;
-    margin-top: calc((1lh - 18px) / 2);
+  }
+  .tamga-radio.tamga-choice-mark {
+    margin-top: calc((1lh - 20px) / 2);
+  }
+  .tamga-check.tamga-choice-mark {
+    margin-top: calc((1lh - 22px) / 2);
   }
 
   .tamga-choice-chip {
@@ -2823,8 +2834,8 @@
   }
 
   .tamga-choice-card[aria-checked="true"] {
-    background: var(--color-accent-soft);
-    color: var(--color-accent-soft-ink);
+
+    background: color-mix(in oklab, var(--color-accent-bg) 60%, var(--color-shell));
   }
 
   .tamga-choice-chip:not([aria-checked="true"]):active,
@@ -2888,9 +2899,9 @@
     transform: translate(2px, 2px);
     box-shadow: 0 0 0 var(--color-accent-shadow);
   }
+
   .tamga-radio[data-checked="true"] {
     border-color: var(--color-accent);
-    transform: translate(2px, 2px);
     box-shadow: 0 0 0 var(--color-accent);
   }
   .tamga-radio[data-checked="true"]::before {

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.9.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.10.0 · MIT · https://tamga.org.tr */
 @import "./fonts.css";
 @import "./theme.css";
 @import "./kit.css";

package/dist/theme.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.9.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.10.0 · MIT · https://tamga.org.tr */
 @custom-variant dark (&:is(.dark *));
 
 @theme static {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tamga-ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Mantıksal's shared interface library: tokens, physics and components.",
   "license": "MIT",
   "type": "module",