@immich/ui 0.43.0 → 0.44.0

package/dist/common/context.svelte.d.ts

@@ -8,5 +8,6 @@ export declare const getFieldContext: () => {
     invalid: boolean;
     readOnly: boolean;
     required: boolean;
+    requiredIndicator: boolean;
     disabled: boolean;
 };

package/dist/common/context.svelte.js

@@ -4,6 +4,6 @@ const fieldKey = Symbol(withPrefix('field'));
 export const setFieldContext = (field) => setContext(fieldKey, field);
 export const hasFieldContext = () => hasContext(fieldKey);
 export const getFieldContext = () => {
-    const { label, color = 'secondary', invalid = false, readOnly = false, required = false, disabled = false, description, } = getContext(fieldKey) || {};
-    return { label, description, color, invalid, readOnly, required, disabled };
+    const { label, color = 'secondary', invalid = false, readOnly = false, required = false, requiredIndicator = false, disabled = false, description, } = getContext(fieldKey) || {};
+    return { label, description, color, invalid, readOnly, required, requiredIndicator, disabled };
 };

package/dist/components/Label/Label.svelte

@@ -4,7 +4,7 @@
   import { cleanClass } from '../../utilities/internal.js';
   import { tv } from 'tailwind-variants';
 
-  const { label, size, color, class: className, children, ...restProps }: LabelProps = $props();
+  const { label, size, color, class: className, children, requiredIndicator, ...restProps }: LabelProps = $props();
 
   const styles = tv({
     base: '',
@@ -15,7 +15,13 @@
   });
 </script>
 
-<label class={cleanClass(styles({ size, color }), className)} {...restProps}>
-  {#if label}{label}{/if}
-  {@render children?.()}
-</label>
+<div class="inline-block">
+  <label class={cleanClass(styles({ size, color }), className)} {...restProps}>
+    {#if label}{label}{/if}
+    {@render children?.()}
+  </label>
+
+  {#if requiredIndicator}
+    <span aria-hidden="true" class="text-danger">*</span>
+  {/if}
+</div>

package/dist/internal/Button.svelte

@@ -36,7 +36,7 @@
   const disabled = $derived((restProps as HTMLButtonAttributes).disabled || loading);
 
   const buttonVariants = tv({
-    base: 'ring-offset-background focus-visible:ring-ring flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+    base: 'ring-offset-background focus-visible:ring-ring flex items-center justify-center gap-1 rounded-md text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
     variants: {
       disabled: {
         true: 'disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50',

package/dist/types.d.ts

@@ -96,6 +96,7 @@ export type LabelProps = {
     class?: string;
     size?: Size;
     color?: TextColor;
+    requiredIndicator?: boolean;
     children?: Snippet;
 } & HTMLLabelAttributes;
 export type FieldContext = {
@@ -104,6 +105,7 @@ export type FieldContext = {
     invalid?: boolean;
     disabled?: boolean;
     required?: boolean;
+    requiredIndicator?: boolean;
     readOnly?: boolean;
 } & LabelProps;
 type BaseInputProps<T> = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",