@mohasinac/appkit 3.2.4 → 3.2.6

package/dist/ui/components/Form.d.ts

@@ -21,9 +21,11 @@ export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement
     schema?: ZodTypeAny;
     /** Cross-axis alignment of flex/grid children. Replaces raw `items-*` className. */
     align?: "start" | "center" | "end" | "stretch";
+    /** Gap between children — use instead of raw `gap-*` className. */
+    gap?: GapToken;
 }
 export type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl";
-export declare function Form({ children, spacing, schema, align, surface, padding, rounded, border, shadow, className, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
+export declare function Form({ children, spacing, schema, align, gap, surface, padding, rounded, border, shadow, className, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
 export interface FormGroupProps {
     children: React.ReactNode;
     columns?: 1 | 2 | 3 | 4;

package/dist/ui/components/Form.js

@@ -43,7 +43,7 @@ const FORM_ALIGN_MAP = {
     end: "items-end",
     stretch: "items-stretch",
 };
-export function Form({ children, spacing, schema, align, surface, padding, rounded, border, shadow, className = "", ...props }) {
+export function Form({ children, spacing, schema, align, gap, surface, padding, rounded, border, shadow, className = "", ...props }) {
     const helpers = useFormShellState(schema);
     const content = typeof children === "function"
         ? children(helpers)
@@ -52,6 +52,7 @@ export function Form({ children, spacing, schema, align, surface, padding, round
                 "appkit-form",
                 spacing ? FORM_SPACING_MAP[spacing] : "",
                 align ? FORM_ALIGN_MAP[align] : "",
+                gap ? GAP_MAP[gap] : "",
                 buildSurfaceClasses({ surface, padding, rounded, border, shadow }),
                 className,
             ].filter(Boolean).join(" "), ...props, children: content }) }));

package/dist/ui/components/Radio.d.ts

@@ -16,3 +16,10 @@ export interface RadioGroupProps {
     required?: boolean;
 }
 export declare function RadioGroup({ name, options, value, onChange, label, error, orientation, variant, required, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+/** Standalone single radio button — mirrors the `Checkbox` API. Use `RadioGroup` when all options are known upfront. */
+export interface RadioItemProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: React.ReactNode;
+    suffix?: React.ReactNode;
+    error?: React.ReactNode;
+}
+export declare function RadioItem({ label, suffix, error, className, checked, disabled, id, ...props }: RadioItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Radio.js

@@ -1,4 +1,6 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { Label, Span, Text } from "./Typography";
 const UI_RADIO = {
     group: "appkit-radio-group",
@@ -61,3 +63,8 @@ export function RadioGroup({ name, options, value, onChange, label, error, orien
                                         ].join(" "), children: _jsx("span", { className: selected ? UI_RADIO.toggle.dotInner : "hidden" }) }), _jsx(Span, { children: option.label })] })] }, option.value));
                 }) }), error && (_jsx(Text, { size: "sm", variant: "error", className: "mt-1.5", role: "alert", children: error }))] }));
 }
+export function RadioItem({ label, suffix, error, className = "", checked, disabled, id, ...props }) {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    return (_jsxs("div", { className: "appkit-radio-item", "data-section": "radio-item-div", children: [_jsxs(Label, { htmlFor: inputId, className: ["appkit-radio-item__label", disabled ? "appkit-radio-item__label--disabled" : ""].filter(Boolean).join(" "), children: [_jsx("span", { className: "appkit-radio-item__box-wrap", children: _jsx("input", { ...props, id: inputId, type: "radio", checked: checked, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: ["appkit-radio-item__input", error ? "appkit-radio-item__input--error" : "", className].filter(Boolean).join(" ") }) }), (label || suffix) && (_jsxs("span", { className: "appkit-radio-item__content", children: [label ? _jsx(Span, { className: "appkit-radio-item__text", children: label }) : _jsx("span", {}), suffix] }))] }), error && (_jsx(Text, { size: "sm", variant: "error", className: "appkit-radio-item__error", role: "alert", children: error }))] }));
+}

package/dist/ui/components/surface-tokens.d.ts

