@fluentui/react-label 9.3.15 → 9.4.0

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-label
 
-This log was last generated on Wed, 25 Feb 2026 13:28:23 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Apr 2026 15:50:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.4.0)
+
+Wed, 01 Apr 2026 15:50:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.3.15..@fluentui/react-label_v9.4.0)
+
+### Minor changes
+
+- feat: add useLabelBase_unstable hook ([PR #35905](https://github.com/microsoft/fluentui/pull/35905) by dmytrokirpa@microsoft.com)
+
 ## [9.3.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.3.15)
 
-Wed, 25 Feb 2026 13:28:23 GMT 
+Wed, 25 Feb 2026 13:32:28 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.3.14..@fluentui/react-label_v9.3.15)
 
 ### Patches

package/dist/index.d.ts

@@ -11,6 +11,17 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const Label: ForwardRefComponent<LabelProps>;
 
+/**
+ * Label props without design-specific props (size, weight).
+ * Use this when building a label that is unstyled or uses a custom design system.
+ */
+export declare type LabelBaseProps = Omit<LabelProps, 'size' | 'weight'>;
+
+/**
+ * Label state without design-specific state (size, weight).
+ */
+export declare type LabelBaseState = Omit<LabelState, 'size' | 'weight'>;
+
 export declare const labelClassNames: SlotClassNames<LabelSlots>;
 
 /**
@@ -53,7 +64,7 @@ export declare type LabelState = ComponentState<LabelSlots> & Required<Pick<Labe
 /**
  * Render the final JSX of Label
  */
-export declare const renderLabel_unstable: (state: LabelState) => JSXElement;
+export declare const renderLabel_unstable: (state: LabelBaseState) => JSXElement;
 
 /**
  * Create the state required to render Label.
@@ -66,6 +77,14 @@ export declare const renderLabel_unstable: (state: LabelState) => JSXElement;
  */
 export declare const useLabel_unstable: (props: LabelProps, ref: React_2.Ref<HTMLElement>) => LabelState;
 
+/**
+ * Create the base state required to render Label, without design-specific props (size, weight).
+ *
+ * @param props - props from this instance of Label
+ * @param ref - reference to root HTMLElement of Label
+ */
+export declare const useLabelBase_unstable: (props: LabelBaseProps, ref: React_2.Ref<HTMLLabelElement>) => LabelBaseState;
+
 /**
  * Apply styling to the Label slots based on the state
  */

package/lib/Label.js

@@ -1 +1 @@
-export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable } from './components/Label/index';
+export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable, useLabelBase_unstable } from './components/Label/index';

package/lib/Label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Label.ts"],"sourcesContent":["export type { LabelProps, LabelSlots, LabelState } from './components/Label/index';\nexport {\n  Label,\n  labelClassNames,\n  renderLabel_unstable,\n  useLabelStyles_unstable,\n  useLabel_unstable,\n} from './components/Label/index';\n"],"names":["Label","labelClassNames","renderLabel_unstable","useLabelStyles_unstable","useLabel_unstable"],"mappings":"AACA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,2BAA2B"}
+{"version":3,"sources":["../src/Label.ts"],"sourcesContent":["export type { LabelBaseProps, LabelBaseState, LabelProps, LabelSlots, LabelState } from './components/Label/index';\nexport {\n  Label,\n  labelClassNames,\n  renderLabel_unstable,\n  useLabelStyles_unstable,\n  useLabel_unstable,\n  useLabelBase_unstable,\n} from './components/Label/index';\n"],"names":["Label","labelClassNames","renderLabel_unstable","useLabelStyles_unstable","useLabel_unstable","useLabelBase_unstable"],"mappings":"AACA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,2BAA2B"}

package/lib/components/Label/Label.types.js

@@ -1,3 +1,3 @@
 /**
- * State used in rendering Label
+ * Label state without design-specific state (size, weight).
  */ export { };

