@manafishrov/ui 1.3.6 → 1.3.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "@manafishrov/ui",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "description": "Styled component library for Manafish interfaces ",
   "license": "AGPL-3.0-or-later",
   "repository": {

package/src/components/Select.tsx

@@ -162,7 +162,7 @@ export const SelectTrigger: Component<
       data-size={size}
       class={cn(
         'px-2.5 text-sm *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*="size-"])]:size-4 gap-1.5 min-w-0 shadow-xs flex w-full items-center justify-between rounded-lg border border-input bg-transparent whitespace-nowrap transition-[color,box-shadow] outline-none select-none disabled:cursor-not-allowed disabled:opacity-50 data-placeholder-shown:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center dark:bg-input/30 dark:hover:bg-input/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:text-muted-foreground',
-        'data-[size=default]:h-10 data-[size=sm]:h-8 data-[size=sm]:rounded-[min(var(--radius-md),10px)]',
+        'data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)]',
         'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[focus-visible]:border-ring data-[focus-visible]:ring-[3px] data-[focus-visible]:ring-ring/50',
         'data-[invalid=true]:border-destructive data-[invalid=true]:ring-[3px] data-[invalid=true]:ring-destructive/20 dark:data-[invalid=true]:ring-destructive/40',
         'data-[disabled=true]:bg-input/50 data-[disabled=true]:opacity-50 dark:data-[disabled=true]:bg-input/80',

package/src/components/form/SelectField.tsx

@@ -5,6 +5,7 @@ import {
   Select,
   SelectContent,
   SelectControl,
+  SelectIndicator,
   SelectPositioner,
   SelectTrigger,
   SelectValue,
@@ -13,11 +14,18 @@ import {
 import { useFieldContext } from './context';
 import { WithTrailingAddon } from './WithTrailingAddon';
 
-const SelectInput: Component<{ placeholder: string; children: JSX.Element }> = (props) => (
+const SelectInput: Component<{
+  placeholder: string;
+  showSelectIndicator: boolean | undefined;
+  children: JSX.Element;
+}> = (props) => (
   <>
     <SelectControl>
       <SelectTrigger>
         <SelectValue placeholder={props.placeholder} />
+        <Show when={props.showSelectIndicator !== false}>
+          <SelectIndicator />
+        </Show>
       </SelectTrigger>
     </SelectControl>
     <SelectPositioner>
@@ -30,21 +38,25 @@ export type SelectFieldProps = ComponentProps<typeof Select> & {
   label?: string;
   description?: string;
   placeholder?: string;
+  showSelectIndicator?: boolean;
   trailingAddon?: JSXElement;
 };
 
+const SELECT_FIELD_PROPS = [
+  'label',
+  'description',
+  'required',
+  'disabled',
+  'readOnly',
+  'placeholder',
+  'showSelectIndicator',
+  'children',
+  'trailingAddon',
+] as const;
+
 export const SelectField: Component<SelectFieldProps> = (props) => {
   const field = useFieldContext<string[]>();
-  const [local, others] = splitProps(props, [
-    'label',
-    'description',
-    'required',
-    'disabled',
-    'readOnly',
-    'placeholder',
-    'children',
-    'trailingAddon',
-  ]);
+  const [local, others] = splitProps(props, SELECT_FIELD_PROPS);
 
   return (
     <Field
@@ -69,7 +81,12 @@ export const SelectField: Component<SelectFieldProps> = (props) => {
             readOnly={local.readOnly ?? false}
             {...others}
           >
-            <SelectInput placeholder={local.placeholder ?? ''}>{local.children}</SelectInput>
+            <SelectInput
+              placeholder={local.placeholder ?? ''}
+              showSelectIndicator={local.showSelectIndicator}
+            >
+              {local.children}
+            </SelectInput>
           </Select>
         </WithTrailingAddon>
         <FieldError errors={field().state.meta.errors} />

package/src/components/toaster/Toaster.tsx

@@ -24,7 +24,7 @@ export const toast = createToaster({
 const ToastItem: Component<{ toast: Accessor<ToastOptions> }> = (props) => (
   <Toast.Root
     class={cn(
-      'group gap-3 p-4 pr-10 shadow-lg min-w-72 pointer-events-auto relative flex w-full items-center rounded-lg border bg-popover transition-all',
+      'group gap-3 p-4 pr-10 shadow-lg min-w-72 pointer-events-auto relative flex w-full items-center rounded-lg border bg-popover',
       'data-[state=open]:sm:slide-in-from-bottom-full data-[state=open]:animate-in data-[state=open]:slide-in-from-top-full',
       'border-border text-popover-foreground',
     )}
@@ -50,7 +50,7 @@ const ToastItem: Component<{ toast: Accessor<ToastOptions> }> = (props) => (
           {props.toast().title}
         </Toast.Title>
       </Show>
-      <Show when={props.toast().description}>
+      <Show when={props.toast().description} fallback={<div aria-hidden='true' class='h-5' />}>
         <Toast.Description class='text-sm opacity-90'>
           {props.toast().description}
         </Toast.Description>

package/src/components/toaster/toaster.css

@@ -1,11 +1,12 @@
 /* Toast positioning and animations - required for Ark UI stacking behavior */
 
 [data-scope='toast'][data-part='root'] {
-  translate: var(--x, 0px) var(--y, 0px);
-  scale: var(--scale, 1);
-  z-index: var(--z-index, 1);
-  height: var(--height, auto);
-  opacity: var(--opacity, 1);
+  translate: var(--x) var(--y);
+  scale: var(--scale);
+  z-index: var(--z-index);
+  height: var(--height);
+  min-height: 48px;
+  opacity: var(--opacity);
   will-change: translate, opacity, scale, height;
   transition:
     translate 400ms,