@@ -228,6 +228,10 @@ export interface SurfaceProps {
     /** Independent vertical padding. Use with `paddingX` when you need different x/y padding without authoring raw className. */
     paddingY?: YPaddingKey;
     rounded?: RoundedKey;
+    /** Round only the top two corners — replaces raw `rounded-t-*` className on primitives. */
+    roundedTop?: RoundedKey;
+    /** Round only the bottom two corners — replaces raw `rounded-b-*` className on primitives. */
+    roundedBottom?: RoundedKey;
     border?: BorderKey;
     shadow?: ShadowKey;
     /** Overflow behaviour — replaces consumer `overflow-*` className. */

package/dist/ui/components/surface-tokens.js

@@ -108,6 +108,28 @@ export const ROUNDED_MAP = {
     "3xl": "rounded-3xl",
     full: "rounded-full",
 };
+const ROUNDED_TOP_MAP = {
+    none: "",
+    default: "rounded-t",
+    sm: "rounded-t-sm",
+    md: "rounded-t-md",
+    lg: "rounded-t-lg",
+    xl: "rounded-t-xl",
+    "2xl": "rounded-t-2xl",
+    "3xl": "rounded-t-3xl",
+    full: "rounded-t-full",
+};
+const ROUNDED_BOTTOM_MAP = {
+    none: "",
+    default: "rounded-b",
+    sm: "rounded-b-sm",
+    md: "rounded-b-md",
+    lg: "rounded-b-lg",
+    xl: "rounded-b-xl",
+    "2xl": "rounded-b-2xl",
+    "3xl": "rounded-b-3xl",
+    full: "rounded-b-full",
+};
 export const BORDER_MAP = {
     none: "",
     default: "border border-zinc-200 dark:border-slate-700",
@@ -238,6 +260,8 @@ export function buildSurfaceClasses(props) {
         props.paddingX ? X_ONLY_MAP[props.paddingX] : "",
         props.paddingY ? Y_ONLY_MAP[props.paddingY] : "",
         props.rounded ? ROUNDED_MAP[props.rounded] : "",
+        props.roundedTop ? ROUNDED_TOP_MAP[props.roundedTop] : "",
+        props.roundedBottom ? ROUNDED_BOTTOM_MAP[props.roundedBottom] : "",
         props.border ? BORDER_MAP[props.border] : "",
         props.shadow ? SHADOW_MAP[props.shadow] : "",
         props.overflow ? OVERFLOW_MAP[props.overflow] : "",

package/dist/ui/index.d.ts

@@ -79,8 +79,8 @@ export type { SliderProps } from "./components/Slider";
 export { Slider } from "./components/Slider";
 export type { CheckboxProps } from "./components/Checkbox";
 export { Checkbox } from "./components/Checkbox";
-export type { RadioGroupProps, RadioOption } from "./components/Radio";
-export { RadioGroup } from "./components/Radio";
+export type { RadioGroupProps, RadioOption, RadioItemProps } from "./components/Radio";
+export { RadioGroup, RadioItem } from "./components/Radio";
 export type { ToggleProps } from "./components/Toggle";
 export { Toggle } from "./components/Toggle";
 export type { ToastVariant, ToastPosition, ToastProviderProps, } from "./components/Toast";

package/dist/ui/index.js

@@ -42,7 +42,7 @@ export { DateInput, DateRangeInput } from "./components/DateInput";
 export { Textarea } from "./components/Textarea";
 export { Slider } from "./components/Slider";
 export { Checkbox } from "./components/Checkbox";
-export { RadioGroup } from "./components/Radio";
+export { RadioGroup, RadioItem } from "./components/Radio";
 export { Toggle } from "./components/Toggle";
 export { ToastProvider, useToast } from "./components/Toast";
 export { StarRating } from "./components/StarRating";

package/dist/ui/rich-text/RichText.js

@@ -137,7 +137,6 @@ function attachCopyButtons(container) {
         btn.style.cssText =
             "position:absolute;top:8px;right:8px;padding:2px 10px;font-size:11px;font-family:inherit;" +
                 "border-radius:6px;border:1px solid rgba(148,163,184,.4);background:rgba(30,41,59,.75);" +
-                // audit-hex-tokens-ok: copy-button text colour for code blocks (slate-200)
                 "color:#e2e8f0;cursor:pointer;line-height:1.6;user-select:none;transition:background .15s;";
         btn.addEventListener("click", () => {
             const code = pre.querySelector("code")?.textContent ?? pre.textContent ?? "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "3.2.4",
+  "version": "3.2.6",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -103,6 +103,10 @@
       "style": "./dist/tokens/tokens.css",
       "default": "./dist/tokens/tokens.css"
     },
+    "./constants": {
+      "types": "./dist/constants/index.d.ts",
+      "import": "./dist/constants/index.js"
+    },
     "./configs": {
       "types": "./dist/configs/index.d.ts",
       "import": "./dist/configs/index.js",