package/lib/components/Label/Label.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Label/Label.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Label Props\n */\nexport type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & {\n  /**\n   * Renders the label as disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Displays an indicator that the label is for a required field. The required prop can be set to true to display\n   * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.\n   * @default false\n   */\n  required?: boolean | Slot<'span'>;\n\n  /**\n   * A label supports different sizes.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A label supports regular and semibold fontweight.\n   * @default regular\n   */\n  weight?: 'regular' | 'semibold';\n};\n\nexport type LabelSlots = {\n  root: Slot<'label'>;\n  required?: Slot<'span'>;\n};\n\n/**\n * State used in rendering Label\n */\nexport type LabelState = ComponentState<LabelSlots> & Required<Pick<LabelProps, 'disabled' | 'size' | 'weight'>>;\n"],"names":[],"mappings":"AAqCA;;CAEC,GACD,WAAiH"}
+{"version":3,"sources":["../src/components/Label/Label.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Label Props\n */\nexport type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & {\n  /**\n   * Renders the label as disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Displays an indicator that the label is for a required field. The required prop can be set to true to display\n   * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.\n   * @default false\n   */\n  required?: boolean | Slot<'span'>;\n\n  /**\n   * A label supports different sizes.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A label supports regular and semibold fontweight.\n   * @default regular\n   */\n  weight?: 'regular' | 'semibold';\n};\n\nexport type LabelSlots = {\n  root: Slot<'label'>;\n  required?: Slot<'span'>;\n};\n\n/**\n * State used in rendering Label\n */\nexport type LabelState = ComponentState<LabelSlots> & Required<Pick<LabelProps, 'disabled' | 'size' | 'weight'>>;\n\n/**\n * Label props without design-specific props (size, weight).\n * Use this when building a label that is unstyled or uses a custom design system.\n */\nexport type LabelBaseProps = Omit<LabelProps, 'size' | 'weight'>;\n\n/**\n * Label state without design-specific state (size, weight).\n */\nexport type LabelBaseState = Omit<LabelState, 'size' | 'weight'>;\n"],"names":[],"mappings":"AAgDA;;CAEC,GACD,WAAiE"}

package/lib/components/Label/index.js

@@ -1,4 +1,4 @@
 export { Label } from './Label';
 export { renderLabel_unstable } from './renderLabel';
-export { useLabel_unstable } from './useLabel';
+export { useLabel_unstable, useLabelBase_unstable } from './useLabel';
 export { labelClassNames, useLabelStyles_unstable } from './useLabelStyles.styles';

package/lib/components/Label/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Label/index.ts"],"sourcesContent":["export { Label } from './Label';\nexport type { LabelProps, LabelSlots, LabelState } from './Label.types';\nexport { renderLabel_unstable } from './renderLabel';\nexport { useLabel_unstable } from './useLabel';\nexport { labelClassNames, useLabelStyles_unstable } from './useLabelStyles.styles';\n"],"names":["Label","renderLabel_unstable","useLabel_unstable","labelClassNames","useLabelStyles_unstable"],"mappings":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAEhC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}
+{"version":3,"sources":["../src/components/Label/index.ts"],"sourcesContent":["export { Label } from './Label';\nexport type { LabelBaseProps, LabelBaseState, LabelProps, LabelSlots, LabelState } from './Label.types';\nexport { renderLabel_unstable } from './renderLabel';\nexport { useLabel_unstable, useLabelBase_unstable } from './useLabel';\nexport { labelClassNames, useLabelStyles_unstable } from './useLabelStyles.styles';\n"],"names":["Label","renderLabel_unstable","useLabel_unstable","useLabelBase_unstable","labelClassNames","useLabelStyles_unstable"],"mappings":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAEhC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,aAAa;AACtE,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}

