@simplysm/solid 13.0.84 → 13.0.86

package/src/components/form-control/combobox/Combobox.tsx

@@ -137,7 +137,9 @@ const ComboboxItem: ParentComponent<ComboboxItemProps> = <TValue,>(
 //#endregion
 
 // Props definition
-export interface ComboboxProps<TValue = unknown> {
+
+/** Base props shared by all Combobox variants */
+interface ComboboxBaseProps<TValue> {
   /** Currently selected value */
   value?: TValue;
 
@@ -150,12 +152,6 @@ export interface ComboboxProps<TValue = unknown> {
   /** Debounce delay (default: 300ms) */
   debounceMs?: number;
 
-  /** Allow custom values */
-  allowsCustomValue?: boolean;
-
-  /** Custom value parsing function */
-  parseCustomValue?: (text: string) => TValue;
-
   /** Function to render selected value (required) */
   renderValue: (value: TValue) => JSX.Element;
 
@@ -190,6 +186,29 @@ export interface ComboboxProps<TValue = unknown> {
   children?: JSX.Element;
 }
 
+/** Custom value with parser: TValue can be anything */
+interface ComboboxCustomParserProps<TValue> extends ComboboxBaseProps<TValue> {
+  allowsCustomValue: true;
+  parseCustomValue: (text: string) => TValue;
+}
+
+/** Custom value without parser: TValue MUST be string */
+interface ComboboxCustomStringProps extends ComboboxBaseProps<string> {
+  allowsCustomValue: true;
+  parseCustomValue?: undefined;
+}
+
+/** No custom value (default) */
+interface ComboboxDefaultProps<TValue> extends ComboboxBaseProps<TValue> {
+  allowsCustomValue?: false;
+  parseCustomValue?: undefined;
+}
+
+export type ComboboxProps<TValue = unknown> =
+  | ComboboxCustomParserProps<TValue>
+  | ComboboxCustomStringProps
+  | ComboboxDefaultProps<TValue>;
+
 /**
  * Combobox component
  *
@@ -220,8 +239,15 @@ export interface ComboboxProps<TValue = unknown> {
  * </Combobox>
  * ```
  */
+/** Internal props used after splitProps — collapses the discriminated union for runtime use */
+interface ComboboxInternalProps<TValue> extends ComboboxBaseProps<TValue> {
+  allowsCustomValue?: boolean;
+  parseCustomValue?: (text: string) => TValue;
+  children?: JSX.Element;
+}
+
 const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
-  const [local, rest] = splitProps(props as ComboboxProps<TValue> & { children?: JSX.Element }, [
+  const [local, rest] = splitProps(props as ComboboxInternalProps<TValue>, [
     "children",
     "class",
     "style",
@@ -252,8 +278,8 @@ const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
   // Selected value management (controlled/uncontrolled pattern)
   const [getValue, setInternalValue] = createControllableSignal<TValue | undefined>({
     value: () => local.value,
-    onChange: () => local.onValueChange,
-  } as Parameters<typeof createControllableSignal<TValue | undefined>>[0]);
+    onChange: () => local.onValueChange as ((value: TValue | undefined) => void) | undefined,
+  });
 
   // Debounce queue (created once on mount, debounceMs only used as initial value)
   const debounceQueue = new DebounceQueue(local.debounceMs ?? 300);
@@ -270,7 +296,7 @@ const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
 
   // Select value
   const selectValue = (value: TValue) => {
-    setInternalValue(value as any);
+    setInternalValue(value);
     setQuery("");
     setOpen(false);
   };
@@ -346,9 +372,8 @@ const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
       if (local.parseCustomValue) {
         selectValue(local.parseCustomValue(query()));
       } else {
-        setInternalValue(undefined as any);
-        setQuery("");
-        setOpen(false);
+        // TValue is string when parseCustomValue is not provided (enforced by type system)
+        selectValue(query() as TValue);
       }
     }
   };
@@ -391,6 +416,7 @@ const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
           class={clsx("min-w-0 flex-1 bg-transparent outline-none", text.placeholder)}
           value={query()}
           placeholder={currentValue === undefined ? local.placeholder : undefined}
+
           disabled={local.disabled}
           autocomplete="one-time-code"
           onInput={handleInput}
@@ -399,7 +425,7 @@ const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
     }
 
     // Show value if selected and dropdown is closed
-    return <div class="truncate">{local.renderValue(currentValue)}</div>;
+    return <div class="whitespace-nowrap">{local.renderValue(currentValue)}</div>;
   };
 
   // Render items
@@ -454,7 +480,7 @@ const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
                 style={local.style}
                 onKeyDown={handleTriggerKeyDown}
               >
-                <div class="flex-1 overflow-hidden whitespace-nowrap">{renderDisplayContent()}</div>
+                <div class="flex-1 whitespace-nowrap">{renderDisplayContent()}</div>
                 <div class={chevronWrapperClass}>
                   <Show
                     when={busyCount() > 0}

package/src/components/form-control/date-range-picker/DateRangePicker.tsx

@@ -3,9 +3,8 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { DateOnly } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { type FieldSize } from "../field/Field.styles";
 import { text } from "../../../styles/base.styles";
-import { gap } from "../../../styles/control.styles";
+import { type ComponentSize, gap } from "../../../styles/control.styles";
 import { DatePicker } from "../field/DatePicker";
 import { Select } from "../select/Select";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
@@ -38,7 +37,7 @@ export interface DateRangePickerProps {
   disabled?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Custom class */
   class?: string;
@@ -153,11 +152,8 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
     setTo(newTo);
   };
 
-  // Wrapper CSS class
-  const getWrapperClass = () => twMerge(clsx("inline-flex items-center", gap.md), local.class);
-
   return (
-    <div {...rest} data-date-range-picker class={getWrapperClass()} style={local.style}>
+    <div {...rest} data-date-range-picker class={twMerge(clsx("inline-flex items-center", gap.md), local.class)} style={local.style}>
       <Select
         value={periodType()}
         onValueChange={handlePeriodTypeChange}
@@ -172,7 +168,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
         required
         disabled={local.disabled}
         size={local.size}
-        inset
+        class="min-w-0"
       >
         <Select.Item value={"day" as DateRangePeriodType}>
           {i18n.t("dateRangePicker.day")}
@@ -192,6 +188,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
             unit={periodType() === "month" ? "month" : "date"}
             value={from()}
             onValueChange={handleFromChange}
+            required={local.required}
             disabled={local.disabled}
             size={local.size}
           />
@@ -201,6 +198,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
           unit="date"
           value={from()}
           onValueChange={handleFromChange}
+          required={local.required}
           disabled={local.disabled}
           size={local.size}
         />
@@ -210,6 +208,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
           value={to()}
           onValueChange={handleToChange}
           min={from()}
+          required={local.required}
           disabled={local.disabled}
           size={local.size}
         />

package/src/components/form-control/editor/RichTextEditor.tsx

@@ -23,9 +23,8 @@ import TableHeader from "@tiptap/extension-table-header";
 import TableCell from "@tiptap/extension-table-cell";
 import Image from "@tiptap/extension-image";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import type { FieldSize } from "../field/Field.styles";
 import { bg, border, text } from "../../../styles/base.styles";
-import { pad } from "../../../styles/control.styles";
+import { type ComponentSize, pad } from "../../../styles/control.styles";
 import { EditorToolbar } from "./EditorToolbar";
 
 export interface RichTextEditorProps {
@@ -39,7 +38,7 @@ export interface RichTextEditorProps {
   disabled?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Custom class */
   class?: string;
@@ -49,7 +48,7 @@ export interface RichTextEditorProps {
 }
 
 // Editor content size-based style
-const editorContentSizeClasses: Record<FieldSize, string> = {
+const editorContentSizeClasses: Record<ComponentSize, string> = {
   md: clsx(pad.xl, "min-h-32"),
   xs: clsx(pad.xs, "min-h-12"),
   sm: clsx(pad.sm, "min-h-24"),
@@ -146,18 +145,17 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
     editor()?.destroy();
   });
 
-  const getWrapperClass = () =>
-    twMerge(
-      clsx("flex flex-col bg-primary-50 dark:bg-primary-950/30", text.default, "border", border.default, "rounded focus-within:border-primary-500"),
-      local.disabled && clsx(bg.muted, text.muted),
-      local.class,
-    );
-
-  const getContentClass = () =>
-    twMerge("outline-none prose prose-sm max-w-none dark:prose-invert", editorContentSizeClasses[local.size ?? "md"]);
-
   return (
-    <div {...rest} data-rich-text-editor class={getWrapperClass()} style={local.style}>
+    <div
+      {...rest}
+      data-rich-text-editor
+      class={twMerge(
+        clsx("flex flex-col", text.default, "border", border.default, "rounded focus-within:border-primary-500"),
+        local.disabled && clsx(bg.muted, text.muted),
+        local.class,
+      )}
+      style={local.style}
+    >
       <Show when={editor()}>
         {(instance) => (
           <Show when={!local.disabled}>
@@ -165,7 +163,7 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
           </Show>
         )}
       </Show>
-      <div ref={editorRef} class={getContentClass()} />
+      <div ref={editorRef} class={twMerge("outline-none prose prose-sm max-w-none dark:prose-invert bg-primary-50 dark:bg-primary-950/30", editorContentSizeClasses[local.size ?? "md"])} />
     </div>
   );
 };

package/src/components/form-control/field/DatePicker.tsx

@@ -1,7 +1,8 @@
 import { type Component, createMemo, type JSX, splitProps } from "solid-js";
 import { DateOnly } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { fieldInputClass, type FieldSize, getFieldWrapperClass } from "./Field.styles";
+import { fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import type { ComponentSize } from "../../../styles/control.styles";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
 import { FieldShell } from "./FieldShell";
 
@@ -33,7 +34,7 @@ export interface DatePickerProps {
   readOnly?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Borderless style */
   inset?: boolean;

package/src/components/form-control/field/DateTimePicker.tsx

@@ -1,7 +1,8 @@
 import { type Component, createMemo, type JSX, splitProps } from "solid-js";
 import { DateTime } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { type FieldSize, fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import { fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import type { ComponentSize } from "../../../styles/control.styles";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
 import { FieldShell } from "./FieldShell";
 
@@ -33,7 +34,7 @@ export interface DateTimePickerProps {
   readOnly?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Borderless style */
   inset?: boolean;

package/src/components/form-control/field/Field.styles.ts

@@ -3,8 +3,6 @@ import { twMerge } from "tailwind-merge";
 import { type ComponentSize, gap, pad } from "../../../styles/control.styles";
 import { border, text } from "../../../styles/base.styles";
 
-export type FieldSize = ComponentSize;
-
 // ── Form Field Common Surface (background + text + border + focus) ──
 export const fieldSurface = clsx(
   "bg-primary-50 dark:bg-primary-950/30",
@@ -23,7 +21,7 @@ export const fieldBaseClass = clsx(
 );
 
 // Size-specific styles
-export const fieldSizeClasses: Record<FieldSize, string> = {
+export const fieldSizeClasses: Record<ComponentSize, string> = {
   md: clsx("h-field", pad.md),
   xs: clsx("h-field-xs", pad.xs),
   sm: clsx("h-field-sm", pad.sm),
@@ -41,7 +39,7 @@ export const fieldInsetClass = clsx(
 );
 
 // Inset heights (excluding 2px border)
-export const fieldInsetSizeHeightClasses: Record<FieldSize, string> = {
+export const fieldInsetSizeHeightClasses: Record<ComponentSize, string> = {
   md: clsx`h-field-inset`,
   xs: clsx`h-field-inset-xs`,
   sm: clsx`h-field-inset-sm`,
@@ -56,7 +54,7 @@ export const fieldDisabledClass = clsx("bg-base-100 text-base-500 dark:bg-base-8
 export const textAreaBaseClass = clsx("inline-block w-48", fieldSurface);
 
 // Textarea size-specific styles (h-field-* removed)
-export const textAreaSizeClasses: Record<FieldSize, string> = {
+export const textAreaSizeClasses: Record<ComponentSize, string> = {
   md: pad.md,
   xs: pad.xs,
   sm: pad.sm,
@@ -74,7 +72,7 @@ export const fieldInputClass = clsx(
 );
 
 // Prefix icon gap classes (replaces nested ternary)
-export const fieldGapClasses: Record<FieldSize, string> = {
+export const fieldGapClasses: Record<ComponentSize, string> = {
   md: gap.md,
   xs: gap.xs,
   sm: gap.sm,
@@ -84,7 +82,7 @@ export const fieldGapClasses: Record<FieldSize, string> = {
 
 // Shared wrapper class generation function
 export function getFieldWrapperClass(options: {
-  size?: FieldSize;
+  size?: ComponentSize;
   disabled?: boolean;
   inset?: boolean;
   includeCustomClass?: string | false;
@@ -103,7 +101,7 @@ export function getFieldWrapperClass(options: {
 
 // Textarea-specific wrapper class generation function
 export function getTextareaWrapperClass(options: {
-  size?: FieldSize;
+  size?: ComponentSize;
   disabled?: boolean;
   inset?: boolean;
   includeCustomClass?: string | false;

package/src/components/form-control/field/NumberInput.tsx

@@ -9,23 +9,16 @@ import {
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { createSlot } from "../../../helpers/createSlot";
 import {
-  type FieldSize,
   fieldInputClass,
   fieldGapClasses,
   getFieldWrapperClass,
 } from "./Field.styles";
+import type { ComponentSize } from "../../../styles/control.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
 import { FieldShell } from "./FieldShell";
 import clsx from "clsx";
 
-// NumberInput-specific input style (right-aligned + spinner hidden)
-const numberInputClass = clsx(
-  fieldInputClass,
-  "text-right",
-  "[&::-webkit-outer-spin-button]:appearance-none",
-  "[&::-webkit-inner-spin-button]:appearance-none",
-);
 
 const [NumberInputPrefixSlot, createNumberInputPrefixAccessor] = createSlot<{ children: JSX.Element }>();
 export const NumberInputPrefix = NumberInputPrefixSlot;
@@ -56,7 +49,7 @@ export interface NumberInputProps {
   readOnly?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Borderless style */
   inset?: boolean;
@@ -331,9 +324,15 @@ const NumberInputInner = (props: NumberInputProps): JSX.Element => {
         <input
           type="text"
           inputmode="numeric"
-          class={numberInputClass}
+          class={clsx(
+            fieldInputClass,
+            "text-right",
+            "[&::-webkit-outer-spin-button]:appearance-none",
+            "[&::-webkit-inner-spin-button]:appearance-none",
+          )}
           value={displayValue()}
           placeholder={local.placeholder}
+
           title={local.title}
           autocomplete="one-time-code"
           onInput={handleInput}

package/src/components/form-control/field/TextInput.tsx

@@ -5,9 +5,9 @@ import { createIMEHandler } from "../../../hooks/createIMEHandler";
 import {
   fieldGapClasses,
   fieldInputClass,
-  type FieldSize,
   getFieldWrapperClass,
 } from "./Field.styles";
+import type { ComponentSize } from "../../../styles/control.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { FieldShell } from "./FieldShell";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
@@ -41,7 +41,7 @@ export interface TextInputProps {
   readOnly?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Borderless style */
   inset?: boolean;
@@ -286,6 +286,7 @@ const TextInputInner = (props: TextInputProps) => {
           class={fieldInputClass}
           value={inputValue()}
           placeholder={local.placeholder}
+
           title={local.title}
           autocomplete={local.autocomplete ?? "one-time-code"}
           onInput={handleInput}

package/src/components/form-control/field/Textarea.tsx

@@ -4,7 +4,8 @@ import { twMerge } from "tailwind-merge";
 import { text } from "../../../styles/base.styles";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { createIMEHandler } from "../../../hooks/createIMEHandler";
-import { type FieldSize, textAreaSizeClasses, getTextareaWrapperClass } from "./Field.styles";
+import { textAreaSizeClasses, getTextareaWrapperClass } from "./Field.styles";
+import type { ComponentSize } from "../../../styles/control.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { FieldShell } from "./FieldShell";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
@@ -29,7 +30,7 @@ export interface TextareaProps {
   readOnly?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Borderless style */
   inset?: boolean;
@@ -59,13 +60,6 @@ export interface TextareaProps {
   style?: JSX.CSSProperties;
 }
 
-const textareaBaseClass = clsx(
-  "absolute left-0 top-0",
-  "size-full",
-  "resize-none overflow-hidden",
-  "bg-transparent",
-  text.placeholder,
-);
 
 /**
  * Textarea component
@@ -164,8 +158,6 @@ export const Textarea: Component<TextareaProps> = (props) => {
       "whitespace-pre-wrap break-all",
     );
 
-  const getTextareaClass = () =>
-    twMerge(textareaBaseClass, textAreaSizeClasses[local.size ?? "md"], local.inset && "p-0");
 
   // Whether editable
   const isEditable = () => !local.disabled && !local.readOnly;
@@ -228,7 +220,17 @@ export const Textarea: Component<TextareaProps> = (props) => {
         {contentForHeight()}
       </div>
       <textarea
-        class={getTextareaClass()}
+        class={twMerge(
+          clsx(
+            "absolute left-0 top-0",
+            "size-full",
+            "resize-none overflow-hidden",
+            "bg-transparent",
+            text.placeholder,
+          ),
+          textAreaSizeClasses[local.size ?? "md"],
+          local.inset && "p-0",
+        )}
         value={value()}
         placeholder={local.placeholder}
         title={local.title}

package/src/components/form-control/field/TimePicker.tsx

@@ -1,7 +1,8 @@
 import { type Component, createMemo, type JSX, splitProps } from "solid-js";
 import { Time } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { type FieldSize, fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import { fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import type { ComponentSize } from "../../../styles/control.styles";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
 import { FieldShell } from "./FieldShell";
 
@@ -27,7 +28,7 @@ export interface TimePickerProps {
   readOnly?: boolean;
 
   /** Size */
-  size?: FieldSize;
+  size?: ComponentSize;
 
   /** Borderless style */
   inset?: boolean;

package/src/components/form-control/numpad/Numpad.tsx

@@ -127,7 +127,7 @@ export const Numpad: Component<NumpadProps> = (props) => {
     setInputStr(valueToInputStr(val));
   };
 
-  const buttonSize = () => props.size ?? "lg";
+  const buttonSize = () => props.size ?? "md";
 
   return (
     <div data-numpad class={twMerge(clsx("grid grid-cols-3", gap.sm, "w-auto"), props.class)} style={props.style}>
@@ -138,7 +138,7 @@ export const Numpad: Component<NumpadProps> = (props) => {
           onValueChange={handleFieldValueChange}
           placeholder={props.placeholder}
           readOnly={props.inputDisabled}
-          inset
+          size={buttonSize()}
           class="w-full"
           useGrouping={false}
         />
@@ -148,7 +148,6 @@ export const Numpad: Component<NumpadProps> = (props) => {
           theme="primary"
           variant="solid"
           size={buttonSize()}
-          inset
           disabled={props.required && value() == null}
           onClick={handleEnter}
         >
@@ -158,60 +157,59 @@ export const Numpad: Component<NumpadProps> = (props) => {
 
       {/* Row 2: optional Minus + C + BS */}
       <Show when={props.withMinusButton}>
-        <Button size={buttonSize()} inset onClick={handleMinus}>
+        <Button size={buttonSize()} onClick={handleMinus}>
           -
         </Button>
       </Show>
       <Button
         size={buttonSize()}
-        inset
-        onClick={handleClear}
+               onClick={handleClear}
         class={clsx(props.withMinusButton ? "col-span-1" : "col-span-2", "text-danger-500")}
       >
         <Icon icon={IconEraser} />
       </Button>
-      <Button size={buttonSize()} inset onClick={handleBackspace} class="text-warning-500">
+      <Button size={buttonSize()} onClick={handleBackspace} class="text-warning-500">
         <Icon icon={IconArrowLeft} />
       </Button>
 
       {/* Row 3: 7 8 9 */}
-      <Button size={buttonSize()} inset onClick={() => handleDigit("7")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("7")}>
         7
       </Button>
-      <Button size={buttonSize()} inset onClick={() => handleDigit("8")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("8")}>
         8
       </Button>
-      <Button size={buttonSize()} inset onClick={() => handleDigit("9")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("9")}>
         9
       </Button>
 
       {/* Row 4: 4 5 6 */}
-      <Button size={buttonSize()} inset onClick={() => handleDigit("4")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("4")}>
         4
       </Button>
-      <Button size={buttonSize()} inset onClick={() => handleDigit("5")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("5")}>
         5
       </Button>
-      <Button size={buttonSize()} inset onClick={() => handleDigit("6")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("6")}>
         6
       </Button>
 
       {/* Row 5: 1 2 3 */}
-      <Button size={buttonSize()} inset onClick={() => handleDigit("1")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("1")}>
         1
       </Button>
-      <Button size={buttonSize()} inset onClick={() => handleDigit("2")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("2")}>
         2
       </Button>
-      <Button size={buttonSize()} inset onClick={() => handleDigit("3")}>
+      <Button size={buttonSize()} onClick={() => handleDigit("3")}>
         3
       </Button>
 
       {/* Row 6: 0 (colspan 2) + . */}
-      <Button size={buttonSize()} inset class="col-span-2" onClick={() => handleDigit("0")}>
+      <Button size={buttonSize()} class="col-span-2" onClick={() => handleDigit("0")}>
         0
       </Button>
-      <Button size={buttonSize()} inset onClick={handleDot}>
+      <Button size={buttonSize()} onClick={handleDot}>
         .
       </Button>
     </div>