package/lib/components/Label/renderLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Label/renderLabel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { LabelState, LabelSlots } from './Label.types';\n\n/**\n * Render the final JSX of Label\n */\nexport const renderLabel_unstable = (state: LabelState): JSXElement => {\n  assertSlots<LabelSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.required && <state.required />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderLabel_unstable","state","root","children","required"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IAExB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,QAAQ,kBAAI,KAACH,MAAMG,QAAQ;;;AAGxC,EAAE"}
+{"version":3,"sources":["../src/components/Label/renderLabel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { LabelBaseState, LabelSlots } from './Label.types';\n\n/**\n * Render the final JSX of Label\n */\nexport const renderLabel_unstable = (state: LabelBaseState): JSXElement => {\n  assertSlots<LabelSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.required && <state.required />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderLabel_unstable","state","root","children","required"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IAExB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,QAAQ,kBAAI,KAACH,MAAMG,QAAQ;;;AAGxC,EAAE"}

package/lib/components/Label/useLabel.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 /**
@@ -9,7 +10,21 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
  * @param props - props from this instance of Label
  * @param ref - reference to root HTMLElement of Label
  */ export const useLabel_unstable = (props, ref)=>{
-    const { disabled = false, required = false, weight = 'regular', size = 'medium' } = props;
+    const { weight = 'regular', size = 'medium', ...baseProps } = props;
+    const state = useLabelBase_unstable(baseProps, ref);
+    return {
+        weight,
+        size,
+        ...state
+    };
+};
+/**
+ * Create the base state required to render Label, without design-specific props (size, weight).
+ *
+ * @param props - props from this instance of Label
+ * @param ref - reference to root HTMLElement of Label
+ */ export const useLabelBase_unstable = (props, ref)=>{
+    const { disabled = false, required = false, ...rest } = props;
     return {
         disabled,
         required: slot.optional(required === true ? '*' : required || undefined, {
@@ -18,18 +33,13 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
             },
             elementType: 'span'
         }),
-        weight,
-        size,
         components: {
             root: 'label',
             required: 'span'
         },
         root: slot.always(getIntrinsicElementProps('label', {
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLLabelElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: ref,
-            ...props
+            ...rest
         }), {
             elementType: 'label'
         })

package/lib/components/Label/useLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Label/useLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { LabelProps, LabelState } from './Label.types';\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles_unstable,\n * before being passed to renderLabel_unstable.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {\n  const { disabled = false, required = false, weight = 'regular', size = 'medium' } = props;\n  return {\n    disabled,\n    required: slot.optional(required === true ? '*' : required || undefined, {\n      defaultProps: { 'aria-hidden': 'true' },\n      elementType: 'span',\n    }),\n    weight,\n    size,\n    components: { root: 'label', required: 'span' },\n    root: slot.always(\n      getIntrinsicElementProps('label', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLLabelElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLLabelElement>,\n        ...props,\n      }),\n      { elementType: 'label' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useLabel_unstable","props","ref","disabled","required","weight","size","optional","undefined","defaultProps","elementType","components","root","always"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAEC,SAAS,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGL;IACpF,OAAO;QACLE;QACAC,UAAUL,KAAKQ,QAAQ,CAACH,aAAa,OAAO,MAAMA,YAAYI,WAAW;YACvEC,cAAc;gBAAE,eAAe;YAAO;YACtCC,aAAa;QACf;QACAL;QACAC;QACAK,YAAY;YAAEC,MAAM;YAASR,UAAU;QAAO;QAC9CQ,MAAMb,KAAKc,MAAM,CACff,yBAAyB,SAAS;YAChC,SAAS;YACT,8EAA8E;YAC9E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAES,aAAa;QAAQ;IAE3B;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Label/useLabel.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { LabelBaseProps, LabelBaseState, LabelProps, LabelState } from './Label.types';\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles_unstable,\n * before being passed to renderLabel_unstable.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {\n  const { weight = 'regular', size = 'medium', ...baseProps } = props;\n  const state = useLabelBase_unstable(baseProps, ref as React.Ref<HTMLLabelElement>);\n\n  return {\n    weight,\n    size,\n    ...state,\n  };\n};\n\n/**\n * Create the base state required to render Label, without design-specific props (size, weight).\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabelBase_unstable = (props: LabelBaseProps, ref: React.Ref<HTMLLabelElement>): LabelBaseState => {\n  const { disabled = false, required = false, ...rest } = props;\n  return {\n    disabled,\n    required: slot.optional(required === true ? '*' : required || undefined, {\n      defaultProps: { 'aria-hidden': 'true' },\n      elementType: 'span',\n    }),\n    components: { root: 'label', required: 'span' },\n    root: slot.always(\n      getIntrinsicElementProps('label', {\n        ref: ref as React.Ref<HTMLLabelElement>,\n        ...rest,\n      }),\n      { elementType: 'label' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useLabel_unstable","props","ref","weight","size","baseProps","state","useLabelBase_unstable","disabled","required","rest","optional","undefined","defaultProps","elementType","components","root","always"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,SAAS,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9D,MAAMK,QAAQC,sBAAsBF,WAAWH;IAE/C,OAAO;QACLC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,wBAAwB,CAACN,OAAuBC;IAC3D,MAAM,EAAEM,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGC,MAAM,GAAGT;IACxD,OAAO;QACLO;QACAC,UAAUV,KAAKY,QAAQ,CAACF,aAAa,OAAO,MAAMA,YAAYG,WAAW;YACvEC,cAAc;gBAAE,eAAe;YAAO;YACtCC,aAAa;QACf;QACAC,YAAY;YAAEC,MAAM;YAASP,UAAU;QAAO;QAC9CO,MAAMjB,KAAKkB,MAAM,CACfnB,yBAAyB,SAAS;YAChCI,KAAKA;YACL,GAAGQ,IAAI;QACT,IACA;YAAEI,aAAa;QAAQ;IAE3B;AACF,EAAE"}

package/lib/index.js

@@ -1 +1 @@
-export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable } from './Label';
+export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable, useLabelBase_unstable } from './Label';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable } from './Label';\nexport type { LabelProps, LabelSlots, LabelState } from './Label';\n"],"names":["Label","labelClassNames","renderLabel_unstable","useLabelStyles_unstable","useLabel_unstable"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,UAAU"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Label,\n  labelClassNames,\n  renderLabel_unstable,\n  useLabelStyles_unstable,\n  useLabel_unstable,\n  useLabelBase_unstable,\n} from './Label';\nexport type { LabelBaseProps, LabelBaseState, LabelProps, LabelSlots, LabelState } from './Label';\n"],"names":["Label","labelClassNames","renderLabel_unstable","useLabelStyles_unstable","useLabel_unstable","useLabelBase_unstable"],"mappings":"AAAA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,UAAU"}

package/lib-commonjs/Label.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderLabel_unstable: function() {
         return _index.renderLabel_unstable;
     },
+    useLabelBase_unstable: function() {
+        return _index.useLabelBase_unstable;
+    },
     useLabelStyles_unstable: function() {
         return _index.useLabelStyles_unstable;
     },

package/lib-commonjs/Label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Label.ts"],"sourcesContent":["export type { LabelProps, LabelSlots, LabelState } from './components/Label/index';\nexport {\n  Label,\n  labelClassNames,\n  renderLabel_unstable,\n  useLabelStyles_unstable,\n  useLabel_unstable,\n} from './components/Label/index';\n"],"names":["Label","labelClassNames","renderLabel_unstable","useLabelStyles_unstable","useLabel_unstable"],"mappings":";;;;;;;;;;;;eAEEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eACpBC,8BAAuB;;;eACvBC,wBAAiB;;;uBACZ,2BAA2B"}
+{"version":3,"sources":["../src/Label.ts"],"sourcesContent":["export type { LabelBaseProps, LabelBaseState, LabelProps, LabelSlots, LabelState } from './components/Label/index';\nexport {\n  Label,\n  labelClassNames,\n  renderLabel_unstable,\n  useLabelStyles_unstable,\n  useLabel_unstable,\n  useLabelBase_unstable,\n} from './components/Label/index';\n"],"names":["Label","labelClassNames","renderLabel_unstable","useLabelStyles_unstable","useLabel_unstable","useLabelBase_unstable"],"mappings":";;;;;;;;;;;;eAEEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,2BAA2B"}

package/lib-commonjs/components/Label/Label.types.js

@@ -1,5 +1,5 @@
 /**
- * State used in rendering Label
+ * Label state without design-specific state (size, weight).
  */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Label/Label.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Label/Label.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Label Props\n */\nexport type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & {\n  /**\n   * Renders the label as disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Displays an indicator that the label is for a required field. The required prop can be set to true to display\n   * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.\n   * @default false\n   */\n  required?: boolean | Slot<'span'>;\n\n  /**\n   * A label supports different sizes.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A label supports regular and semibold fontweight.\n   * @default regular\n   */\n  weight?: 'regular' | 'semibold';\n};\n\nexport type LabelSlots = {\n  root: Slot<'label'>;\n  required?: Slot<'span'>;\n};\n\n/**\n * State used in rendering Label\n */\nexport type LabelState = ComponentState<LabelSlots> & Required<Pick<LabelProps, 'disabled' | 'size' | 'weight'>>;\n"],"names":[],"mappings":"AAqCA;;CAEC,GACD,WAAiH"}
+{"version":3,"sources":["../src/components/Label/Label.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Label Props\n */\nexport type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & {\n  /**\n   * Renders the label as disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Displays an indicator that the label is for a required field. The required prop can be set to true to display\n   * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.\n   * @default false\n   */\n  required?: boolean | Slot<'span'>;\n\n  /**\n   * A label supports different sizes.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A label supports regular and semibold fontweight.\n   * @default regular\n   */\n  weight?: 'regular' | 'semibold';\n};\n\nexport type LabelSlots = {\n  root: Slot<'label'>;\n  required?: Slot<'span'>;\n};\n\n/**\n * State used in rendering Label\n */\nexport type LabelState = ComponentState<LabelSlots> & Required<Pick<LabelProps, 'disabled' | 'size' | 'weight'>>;\n\n/**\n * Label props without design-specific props (size, weight).\n * Use this when building a label that is unstyled or uses a custom design system.\n */\nexport type LabelBaseProps = Omit<LabelProps, 'size' | 'weight'>;\n\n/**\n * Label state without design-specific state (size, weight).\n */\nexport type LabelBaseState = Omit<LabelState, 'size' | 'weight'>;\n"],"names":[],"mappings":"AAgDA;;CAEC,GACD,WAAiE"}

package/lib-commonjs/components/Label/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderLabel_unstable: function() {
         return _renderLabel.renderLabel_unstable;
     },
+    useLabelBase_unstable: function() {
+        return _useLabel.useLabelBase_unstable;
+    },
     useLabelStyles_unstable: function() {
         return _useLabelStylesstyles.useLabelStyles_unstable;
     },

package/lib-commonjs/components/Label/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Label/index.ts"],"sourcesContent":["export { Label } from './Label';\nexport type { LabelProps, LabelSlots, LabelState } from './Label.types';\nexport { renderLabel_unstable } from './renderLabel';\nexport { useLabel_unstable } from './useLabel';\nexport { labelClassNames, useLabelStyles_unstable } from './useLabelStyles.styles';\n"],"names":["Label","renderLabel_unstable","useLabel_unstable","labelClassNames","useLabelStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,YAAK;;;eAILG,qCAAe;;;eAFfF,iCAAoB;;;eAEHG,6CAAuB;;;eADxCF,2BAAiB;;;uBAHJ,UAAU;6BAEK,gBAAgB;0BACnB,aAAa;sCACU,0BAA0B"}
+{"version":3,"sources":["../src/components/Label/index.ts"],"sourcesContent":["export { Label } from './Label';\nexport type { LabelBaseProps, LabelBaseState, LabelProps, LabelSlots, LabelState } from './Label.types';\nexport { renderLabel_unstable } from './renderLabel';\nexport { useLabel_unstable, useLabelBase_unstable } from './useLabel';\nexport { labelClassNames, useLabelStyles_unstable } from './useLabelStyles.styles';\n"],"names":["Label","renderLabel_unstable","useLabel_unstable","useLabelBase_unstable","labelClassNames","useLabelStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,YAAK;;;eAILI,qCAAe;;;eAFfH,iCAAoB;;;eACDE,+BAAqB;;;eACvBE,6CAAuB;;;eADxCH,2BAAiB;;;uBAHJ,UAAU;6BAEK,gBAAgB;0BACI,aAAa;sCACb,0BAA0B"}

package/lib-commonjs/components/Label/renderLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Label/renderLabel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { LabelState, LabelSlots } from './Label.types';\n\n/**\n * Render the final JSX of Label\n */\nexport const renderLabel_unstable = (state: LabelState): JSXElement => {\n  assertSlots<LabelSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.required && <state.required />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderLabel_unstable","state","root","children","required"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,6BAA6B,CAACC;QACnCF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,QAAQ,EAAA,CAAA;;;AAGxC,EAAE"}
+{"version":3,"sources":["../src/components/Label/renderLabel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { LabelBaseState, LabelSlots } from './Label.types';\n\n/**\n * Render the final JSX of Label\n */\nexport const renderLabel_unstable = (state: LabelBaseState): JSXElement => {\n  assertSlots<LabelSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.required && <state.required />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderLabel_unstable","state","root","children","required"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,6BAA6B,CAACC;QACnCF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,QAAQ,EAAA,CAAA;;;AAGxC,EAAE"}

package/lib-commonjs/components/Label/useLabel.js

@@ -1,10 +1,19 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useLabel_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useLabelBase_unstable: function() {
+        return useLabelBase_unstable;
+    },
+    useLabel_unstable: function() {
         return useLabel_unstable;
     }
 });
@@ -12,7 +21,16 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const useLabel_unstable = (props, ref)=>{
-    const { disabled = false, required = false, weight = 'regular', size = 'medium' } = props;
+    const { weight = 'regular', size = 'medium', ...baseProps } = props;
+    const state = useLabelBase_unstable(baseProps, ref);
+    return {
+        weight,
+        size,
+        ...state
+    };
+};
+const useLabelBase_unstable = (props, ref)=>{
+    const { disabled = false, required = false, ...rest } = props;
     return {
         disabled,
         required: _reactutilities.slot.optional(required === true ? '*' : required || undefined, {
@@ -21,18 +39,13 @@ const useLabel_unstable = (props, ref)=>{
             },
             elementType: 'span'
         }),
-        weight,
-        size,
         components: {
             root: 'label',
             required: 'span'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('label', {
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLLabelElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: ref,
-            ...props
+            ...rest
         }), {
             elementType: 'label'
         })

package/lib-commonjs/components/Label/useLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Label/useLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { LabelProps, LabelState } from './Label.types';\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles_unstable,\n * before being passed to renderLabel_unstable.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {\n  const { disabled = false, required = false, weight = 'regular', size = 'medium' } = props;\n  return {\n    disabled,\n    required: slot.optional(required === true ? '*' : required || undefined, {\n      defaultProps: { 'aria-hidden': 'true' },\n      elementType: 'span',\n    }),\n    weight,\n    size,\n    components: { root: 'label', required: 'span' },\n    root: slot.always(\n      getIntrinsicElementProps('label', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLLabelElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLLabelElement>,\n        ...props,\n      }),\n      { elementType: 'label' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useLabel_unstable","props","ref","disabled","required","weight","size","optional","undefined","defaultProps","elementType","components","root","always"],"mappings":";;;;+BAaaG;;;;;;;iEAbU,QAAQ;gCACgB,4BAA4B;AAYpE,0BAA0B,CAACC,OAAmBC;IACnD,MAAM,EAAEC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAEC,SAAS,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGL;IACpF,OAAO;QACLE;QACAC,UAAUL,oBAAAA,CAAKQ,QAAQ,CAACH,aAAa,OAAO,MAAMA,YAAYI,WAAW;YACvEC,cAAc;gBAAE,eAAe;YAAO;YACtCC,aAAa;QACf;QACAL;QACAC;QACAK,YAAY;YAAEC,MAAM;YAASR,UAAU;QAAO;QAC9CQ,MAAMb,oBAAAA,CAAKc,MAAM,KACff,wCAAAA,EAAyB,SAAS;YAChC,SAAS;YACT,8EAA8E;YAC9E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAES,aAAa;QAAQ;IAE3B;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Label/useLabel.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { LabelBaseProps, LabelBaseState, LabelProps, LabelState } from './Label.types';\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles_unstable,\n * before being passed to renderLabel_unstable.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {\n  const { weight = 'regular', size = 'medium', ...baseProps } = props;\n  const state = useLabelBase_unstable(baseProps, ref as React.Ref<HTMLLabelElement>);\n\n  return {\n    weight,\n    size,\n    ...state,\n  };\n};\n\n/**\n * Create the base state required to render Label, without design-specific props (size, weight).\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabelBase_unstable = (props: LabelBaseProps, ref: React.Ref<HTMLLabelElement>): LabelBaseState => {\n  const { disabled = false, required = false, ...rest } = props;\n  return {\n    disabled,\n    required: slot.optional(required === true ? '*' : required || undefined, {\n      defaultProps: { 'aria-hidden': 'true' },\n      elementType: 'span',\n    }),\n    components: { root: 'label', required: 'span' },\n    root: slot.always(\n      getIntrinsicElementProps('label', {\n        ref: ref as React.Ref<HTMLLabelElement>,\n        ...rest,\n      }),\n      { elementType: 'label' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useLabel_unstable","props","ref","weight","size","baseProps","state","useLabelBase_unstable","disabled","required","rest","optional","undefined","defaultProps","elementType","components","root","always"],"mappings":"AAAA;;;;;;;;;;;;yBAgCaU;eAAAA;;qBAjBAP;;;;;iEAbU,QAAQ;gCACgB,4BAA4B;AAYpE,MAAMA,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,SAAS,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9D,MAAMK,QAAQC,sBAAsBF,WAAWH;IAE/C,OAAO;QACLC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AAQK,8BAA8B,CAACL,OAAuBC;IAC3D,MAAM,EAAEM,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGC,MAAM,GAAGT;IACxD,OAAO;QACLO;QACAC,UAAUV,oBAAAA,CAAKY,QAAQ,CAACF,aAAa,OAAO,MAAMA,YAAYG,WAAW;YACvEC,cAAc;gBAAE,eAAe;YAAO;YACtCC,aAAa;QACf;QACAC,YAAY;YAAEC,MAAM;YAASP,UAAU;QAAO;QAC9CO,MAAMjB,oBAAAA,CAAKkB,MAAM,KACfnB,wCAAAA,EAAyB,SAAS;YAChCI,KAAKA;YACL,GAAGQ,IAAI;QACT,IACA;YAAEI,aAAa;QAAQ;IAE3B;AACF,EAAE"}

package/lib-commonjs/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderLabel_unstable: function() {
         return _Label.renderLabel_unstable;
     },
+    useLabelBase_unstable: function() {
+        return _Label.useLabelBase_unstable;
+    },
     useLabelStyles_unstable: function() {
         return _Label.useLabelStyles_unstable;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Label, labelClassNames, renderLabel_unstable, useLabelStyles_unstable, useLabel_unstable } from './Label';\nexport type { LabelProps, LabelSlots, LabelState } from './Label';\n"],"names":["Label","labelClassNames","renderLabel_unstable","useLabelStyles_unstable","useLabel_unstable"],"mappings":";;;;;;;;;;;;eAASA,YAAK;;;eAAEC,sBAAe;;;eAAEC,2BAAoB;;;eAAEC,8BAAuB;;;eAAEC,wBAAiB;;;uBAAQ,UAAU"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Label,\n  labelClassNames,\n  renderLabel_unstable,\n  useLabelStyles_unstable,\n  useLabel_unstable,\n  useLabelBase_unstable,\n} from './Label';\nexport type { LabelBaseProps, LabelBaseState, LabelProps, LabelSlots, LabelState } from './Label';\n"],"names":["Label","labelClassNames","renderLabel_unstable","useLabelStyles_unstable","useLabel_unstable","useLabelBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-label",
-  "version": "9.3.15",
+  "version": "9.4.0",
   "description": "Fluent UI React Label component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",